:root {
  --bg: #0a0e14;
  --tile: #0f1520;
  --tile-hover: #141c2a;
  --border: #1e2d42;
  --accent: #004170;
  --accent-light: #0062aa;
  --red: #DA291C;
  --red-light: #ff3b2c;
  --text: #e8eef5;
  --muted: #5a7a9a;
  --green: #22c55e;
  --overlay: rgba(0,0,0,0.8);
  --fs-mul: 1;
}


/* ── FONT SIZE SCALE ── */
/* --fs-mul est défini via JS, fs-scaled activé dès qu'on dépasse la base */
body.fs-scaled .tile { overflow: hidden; }
body.fs-scaled .tile-sub { font-size: calc(12px * var(--fs-mul,1)); }
body.fs-scaled .about-bio { font-size: calc(12px * var(--fs-mul,1)); }
body.fs-scaled .about-role { font-size: calc(11px * var(--fs-mul,1)); }
body.fs-scaled .about-name { font-size: calc(46px * var(--fs-mul,1)); }
body.fs-scaled .tag { font-size: calc(10px * var(--fs-mul,1)); }
body.fs-scaled .proj-item-preview { font-size: calc(11px * var(--fs-mul,1)); }
body.fs-scaled .proj-item-preview span { font-size: calc(12px * var(--fs-mul,1)); }
body.fs-scaled .skill-bar-header { font-size: calc(10px * var(--fs-mul,1)); }
body.fs-scaled .xp-item-role { font-size: calc(12px * var(--fs-mul,1)); }
body.fs-scaled .xp-item-co { font-size: calc(9px * var(--fs-mul,1)); }
body.fs-scaled .contact-chip { font-size: calc(11px * var(--fs-mul,1)); }
body.fs-scaled .github-username { font-size: calc(18px * var(--fs-mul,1)); }
body.fs-scaled .github-handle { font-size: calc(10px * var(--fs-mul,1)); }
body.fs-scaled .github-repo-item { font-size: calc(11px * var(--fs-mul,1)); }
body.fs-scaled .gh-repo-name { font-size: calc(11px * var(--fs-mul,1)); }
body.fs-scaled .footer-tile-text { font-size: calc(9px * var(--fs-mul,1)); }
body.fs-scaled .stile-val { font-size: calc(11px * var(--fs-mul,1)); }
body.fs-scaled .stile-key { font-size: calc(8px * var(--fs-mul,1)); }
body.fs-scaled .about-popup-text { font-size: calc(15px * var(--fs-mul,1)); }
body.fs-scaled .xp-popup-desc { font-size: calc(14px * var(--fs-mul,1)); }
body.fs-scaled .xp-popup-role { font-size: calc(24px * var(--fs-mul,1)); }
body.fs-scaled .footer-story-body { font-size: calc(13px * var(--fs-mul,1)); }
body.fs-scaled .proj-card-desc { font-size: calc(11px * var(--fs-mul,1)); }
body.fs-scaled .contact-popup-value { font-size: calc(12px * var(--fs-mul,1)); }
body.fs-scaled .skill-popup-bar-header { font-size: calc(11px * var(--fs-mul,1)); }
body.fs-scaled .popup-title { font-size: calc(52px * var(--fs-mul,1)); }
body.fs-scaled .popup-subtitle { font-size: calc(13px * var(--fs-mul,1)); }
body.fs-scaled .github-popup-repo-desc { font-size: calc(13px * var(--fs-mul,1)); }
body.fs-scaled .github-popup-bio { font-size: calc(14px * var(--fs-mul,1)); }

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; min-height: 100vh; overflow-x: hidden; }

/* ── TOPBAR ── */
.topbar { background: var(--accent); padding: 0 24px; height: 48px; display: flex; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 100; border-bottom: 2px solid var(--red); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1400px; }
.topbar-left { display: flex; align-items: center; gap: 20px; }
.logo { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 3px; color: #fff; display: flex; align-items: center; gap: 10px; }
.logo-badge { background: var(--red); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 2px; letter-spacing: 1px; font-family: 'DM Mono', monospace; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

/* ── NAV — base commune ── */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 48px;
}

/* Style partagé par les <a> simples ET les groupes dropdown */
.topbar-nav > a,
.nav-dd-group {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  gap: 7px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-sizing: border-box;
}

.topbar-nav > a:hover,
.nav-dd-group:hover {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.07);
}

.nav-dropdown-wrap.open .nav-dd-group {
  color: #fff;
  border-bottom-color: var(--red);
  background: rgba(255,255,255,0.07);
}

/* ── NAV DROPDOWNS ── */
.nav-dropdown-wrap { position: relative; display: inline-flex; align-items: center; height: 48px; }

.nav-dd-trigger {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

/* Chevron SVG inline via mask-image — propre, net, aligné */
.nav-dd-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 5px;
  flex-shrink: 0;
  margin-left: -4px;
}
.nav-dd-chevron::after {
  content: '';
  display: block;
  width: 10px;
  height: 6px;
  background-color: rgba(255,255,255,0.55);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0 L5 6 L10 0' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0 L5 6 L10 0' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.15s, transform 0.2s;
}
.nav-dd-group:hover .nav-dd-chevron::after { background-color: rgba(255,255,255,0.9); }
.nav-dropdown-wrap.open .nav-dd-chevron::after { transform: rotate(180deg); background-color: var(--red); }

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 185px;
  background: #0b1622;
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--red);
  border-radius: 0 3px 3px 3px;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  animation: ddFadeIn 0.12s ease;
}
@keyframes ddFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-dropdown-wrap.open .nav-dropdown { display: block; }

.nav-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11.5px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.7);
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.1s, color 0.1s, padding-left 0.1s;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dd-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--red);
  transition: width 0.1s;
}
.nav-dd-item:hover { background: rgba(218,41,28,0.1); color: #fff; padding-left: 19px; }
.nav-dd-item:hover::before { width: 2px; }
.nav-dd-item:last-child { border-bottom: none; }
.nav-dd-icon { font-size: 12px; opacity: 0.6; flex-shrink: 0; }






/* ── BENTO ENTRANCE ANIMATION ── */
@keyframes tileEntrance {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.grid-container .tile {
  opacity: 0;
  animation: tileEntrance 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger chaque tile avec un délai croissant */
.grid-container .tile:nth-child(1)  { animation-delay: 0.05s; }
.grid-container .tile:nth-child(2)  { animation-delay: 0.12s; }
.grid-container .tile:nth-child(3)  { animation-delay: 0.19s; }
.grid-container .tile:nth-child(4)  { animation-delay: 0.26s; }
.grid-container .tile:nth-child(5)  { animation-delay: 0.33s; }
.grid-container .tile:nth-child(6)  { animation-delay: 0.40s; }
.grid-container .tile:nth-child(7)  { animation-delay: 0.47s; }
.grid-container .tile:nth-child(8)  { animation-delay: 0.54s; }
.grid-container .tile:nth-child(9)  { animation-delay: 0.58s; }
.grid-container .tile:nth-child(10) { animation-delay: 0.62s; }

/* ── NAV ACTIVE STATE ── */
/* Lien simple actif */
.topbar-nav > a.nav-active {
  color: #fff;
  border-bottom-color: var(--red);
  background: rgba(218, 41, 28, 0.12);
}

/* Groupe dropdown actif */
.nav-dd-group.nav-active {
  color: #fff;
  border-bottom-color: var(--red);
  background: rgba(218, 41, 28, 0.12);
}

/* Point rouge animé sur les items actifs */
.topbar-nav > a.nav-active::before,
.nav-dd-group.nav-active::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: navDotPulse 1.8s ease-in-out infinite;
}

@keyframes navDotPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── TILES ── */
.tile { background: var(--tile); border: 1px solid var(--border); border-radius: 3px; padding: 18px; cursor: pointer; transition: border-color 0.1s, background 0.1s; position: relative; overflow: hidden; user-select: none; }
.tile::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); opacity: 0; transition: opacity 0.1s; }
.tile:hover { border-color: var(--accent-light); background: var(--tile-hover); }
.tile:hover::after { opacity: 1; }
.tile-header {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Ajouts pour meilleure lisibilité et alignement propre */
  min-height: 18px;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 36px); /* laisser de la place pour la flèche */
}
.tile-header-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  margin-top: 0; /* forcer alignement vertical centré */
}
.tile-title { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px; line-height: 1; }
.tile-sub { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.tile-arrow { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); transition: all 0.2s; }
.tile:hover .tile-arrow { border-color: var(--red); color: var(--red); transform: rotate(45deg); }

/* Tile sizes */
.tile-about   { grid-column: span 5; grid-row: span 2; min-height: 280px; }
.tile-projects{ grid-column: span 4; grid-row: span 2; min-height: 280px; }
.tile-skills  { grid-column: span 3; grid-row: span 2; min-height: 280px; }
.tile-xp      { grid-column: span 4; min-height: 140px; }
.tile-cv      { grid-column: span 3; min-height: 140px; }
.tile-contact { grid-column: span 5; min-height: 140px; }

/* ── ABOUT TILE ── */
.about-name { font-family: 'Bebas Neue', sans-serif; font-size: 46px; line-height: 1; letter-spacing: 2px; margin-top: 4px; }
.about-name .red { color: var(--red); }
.about-role { font-size: 11px; color: var(--accent-light); font-family: 'DM Mono', monospace; letter-spacing: 2px; margin-top: 6px; text-transform: uppercase; }
.about-bio { font-size: 12px; color: #7a99b8; margin-top: 12px; line-height: 1.7; max-width: 340px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.tag { background: rgba(0,65,112,0.2); border: 1px solid rgba(0,65,112,0.5); color: var(--accent-light); font-size: 10px; font-family: 'DM Mono', monospace; padding: 2px 8px; border-radius: 2px; }
.tag.red-tag { background: rgba(218,41,28,0.12); border: 1px solid rgba(218,41,28,0.35); color: #ff6b5e; }

/* ── PROJECTS TILE ── */
.proj-count { font-family: 'Bebas Neue', sans-serif; font-size: 64px; color: var(--red); line-height: 1; margin-top: 4px; }
.proj-list-preview { margin-top: 10px; display: flex; flex-direction: column; }
.proj-item-preview { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); padding: 5px 0; border-bottom: 1px solid var(--border); }
.proj-item-preview span { color: var(--text); font-size: 12px; }
.proj-tech-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.proj-dot-perso { background: var(--red); }
.proj-dot-stage { background: #54c5f8; }
.proj-dot-ap    { background: #a78bfa; }

/* ── PROJ CATEGORIES BADGES ── */
.proj-categories {
  display: flex;
  gap: 6px;
  margin: 6px 0 10px;
  flex-wrap: wrap;
}
.proj-cat-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 600;
  border: 1px solid transparent;
}
.proj-cat-num {
  font-size: 9px;
  opacity: .8;
}
.proj-cat-perso {
  background: rgba(229,57,53,.12);
  border-color: rgba(229,57,53,.35);
  color: #ff6b6b;
}
.proj-cat-stage {
  background: rgba(84,197,248,.1);
  border-color: rgba(84,197,248,.3);
  color: #54c5f8;
}
.proj-cat-ap {
  background: rgba(167,139,250,.1);
  border-color: rgba(167,139,250,.3);
  color: #a78bfa;
}

/* ── SKILLS TILE ── */
.skills-grid { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.skill-bar { display: flex; flex-direction: column; gap: 3px; }
.skill-bar-header { display: flex; justify-content: space-between; font-size: 10px; color: #6a8aaa; font-family: 'DM Mono', monospace; }
.skill-bar-track { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.skill-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--red)); border-radius: 2px; }

/* ── CV TILE ── */
.cv-big { font-family: 'Bebas Neue', sans-serif; font-size: 38px; color: var(--text); line-height: 1; margin-top: 4px; }
.cv-btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 1.5px; padding: 7px 18px; border-radius: 2px; text-decoration: none; transition: background 0.2s; }
.cv-btn:hover { background: var(--red-light); }
.cv-btn-preview { background: var(--accent-light); border: none; color: #fff; margin-top: 6px; font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 1.5px; padding: 7px 18px; border-radius: 2px; cursor: pointer; transition: background 0.2s; display: inline-flex; align-items: center; gap: 6px; }
.cv-btn-preview:hover { background: #0078cc; }

/* ── XP TILE ── */
.xp-top { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; margin-bottom: 10px; }
.xp-count { font-family: 'Bebas Neue', sans-serif; font-size: 42px; color: var(--red); line-height: 1; }
.xp-count-label { font-size: 10px; color: var(--muted); font-family: 'DM Mono', monospace; letter-spacing: 1px; }
.xp-timeline { display: flex; gap: 7px; }
.xp-item { flex: 1; padding: 8px 10px 10px; background: rgba(0,65,112,0.1); border: 1px solid var(--border); border-top: 2px solid var(--accent); border-radius: 2px; display: flex; flex-direction: column; gap: 3px; transition: border-top-color 0.2s, background 0.2s; }
.tile-xp:hover .xp-item { background: rgba(0,65,112,0.18); }
.xp-item-badge { display: inline-block; font-family: 'DM Mono', monospace; font-size: 7px; letter-spacing: 2px; color: var(--accent-light); background: rgba(0,98,170,0.15); border: 1px solid rgba(0,98,170,0.3); padding: 1px 5px; border-radius: 2px; width: fit-content; margin-bottom: 2px; }
.xp-item-badge.xp-badge-blue { color: #5aaff5; background: rgba(90,175,245,0.1); border-color: rgba(90,175,245,0.25); }
.xp-item-badge.xp-badge-red { color: #ff6b5e; background: rgba(218,41,28,0.12); border-color: rgba(218,41,28,0.3); }
.xp-item-role { font-size: 12px; font-weight: 600; color: var(--text); }
.xp-item-co { font-size: 9px; color: var(--muted); font-family: 'DM Mono', monospace; line-height: 1.4; }

/* ── CONTACT TILE ── */
.contact-links { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.contact-chip { background: transparent; border: 1px solid var(--border); color: var(--text); font-size: 10px; font-family: 'DM Mono', monospace; padding: 4px 9px; border-radius: 2px; text-decoration: none; transition: all 0.2s; }
.contact-chip:hover { border-color: var(--accent-light); color: var(--accent-light); }

/* ── OVERLAYS ── */
.overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 200; display: none; align-items: center; justify-content: center; padding: 40px; }
.overlay.active { display: flex; animation: fadeIn 0.08s ease; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.popup { background: #0c1420; border: 1px solid var(--border); border-top: 3px solid var(--red); width: 100%; max-width: 1200px; max-height: 92vh; overflow-y: auto; animation: slideUp 0.1s ease; }
.popup::-webkit-scrollbar { width: 4px; }
.popup::-webkit-scrollbar-thumb { background: var(--border); }

.popup-topbar { background: var(--accent); padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.popup-section-label { font-family: 'DM Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.6); letter-spacing: 2px; text-transform: uppercase; }
.popup-breadcrumb { display: flex; align-items: center; gap: 6px; font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; color: #fff; }
.popup-breadcrumb-sep { opacity: 0.5; font-size: 14px; }
.popup-close { width: 28px; height: 28px; background: rgba(218,41,28,0.3); border: 1px solid rgba(218,41,28,0.5); border-radius: 2px; color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.popup-close:hover { background: var(--red); }

.popup-body { padding: 32px; }
.popup-title { font-family: 'Bebas Neue', sans-serif; font-size: 52px; letter-spacing: 2px; line-height: 1; margin-bottom: 4px; }
.popup-subtitle { font-size: 13px; color: var(--muted); font-family: 'DM Mono', monospace; letter-spacing: 1px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.popup-section { margin-bottom: 26px; }
.popup-section-title { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--red); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.popup-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── STATS ── */
.stats-row { display: flex; gap: 10px; margin-bottom: 22px; }
.stat-box { flex: 1; background: rgba(0,65,112,0.12); border: 1px solid rgba(0,65,112,0.3); padding: 12px; text-align: center; }
.stat-box-num { font-family: 'Bebas Neue', sans-serif; font-size: 30px; color: var(--red); }
.stat-box-label { font-size: 10px; color: var(--muted); font-family: 'DM Mono', monospace; letter-spacing: 1px; margin-top: 2px; }

/* ── PROJECT CARDS ── */
.proj-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.proj-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; transition: border-color 0.1s; display: flex; flex-direction: column; }
.proj-card:hover { border-color: var(--accent-light); }
.proj-card-preview { position: relative; height: 100px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; }
.proj-card-preview-img { background-size: cover; background-position: center center; background-repeat: no-repeat; }
.proj-card-preview-mock { font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; font-size: 12px; color: rgba(255,255,255,0.6); text-align: center; }
.proj-card-preview-icon { font-size: 26px; }
.proj-preview-badge { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.1); font-size: 8px; font-family: 'DM Mono', monospace; padding: 2px 6px; border-radius: 2px; color: rgba(255,255,255,0.7); letter-spacing: 1px; }
.proj-preview-badge.unavail { background: rgba(218,41,28,0.4); }
.proj-card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.proj-card-name { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; }
.proj-card-desc { font-size: 11px; color: #6a8aaa; margin-top: 4px; line-height: 1.6; flex: 1; }
.proj-card-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }
.proj-card-tag { background: rgba(0,65,112,0.2); border: 1px solid rgba(0,65,112,0.4); color: var(--accent-light); font-size: 9px; padding: 1px 6px; font-family: 'DM Mono', monospace; border-radius: 2px; }
.proj-card-links { display: flex; gap: 6px; margin-top: 10px; }
.proj-link { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--muted); text-decoration: none; padding: 4px 10px; border: 1px solid var(--border); border-radius: 2px; transition: all 0.2s; }
.proj-link:hover { color: var(--red); border-color: var(--red); }
.proj-link.disabled { opacity: 0.3; pointer-events: none; }

/* ── SKILLS SECTION CONTAINER ── */
#tile-skills-wrapper .skills-section-container { position: relative; min-height: 180px; }

.skills-popup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.skill-category-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; margin-bottom: 10px; }
.skill-popup-bar { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; }
.skill-popup-bar-header { display: flex; justify-content: space-between; font-size: 13px; color: #8aaac8; }
.skill-popup-bar-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.skill-popup-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--red)); border-radius: 2px; }

/* ── SKILL LEVELS (qualitatifs) ── */
.skill-level { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; }
.skill-level-expert  { background: rgba(218,41,28,0.15); border: 1px solid rgba(218,41,28,0.4); color: #ff6b5e; }
.skill-level-advanced{ background: rgba(0,98,170,0.2);  border: 1px solid rgba(0,98,170,0.5);  color: var(--accent-light); }
.skill-level-mid     { background: rgba(90,122,154,0.15); border: 1px solid rgba(90,122,154,0.35); color: #7a99b8; }
.skill-level-notions { background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--muted); }

/* ── BTS SIO BLOCS ── */
.bts-blocs-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.bts-bloc { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-top: 2px solid var(--accent); padding: 14px 16px; border-radius: 2px; }
.bts-bloc-primary { border-top-color: var(--accent-light); background: rgba(0,65,112,0.08); }
.bts-bloc-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.bts-bloc-badge { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; background: rgba(90,122,154,0.2); border: 1px solid var(--border); color: var(--muted); padding: 2px 8px; border-radius: 2px; flex-shrink: 0; }
.bts-bloc-badge-primary { background: rgba(0,98,170,0.2); border-color: rgba(0,98,170,0.4); color: var(--accent-light); }
.bts-bloc-badge-red     { background: rgba(218,41,28,0.12); border-color: rgba(218,41,28,0.35); color: #ff6b5e; }
.bts-bloc-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.bts-bloc-sub   { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.bts-items { display: flex; flex-direction: column; gap: 6px; }
.bts-item  { display: flex; align-items: baseline; gap: 8px; }
.bts-item-code { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; color: var(--muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 1px 5px; border-radius: 2px; flex-shrink: 0; }
.bts-item-code-primary { color: var(--accent-light); background: rgba(0,98,170,0.15); border-color: rgba(0,98,170,0.3); }
.bts-item-code-red     { color: #ff6b5e; background: rgba(218,41,28,0.1); border-color: rgba(218,41,28,0.25); }
.bts-item-label { font-size: 12px; color: #8aaac8; line-height: 1.4; }
/* ── XP POPUP ── */
.xp-popup-list { display: flex; flex-direction: column; gap: 10px; }
.xp-popup-item { background: rgba(0,65,112,0.07); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 16px 18px; }
.xp-popup-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.xp-popup-role { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 1px; }
.xp-popup-date { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--red); background: rgba(218,41,28,0.1); padding: 3px 10px; border: 1px solid rgba(218,41,28,0.3); border-radius: 2px; white-space: nowrap; flex-shrink: 0; }
.xp-popup-co { font-size: 12px; color: var(--muted); margin-top: 2px; font-family: 'DM Mono', monospace; }
.xp-popup-desc { font-size: 14px; color: #7a99b8; margin-top: 10px; line-height: 1.85; }

/* ── CONTACT POPUP ── */
.contact-popup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-popup-item { background: rgba(255,255,255,0.02); border: 1px solid var(--border); padding: 14px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); transition: all 0.2s; }
.contact-popup-item:hover { border-color: var(--accent-light); background: rgba(0,65,112,0.1); }
.contact-icon { width: 34px; height: 34px; background: rgba(0,65,112,0.2); border: 1px solid rgba(0,65,112,0.4); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.contact-popup-label { font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.contact-popup-value { font-size: 14px; color: var(--text); margin-top: 2px; }

/* ── FORM ── */
.form-input,
.form-textarea {
  background: rgba(0,65,112,0.08);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  outline: none;
  border-radius: 2px;
  transition: border-color 0.2s;
  width: 100%;
}
.form-textarea { resize: vertical; }
.form-submit {
  background: var(--red);
  color: #fff;
  border: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  padding: 11px 28px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s;
  align-self: flex-start;
}

/* ── CV POPUP ── */
.cv-popup-preview { background: linear-gradient(135deg, rgba(0,65,112,0.15), rgba(0,30,70,0.25)); border: 1px solid rgba(0,98,170,0.35); padding: 36px 32px; text-align: center; margin-bottom: 18px; border-radius: 4px; position: relative; overflow: hidden; }
.cv-popup-preview::before { content:''; position:absolute; top:-40%; left:-20%; width:140%; height:180%; background: radial-gradient(ellipse at 50% 30%, rgba(0,98,170,0.12) 0%, transparent 65%); pointer-events:none; }
.cv-popup-icon { font-size: 52px; opacity: 0.3; margin-bottom: 12px; }
.cv-popup-name { font-family: 'Bebas Neue', sans-serif; font-size: 38px; letter-spacing: 4px; text-shadow: 0 0 40px rgba(0,120,200,0.3); }
.cv-popup-desc { font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: 0.5px; }
.cv-popup-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 2px; padding: 11px 28px; border-radius: 2px; text-decoration: none; transition: background 0.2s; margin-top: 16px; border: none; cursor: pointer; }
.cv-popup-btn:hover { background: var(--red-light); }
.cv-preview-btn { background: var(--accent-light) !important; }
.cv-preview-btn:hover { background: #0078cc !important; }

/* CV iframe viewer */
.cv-iframe-wrapper {
  display: none;
  margin-top: 16px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0,98,170,0.4);
  background: #111827;
  box-shadow: 0 12px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,65,112,0.2);
  animation: slideUp 0.15s ease;
}
.cv-iframe-topbar {
  background: linear-gradient(90deg, var(--accent), #004a8a);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,98,170,0.5);
}
.cv-iframe-title {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.cv-iframe-dots { display: flex; gap: 5px; }
.cv-iframe-dot { width: 8px; height: 8px; border-radius: 50%; }
.cv-iframe-dot:nth-child(1) { background: #ff5f56; }
.cv-iframe-dot:nth-child(2) { background: #ffbd2e; }
.cv-iframe-dot:nth-child(3) { background: #27c93f; }
.cv-iframe-inner iframe { display: block; width: 100%; height: 740px; border: none; }

/* ── ABOUT POPUP (redesign) ── */
.popup-about-narrow { max-width: 2000px !important; width: 91vw; }
#popup-cv .popup { max-width: 1020px !important; }
.about-popup-body { padding: 28px 32px 32px; }
.about-popup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-popup-text { font-size: 18px; color: #8aaac8; line-height: 1.8; }

/* Hero */
.about-hero { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.about-hero-avatar { width: 56px; height: 56px; background: linear-gradient(135deg, var(--accent), var(--red)); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: #fff; letter-spacing: 2px; flex-shrink: 0; }
.about-hero-status { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--green); letter-spacing: 1px; text-transform: uppercase; }
.about-status-dot-inline { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); flex-shrink: 0; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.about-hero-right { flex: 1; }
.about-hero-right .popup-title { font-size: 44px; margin-bottom: 6px; line-height: 1; }
.about-hero-right .popup-subtitle { font-size: 11px; margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* Stats compact horizontal */
.about-stats-col { display: flex; align-items: center; justify-content: space-between; background: rgba(0,65,112,0.1); border: 1px solid rgba(0,65,112,0.25); padding: 14px 20px; margin-bottom: 24px; }
.about-stat-item { text-align: center; flex: 1; }
.about-stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--red); line-height: 1; }
.about-stat-label { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.about-stat-divider { width: 1px; height: 36px; background: var(--border); }

/* Main 2-col grid */
.about-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

/* Passion list */
.about-passion-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.about-passion-item { display: flex; align-items: center; gap: 12px; padding: 7px 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-left: 2px solid var(--red); transition: border-color 0.15s, background 0.15s; }
.about-passion-item:hover { background: rgba(0,65,112,0.1); border-color: var(--accent-light); border-left-color: var(--red); }
.about-passion-icon { font-size: 16px; flex-shrink: 0; }
.about-passion-name { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text); letter-spacing: 1px; text-transform: uppercase; }
.about-passion-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Goals */
.about-goals-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.about-goal-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: rgba(0,65,112,0.06); border: 1px solid var(--border); border-left: 2px solid var(--accent-light); font-size: 12px; color: var(--muted); font-family: 'DM Sans', sans-serif; }
.about-goal-item:hover { background: rgba(0,65,112,0.12); }
.about-goal-icon { font-size: 14px; flex-shrink: 0; }

/* Dispo banner */
.about-dispo-banner { display: flex; align-items: center; gap: 10px; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.2); padding: 10px 14px; font-size: 12px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — du plus grand au plus petit
   ══════════════════════════════════════════════════════════ */

/* ── LARGE SCREENS (≥ 1600px) ── */
/* ── TABLET LANDSCAPE  (≤ 1200px) ── */
/* ── TABLET PORTRAIT (≤ 960px) ── */
/* ── MOBILE (≤ 640px) — 1 colonne, tiles pleine largeur ── */
/* ── SKILLS TILE FM-STYLE DOTS ── */

/* Le wrapper devient le "viewport" du slider */
.skills-section-slider {
  position: relative;
  overflow: hidden;
  /* hauteur fixe pour contenir les deux sections pendant la transition */
  min-height: 170px;
}

.skills-section {
  display: none;
  width: 100%;
}
.skills-section.active {
  display: block;
}

/* Pendant la transition : la sortante devient absolute pour ne pas pousser la nouvelle */
.skills-section.is-leaving {
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  pointer-events: none;
}

.skills-section.slide-in-right    { animation: slideInRight  0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.skills-section.slide-in-left     { animation: slideInLeft   0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.skills-section.slide-out-left    { animation: slideOutLeft  0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.skills-section.slide-out-right   { animation: slideOutRight 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

@keyframes slideInRight  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideInLeft   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes slideOutLeft  { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes slideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }

.tile-dots { position: absolute; bottom: 14px; right: 14px; display: flex; gap: 6px; align-items: center; }
.tile-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border); border: 1px solid var(--muted); cursor: pointer; transition: all 0.2s; }
.tile-dot.active { background: var(--red); border-color: var(--red); box-shadow: 0 0 6px rgba(218,41,28,0.6); }
.tile-dot:hover { background: var(--accent-light); border-color: var(--accent-light); }

/* ── Dots plus gros pour écrans larges ≥ 1920px ── */
/* ── GITHUB TILE ── */
.tile-github { grid-column: span 8; min-height: 140px; }
.github-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.github-avatar { width: 34px; height: 34px; background: rgba(0,65,112,0.3); border: 1px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.github-username { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; }
.github-handle { font-size: 10px; color: var(--muted); font-family: 'DM Mono', monospace; }
.github-stats-row { display: flex; gap: 10px; margin-bottom: 10px; }
.github-stat { background: rgba(0,65,112,0.1); border: 1px solid var(--border); padding: 10px 18px; text-align: center; min-width: 80px; }
.github-stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--red); line-height: 1; }
.github-stat-label { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; letter-spacing: 1px; margin-top: 2px; }
.github-recent-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.github-repos-list { display: flex; flex-direction: column; gap: 3px; }
.github-repo-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); padding: 4px 0; border-bottom: 1px solid rgba(30,45,66,0.5); }
.gh-repo-name { color: var(--text); font-size: 11px; }
.gh-repo-lang { font-size: 9px; font-family: 'DM Mono', monospace; color: var(--accent-light); margin-left: auto; }
.gh-repo-stars { font-size: 9px; font-family: 'DM Mono', monospace; color: var(--muted); }

/* ── GITHUB POPUP ── */
.github-popup-profile { display: flex; align-items: center; gap: 16px; background: rgba(0,65,112,0.08); border: 1px solid var(--border); padding: 16px; margin-bottom: 6px; }
.github-popup-avatar { width: 52px; height: 52px; background: rgba(0,65,112,0.3); border: 1px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.github-popup-name { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 1px; }
.github-popup-bio { font-size: 14px; color: var(--muted); margin-top: 2px; }
.github-popup-stats { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--accent-light); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.github-popup-repos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.github-popup-repo-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-left: 2px solid var(--accent); padding: 12px 14px; transition: border-color 0.2s; text-decoration: none; display: block; }
.github-popup-repo-card:hover { border-color: var(--accent-light); }
.github-popup-repo-name { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; color: var(--text); }
.github-popup-repo-desc { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.github-popup-repo-meta { display: flex; gap: 10px; margin-top: 8px; font-size: 10px; font-family: 'DM Mono', monospace; color: var(--muted); }
.github-popup-repo-lang { color: var(--accent-light); }
/* ── NO-SCROLL LAYOUT (desktop only) ── */
/* ── GRAPHISME TILE ── */
.graphisme-content { margin-top: 8px; }
.graphisme-preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 8px; }
.graphisme-preview-item { height: 48px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: flex-end; padding: 4px 6px; transition: transform 0.2s; }
.tile-graphisme:hover .graphisme-preview-item { transform: scale(1.02); }
.graphisme-preview-label { font-family: 'DM Mono', monospace; font-size: 8px; color: rgba(255,255,255,0.6); letter-spacing: 1px; text-transform: uppercase; }
.graphisme-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

/* ── FOOTER TILE ── */
.footer-tile-inner { text-align: center; padding: 8px; }
.footer-tile-text { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--muted); letter-spacing: 1px; line-height: 1.7; }
.footer-tile-hint { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.footer-tile-ball { font-size: 16px; }
.footer-tile-story { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--accent-light); letter-spacing: 1px; }
.tile-footer:hover .footer-tile-story { color: var(--red); }
.tile-footer::after { display: none; }

/* ── GRAPHISME GALLERY ── */
/* galerie — voir bloc principal plus bas */

/* ── FOOTER STORY POPUP (legacy) ── */
.footer-story-body { font-size: 13px; color: #8aaac8; line-height: 1.95; display: flex; flex-direction: column; gap: 12px; }
.footer-story-highlight { color: var(--text); font-weight: 500; font-size: 14px; }
.footer-story-divider { height: 1px; background: var(--border); margin: 6px 0; }
.footer-story-quote { background: rgba(0,65,112,0.12); border-left: 3px solid var(--red); padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; font-style: italic; color: var(--text); font-size: 14px; }

/* ══════════════════════════════════════════════
   FM26 POPUP — FULL REDESIGN
   ══════════════════════════════════════════════ */
.fm26-popup { background:#0d1520; border:1px solid #1e3a5a; border-radius:6px; display:flex; flex-direction:column; max-height:88vh; overflow:hidden; }
.fm26-topbar { display:flex; align-items:center; justify-content:space-between; background:#0a1829; border-bottom:2px solid #0062aa; padding:0 18px; min-height:52px; flex-shrink:0; }
.fm26-topbar-left { display:flex; flex-direction:column; gap:1px; }
.fm26-topbar-crumb { display:flex; align-items:center; gap:6px; font-family:'DM Mono',monospace; font-size:10px; color:#4a7fa5; letter-spacing:1px; text-transform:uppercase; }
.fm26-crumb-icon { font-size:12px; }
.fm26-crumb-sep { color:#1e3a5a; }
.fm26-crumb-label { color:#6aabcc; }
.fm26-topbar-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:2px; color:#e8edf4; line-height:1.1; }
.fm26-topbar-right { display:flex; align-items:center; gap:0; }
.fm26-topbar-tab { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; padding:6px 14px; cursor:pointer; color:#4a7fa5; border-bottom:2px solid transparent; transition:color .2s,border-color .2s; margin-bottom:-2px; user-select:none; }
.fm26-topbar-tab.active { color:#e8edf4; border-bottom-color:var(--red); }
.fm26-topbar-tab:hover:not(.active) { color:#9abfd8; }
.fm26-close-btn { background:none; border:none; cursor:pointer; color:#4a7fa5; font-size:16px; padding:6px 0 6px 14px; margin-left:8px; border-left:1px solid #1e3a5a; transition:color .2s; line-height:1; }
.fm26-close-btn:hover { color:var(--red); }
.fm26-body { display:grid; grid-template-columns:1fr 260px; flex:1; overflow:hidden; min-height:0; }
.fm26-main { overflow-y:auto; padding:0; display:flex; flex-direction:column; scrollbar-width:thin; scrollbar-color:#1e3a5a transparent; }
.fm26-main::-webkit-scrollbar { width:4px; }
.fm26-main::-webkit-scrollbar-thumb { background:#1e3a5a; border-radius:2px; }
.fm26-tab-panel { display:flex; flex-direction:column; }
.fm26-hero-banner { position:relative; width:100%; height:200px; overflow:hidden; flex-shrink:0; background:#0a1829; }
.fm26-hero-img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; filter:brightness(.6) saturate(.9); transition:filter .3s; }
.fm26-hero-banner:hover .fm26-hero-img { filter:brightness(.75) saturate(1); }
.fm26-hero-overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(10,24,41,.95) 0%,transparent 100%); padding:20px 22px 16px; display:flex; flex-direction:column; gap:4px; }
.fm26-hero-badge { font-family:'Bebas Neue',sans-serif; font-size:11px; letter-spacing:3px; color:#0062aa; background:rgba(0,98,170,.18); border:1px solid #0062aa; padding:2px 10px; display:inline-block; margin-bottom:4px; }
.fm26-hero-label { font-size:13px; color:#9abfd8; line-height:1.4; }
.fm26-story-body { padding:20px 22px 16px; font-size:13px; color:#7a9db8; line-height:1.85; display:flex; flex-direction:column; gap:10px; }
.fm26-story-body p { margin:0; }
.fm26-story-body .footer-story-highlight { color:#c8dde8; font-weight:500; font-size:14px; }
.fm26-story-body .footer-story-divider { height:1px; background:#1a2f46; margin:4px 0; }
.fm26-story-body .footer-story-quote { background:rgba(0,65,112,.15); border-left:3px solid var(--red); padding:12px 16px; display:flex; flex-direction:column; gap:4px; font-style:italic; color:#c8dde8; font-size:13px; border-radius:0 3px 3px 0; }
.fm26-screenshots-section { padding:4px 22px 22px; }
.fm26-section-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #1a2f46; }
.fm26-section-icon { font-size:13px; }
.fm26-section-title { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:#4a7fa5; }
.fm26-screenshots-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fm26-screenshots-grid--ui { grid-template-columns:1fr 1fr 1fr; }
.fm26-screen-card { border:1px solid #1a2f46; border-radius:4px; overflow:hidden; transition:border-color .2s,transform .2s; cursor:pointer; }
.fm26-screen-card:hover { border-color:#0062aa; transform:translateY(-2px); }
.fm26-screen-img-wrap { position:relative; height:130px; overflow:hidden; background:#080f1a; }
.fm26-screen-img-wrap img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .3s; }
.fm26-screen-card:hover .fm26-screen-img-wrap img { transform:scale(1.04); }
.fm26-screen-zoom-hint { position:absolute; top:8px; right:8px; background:rgba(0,98,170,.85); color:#fff; font-size:10px; padding:2px 6px; border-radius:2px; opacity:0; transition:opacity .2s; font-family:'DM Mono',monospace; pointer-events:none; }
.fm26-screen-card:hover .fm26-screen-zoom-hint { opacity:1; }
.fm26-screen-caption { background:#0a1525; padding:8px 12px; display:flex; align-items:center; gap:8px; font-size:11px; color:#6a8fa8; }
.fm26-screen-tag { font-family:'DM Mono',monospace; font-size:8px; letter-spacing:1.5px; background:rgba(0,98,170,.2); color:#4a9fd4; border:1px solid rgba(0,98,170,.3); padding:2px 6px; border-radius:2px; flex-shrink:0; }
.fm26-sidebar { background:#0a1220; border-left:1px solid #1a2f46; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#1e3a5a transparent; }
.fm26-sidebar::-webkit-scrollbar { width:3px; }
.fm26-sidebar::-webkit-scrollbar-thumb { background:#1e3a5a; }
.fm26-sidebar-block { padding:16px 18px; }
.fm26-sidebar-block-title { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:#0062aa; margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid #0d2236; }
.fm26-sidebar-divider { height:1px; background:#111e2e; }
.fm26-stat-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; }
.fm26-stat-label { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:#3a6080; width:54px; flex-shrink:0; }
.fm26-stat-value { color:#c8dde8; font-size:11px; }
.fm26-stat-bar-wrap { flex:1; height:4px; background:#0f1e30; border-radius:2px; overflow:hidden; }
.fm26-stat-bar { height:100%; border-radius:2px; }
.fm26-stat-num { font-family:'Bebas Neue',sans-serif; font-size:16px; color:#e8edf4; width:28px; text-align:right; line-height:1; }
.fm26-inspired-item { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:11px; color:#7a9db8; }
.fm26-inspired-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.fm26-sidebar-quote { padding:14px 18px 18px; border-top:1px solid #0d2236; }
.fm26-sidebar-quote-text { font-style:italic; font-size:12px; color:#9abfd8; line-height:1.6; margin-bottom:8px; }
.fm26-sidebar-quote-author { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1px; color:#3a6080; }
@media (max-width:720px) {
  .fm26-body { grid-template-columns:1fr; }
  .fm26-sidebar { border-left:none; border-top:1px solid #1a2f46; }
  .fm26-screenshots-grid--ui { grid-template-columns:1fr 1fr; }
  .fm26-hero-banner { height:140px; }
  .fm26-topbar-tab { font-size:9px; padding:6px 10px; }
}

/* ── FOOTER TILE REDESIGN ── */
.tile-footer {
  background: linear-gradient(135deg, var(--tile) 0%, rgba(0,65,112,0.25) 100%);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.tile-footer::before {
  content: 'MATTRIJK';
  position: absolute;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  color: rgba(0,65,112,0.15);
  letter-spacing: 6px;
  pointer-events: none;
  user-select: none;
}
.tile-footer:hover { border-color: var(--red); background: linear-gradient(135deg, var(--tile-hover) 0%, rgba(218,41,28,0.12) 100%); }
.tile-footer:hover::before { color: rgba(218,41,28,0.1); }
.footer-tile-inner { text-align: center; padding: 12px; position: relative; z-index: 1; }
.footer-tile-top { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.footer-tile-ball { font-size: 20px; }
.footer-tile-badge {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  background: var(--red);
  color: #fff;
  padding: 1px 8px;
  border-radius: 2px;
}
.footer-tile-copy {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--text);
}
.footer-tile-sub {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1.5px;
  margin-top: 3px;
}
.footer-tile-cta {
  margin-top: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--accent-light);
  letter-spacing: 1px;
  border: 1px solid rgba(0,98,170,0.4);
  display: inline-block;
  padding: 4px 12px;
  border-radius: 2px;
  transition: all 0.2s;
}
.tile-footer:hover .footer-tile-cta { color: var(--red); border-color: rgba(218,41,28,0.5); }

/* ── GRAPHISME TILE — COLLAGE STYLE ── */
.tile-graphisme {
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* Background collage — strip incliné */
.graphisme-bg-collage {
  position: absolute;
  inset: -20px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  overflow: hidden;
  padding: 0 30px;
  align-items: center;
  transform: skewX(-8deg);
}
.gcol-img {
  flex: 1 1 0;
  min-width: 0;
  height: 130%;
  object-fit: cover;
  opacity: 0.55;
  transition: opacity 0.3s, transform 0.5s;
  display: block;
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.tile-graphisme:hover .gcol-img { opacity: 0.72; transform: scale(1.04); }

/* Dark gradient overlay - bottom heavy */
.graphisme-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,14,20,0.45) 0%,
    rgba(10,14,20,0.72) 55%,
    rgba(10,14,20,0.95) 100%
  );
}

/* Foreground content */
.graphisme-tile-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 18px 20px;
}
.graphisme-tile-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.graphisme-tile-label::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}
.graphisme-tile-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  letter-spacing: 2px;
  line-height: 1;
  color: #fff;
}
.graphisme-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.graphisme-tile-count {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1px;
}
.graphisme-tile-arrow {
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  transition: all 0.2s;
}
.tile-graphisme:hover .graphisme-tile-arrow {
  border-color: var(--red);
  color: var(--red);
  transform: rotate(45deg);
}

/* ── CLIENTS ROW IN POPUP ── */
.clients-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.client-card {
  background: rgba(0,65,112,0.08);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.2s;
}
.client-card:hover { border-left-color: var(--red); }
.client-card-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); flex-shrink: 0; }
.client-card-name { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; }
.client-card-desc { font-size: 10px; color: var(--muted); font-family: 'DM Mono', monospace; margin-top: 2px; line-height: 1.5; }

/* ── GRAPHISME GALLERY WITH REAL IMAGES ── */
.graphisme-gallery {
  columns: 3;
  column-gap: 10px;
}
.graphisme-card {
  break-inside: avoid;
  margin-bottom: 10px;
  border-radius: 3px;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: block;
  transition: transform 0.2s, border-color 0.2s;
}
.graphisme-card:hover { transform: translateY(-3px); border-color: var(--accent-light); }
.graphisme-card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s;
}
.graphisme-card:hover img { transform: scale(1.03); }
.graphisme-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 218px 10px 10px;
  background: linear-gradient(
    transparent 0%,
    rgba(0,0,0,0.55) 40%,
    rgba(0,0,0,0.92) 100%
  );
  opacity: 0;
  transition: opacity 0.25s;
}
.graphisme-card:hover .graphisme-card-overlay { opacity: 1; }
.graphisme-card-type { font-family: 'DM Mono', monospace; font-size: 7px; color: var(--red); letter-spacing: 2px; text-transform: uppercase; }
.graphisme-card-name { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 1px; color: #fff; margin-top: 1px; }
/* ══════════════════════════════════════════════════════════
   DESKTOP EXTRA — contenu affiché seulement sur grand écran
   ══════════════════════════════════════════════════════════ */

/* Caché sur mobile/tablette, visible desktop */
.tile-desktop-extra { display: none; }
/* Caché sur écrans 1536x730 (ex: laptop 1536px de large avec hauteur réduite) */
/* ── Divider commun ── */
.about-extra-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* ── ABOUT EXTRA ── */
.about-extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.about-extra-block {
  background: rgba(0,65,112,0.1);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 2px;
}
.about-extra-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.about-extra-value {
  font-size: 12px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  display: flex;
  align-items: center;
  gap: 5px;
}
.about-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  flex-shrink: 0;
  display: inline-block;
}
.about-extra-quote {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.7;
  border-left: 2px solid var(--red);
  padding-left: 12px;
}

/* ── PROJECTS EXTRA ── */
.proj-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.proj-tech-pill {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 2px;
  border: 1px solid;
}
.pill-js      { color: #f7df1e; border-color: rgba(247,223,30,0.3); background: rgba(247,223,30,0.06); }
.pill-php     { color: #8892be; border-color: rgba(136,146,190,0.3); background: rgba(136,146,190,0.06); }
.pill-flutter { color: #54c5f8; border-color: rgba(84,197,248,0.3); background: rgba(84,197,248,0.06); }
.pill-node    { color: #6cc24a; border-color: rgba(108,194,74,0.3); background: rgba(108,194,74,0.06); }
.pill-css     { color: #e44d26; border-color: rgba(228,77,38,0.3); background: rgba(228,77,38,0.06); }
.pill-sql     { color: #00aff0; border-color: rgba(0,175,240,0.3); background: rgba(0,175,240,0.06); }

.proj-extra-stats {
  display: flex;
  gap: 6px;
}
.proj-extra-stat {
  flex: 1;
  background: rgba(0,65,112,0.1);
  border: 1px solid var(--border);
  border-top: 2px solid var(--red);
  padding: 8px 6px;
  text-align: center;
  border-radius: 2px;
}
.proj-extra-num {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--red);
  line-height: 1;
}
.proj-extra-lbl {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-top: 3px;
}

/* ── XP EXTRA ── */
.xp-extra-domains {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.xp-domain-chip {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid;
}
.xp-domain-dev { color: var(--accent-light); border-color: rgba(0,98,170,0.4); background: rgba(0,98,170,0.1); }
.xp-domain-cm  { color: #a78bfa; border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.08); }
.xp-domain-art { color: #ff6b5e; border-color: rgba(218,41,28,0.35); background: rgba(218,41,28,0.08); }

/* ── CV EXTRA ── */
.cv-extra-info {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cv-extra-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #7a99b8;
  font-family: 'DM Sans', sans-serif;
}
.cv-extra-icon { font-size: 14px; width: 20px; flex-shrink: 0; }

/* ── CONTACT EXTRA ── */
.contact-extra-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-extra-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,65,112,0.08);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  padding: 10px 10px;
  border-radius: 2px;
  text-decoration: none;
  transition: border-left-color 0.2s, background 0.2s;
}
.contact-extra-item:hover { border-left-color: var(--red); background: rgba(0,65,112,0.15); }
.contact-extra-icon {
  font-size: 14px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  color: var(--accent-light);
}
.contact-extra-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}
.contact-extra-val {
  font-size: 11px;
  color: var(--text);
  margin-top: 1px;
}

/* Contact tile: titre compacté + divider serré */
.tile-contact .tile-title { font-size: 22px; margin-bottom: 0; }
.tile-contact .about-extra-divider { margin: 8px 0; }

/* ── SKILLS TILE DESKTOP EXTRA ── */
.skills-softskills {
  margin-top: 16px;
}
.skills-softskills-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.skills-softskills-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.skills-softskills-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.skill-soft-chip {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 13px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.skill-soft-chip:hover {
  border-color: rgba(0,98,170,0.4);
  color: var(--accent-light);
  background: rgba(0,98,170,0.1);
}

/* ── SKILLS LANGUES DESKTOP CONTEXT ── */
.skills-lang-row {
  display: flex;
  gap: 8px;
}
.skills-lang-item {
  flex: 1;
  background: rgba(0,65,112,0.1);
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 2px;
  text-align: center;
}
.skills-lang-val {
  font-size: 18px;
  margin-top: 4px;
}

/* ── PROJ PLATFORMS ROW ── */
.proj-platforms-row {
  display: flex;
  gap: 6px;
  margin-bottom: 2px;
}
.proj-platform-block {
  flex: 1;
  background: rgba(0,65,112,0.1);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  padding: 8px 4px;
  text-align: center;
  border-radius: 2px;
  transition: border-top-color 0.2s, background 0.2s;
}
.tile-projects:hover .proj-platform-block {
  border-top-color: var(--red);
  background: rgba(0,65,112,0.18);
}
.proj-platform-icon { font-size: 14px; margin-bottom: 3px; }
.proj-platform-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--red);
  line-height: 1;
}
.proj-platform-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ── PROJ FEATURED CARD ── */
.proj-featured-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.proj-featured-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.proj-featured-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,65,112,0.1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  padding: 10px 12px;
  border-radius: 2px;
  transition: background 0.2s;
}
.tile-projects:hover .proj-featured-card { background: rgba(0,65,112,0.2); }
.proj-featured-icon { font-size: 22px; flex-shrink: 0; }
.proj-featured-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--text);
}
.proj-featured-desc {
  font-size: 10px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  margin-top: 2px;
  line-height: 1.5;
}
.proj-featured-link {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.2s;
}
.proj-featured-link:hover { border-color: var(--red); color: var(--red); }

/* ── PROJ TECH CHART ── */
.proj-tech-chart-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.proj-tech-chart-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.proj-tech-chart {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.proj-tech-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.proj-tech-bar-name {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  width: 90px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.proj-tech-bar-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.proj-tech-bar-fill {
  height: 100%;
  border-radius: 2px;
  opacity: 0.85;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.proj-tech-bar-count {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  width: 14px;
  text-align: right;
  flex-shrink: 0;
}

/* ── PROJ TIMELINE ── */
.proj-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 14px;
}
.proj-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--border);
}
.proj-tl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  position: relative;
}
.proj-tl-dot {
  position: absolute;
  left: -9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--accent-light);
  flex-shrink: 0;
}
.proj-tl-dot-red {
  background: var(--red);
  border-color: var(--red-light);
  box-shadow: 0 0 5px rgba(218,41,28,0.5);
}
.proj-tl-date {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 1px;
  width: 32px;
  flex-shrink: 0;
}
.proj-tl-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--text);
}
.proj-tl-item-last .proj-tl-name {
  color: var(--red);
}
/* ══════════════════════════════════════════════════════
   ABOUT FM CARD — fiche joueur Football Manager
   ══════════════════════════════════════════════════════ */
.about-fm { margin-top: 28px; }

.about-fm-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0 14px;
}

.about-fm-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(0,65,112,0.06);
}

.about-fm-section-title {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 2.5px;
  color: #fff;
  text-transform: uppercase;
  background: var(--accent);
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
}

/* ── Attributs (gauche) ── */
.about-fm-attrs {
  border-right: 1px solid var(--border);
}

.about-fm-attr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(30,45,66,0.6);
  transition: background 0.15s;
}
.about-fm-attr-row:last-child { border-bottom: none; }
.tile-about:hover .about-fm-attr-row { background: rgba(0,65,112,0.08); }

.about-fm-attr-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  line-height: 1;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.about-fm-val-high { color: #22c55e; }
.about-fm-val-mid  { color: #f59e0b; }
.about-fm-val-low  { color: #ef4444; }

.about-fm-attr-name {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--text);
  letter-spacing: 0.3px;
}

/* ── Infos profil (droite) ── */
.about-fm-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(30,45,66,0.6);
  transition: background 0.15s;
}
.about-fm-info-row:last-child { border-bottom: none; }
.tile-about:hover .about-fm-info-row { background: rgba(0,65,112,0.08); }

.about-fm-info-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.about-fm-info-val {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
}
.about-fm-available {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--green) !important;
}

/* ── FM STACK CATEGORY BADGES ── */
.about-fm-cat-badge {
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  letter-spacing: 1.5px;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid;
  width: 44px;
  text-align: center;
  flex-shrink: 0;
  font-weight: 600;
}
.about-fm-cat-front  { color: #60a5fa; border-color: rgba(96,165,250,0.35); background: rgba(96,165,250,0.08); }
.about-fm-cat-back   { color: #a78bfa; border-color: rgba(167,139,250,0.35); background: rgba(167,139,250,0.08); }
.about-fm-cat-mobile { color: #54c5f8; border-color: rgba(84,197,248,0.35); background: rgba(84,197,248,0.08); }
.about-fm-cat-tool   { color: var(--muted); border-color: rgba(90,122,154,0.35); background: rgba(90,122,154,0.06); }
.about-fm-cat-design { color: #f472b6; border-color: rgba(244,114,182,0.35); background: rgba(244,114,182,0.08); }
.about-fm-cat-discord{ color: #6cc24a; border-color: rgba(108,194,74,0.35); background: rgba(108,194,74,0.08); }

/* ── ABOUT FM IDLE ── */
.about-fm-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  gap: 6px;
  height: calc(100% - 28px);
}

.about-fm-idle-zzz {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
}

.zzz {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--muted);
  line-height: 1;
  opacity: 0;
  animation: zzzFloat 2.4s ease-in-out infinite;
}
.z1 { font-size: 14px; animation-delay: 0s; }
.z2 { font-size: 20px; animation-delay: 0.5s; }
.z3 { font-size: 26px; animation-delay: 1s; }

@keyframes zzzFloat {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 0.7; }
  60%  { opacity: 0.4; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-18px); }
}

.about-fm-idle-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--muted);
}

.about-fm-idle-sub {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: rgba(90,122,154,0.6);
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.8;
}

/* ══════════════════════════════════════════════════════
   GITHUB ACTIVITY TILE
   ══════════════════════════════════════════════════════ */

.gh-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 2px;
}
.gh-tile-user {
  display: flex;
  align-items: center;
  gap: 9px;
}
.gh-tile-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  overflow: hidden;
  background: rgba(0,65,112,0.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gh-tile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gh-tile-avatar-fallback {
  font-size: 14px; color: var(--accent-light);
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
}
.gh-tile-username {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px; letter-spacing: 1px; color: var(--text); line-height: 1;
}
.gh-tile-handle {
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: var(--muted); letter-spacing: 0.5px; margin-top: 2px;
}

/* Status badge */
.gh-tile-status {
  display: flex; align-items: center; gap: 5px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.25);
  padding: 3px 8px; border-radius: 2px;
}
.gh-tile-status.loading {
  background: rgba(90,122,154,0.08);
  border-color: rgba(90,122,154,0.25);
}
.gh-tile-status.error {
  background: rgba(218,41,28,0.08);
  border-color: rgba(218,41,28,0.25);
}
.gh-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 5px var(--green); flex-shrink: 0;
}
.gh-tile-status.loading .gh-status-dot {
  background: var(--muted); box-shadow: none;
  animation: ghPulse 1.2s infinite;
}
.gh-tile-status.error .gh-status-dot {
  background: var(--red); box-shadow: 0 0 5px var(--red);
}
@keyframes ghPulse { 0%,100%{opacity:.3} 50%{opacity:1} }
.gh-status-text {
  font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: 1.5px; color: var(--green);
}
.gh-tile-status.loading .gh-status-text { color: var(--muted); }
.gh-tile-status.error   .gh-status-text { color: #ff6b5e; }

/* Stats */
.gh-tile-stats { display: flex; gap: 6px; margin-bottom: 10px; }
.gh-tile-stat {
  flex: 1;
  background: rgba(0,65,112,0.1);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  padding: 6px 4px; text-align: center; border-radius: 2px;
  transition: border-top-color 0.2s;
}
.tile-projects:hover .gh-tile-stat { border-top-color: var(--red); }
.gh-tile-stat-num {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px; color: var(--red); line-height: 1;
}
.gh-tile-stat-lbl {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 7px; color: var(--muted); letter-spacing: 1.5px;
  text-transform: uppercase; margin-top: 2px;
}

/* ── Label section ── */
.gh-graph-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: 2px; color: var(--red);
  text-transform: uppercase; margin-bottom: 7px;
  display: flex; align-items: center; gap: 8px;
}
.gh-graph-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── Conteneur principal du graphique ── */
.gh-contribution-graph { width: 100%; padding-bottom: 4px; }
.gh-graph-loading {
  font-family: 'DM Mono', monospace; font-size: 9px;
  color: var(--muted); letter-spacing: 1px;
  padding: 10px 0; text-align: center;
  animation: ghPulse 1.2s infinite;
}

/* ── Wrapper avec mois + grid + légende ── */
.gh-graph-wrapper {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
}

/* Labels de mois */
.gh-graph-months {
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  padding-left: 26px;
  margin-bottom: 2px;
  position: relative;
}

.gh-graph-month-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 0.5px;
  white-space: nowrap;
  line-height: 1;
  /* Chaque span occupe sa colonne exacte via grid-column inline */
}

/* Wrap grid + labels jours */
.gh-graph-grid-wrap {
  display: flex; gap: 4px; align-items: flex-start;
}

/* Labels jours */
.gh-graph-day-labels {
  display: flex; flex-direction: column;
  gap: 2px; flex-shrink: 0;
}
.gh-graph-day-labels span {
  font-family: 'DM Mono', monospace;
  font-size: 8px; color: var(--muted); letter-spacing: 0.5px;
  height: 12px; line-height: 12px;
  width: 22px; text-align: right;
  flex-shrink: 0;
}

/* Grille des semaines */
.gh-graph-grid {
  display: flex; gap: 2px; align-items: flex-start; flex: 1; min-width: 0;
}
.gh-graph-week {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
}

/* Cellules */
.gh-graph-cell {
  width: 100%; aspect-ratio: unset;
  height: 12px;
  border-radius: 2px;
  background: rgba(22, 35, 52, 0.9);
  border: 1px solid rgba(30,45,66,0.6);
  transition: transform 0.1s, opacity 0.1s;
  cursor: default;
  display: block;
}
.gh-graph-cell:hover { transform: scale(1.25); z-index: 2; }
.gh-graph-cell-future { opacity: 0; pointer-events: none; }

/* Niveaux — palette verte comme GitHub */
.gh-graph-cell.l1 {
  background: #0e4429;
  border-color: rgba(14,68,41,0.8);
}
.gh-graph-cell.l2 {
  background: #006d32;
  border-color: rgba(0,109,50,0.8);
}
.gh-graph-cell.l3 {
  background: #26a641;
  border-color: rgba(38,166,65,0.8);
}
.gh-graph-cell.l4 {
  background: #39d353;
  border-color: rgba(57,211,83,0.9);
  box-shadow: 0 0 4px rgba(57,211,83,0.4);
}

/* ── EXPLOSION (frightened) ── */
@keyframes cellExplode {
  0%   { transform: scale(1);    background: #162232; border-color: #1e3a55; box-shadow: none; }
  18%  { transform: scale(1.5);  background: #0062aa; border-color: #4499dd; box-shadow: 0 0 8px rgba(0,98,170,0.8), 0 0 2px #7bbfff; }
  42%  { transform: scale(0.88); background: #003d6e; border-color: #0055a0; box-shadow: 0 0 4px rgba(0,80,140,0.5); }
  70%  { transform: scale(1.08); background: #0e2a3f; border-color: #1e3d5a; box-shadow: none; }
  100% { transform: scale(1);    background: #162232; border-color: #1e3a55; box-shadow: none; }
}

.gh-graph-cell.frenzy-enter,
.gh-graph-cell.l1.frenzy-enter,
.gh-graph-cell.l2.frenzy-enter,
.gh-graph-cell.l3.frenzy-enter,
.gh-graph-cell.l4.frenzy-enter {
  animation: cellExplode 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  z-index: 3;
}

/* Légende */
.gh-graph-legend {
  display: flex; align-items: center; gap: 3px;
  justify-content: flex-end; margin-top: 4px;
  padding-bottom: 32px; /* space for tile-dots */
}
.gh-legend-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px; color: var(--muted); letter-spacing: 0.5px;
}
.gh-graph-legend .gh-graph-cell {
  width: 10px; height: 10px; aspect-ratio: unset; flex-shrink: 0;
}

/* Légende à gauche sur 1536x730 pour éviter chevauchement avec tile-dots */
/* ── Repos récents ── */
.gh-repos-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: 2px; color: var(--red);
  text-transform: uppercase; margin-bottom: 7px;
  display: flex; align-items: center; gap: 8px;
}
.gh-repos-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.gh-tile-repos-list { display: flex; flex-direction: column; gap: 4px; }
.gh-tile-repo-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  background: rgba(0,65,112,0.07);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  text-decoration: none;
  transition: border-left-color 0.2s, background 0.2s;
}
.gh-tile-repo-item:hover { border-left-color: var(--red); background: rgba(0,65,112,0.18); }
.gh-repo-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.gh-repo-name {
  font-family: 'DM Sans', sans-serif; font-size: 11px;
  color: var(--text); font-weight: 500; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gh-repo-stars {
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: #f59e0b; flex-shrink: 0;
}
.gh-repo-lang {
  font-family: 'DM Mono', monospace;
  font-size: 8px; color: var(--muted); letter-spacing: 0.5px; flex-shrink: 0;
}

/* Skeleton loader */
.gh-repo-skeleton {
  height: 28px;
  background: linear-gradient(90deg,
    rgba(30,45,66,0.5) 25%, rgba(0,65,112,0.2) 50%, rgba(30,45,66,0.5) 75%);
  background-size: 200% 100%;
  animation: ghShimmer 1.5s infinite;
  border-radius: 2px; border: 1px solid var(--border);
}
@keyframes ghShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ══════════════════════════════════════════════════════
   GITHUB POPUP
   ══════════════════════════════════════════════════════ */

/* Profil header */
.gh-popup-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(0,65,112,0.08);
  border: 1px solid var(--border);
  padding: 20px;
}
.gh-popup-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0,65,112,0.3);
}
.gh-popup-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gh-popup-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px; letter-spacing: 2px; color: var(--text);
}
.gh-popup-handle {
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--muted); letter-spacing: 1px; margin-top: 2px;
}
.gh-popup-stats-row {
  display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap;
}
.gh-popup-stat {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(0,65,112,0.15);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  padding: 8px 16px; border-radius: 2px;
  min-width: 64px;
}
.gh-popup-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px; color: var(--red); line-height: 1;
}
.gh-popup-stat-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 8px; color: var(--muted); letter-spacing: 1.5px;
  text-transform: uppercase; margin-top: 2px;
}
.gh-popup-link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  background: var(--accent);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px; letter-spacing: 1.5px;
  padding: 7px 16px; border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s;
}
.gh-popup-link-btn:hover { background: var(--accent-light); }

/* Graphique popup */
.gh-popup-graph-container {
  background: rgba(0,65,112,0.05);
  border: 1px solid var(--border);
  padding: 18px;
}
.gh-popup-graph-total {
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--muted); letter-spacing: 1px;
  margin-top: 12px; text-align: right;
}
.gh-popup-graph-total span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px; color: var(--text);
}

/* Repos grid */
.gh-popup-repos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.ghp-repo-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  padding: 14px;
  text-decoration: none;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-left-color 0.2s, background 0.2s, transform 0.15s;
  border-radius: 2px;
}
.ghp-repo-card:hover {
  border-left-color: var(--red);
  background: rgba(0,65,112,0.1);
  transform: translateY(-2px);
}
.ghp-repo-card-header {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.ghp-repo-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px; letter-spacing: 1px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ghp-repo-badge {
  font-family: 'DM Mono', monospace;
  font-size: 7px; letter-spacing: 1.5px;
  background: rgba(0,65,112,0.2);
  border: 1px solid rgba(0,65,112,0.4);
  color: var(--accent-light);
  padding: 2px 6px; border-radius: 2px; flex-shrink: 0;
}
.ghp-repo-desc {
  font-size: 11px; color: #6a8aaa;
  line-height: 1.6;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ghp-repo-topics { display: flex; flex-wrap: wrap; gap: 3px; }
.ghp-topic {
  font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: 0.5px;
  background: rgba(0,98,170,0.15);
  border: 1px solid rgba(0,98,170,0.3);
  color: var(--accent-light);
  padding: 2px 7px; border-radius: 10px;
}
.ghp-repo-card-footer {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 4px;
  border-top: 1px solid var(--border);
}
.ghp-repo-lang-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ghp-repo-lang-name {
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: var(--muted); flex-shrink: 0;
}
.ghp-repo-stars {
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: #f59e0b;
}
.ghp-repo-forks {
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: var(--muted);
}
.ghp-repo-updated {
  font-family: 'DM Mono', monospace;
  font-size: 8px; color: rgba(90,122,154,0.6);
  margin-left: auto;
}

/* Skeleton repos popup */
.gh-popup-repo-skeleton {
  height: 110px;
  background: linear-gradient(90deg,
    rgba(30,45,66,0.5) 25%, rgba(0,65,112,0.2) 50%, rgba(30,45,66,0.5) 75%);
  background-size: 200% 100%;
  animation: ghShimmer 1.5s infinite;
  border-radius: 2px; border: 1px solid var(--border);
}

/* Langues */
.ghp-lang-bar {
  display: flex; height: 8px; border-radius: 4px;
  overflow: hidden; gap: 1px; margin-bottom: 14px;
}
.ghp-lang-bar-segment {
  height: 100%; min-width: 2px;
  transition: opacity 0.2s;
}
.ghp-lang-bar-segment:hover { opacity: 0.75; }
.ghp-lang-list {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
}
.ghp-lang-item {
  display: flex; align-items: center; gap: 6px;
}
.ghp-lang-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ghp-lang-name {
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--text);
}
.ghp-lang-pct {
  font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted);
}
/* ══════════════════════════════════════════════════════════
   SETTINGS TILE
   ══════════════════════════════════════════════════════════ */

.settings-tile-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 36px;
  gap: 6px;
}
.settings-tile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.settings-tile-gear {
  font-size: 18px;
  color: var(--accent-light);
  opacity: 0.3;
  animation: gearSpin 16s linear infinite;
  flex-shrink: 0;
  margin-top: 3px;
}
@keyframes gearSpin { to { transform: rotate(360deg); } }

.settings-tile-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 2px;
  margin-bottom: 2px;
}
.settings-tile-label {
  font-family: 'DM Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-tile-label::after {
  content: ''; flex: 1;
  height: 1px; background: var(--border);
}

/* 7 rows compact list */
.settings-active-display {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.stile-card {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(0,65,112,0.07);
  border: 1px solid var(--border);
  border-left: 2px solid var(--card-color, var(--border));
  border-radius: 2px;
  transition: background 0.15s;
}
.stile-card:hover { background: rgba(0,65,112,0.14); }
.stile-card-top { display: none; }
.stile-bar      { display: none; }
.stile-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stile-key {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.stile-val {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

/* Footer bar */
.settings-tile-footer { flex-shrink: 0; }
.settings-tile-status-bar {
  display: flex; height: 3px; gap: 2px;
  border-radius: 2px; overflow: hidden;
}
.settings-open-btn { display: none; }

/* ══════════════════════════════════════════════════════════
   SETTINGS POPUP
   ══════════════════════════════════════════════════════════ */

/* Overlay transparent pour voir le site en arrière-plan */
#popup-settings.overlay {
  background: rgba(0, 0, 0, 0.25);
  align-items: center;
  justify-content: center;
  padding: 60px 32px 32px 32px;
}

/* Popup vitré style glassmorphism */
#popup-settings .popup {
  background: rgba(10, 14, 20, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--red);
  box-shadow: 0 8px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  max-height: 88vh;
  width: 420px;
  max-width: 100%;
}

#popup-settings .popup-topbar {
  background: rgba(0, 62, 130, 0.5);
  backdrop-filter: blur(8px);
}

.settings-popup .popup-body {
  padding: 22px;
}
.settings-options-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-option-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 8px 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.18s;
}
.settings-option-btn:hover {
  border-color: var(--accent-light);
  color: var(--accent-light);
}
.settings-option-btn.active {
  background: rgba(0,98,170,0.2);
  border-color: var(--accent-light);
  color: var(--text);
}
.settings-colors-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.settings-color-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.settings-color-btn:hover {
  transform: scale(1.15);
}
.settings-color-btn.active {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
  transform: scale(1.1);
}
.settings-color-name {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1.5px;
  margin-top: 2px;
}
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(30,45,66,0.5);
}
.settings-toggle-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--text);
}
.settings-toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px; height: 20px;
  flex-shrink: 0;
}
.settings-toggle-switch input {
  opacity: 0; width: 0; height: 0;
}
.settings-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
}
.settings-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.settings-toggle-switch input:checked + .settings-toggle-slider {
  background: var(--accent-light);
}
.settings-toggle-switch input:checked + .settings-toggle-slider::before {
  transform: translateX(18px);
}
.settings-reset-btn {
  background: transparent;
  border: 1px solid rgba(218,41,28,0.4);
  color: rgba(218,41,28,0.8);
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  padding: 7px 18px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.18s;
}
.settings-reset-btn:hover {
  background: rgba(218,41,28,0.15);
  border-color: var(--red);
  color: var(--red);
}

/* Settings applied classes */
body.no-anim * { animation: none !important; transition: none !important; }

/* Custom color picker button */
.settings-color-btn-custom {
  position: relative;
  background: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c77dff) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-color-btn-custom .custom-color-icon {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  pointer-events: none;
  line-height: 1;
}
.settings-color-btn-custom.active .custom-color-icon { display: none; }
body.no-hover .tile:hover { transform: none !important; border-color: var(--border) !important; background: var(--tile) !important; }
body.no-hover .tile:hover::after { opacity: 0 !important; }
/* ── PROJ TABS ── */
.proj-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.proj-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 16px 12px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
}
.proj-tab:hover { color: var(--text); }
.proj-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent-light);
}
.proj-tab-icon { font-size: 13px; }
.proj-tab-count {
  background: rgba(0,98,170,0.2);
  color: var(--accent-light);
  border: 1px solid rgba(0,98,170,0.35);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
}
.proj-tab.active .proj-tab-count {
  background: rgba(0,98,170,0.35);
}

/* ── PROJ TAB PANELS ── */
.proj-tab-panel { display: none; }
.proj-tab-panel.active { display: block; }

/* ── STAGE COMPANY BANNER ── */
.stage-company-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-light);
  border-radius: 2px;
  padding: 14px 16px;
}
.stage-company-icon { font-size: 28px; flex-shrink: 0; }
.stage-company-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--text);
}
.stage-company-meta {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.5px;
}
.stage-badge {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(218,41,28,0.2);
  color: #ff6b5b;
  border-color: rgba(218,41,28,0.35);
}

/* ── AP CONTEXT BANNER ── */
.ap-context-banner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 2px;
  padding: 16px;
  margin-bottom: 6px;
}
.ap-context-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--red);
  margin-bottom: 6px;
}
.ap-context-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}
.ap-context-badges {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  align-items: flex-end;
}
.ap-main-card { grid-column: span 2; }

/* ── AP SCREENSHOTS ── */
.ap-screenshots-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  /* Anti-overflow */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.ap-screenshot-placeholder {
  aspect-ratio: 16/9;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: border-color 0.2s;
  /* Anti-overflow */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
}
.ap-screenshot-placeholder:hover { border-color: var(--accent-light); }
.ap-screenshot-icon { font-size: 22px; opacity: 0.4; }
.ap-screenshot-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
}
.ap-screenshot-hint {
  font-size: 9px;
  color: rgba(90,122,154,0.6);
  font-family: 'DM Mono', monospace;
}
.ap-link-placeholder {
  opacity: 0.5;
  font-style: italic;
}

/* ── SKILLS CHIP GRID (tile) ── */
.skills-cat-block {
  margin-bottom: 14px;
}

.skills-cat-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--accent-light);
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.7;
}

.skills-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 13px 7px 9px;
  transition: background 0.15s, border-color 0.15s;
  cursor: default;
}

.skill-chip:hover {
  background: rgba(0,98,170,0.14);
  border-color: var(--accent-light);
}

.skill-chip-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.skill-chip-icon-text {
  font-size: 14px;
  width: 18px;
  text-align: center;
  color: var(--accent-light);
  flex-shrink: 0;
}

.skill-chip-name {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ── SKILLS LANG FLAG CARDS (tile) ── */
.skills-lang-flags-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.skills-lang-flag-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 8px 8px;
}

.skills-lang-flag-card.skills-lang-flag-dim {
  opacity: 0.5;
}

.skills-lang-flag-emoji {
  font-size: 22px;
  line-height: 1;
}

.skills-lang-flag-name {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--text);
  letter-spacing: 0.5px;
  font-weight: 500;
}

.skills-lang-flag-level {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

/* ── SKILLS POPUP ICON GRID ── */
.skills-popup-cats {
  padding: 4px 0;
}

.skills-popup-cat-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--accent-light);
  letter-spacing: 2px;
  margin-bottom: 10px;
  margin-top: 4px;
}

.skills-popup-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
}

.skill-popup-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 8px 10px;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}

.skill-popup-icon-card:hover {
  background: rgba(0,98,170,0.12);
  border-color: var(--accent-light);
  transform: translateY(-3px);
}

.skill-popup-icon-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}

.skill-popup-icon-name {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.5px;
}

/* ── SKILLS POPUP LANG GRID ── */
.skills-popup-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.skill-popup-lang-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 12px 14px;
  transition: background 0.18s, border-color 0.18s;
}

.skill-popup-lang-card.skill-popup-lang-dim {
  opacity: 0.5;
}

.skill-popup-lang-card:hover {
  background: rgba(0,98,170,0.08);
}

.skill-popup-lang-emoji {
  font-size: 32px;
  line-height: 1;
}

.skill-popup-lang-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 1px;
}

.skill-popup-lang-level {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}

.skill-popup-lang-native {
  color: var(--accent-light);
}

.skill-popup-lang-pro {
  color: var(--green);
}

/* ── CERT CHIP ── */
.skill-chip-cert {
  border-color: rgba(0,49,137,0.5);
  background: rgba(0,49,137,0.08);
}
.skill-chip-cert:hover {
  border-color: #4a7fd4;
  background: rgba(0,49,137,0.18);
}

/* ── CERTIFICATIONS section (same separator style as soft skills) ── */
.skills-certifications {
  margin-bottom: 6px;
}
.skills-certifications .skills-softskills-label {
  color: var(--accent-light);
}

/* ── SKILLS POPUP CHIP LAYOUT (mirrors tile) ── */
.skills-popup-chip-cats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skills-popup-chip-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skills-popup-chip-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--accent-light);
  text-transform: uppercase;
  opacity: 0.8;
}

.skills-popup-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-popup-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 13px 7px 9px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.3px;
  transition: background 0.15s, border-color 0.15s;
  cursor: default;
  text-decoration: none;
}

.skill-popup-chip:hover {
  background: rgba(0,98,170,0.14);
  border-color: var(--accent-light);
}

.skill-popup-chip-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.skill-popup-chip-name {
  white-space: nowrap;
}

.skill-popup-chip-cert {
  border-color: rgba(0,49,137,0.5);
  background: rgba(0,49,137,0.08);
}

.skill-popup-chip-cert:hover {
  border-color: #4a7fd4;
  background: rgba(0,49,137,0.18);
}

/* ══════════════════════════════════════════════
   LANGUAGES — TILE (horizontal rows)
   ══════════════════════════════════════════════ */
.lang-tile-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.lang-tile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent-light);
  border-radius: 4px;
  padding: 8px 12px;
  transition: background 0.15s, border-left-color 0.15s;
}

.lang-tile-row:hover {
  background: rgba(0,98,170,0.1);
  border-left-color: var(--accent-light);
}

.lang-tile-row-dim {
  opacity: 0.5;
  border-left-color: var(--border);
}

.lang-tile-flag {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.lang-tile-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.lang-tile-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}

.lang-tile-badge {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

.lang-badge-native { color: var(--accent-light); }
.lang-badge-pro    { color: var(--green); }

/* ══════════════════════════════════════════════
   LANGUAGES — POPUP (full cards)
   ══════════════════════════════════════════════ */
.lang-popup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.lang-popup-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  transition: background 0.15s, border-color 0.15s;
}

.lang-popup-card-active {
  border-left: 3px solid var(--accent-light);
}

.lang-popup-card-dim {
  opacity: 0.45;
  border-left: 3px solid var(--border);
}

.lang-popup-card:hover {
  background: rgba(0,98,170,0.08);
}

.lang-popup-flag {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
}

.lang-popup-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lang-popup-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--text);
  letter-spacing: 1px;
  line-height: 1;
}

.lang-popup-level {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

.lang-level-native { color: var(--accent-light); }
.lang-level-pro    { color: var(--green); }

.lang-popup-tag {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
  flex-shrink: 0;
}

.lang-tag-native  { background: rgba(0,98,170,0.2);  color: var(--accent-light); border: 1px solid rgba(0,98,170,0.4); }
.lang-tag-pro     { background: rgba(34,197,94,0.12); color: var(--green);        border: 1px solid rgba(34,197,94,0.3); }
.lang-tag-school  { background: rgba(255,255,255,0.05); color: var(--muted);      border: 1px solid var(--border); }
.lang-tag-notions { background: rgba(255,255,255,0.03); color: var(--muted);      border: 1px solid var(--border); }

/* ══════════════════════════════════════════════════════
   FONT SIZE SLIDER — s'active uniquement quand fs-mul > 1
   La classe .fs-scaled est ajoutée par JS sur <body>
   ══════════════════════════════════════════════════════ */
body.fs-scaled .tile-title,
body.fs-scaled .tile-contact .tile-title      { font-size: calc(26px * var(--fs-mul)) !important; }
body.fs-scaled .tile-sub                      { font-size: calc(12px * var(--fs-mul)) !important; }
body.fs-scaled .tile-header                   { font-size: calc(9px  * var(--fs-mul)) !important; }
body.fs-scaled .tag                           { font-size: calc(10px * var(--fs-mul)) !important; }

body.fs-scaled .about-name                    { font-size: calc(46px * var(--fs-mul)) !important; }
body.fs-scaled .about-role                    { font-size: calc(11px * var(--fs-mul)) !important; }
body.fs-scaled .about-bio                     { font-size: calc(12px * var(--fs-mul)) !important; }

body.fs-scaled .proj-item-preview             { font-size: calc(11px * var(--fs-mul)) !important; }
body.fs-scaled .proj-item-preview span        { font-size: calc(12px * var(--fs-mul)) !important; }
body.fs-scaled .proj-count                    { font-size: calc(64px * var(--fs-mul)) !important; }

body.fs-scaled .skill-chip-name               { font-size: calc(11px * var(--fs-mul)) !important; }
body.fs-scaled .skill-chip-sm .skill-chip-name { font-size: calc(10px * var(--fs-mul)) !important; }
body.fs-scaled .skills-cat-label              { font-size: calc(8px  * var(--fs-mul)) !important; }
body.fs-scaled .skill-bar-header              { font-size: calc(10px * var(--fs-mul)) !important; }
body.fs-scaled .skill-soft-chip               { font-size: calc(11px * var(--fs-mul)) !important; }
body.fs-scaled .lang-tile-name                { font-size: calc(13px * var(--fs-mul)) !important; }
body.fs-scaled .lang-tile-badge               { font-size: calc(10px * var(--fs-mul)) !important; }

body.fs-scaled .xp-count                      { font-size: calc(42px * var(--fs-mul)) !important; }
body.fs-scaled .xp-count-label                { font-size: calc(10px * var(--fs-mul)) !important; }
body.fs-scaled .xp-item-role                  { font-size: calc(12px * var(--fs-mul)) !important; }
body.fs-scaled .xp-item-co                    { font-size: calc(9px  * var(--fs-mul)) !important; }
body.fs-scaled .xp-item-badge                 { font-size: calc(6px  * var(--fs-mul)) !important; }

body.fs-scaled .contact-chip                  { font-size: calc(11px * var(--fs-mul)) !important; }

body.fs-scaled .github-username               { font-size: calc(18px * var(--fs-mul)) !important; }
body.fs-scaled .github-handle                 { font-size: calc(10px * var(--fs-mul)) !important; }
body.fs-scaled .github-repo-item              { font-size: calc(11px * var(--fs-mul)) !important; }
body.fs-scaled .gh-repo-name                  { font-size: calc(11px * var(--fs-mul)) !important; }
body.fs-scaled .gh-tile-stat-num              { font-size: calc(20px * var(--fs-mul)) !important; }
body.fs-scaled .gh-tile-stat-label            { font-size: calc(8px  * var(--fs-mul)) !important; }

body.fs-scaled .graphisme-tile-title          { font-size: calc(52px * var(--fs-mul)) !important; }
body.fs-scaled .footer-tile-text              { font-size: calc(9px  * var(--fs-mul)) !important; }
body.fs-scaled .footer-tile-story             { font-size: calc(9px  * var(--fs-mul)) !important; }
body.fs-scaled .stile-val                     { font-size: calc(11px * var(--fs-mul)) !important; }
body.fs-scaled .stile-key                     { font-size: calc(8px  * var(--fs-mul)) !important; }
body.fs-scaled .settings-tile-name            { font-size: calc(22px * var(--fs-mul)) !important; }
body.fs-scaled .cv-big                        { font-size: calc(38px * var(--fs-mul)) !important; }

body.fs-scaled .popup-title                   { font-size: calc(52px * var(--fs-mul)) !important; }
body.fs-scaled .popup-subtitle                { font-size: calc(13px * var(--fs-mul)) !important; }
body.fs-scaled .popup-section-title           { font-size: calc(11px * var(--fs-mul)) !important; }
body.fs-scaled .about-popup-text              { font-size: calc(15px * var(--fs-mul)) !important; }
body.fs-scaled .xp-popup-desc                 { font-size: calc(14px * var(--fs-mul)) !important; }
body.fs-scaled .xp-popup-role                 { font-size: calc(24px * var(--fs-mul)) !important; }
body.fs-scaled .footer-story-body             { font-size: calc(13px * var(--fs-mul)) !important; }
body.fs-scaled .proj-card-desc                { font-size: calc(11px * var(--fs-mul)) !important; }
body.fs-scaled .contact-popup-value           { font-size: calc(12px * var(--fs-mul)) !important; }
body.fs-scaled .skill-popup-bar-header        { font-size: calc(11px * var(--fs-mul)) !important; }
body.fs-scaled .github-popup-repo-desc        { font-size: calc(13px * var(--fs-mul)) !important; }
body.fs-scaled .github-popup-bio              { font-size: calc(14px * var(--fs-mul)) !important; }
body.fs-scaled .popup-body                    { font-size: calc(14px * var(--fs-mul)) !important; }

/* ── FONT SIZE SLIDER UI ── */
.settings-size-slider-wrap { display: flex; flex-direction: column; gap: 10px; }
.settings-size-labels { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 2px; }
.settings-size-label-min { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); line-height: 1; }
.settings-size-label-max { font-family: 'DM Mono', monospace; font-size: 19px; color: var(--muted); line-height: 1; }
.settings-size-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent-light) 0%, var(--accent-light) 0%, var(--border) 0%, var(--border) 100%);
  outline: none; cursor: pointer;
}
.settings-size-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--text); border: 2px solid var(--accent-light); cursor: pointer;
  box-shadow: 0 0 6px rgba(0,98,170,0.5); transition: transform 0.15s, box-shadow 0.15s;
}
.settings-size-range::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 10px rgba(0,98,170,0.7); }
.settings-size-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--text); border: 2px solid var(--accent-light); cursor: pointer; }
.settings-size-preview-row { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 10px 14px; border-radius: 2px; }
.settings-size-value-label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--accent-light); letter-spacing: 1px; white-space: nowrap; min-width: 30px; }
.settings-size-preview-text { font-family: 'DM Mono', monospace; color: var(--text); letter-spacing: 0.5px; transition: font-size 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── SKILLS TILE — layouts conditionnels ── */
.skills-layout-large   { display: block; }
.skills-layout-compact { display: none; }
/* ── SKILLS COMPACT ROWS ── */
.skills-tile-row { margin-bottom: 7px; }
.skills-tile-row-label {
  font-family: 'DM Mono', monospace; font-size: 7px; letter-spacing: 2px;
  color: var(--accent-light); text-transform: uppercase; margin-bottom: 5px;
  opacity: 0.8; display: flex; align-items: center; gap: 6px;
}
.skills-tile-row-label::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.06); }
.skills-tile-row-label--cert  { color: #4a7fd4; }
.skills-tile-row-label--bts   { color: var(--red); opacity: 1; }
.skills-tile-row-label--soft  { color: var(--muted); }
.skills-chip-grid-compact { gap: 4px; }
.skill-chip-sm { padding: 4px 9px 4px 7px; gap: 5px; }
.skill-chip-sm .skill-chip-img { width: 14px; height: 14px; }
.skill-chip-sm .skill-chip-name { font-size: 10px; }
.skill-chip-sm .skill-chip-icon-text { font-size: 11px; width: 14px; }
.skill-chip-bts { border-color: rgba(218,41,28,0.25); background: rgba(218,41,28,0.05); }
.skill-chip-bts:hover { border-color: rgba(218,41,28,0.5); background: rgba(218,41,28,0.12); }
.skill-soft-chip-sm { font-size: 10px; padding: 4px 9px; }

/* ── POPUP À PROPOS — compact sur 1536x730 ── */
/* ══════════════════════════════════
   MESSAGERIE POPUP — styles
   ══════════════════════════════════ */

/* ── Proj-card enhanced ── */
.proj-card-messagerie { cursor:pointer; }
.proj-card-messagerie:hover { border-color: var(--accent-light); }

.msg-card-bg-lines {
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    90deg,
    rgba(0,98,170,0.04) 0px, rgba(0,98,170,0.04) 1px,
    transparent 1px, transparent 32px
  );
}

.msg-card-phone-mock {
  position:relative; z-index:1;
  background: rgba(12,20,32,0.85);
  border: 1px solid rgba(0,98,170,0.3);
  border-radius: 6px;
  padding: 6px 8px;
  width: 130px;
  font-family: 'DM Sans', sans-serif;
}

.msg-card-phone-bar {
  display: flex; align-items: center; gap: 5px;
  font-size: 9px; color: rgba(255,255,255,0.5);
  font-family: 'DM Mono', monospace; letter-spacing: 1px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 4px;
}
.msg-card-phone-dot { width:6px; height:6px; border-radius:50%; }

.msg-card-phone-msg { display:flex; margin-bottom:3px; }
.msg-card-phone-msg-in  { justify-content: flex-start; }
.msg-card-phone-msg-out { justify-content: flex-end; }

.msg-card-phone-bubble {
  font-size: 8px; padding: 4px 7px; border-radius: 8px;
  max-width: 90%;
}
.msg-card-phone-bubble-in  { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.msg-card-phone-bubble-out { background: rgba(0,98,170,0.5); color: #fff; }

.msg-card-detail-btn { cursor: pointer; }
.msg-card-detail-btn:hover { color: var(--accent-light) !important; border-color: var(--accent-light) !important; }

/* ── Hero popup ── */
.msg-popup-hero {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: center;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.msg-popup-eyebrow { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }

.msg-badge {
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 2px;
  border: 1px solid; display: inline-block;
}
.msg-badge-stage   { background: rgba(0,98,170,0.15); color: #7dc8ff; border-color: rgba(0,98,170,0.4); }
.msg-badge-animal  { background: rgba(34,197,94,0.1); color: #4ade80; border-color: rgba(34,197,94,0.3); }
.msg-badge-private { background: rgba(218,41,28,0.1); color: #ff6b5e; border-color: rgba(218,41,28,0.3); }

.msg-popup-hero-desc {
  font-size: 14px; color: #7a99b8; line-height: 1.85;
  margin-bottom: 18px;
}

.msg-popup-stack-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}

.msg-stack-chip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,65,112,0.2); border: 1px solid rgba(0,65,112,0.4);
  color: var(--accent-light); font-size: 11px;
  font-family: 'DM Mono', monospace;
  padding: 4px 10px; border-radius: 2px;
}
.msg-stack-chip-muted {
  background: rgba(255,255,255,0.03); border-color: var(--border);
  color: var(--muted);
}
.msg-stack-icon { width:14px; height:14px; }
.msg-stack-icon-txt { font-size:12px; }

/* ── Phone mockup ── */
.msg-popup-hero-right {
  display: flex; justify-content: center; align-items: center;
  position: relative;
}

.msg-phone-preview { position: relative; }

.msg-phone-frame {
  width: 200px;
  background: #0a1628;
  border: 2px solid rgba(0,98,170,0.4);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,98,170,0.15), inset 0 0 0 1px rgba(255,255,255,0.04);
  position: relative; z-index:1;
}

.msg-phone-notch {
  height: 18px; background: #080f1c;
  display: flex; justify-content: center; align-items: center;
}
.msg-phone-notch::after {
  content: ''; width: 50px; height: 8px;
  background: rgba(0,98,170,0.3); border-radius: 4px;
}

.msg-phone-screen { background: #0c1826; padding: 0; }

.msg-phone-topbar {
  background: rgba(0,65,112,0.3);
  border-bottom: 1px solid rgba(0,98,170,0.2);
  padding: 8px 10px;
  display: flex; align-items: center; gap: 7px;
}

.msg-phone-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink:0;
}

.msg-phone-contact-name { font-size: 9px; font-weight: 600; color: var(--text); }
.msg-phone-contact-status { display:flex; align-items:center; gap:3px; font-size:7px; color: #4ade80; margin-top:1px; }
.msg-phone-status-dot { width:4px; height:4px; border-radius:50%; background:#4ade80; }

.msg-phone-messages {
  padding: 8px 8px; min-height: 120px;
  display: flex; flex-direction: column; gap: 4px;
}

.msg-phone-date-sep {
  font-size: 7px; color: var(--muted); text-align: center;
  font-family: 'DM Mono', monospace; margin-bottom: 2px;
}

.msg-phone-msg { display:flex; flex-direction:column; }
.msg-phone-msg-in  { align-items: flex-start; }
.msg-phone-msg-out { align-items: flex-end; }

.msg-phone-bubble {
  font-size: 8px; padding: 5px 8px; border-radius: 10px;
  max-width: 80%; line-height: 1.4;
}
.msg-phone-bubble-in  { background: rgba(255,255,255,0.08); color: #b8cfe0; border-radius: 2px 10px 10px 10px; }
.msg-phone-bubble-out { background: #1a4a7a; color: #e0eeff; border-radius: 10px 2px 10px 10px; }

.msg-phone-time {
  font-size: 6px; color: var(--muted); margin-top: 2px;
  font-family: 'DM Mono', monospace;
}

.msg-phone-input-bar {
  background: rgba(0,65,112,0.15);
  border-top: 1px solid rgba(0,65,112,0.2);
  padding: 6px 8px;
  display: flex; align-items: center; gap: 6px;
}

.msg-phone-input-field {
  flex:1; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,98,170,0.2);
  border-radius: 10px; padding: 4px 8px;
  font-size: 7px; color: var(--muted);
  font-family: 'DM Mono', monospace;
}

.msg-phone-send-btn {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #fff; flex-shrink:0;
}

.msg-phone-halo {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  width: 160px; height: 40px;
  background: radial-gradient(ellipse, rgba(0,98,170,0.25), transparent 70%);
  filter: blur(8px); z-index:0;
}

/* ── Contexte ── */
.msg-context-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
}

.msg-context-block {
  background: rgba(0,65,112,0.07);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 14px 16px;
  display: flex; gap: 12px;
}

.msg-context-icon { font-size: 20px; flex-shrink:0; margin-top:2px; }
.msg-context-title { font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 5px; }
.msg-context-desc  { font-size: 12px; color: #6a8aaa; line-height: 1.65; }

/* ── Features grid ── */
.msg-features-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}

.msg-feature-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.15s;
}
.msg-feature-card:hover { border-color: var(--accent-light); border-top-color: var(--accent-light); }

.msg-feature-header { display:flex; align-items:flex-start; gap:10px; }
.msg-feature-icon { font-size: 22px; flex-shrink:0; }
.msg-feature-title { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1px; color: var(--text); }
.msg-feature-sub   { font-size: 10px; color: var(--muted); font-family: 'DM Mono', monospace; margin-top:2px; }

/* ── GIF slots ── */
.msg-feature-gif-slot {
  width: 100%; aspect-ratio: 9/16;
  border: 1px solid var(--border); border-radius: 3px;
  overflow: hidden; background: rgba(0,65,112,0.05);
  position: relative;
  max-height: 220px;
}
.msg-feature-gif-slot iframe,
.msg-feature-gif-slot img {
  width:100%; height:100%; object-fit:cover; display:block;
  position:absolute; top:0; left:0; border:none;
}

.msg-gif-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
}
.msg-gif-icon  { font-size:18px; opacity:0.3; }
.msg-gif-label { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; }
.msg-gif-hint  { font-size:9px; color:rgba(90,122,154,0.5); }

.msg-gif-note {
  background: rgba(0,65,112,0.08);
  border: 1px solid rgba(0,65,112,0.2);
  border-left: 3px solid var(--accent-light);
  padding: 10px 14px;
  font-size: 11px; color: var(--muted);
  font-family: 'DM Mono', monospace;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 26px; border-radius: 2px;
}
.msg-gif-note-icon { font-size:14px; color:var(--accent-light); flex-shrink:0; }
.msg-gif-note code { background:rgba(0,98,170,0.15); padding:1px 5px; border-radius:2px; color:var(--accent-light); font-size:10px; }

.msg-feature-list {
  list-style: none; display:flex; flex-direction:column; gap:4px;
}
.msg-feature-list li {
  font-size: 11px; color: #6a8aaa; padding-left: 12px; position:relative; line-height:1.5;
}
.msg-feature-list li::before {
  content: '▸'; position:absolute; left:0;
  color: var(--accent-light); font-size:9px;
}

/* ── Architecture ── */
.msg-arch-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

.msg-arch-block {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  padding: 14px 16px;
}

.msg-arch-label {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--red);
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.msg-arch-label-icon { width:14px; height:14px; }

.msg-arch-items { display:flex; flex-direction:column; gap:5px; }
.msg-arch-item  { display:flex; align-items:baseline; gap:8px; font-size:12px; color:#8aaac8; }

.msg-arch-dot {
  width:5px; height:5px; border-radius:50%; flex-shrink:0; margin-top:2px;
}
.msg-arch-dot-blue   { background: var(--accent-light); }
.msg-arch-dot-orange { background: #f97316; }
.msg-arch-dot-red    { background: var(--red); }
.msg-arch-dot-muted  { background: var(--muted); }

/* ── Code structure ── */
.msg-code-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}

.msg-code-block {
  background: rgba(0,65,112,0.06);
  border: 1px solid var(--border);
  padding: 12px 14px;
}

.msg-code-block-title {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 1px; color: var(--accent-light);
  margin-bottom: 10px; text-transform: uppercase;
}

.msg-code-list { display:flex; flex-direction:column; gap:5px; }
.msg-code-item { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.msg-code-file {
  font-family: 'DM Mono', monospace; font-size: 10px;
  color: var(--text); background: rgba(0,98,170,0.1);
  border: 1px solid rgba(0,98,170,0.2); padding: 1px 6px; border-radius:2px;
  white-space: nowrap;
}
.msg-code-desc { font-size: 10px; color: var(--muted); flex:1; text-align:right; }

/* ── Learning ── */
.msg-learning-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

.msg-learning-item {
  display: flex; gap: 12px;
  background: rgba(0,65,112,0.06);
  border: 1px solid var(--border);
  padding: 14px;
}
.msg-learning-icon { font-size: 22px; flex-shrink:0; margin-top:2px; }
.msg-learning-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--text); }
.msg-learning-desc  { font-size: 12px; color: #6a8aaa; line-height:1.65; }

/* ── Footer popup ── */
.msg-popup-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 20px; border-top: 1px solid var(--border);
  flex-wrap: wrap; gap: 10px;
}
.msg-popup-footer-left  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.msg-popup-footer-right { display:flex; gap:6px; flex-wrap:wrap; }

/* ── Responsive ── */
/* ══════════════════════════════════
   PROJ-CARD — Logo preview stylisé
   ══════════════════════════════════ */

.proj-logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
}

/* Fonds spécifiques par app */
.proj-logo-preview--chat {
  background: radial-gradient(ellipse at 60% 40%, #0d2a50 0%, #060e1c 70%);
}
.proj-logo-preview--boutique {
  background: radial-gradient(ellipse at 60% 40%, #1e3d0a 0%, #080f03 70%);
}
.proj-logo-preview--cadreperso {
  background: radial-gradient(ellipse at 60% 40%, #2a1f00 0%, #0d0a00 70%);
}

/* Grille de points en fond */
.proj-logo-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: center;
}

/* Halo lumineux central */
.proj-logo-halo {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.3s;
}
.proj-logo-halo--blue  { background: radial-gradient(circle, #0062aa, transparent 70%); }
.proj-logo-halo--green { background: radial-gradient(circle, #2a7a10, transparent 70%); }
.proj-logo-halo--yellow { background: radial-gradient(circle, #c49a00, transparent 70%); }
.proj-card:hover .proj-logo-halo { opacity: 0.7; }

/* Anneaux décoratifs */
.proj-logo-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
  pointer-events: none;
}
.proj-logo-ring-1 { width: 100px; height: 100px; }
.proj-logo-ring-2 { width: 150px; height: 150px; border-color: rgba(255,255,255,0.03); }

/* Wrapper logo avec animation hover */
.proj-logo-wrap {
  position: relative; z-index: 2;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.6));
}
.proj-card:hover .proj-logo-wrap {
  transform: scale(1.08) translateY(-3px);
}

/* Image du logo */
.proj-logo-img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 20px;
  display: block;
}

.proj-logo-img2 {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 50px;
  display: block;
}

/* ═══════════════════════════════════════════
   GIF CAROUSEL & LIGHTBOX
═══════════════════════════════════════════ */

/* Carrousel principal */
.gif-carousel {
  position: relative;
  height: 220px;
  padding: 0;
  background: #0a0f1a;
  border: none;
  overflow: hidden;
  border-radius: 8px;
  cursor: zoom-in;
}

/* Slides */
.gif-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.4s;
  opacity: 1;
  z-index: 2;
}
.gif-carousel-slide--hidden {
  opacity: 0;
}

/* Image de fond floutée */
.gif-carousel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(12px) brightness(0.7);
  transform: scale(1.1);
  opacity: 1;
  transition: opacity 0.4s;
  z-index: 0;
}
.gif-carousel-bg--hidden {
  opacity: 0;
}

/* Icône zoom */
.gif-carousel-zoom-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.5);
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  pointer-events: none;
  z-index: 10;
}

/* Boutons nav */
.gif-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.gif-carousel-btn:hover { background: rgba(0,0,0,0.8); }
.gif-carousel-btn--prev { left: 6px; }
.gif-carousel-btn--next { right: 6px; }

/* Dots */
.gif-carousel-dots {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 10;
}
.gif-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.gif-carousel-dot--active { opacity: 1; }

/* ─── Lightbox ─── */
.gif-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.gif-lightbox-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
  cursor: default;
  pointer-events: none;
}

.gif-lightbox-btn {
  position: fixed;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.gif-lightbox-btn:hover { background: rgba(255,255,255,0.2); }
.gif-lightbox-btn--prev { left: 20px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 22px; }
.gif-lightbox-btn--next { right: 20px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 22px; }
.gif-lightbox-btn--close { top: 16px; right: 16px; width: 36px; height: 36px; font-size: 16px; }

.gif-lightbox-dots {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
}
.gif-lightbox-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.gif-lightbox-dot--active { opacity: 1; }
/* ═══════════════════════════════════════════════════════════
   MSP — Messagerie Popup Redesign (Animal'And Chat)
   Bigger, cleaner, more readable
════════════════════════════════════════════════════════════ */

/* Popup container — wider + taller */
.msp-popup {
  max-width: 1440px !important;
  max-height: 96vh !important;
}

/* Topbar */
.msp-topbar {
  padding: 14px 36px !important;
  background: linear-gradient(90deg, rgba(0,50,100,0.95) 0%, #0c1420 100%) !important;
  border-bottom: 1px solid rgba(0,98,170,0.3) !important;
}

/* Body */
.msp-body {
  padding: 40px 48px !important;
  font-size: 15px;
  line-height: 1.7;
}

/* ─── HERO ─── */
.msp-hero {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border);
}
.msp-eyebrow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.msp-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 16px;
  color: var(--text);
}
.msp-title-accent { color: var(--accent-light); }
.msp-desc {
  font-size: 15px;
  color: #8ab0cc;
  line-height: 1.75;
  margin-bottom: 22px;
  max-width: 680px;
}
.msp-desc strong { color: var(--text); }
.msp-stack-row { display: flex; flex-wrap: wrap; gap: 10px; }
.msp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0,65,112,0.18);
  border: 1px solid rgba(0,98,170,0.35);
  padding: 7px 14px;
  font-size: 13px;
  font-family: 'DM Mono', monospace;
  color: #a0c8e8;
  letter-spacing: 0.5px;
  border-radius: 2px;
  transition: border-color 0.2s;
}
.msp-chip:hover { border-color: var(--accent-light); }
.msp-chip-main { border-color: rgba(0,150,220,0.5); color: #7dc8ff; }
.msp-chip-icon { width: 16px; height: 16px; }

/* Phone mockup */
.msp-hero-right { display: flex; justify-content: center; align-items: center; }
.msp-phone-wrap { position: relative; }
.msp-phone-frame {
  width: 200px;
  height: 390px;
  background: #0a0f1a;
  border: 2px solid rgba(0,98,170,0.5);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 40px rgba(0,98,170,0.2);
}
.msp-phone-notch {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 10px;
  background: #0a0f1a;
  border-radius: 0 0 10px 10px;
  z-index: 2;
}
.msp-phone-screen {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.msp-phone-gif {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: translate(-50%, -50%) scale(1.01);
  display: block;
}
.msp-phone-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,98,170,0.2) 0%, transparent 70%);
  z-index: -1;
}

/* ─── STATS ─── */
.msp-stats-row {
  display: flex;
  gap: 14px;
  margin-bottom: 40px;
}
.msp-stat {
  flex: 1;
  background: rgba(0,50,90,0.18);
  border: 1px solid rgba(0,98,170,0.25);
  padding: 18px 12px;
  text-align: center;
  border-top: 2px solid var(--red);
  transition: border-color 0.2s, background 0.2s;
}
.msp-stat:hover { background: rgba(0,65,112,0.28); }
.msp-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--red);
  line-height: 1;
}
.msp-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-top: 5px;
  text-transform: uppercase;
}

/* ─── SECTIONS ─── */
.msp-section { margin-bottom: 44px; }
.msp-section-title {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.msp-section-title::after { content:''; flex:1; height:1px; background:var(--border); }

/* ─── CONTEXT GRID ─── */
.msp-context-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.msp-context-card {
  display: flex;
  gap: 16px;
  background: rgba(0,50,90,0.12);
  border: 1px solid rgba(0,98,170,0.2);
  padding: 20px 22px;
  border-left: 3px solid var(--accent-light);
  border-radius: 2px;
}
.msp-context-icon { font-size: 26px; flex-shrink: 0; margin-top: 2px; }
.msp-context-name { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 8px; }
.msp-context-text { font-size: 13.5px; color: #6a8aaa; line-height: 1.7; margin: 0; }
.msp-context-text strong { color: var(--text); }

/* ─── FEATURES GRID ─── */
.msp-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.msp-feat-card {
  background: rgba(0,30,60,0.35);
  border: 1px solid rgba(0,98,170,0.2);
  border-top: 2px solid rgba(0,98,170,0.4);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s, background 0.2s;
}
.msp-feat-card:hover { border-color: var(--accent-light); background: rgba(0,40,80,0.4); }
.msp-feat-header { display: flex; align-items: flex-start; gap: 12px; }
.msp-feat-icon { font-size: 26px; flex-shrink: 0; margin-top: 2px; }
.msp-feat-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: 1px;
  color: var(--text);
  line-height: 1.1;
}
.msp-feat-sub {
  font-size: 11px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  margin-top: 3px;
  letter-spacing: 0.3px;
}
.msp-carousel {
  border-radius: 4px;
  overflow: hidden;
  height: 200px;
  flex-shrink: 0;
}
.msp-feat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.msp-feat-list li {
  font-size: 13.5px;
  color: #8aaac8;
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.msp-feat-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--accent-light);
  font-weight: 700;
}

/* ─── ARCH GRID ─── */
.msp-arch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.msp-arch-block {
  background: rgba(0,30,60,0.25);
  border: 1px solid rgba(0,98,170,0.18);
  padding: 20px 22px;
}
.msp-arch-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,98,170,0.2);
}
.msp-arch-ico { width: 16px; height: 16px; }
.msp-arch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msp-arch-list li {
  font-size: 13px;
  color: #8aaac8;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.msp-arch-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--accent-light);
}

/* ─── CODE GRID ─── */
.msp-code-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.msp-code-block {
  background: rgba(0,20,45,0.5);
  border: 1px solid rgba(0,98,170,0.15);
  padding: 18px 20px;
}
.msp-code-title {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--accent-light);
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.msp-code-list { display: flex; flex-direction: column; gap: 9px; }
.msp-code-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(0,98,170,0.1);
}
.msp-code-row:last-child { border-bottom: none; padding-bottom: 0; }
.msp-code-file {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: #7dc8ff;
  flex-shrink: 0;
}
.msp-code-info { font-size: 11.5px; color: var(--muted); text-align: right; }

/* ─── LEARNING GRID ─── */
.msp-learn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.msp-learn-card {
  display: flex;
  gap: 14px;
  background: rgba(0,30,60,0.2);
  border: 1px solid rgba(0,98,170,0.15);
  padding: 18px 20px;
  border-left: 3px solid rgba(0,98,170,0.4);
  border-radius: 2px;
  transition: border-color 0.2s;
}
.msp-learn-card:hover { border-left-color: var(--accent-light); }
.msp-learn-ico { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.msp-learn-title { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 7px; }
.msp-learn-text { font-size: 13px; color: #6a8aaa; line-height: 1.7; margin: 0; }

/* ─── FOOTER ─── */
.msp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.msp-footer-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.msp-footer-right { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─── RESPONSIVE ─── */
/* ═══════════════════════════════════════════════════════════
   MSP v2 — Rounded corners + scrollable code blocks
════════════════════════════════════════════════════════════ */

/* Global rounding for all MSP cards */
.msp-feat-card    { border-radius: 10px !important; }
.msp-context-card { border-radius: 10px !important; }
.msp-arch-block   { border-radius: 10px !important; }
.msp-code-block   { border-radius: 10px !important; }
.msp-learn-card   { border-radius: 10px !important; border-left-width: 3px; }
.msp-stat         { border-radius: 8px !important; }
.msp-chip         { border-radius: 6px !important; }

/* Code block: fixed height + scroll */
.msp-code-block {
  display: flex;
  flex-direction: column;
}
.msp-code-list {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,98,170,0.4) transparent;
  padding-right: 4px;
}
.msp-code-list::-webkit-scrollbar { width: 4px; }
.msp-code-list::-webkit-scrollbar-thumb { background: rgba(0,98,170,0.4); border-radius: 4px; }
.msp-code-list::-webkit-scrollbar-track { background: transparent; }

/* 4-column code grid + file count badge */
.msp-code-grid-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}
.msp-code-count {
  font-size: 10px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.5px;
  margin-left: 6px;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════
   AVP — Animal'Vest Popup
   Palette militaire : khaki #6B7355 / olive #4A5240 / rouge #CC2222
════════════════════════════════════════════════════════════ */

:root {
  --avp-khaki:       #6B7355;
  --avp-khaki-light: #8A9468;
  --avp-olive:       #4A5240;
  --avp-tan:         #A89F7A;
  --avp-red:         #CC2222;
  --avp-surface:     #1A1A1A;
  --avp-border:      #3A3830;
  --avp-text:        #E8E4D8;
  --avp-muted:       #A09880;
}

/* Topbar khaki */
.avp-topbar {
  background: linear-gradient(90deg, rgba(74,82,64,0.9) 0%, #111 100%) !important;
  border-bottom: 1px solid rgba(107,115,85,0.3) !important;
}

/* Title */
.avp-title { color: var(--avp-text) !important; }
.avp-title-accent { color: var(--avp-khaki-light) !important; }

/* Badges */
.avp-badge-stage  { background: rgba(74,82,64,0.2); color: var(--avp-khaki-light); border-color: rgba(107,115,85,0.4); }
.avp-badge-animal { background: rgba(74,82,64,0.12); color: #a8b890; border-color: rgba(107,115,85,0.3); }
.avp-badge-private { background: rgba(204,34,34,0.1); color: #ff6b5e; border-color: rgba(204,34,34,0.3); }

/* Chips khaki */
.avp-chip-main { border-color: rgba(107,115,85,0.5) !important; color: var(--avp-khaki-light) !important; }

/* Phone frame khaki glow */
.avp-phone-frame { border-color: rgba(107,115,85,0.5) !important; box-shadow: 0 0 40px rgba(74,82,64,0.25) !important; }
.avp-phone-logo { object-fit: contain !important; background: #111; padding: 20px; }
.avp-phone-glow { background: radial-gradient(circle, rgba(74,82,64,0.2) 0%, transparent 70%) !important; }

/* Stats khaki */
.avp-stat { border-top-color: var(--avp-khaki) !important; border-color: rgba(107,115,85,0.2) !important; }
.avp-stat-num { color: var(--avp-khaki-light) !important; }

/* Section title khaki */
.avp-section-title { color: var(--avp-khaki-light) !important; }
.avp-section-title::after { background: var(--avp-border) !important; }

/* Context cards khaki */
.avp-context-card { border-left-color: var(--avp-khaki-light) !important; background: rgba(74,82,64,0.1) !important; border-color: rgba(107,115,85,0.18) !important; }

/* Feature cards khaki */
.avp-feat-card { border-top-color: rgba(107,115,85,0.5) !important; border-color: rgba(74,82,64,0.2) !important; }
.avp-feat-card:hover { border-color: var(--avp-khaki-light) !important; }
.avp-feat-title { font-size: 18px !important; }

/* Feature list khaki arrows */
.avp-feat-card .msp-feat-list li::before { color: var(--avp-khaki-light) !important; }

/* Arch blocks */
.avp-arch-block { background: rgba(74,82,64,0.08) !important; border-color: rgba(107,115,85,0.15) !important; }
.avp-arch-header { color: var(--avp-khaki-light) !important; border-bottom-color: rgba(107,115,85,0.2) !important; }
.avp-arch-block .msp-arch-list li::before { color: var(--avp-khaki-light) !important; }

/* Code blocks */
.avp-code-block { background: rgba(30,28,20,0.6) !important; border-color: rgba(107,115,85,0.12) !important; }
.avp-code-title { color: var(--avp-khaki-light) !important; }
.avp-code-file { color: var(--avp-tan) !important; }

/* Learn cards */
.avp-learn-card { border-left-color: rgba(107,115,85,0.35) !important; }
.avp-learn-card:hover { border-left-color: var(--avp-khaki-light) !important; }

/* ── VISUAL MOCKUPS ── */
.avp-feat-visual {
  border-radius: 8px;
  overflow: hidden;
  background: rgba(10,12,8,0.7);
  border: 1px solid rgba(107,115,85,0.2);
  padding: 12px;
  margin-bottom: 2px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
}

/* Home mockup */
.avp-mockup-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.avp-mockup-logo {
  font-size: 10px;
  font-weight: 800;
  color: #e8e4d8;
  letter-spacing: 2px;
}
.avp-badge-role {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 1px;
}
.avp-badge-member { background: rgba(37,99,235,0.25); color: #60a5fa; border: 1px solid rgba(37,99,235,0.4); }
.avp-mockup-hero-card {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(107,115,85,0.25);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
.avp-mockup-logo-circle { font-size: 18px; margin-bottom: 3px; }
.avp-mockup-hero-title { font-size: 10px; font-weight: 800; color: #e8e4d8; letter-spacing: 2px; }
.avp-mockup-hero-sub { font-size: 9px; color: #a09880; margin-top: 2px; }
.avp-mockup-cta {
  margin-top: 6px;
  background: linear-gradient(180deg, #4A5240, #2a2e24);
  color: #8A9468;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 5px;
  display: inline-block;
}
.avp-mockup-section-title { font-size: 8px; color: #6B7355; letter-spacing: 2px; font-weight: 700; }
.avp-mockup-units-row { display: flex; gap: 6px; }
.avp-mockup-unit {
  flex: 1;
  background: rgba(74,82,64,0.15);
  border: 1px solid rgba(107,115,85,0.25);
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 9px;
  color: #8A9468;
  font-weight: 600;
}

/* Shop mockup */
.avp-mockup-bar-shop { padding: 2px 0; }
.avp-search-bar {
  display: block;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(107,115,85,0.2);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 9px;
  color: #5c5648;
}
.avp-filter-row { display: flex; gap: 5px; flex-wrap: wrap; }
.avp-filter-chip {
  font-size: 8px;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(107,115,85,0.2);
  color: #a09880;
}
.avp-filter-active { background: rgba(107,115,85,0.2) !important; border-color: #6B7355 !important; color: #8A9468 !important; font-weight: 700; }
.avp-product-grid-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.avp-product-mini {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(107,115,85,0.15);
  border-radius: 6px;
  padding: 6px;
  text-align: center;
}
.avp-product-img { font-size: 18px; margin-bottom: 4px; }
.avp-product-name { font-size: 8px; color: #a09880; }
.avp-product-price { font-size: 10px; color: #e8e4d8; font-weight: 700; margin-top: 3px; }

/* Cart mockup */
.avp-cart-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(107,115,85,0.15);
  border-radius: 8px;
  padding: 7px;
}
.avp-cart-img { font-size: 22px; flex-shrink: 0; }
.avp-cart-info { flex: 1; }
.avp-cart-name { font-size: 10px; color: #e8e4d8; font-weight: 600; }
.avp-cart-row { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.avp-cart-size { font-size: 8px; background: rgba(107,115,85,0.15); color: #8A9468; padding: 2px 6px; border-radius: 4px; }
.avp-cart-price { font-size: 9px; color: #a09880; }
.avp-cart-qty { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.avp-qty-btn { width: 18px; height: 18px; background: rgba(255,255,255,0.06); border: 1px solid #3A3830; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #a09880; }
.avp-qty-val { font-size: 12px; color: #e8e4d8; font-weight: 700; }
.avp-cart-total-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px; font-size: 10px; color: #a09880; }
.avp-cart-total-val { font-size: 14px; color: #e8e4d8; font-weight: 800; }
.avp-order-btn { background: linear-gradient(180deg, #CC2222, #7A1010); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; padding: 7px; border-radius: 6px; text-align: center; }

/* Profile mockup */
.avp-profile-avatar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.avp-profile-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #4A5240, #6B7355); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #e8e4d8; flex-shrink: 0; }
.avp-profile-name { font-size: 12px; color: #e8e4d8; font-weight: 700; }
.avp-profile-role { font-size: 9px; color: #8A9468; margin-top: 2px; }
.avp-profile-field { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.avp-profile-label { font-size: 10px; color: #a09880; }
.avp-profile-edit { font-size: 9px; color: #6B7355; }
.avp-strength-bar { height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.avp-strength-fill { height: 100%; border-radius: 2px; }
.avp-strength-label { font-size: 9px; margin-top: 3px; font-weight: 700; }

/* Auth mockup */
.avp-auth-title { font-size: 13px; font-weight: 800; color: #e8e4d8; letter-spacing: 3px; text-align: center; margin-bottom: 4px; }
.avp-auth-field { background: rgba(255,255,255,0.04); border: 1px solid #3A3830; border-radius: 6px; padding: 6px 10px; font-size: 9px; color: #5c5648; }
.avp-auth-btns { display: flex; flex-direction: column; gap: 5px; }
.avp-auth-btn-main { background: linear-gradient(180deg, #4A5240, #2a2e24); color: #8A9468; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; padding: 6px; border-radius: 5px; text-align: center; }
.avp-auth-btn-guest { font-size: 9px; color: #5c5648; text-align: center; }
.avp-auth-tabs { display: flex; gap: 6px; }
.avp-auth-tab { flex: 1; font-size: 9px; padding: 4px; text-align: center; border-radius: 5px; color: #5c5648; }
.avp-auth-tab-active { background: rgba(107,115,85,0.15); color: #8A9468; font-weight: 700; }

/* Notif mockup */
.avp-notif-card {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(107,115,85,0.15);
  border-radius: 7px;
  padding: 7px;
}
.avp-notif-admin { border-color: rgba(204,34,34,0.2) !important; }
.avp-notif-icon { font-size: 16px; flex-shrink: 0; }
.avp-notif-title { font-size: 10px; color: #e8e4d8; font-weight: 600; }
.avp-notif-sub { font-size: 8px; color: #a09880; margin-top: 2px; }
.avp-notif-channels { display: flex; gap: 6px; flex-wrap: wrap; }
.avp-notif-chip { font-size: 8px; padding: 3px 7px; border-radius: 10px; background: rgba(74,82,64,0.15); border: 1px solid rgba(107,115,85,0.25); color: #8A9468; }

/* Admin mockup */
.avp-admin-tabs { display: flex; gap: 5px; }
.avp-admin-tab { font-size: 8px; padding: 3px 8px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid #3A3830; color: #5c5648; }
.avp-admin-tab-active { background: rgba(74,82,64,0.2) !important; border-color: #6B7355 !important; color: #8A9468 !important; font-weight: 700; }
.avp-admin-order {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(107,115,85,0.15);
  border-radius: 7px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.avp-admin-order-id { font-size: 10px; color: #e8e4d8; font-weight: 700; }
.avp-admin-order-row { display: flex; justify-content: space-between; align-items: center; }
.avp-admin-status { font-size: 8px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.5px; }
.avp-status-pending { background: rgba(234,179,8,0.15); color: #d97706; border: 1px solid rgba(234,179,8,0.3); }
.avp-admin-tracking { font-size: 8px; color: #5c5648; }
.avp-admin-actions { display: flex; gap: 5px; }
.avp-admin-btn { font-size: 8px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.avp-admin-btn-validate { background: rgba(74,122,74,0.2); color: #4A7A4A; border: 1px solid rgba(74,122,74,0.4); }
.avp-admin-btn-ship { background: rgba(37,99,235,0.15); color: #60a5fa; border: 1px solid rgba(37,99,235,0.3); }
.avp-admin-btn-delete { background: rgba(204,34,34,0.15); color: #CC2222; border: 1px solid rgba(204,34,34,0.3); }

/* Theme mockup */
.avp-palette-row { display: flex; gap: 5px; }
.avp-swatch {
  flex: 1;
  height: 28px;
  border-radius: 5px;
  display: flex;
  align-items: flex-end;
  padding: 2px 3px;
  font-size: 7px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}
.avp-theme-row { display: flex; gap: 6px; }
.avp-theme-card-mini { flex: 1; }
.avp-theme-btn-khaki { background: linear-gradient(180deg, #4A5240, #2a2e24); color: #8A9468; font-size: 8px; font-weight: 700; letter-spacing: 1px; padding: 6px; border-radius: 5px; text-align: center; }
.avp-theme-btn-red { background: linear-gradient(180deg, #CC2222, #7A1010); color: #fff; font-size: 8px; font-weight: 700; letter-spacing: 1px; padding: 6px; border-radius: 5px; text-align: center; }
.avp-font-preview { font-size: 9px; color: #5c5648; letter-spacing: 1px; font-weight: 600; text-align: center; }

/* Security mockup */
.avp-security-rule { font-size: 10px; padding: 3px 0; }
.avp-rule-ok { color: #4ade80; }
.avp-rule-warn { color: #d97706; }
.avp-rate-limit { font-size: 9px; color: #5c5648; margin-top: 4px; padding: 4px 8px; background: rgba(204,34,34,0.08); border: 1px solid rgba(204,34,34,0.2); border-radius: 5px; }

/* Folder rows in code structure */
.avp-folder-row { padding-top: 6px; }
.avp-folder {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--avp-khaki-light);
  font-weight: 700;
  letter-spacing: 0.3px;
}
.avp-indent { padding-left: 14px !important; }
.avp-indent .avp-code-file { color: var(--avp-tan) !important; font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════
   MCD POPUP — Animal'And Chat
   ═══════════════════════════════════════════════════════ */
.mcd-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.78);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}
.mcd-overlay.active {
  display: flex;
}
.mcd-box {
  background: #0f1117;
  border: 1px solid #2a2d3a;
  border-radius: 16px;
  width: min(98vw, 1500px);
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.75);
}
.mcd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #1e2130;
  flex-shrink: 0;
}
.mcd-topbar-left .mcd-supertitle {
  font-size: .68rem;
  color: #666;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mcd-topbar-left .mcd-title {
  font-size: 1rem;
  font-weight: 700;
  color: #e8eaf0;
  margin-top: 2px;
}
.mcd-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mcd-zoom-btn {
  background: #1e2130;
  border: 1px solid #2a2d3a;
  color: #aaa;
  font-size: .8rem;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.mcd-zoom-btn:hover {
  background: #2a2d3a;
  color: #e8eaf0;
}
.mcd-close-btn {
  background: #1e2130;
  border: none;
  color: #aaa;
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.mcd-close-btn:hover {
  background: #2a2d3a;
  color: #e8eaf0;
}
.mcd-fullscreen-btn {
  font-size: 1.05rem;
  padding: 5px 11px;
  transition: background .15s, color .15s, transform .1s;
}
.mcd-fullscreen-btn:hover {
  background: #2a2d3a;
  color: #e8eaf0;
  transform: scale(1.12);
}
.mcd-fullscreen-btn.is-fullscreen {
  color: #60a5fa;
  border-color: rgba(96,165,250,.35);
}
.mcd-box.mcd-is-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.mcd-overlay.mcd-overlay-fullscreen {
  padding: 0 !important;
  background: #0a0b0f !important;
  backdrop-filter: none !important;
}
.mcd-scroll {
  overflow: hidden;
  flex: 1;
  min-height: 0;
  position: relative;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.mcd-scroll:active { cursor: grabbing; }
.mcd-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  padding: 20px;
}
.mcd-svg {
  display: block;
  width: 2500px;
  height: 1800px;
}
.mcd-footer {
  padding: 10px 20px;
  border-top: 1px solid #1e2130;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.mcd-footer span {
  font-size: .72rem;
  color: #64748b;
}

/* ── MCD trigger "Voir MCD ↗" badge ── */
.mcd-voir-btn {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--accent, #4f8ef7);
  background: rgba(79,142,247,.1);
  border: 1px solid rgba(79,142,247,.2);
  border-radius: 6px;
  padding: 3px 9px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.mcd-trigger-card:hover .mcd-voir-btn {
  background: rgba(79,142,247,.2);
  color: #7eb3ff;
}/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE COMPLET — MATTHIEU DOOLAEGHE PORTFOLIO
   Breakpoints:
     - ≥ 1920px  : très grand écran
     - ≥ 1600px  : grand desktop
     - ≥ 961px   : desktop standard (no-scroll layout)
     - 1500–1560px h≤750 : laptop écran serré
     - ≤ 1200px  : tablet landscape
     - ≤ 960px   : tablet portrait
     - ≤ 640px   : mobile
     - ≤ 480px   : petit mobile
     - ≤ 380px   : très petit mobile
═══════════════════════════════════════════════════════════════════ */

/* ══ DESKTOP NO-SCROLL LAYOUT (≥ 961px) ══ */

/* ════════════════════════════════════════════════════════════
   HAMBURGER + MOBILE NAV
   ════════════════════════════════════════════════════════════ */

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.2s;
  z-index: 110;
}
.hamburger:hover { border-color: var(--red); }
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.25s ease;
  transform-origin: center;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 300;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mobile-nav-overlay.active { display: flex; align-items: flex-start; justify-content: flex-end; animation: fadeIn 0.18s ease; }
.mobile-nav {
  width: min(300px, 85vw);
  height: 100%;
  background: #0a0e14;
  border-left: 1px solid var(--border);
  border-left: 2px solid var(--red);
  padding: 0;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.22s cubic-bezier(0.22,1,0.36,1);
  overflow-y: auto;
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--accent);
  border-bottom: 2px solid var(--red);
  flex-shrink: 0;
}
.mobile-nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: #fff;
}
.mobile-nav-close {
  background: rgba(218,41,28,0.25);
  border: 1px solid rgba(218,41,28,0.4);
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.mobile-nav-close:hover { background: var(--red); }
.mobile-nav a {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
  position: relative;
}
.mobile-nav a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--red);
  transition: width 0.15s;
}
.mobile-nav a:hover { background: rgba(218,41,28,0.08); color: #fff; padding-left: 26px; }
.mobile-nav a:hover::before { width: 3px; }
.mobile-nav a:last-child { border-bottom: none; }

/* ════════════════════════════════════════════════════════════
   DESKTOP (≥ 961px) — Layout no-scroll
   ════════════════════════════════════════════════════════════ */
@media (min-width: 961px) {
  body { overflow: hidden; }

  .grid-container {
    padding: 8px 12px;
    height: calc(100vh - 48px);
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr 1fr 1fr;
    gap: 7px;
    margin: 0;
    box-sizing: border-box;
    align-items: stretch;
  }

  .tile { height: 100%; }

  .tile-about    { grid-column: span 5; grid-row: span 2; min-height: unset; }
  .tile-projects { grid-column: span 4; grid-row: span 2; min-height: unset; }
  .tile-skills   { grid-column: span 3; grid-row: span 2; min-height: unset; }
  .tile-xp       { grid-column: span 4; min-height: unset; }
  .tile-cv       { grid-column: span 3; min-height: unset; }
  .tile-contact  { grid-column: span 5; min-height: unset; }
  .tile-graphisme { grid-column: span 9; min-height: unset; }
  .tile-footer   { grid-column: span 3; min-height: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; }

  /* Desktop extras visibles */
  .tile-desktop-extra { display: block; }

  /* Skills layout */
  .skills-layout-large   { display: block; }
  .skills-layout-compact { display: none; }

  /* Hamburger caché */
  .hamburger { display: none; }
}

/* ════════════════════════════════════════════════════════════
   DESKTOP MOYEN (1024px – 1440px)
   Tout caché sauf FM card About, compressée pour tenir
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1440px) {

  /* Tout caché */
  .tile-desktop-extra { display: none !important; }

  /* FM card About seulement */
  .about-fm { display: block !important; }

  /* ── Compresser le contenu au-dessus pour libérer de la place ── */
  .about-name       { font-size: 36px; line-height: 1; }
  .about-role       { font-size: 10px; margin-top: 3px; }
  .about-bio        { font-size: 11px; margin-top: 6px; line-height: 1.5; }
  .about-tags       { margin-top: 8px; gap: 4px; }
  .tag              { font-size: 9px; padding: 2px 6px; }

  /* ── FM card ── */
  .about-fm         { margin-top: 8px; }
  .about-fm-divider { margin: 6px 0 8px; }

  /* Grid 2 colonnes, rien ne dépasse */
  .about-fm-card    {
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
  }

  /* En-têtes colonnes */
  .about-fm-section-title {
    font-size: 7px;
    letter-spacing: 1.5px;
    padding: 3px 8px;
  }

  /* Colonne gauche : Inactif */
  .about-fm-idle      { padding: 6px 4px; gap: 2px; height: auto; }
  .about-fm-idle-zzz  { height: 20px; }
  .z1                 { font-size: 10px; }
  .z2                 { font-size: 14px; }
  .z3                 { font-size: 18px; }
  .about-fm-idle-label { font-size: 14px; letter-spacing: 2px; }
  .about-fm-idle-sub  { font-size: 7px; line-height: 1.5; }

  /* Colonne droite : Profil */
  .about-fm-info-row  { padding: 3px 8px; }
  .about-fm-info-label { font-size: 8px; }
  .about-fm-info-val  { font-size: 9.5px; }
  .about-status-dot   { width: 5px; height: 5px; }
}

/* ════════════════════════════════════════════════════════════
   DESKTOP INTERMÉDIAIRE : 1441–1599px
   (ex : 1456×920 — tuile about trop haute sans cette plage)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) and (max-width: 1599px) {

  /* Cacher les extras pour ne pas faire déborder le contenu */
  .tile-desktop-extra { display: none !important; }
  .about-fm { display: block !important; }

  /* Compresser le texte de la tuile about */
  .about-name       { font-size: 40px; line-height: 1; }
  .about-role       { font-size: 10px; margin-top: 3px; }
  .about-bio        { font-size: 11px; margin-top: 6px; line-height: 1.5; }
  .about-tags       { margin-top: 8px; gap: 4px; }
  .tag              { font-size: 9px; padding: 2px 6px; }

  /* FM card compressée */
  .about-fm         { margin-top: 8px; }
  .about-fm-divider { margin: 5px 0 6px; }
  .about-fm-card    { grid-template-columns: 1fr 1fr; overflow: hidden; }
  .about-fm-section-title { font-size: 7px; letter-spacing: 1.5px; padding: 3px 8px; }
  .about-fm-idle    { padding: 6px 4px; gap: 2px; height: auto; }
  .about-fm-idle-zzz { height: 20px; }
  .z1               { font-size: 10px; }
  .z2               { font-size: 14px; }
  .z3               { font-size: 18px; }
  .about-fm-idle-label { font-size: 14px; letter-spacing: 2px; }
  .about-fm-idle-sub { font-size: 7px; line-height: 1.5; }
  .about-fm-info-row { padding: 3px 8px; }
  .about-fm-info-label { font-size: 8px; }
  .about-fm-info-val { font-size: 9.5px; }
  .about-status-dot { width: 5px; height: 5px; }

  /* Dots : assurer qu'ils restent visibles dans le tile */
  .tile-about { padding-bottom: 36px; }
  .tile-dots   { bottom: 12px; right: 12px; }
  .tile-dot    { width: 10px; height: 10px; }

  /* Slider about : laisser la hauteur s'adapter naturellement */
  .tile-about .skills-section-slider { min-height: unset; overflow: visible; }

  /* Limiter la hauteur totale de la FM card pour ne pas pousser les dots hors du tile */
  .about-fm-card { max-height: 160px; overflow: hidden; }
  .about-fm-info-row { padding: 2px 8px; }
}

/* ════════════════════════════════════════════════════════════
   GRAND DESKTOP (≥ 1600px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  .topbar-inner { max-width: 100%; }
  .grid-container { max-width: 100%; padding: 10px 16px; }
  .about-name           { font-size: 56px; }
  .proj-count           { font-size: 76px; }
  .cv-big               { font-size: 46px; }
  .xp-count             { font-size: 50px; }
  .graphisme-tile-title { font-size: 52px; }
}

/* ════════════════════════════════════════════════════════════
   TRÈS GRAND ÉCRAN (≥ 1920px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) and (min-height: 981px) {
  .tile-dot { width: 16px; height: 16px; }
  .tile-dot.active { box-shadow: 0 0 8px rgba(218,41,28,0.7); }
  .about-name           { font-size: 62px; }
  .proj-count           { font-size: 84px; }
  .graphisme-tile-title { font-size: 58px; }
  .tile-title           { font-size: 30px; }
  .popup-title          { font-size: 64px; }
}

/* ════════════════════════════════════════════════════════════
   LAPTOP SERRÉ : 1500–1560px et hauteur ≤ 750px
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1500px) and (max-width: 1560px) and (max-height: 750px) {
  .tile-desktop-extra { display: none !important; }
  .skills-layout-large   { display: none; }
  .skills-layout-compact { display: block; }

  /* ── about-fm : version ultra-compacte pour 1536x730 ── */
  .about-fm           { margin-top: 6px; }
  .about-fm-divider   { margin: 4px 0 5px; }
  .about-fm-card      { grid-template-columns: 1fr 1fr; max-height: 140px; overflow: hidden; }
  .about-fm-section-title { font-size: 6.5px; letter-spacing: 1.5px; padding: 2px 7px; }
  .about-fm-attr-row  { padding: 2px 7px; gap: 6px; }
  .about-fm-attr-val  { font-size: 13px; width: 22px; }
  .about-fm-attr-name { font-size: 8.5px; }
  .about-fm-info-row  { padding: 2px 7px; }
  .about-fm-info-label { font-size: 7px; }
  .about-fm-info-val  { font-size: 9px; }
  .about-fm-idle      { padding: 4px 3px; gap: 1px; height: auto; }
  .about-fm-idle-zzz  { height: 16px; }
  .about-fm-idle-label { font-size: 12px; letter-spacing: 2px; }
  .about-fm-idle-sub  { font-size: 6.5px; line-height: 1.4; }
  .about-fm-cat-badge { font-size: 6px; padding: 1px 4px; width: 38px; }

  /* ── ABOUT TILE : agrandi pour combler la place sur 1536x730 ── */
  .tile-about { display: flex; flex-direction: column; justify-content: space-between; }
  .tile-about .skills-section-slider { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: unset; }
  .tile-about #tile-about-0 { display: flex; flex-direction: column; justify-content: center; height: 100%; }

  .about-name { font-size: 72px; line-height: 0.95; letter-spacing: 3px; margin-top: 8px; }
  .about-role { font-size: 13px; margin-top: 14px; letter-spacing: 3px; }
  .about-bio  { font-size: 14px; margin-top: 18px; line-height: 1.75; max-width: 420px; }
  .about-tags { margin-top: 22px; gap: 8px; }
  .tag        { font-size: 12px; padding: 5px 14px; }

  .xp-top       { margin-top: 0; margin-bottom: 6px; }
  .xp-count     { font-size: 32px; }
  .xp-item      { padding: 6px 8px 8px; gap: 2px; }
  .xp-item-role { font-size: 11px; }
  .xp-item-co   { font-size: 8px; }
  .xp-item-badge { font-size: 6px; padding: 1px 4px; }

  .cv-big        { font-size: 28px; margin-top: 2px; }
  .cv-btn        { margin-top: 8px; font-size: 12px; padding: 6px 14px; }
  .cv-btn-preview { margin-top: 6px; font-size: 12px; padding: 6px 14px; }

  .gh-tile-header    { margin-bottom: 7px; }
  .gh-tile-stats     { margin-bottom: 7px; gap: 5px; }
  .gh-tile-stat      { padding: 4px 4px; }
  .gh-tile-stat-num  { font-size: 17px; }
  .gh-graph-label    { margin-bottom: 5px; }
  .gh-graph-cell     { height: 10px; }
  .gh-graph-grid     { gap: 1.5px; }
  .gh-graph-week     { gap: 1.5px; }
  .gh-graph-grid-wrap { gap: 3px; }

  .settings-tile-name    { font-size: 22px; }
  .settings-tile-content { padding-bottom: 32px; gap: 8px; }
  .settings-active-display { gap: 3px; }
  .stile-val { font-size: 9px; }

  .popup          { max-height: 82vh; }
  .popup-body     { padding: 18px 28px; }
  .popup-title    { font-size: 36px; margin-bottom: 2px; }
  .popup-subtitle { font-size: 11px; margin-bottom: 12px; padding-bottom: 10px; }
  .popup-section  { margin-bottom: 14px; }
  .popup-topbar   { padding: 8px 28px; }
  .stat-box       { padding: 8px; }
  .stat-box-num   { font-size: 22px; }
  .stat-box-label { font-size: 9px; }
  .about-popup-text { font-size: 12px; line-height: 1.55; }
}

/* ════════════════════════════════════════════════════════════
   TABLET LANDSCAPE (≤ 1200px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  body { overflow-x: hidden; overflow-y: auto; }

  .grid-container {
    grid-template-columns: repeat(12, 1fr);
    height: auto;
    padding: 10px 14px;
    gap: 8px;
  }

  .tile-graphisme { grid-column: span 8; }
  .tile-footer    { grid-column: span 4; }

  .about-name           { font-size: 40px; }
  .proj-count           { font-size: 56px; }
  .graphisme-tile-title { font-size: 36px; }

  .msp-features-grid { grid-template-columns: repeat(2, 1fr); }
  .msp-context-grid  { grid-template-columns: 1fr 1fr; }
  .msp-learn-grid    { grid-template-columns: 1fr 1fr; }
  .msp-code-grid     { grid-template-columns: 1fr 1fr; }
  .msp-hero          { grid-template-columns: 1fr 220px; gap: 32px; }
  .msp-title         { font-size: 58px; }
  .msp-code-grid-4   { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════
   SKILLS compact sous 1499px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1499px) {
  .skills-layout-large   { display: none; }
  .skills-layout-compact { display: block; }
}

/* ════════════════════════════════════════════════════════════
   TABLET PORTRAIT (≤ 960px) — topbar nav scrollable
   ════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  body { overflow-x: hidden; overflow-y: auto; }

  /* Topbar : nav scrollable horizontalement */
  .topbar { padding: 0 12px; }
  .topbar-nav {
    position: static;
    transform: none;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 1;
    min-width: 0;
  }
  .topbar-nav::-webkit-scrollbar { display: none; }
  .topbar-nav a { font-size: 11px; padding: 4px 8px; letter-spacing: 1px; white-space: nowrap; }
  .topbar-inner { gap: 8px; }
  .topbar-right { display: none; }

  /* Grid 6 colonnes */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows:
      minmax(220px, 1fr)
      minmax(220px, 1fr)
      minmax(150px, auto)
      minmax(160px, auto);
    height: auto;
    min-height: calc(100vh - 48px);
    padding: 10px 12px;
    gap: 8px;
    align-items: stretch;
  }

  /* Placement des tiles */
  .tile-about    { grid-column: span 4; grid-row: 1; min-height: unset; }
  .tile-projects { grid-column: span 2; grid-row: 1; min-height: unset; }
  .tile-skills   { grid-column: span 3; grid-row: 2; min-height: unset; }
  .tile-xp       { grid-column: span 3; grid-row: 2; min-height: unset; }
  .tile-cv       { grid-column: span 2; grid-row: 3; min-height: unset; }
  .tile-contact  { grid-column: span 4; grid-row: 3; min-height: unset; }
  .tile-graphisme { grid-column: span 4; grid-row: 4; min-height: unset; }
  .tile-footer   { grid-column: span 2; grid-row: 4; min-height: unset; }

  /* desktop extras cachés */
  .tile-desktop-extra { display: none; }

  /* Typographie */
  .about-name           { font-size: 36px; }
  .proj-count           { font-size: 52px; }
  .graphisme-tile-title { font-size: 32px; }

  /* Popup grids */
  .proj-cards            { grid-template-columns: 1fr 1fr; }
  .about-popup-grid      { grid-template-columns: 1fr; }
  .skills-popup-grid     { grid-template-columns: 1fr; }
  .contact-popup-grid    { grid-template-columns: 1fr 1fr; }
  .clients-row           { grid-template-columns: 1fr; }
  .stats-row             { flex-wrap: wrap; }
  .github-popup-repos    { grid-template-columns: 1fr; }
  .bts-blocs-grid        { grid-template-columns: 1fr 1fr; }
  .gh-popup-repos-grid   { grid-template-columns: 1fr 1fr; }

  /* MSP popup */
  .msp-hero          { grid-template-columns: 1fr; }
  .msp-hero-right    { display: none; }
  .msp-features-grid { grid-template-columns: 1fr; }
  .msp-arch-grid     { grid-template-columns: 1fr; }
  .msp-context-grid  { grid-template-columns: 1fr; }
  .msp-learn-grid    { grid-template-columns: 1fr; }
  .msp-code-grid     { grid-template-columns: 1fr; }
  .msp-body          { padding: 24px 20px !important; }
  .msp-title         { font-size: 44px; }
  .msp-stats-row     { flex-wrap: wrap; }
  .msp-stat          { flex: 1 0 calc(50% - 7px); }
  .msp-code-grid-4   { grid-template-columns: 1fr 1fr !important; }

  /* Messagerie popup */
  .msg-popup-hero    { grid-template-columns: 1fr; }
  .msg-popup-hero-right { display: none; }
  .msg-features-grid { grid-template-columns: 1fr 1fr; }
  .msg-context-grid  { grid-template-columns: 1fr; }
  .msg-arch-grid     { grid-template-columns: 1fr; }
  .msg-code-grid     { grid-template-columns: 1fr 1fr; }
  .msg-learning-grid { grid-template-columns: 1fr; }

  /* Skills tile */
  .skills-layout-large   { display: none; }
  .skills-layout-compact { display: block; }

  /* Skills popup */
  .skills-popup-icon-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   MOBILE — Pacman Caché (smartphones ≤ 960px)
   ════════════════════════════════════════════════════════════ */

/* Cache complètement le composant Pacman sur smartphone/tablette */
@media (max-width: 960px) {
  .pacman-container,
  #pacman-game,
  #pacman-wrapper,
  .pacman-wrapper,
  [class*="pacman"],
  [id*="pacman"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}



/* ════════════════════════════════════════════════════════════
   MOBILE (≤ 640px) — Hamburger menu activé
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* ── Topbar ── */
  .topbar { padding: 0 12px; height: 52px; }
  .topbar-nav { display: none !important; } /* Remplacé par mobile-nav */
  .topbar-right { display: none; }
  .topbar-inner { justify-content: space-between; gap: 0; }
  .logo { font-size: 14px; letter-spacing: 1.5px; }
  .logo-badge { font-size: 9px; padding: 2px 6px; }

  /* Hamburger visible */
  .hamburger { display: flex; }

  /* ── Grid : colonne unique ── */
  .grid-container {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: unset;
    padding: 8px 10px;
    gap: 7px;
  }

  /* Toutes les tiles pleine largeur, hauteur auto */
  .tile,
  .tile-about, .tile-projects, .tile-skills,
  .tile-xp, .tile-cv, .tile-contact,
  .tile-graphisme, .tile-footer {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100%;
    min-height: unset;
    height: auto;
  }

  /* Hauteurs min adaptées */
  .tile-about     { min-height: 220px; }
  .tile-projects  { min-height: 200px; }
  .tile-skills    { min-height: 200px; }
  .tile-xp        { min-height: 180px; }
  .tile-cv        { min-height: 140px; }
  .tile-contact   { min-height: 140px; }
  .tile-graphisme { min-height: 170px; }
  .tile-footer    { min-height: 80px; }

  /* CV tile */
  .tile-cv { display: flex; flex-direction: column; }
  .cv-btn, .cv-btn-preview { display: block; text-align: center; width: fit-content; }

  /* XP timeline vertical */
  .xp-timeline { flex-direction: column; gap: 5px; }

  /* Contact chips */
  .contact-links { gap: 4px; }
  .contact-chip  { font-size: 10px; padding: 4px 9px; }

  /* Typographie */
  .about-name           { font-size: 32px; }
  .about-bio            { font-size: 12px; }
  .proj-count           { font-size: 48px; }
  .cv-big               { font-size: 30px; }
  .xp-count             { font-size: 36px; }
  .graphisme-tile-title { font-size: 28px; }
  .tile-title           { font-size: 22px; }

  /* ── Popups : bottom sheet ── */
  .overlay {
    padding: 0;
    align-items: flex-end;
  }
  .popup {
    max-height: 92vh;
    border-radius: 10px 10px 0 0;
    width: 100%;
    max-width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  .popup-body       { padding: 16px; }
  .popup-title      { font-size: 28px; }
  .popup-topbar     { padding: 10px 16px; border-radius: 10px 10px 0 0; }
  .popup-subtitle   { font-size: 11px; }

  /* Grids 1 colonne */
  .proj-cards          { grid-template-columns: 1fr; }
  .about-popup-grid    { grid-template-columns: 1fr; }
  .skills-popup-grid   { grid-template-columns: 1fr; }
  .contact-popup-grid  { grid-template-columns: 1fr; }
  .clients-row         { grid-template-columns: 1fr; }
  .bts-blocs-grid      { grid-template-columns: 1fr; }
  .stats-row           { flex-wrap: wrap; }
  .stat-box            { flex: 1 0 calc(50% - 5px); }
  .xp-popup-header     { flex-direction: column; gap: 6px; }
  .gh-popup-repos-grid { grid-template-columns: 1fr; }

  /* Galerie graphisme */
  .graphisme-gallery   { columns: 2; column-gap: 8px; }

  /* GSB screenshots */
  .gsb-screenshots-grid { grid-template-columns: 1fr; }

  /* CV iframe */
  .cv-iframe-inner iframe { height: 400px; }

  /* MSP popup */
  .msp-hero          { grid-template-columns: 1fr; }
  .msp-hero-right    { display: none; }
  .msp-features-grid { grid-template-columns: 1fr; }
  .msp-arch-grid     { grid-template-columns: 1fr; }
  .msp-context-grid  { grid-template-columns: 1fr; }
  .msp-learn-grid    { grid-template-columns: 1fr; }
  .msp-code-grid     { grid-template-columns: 1fr; }
  .msp-code-grid-4   { grid-template-columns: 1fr !important; }
  .msp-body          { padding: 16px !important; }
  .msp-title         { font-size: 34px; }
  .msp-stats-row     { flex-wrap: wrap; gap: 6px; }
  .msp-stat          { flex: 1 0 calc(50% - 5px); }
  .msp-stack-row     { flex-wrap: wrap; gap: 6px; }

  /* Messagerie popup */
  .msg-features-grid  { grid-template-columns: 1fr; }
  .msg-arch-grid      { grid-template-columns: 1fr; }
  .msg-code-grid      { grid-template-columns: 1fr; }
  .msg-popup-footer   { flex-direction: column; align-items: flex-start; }
  .msg-learning-grid  { grid-template-columns: 1fr; }

  /* Proj tabs */
  .proj-tabs         { flex-wrap: wrap; }
  .stage-company-banner { flex-wrap: wrap; }

  /* Skills tile compact */
  .skills-layout-large   { display: none; }
  .skills-layout-compact { display: block; }

  /* Skills popup icon grid */
  .skills-popup-icon-grid { grid-template-columns: repeat(4, 1fr); }

  /* GH Contribution graph */
  .gh-contribution-graph { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gh-graph-grid-wrap    { min-width: 380px; }

  /* Chips smaller */
  .skill-chip-name { font-size: 10px; }
  .skill-chip      { padding: 5px 10px 5px 7px; }
  .skill-chip-img  { width: 15px; height: 15px; }

  /* Footer tile */
  .tile-footer { min-height: 70px; }
  .footer-tile-sub { font-size: 8px; letter-spacing: 1px; }
  .tile-footer::before { font-size: 48px; }

  /* AP screenshots */
  .ap-screenshots-grid { grid-template-columns: 1fr; }
  .ap-context-banner   { flex-direction: column; gap: 10px; }

  /* MCD overlay */
  .mcd-box { max-height: 95vh; }
  .mcd-topbar { flex-direction: column; gap: 8px; align-items: flex-start; }
  .mcd-topbar-right { flex-wrap: wrap; gap: 4px; }

  /* desktop extras cachés */
  .tile-desktop-extra { display: none; }
}

/* ════════════════════════════════════════════════════════════
   TRÈS PETIT MOBILE (≤ 480px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .topbar { padding: 0 10px; height: 50px; }
  .logo   { font-size: 13px; letter-spacing: 1px; }
  .logo-badge { font-size: 8px; }

  .grid-container { padding: 6px 8px; gap: 6px; }

  .about-name           { font-size: 28px; }
  .proj-count           { font-size: 44px; }
  .cv-big               { font-size: 26px; }
  .xp-count             { font-size: 32px; }
  .graphisme-tile-title { font-size: 24px; }
  .tile-title           { font-size: 20px; }

  .popup-title  { font-size: 24px; }
  .popup-body   { padding: 12px; }

  .stat-box-num { font-size: 24px; }

  .graphisme-gallery { columns: 1; }

  .skill-chip      { padding: 4px 8px 4px 6px; gap: 4px; }
  .skill-chip-img  { width: 13px; height: 13px; }
  .skill-chip-name { font-size: 9px; }

  .xp-item     { padding: 6px 8px; }
  .xp-item-role { font-size: 11px; }

  .contact-links { flex-direction: column; align-items: flex-start; }

  .popup        { max-height: 95vh; }
  .popup-topbar { padding: 8px 12px; }

  .msp-title { font-size: 28px; }
  .msp-stat  { flex: 1 0 calc(50% - 4px); }

  .bts-blocs-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   TRÈS TRÈS PETIT (≤ 380px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .logo         { font-size: 11px; letter-spacing: 0.5px; }
  .logo-badge   { display: none; }
  .hamburger    { width: 32px; height: 32px; }
  .hamburger span { width: 15px; }

  .grid-container { padding: 5px 6px; gap: 5px; }

  .about-name   { font-size: 24px; }
  .proj-count   { font-size: 38px; }
  .popup-title  { font-size: 20px; }
  .tile         { padding: 12px; }
  .popup-body   { padding: 10px; }
  .stat-box-num { font-size: 20px; }
  .graphisme-tile-title { font-size: 20px; }
  .tile-title   { font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════
   CORRECTIONS GLOBALES OVERFLOW / BORDURES
   ════════════════════════════════════════════════════════════ */

/* Assure qu'aucun enfant direct ne déborde */
.tile > * { max-width: 100%; }

/* Assure que les popups ne débordent jamais latéralement */
.overlay { overflow: hidden auto; }

/* Scrollbar inside popup propre */
.popup { scrollbar-gutter: stable; }

/* Pas de scroll horizontal global */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* ════════════════════════════════════════════════════════════
   GH POPUP repos grid adaptatif
   ════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .gh-popup-repos-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .gh-popup-repos-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   SKILLS POPUP icon grid adaptatif
   ════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 960px) {
  .skills-popup-icon-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   PROJ TABS
   ════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .proj-tabs         { flex-wrap: wrap; }
  .ap-screenshots-grid { grid-template-columns: 1fr; }
  .ap-context-banner { flex-direction: column; gap: 10px; }
  .ap-main-card      { grid-column: span 1; }
  .stage-company-banner { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════
   BTS BLOCS GRID ≤ 800px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .bts-blocs-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   GSB Screenshots
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .gsb-screenshots-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .gsb-screenshots-grid {
    grid-template-columns: 1fr;
  }
  .gsb-mockup {
    width: 100%;
    max-width: 300px;
  }
}

/* GIF replacements for AnimalVest feature cards */
.avp-feat-visual--gif {
  padding: 0;
  background: transparent;
  border: none;
  min-height: unset;
  align-items: center;
  justify-content: center;
}
.avp-feat-gif {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  object-fit: contain;
}

/* ════════════════════════════════════════════════════════════
   CORRECTIFS RESPONSIVES SUPPLÉMENTAIRES
   Fixes ciblés pour tous les éléments manquants
   ════════════════════════════════════════════════════════════ */

/* ── Global: tous les éléments texte ne débordent pas ── */
.popup-body * { max-width: 100%; }
.popup-body img { height: auto; }

/* ── Correction : les images de carousel ne doivent pas être écrasées ── */
.gif-carousel-slide,
.gif-carousel-bg {
  height: 100% !important;
  max-width: none;
  width: 100% !important;
}

/* ── Code blocks dans popups: scroll horizontal ── */
.msp-code-block,
.msg-code-block,
[class*="code-block"],
[class*="syntax"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  word-break: normal;
  white-space: pre-wrap;
}


/* ── Popup breadcrumb: ne déborde pas ── */
.popup-breadcrumb {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.popup-breadcrumb span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popup-topbar {
  gap: 12px;
  overflow: hidden;
}
/* ── gh-popup-profile: wrap sur petit mobile ── */
@media (max-width: 480px) {
  .gh-popup-profile {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
  }
  .gh-popup-stats-row {
    gap: 8px;
  }
  .gh-popup-stat {
    padding: 6px 12px;
    min-width: 54px;
  }
  .gh-popup-stat-num { font-size: 20px; }
}

/* ── about-extra-grid: 1 col sur mobile ── */
@media (max-width: 640px) {
  .about-extra-grid {
    grid-template-columns: 1fr;
  }
  .lang-popup-grid {
    grid-template-columns: 1fr;
  }
  .avp-product-grid-mini {
    grid-template-columns: 1fr 1fr;  /* garde 2 col car items petits */
  }
  /* graphisme tile: preview grid 2 col sur mobile */
  .graphisme-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* skills lang flags: 1 col sur très petit */
  .skills-lang-flags-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* popup topbar breadcrumb adaptatif */
  .popup-section-label { display: none; }
  .popup-breadcrumb { font-size: 16px; letter-spacing: 0.5px; max-width: calc(100% - 44px); }
}

@media (max-width: 380px) {
  .about-extra-grid { grid-template-columns: 1fr; }
  .lang-popup-grid  { grid-template-columns: 1fr; }
  .skills-lang-flags-grid { grid-template-columns: 1fr; }
  .graphisme-preview-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── skills-section-slider: min-height adaptatif ── */
@media (max-width: 640px) {
  .skills-section-slider { min-height: 140px; }
}

/* ── GH contribution graph: encore plus petit sur 380px ── */
@media (max-width: 380px) {
  .gh-graph-grid-wrap { min-width: 300px; }
  .gh-graph-cell { height: 10px; }
  .gh-graph-grid { gap: 1.5px; }
  .gh-graph-week { gap: 1.5px; }
}

/* ── Popup overlay: padding tablet ── */
@media (max-width: 960px) and (min-width: 641px) {
  .overlay { padding: 20px; }
  .popup-body { padding: 20px 24px; }
  .popup-topbar { padding: 10px 20px; }
}

/* ── MCD overlay: full width sur mobile ── */
@media (max-width: 640px) {
  .mcd-overlay { padding: 0; align-items: flex-end; }
  .mcd-box {
    width: 100%;
    height: 92vh;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
  }
  .mcd-topbar { padding: 10px 14px; gap: 6px; flex-wrap: wrap; }
  .mcd-topbar-right { flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
  .mcd-zoom-btn { padding: 5px 10px; font-size: 11px; }
  .mcd-footer { padding: 8px 12px; gap: 8px; font-size: 0.65rem; }
  .mcd-footer span:last-child { display: none; }
}

/* ── Tile padding serré sur mobile ── */
@media (max-width: 640px) {
  .tile { padding: 14px; }
  .tile-arrow { top: 12px; right: 12px; width: 22px; height: 22px; font-size: 10px; }
  .tile-dots { bottom: 10px; right: 10px; }
  .tile-dot { width: 10px; height: 10px; }
}

/* ── XP timeline: items plus lisibles sur mobile ── */
@media (max-width: 640px) {
  .xp-item {
    padding: 8px 10px 10px;
  }
  .xp-item-role { font-size: 12px; }
  .xp-top { margin-bottom: 8px; }
}

/* ── Contact popup grid: 1 col sur tablet portrait ── */
@media (max-width: 760px) {
  .contact-popup-grid { grid-template-columns: 1fr; }
}

/* ── Proj cards: 2 col sur petit tablet ── */
@media (max-width: 760px) and (min-width: 481px) {
  .proj-cards { grid-template-columns: 1fr 1fr; }
}

/* ── Stats row: full width sur mobile ── */
@media (max-width: 480px) {
  .stat-box { flex: 1 0 100%; }
  .stats-row { flex-direction: column; gap: 6px; }
}

/* ── Footer tile: plus propre sur mobile ── */
@media (max-width: 640px) {
  .tile-footer::before { font-size: 40px; opacity: 0.1; }
  .footer-tile-inner { padding: 8px; }
  .footer-tile-copy { font-size: 13px; }
  .footer-tile-badge { font-size: 10px; }
}

/* ── Popups particuliers: settings en bottom sheet aussi ── */
@media (max-width: 640px) {
  #popup-settings.overlay { align-items: flex-end; padding: 0; }
  #popup-settings .popup {
    width: 100%;
    max-width: 100%;
    border-radius: 14px 14px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}

/* ── Proj-tabs overflow sur mobile ── */
@media (max-width: 640px) {
  .proj-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .proj-tabs::-webkit-scrollbar { display: none; }
  .proj-tab { white-space: nowrap; flex-shrink: 0; }
}

/* ── About-popup-grid: padding réduit sur mobile ── */
@media (max-width: 640px) {
  .about-popup-grid { gap: 14px; }
  .xp-popup-item { padding: 12px 14px; }
  .xp-popup-role { font-size: 20px; }
  .xp-popup-desc { font-size: 13px; line-height: 1.7; }
}

/* ── Graphisme gallery: padding popup ── */
@media (max-width: 640px) {
  #popup-graphisme .popup-body { padding: 12px; }
  .graphisme-card { border-radius: 4px; }
}

/* ── Tile about name: word-break pour très longs noms ── */
.about-name { word-break: break-word; }
.tile-title  { word-break: break-word; }

/* ── Tous les tags/chips: wrap propre ── */
.about-tags, .graphisme-meta, .proj-card-tags, .proj-tech-pills {
  flex-wrap: wrap;
}

/* ── Safe area pour iOS (notch/home indicator) ── */
@supports (padding: max(0px)) {
  .topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .mobile-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .popup {
    padding-bottom: env(safe-area-inset-bottom);
  }
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── Scrollbar propre dans les popups ── */
.popup::-webkit-scrollbar { width: 3px; }
.popup::-webkit-scrollbar-track { background: transparent; }
.popup::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.popup::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Touch targets: min 44px sur mobile ── */
@media (max-width: 640px) {
  .popup-close,
  .mobile-nav-close,
  .hamburger,
  .tile-dot,
  .proj-tab,
  .topbar-nav a,
  .cv-btn,
  .cv-btn-preview {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .popup-close { width: 36px; height: 36px; font-size: 15px; }
  .tile-dot {
    min-height: unset;
    width: 12px; height: 12px;
  }
}

/* ── Proj-item-preview: text-overflow sur mobile ── */
@media (max-width: 640px) {
  .proj-item-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
  }
}

/* ── Skills-popup-lang-grid: min col réduit sur mobile ── */
@media (max-width: 480px) {
  .skills-popup-lang-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
  .skills-popup-icon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Tile-header: nowrap, overflow masqué proprement ── */
.tile-header {
  flex-wrap: nowrap;
  overflow: hidden;
}

/* ── Animations: réduite sur reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── SWIPE HANDLE: indicateur glisser sur mobile ── */
@media (max-width: 640px) {
  .popup {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .popup::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
  /* Ajuster le topbar pour laisser place au handle */
  .popup-topbar {
    border-radius: 10px 10px 0 0;
  }
}

/* ── Scrollbar améliorée globale ── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ── Focus visible amélioré (accessibilité) ── */
:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ── Tablet: overlay padding réduit côté ── */
@media (max-width: 960px) and (min-width: 641px) {
  .overlay { padding: 24px 16px; }
  .popup { max-height: 90vh; }
}

/* ── Image responsive dans les popups ── */
.popup img:not(.gh-popup-avatar img):not(.msp-chip-icon) {
  max-width: 100%;
  height: auto;
}

/* ── Proj card: description lisible sur mobile ── */
@media (max-width: 640px) {
  .proj-card-preview { height: 80px; }
  .proj-card-body { padding: 10px; }
  .proj-card-name { font-size: 15px; }
  .proj-card-desc { font-size: 10px; }
}

/* ── Contact popup: item padding réduit sur mobile ── */
@media (max-width: 480px) {
  .contact-popup-item { padding: 10px; gap: 8px; }
  .contact-icon { width: 28px; height: 28px; font-size: 13px; }
  .contact-popup-value { font-size: 12px; }
  .contact-popup-label { font-size: 10px; }
}

/* ── CV popup: iframe bien contenu ── */
@media (max-width: 640px) {
  .cv-iframe-inner {
    margin: 0 -16px;
  }
  .cv-iframe-inner iframe {
    width: 100%;
    height: 380px;
  }
}

/* ── BTS blocs: padding réduit sur mobile ── */
@media (max-width: 480px) {
  .bts-bloc { padding: 10px 12px; }
  .bts-bloc-badge { font-size: 14px; }
  .bts-bloc-title { font-size: 12px; }
}

/* ── GH popup repos: padding compact sur mobile ── */
@media (max-width: 480px) {
  .github-popup-repo-card { padding: 10px 12px; }
  .github-popup-repo-name { font-size: 16px; }
  .github-popup-repo-desc { font-size: 11px; }
}

/* ── MSP/MSG popup hero: adaptatif tablet portrait ── */
@media (max-width: 760px) and (min-width: 641px) {
  .msp-hero { grid-template-columns: 1fr; }
  .msp-hero-right { display: none; }
  .msp-features-grid { grid-template-columns: 1fr 1fr; }
  .msp-code-grid { grid-template-columns: 1fr 1fr; }
  .msp-learn-grid { grid-template-columns: 1fr 1fr; }
  .msg-popup-hero { grid-template-columns: 1fr; }
  .msg-popup-hero-right { display: none; }
  .msg-features-grid { grid-template-columns: 1fr 1fr; }
  .msg-code-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Graphisme tile preview: collage scale fixé ── */
@media (max-width: 640px) {
  .tile-graphisme:hover .graphisme-preview-item { transform: none; }
}

/* ── Tile about: overflow hidden pour slider ── */
.tile-about .skills-section-slider,
.tile-projects .skills-section-slider,
.tile-skills .skills-section-slider {
  overflow: hidden;
}
/* ════════════════════════════════════════════════════════════
   AMÉLIORATIONS RESPONSIVES — PATCH COMPLET
   ════════════════════════════════════════════════════════════ */

/* ── 1. ZONE CRITIQUE 641–960px : Hamburger toujours visible ──
   Sur tablet portrait, la topbar-nav est scrollable mais on cache
   l'hamburger → on le réaffiche pour un meilleur confort. ── */
@media (max-width: 960px) {
  .hamburger { display: flex !important; }
  /* Topbar nav cachée, remplacée par hamburger */
  .topbar-nav { display: none !important; }
  .topbar-inner { justify-content: space-between; }
}

/* ── 2. TABLET PORTRAIT (641–960px) : Grille 2-col retravaillée ── */
@media (min-width: 641px) and (max-width: 960px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
    padding: 10px 12px;
    gap: 8px;
  }

  /* Tile about : pleine largeur pour lisibilité */
  .tile-about    { grid-column: span 2; grid-row: auto; min-height: 180px; }
  /* Projects + Skills côte à côte */
  .tile-projects { grid-column: span 1; grid-row: auto; min-height: 200px; }
  .tile-skills   { grid-column: span 1; grid-row: auto; min-height: 200px; }
  /* XP + CV côte à côte */
  .tile-xp       { grid-column: span 1; grid-row: auto; min-height: 160px; }
  .tile-cv       { grid-column: span 1; grid-row: auto; min-height: 160px; }
  /* Contact pleine largeur */
  .tile-contact  { grid-column: span 2; grid-row: auto; min-height: 120px; }
  /* Graphisme + footer */
  .tile-graphisme { grid-column: span 2; grid-row: auto; min-height: 180px; }
  .tile-footer   { grid-column: span 2; grid-row: auto; min-height: 70px; }

  /* Typographie intermédiaire */
  .about-name           { font-size: 38px; }
  .proj-count           { font-size: 54px; }
  .xp-count             { font-size: 40px; }
  .cv-big               { font-size: 32px; }
  .graphisme-tile-title { font-size: 30px; }

  /* XP timeline : flex wrap + min-width pour éviter écrasement */
  .xp-timeline {
    flex-wrap: wrap;
    gap: 6px;
  }
  .xp-item {
    flex: 1 1 calc(33% - 6px);
    min-width: 100px;
  }

  /* Contact : chips en wrap propre */
  .contact-links { flex-wrap: wrap; gap: 5px; }

  /* Desktop extras cachés */
  .tile-desktop-extra { display: none !important; }

  /* Popup body padding intermédiaire */
  .popup-body   { padding: 20px 24px; }
  .popup-title  { font-size: 34px; }

  /* Popups 2-col restent */
  .proj-cards          { grid-template-columns: 1fr 1fr; }
  .contact-popup-grid  { grid-template-columns: 1fr 1fr; }
  .bts-blocs-grid      { grid-template-columns: 1fr 1fr; }
}

/* ── 3. TOPBAR : logo ne déborde plus sur très petits écrans ── */
@media (max-width: 400px) {
  .logo { font-size: 12px; letter-spacing: 0.5px; max-width: calc(100vw - 80px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── 4. ABOUT TILE : tags ne débordent pas ── */
.about-tags {
  overflow: hidden;
  max-height: 80px;
}
@media (max-width: 640px) {
  .about-tags { max-height: none; overflow: visible; }
}

/* ── 5. XP TIMELINE : min-width sur chaque item pour éviter collapse ── */
@media (min-width: 641px) and (max-width: 960px) {
  .xp-item { min-width: 0; }
  .xp-item-role { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── 6. CONTACT TILE : boutons bien empilés sur mobile ── */
@media (max-width: 480px) {
  .contact-links { flex-direction: row; flex-wrap: wrap; }
  .contact-chip { flex: 1 1 calc(50% - 4px); text-align: center; justify-content: center; display: flex; align-items: center; box-sizing: border-box; }
}

/* ── 7. CV TILE : boutons côte à côte sur mobile portrait ── */
@media (max-width: 640px) {
  .tile-cv .cv-btn,
  .tile-cv .cv-btn-preview {
    display: inline-flex;
    width: auto;
    margin-right: 6px;
  }
}

/* ── 8. PROJ LIST : text-overflow propre ── */
@media (max-width: 960px) {
  .proj-item-preview span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    display: inline-block;
  }
}

/* ── 9. POPUP MOBILE : hauteur max sécurisée ── */
@media (max-width: 640px) {
  .overlay { padding: 0; }
  .popup {
    max-height: calc(100dvh - 0px);
    max-height: 92svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 10. SKILLS SECTION SLIDER : hauteur auto sur mobile ── */
@media (max-width: 960px) {
  .skills-section-slider { min-height: unset; }
  .tile-about .skills-section-slider,
  .tile-projects .skills-section-slider,
  .tile-skills .skills-section-slider {
    height: auto;
  }
}

/* ── 11. TILE-GRAPHISME : titre lisible sur toutes tailles ── */
@media (min-width: 641px) and (max-width: 960px) {
  .graphisme-tile-title {
    font-size: 28px;
    line-height: 1.1;
  }
  .graphisme-bg-collage {
    opacity: 0.5; /* Moins distrayant en mode compact */
  }
}

/* ── 12. TILE ABOUT : name responsive fluide ── */
@media (min-width: 641px) and (max-width: 800px) {
  .about-name { font-size: 34px; }
}

/* ── 13. STAT BOX : wrap propre tablet ── */
@media (min-width: 641px) and (max-width: 960px) {
  .stats-row { flex-wrap: wrap; }
  .stat-box  { flex: 1 1 calc(50% - 5px); min-width: 80px; }
}

/* ── 14. GH TILE : scroll horizontal si contenu trop large ── */
@media (max-width: 960px) {
  .gh-contribution-graph {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 15. MOBILE SMALL : about-bio cachée pour gain de place ── */
@media (max-width: 380px) {
  .about-bio { display: none; }
  .about-tags { margin-top: 8px; }
}

/* ── 16. TABLET: tile-footer apparence correcte ── */
@media (min-width: 641px) and (max-width: 960px) {
  .tile-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }
}

/* ── 17. PROJ CARD : hauteur preview adaptée ── */
@media (min-width: 641px) and (max-width: 960px) {
  .proj-cards { grid-template-columns: 1fr 1fr 1fr; }
  .proj-card-preview { height: 80px; }
}
@media (max-width: 640px) {
  .proj-cards { grid-template-columns: 1fr; }
}

/* ── 18. TOUCH TARGETS : min 44px de hauteur pour accessibilité ── */
@media (max-width: 960px) {
  .topbar-nav a,
  .mobile-nav a,
  .cv-btn,
  .cv-btn-preview,
  .contact-chip,
  .popup-close,
  .hamburger {
    min-height: 44px;
  }
  .contact-chip { min-height: 36px; display: inline-flex; align-items: center; }
  .cv-btn, .cv-btn-preview { min-height: 40px; }
}

/* ── 19. TILE DOT INDICATORS : visibles sur mobile ── */
@media (max-width: 640px) {
  .tile-dots {
    display: flex !important;
    bottom: 8px;
    right: 8px;
    gap: 4px;
  }
}

/* ── 20. SAFE AREA INSETS (iPhone notch / home bar) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 640px) {
    .popup {
      padding-bottom: env(safe-area-inset-bottom);
    }
    .mobile-nav {
      padding-bottom: env(safe-area-inset-bottom);
    }
    .topbar {
      padding-top: env(safe-area-inset-top);
    }
  }
}
/* ════════════════════════════════════════════════════════════
   GSB POPUP — Styles complets Mission 1 & 2
   ════════════════════════════════════════════════════════════ */

/* ── Topbar GSB ── */
.gsb-topbar {
  background: linear-gradient(135deg, #0a1628, #1a3a5c) !important;
  border-bottom: 1px solid rgba(30, 120, 200, 0.2);
}
.gsb-title-accent { color: #7dc8ff; }

/* ── Badges ── */
.gsb-badge-ap {
  background: rgba(30, 90, 180, 0.2);
  color: #7dc8ff;
  border: 1px solid rgba(30, 90, 180, 0.4);
}
.gsb-badge-gsb {
  background: rgba(30, 90, 180, 0.1);
  color: #93c5fd;
  border: 1px solid rgba(30, 90, 180, 0.2);
}
.gsb-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* ── Tech chips ── */
.gsb-chip-csharp {
  background: rgba(150, 100, 220, 0.12) !important;
  border-color: rgba(150, 100, 220, 0.3) !important;
  color: #c4b5fd !important;
}
.gsb-chip-dotnet {
  background: rgba(80, 100, 200, 0.12) !important;
  border-color: rgba(80, 100, 200, 0.3) !important;
  color: #a5b4fc !important;
}
.gsb-chip-mysql {
  background: rgba(0, 117, 143, 0.12) !important;
  border-color: rgba(0, 117, 143, 0.3) !important;
  color: #67e8f9 !important;
}

/* ── Mockup GSB ── */
.gsb-mockup {
  background: linear-gradient(160deg, #0a1628, #0e2040);
  border: 1px solid rgba(30, 120, 200, 0.25);
  border-radius: 14px;
  overflow: hidden;
  width: 280px;
  box-shadow: 0 0 40px rgba(30, 120, 200, 0.1);
  position: relative;
}
.gsb-mockup-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7dc8ff;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(30, 120, 200, 0.15);
  text-transform: uppercase;
}
.gsb-mockup-screen {
  padding: 10px 12px;
  min-height: 120px;
}
.gsb-mockup-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.gsb-mockup-filter {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  cursor: default;
}
.gsb-mockup-filter.blue   { background: rgba(59,130,246,0.25); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.gsb-mockup-filter.yellow { background: rgba(234,179,8,0.2); color: #fcd34d; border: 1px solid rgba(234,179,8,0.3); }
.gsb-mockup-filter.green  { background: rgba(34,197,94,0.2); color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
.gsb-mockup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 6px;
  margin-bottom: 5px;
  border: 1px solid transparent;
}
.gsb-mockup-row.pending  { background: rgba(234,179,8,0.08); border-color: rgba(234,179,8,0.2); }
.gsb-mockup-row.accepted { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.2); }
.gsb-mockup-row.refused  { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); }
.gsb-mockup-row-name {
  font-size: 10px;
  color: #e2e8f0;
  font-family: 'DM Sans', sans-serif;
}
.gsb-mockup-row-status {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.gsb-mockup-row.pending  .gsb-mockup-row-status { color: #fcd34d; }
.gsb-mockup-row.accepted .gsb-mockup-row-status { color: #86efac; }
.gsb-mockup-row.refused  .gsb-mockup-row-status { color: #fca5a5; }
.gsb-mockup-actions {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(30, 120, 200, 0.12);
  background: rgba(30, 120, 200, 0.04);
}
.gsb-mockup-btn {
  flex: 1;
  text-align: center;
  padding: 6px;
  border-radius: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  cursor: default;
  letter-spacing: 0.04em;
}
.gsb-mockup-btn.accept { background: rgba(34,197,94,0.2); color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
.gsb-mockup-btn.refuse { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); }
.gsb-mockup-glow {
  position: absolute;
  bottom: -20px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 80px;
  background: radial-gradient(ellipse at 50% 100%, rgba(30,120,200,0.25) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Stats row ── */
.gsb-stat-row {
  background: linear-gradient(135deg, rgba(30,120,200,0.08), rgba(30,120,200,0.03));
  border: 1px solid rgba(30,120,200,0.15);
}
.gsb-stat-row .msp-stat-num { color: #7dc8ff; }

/* ── Context cards ── */
.gsb-context-card {
  border-left: 3px solid rgba(30,120,200,0.5) !important;
}

/* ── Feature cards ── */
.gsb-feat-card {
  border-top: 2px solid rgba(30,120,200,0.4) !important;
}

/* ── Learn cards ── */
.gsb-learn-card {
  border-left: 3px solid rgba(30,120,200,0.4) !important;
}

/* ── Screenshots grid ── */
.gsb-screenshots-section { }
.gsb-screenshots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gsb-screenshot-item {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(16,185,129,0.15);
  background: rgba(8,18,32,0.8);
  aspect-ratio: 16/10;
  position: relative;
  cursor: zoom-in;
  transition: transform 0.22s cubic-bezier(.22,1,.36,1), border-color 0.22s, box-shadow 0.22s;
  box-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.gsb-screenshot-item:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(16,185,129,0.45);
  box-shadow: 0 8px 32px rgba(16,185,129,0.13), 0 2px 12px rgba(0,0,0,0.4);
}
.gsb-screenshot-item:hover .gsb-screenshot-overlay {
  opacity: 1;
}
.gsb-screenshot-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,185,129,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.gsb-screenshot-overlay-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(16,185,129,0.18);
  border: 1.5px solid rgba(16,185,129,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  backdrop-filter: blur(6px);
  color: #6ee7b7;
}
.gsb-screenshot-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.22s;
}
.gsb-screenshot-item:hover img {
  filter: brightness(1.06);
}
.gsb-screenshot-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 36px 12px 11px;
  background: linear-gradient(0deg, rgba(2,5,15,1) 0%, rgba(2,5,15,0.85) 40%, transparent 100%);
  font-size: 11px;
  color: #f1f5f9;
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  z-index: 3;
}
.gsb-screenshot-item.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-style: dashed;
  border-color: rgba(16,185,129,0.18);
  background: rgba(8,18,32,0.5);
  cursor: default;
}
.gsb-placeholder-icon {
  font-size: 1.8rem;
  opacity: 0.4;
}
.gsb-placeholder-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #374151;
  text-align: center;
  padding: 0 10px;
}
.gsb-placeholder-hint {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: #1f2937;
  text-align: center;
  padding: 0 10px;
}

/* ── Cover-top screenshots : image cadrée sur le haut ── */
.gsb-screenshot-item--contain img {
  object-fit: cover;
  object-position: top center;
  width: 100% !important;
  height: 100% !important;
}

/* ── Portrait screenshots : fond flou + image centrée ── */
.gsb-screenshot-item--portrait {
  position: relative;
  overflow: hidden;
}
.gsb-screenshot-item--portrait .gsb-blur-bg {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(0.45) saturate(1.3);
  transform: scale(1.15);
  z-index: 0;
  transition: filter 0.3s;
}
.gsb-screenshot-item--portrait:hover .gsb-blur-bg {
  filter: blur(22px) brightness(0.55) saturate(1.4);
}
.gsb-screenshot-item--portrait img {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: transform 0.25s cubic-bezier(.22,1,.36,1), filter 0.22s;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.5));
}
.gsb-screenshot-item--portrait:hover img {
  transform: scale(1.03);
  filter: drop-shadow(0 6px 30px rgba(0,0,0,0.6)) brightness(1.05);
}
.gsb-screenshot-item--portrait .gsb-screenshot-overlay,
.gsb-screenshot-item--portrait .gsb-screenshot-caption {
  z-index: 2;
}

/* ── GSB Screenshot Lightbox ── */
#gsb-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(2,5,15,0.96);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: gsbLbFadeIn 0.18s ease;
}
#gsb-lightbox.active { display: flex; }
@keyframes gsbLbFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
#gsb-lightbox-inner {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  animation: gsbLbScaleIn 0.22s cubic-bezier(.22,1,.36,1);
}
@keyframes gsbLbScaleIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
#gsb-lightbox-img {
  display: block;
  max-width: 92vw;
  max-height: 84vh;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(16,185,129,0.2);
  object-fit: contain;
}
#gsb-lightbox-caption {
  text-align: center;
  margin-top: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #4b5563;
  letter-spacing: 0.06em;
}
#gsb-lightbox-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.35);
  color: #6ee7b7;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  z-index: 2;
}
#gsb-lightbox-close:hover { background: rgba(16,185,129,0.28); }
#gsb-lightbox-nav-prev, #gsb-lightbox-nav-next {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  color: #6ee7b7;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
}
#gsb-lightbox-nav-prev { left: 16px; }
#gsb-lightbox-nav-next { right: 16px; }
#gsb-lightbox-nav-prev:hover { background: rgba(16,185,129,0.25); transform: translateY(-50%) scale(1.08); }
#gsb-lightbox-nav-next:hover { background: rgba(16,185,129,0.25); transform: translateY(-50%) scale(1.08); }
#gsb-lightbox-counter {
  position: fixed;
  bottom: 18px; left: 50%; transform: translateX(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: #374151;
  letter-spacing: 0.1em;
}

/* ── Phone GIF fix ── */
.msp-phone-frame { position: relative !important; overflow: hidden !important; }
/* ── GSB Draggable Tables ── */
.gsb-drag-table {
  position: absolute;
  min-width: 300px;
  border-radius: 11px;
  border: 1.8px solid var(--tclr, #3b82f6);
  background: #090e1c;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
  cursor: grab;
  user-select: none;
  transition: box-shadow .15s, transform .1s;
  z-index: 1;
}
.gsb-drag-table:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 14px 1px var(--tclr,#3b82f6);
  z-index: 10;
}
.gsb-drag-table.dragging {
  cursor: grabbing !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.75), 0 0 22px 3px var(--tclr,#3b82f6);
  transform: scale(1.025);
  z-index: 100;
  transition: none;
}
.gdt-header {
  background: var(--thbg, #0a1830);
  border-radius: 9px 9px 0 0;
  padding: 8px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ttclr, #93c5fd);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.gdt-grip { color: #3a4060; font-size: 14px; letter-spacing: -1px; }
.gdt-body { padding: 8px 0 10px; display: flex; flex-direction: column; }
.gdt-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  padding: 3px 14px;
  gap: 4px;
}
.gdt-row:hover { background: rgba(255,255,255,.03); }
.gdt-pk  { color: #f59e0b; font-size: 11px; font-weight: 700; font-family: 'DM Mono',monospace; }
.gdt-fk  { color: #60a5fa; font-size: 11px; font-weight: 600; font-family: 'DM Mono',monospace; }
.gdt-enum{ color: #fbbf24; font-size: 12px; }
.gdt-lbl { font-size: 11px; }
.gdt-col { color: #e8eaf0; font-size: 12px; font-family: 'DM Mono',monospace; }
.gdt-fkcol { color: #94a3b8 !important; }
.gdt-type{ color: #4a5568; font-size: 10.5px; white-space: nowrap; text-align:right; }
.gdt-note .gdt-col { color: #4a5568 !important; font-size: 10px !important; font-family: 'DM Sans',sans-serif !important; }
#dt-legende { cursor: default !important; min-width: 200px; }
#dt-legende .gdt-header { cursor: default !important; font-size:11px; letter-spacing:.1em; }

/* ════════════════════════════════════════════════════════════
   PATCH RESPONSIVE COMPLET — MOBILE FIXES FINAUX
   Projets scolaires · Screenshots · Overflow · Tile-header
   ════════════════════════════════════════════════════════════ */

/* ── 1. ANTI-SCROLL HORIZONTAL GLOBAL (hors popups) ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* Le popup lui-même peut scroller horizontalement si besoin */
.popup {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

/* popup-body : layout fluide sans couper le contenu */
.popup-body {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Les enfants directs restent dans la boîte */
.popup-body > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── 2. TILE-HEADER — Redesign propre et moderne ── */
/* Amélioration de l'apparence générale : badge pill + séparateur subtil */
.tile-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  padding: 0 0 8px 0;
  border-bottom: 1px solid rgba(30, 45, 66, 0.7);
  min-height: 20px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 36px);
  flex-shrink: 1;
}

/* Le point indicateur : plus visible */
.tile-header-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(218, 41, 28, 0.45);
}

/* Texte du header : empêche l'overflow */
.tile-header span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* ── 3. AP SCREENSHOTS — Taille augmentée + anti-overflow ── */

/* Desktop : taille des aperçus augmentée */
.ap-screenshots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.ap-screenshot-placeholder {
  aspect-ratio: 16/9;
  min-height: 140px; /* était implicitement très petit */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.2s, background 0.2s;
}
.ap-screenshot-placeholder:hover {
  border-color: var(--accent-light);
  background: rgba(0,65,112,0.06);
}
.ap-screenshot-icon { font-size: 28px; opacity: 0.45; }
.ap-screenshot-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}

/* Tablet : 2 colonnes */
@media (max-width: 960px) {
  .ap-screenshots-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ap-screenshot-placeholder {
    min-height: 120px;
  }
  .ap-main-card { grid-column: span 2; }
}

/* Mobile : 1 colonne, images plus grandes */
@media (max-width: 640px) {
  .ap-screenshots-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ap-screenshot-placeholder {
    aspect-ratio: 16/9;
    min-height: 160px; /* bien visible sur mobile */
  }
  .ap-main-card { grid-column: span 1; }
  .ap-context-banner {
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
    overflow: hidden;
  }
  .ap-context-badges {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ── 4. GSB SCREENSHOTS — Taille + anti-overflow ── */

.gsb-screenshots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.gsb-screenshot-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  aspect-ratio: 16/10;
  min-height: 130px; /* taille augmentée */
}

/* Tablet : 2 colonnes */
@media (max-width: 960px) {
  .gsb-screenshots-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .gsb-screenshot-item {
    min-height: 110px;
  }
}

/* Mobile : 1 colonne, bien visible */
@media (max-width: 640px) {
  .gsb-screenshots-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .gsb-screenshot-item {
    aspect-ratio: 16/9;
    min-height: 180px; /* bien visible sur mobile */
    border-radius: 8px;
  }
  .gsb-mockup {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ── 5. POPUPS PROJETS SCOLAIRES — Anti-overflow global ── */

/* Tous les conteneurs de projets scolaires */
.proj-popup,
.proj-popup-body,
.proj-tab-content,
[id^="popup-"] .popup-body {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* Grilles dans les popups : ne débordent jamais */
.proj-cards,
.bts-blocs-grid,
.ap-screenshots-grid,
.gsb-screenshots-grid,
.msp-features-grid,
.msg-features-grid,
.ap-context-banner {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Tables et SVG dans les popups : ne déclenchent pas de scroll horizontal */
.mcd-scroll,
.gsb-drag-canvas,
[class*="-table"] svg {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 6. CORRECTIF FINAL : tous les enfants de popup-body ── */
@media (max-width: 640px) {
  .popup-body > * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Blocs de texte et paragraphes : jamais de débordement */
  .popup-body p,
  .popup-body li,
  .popup-body h1,
  .popup-body h2,
  .popup-body h3,
  .popup-body h4 {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }

  /* Blocs de code : scroll horizontal interne autorisé */
  .popup-body pre,
  .popup-body code,
  .msp-code-block,
  .msg-code-block,
  [class*="code-block"] {
    overflow-x: auto !important;
    max-width: 100% !important;
    word-break: normal !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Le MCD est scrollable en interne */
  .mcd-scroll,
  .mcd-canvas {
    overflow-x: auto !important;
  }
}

/* ── 7. PROJETS SCOLAIRES — Popup content padding propre ── */
@media (max-width: 640px) {
  /* GSB popup */
  #popup-gsb .popup-body,
  #popup-ap .popup-body,
  #popup-bts .popup-body {
    padding: 14px !important;
    overflow-x: hidden;
  }

  /* Sections screenshots scrollable en largeur si SVG présent */
  .gsb-screenshots-section,
  .ap-screenshots-section {
    overflow-x: hidden;
    width: 100%;
  }

  /* BTS blocs : 1 colonne forcée */
  .bts-blocs-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* Proj-tabs : scroll horizontal interne, pas de débordement */
  .proj-tabs-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Cartes projet : 1 colonne sur très petits écrans */
  .proj-cards {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* Chaque carte projet : pas de dépassement */
  .proj-card {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* Titres et descriptions de cartes : wrapping correct */
  .proj-card-name {
    font-size: 16px;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
  }
  .proj-card-desc {
    font-size: 11px;
    line-height: 1.5;
    word-break: break-word;
  }

  /* Tags de cartes : wrapping forcé */
  .proj-card-tags {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Code inline dans les cartes projet : ne déborde pas */
  .proj-card code,
  .proj-popup code,
  .proj-popup-body code {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    word-break: break-all;
    white-space: pre-wrap;
  }
}
/* ── About popup : social links ── */
.about-social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.about-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--tile-bg, #181b2a);
  border: 1px solid var(--border, #23263a);
  color: var(--text-muted, #aaa);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .18s, color .18s, background .18s;
  letter-spacing: .03em;
}
.about-social-btn:hover {
  border-color: var(--accent, #e8132c);
  color: var(--text, #fff);
  background: rgba(232,19,44,.07);
}
.about-social-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── About popup : timeline ── */
.about-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 6px;
  padding-left: 4px;
}
.about-tl-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  padding-bottom: 18px;
}
.about-tl-item:last-child {
  padding-bottom: 0;
}
.about-tl-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--border, #23263a);
}
.about-tl-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  border: 2px solid var(--border, #23263a);
  background: var(--bg, #0d0f1a);
}
.about-tl-dot--done {
  border-color: var(--accent, #e8132c);
  background: var(--accent, #e8132c);
}
.about-tl-dot--next {
  border-color: var(--text-muted, #555);
  background: transparent;
}
.about-tl-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #fff);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.about-tl-sub {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin-top: 3px;
}
.about-tl-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: .05em;
}
.about-tl-badge--blue  { background: rgba(59,130,246,.15); color:#60a5fa; }
.about-tl-badge--green { background: rgba(34,197,94,.15);  color:#4ade80; }
.about-tl-badge--red   { background: rgba(232,19,44,.15);  color:#e8132c; }
/* ══════════════════════════════════════════════════════════
   🎛️  MODE ORA — éléments masqués
   ══════════════════════════════════════════════════════════ */
body.mode-oral .tile-graphisme {
  display: none !important;
}

body.mode-oral .pacman-canvas {
  display: none !important;
}

/* Badge cliquable — feedback visuel */
.logo-badge {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s, transform 0.15s;
}
.logo-badge:hover {
  opacity: 0.75;
  transform: scale(1.08);
}
.logo-badge:active {
  transform: scale(0.95);
}

body.mode-oral .logo-badge {
  background: #e05a00;
}

/* ── ORA : footer prend la place de graphisme ── */

/* Desktop large ≥961px : graphisme=9, footer=3 → footer=12 */
@media (min-width: 961px) {
  body.mode-oral .tile-footer {
    grid-column: span 12 !important;
  }
}

/* ≤1200px : graphisme=8, footer=4 → footer=12 */
@media (max-width: 1200px) {
  body.mode-oral .tile-footer {
    grid-column: span 12 !important;
  }
}

/* Tablet ≤960px : graphisme row4 span4, footer row4 span2 → footer span6 (pleine largeur de la row) */
@media (max-width: 960px) {
  body.mode-oral .tile-footer {
    grid-column: span 6 !important;
  }
}

/* 1920x959 */
/* ════════════════════════════════════════════════════════════
   GRAND ÉCRAN + HAUTEUR SERRÉE (≥1600px & ≤980px de haut)
   ex : 1920×959
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) and (max-height: 980px) {

  /* Grid : padding et gap réduits */
  .grid-container { padding: 6px 16px; gap: 5px; }

  /* ── Tuile About ── */
  .about-name  { font-size: 46px; line-height: 1; }
  .about-role  { font-size: 11px; margin-top: 4px; }
  .about-bio   { font-size: 12px; margin-top: 8px; line-height: 1.55; }
  .about-tags  { margin-top: 8px; gap: 4px; }
  .tag         { font-size: 10px; padding: 2px 7px; }

  .about-fm            { margin-top: 6px; }
  .about-fm-divider    { margin: 4px 0 5px; }
  .about-fm-card       { max-height: 145px; overflow: hidden; }
  .about-fm-info-row   { padding: 2px 8px; }
  .about-fm-info-label { font-size: 8px; }
  .about-fm-info-val   { font-size: 9px; }
  .about-fm-attr-row   { padding: 2px 8px; }
  .about-fm-section-title { font-size: 7px; padding: 2px 8px; }
  .about-fm-idle       { padding: 4px; gap: 1px; height: auto; }
  .about-fm-idle-label { font-size: 12px; }
  .about-fm-idle-sub   { font-size: 7px; line-height: 1.4; }

  .tile-about  { padding-bottom: 34px; overflow: hidden; }
  .tile-dots   { bottom: 10px; right: 12px; }
  .tile-dot    { width: 11px; height: 11px; }

  .tile-about .skills-section-slider    { min-height: unset; overflow: hidden; }
  .tile-projects .skills-section-slider { min-height: unset; overflow: hidden; }
  .tile-skills .skills-section-slider   { min-height: unset; overflow: hidden; }

  /* ── Tuile Projets ── */
  .proj-count { font-size: 64px; }

  /* ── Tuile Skills ── */
  .skill-chip           { padding: 4px 9px 4px 7px; gap: 5px; }
  .skill-chip-img       { width: 14px; height: 14px; }
  .skill-chip-icon-text { font-size: 12px; width: 14px; }
  .skill-chip-name      { font-size: 10px; }
  .skills-chip-grid     { gap: 4px; }
  .skills-softskills    { margin-top: 8px; }
  .skills-certifications { margin-bottom: 4px; }
  .skills-softskills-label { margin-bottom: 5px; }
  .skills-softskills-chips { gap: 4px; }
  .skill-soft-chip      { padding: 4px 9px; font-size: 10px; }

  /* ════════════════════════════════
     Tuile CV — layout flex colonne,
     tout l'espace est utilisé
     ════════════════════════════════ */
  .tile-cv {
    display: flex;
    flex-direction: column;
  }
  /* Le titre "MON CV" prend plus de place */
  .cv-big {
    font-size: 52px;
    line-height: 1;
    margin-top: 6px;
    flex-shrink: 0;
  }
  /* Boutons côte à côte, plus grands */
  .tile-cv .cv-btn,
  .tile-cv .cv-btn-preview {
    display: inline-flex;
    margin-top: 0;
    font-size: 13px;
    padding: 9px 20px;
  }
  /* Wrapper boutons en flex row */
  .tile-cv .tile-desktop-extra {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
  }
  .cv-extra-info {
    gap: 10px;
    margin-top: 0;
  }
  .cv-extra-row {
    font-size: 12px;
    gap: 10px;
  }
  .cv-extra-icon { font-size: 15px; }
  /* Divider avec plus d'espace */
  .tile-cv .about-extra-divider {
    margin: 12px 0;
  }
  /* Les 2 boutons dans un flex-row avec gap */
  .cv-btn + .cv-btn-preview,
  .cv-btn-preview {
    margin-top: 8px;
  }

  /* ════════════════════════════════
     Tuile Contact — layout flex,
     items extra agrandis
     ════════════════════════════════ */
  .tile-contact {
    display: flex;
    flex-direction: column;
  }
  .tile-contact .tile-title {
    font-size: 28px;
    line-height: 1.1;
    margin-top: 4px;
  }
  .contact-links {
    margin-top: 10px;
    gap: 6px;
  }
  .contact-chip {
    font-size: 11px;
    padding: 6px 13px;
  }
  .tile-contact .tile-desktop-extra {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
  }
  .tile-contact .about-extra-divider {
    margin: 12px 0 10px;
  }
  .contact-extra-grid { gap: 6px; }
  .contact-extra-item {
    padding: 11px 14px;
  }
  .contact-extra-label { font-size: 8.5px; letter-spacing: 1.5px; }
  .contact-extra-val   { font-size: 13px; margin-top: 2px; }
  .contact-extra-icon  { font-size: 16px; width: 24px; }

  /* ── Tuile XP ── */
  .xp-top        { margin-top: 0; margin-bottom: 5px; }
  .xp-count      { font-size: 36px; }
  .xp-item       { padding: 5px 8px 7px; gap: 2px; }
  .xp-item-role  { font-size: 11px; }
  .xp-item-co    { font-size: 8.5px; }
  .xp-item-badge { font-size: 6.5px; padding: 1px 4px; }

  /* ── Tuile Graphisme ── */
  .graphisme-tile-title { font-size: 42px; }

  /* ── Popups ── */
  .popup       { max-height: 82vh; }
  .popup-title { font-size: 46px; }
}

/* ══════════════════════════════════════════════════════════
   PROJ PANEL PERSO — Cards plus grandes (bannières visibles)
   ══════════════════════════════════════════════════════════ */

/* Grille : garder 3 colonnes mais avec plus d'espace */
#proj-panel-perso .proj-cards {
  gap: 14px;
}

/* Bannière image : plus haute pour voir les logos */
#proj-panel-perso .proj-card-preview {
  height: 160px;
}

/* Nom du projet : plus grand */
#proj-panel-perso .proj-card-name {
  font-size: 22px;
}

/* Description : plus lisible */
#proj-panel-perso .proj-card-desc {
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.65;
}

/* Body : plus de respiration */
#proj-panel-perso .proj-card-body {
  padding: 16px;
}

/* Tags : légèrement plus grands */
#proj-panel-perso .proj-card-tag {
  font-size: 10px;
  padding: 2px 8px;
}

/* Links : un peu plus de padding */
#proj-panel-perso .proj-link {
  font-size: 11px;
  padding: 5px 12px;
}/* ════════════════════════════════════════════════════════════════════════
   PATCH RESPONSIVE — 1920×959
   Cible : écrans larges (≥ 1600px) avec hauteur serrée (≤ 980px)
   Ajouter ce fichier APRÈS style.css dans le <head>
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1600px) and (max-height: 980px) {

  /* ══════════════════════════════════════════════
     GRID GLOBAL
     Padding/gap réduit pour respirer dans 959px
     ══════════════════════════════════════════════ */
  .grid-container {
    padding: 5px 14px;
    gap: 5px;
    grid-template-rows: 1fr 1fr 1fr; /* trois rangées égales */
  }

  /* ══════════════════════════════════════════════
     TUILE À PROPOS
     Agrandie pour exploiter l'espace disponible
     ══════════════════════════════════════════════ */
  .tile-about {
    padding: 18px 20px 36px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Slider prend l'espace restant */
  .tile-about .skills-section-slider {
    flex: 1;
    min-height: unset;
    overflow: hidden;
  }

  /* Section active occupe toute la hauteur du slider */
  .tile-about .skills-section.active {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Nom bien grand */
  .about-name  { font-size: 52px; line-height: 1; }
  .about-role  { font-size: 11px; margin-top: 5px; letter-spacing: 2.5px; }
  .about-bio   { font-size: 12px; margin-top: 10px; line-height: 1.65; max-width: 100%; }
  .about-tags  { margin-top: 12px; gap: 5px; }
  .tag         { font-size: 10px; padding: 3px 8px; }

  /* FM card — agrandie, occupe le reste de la hauteur */
  .about-fm {
    margin-top: auto;
    padding-top: 10px;
    flex-shrink: 0;
  }
  .about-fm-divider    { margin: 8px 0 10px; }
  .about-fm-card       { max-height: none; overflow: hidden; }
  .about-fm-info-row   { padding: 5px 10px; }
  .about-fm-attr-row   { padding: 5px 10px; }
  .about-fm-section-title { font-size: 8px; padding: 4px 10px; letter-spacing: 2px; }
  .about-fm-info-label { font-size: 9px; }
  .about-fm-info-val   { font-size: 10.5px; }
  .about-fm-idle       { padding: 12px 10px; gap: 4px; height: auto; }
  .about-fm-idle-label { font-size: 16px; letter-spacing: 3px; }
  .about-fm-idle-sub   { font-size: 8px; line-height: 1.6; }
  .about-fm-idle-zzz   { height: 30px; }
  .z1 { font-size: 13px; }
  .z2 { font-size: 18px; }
  .z3 { font-size: 24px; }

  /* ══════════════════════════════════════════════
     TUILE PROJETS
     Fix : proj-count + categories + liste
     ══════════════════════════════════════════════ */
  .tile-projects { padding: 14px 16px 32px; overflow: hidden; }

  /* Chiffre compteur légèrement réduit */
  .proj-count { font-size: 56px; line-height: 1; margin-top: 2px; }

  /* Badges catégories : taille réduite, wrap propre */
  .proj-categories {
    margin: 4px 0 6px;
    gap: 4px;
    flex-wrap: wrap;
  }
  .proj-cat-badge {
    font-size: 8px;
    padding: 2px 6px;
    gap: 4px;
  }
  .proj-cat-num { font-size: 8px; }

  /* Liste de projets : items plus serrés */
  .proj-list-preview { margin-top: 6px; }
  .proj-item-preview {
    font-size: 10px;
    padding: 3px 0;
  }
  .proj-item-preview span { font-size: 11px; }

  /* Desktop extra projets : tech pills + featured card compressés */
  .proj-tech-pills { gap: 4px; margin-bottom: 8px; }
  .proj-tech-pill  { font-size: 8px; padding: 2px 7px; }

  .proj-featured-label { font-size: 7px; margin-bottom: 5px; }
  .proj-featured-card  { padding: 8px 10px; gap: 10px; }
  .proj-featured-icon  { font-size: 18px; }
  .proj-featured-name  { font-size: 13px; }
  .proj-featured-desc  { font-size: 9px; }

  /* Platform blocks */
  .proj-platform-num  { font-size: 17px; }
  .proj-platform-lbl  { font-size: 6.5px; }
  .proj-platforms-row { gap: 4px; margin-bottom: 1px; }
  .proj-platform-block { padding: 6px 3px; }

  /* Tech chart bars */
  .proj-tech-bar-row  { gap: 6px; }
  .proj-tech-bar-name { font-size: 8px; width: 80px; }
  .proj-tech-bar-count { font-size: 8px; }

  /* Extra stats */
  .proj-extra-num { font-size: 18px; }
  .proj-extra-lbl { font-size: 7px; }
  .proj-extra-stat { padding: 6px 4px; }

  /* ══════════════════════════════════════════════
     TUILE COMPÉTENCES
     Agrandie pour exploiter l'espace disponible
     ══════════════════════════════════════════════ */
  .tile-skills {
    padding: 18px 20px 36px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Le slider prend toute la hauteur restante */
  .tile-skills .skills-section-slider {
    flex: 1;
    min-height: unset;
    overflow: hidden;
  }
  .tile-skills .skills-section.active {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Chips tech agrandis */
  .skill-chip           { padding: 7px 13px 7px 9px; gap: 7px; border-radius: 5px; }
  .skill-chip-img       { width: 18px; height: 18px; }
  .skill-chip-icon-text { font-size: 14px; width: 18px; }
  .skill-chip-name      { font-size: 12px; letter-spacing: 0.3px; }
  .skills-chip-grid     { gap: 6px; }

  /* Blocs catégories */
  .skills-cat-block { margin-bottom: 14px; }
  .skills-cat-label { font-size: 8.5px; margin-bottom: 8px; letter-spacing: 2px; }

  /* Certifications */
  .skills-certifications  { margin-bottom: 10px; }
  .skills-certifications .skills-softskills-label { font-size: 8.5px; margin-bottom: 7px; }

  /* Soft Skills */
  .skills-softskills       { margin-top: auto; padding-top: 10px; flex-shrink: 0; }
  .skills-softskills-label { margin-bottom: 7px; font-size: 8.5px; letter-spacing: 2px; }
  .skills-softskills-chips { gap: 6px; }
  .skill-soft-chip         { padding: 6px 13px; font-size: 11px; border-radius: 5px; }

  /* ══════════════════════════════════════════════
     TUILE XP
     ══════════════════════════════════════════════ */
  .tile-xp { padding: 14px 16px; overflow: hidden; }

  .xp-top        { margin-top: 0; margin-bottom: 5px; }
  .xp-count      { font-size: 34px; }
  .xp-count-label { font-size: 9px; }
  .xp-item       { padding: 5px 8px 6px; gap: 2px; }
  .xp-item-role  { font-size: 11px; }
  .xp-item-co    { font-size: 8px; }
  .xp-item-badge { font-size: 6px; padding: 1px 4px; }

  /* Desktop extra XP */
  .xp-extra-domains { gap: 4px; }
  .xp-domain-chip   { font-size: 8px; padding: 3px 8px; }
  .about-extra-divider { margin: 6px 0; }

  /* ══════════════════════════════════════════════
     TUILE CV
     Fix : tout doit tenir dans la demi-rangée
     ══════════════════════════════════════════════ */
  .tile-cv {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Titre "MON CV" */
  .cv-big {
    font-size: 38px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
  }

  /* Boutons : pleine largeur, compacts */
  .cv-btn,
  .cv-btn-preview {
    display: flex;
    width: 100%;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 12px;
    margin-top: 5px;
    box-sizing: border-box;
  }

  /* Extra info CV — on masque la ligne "FR · EN disponible" */
  .tile-cv .tile-desktop-extra {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
    overflow: hidden;
  }
  .tile-cv .about-extra-divider { margin: 6px 0; }
  .cv-extra-info   { gap: 4px; margin-top: 0; }
  .cv-extra-row    { font-size: 10px; gap: 7px; }
  .cv-extra-icon   { font-size: 12px; width: 16px; }

  /* Masquer la ligne "FR · EN disponible" (3ème cv-extra-row) */
  .cv-extra-info .cv-extra-row:nth-child(3) { display: none; }

  /* ══════════════════════════════════════════════
     TUILE CONTACT
     Fix : titre + chips + github card
     ══════════════════════════════════════════════ */
  .tile-contact {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Titre "TRAVAILLONS ENSEMBLE" — utilise font-size dynamique */
  .tile-contact .tile-title {
    font-size: clamp(16px, 2.2vw, 24px);
    line-height: 1.05;
    margin-top: 3px;
    word-break: break-word;
  }

  /* Chips contact : ligne unique compacte */
  .contact-links {
    margin-top: 7px;
    gap: 4px;
    flex-wrap: wrap;
  }
  .contact-chip {
    font-size: 9.5px;
    padding: 4px 8px;
    white-space: nowrap;
  }

  /* Extra contact */
  .tile-contact .tile-desktop-extra {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
    overflow: hidden;
  }
  .tile-contact .about-extra-divider { margin: 7px 0 6px; }
  .contact-extra-grid   { gap: 4px; }
  .contact-extra-item   { padding: 7px 10px; }
  .contact-extra-label  { font-size: 7.5px; letter-spacing: 1px; }
  .contact-extra-val    { font-size: 11px; margin-top: 1px; }
  .contact-extra-icon   { font-size: 13px; width: 20px; }

  /* ══════════════════════════════════════════════
     TUILE GRAPHISME
     ══════════════════════════════════════════════ */
  .graphisme-tile-title { font-size: 40px; }
  .graphisme-tile-content { padding: 14px 18px; }

  /* ══════════════════════════════════════════════
     TUILE FOOTER
     ══════════════════════════════════════════════ */
  .footer-tile-copy  { font-size: 13px; }
  .footer-tile-sub   { font-size: 8px; }
  .footer-tile-badge { font-size: 9px; }

  /* ══════════════════════════════════════════════
     DOTS DE NAVIGATION (communs)
     ══════════════════════════════════════════════ */
  .tile-dots { bottom: 9px; right: 10px; gap: 5px; }
  .tile-dot  { width: 10px; height: 10px; }

  /* ══════════════════════════════════════════════
     SKILLS SECTION SLIDER
     ══════════════════════════════════════════════ */
  .tile-about  .skills-section-slider,
  .tile-projects .skills-section-slider,
  .tile-skills .skills-section-slider {
    min-height: unset;
    overflow: hidden;
  }

  /* ══════════════════════════════════════════════
     POPUPS — légèrement adaptés à la hauteur réduite
     ══════════════════════════════════════════════ */
  .popup       { max-height: 88vh; }
  .popup-title { font-size: 42px; }
}

/* ════════════════════════════════════════════════════════════════════════
   MODE ORAL — 1920×959
   Lisibilité maximale pour présentation à distance
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1600px) and (max-height: 980px) {

  /* ─────────────────────────────────────────────
     TOPBAR : logo + nav plus grand
  ───────────────────────────────────────────── */
  body.mode-oral .logo {
    font-size: 24px;
    letter-spacing: 4px;
  }
  body.mode-oral .logo-badge {
    font-size: 12px;
    padding: 3px 10px;
  }
  body.mode-oral .topbar-nav a {
    font-size: 15px;
    letter-spacing: 2px;
    padding: 6px 16px;
  }

  /* ─────────────────────────────────────────────
     TUILE À PROPOS — encore plus grand en oral
  ───────────────────────────────────────────── */
  body.mode-oral .about-name   { font-size: 64px; }
  body.mode-oral .about-role   { font-size: 13px; letter-spacing: 3px; margin-top: 8px; }
  body.mode-oral .about-bio    { font-size: 14px; margin-top: 14px; line-height: 1.7; }
  body.mode-oral .about-tags   { margin-top: 16px; gap: 7px; }
  body.mode-oral .tag          { font-size: 12px; padding: 4px 12px; }

  /* FM Card oral : tout lisible de loin */
  body.mode-oral .about-fm-section-title { font-size: 10px; padding: 6px 12px; letter-spacing: 2.5px; }
  body.mode-oral .about-fm-info-label    { font-size: 11px; }
  body.mode-oral .about-fm-info-val      { font-size: 13px; }
  body.mode-oral .about-fm-info-row      { padding: 7px 12px; }
  body.mode-oral .about-fm-idle-label    { font-size: 22px; letter-spacing: 4px; }
  body.mode-oral .about-fm-idle-sub      { font-size: 10px; line-height: 1.7; }
  body.mode-oral .about-fm-idle          { padding: 16px 12px; gap: 6px; }
  body.mode-oral .z1 { font-size: 16px; }
  body.mode-oral .z2 { font-size: 22px; }
  body.mode-oral .z3 { font-size: 30px; }
  body.mode-oral .about-fm-idle-zzz { height: 38px; }

  /* ─────────────────────────────────────────────
     TUILE PROJETS — chiffres imposants
  ───────────────────────────────────────────── */
  body.mode-oral .proj-count        { font-size: 80px; line-height: 1; }
  body.mode-oral .tile-sub          { font-size: 14px; margin-top: 4px; }
  body.mode-oral .proj-cat-badge    { font-size: 11px; padding: 4px 10px; gap: 6px; border-radius: 20px; }
  body.mode-oral .proj-cat-num      { font-size: 11px; }
  body.mode-oral .proj-categories   { gap: 6px; margin: 8px 0 12px; }
  body.mode-oral .proj-item-preview { font-size: 13px; padding: 6px 0; }
  body.mode-oral .proj-item-preview span { font-size: 14px; }
  body.mode-oral .proj-tech-dot     { width: 5px; height: 5px; }

  /* Masquer les extras projets non essentiels en oral */
  body.mode-oral .tile-projects .tile-desktop-extra { display: none !important; }

  /* ─────────────────────────────────────────────
     TUILE COMPÉTENCES — chips bien lisibles
  ───────────────────────────────────────────── */
  body.mode-oral .skill-chip        { padding: 9px 16px 9px 12px; gap: 9px; border-radius: 6px; }
  body.mode-oral .skill-chip-img    { width: 22px; height: 22px; }
  body.mode-oral .skill-chip-icon-text { font-size: 17px; width: 22px; }
  body.mode-oral .skill-chip-name   { font-size: 13px; }
  body.mode-oral .skills-chip-grid  { gap: 7px; }
  body.mode-oral .skills-cat-label  { font-size: 10px; margin-bottom: 10px; letter-spacing: 2.5px; }
  body.mode-oral .skills-cat-block  { margin-bottom: 16px; }

  /* Certifications */
  body.mode-oral .skills-certifications { margin-bottom: 12px; }
  body.mode-oral .skills-certifications .skills-softskills-label { font-size: 10px; }

  /* Soft Skills */
  body.mode-oral .skills-softskills-label { font-size: 10px; margin-bottom: 10px; }
  body.mode-oral .skills-softskills-chips { gap: 7px; }
  body.mode-oral .skill-soft-chip         { padding: 8px 16px; font-size: 13px; border-radius: 6px; }

  /* ─────────────────────────────────────────────
     TUILE XP — lisible d'un coup d'œil
  ───────────────────────────────────────────── */
  body.mode-oral .xp-count       { font-size: 50px; }
  body.mode-oral .xp-count-label { font-size: 12px; letter-spacing: 1.5px; }
  body.mode-oral .xp-item        { padding: 8px 12px 10px; gap: 4px; }
  body.mode-oral .xp-item-role   { font-size: 14px; font-weight: 700; }
  body.mode-oral .xp-item-co     { font-size: 11px; line-height: 1.5; }
  body.mode-oral .xp-item-badge  { font-size: 8px; padding: 2px 6px; letter-spacing: 1.5px; }

  /* Domains chips XP */
  body.mode-oral .xp-domain-chip { font-size: 11px; padding: 5px 12px; }
  body.mode-oral .xp-extra-domains { gap: 6px; }

  /* ─────────────────────────────────────────────
     TUILE CV — boutons CTA maximum
  ───────────────────────────────────────────── */
  body.mode-oral .cv-big {
    font-size: 52px;
    line-height: 1;
  }
  body.mode-oral .cv-btn,
  body.mode-oral .cv-btn-preview {
    font-size: 15px;
    letter-spacing: 2px;
    padding: 12px 20px;
    margin-top: 10px;
  }
  /* Masquer les infos format/date en oral */
  body.mode-oral .tile-cv .cv-extra-info { display: none; }
  body.mode-oral .tile-cv .about-extra-divider { display: none; }

  /* ─────────────────────────────────────────────
     TUILE CONTACT — tout en gros
  ───────────────────────────────────────────── */
  body.mode-oral .tile-contact .tile-title {
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.05;
    margin-top: 6px;
  }
  body.mode-oral .contact-links  { gap: 7px; margin-top: 12px; }
  body.mode-oral .contact-chip   { font-size: 13px; padding: 8px 16px; }

  /* Extra contact items plus grands */
  body.mode-oral .contact-extra-item  { padding: 11px 14px; }
  body.mode-oral .contact-extra-label { font-size: 9px; letter-spacing: 1.5px; }
  body.mode-oral .contact-extra-val   { font-size: 15px; margin-top: 3px; }
  body.mode-oral .contact-extra-icon  { font-size: 16px; width: 24px; }
  body.mode-oral .contact-extra-grid  { gap: 6px; }
  body.mode-oral .tile-contact .about-extra-divider { margin: 10px 0 8px; }

  /* ─────────────────────────────────────────────
     FOOTER ORAL — plein écran, grand texte
  ───────────────────────────────────────────── */
  body.mode-oral .tile-footer::before { font-size: 100px; }
  body.mode-oral .footer-tile-copy    { font-size: 20px; letter-spacing: 3px; }
  body.mode-oral .footer-tile-sub     { font-size: 12px; letter-spacing: 2px; margin-top: 5px; }
  body.mode-oral .footer-tile-badge   { font-size: 13px; padding: 2px 12px; }

  /* ─────────────────────────────────────────────
     TILE HEADERS — labels en haut plus lisibles
  ───────────────────────────────────────────── */
  body.mode-oral .tile-header { font-size: 10px; letter-spacing: 3px; margin-bottom: 12px; }
  body.mode-oral .tile-header-dot { width: 6px; height: 6px; }

  /* ─────────────────────────────────────────────
     DOTS navigation plus gros
  ───────────────────────────────────────────── */
  body.mode-oral .tile-dot  { width: 13px; height: 13px; }
  body.mode-oral .tile-dots { gap: 7px; bottom: 11px; }
}/* ════════════════════════════════════════════════════════════════════════
   MODE ORAL — PATCH 1920×959  (v3)
   Règle d'or : aucun contenu ne déborde sur les dots, rien de coupé.
   Si ça ne rentre pas → on cache proprement avec overflow:hidden.
   À charger APRÈS style.css ET responsive-patch-1920x959.css
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1600px) and (max-height: 980px) {

  /* ══════════════════════════════════════════════════════
     TOPBAR
  ══════════════════════════════════════════════════════ */
  body.mode-oral .logo              { font-size: 26px; letter-spacing: 4px; }
  body.mode-oral .logo-badge        { font-size: 13px; padding: 3px 11px; }
  body.mode-oral .topbar-nav a      { font-size: 16px; letter-spacing: 2.5px; padding: 7px 18px; }

  /* ══════════════════════════════════════════════════════
     TILE HEADER (coin sup.)
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-header     { font-size: 11px; letter-spacing: 3px; margin-bottom: 10px; }
  body.mode-oral .tile-header-dot { width: 7px; height: 7px; }

  /* ══════════════════════════════════════════════════════
     DOTS — zone protégée en bas de chaque tuile paginée
     padding-bottom réservé = hauteur dot + marges
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-about,
  body.mode-oral .tile-projects,
  body.mode-oral .tile-skills {
    padding-bottom: 38px !important;
  }
  body.mode-oral .tile-dot  { width: 13px; height: 13px; }
  body.mode-oral .tile-dots { gap: 7px; bottom: 11px; right: 12px; }

  /* ══════════════════════════════════════════════════════
     TUILE À PROPOS
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-about {
    padding-top: 14px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Slider occupe l'espace disponible sans déborder */
  body.mode-oral .tile-about .skills-section-slider {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  body.mode-oral .tile-about .skills-section.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  /* Identité */
  body.mode-oral .about-name { font-size: 62px; line-height: 1; }
  body.mode-oral .about-role { font-size: 13px; letter-spacing: 3px; margin-top: 7px; }
  body.mode-oral .about-bio  { font-size: 14px; margin-top: 10px; line-height: 1.7; }
  body.mode-oral .about-tags { margin-top: 10px; gap: 7px; }
  body.mode-oral .tag        { font-size: 12px; padding: 4px 12px; }

  /* FM — pousse en bas, hauteur max calculée pour ne pas toucher les dots */
  body.mode-oral .about-fm {
    margin-top: auto;
    flex-shrink: 0;
    padding-top: 8px;
    overflow: hidden;
  }
  body.mode-oral .about-fm-divider { margin: 6px 0 8px; }
  body.mode-oral .about-fm-card    { max-height: 155px; overflow: hidden; }

  /* En-têtes FM */
  body.mode-oral .about-fm-section-title { font-size: 10px; padding: 5px 12px; letter-spacing: 2.5px; }

  /* Lignes profil */
  body.mode-oral .about-fm-info-row   { padding: 6px 12px; }
  body.mode-oral .about-fm-attr-row   { padding: 6px 12px; }
  body.mode-oral .about-fm-info-label { font-size: 11px; }
  body.mode-oral .about-fm-info-val   { font-size: 13px; }

  /* Bloc INACTIF */
  body.mode-oral .about-fm-idle       { padding: 12px 12px; gap: 5px; height: auto; }
  body.mode-oral .about-fm-idle-label { font-size: 20px; letter-spacing: 4px; }
  body.mode-oral .about-fm-idle-sub   { font-size: 10px; line-height: 1.65; }
  body.mode-oral .about-fm-idle-zzz   { height: 34px; }
  body.mode-oral .z1 { font-size: 14px; }
  body.mode-oral .z2 { font-size: 20px; }
  body.mode-oral .z3 { font-size: 27px; }

  /* ══════════════════════════════════════════════════════
     TUILE PROJETS — mode oral enrichi
     Layout : flex column, 3 zones bien délimitées
       1. Header chiffre + sous-titre + badges
       2. Liste projets (flex: 1, overflow:hidden)
       3. Extras : barres technos + mini-stats (affichés)
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-projects {
    padding-top: 14px;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* ── Compteur + sous-titre ── */
  body.mode-oral .proj-count { font-size: 90px; line-height: 1; margin-top: 2px; flex-shrink: 0; }
  body.mode-oral .tile-sub   { font-size: 16px; margin-top: 4px; letter-spacing: 0.5px; flex-shrink: 0; }

  /* ── Badges catégories ── */
  body.mode-oral .proj-categories { gap: 8px; margin: 10px 0 12px; flex-wrap: wrap; flex-shrink: 0; }
  body.mode-oral .proj-cat-badge  { font-size: 13px; padding: 5px 13px; gap: 7px; border-radius: 22px; }
  body.mode-oral .proj-cat-num    { font-size: 13px; font-weight: 700; }

  /* ── Liste projets ── */
  body.mode-oral .proj-list-preview { margin-top: 0; flex-shrink: 0; overflow: hidden; }
  body.mode-oral .proj-item-preview      { font-size: 15px; padding: 7px 0; gap: 10px; }
  body.mode-oral .proj-item-preview span { font-size: 16px; font-weight: 600; }
  body.mode-oral .proj-tech-dot          { width: 7px; height: 7px; flex-shrink: 0; }

  /* ── Extras : affichés en mode oral, répartissent l'espace restant ── */
  body.mode-oral .tile-projects .tile-desktop-extra {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    justify-content: flex-end; /* colle vers le bas */
  }

  /* Divider */
  body.mode-oral .tile-projects .about-extra-divider { margin: 10px 0 8px; flex-shrink: 0; }

  /* Projets supplémentaires dans l'extra : cachés en oral (trop verbeux) */
  body.mode-oral .tile-projects .proj-extra > .proj-item-preview { display: none; }

  /* Label "TECHNOS UTILISÉES" */
  body.mode-oral .proj-tech-chart-label {
    font-size: 10px;
    letter-spacing: 2.5px;
    color: var(--muted);
    margin-bottom: 10px;
    flex-shrink: 0;
  }

  /* Barres de technos ── grandes et lisibles */
  body.mode-oral .proj-tech-chart     { display: flex; flex-direction: column; gap: 9px; flex-shrink: 0; }
  body.mode-oral .proj-tech-bar-row   { gap: 10px; align-items: center; }
  body.mode-oral .proj-tech-bar-name  { font-size: 13px; width: 110px; flex-shrink: 0; }
  body.mode-oral .proj-tech-bar-track { height: 10px; border-radius: 3px; }
  body.mode-oral .proj-tech-bar-fill  { height: 10px; border-radius: 3px; }
  body.mode-oral .proj-tech-bar-count { font-size: 13px; font-weight: 700; }

  /* ══════════════════════════════════════════════════════
     TUILE COMPÉTENCES — mode oral
     Layout : flex column stricte, overflow:hidden partout.
     Soft Skills + Certifications = teasers compacts en bas.
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-skills {
    padding-top: 14px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }
  body.mode-oral .tile-skills .skills-section-slider {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  body.mode-oral .tile-skills .skills-section.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  /* ── Titre "Stack & Outils" ── */
  body.mode-oral .tile-skills .tile-title { font-size: 22px !important; margin-bottom: 12px !important; flex-shrink: 0; }

  /* ── Chips tech : 3 par ligne, lisibles à l'oral ── */
  body.mode-oral .skill-chip           { padding: 8px 12px 8px 10px; gap: 8px; border-radius: 5px; }
  body.mode-oral .skill-chip-img       { width: 20px; height: 20px; }
  body.mode-oral .skill-chip-icon-text { font-size: 17px; width: 20px; }
  body.mode-oral .skill-chip-name      { font-size: 13px; font-weight: 500; }
  body.mode-oral .skills-chip-grid     { gap: 6px; }

  /* ── Catégories ── */
  body.mode-oral .skills-cat-block { margin-bottom: 10px; flex-shrink: 0; }
  body.mode-oral .skills-cat-label { font-size: 9px; margin-bottom: 6px; letter-spacing: 2.5px; }

  /* ── Certifications : cachées en oral ── */
  body.mode-oral .skills-certifications { display: none !important; }

  /* ── Soft Skills — 1 seule ligne, tous visibles ── */
  body.mode-oral .skills-softskills {
    margin-top: auto;
    flex-shrink: 0;
    padding-top: 8px;
    overflow: hidden;
  }
  body.mode-oral .skills-softskills-label {
    font-size: 9px;
    letter-spacing: 2.5px;
    margin-bottom: 6px;
    color: var(--muted);
  }
  body.mode-oral .skills-softskills-chips {
    gap: 5px;
    flex-wrap: wrap;
    overflow: hidden;
    max-height: 60px;
  }
  body.mode-oral .skill-soft-chip {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ══════════════════════════════════════════════════════
     TUILE XP — maintenue (elle était parfaite)
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-xp             { padding: 14px 18px; overflow: hidden; }
  body.mode-oral .xp-count            { font-size: 50px; }
  body.mode-oral .xp-count-label      { font-size: 12px; letter-spacing: 1.5px; }
  body.mode-oral .xp-item             { padding: 8px 12px 10px; gap: 4px; }
  body.mode-oral .xp-item-role        { font-size: 14px; font-weight: 700; }
  body.mode-oral .xp-item-co          { font-size: 11px; line-height: 1.5; }
  body.mode-oral .xp-item-badge       { font-size: 8px; padding: 2px 6px; letter-spacing: 1.5px; }
  body.mode-oral .xp-domain-chip      { font-size: 11px; padding: 5px 12px; }
  body.mode-oral .xp-extra-domains    { gap: 6px; }
  body.mode-oral .about-extra-divider { margin: 7px 0; }

  /* ══════════════════════════════════════════════════════
     TUILE CV — titre fort, boutons grands, infos en bas
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-cv {
    padding: 14px 20px 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Titre bien grand */
  body.mode-oral .cv-big {
    font-size: 58px;
    line-height: 0.9;
    flex-shrink: 0;
    margin-bottom: 10px;
  }

  /* Boutons : flex:1 = ils grandissent pour remplir l'espace */
  body.mode-oral .cv-btn,
  body.mode-oral .cv-btn-preview {
    display: flex;
    width: 100%;
    font-size: 15px;
    letter-spacing: 2.5px;
    padding: 0;
    margin-top: 0;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex: 1;
    flex-shrink: 0;
  }

  body.mode-oral .cv-btn { margin-bottom: 8px; }

  /* Extra : affiché, pousse en bas */
  body.mode-oral .tile-cv .tile-desktop-extra {
    display: flex !important;
    flex-direction: column;
    flex-shrink: 0;
    margin-top: 8px;
  }

  body.mode-oral .tile-cv .about-extra-divider { display: none !important; }

  /* Infos : 1 seule ligne, la plus utile */
  body.mode-oral .tile-cv .cv-extra-info { display: flex; gap: 14px; margin-top: 0; }
  body.mode-oral .tile-cv .cv-extra-row  { font-size: 11px; gap: 6px; display: flex; align-items: center; color: var(--muted); }
  body.mode-oral .tile-cv .cv-extra-icon { font-size: 13px; }

  /* Masquer la ligne FR·EN, garder seulement PDF + date */
  body.mode-oral .tile-cv .cv-extra-info .cv-extra-row:nth-child(3) { display: none !important; }

  /* ══════════════════════════════════════════════════════
     TUILE CONTACT
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-contact .tile-title    { font-size: clamp(24px, 3vw, 38px); line-height: 1.05; margin-top: 6px; }
  body.mode-oral .contact-links              { gap: 7px; margin-top: 12px; }
  body.mode-oral .contact-chip               { font-size: 13px; padding: 8px 16px; }
  body.mode-oral .contact-extra-item         { padding: 11px 14px; }
  body.mode-oral .contact-extra-label        { font-size: 9px; letter-spacing: 1.5px; }
  body.mode-oral .contact-extra-val          { font-size: 15px; margin-top: 3px; }
  body.mode-oral .contact-extra-icon         { font-size: 16px; width: 24px; }
  body.mode-oral .contact-extra-grid         { gap: 6px; }
  body.mode-oral .tile-contact .about-extra-divider { margin: 10px 0 8px; }

  /* ══════════════════════════════════════════════════════
     FOOTER
  ══════════════════════════════════════════════════════ */
  body.mode-oral .footer-tile-copy  { font-size: 20px; letter-spacing: 3px; }
  body.mode-oral .footer-tile-sub   { font-size: 12px; letter-spacing: 2px; margin-top: 5px; }
  body.mode-oral .footer-tile-badge { font-size: 13px; padding: 2px 12px; }

  /* ══════════════════════════════════════════════════════
     POPUPS
  ══════════════════════════════════════════════════════ */
  body.mode-oral .popup       { max-height: 88vh; }
  body.mode-oral .popup-title { font-size: 44px; }
}/* ════════════════════════════════════════════════════════════════════════
   MODE ORAL — PATCH POPUPS / MODALES
   Agrandit tous les contenus des fenêtres modales pour projection.
   À charger APRÈS style.css, responsive-patch-1920x959.css
   ET oral-patch-1920x959.css
   Usage : body.mode-oral.popup-open  OU  body.mode-oral [popup actif]
   ════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   POPUP — CONTENEUR & CHROME
══════════════════════════════════════════════════════ */
body.mode-oral .popup {
  max-height: 92vh;
  max-width: 1260px;
}

/* Popup Projets principale — override le max-width:1350px inline du HTML */
body.mode-oral .popup[style] {
  max-width: 1750px !important;
  width: 91vw !important;
}

/* Popups détail projets : Animal'And Chat, GSB, Animal'Vest… */
body.mode-oral .msp-popup {
  max-width: 1750px !important;
  width: 91vw !important;
}

/* Topbar de popup (breadcrumb) */
body.mode-oral .popup-topbar           { padding: 14px 32px; }
body.mode-oral .popup-breadcrumb       { font-size: 22px; letter-spacing: 2px; }
body.mode-oral .popup-section-label    { font-size: 12px; letter-spacing: 3px; }
body.mode-oral .popup-close            { width: 34px; height: 34px; font-size: 18px; }

/* Corps général */
body.mode-oral .popup-body             { padding: 40px 48px; }

/* Titre & sous-titre globaux */
body.mode-oral .popup-title            { font-size: 72px !important; letter-spacing: 3px; line-height: 1; margin-bottom: 6px; }
body.mode-oral .popup-subtitle         { font-size: 16px !important; letter-spacing: 1.5px; margin-bottom: 28px; padding-bottom: 18px; }

/* En-têtes de sections internes */
body.mode-oral .popup-section          { margin-bottom: 36px; }
body.mode-oral .popup-section-title    { font-size: 14px; letter-spacing: 3px; margin-bottom: 18px; }


/* ══════════════════════════════════════════════════════
   POPUP À PROPOS
══════════════════════════════════════════════════════ */
body.mode-oral .about-popup-body        { padding: 32px 40px 40px; }
body.mode-oral .about-popup-grid        { gap: 24px; }

/* Hero */
body.mode-oral .about-hero              { gap: 28px; margin-bottom: 30px; padding-bottom: 30px; }
body.mode-oral .about-hero-avatar       { width: 80px; height: 80px; font-size: 28px; }
body.mode-oral .about-hero-right .popup-title   { font-size: 60px !important; margin-bottom: 8px; }
body.mode-oral .about-hero-right .popup-subtitle { font-size: 15px !important; }
body.mode-oral .about-hero-status       { font-size: 13px; gap: 8px; margin-top: 10px; }

/* Stats */
body.mode-oral .about-stats-col         { padding: 20px 28px; margin-bottom: 30px; }
body.mode-oral .about-stat-num          { font-size: 48px; }
body.mode-oral .about-stat-label        { font-size: 12px; letter-spacing: 1.5px; margin-top: 4px; }
body.mode-oral .about-stat-divider      { height: 52px; }

/* Textes de présentation */
body.mode-oral .about-popup-text        { font-size: 21.5px !important; line-height: 1.85; }

/* Passions */
body.mode-oral .about-passion-list      { gap: 9px; }
body.mode-oral .about-passion-item      { padding: 12px 18px; gap: 16px; }
body.mode-oral .about-passion-icon      { font-size: 24px; }
body.mode-oral .about-passion-name      { font-size: 16px; letter-spacing: 1.5px; }
body.mode-oral .about-passion-desc      { font-size: 14px; margin-top: 3px; }


/* ══════════════════════════════════════════════════════
   POPUP PROJETS — onglets + grille de cartes
══════════════════════════════════════════════════════ */

/* Onglets */
body.mode-oral .proj-tabs               { gap: 10px; margin-bottom: 28px; }
body.mode-oral .proj-tab                { font-size: 15px; letter-spacing: 2px; padding: 13px 22px 15px; gap: 9px; }
body.mode-oral .proj-tab-icon           { font-size: 18px; }
body.mode-oral .proj-tab-count          { font-size: 13px; padding: 3px 10px; border-radius: 12px; }

/* Grille cartes — 4 colonnes sur la largeur étendue */
body.mode-oral .proj-cards              { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 18px; }
body.mode-oral .proj-card-preview       { height: 150px; }
body.mode-oral .proj-card-preview-mock  { font-size: 16px; }
body.mode-oral .proj-card-preview-icon  { font-size: 38px; }
body.mode-oral .proj-card-body          { padding: 16px; }
body.mode-oral .proj-card-name          { font-size: 24px; letter-spacing: 1.5px; }
body.mode-oral .proj-card-desc          { font-size: 15px !important; line-height: 1.65; margin-top: 7px; }
body.mode-oral .proj-card-tag           { font-size: 12px; padding: 3px 9px; }
body.mode-oral .proj-card-tags          { gap: 6px; margin-top: 12px; }

/* Bannière company stage */
body.mode-oral .stage-company-banner    { padding: 22px 28px; gap: 22px; margin-bottom: 28px; }
body.mode-oral .stage-company-name      { font-size: 26px !important; letter-spacing: 2px; }
body.mode-oral .stage-company-meta      { font-size: 16px !important; margin-top: 4px; }
body.mode-oral .stage-company-icon      { font-size: 36px; }


/* ══════════════════════════════════════════════════════
   POPUP COMPÉTENCES
══════════════════════════════════════════════════════ */

/* Grille principale */
body.mode-oral .skills-popup-grid       { gap: 32px; }

/* Catégories chips */
body.mode-oral .skills-popup-cats       { gap: 30px; }
body.mode-oral .skills-popup-cat-label  { font-size: 14px; letter-spacing: 3px; margin-bottom: 14px; }

/* Grille icônes — colonnes fixes pour éviter tout débordement */
body.mode-oral .skills-popup-icon-grid  {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  gap: 12px;
}
body.mode-oral .skill-popup-icon-card   { padding: 18px 10px 14px; gap: 12px; border-radius: 8px; }
body.mode-oral .skill-popup-icon-img    { width: 48px; height: 48px; }
body.mode-oral .skill-popup-icon-name   { font-size: 14px; letter-spacing: 0.5px; }

/* BTS blocs — titres et items agrandis */
body.mode-oral .bts-bloc-badge          { font-size: 28px !important; padding: 4px 12px; }
body.mode-oral .bts-bloc-title          { font-size: 20px !important; line-height: 1.3; }
body.mode-oral .bts-bloc-sub            { font-size: 12px !important; letter-spacing: 1.5px; margin-top: 4px; }
body.mode-oral .bts-items               { gap: 10px; margin-top: 12px; }
body.mode-oral .bts-item                { gap: 10px; }
body.mode-oral .bts-item-code           { font-size: 13px !important; padding: 3px 8px; }
body.mode-oral .bts-item-label          { font-size: 17px !important; line-height: 1.5; }

/* Soft skills — scopé au popup uniquement (pas à la tuile) */
body.mode-oral .popup-body .skills-softskills       { margin-top: 24px; }
body.mode-oral .popup-body .skills-softskills-label { font-size: 14px !important; letter-spacing: 3px; margin-bottom: 14px; }
body.mode-oral .popup-body .skills-softskills-chips { gap: 12px; }
body.mode-oral .popup-body .skill-soft-chip         { font-size: 18px !important; padding: 12px 22px !important; border-radius: 6px; }

/* Barres de niveaux */
body.mode-oral .skill-popup-bar         { gap: 6px; margin-bottom: 14px; }
body.mode-oral .skill-popup-bar-header  { font-size: 17px !important; }
body.mode-oral .skill-popup-bar-track   { height: 8px; }
body.mode-oral .skill-popup-bar-fill    { height: 8px; }

/* Chips langages */
body.mode-oral .skills-popup-chip-cats  { gap: 26px; }
body.mode-oral .skills-popup-chip-block { gap: 12px; }
body.mode-oral .skills-popup-chip-label { font-size: 14px; letter-spacing: 3px; margin-bottom: 12px; }
body.mode-oral .skills-popup-chip-grid  { gap: 12px; }
body.mode-oral .skill-popup-chip        { padding: 14px 22px 14px 16px; gap: 14px; border-radius: 8px; font-size: 18px !important; }
body.mode-oral .skill-popup-chip-img    { width: 36px; height: 36px; }
body.mode-oral .skill-popup-chip-name   { font-size: 18px !important; }


/* ══════════════════════════════════════════════════════
   POPUP EXPÉRIENCES
══════════════════════════════════════════════════════ */
body.mode-oral .xp-popup-list           { gap: 16px; }
body.mode-oral .xp-popup-item           { padding: 22px 24px; }
body.mode-oral .xp-popup-role           { font-size: 36px !important; letter-spacing: 2px; }
body.mode-oral .xp-popup-date           { font-size: 14px; padding: 5px 14px; }
body.mode-oral .xp-popup-co             { font-size: 16px; margin-top: 5px; }
body.mode-oral .xp-popup-desc           { font-size: 18px !important; line-height: 1.85; margin-top: 14px; }


/* ══════════════════════════════════════════════════════
   POPUP CONTACT
══════════════════════════════════════════════════════ */
body.mode-oral .contact-popup-grid      { grid-template-columns: 1fr 1fr; gap: 14px; }
body.mode-oral .contact-popup-item      { padding: 22px 24px; gap: 18px; }
body.mode-oral .contact-popup-label     { font-size: 14px; letter-spacing: 2px; }
body.mode-oral .contact-popup-value     { font-size: 22px !important; margin-top: 4px; }
body.mode-oral .contact-popup-icon      { font-size: 28px; }


/* ══════════════════════════════════════════════════════
   POPUP CV
══════════════════════════════════════════════════════ */
body.mode-oral .cv-popup-preview        { padding: 48px 40px; margin-bottom: 24px; }
body.mode-oral .cv-popup-icon           { font-size: 72px; margin-bottom: 16px; }
body.mode-oral .cv-popup-name           { font-size: 58px; letter-spacing: 6px; }
body.mode-oral .cv-popup-desc           { font-size: 17px; letter-spacing: 1px; margin-top: 10px; }
body.mode-oral .cv-popup-btn            { font-size: 20px; letter-spacing: 3px; padding: 16px 40px; margin-top: 22px; }


/* ══════════════════════════════════════════════════════
   POPUP PROJETS SCOLAIRES / GSB / AP / BTS
   (fenêtres de détail de mission)
══════════════════════════════════════════════════════ */

/* Contexte du projet — cartes */
body.mode-oral [id^="popup-"] .popup-body   { padding: 36px 44px; }

/* Stats numériques de mission */
body.mode-oral .gsb-stats-bar,
body.mode-oral .ap-stats-bar,
body.mode-oral .msp-stats-bar            { gap: 0; margin-bottom: 36px; }

body.mode-oral .gsb-stat-item,
body.mode-oral .ap-stat-item,
body.mode-oral .msp-stat-item            { padding: 22px 28px; }

body.mode-oral .gsb-stat-val,
body.mode-oral .ap-stat-val,
body.mode-oral .msp-stat-val             { font-size: 52px; line-height: 1; }

body.mode-oral .gsb-stat-key,
body.mode-oral .ap-stat-key,
body.mode-oral .msp-stat-key             { font-size: 14px; letter-spacing: 2.5px; margin-top: 6px; }

/* Blocs de fonctionnalités */
body.mode-oral .gsb-features-grid,
body.mode-oral .ap-features-grid,
body.mode-oral .msp-features-grid,
body.mode-oral .msg-features-grid        { gap: 16px; }

body.mode-oral .gsb-feature-card,
body.mode-oral .ap-feature-card,
body.mode-oral .msp-feature-card,
body.mode-oral .msg-feature-card         { padding: 26px 28px; }

body.mode-oral .gsb-feature-icon,
body.mode-oral .ap-feature-icon,
body.mode-oral .msp-feature-icon,
body.mode-oral .msg-feature-icon         { font-size: 36px; margin-bottom: 14px; }

body.mode-oral .gsb-feature-title,
body.mode-oral .ap-feature-title,
body.mode-oral .msp-feature-title,
body.mode-oral .msg-feature-title        { font-size: 24px; letter-spacing: 2px; margin-bottom: 10px; }

body.mode-oral .gsb-feature-desc,
body.mode-oral .ap-feature-desc,
body.mode-oral .msp-feature-desc,
body.mode-oral .msg-feature-desc         { font-size: 18px; line-height: 1.8; }

/* Tags techno dans les popups missions */
body.mode-oral .proj-tech-tag,
body.mode-oral .gsb-tech-tag,
body.mode-oral .ap-tech-tag              { font-size: 16px; padding: 7px 18px; }

/* Contexte du projet — grille 3 colonnes */
body.mode-oral .gsb-context-grid,
body.mode-oral .ap-context-grid,
body.mode-oral .bts-blocs-grid           { gap: 16px; }

body.mode-oral .gsb-context-card,
body.mode-oral .ap-context-card,
body.mode-oral .bts-bloc                 { padding: 26px 28px; }

body.mode-oral .gsb-context-title,
body.mode-oral .ap-context-title,
body.mode-oral .bts-bloc-title           { font-size: 22px; letter-spacing: 1.5px; margin-bottom: 10px; }

body.mode-oral .gsb-context-desc,
body.mode-oral .ap-context-desc,
body.mode-oral .bts-bloc-desc            { font-size: 18px; line-height: 1.8; }

/* Screenshots grilles */
body.mode-oral .gsb-screenshots-grid,
body.mode-oral .ap-screenshots-grid      { gap: 14px; }


/* ══════════════════════════════════════════════════════
   ÉLÉMENTS COMMUNS DANS TOUTES LES POPUPS
══════════════════════════════════════════════════════ */

/* Badges / tags génériques */
body.mode-oral .popup-body .tag,
body.mode-oral .popup-body .badge        { font-size: 14px; padding: 5px 14px; }

/* Liens boutons sociaux */
body.mode-oral .about-social-btn         { font-size: 16px; padding: 12px 22px; gap: 10px; border-radius: 8px; }

/* Dividers internes */
body.mode-oral .popup-body hr,
body.mode-oral .popup-body .about-extra-divider { margin: 20px 0; }

/* Icônes inline dans popup */
body.mode-oral .popup-body .popup-icon   { font-size: 22px; }

/* ══════════════════════════════════════════════════════
   POPUPS DÉTAIL PROJETS (msp-popup) — grilles élargies
   Animal'And Chat, Animal'Vest, GSB Missions…
══════════════════════════════════════════════════════ */

/* Grille fonctionnalités → 3 colonnes */
body.mode-oral .msp-popup .msp-features-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px;
}

/* Grille contexte → 3 colonnes */
body.mode-oral .msp-popup .msp-context-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px;
}

/* Grille architecture → 4 colonnes */
body.mode-oral .msp-popup .msp-arch-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px;
}

/* Grille apprentissages → 3 colonnes */
body.mode-oral .msp-popup .msp-learn-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px;
}

/* Grille code structure → 4 colonnes */
body.mode-oral .msp-popup .msp-code-grid-4 {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px;
}

/* Screenshots → 4 colonnes */
body.mode-oral .msp-popup .gsb-screenshots-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px;
}

/* Corps popup — padding généreux */
body.mode-oral .msp-popup .msp-body {
  padding: 40px 52px;
}


/* ══════════════════════════════════════════════════════
   POPUPS À PROPOS, COMPÉTENCES, EXPÉRIENCES
   (ciblage via l'overlay parent)
══════════════════════════════════════════════════════ */

body.mode-oral #popup-about .popup,
body.mode-oral #popup-skills .popup,
body.mode-oral #popup-xp .popup,
body.mode-oral #popup-contact .popup,
body.mode-oral #popup-cv .popup {
  max-width: 1750px !important;
  width: 91vw !important;
}


/* ══════════════════════════════════════════════════════
   POPUP À PROPOS — SECTION PARCOURS & OBJECTIFS
══════════════════════════════════════════════════════ */

body.mode-oral .about-timeline            { gap: 18px; display: flex; flex-direction: column; }
body.mode-oral .about-tl-item             { gap: 18px; padding: 4px 0; }
body.mode-oral .about-tl-dot              { width: 18px; height: 18px; min-width: 18px; }
body.mode-oral .about-tl-title            { font-size: 22px !important; letter-spacing: 1.5px; margin-bottom: 6px; }
body.mode-oral .about-tl-sub              { font-size: 16px !important; letter-spacing: 0.5px; margin-top: 4px; }
body.mode-oral .about-tl-badge            { font-size: 14px !important; padding: 3px 12px; border-radius: 4px; vertical-align: middle; }

/* ══════════════════════════════════════════════════════
   MODE DEV — RESPONSIVE 1536×730
   Tuile "À PROPOS" : agrandir le contenu pour combler l'espace
   + Popup À PROPOS : texte agrandi
══════════════════════════════════════════════════════ */
@media (min-width: 1500px) and (max-width: 1560px) and (max-height: 750px) {

  /* ── Tuile about : utiliser toute la hauteur dispo ── */
  body.mode-dev .tile-about {
    display: flex;
    flex-direction: column;
  }

  body.mode-dev .tile-about .skills-section-slider {
    flex: 1;
    position: relative;
    overflow: hidden !important;
    min-height: 0;
  }

  body.mode-dev .tile-about .skills-section {
    display: none !important;
  }

  body.mode-dev .tile-about .skills-section.active {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
  }

  /* ── Nom : bien plus grand pour remplir l'espace ── */
  body.mode-dev #tile-about-0 .about-name {
    font-size: 72px;
    line-height: 0.95;
    letter-spacing: 3px;
    margin-top: 8px;
  }

  /* ── Rôle : plus lisible ── */
  body.mode-dev #tile-about-0 .about-role {
    font-size: 13px;
    margin-top: 10px;
    letter-spacing: 2.5px;
  }

  /* ── Bio : taille confortable ── */
  body.mode-dev #tile-about-0 .about-bio {
    font-size: 14px;
    margin-top: 14px;
    line-height: 1.75;
    max-width: 100%;
    color: #8fb5d0;
  }

  /* ── Tags : plus grands et bien espacés ── */
  body.mode-dev #tile-about-0 .about-tags {
    margin-top: 20px;
    gap: 7px;
  }

  body.mode-dev #tile-about-0 .tag {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 3px;
  }

  /* ── Header de la tuile légèrement plus visible ── */
  body.mode-dev .tile-about .tile-header {
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 0;
  }

  /* ── tile-desktop-extra reste caché (intentionnel) ── */
  body.mode-dev .tile-desktop-extra {
    display: none !important;
  }

  /* ── Popup À PROPOS : texte agrandi ── */
  body.mode-dev .about-popup-text {
    font-size: 17px !important;
    line-height: 1.8;
    color: #8aaac8;
  }

  body.mode-dev .about-stat-num {
    font-size: 40px;
  }

  body.mode-dev .about-stat-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    margin-top: 3px;
  }

  body.mode-dev .about-stats-col {
    padding: 18px 24px;
    margin-bottom: 20px;
  }

  body.mode-dev .about-stat-divider {
    height: 46px;
  }
}

/* ══════════════════════════════════════════════════════
   MODE ORA — RESPONSIVE 1536×730
   Tuile "À PROPOS" : overflow hidden pour éviter que le
   contenu des slides (bio, github, paramètres) déborde
   sur les tuiles voisines.
   Même logique que le mode DEV ci-dessus.
══════════════════════════════════════════════════════ */
@media (min-width: 1500px) and (max-width: 1560px) and (max-height: 750px) {

  /* ── Tuile about : flex column + overflow caché ── */
  body.mode-oral .tile-about {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.mode-oral .tile-about .skills-section-slider {
    flex: 1;
    position: relative;
    overflow: hidden !important;
    min-height: 0;
  }

  body.mode-oral .tile-about .skills-section {
    display: none !important;
  }

  body.mode-oral .tile-about .skills-section.active {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MODE ORAL — PATCH 2560×1202
   Lisibilité maximale pour vidéoprojecteur / grand écran.
   Cible : écrans ≥ 2400px de large ET hauteur ≥ 1100px
   Échelle : ~1.33× par rapport au patch 1920×959
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 2400px) and (min-height: 1100px) {

  /* ══════════════════════════════════════════════════════
     GRID GLOBAL — plus de respiration, tuiles plus hautes
  ══════════════════════════════════════════════════════ */
  body.mode-oral .grid-container {
    padding: 10px 22px;
    gap: 10px;
    height: calc(100vh - 64px);
    grid-template-rows: 1fr 1fr 1fr 72px;
    overflow: hidden;
  }

  /* ══════════════════════════════════════════════════════
     TOPBAR — bien lisible depuis le fond de la salle
  ══════════════════════════════════════════════════════ */
  body.mode-oral .topbar {
    height: 64px;
  }
  body.mode-oral .topbar-inner {
    max-width: 2200px;
  }
  body.mode-oral .logo {
    font-size: 25px;
    letter-spacing: 5px;
  }
  body.mode-oral .logo-badge {
    font-size: 16px;
    padding: 4px 14px;
  }
  body.mode-oral .topbar-nav {
    height: 64px;
  }
  body.mode-oral .topbar-nav > a,
  body.mode-oral .nav-dd-group {
    font-size: 18px;
    letter-spacing: 2.5px;
    padding: 0 22px;
    height: 64px;
  }
  body.mode-oral .nav-dd-trigger {
    font-size: 18px;
    letter-spacing: 2.5px;
  }
  
  

  /* Wrapper dropdown — hauteur alignée sur la topbar */
  body.mode-oral .nav-dropdown-wrap {
    height: 64px;
  }

  /* Chevron — plus grand et mieux centré */
  body.mode-oral .nav-dd-chevron {
    width: 32px;
    height: 42px;
  }
  body.mode-oral .nav-dd-chevron::after {
    width: 13px;
    height: 8px;
  }

  /* Items du dropdown — plus lisibles depuis le fond de la salle */
  body.mode-oral .nav-dropdown {
    min-width: 230px;
  }
  body.mode-oral .nav-dd-item {
    font-size: 15px;
    letter-spacing: 2px;
    padding: 13px 18px;
    gap: 13px;
  }
  body.mode-oral .nav-dd-icon {
    font-size: 16px;
  }

  /* ══════════════════════════════════════════════════════
     TILE HEADER — étiquettes coin supérieur
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-header {
    font-size: 14px;
    letter-spacing: 3.5px;
    margin-bottom: 16px;
  }
  body.mode-oral .tile-header-dot {
    width: 9px;
    height: 9px;
  }

  /* ══════════════════════════════════════════════════════
     DOTS — zone protégée
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-about,
  body.mode-oral .tile-projects,
  body.mode-oral .tile-skills {
    padding-bottom: 52px !important;
  }
  body.mode-oral .tile-dot  { width: 18px; height: 18px; }
  body.mode-oral .tile-dots { gap: 9px; bottom: 15px; right: 16px; }

  /* ══════════════════════════════════════════════════════
     TUILE À PROPOS
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-about {
    padding-top: 20px;
    padding-left: 28px;
    padding-right: 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }
  body.mode-oral .tile-about .skills-section-slider {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  body.mode-oral .tile-about .skills-section.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  /* Identité */
  body.mode-oral .about-name { font-size: 80px; line-height: 0.95; letter-spacing: 3px; }
  body.mode-oral .about-role { font-size: 16px; letter-spacing: 4px; margin-top: 10px; }
  body.mode-oral .about-bio  { font-size: 17px; margin-top: 12px; line-height: 1.7; }
  body.mode-oral .about-tags { margin-top: 14px; gap: 8px; }
  body.mode-oral .tag        { font-size: 14px; padding: 5px 14px; border-radius: 4px; }

  /* FM card */
  body.mode-oral .about-fm {
    margin-top: auto;
    flex-shrink: 0;
    padding-top: 8px;
    overflow: hidden;
    min-height: 0;
  }
  /* Cacher la colonne PROFIL — garder uniquement EN CE MOMENT */
  body.mode-oral .about-fm-info     { display: none !important; }

  body.mode-oral .about-fm-divider  { margin: 6px 0 8px; }
  body.mode-oral .about-fm-card     { max-height: 130px; overflow: hidden; display: flex; gap: 0; }
  body.mode-oral .about-fm-attrs    { flex: 1; min-width: 0; }

  body.mode-oral .about-fm-section-title { font-size: 10px; padding: 4px 14px; letter-spacing: 2px; }
  body.mode-oral .about-fm-attr-row      { padding: 4px 14px; }

  /* Bloc INACTIF — centré, plus aéré maintenant qu'il prend toute la largeur */
  body.mode-oral .about-fm-idle       { padding: 10px 14px; gap: 4px; height: auto; }
  body.mode-oral .about-fm-idle-label { font-size: 18px; letter-spacing: 5px; }
  body.mode-oral .about-fm-idle-sub   { font-size: 10px; line-height: 1.6; }
  body.mode-oral .about-fm-idle-zzz   { height: 30px; }
  body.mode-oral .z1 { font-size: 12px; }
  body.mode-oral .z2 { font-size: 18px; }
  body.mode-oral .z3 { font-size: 26px; }

  /* ══════════════════════════════════════════════════════
     TUILE PROJETS
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-projects {
    padding-top: 20px;
    padding-left: 28px;
    padding-right: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* Compteur + sous-titre */
  body.mode-oral .proj-count { font-size: 100px; line-height: 1; margin-top: 0; flex-shrink: 0; }
  body.mode-oral .tile-sub   { font-size: 20px; margin-top: 4px; letter-spacing: 0.5px; flex-shrink: 0; }

  /* Badges catégories */
  body.mode-oral .proj-categories { gap: 9px; margin: 10px 0 12px; flex-wrap: wrap; flex-shrink: 0; }
  body.mode-oral .proj-cat-badge  { font-size: 16px; padding: 6px 16px; gap: 8px; border-radius: 24px; }
  body.mode-oral .proj-cat-num    { font-size: 16px; font-weight: 700; }

  /* Liste projets */
  body.mode-oral .proj-list-preview { margin-top: 0; flex-shrink: 0; overflow: hidden; }
  body.mode-oral .proj-item-preview      { font-size: 19px; padding: 7px 0; gap: 12px; }
  body.mode-oral .proj-item-preview span { font-size: 21px; font-weight: 600; }
  body.mode-oral .proj-tech-dot          { width: 9px; height: 9px; flex-shrink: 0; }

  /* Extras — on montre les proj supplémentaires, on cache seulement le chart technos */
  body.mode-oral .tile-projects .tile-desktop-extra { display: block !important; }
  body.mode-oral .tile-projects .tile-desktop-extra .about-extra-divider { display: block !important; margin: 8px 0; }
  body.mode-oral .proj-tech-chart       { display: none !important; }
  body.mode-oral .proj-tech-chart-label { display: none !important; }
  /* Masquer le 2e divider (juste avant le chart) */
  body.mode-oral .proj-extra .about-extra-divider:last-of-type { display: none !important; }

  /* ══════════════════════════════════════════════════════
     TUILE COMPÉTENCES
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-skills {
    padding-top: 20px;
    padding-left: 28px;
    padding-right: 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }
  body.mode-oral .tile-skills .skills-section-slider {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  body.mode-oral .tile-skills .skills-section.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  /* Titre Stack & Outils */
  body.mode-oral .tile-skills .tile-title { font-size: 30px !important; margin-bottom: 16px !important; flex-shrink: 0; }

  /* Chips tech */
  body.mode-oral .skill-chip           { padding: 12px 18px 12px 14px; gap: 12px; border-radius: 7px; }
  body.mode-oral .skill-chip-img       { width: 30px; height: 30px; }
  body.mode-oral .skill-chip-icon-text { font-size: 24px; width: 30px; }
  body.mode-oral .skill-chip-name      { font-size: 18px; font-weight: 500; }
  body.mode-oral .skills-chip-grid     { gap: 9px; }

  /* Catégories */
  body.mode-oral .skills-cat-block { margin-bottom: 14px; flex-shrink: 0; }
  body.mode-oral .skills-cat-label { font-size: 13px; margin-bottom: 10px; letter-spacing: 3px; }

  /* Certifications cachées en oral */
  body.mode-oral .skills-certifications { display: none !important; }

  /* Soft skills cachés en oral 2560 */
  body.mode-oral .skills-softskills { display: none !important; }

  /* ══════════════════════════════════════════════════════
     TUILE XP
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-xp        { padding: 20px 26px; overflow: hidden; }
  body.mode-oral .xp-count       { font-size: 72px; }
  body.mode-oral .xp-count-label { font-size: 17px; letter-spacing: 2px; }
  body.mode-oral .xp-item        { padding: 12px 18px 14px; gap: 6px; }
  body.mode-oral .xp-item-role   { font-size: 20px; font-weight: 700; }
  body.mode-oral .xp-item-co     { font-size: 15px; line-height: 1.5; }
  body.mode-oral .xp-item-badge  { font-size: 11px; padding: 3px 9px; letter-spacing: 1.5px; }
  body.mode-oral .xp-domain-chip { font-size: 15px; padding: 7px 16px; }
  body.mode-oral .xp-extra-domains { gap: 8px; }
  body.mode-oral .about-extra-divider { margin: 10px 0; }

  /* ══════════════════════════════════════════════════════
     TUILE CV — 2560px · version épurée
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-cv {
    padding: 22px 28px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    box-sizing: border-box;
  }
  /* "MON CV" — grand mais pas écrasant */
  body.mode-oral .cv-big {
    font-size: 72px;
    line-height: 0.92;
    flex-shrink: 0;
    margin-top: 4px;
    margin-bottom: 0;
    letter-spacing: 1px;
  }
  /* Zone boutons — poussée vers le bas */
  body.mode-oral .tile-cv .tile-desktop-extra {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
    margin-top: 0;
  }
  /* Divider supprimé pour gagner de l'air */
  body.mode-oral .tile-cv .about-extra-divider { display: none !important; }
  /* Infos méta — discrètes, en ligne */
  body.mode-oral .tile-cv .cv-extra-info {
    display: flex;
    flex-direction: row;
    gap: 18px;
    margin-top: 0;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  body.mode-oral .tile-cv .cv-extra-row {
    font-size: 13px;
    gap: 6px;
    display: flex;
    align-items: center;
    color: var(--muted);
    padding: 0;
  }
  body.mode-oral .tile-cv .cv-extra-icon { font-size: 14px; }
  body.mode-oral .tile-cv .cv-extra-info .cv-extra-row:nth-child(3) { display: flex !important; }
  /* Bouton télécharger — pleine largeur, sobre */
  body.mode-oral .cv-btn {
    display: flex;
    width: 100%;
    font-size: 17px;
    letter-spacing: 2.5px;
    padding: 14px 0;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 3px;
    margin-bottom: 0;
  }
  /* Bouton aperçu — caché en mode oral (moins utile) */
  body.mode-oral .cv-btn-preview {
    display: none !important;
  }

  /* ══════════════════════════════════════════════════════
     TUILE CONTACT — 2560px
  ══════════════════════════════════════════════════════ */
  body.mode-oral .tile-contact .tile-desktop-extra { display: none !important; }

  body.mode-oral .tile-contact {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }
  body.mode-oral .tile-contact .tile-title {
    font-size: clamp(40px, 3.5vw, 68px);
    line-height: 1.0;
    margin-top: 6px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  body.mode-oral .contact-links {
    gap: 12px;
    margin-top: 20px;
    flex-shrink: 0;
    flex-wrap: nowrap;
  }
  body.mode-oral .contact-chip {
    font-size: 20px;
    padding: 14px 28px;
    flex: 1;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    border-radius: 4px;
  }
  body.mode-oral .tile-contact .about-extra-divider { margin: 16px 0 14px; flex-shrink: 0; }
  body.mode-oral .contact-extra-grid {
    gap: 10px;
    display: flex;
    flex-shrink: 0;
  }
  body.mode-oral .contact-extra-item {
    padding: 18px 22px;
    flex: 1;
    border-radius: 4px;
  }
  body.mode-oral .contact-extra-label { font-size: 13px; letter-spacing: 2.5px; }
  body.mode-oral .contact-extra-val   { font-size: 24px; margin-top: 5px; font-weight: 600; }
  body.mode-oral .contact-extra-icon  { font-size: 26px; width: 36px; }

  /* ══════════════════════════════════════════════════════
     FOOTER
  ══════════════════════════════════════════════════════ */
  body.mode-oral .footer-tile-copy  { font-size: 18px; letter-spacing: 3px; }
  body.mode-oral .footer-tile-sub   { font-size: 11px; letter-spacing: 2px; margin-top: 3px; }
  body.mode-oral .footer-tile-badge { font-size: 12px; padding: 2px 10px; }
  body.mode-oral .tile-footer       { height: 100%; max-height: none; overflow: hidden; }
  body.mode-oral .footer-tile-inner { padding: 6px 12px; }
  body.mode-oral .footer-tile-top   { margin-bottom: 3px; }
  body.mode-oral .tile-footer::before { font-size: 60px; }

  /* ══════════════════════════════════════════════════════
     POPUPS
  ══════════════════════════════════════════════════════ */
  body.mode-oral .popup       { max-height: 90vh; }
  body.mode-oral .popup-title { font-size: 96px !important; letter-spacing: 4px; }
  body.mode-oral .popup-subtitle { font-size: 22px !important; letter-spacing: 2px; margin-bottom: 36px; }

  body.mode-oral .popup-body  { padding: 56px 72px; }
  body.mode-oral .popup-topbar { padding: 18px 44px; }
  body.mode-oral .popup-breadcrumb { font-size: 30px; letter-spacing: 2.5px; }
  body.mode-oral .popup-section-label { font-size: 16px; letter-spacing: 4px; }
  body.mode-oral .popup-close { width: 46px; height: 46px; font-size: 24px; }
  body.mode-oral .popup-section-title { font-size: 18px; letter-spacing: 4px; margin-bottom: 24px; }

  body.mode-oral #popup-about .popup,
  body.mode-oral #popup-skills .popup,
  body.mode-oral #popup-xp .popup,
  body.mode-oral #popup-contact .popup,
  body.mode-oral #popup-cv .popup {
    max-width: 2200px !important;
    width: 88vw !important;
  }
  body.mode-oral .popup[style] {
    max-width: 2200px !important;
    width: 88vw !important;
  }
  body.mode-oral .msp-popup {
    max-width: 2200px !important;
    width: 88vw !important;
  }

  /* Popup À Propos */
  body.mode-oral .about-popup-body { padding: 44px 56px 56px; }
  body.mode-oral .about-hero       { gap: 36px; margin-bottom: 40px; padding-bottom: 40px; }
  body.mode-oral .about-hero-avatar { width: 110px; height: 110px; font-size: 38px; }
  body.mode-oral .about-hero-right .popup-title    { font-size: 80px !important; margin-bottom: 10px; }
  body.mode-oral .about-hero-right .popup-subtitle { font-size: 20px !important; }
  body.mode-oral .about-popup-text { font-size: 22px !important; line-height: 1.85; }
  body.mode-oral .about-stat-num   { font-size: 56px; }
  body.mode-oral .about-stat-label { font-size: 15px; letter-spacing: 2px; margin-top: 4px; }
  body.mode-oral .about-stats-col  { padding: 24px 32px; margin-bottom: 28px; }

  /* Timeline */
  body.mode-oral .about-tl-title { font-size: 30px !important; letter-spacing: 2px; margin-bottom: 8px; }
  body.mode-oral .about-tl-sub   { font-size: 22px !important; letter-spacing: 0.5px; margin-top: 6px; }
  body.mode-oral .about-tl-badge { font-size: 18px !important; padding: 4px 16px; border-radius: 5px; }
  body.mode-oral .about-tl-dot   { width: 24px; height: 24px; min-width: 24px; }
  body.mode-oral .about-tl-item  { gap: 24px; padding: 6px 0; }

  /* Badges / tags dans les popups */
  body.mode-oral .popup-body .tag,
  body.mode-oral .popup-body .badge { font-size: 18px; padding: 7px 18px; }

  body.mode-oral .about-social-btn  { font-size: 20px; padding: 16px 28px; gap: 13px; border-radius: 10px; }
  body.mode-oral .popup-body .popup-icon { font-size: 30px; }

  /* Popup Compétences / XP */
  body.mode-oral .xp-popup-role { font-size: 32px; }
  body.mode-oral .xp-popup-desc { font-size: 20px; }
  body.mode-oral .skill-popup-bar-header { font-size: 16px; }

  /* Popups Projets MSP */
  body.mode-oral .msp-popup .msp-body { padding: 56px 72px; }
  body.mode-oral .gsb-context-title,
  body.mode-oral .ap-context-title,
  body.mode-oral .bts-bloc-title      { font-size: 30px; letter-spacing: 2px; margin-bottom: 14px; }
  body.mode-oral .gsb-context-desc,
  body.mode-oral .ap-context-desc,
  body.mode-oral .bts-bloc-desc       { font-size: 24px; line-height: 1.85; }
}
/* ══════════════════════════════════════════
   FM26-STYLE CLOCK — topbar date/heure
   ══════════════════════════════════════════ */
.fm-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  min-width: 82px;
  background: #1e2530;
  border: 1px solid #2e3a4a;
  border-radius: 8px;
  cursor: default;
  user-select: none;
  gap: 2px;
  line-height: 1;
}

/* Ligne 1 : date — blanc */
.fm-clock-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Ligne 2 : jour + heure */
.fm-clock-time-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* Jour "Sat" — gris bleuté */
.fm-clock-day {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  white-space: nowrap;
}

/* Heure — couleur principale du site */
.fm-clock-time {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-light);
  white-space: nowrap;
}

/* Responsive: masquer sur très petit écran */
@media (max-width: 540px) {
  .fm-clock { display: none; }
}
/* ═══════════════════════════════════════════════════
   XP — STRUCTURES DE STAGE
   ═══════════════════════════════════════════════════ */

.xp-structures-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 4px;
}

@media (max-width: 820px) {
  .xp-structures-grid { grid-template-columns: 1fr; }
}

.xp-structure-card {
  background: var(--tile-bg, #0d0f1a);
  border: 1.5px solid var(--border, #1e2130);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s;
}

.xp-structure-animaland:hover { border-color: #4ade80; }
.xp-structure-cadreperso:hover { border-color: var(--accent-light, #4f8ef7); }

/* Header : logo + titre */
.xp-structure-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.xp-structure-logo-wrap {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, #1e2130);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.xp-structure-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.xp-structure-logo-fallback {
  font-size: 24px;
  align-items: center;
  justify-content: center;
}

/* Logo CP (texte) */
.xp-logo-cp-wrap {
  background: linear-gradient(135deg, #1a2a4a, #0d1830);
  border-color: var(--accent-light, #4f8ef7);
}
.xp-logo-cp-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xp-logo-cp-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--accent-light, #4f8ef7);
  letter-spacing: 2px;
}

.xp-structure-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--text, #e8eaf0);
  line-height: 1;
}

.xp-structure-type {
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  color: var(--muted, #5a5e7a);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.xp-type-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
  flex-shrink: 0;
}
.xp-type-dot-blue { background: var(--accent-light, #4f8ef7); }

.xp-type-asso { color: #4ade80; }
.xp-type-entreprise { color: var(--accent-light, #4f8ef7); }

/* Description */
.xp-structure-desc {
  font-size: 13px;
  color: var(--muted, #7a7e9a);
  line-height: 1.6;
  margin: 0;
}

/* Grille de métadonnées */
.xp-structure-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

@media (max-width: 560px) {
  .xp-structure-meta-grid { grid-template-columns: 1fr; }
}

.xp-structure-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border, #1e2130);
  border-radius: 8px;
  padding: 8px 10px;
}

.xp-meta-label {
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  color: var(--muted, #5a5e7a);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.xp-meta-val {
  font-size: 12px;
  color: var(--text, #c8cadc);
  line-height: 1.4;
}

.xp-meta-mono {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--accent-light, #9ab0d8);
}

.xp-meta-link {
  color: var(--accent-light, #4f8ef7);
  text-decoration: none;
}
.xp-meta-link:hover { text-decoration: underline; }

/* Activités */
.xp-structure-activities {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xp-activities-label {
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  color: var(--muted, #5a5e7a);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.xp-activities-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.xp-activity-chip {
  font-size: 11px;
  font-family: 'DM Sans', sans-serif;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.2);
  color: #4ade80;
  border-radius: 20px;
  padding: 4px 10px;
}

.xp-activity-chip.xp-chip-blue {
  background: rgba(79,142,247,0.08);
  border-color: rgba(79,142,247,0.2);
  color: var(--accent-light, #4f8ef7);
}

/* ═══════════════════════════════════════════════════
   BOUTON "PRÉSENTATION" dans stage-company-banner
   ═══════════════════════════════════════════════════ */

.stage-company-banner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stage-company-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.3);
  color: #4ade80;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}

.stage-company-btn:hover {
  background: rgba(74,222,128,0.18);
  border-color: #4ade80;
  color: #86efac;
}

.stage-company-btn--blue {
  background: rgba(79,142,247,0.08);
  border-color: rgba(79,142,247,0.3);
  color: var(--accent-light, #4f8ef7);
}

.stage-company-btn--blue:hover {
  background: rgba(79,142,247,0.18);
  border-color: var(--accent-light, #4f8ef7);
  color: #93b8ff;
}

/* ═══════════════════════════════════════════════════
   POPUPS STRUCTURES — HERO & LAYOUT
   ═══════════════════════════════════════════════════ */

.popup-structure {
  max-width: 780px;
}

.popup-topbar--green { border-bottom-color: rgba(74,222,128,0.2); }
.popup-topbar--blue  { border-bottom-color: rgba(79,142,247,0.2); }

.xp-struct-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 12px;
  border: 1.5px solid;
  margin-bottom: 4px;
}

.xp-struct-hero--green {
  background: rgba(74,222,128,0.04);
  border-color: rgba(74,222,128,0.2);
}

.xp-struct-hero--blue {
  background: rgba(79,142,247,0.04);
  border-color: rgba(79,142,247,0.2);
}

.xp-struct-hero-logo {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, #1e2130);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.xp-struct-hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.xp-struct-logo-cp {
  background: linear-gradient(135deg, #1a2a4a, #0d1830);
  border-color: var(--accent-light, #4f8ef7) !important;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--accent-light, #4f8ef7);
  letter-spacing: 3px;
}

.xp-struct-hero-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 1.5px;
  color: var(--text, #e8eaf0);
  line-height: 1;
  margin-bottom: 6px;
}

.xp-struct-hero-type {
  font-size: 12px;
  font-family: 'DM Mono', monospace;
  color: #4ade80;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}

.xp-struct-hero-period {
  font-size: 12px;
  font-family: 'DM Mono', monospace;
  color: var(--muted, #5a5e7a);
}

.xp-meta-grid-popup {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 560px) {
  .xp-struct-hero { flex-direction: column; align-items: flex-start; }
  .xp-meta-grid-popup { grid-template-columns: 1fr; }
  .stage-company-btn { font-size: 10px; padding: 5px 10px; }
}

/* ════════════════════════════════════════════════════════════════════════
   MODE ORA — 2560×1202 (vidéoprojecteur grande salle)
   Popup "Présentation structure" (.popup-structure) : tout agrandi
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 2400px) {

  /* ── Conteneur popup élargi ── */
  body.mode-oral .popup-structure {
    max-width: 1400px !important;
    width: 90vw !important;
  }

  /* ── Topbar breadcrumb ── */
  body.mode-oral .popup-structure .popup-topbar    { padding: 20px 44px; }
  body.mode-oral .popup-structure .popup-breadcrumb { font-size: 30px; letter-spacing: 3px; }
  body.mode-oral .popup-structure .popup-section-label { font-size: 15px; letter-spacing: 4px; }
  body.mode-oral .popup-structure .popup-close     { width: 44px; height: 44px; font-size: 22px; }

  /* ── Héro : logo + nom + type + période ── */
  body.mode-oral .popup-structure .xp-struct-hero  { gap: 28px; padding: 28px 32px; margin-bottom: 8px; border-radius: 16px; }
  body.mode-oral .popup-structure .xp-struct-hero-logo { width: 100px; height: 100px; border-radius: 18px; }
  body.mode-oral .popup-structure .xp-struct-logo-cp   { font-size: 38px; letter-spacing: 4px; }
  body.mode-oral .popup-structure .xp-struct-hero-name { font-size: 42px; letter-spacing: 2px; margin-bottom: 10px; }
  body.mode-oral .popup-structure .xp-struct-hero-type { font-size: 17px; gap: 9px; margin-bottom: 7px; }
  body.mode-oral .popup-structure .xp-struct-hero-period { font-size: 17px; }
  body.mode-oral .popup-structure .xp-type-dot     { width: 10px; height: 10px; }

  /* ── Bouton Présentation ── */
  body.mode-oral .popup-structure .stage-company-btn { font-size: 16px; padding: 10px 22px; border-radius: 24px; }

  /* ── Body : padding généreux ── */
  body.mode-oral .popup-structure .popup-body { padding: 44px 56px; }

  /* ── Sections : titres (À PROPOS, INFOS LÉGALES…) ── */
  body.mode-oral .popup-structure .popup-section-title { font-size: 18px; letter-spacing: 4px; margin-bottom: 22px; }
  body.mode-oral .popup-structure .popup-section       { margin-bottom: 40px; }

  /* ── Description (§ À propos) ── */
  body.mode-oral .popup-structure .xp-structure-desc { font-size: 19px; line-height: 1.8; }

  /* ── Grille métadonnées (2 colonnes) ── */
  body.mode-oral .popup-structure .xp-structure-meta-grid { gap: 14px 20px; }
  body.mode-oral .popup-structure .xp-structure-meta-item { padding: 14px 18px; border-radius: 10px; }
  body.mode-oral .popup-structure .xp-meta-grid-popup { grid-template-columns: 1fr 1fr; }

  /* ── Labels & valeurs dans les cartes méta ── */
  body.mode-oral .popup-structure .xp-meta-label { font-size: 13px; letter-spacing: 0.08em; }
  body.mode-oral .popup-structure .xp-meta-val   { font-size: 17px; line-height: 1.5; }
  body.mode-oral .popup-structure .xp-meta-mono  { font-size: 16px; }

  /* ── Chips Activités & Missions ── */
  body.mode-oral .popup-structure .xp-activities-label { font-size: 13px; letter-spacing: 0.1em; }
  body.mode-oral .popup-structure .xp-activities-chips { gap: 10px; }
  body.mode-oral .popup-structure .xp-activity-chip    { font-size: 16px; padding: 7px 18px; border-radius: 24px; }

  /* ── Structure name/type dans tuile liste (hors popup) ── */
  body.mode-oral .xp-structure-name { font-size: 26px; }
  body.mode-oral .xp-structure-type { font-size: 14px; }

}