/* Minimal additive styles to enhance existing design without altering base palette */

.org-pill{
  display:inline-block;
  padding:2px 8px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  border-radius:0;
  font-size:0.9rem;
  line-height:1.6;
}

.meta-line .pin{
  margin-right:6px;
  opacity:0.9;
}

.contact-card{
  position:relative;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  border-radius:0;
  padding:16px 18px;
}

.contact-card .contact-list{
  margin:0;
}

.contact-card .contact-meta{
  margin-top:12px;
  display:flex;
  justify-content:flex-start;
}

.languages{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.lang-badge{
  padding:2px 8px;
  border-radius:0;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.05);
  font-size:0.85rem;
  white-space:nowrap;
}

/* Accessibility: ensure emoji aligns visually with text baseline */
.pin{ display:inline-block; transform:translateY(1px); }

/* Smooth scrolling globally */
html{ scroll-behavior:smooth; }

/* Header: hide brand text block for a cleaner professional layout */


.site-nav .nav-link{
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.85rem;
}

/* Hero tagline and quote */
.hero-tagline{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
}
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:0;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  font-size:0.9rem;
  white-space:nowrap;
}
.hero-quote{
  margin:0;
  font-size:1rem;
  opacity:0.9;
}

/* Scroll down arrow */
.scroll-down{
  display:none;
}

/* Emphasize hero quote */
.lead-quote{
  font-size:1.25rem;
  font-weight:600;
  margin:0 0 6px 0;
}

/* Theme-adaptive pin icon using currentColor */
.pin-icon{
  display:inline-block;
  width:14px;
  height:14px;
  margin-right:6px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0'%3E%3Cpath fill='black' d='M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0'%3E%3Cpath fill='black' d='M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Contact two-column grid (responsive) */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px 24px;
}
@media (max-width: 720px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
}
.contact-col{ display:flex; align-items:flex-start; }
.contact-col .languages{ margin-top:2px; }

/* Tidy skill icons and headings (ensures consistency) */
.skill-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.skill-head .skill-icon{
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  min-width:28px;
  background: transparent;
  border: none;
  color: var(--muted);
}
[data-theme="light"] .skill-head .skill-icon{
  background: transparent;
  border-color: transparent;
}
.skill-head .skill-icon i{
  font-size:16px;
  line-height:1;
  opacity:1;
  color: currentColor;
}
.skill-head h3{ margin:0; }

/* Contact layout polish */
.contact-list{
  list-style:none;
  padding:0;
}
.contact-list li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,0.08);
}
.contact-list li:first-child{ border-top:none; }
[data-theme="light"] .contact-list li{
  border-top-color: rgba(0,0,0,0.08);
}
.contact-list li i{
  width:18px;
  text-align:center;
  opacity:1;
  color: currentColor;
}
.contact-list a{
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.contact-list a:hover{
  border-bottom-color: currentColor;
}
/* Connect (Contact | Languages) side-by-side layout */
.connect-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:24px;
  align-items:start;
}

section.container[aria-label="Connect"] {
    position: relative;
    padding-bottom: 4rem; /* Make space for absolute element */
    overflow: auto; /* Fix for height calculation */
}
@media (max-width: 900px){
  .connect-grid{ grid-template-columns: 1fr; }
}

/* Clean section titles inside connect grid */
.connect-grid .section-title{
  margin-bottom:12px;
}

/* Ensure language card matches cards system */
.lang-card{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  padding:14px 16px;
}
[data-theme="light"] .lang-card{
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}
.lang-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Languages card (right of contact) */
.lang-card{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  padding:14px 16px;
}
[data-theme="light"] .lang-card{
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}
.lang-title{
  margin:0 0 8px 0;
  font-size:0.95rem;
  letter-spacing:0.02em;
  opacity:0.9;
}
.lang-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Rectangle-only (no rounded corners anywhere) */
.skill-cat,
.skill-head .skill-icon,
.card,
.tile,
.contact-card,
.lang-card,
.org-badge,
.org-pill,
.kw-badge,
.lang-badge,
.chip{
  border-radius:0 !important;
}

/* Unified card hover effect for all sections (theme-aware) */
.card, .tile, .contact-card, .lang-card{
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
[data-theme="light"] .card,
[data-theme="light"] .tile,
[data-theme="light"] .contact-card,
[data-theme="light"] .lang-card{
  border-color: rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.card:hover, .tile:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
/* Subtle hover for Contact and Languages (independent, not accentuated) */
.contact-card:hover, .lang-card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
}
[data-theme="light"] .card:hover,
[data-theme="light"] .tile:hover{
  border-color: rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.04);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
[data-theme="light"] .contact-card:hover,
[data-theme="light"] .lang-card:hover{
  border-color: rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* Harmonize Skills category card to the same hover dynamic (rectangular) */
.skill-cat{
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}
[data-theme="light"] .skill-cat{
  border-color: rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.skill-cat:hover{
  /* same hover visuals already defined above, keep interaction on icon */
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
[data-theme="light"] .skill-cat:hover{
  border-color: rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.04);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* Make skill icon rectangular and reactive on hover */
.skill-head .skill-icon{
  border-radius:0 !important;
}
.skill-cat:hover .skill-icon{
  background: transparent;
  border-color: transparent;
  transform: none;
}
[data-theme="light"] .skill-cat:hover .skill-icon{
  background: transparent;
  border-color: transparent;
}

/* Experience "Show more / Show less" */
.is-collapsed{
  display: none !important;
}
.exp-toggle-wrap{
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.exp-toggle{
  min-width: 160px;
}

/* Contact local time badge — fixed width to prevent layout shift */
.time-badge{
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* equal-width digits */
  /* Use a fixed width to keep badge size stable as time updates */
  width: 18ch; /* fits "88:88:88 • UTC+8" comfortably */
  text-align: center;
}

/* WhatsApp preferred badge — same visual style as time badge, flexible width */
.pref-badge{
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.2;            /* même hauteur que .kw-badge */
  overflow: visible;            /* évite tout crop visuel en bas */
  box-sizing: border-box;
  /* inherits look from .kw-badge */
  /* no extra overrides: let .kw-badge provide the rectangle style */
}

/* Restore solid bottom border for the WhatsApp badge link, overriding .contact-list a style */
#contact .contact-list a.pref-badge {
  border-bottom-style: solid;
  border-bottom-color: rgba(255,255,255,0.14); /* Match .kw-badge border color */
}
[data-theme="light"] #contact .contact-list a.pref-badge {
  border-bottom-color: rgba(0,0,0,0.12); /* Match light theme .kw-badge */
}

/* The conflicting rule that removed the bottom border has been deleted. */
/* Prevent icon baseline from clipping the bottom */
.pref-badge i{
  line-height: 1;
  display: inline-block;
}

/* Hover look aligned with kw-badge/org-badge (no blue accent) */
/* Align hover with other rectangles (same as .kw-badge:hover) */
#contact .contact-list a.pref-badge:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22) !important; /* override styles.css */
  color: var(--text);
  transform: translateY(-1px);
}
[data-theme="light"] #contact .contact-list a.pref-badge:hover{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.20) !important; /* override styles.css */
}

/* No outline/blue contour for WhatsApp badge (hover/click/focus all neutral) – strongest specificity */
.section.container #contact .contact-list a.kw-badge.pref-badge:hover,
.section.container #contact .contact-list a.kw-badge.pref-badge:focus,
.section.container #contact .contact-list a.kw-badge.pref-badge:focus-visible,
.section.container #contact .contact-list a.kw-badge.pref-badge:active,
a.kw-badge.pref-badge:hover,
a.kw-badge.pref-badge:focus,
a.kw-badge.pref-badge:focus-visible,
a.kw-badge.pref-badge:active{
  outline: none !important;
  box-shadow: none !important;
  /* border-bottom: none !important; */ /* Removed to fix border */
  -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .section.container #contact .contact-list a.kw-badge.pref-badge:hover,
[data-theme="light"] .section.container #contact .contact-list a.kw-badge.pref-badge:focus,
[data-theme="light"] .section.container #contact .contact-list a.kw-badge.pref-badge:focus-visible,
[data-theme="light"] .section.container #contact .contact-list a.kw-badge.pref-badge:active,
[data-theme="light"] a.kw-badge.pref-badge:hover,
[data-theme="light"] a.kw-badge.pref-badge:focus,
[data-theme="light"] a.kw-badge.pref-badge:focus-visible,
[data-theme="light"] a.kw-badge.pref-badge:active{
  outline: none !important;
  box-shadow: none !important;
  /* border-bottom: none !important; */ /* Removed to fix border */
  -webkit-tap-highlight-color: transparent;
}

/* Ensure badge box never crops bottom edge */
.kw-badge.pref-badge{
  line-height: 1.2;       /* comme .kw-badge */
  padding: 4px 10px;      /* idem .kw-badge */
  box-sizing: border-box;
}
.pref-badge i{ line-height:1; display:inline-block; }

/* Languages in contact style: push level badge to right */
#languages .contact-list li .lang-level-badge{
  margin-left: auto;
  white-space: nowrap;
  min-width: 5ch;
  text-align: center;
}

/* Languages overrides: no outer box, only the level as a badge */
#languages .lang-item{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#languages .lang-item:hover{
  transform: none !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
#languages .lang-item .kw-badge{
  margin: 0;
}
#languages .lang-item .lang-name{
  font-weight: 600;
}

/* Languages: two-badge layout (name + level) */
#languages .lang-item{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#languages .lang-item .kw-badge{
  /* ensure compact spacing without extra right margin */
  margin: 0;
}

/* Languages — line layout: Name | Level (minimal, scoped) */
#languages .lang-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0;
  margin:0;
  list-style:none;
}

/* Looking for — vertical scroller under languages */
#languages .looking-for{
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
#languages .looking-for .lf-label{
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}
#languages .looking-for .lf-viewport{
  position: relative;
  height: 1.4em;           /* single line height */
  overflow: hidden;        /* mask outside words */
  display: inline-block;
}
#languages .looking-for .lf-track{
  display: grid;
  grid-auto-rows: 1.4em;
  animation: lf-scroll 10s linear infinite;
  will-change: transform;
}
#languages .looking-for .lf-word{
  color: var(--muted);
  white-space: nowrap;
}
@keyframes lf-scroll{
  0%   { transform: translateY(0); }
  12.5%{ transform: translateY(-1.4em); }
  25%  { transform: translateY(-2.8em); }
  37.5%{ transform: translateY(-4.2em); }
  50%  { transform: translateY(-5.6em); }
  62.5%{ transform: translateY(-7.0em); }
  75%  { transform: translateY(-8.4em); }
  87.5%{ transform: translateY(-9.8em); }
  100% { transform: translateY(0); }
}
[data-theme="light"] #languages .looking-for .lf-label{ color: var(--text); }
[data-theme="light"] #languages .looking-for .lf-word{ color: var(--muted); }
#languages .lang-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
#languages .lang-item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
}
[data-theme="light"] #languages .lang-item{
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}
[data-theme="light"] #languages .lang-item:hover{
  border-color: rgba(0,0,0,0.16);
  background: rgba(0,0,0,0.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
#languages .lang-name{
  font-weight:600;
  color: var(--text);
}
#languages .lang-sep{
  position:relative;
  width:10px;
  display:inline-flex;
  justify-content:center;
  color: var(--muted);
  opacity:.75;
}
#languages .lang-sep::before{
  content: "|";
}
#languages .lang-level{
  color: var(--muted);
}

/* Ensure Language card hover remains subtle (decoupled from Contact) */
.lang-card{
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.lang-card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
}
[data-theme="light"] .lang-card:hover{
  border-color: rgba(0,0,0,0.16);
  background: rgba(0,0,0,0.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* Hover isolation and title underline fix for Contact and Languages */
#contact .section-title,
#languages .section-title{
  text-decoration: none !important;
  border-bottom: none !important;
}
#contact .contact-card:hover .section-title,
#languages .contact-card:hover .section-title,
#languages .lang-card:hover .section-title{
  text-decoration: none !important;
  border-bottom: none !important;
}
/* Restrict hover effects to the card only, not the section title */
#contact .contact-card:hover h2.section-title,
#languages .lang-card:hover h2.section-title{
  text-decoration: none !important;
  border-bottom: none !important;
}
/* Keep link underline behavior scoped to links only */
#contact .contact-list a{
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
#contact .contact-list a:hover{
  border-bottom-color: currentColor;
}

/* Strong hover isolation: prevent any underline/border on section titles */
#contact .section-title,
#languages .section-title{
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
#contact:hover .section-title,
#languages:hover .section-title{
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
/* Also neutralize any link-like styles inside titles if present */
#contact .section-title a,
#languages .section-title a{
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Override: make underline trigger individual for Contact and Languages */
/* 1) Neutralize container hover for these two sections only */
.section:hover #contact .section-title::after,
.section:hover #languages .section-title::after{
  background: transparent !important;
}

/* 2) Reapply the same base effect, mais sur chaque section hover individuellement */
#contact:hover .section-title::after,
#languages:hover .section-title::after{
  background: var(--accent) !important;
}
/* 2b) Surcharger la neutralisation quand le conteneur .section est aussi hover */
.section:hover #contact:hover .section-title::after,
.section:hover #languages:hover .section-title::after{
  background: var(--accent) !important;
}

/* Normalize underline thickness across all sections (avoid subpixel thinning) */
.section-title::after{
  height: 2px !important;
  transform: translateZ(0); /* hint compositor for crisper 2px on some GPUs */
}



/* Languages layout — minimal grid and badges */
.lang-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:10px 12px;
}
.lang-badge{
  padding:4px 10px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  font-size:0.92rem;
  letter-spacing:.01em;
  white-space:nowrap;
}
[data-theme="light"] .lang-badge{
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}

/* Contact card — polish and subtle hover */
.contact-card{
  padding:18px 20px;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.contact-card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
}
[data-theme="light"] .contact-card{
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
}
[data-theme="light"] .contact-card:hover{
  border-color: rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* Prevent visual “bleed” between columns */
.connect-grid > *{ will-change: transform; }

/* Chips (skills in categories) — match kw-badge/org-badge, no blue accent */
.chip{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
}
.chip:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
  color: var(--text);
  transform: translateY(-1px);
}
[data-theme="light"] .chip{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .chip:hover{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.20);
}

/* Neutral focus — no accent blue */
.chip:focus-visible{
  outline: 2px solid rgba(255,255,255,0.18);
  outline-offset: 2px;
}
[data-theme="light"] .chip:focus-visible{
  outline: 2px solid rgba(0,0,0,0.18);
  outline-offset: 2px;
}

/* Override focus style for Skills to remove blue accent outline */
.skill-cat:focus-visible{
  outline: 2px solid rgba(255,255,255,0.18);
  outline-offset: 2px;
}
[data-theme="light"] .skill-cat:focus-visible{
  outline: 2px solid rgba(0,0,0,0.18);
  outline-offset: 2px;
}

/* Skill category card hover (subtle, theme-aware) */
.skill-cat{
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  border-radius:0;
  padding:12px;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
[data-theme="light"] .skill-cat{
  border-color: rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.skill-cat:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
[data-theme="light"] .skill-cat:hover{
  border-color: rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.04);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.skill-cat:hover .skill-icon{
  background: transparent;
  transform: none;
}
[data-theme="light"] .skill-cat:hover .skill-icon{
  background: transparent;
}

/* Keyword badges (Experience/Education) */
.kw-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.kw-badge{
  display:inline-block;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.05);
  border-radius:0;
  font-size:0.85rem;
  line-height:1.3;
  transition:background .18s ease, border-color .18s ease, transform .12s ease;
  user-select:none;
}
.kw-badge:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.22);
  transform: translateY(-1px);
}
[data-theme="light"] .kw-badge{
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .kw-badge:hover{
  border-color: rgba(0,0,0,0.20);
  background: rgba(0,0,0,0.06);
}

/* Meta right column layout and organization badge */
.meta-row .meta-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.org-badge{
  display:inline-block;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.05);
  border-radius:0;
  font-size:0.9rem;
  line-height:1.4;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
[data-theme="light"] .org-badge{
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
}
.org-badge:hover{
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
[data-theme="light"] .org-badge:hover{
  border-color: rgba(0,0,0,0.22);
  background: rgba(0,0,0,0.06);
}

.meta-date{ opacity:0.9; }

/* === Skill icons minimal (no background, no border) === */
.skill-head .skill-icon{
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  min-width:28px;
  border:none;
  background: transparent;
  color: var(--muted);
}
[data-theme="light"] .skill-head .skill-icon{
  border:none;
  background: transparent;
  color: var(--muted);
}
.skill-head .skill-icon i{
  display:block;
  font-size:16px;
  line-height:1;
  opacity:1 !important;
  color: currentColor;
  pointer-events:none;
}
/* No emphasis on hover for minimalism */
.skill-cat:hover .skill-icon{
  background: transparent;
  border-color: transparent;
  transform: none;
}
[data-theme="light"] .skill-cat:hover .skill-icon{
  background: transparent;
  border-color: transparent;
}

/* Projects carousel */
.proj-carousel{
  position: relative;            /* référence pour les flèches en absolute */
  display: block;                /* le viewport prend 100% de la largeur */
  overflow: visible;             /* on autorise les flèches à dépasser */
}

/* Project modal */
.proj-modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: none;
  transition: background .2s ease;
}
.proj-modal[aria-hidden="false"]{
  background: rgba(0,0,0,0.45);
  pointer-events: auto;
}
.proj-backdrop{
  position: absolute;
  inset: 0;
}
.proj-dialog{
  position: relative;
  width: min(820px, 92vw);
  max-height: 80vh;
  overflow: auto;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(25,25,35,0.98);
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease, background .2s ease, border-color .2s ease;
}
[data-theme="light"] .proj-dialog{
  background: rgba(255,255,255,0.98);
  border-color: rgba(0,0,0,0.14);
}
.proj-dialog.in{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.proj-close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: inherit;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
[data-theme="light"] .proj-close{
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
}
.proj-dialog h3{
  margin: 0 0 8px 0;
}
.proj-modal-text{
  margin: 0 0 12px 0;
  line-height: 1.6;
}
.proj-modal-tags{
  margin-top: 10px;
}
.proj-viewport{
  position: relative; /* référence pour la hauteur */
  overflow-x: hidden;   /* clippe à 3 cartes visibles */
  overflow-y: visible; /* permet le “bump” sans coupe */
  min-height: 460px; /* desktop par défaut */
  padding-top: 12px;   /* espace de sécurité pour le bump */
  box-sizing: border-box;
}
.proj-track{
  display: flex;
  align-items: stretch; /* toutes les cartes s'étirent sur la même hauteur */
  gap: 16px;
  will-change: transform;
  transform: translateX(0);
  transition: transform .4s ease;
}
/* clickable tiles for modal */
.proj-track > .tile{
  cursor: pointer;
}
.proj-track > .tile{
  flex: 0 0 calc((100% - 32px) / 3); /* 3 visibles, 2 gaps of 16px inside viewport */
  margin: 0; /* tiles already have padding and border */
  height: 100%;               /* même hauteur pour toutes */
  display: flex;              /* assurer une structure colonne */
  flex-direction: column;
  box-sizing: border-box;
}
@media (max-width: 980px){
  .proj-track > .tile{ flex-basis: calc((100% - 16px) / 2); } /* 2 visibles */
}
@media (max-width: 640px){
  .proj-track > .tile{ flex-basis: 100%; } /* 1 visible */
}

/* Arrows */
/* Flèches absolues à l’extérieur, centrées verticalement par rapport au viewport */
.proj-arrow{
  position: absolute;
  top: 35%;                        /* légèrement remontées */
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: inherit;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.proj-arrow:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
}
[data-theme="light"] .proj-arrow{
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
}
[data-theme="light"] .proj-arrow:hover{
  border-color: rgba(0,0,0,0.22);
  background: rgba(0,0,0,0.06);
}
.proj-arrow:disabled{
  opacity: .4;
  pointer-events: none;
}

/* Réactiver le “bump” sans coupe en haut (viewport autorise overflow-y) */
.proj-carousel .proj-track > .tile:hover{
  transform: translateY(-2px);
  z-index: 1; /* au-dessus des voisines */
}

:root{ --proj-arrow-offset: 76px; }
@media (max-width: 640px){
  :root{ --proj-arrow-offset: 44px; }
}
:root{ --proj-arrow-offset: 44px; }
@media (max-width: 640px){
  :root{ --proj-arrow-offset: 28px; }
}
/* Positionnement extérieur des flèches (par rapport à .proj-carousel) */
.proj-arrow.prev{ left: calc(var(--proj-arrow-offset) * -1); }
.proj-arrow.next{ right: calc(var(--proj-arrow-offset) * -1); }

/* Hauteur responsive du viewport */
@media (max-width: 980px){
  .proj-viewport{ min-height: 420px; }
}
@media (max-width: 640px){
  .proj-viewport{ min-height: 360px; }
}

/* Assurer que le contenu occupe correctement l'espace dans chaque carte */
.proj-track > .tile .tile-body{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.proj-track > .tile .tile-foot{
  margin-top: auto;
}

/* Normalize inner spacing so all project tiles have same visual height */
.proj-track > .tile h3{
  margin-top: 0;
}
.proj-track > .tile .tile-body > *:first-child{
  margin-top: 0;
}
.proj-track > .tile .tile-body > *:last-child{
  margin-bottom: 0;
}

/* WhatsApp badge — kill blue underline on hover and any outline, and fix bottom crop */
#contact .contact-list a.kw-badge.pref-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;        /* align with .kw-badge */
  line-height: 1.2;         /* same as .kw-badge */
  box-sizing: border-box;
}
#contact .contact-list a.kw-badge.pref-badge i{
  line-height: 1;
  display: inline-block;
}
/* Stronger than .contact-list a:hover */
#contact .contact-list a.kw-badge.pref-badge:hover{
  border-bottom-color: transparent !important;
}
/* Remove all outlines (dark + light) */
#contact .contact-list a.kw-badge.pref-badge:focus,
#contact .contact-list a.kw-badge.pref-badge:focus-visible,
#contact .contact-list a.kw-badge.pref-badge:active{
  outline: none !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}
[data-theme="light"] #contact .contact-list a.kw-badge.pref-badge:focus,
[data-theme="light"] #contact .contact-list a.kw-badge.pref-badge:focus-visible,
[data-theme="light"] #contact .contact-list a.kw-badge.pref-badge:active{
  outline: none !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}

/* Looking for (Uiverse) — scoped to Languages */
#languages .lf-card{
  /* keep rectangular look consistent with site cards */
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  padding: 12px 14px;
  border-radius: 0; /* site is rectangular */
  display: inline-block;
}
[data-theme="light"] #languages .lf-card{
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}
#languages .lf-card .loader{
  color: rgb(160,160,160);
  font-family: inherit;
  font-weight: 500;
  font-size: 18px;
  box-sizing: content-box;
  height: 28px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  border-radius: 0;
  gap: 8px;
}
#languages .lf-card .words{
  overflow: hidden;
  position: relative;
  height: 28px;
}
#languages .lf-card .words::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    transparent 10%,
    transparent 30%,
    transparent 70%,
    transparent 90%
  );
  z-index: 20;
}
#languages .lf-card .word{
  display: block;
  height: 28px;
  line-height: 28px;
  padding-left: 6px;
  color: var(--accent);
  animation: lf_spin_4991 4s infinite;
}
@keyframes lf_spin_4991{
  10% { transform: translateY(-102%); }
  25% { transform: translateY(-100%); }
  35% { transform: translateY(-202%); }
  50% { transform: translateY(-200%); }
  60% { transform: translateY(-302%); }
  75% { transform: translateY(-300%); }
  85% { transform: translateY(-402%); }
  100%{ transform: translateY(-400%); }
}

/* WhatsApp badge — EXACT same look as kw-badge, no blue underline on hover/focus, no crop */
#contact .contact-list li > a.kw-badge.pref-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;       /* same as .kw-badge */
  line-height: 1.2;        /* same as .kw-badge */
  box-sizing: border-box;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.14); /* Explicitly set full border */
}
[data-theme="light"] #contact .contact-list li > a.kw-badge.pref-badge {
    border: 1px solid rgba(0,0,0,0.12);
}
#contact .contact-list li > a.kw-badge.pref-badge:hover,
#contact .contact-list li > a.kw-badge.pref-badge:focus,
#contact .contact-list li > a.kw-badge.pref-badge:focus-visible,
#contact .contact-list li > a.kw-badge.pref-badge:active{
  /* border-bottom-color override removed to keep full border */
  outline: none !important;
  box-shadow: none !important;
}
#contact .contact-list li > a.kw-badge.pref-badge i{
  line-height: 1;          /* avoid bottom clipping */
  display: inline-block;
}

/* Compact “Looking for …” scroller, placed at bottom right of section */
.looking-for-min{
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* On mobile (1 column), put it back in normal flow */
@media (max-width: 900px){
  .looking-for-min{
    position: static;
    justify-content: flex-end;
    margin-top: 20px;
  }
}

.looking-for-min .lf-label{ font-weight: 600; color: var(--text); }
.looking-for-min .lf-suffix{ color: var(--text); } /* "contact me" in white */

.looking-for-min .lf-viewport{
  position: relative;
  height: 1.2em;
  overflow: hidden;
  display: inline-block;
}
.looking-for-min .lf-track{
  display: grid;
  grid-auto-rows: 1.2em;
  animation: lf_min_scroll 8s linear infinite;
  will-change: transform;
}
.looking-for-min .lf-word{
  color: var(--muted);
  white-space: nowrap;
}

@keyframes lf_min_scroll{
  0%   { transform: translateY(0); }
  12.5%{ transform: translateY(-1.2em); }
  25%  { transform: translateY(-2.4em); }
  37.5%{ transform: translateY(-3.6em); }
  50%  { transform: translateY(-4.8em); }
  62.5%{ transform: translateY(-6.0em); }
  75%  { transform: translateY(-7.2em); }
  87.5%{ transform: translateY(-8.4em); }
  100% { transform: translateY(0); }
}

[data-theme="light"] .looking-for-min .lf-label { color: var(--text); }
[data-theme="light"] .looking-for-min .lf-word { color: var(--muted); }
/* In light theme, "contact me" should be muted to match the words */
[data-theme="light"] .looking-for-min .lf-suffix { color: var(--muted); }

/* === Overrides to fix placement and WhatsApp border === */
section.container[aria-label="Connect"] .looking-for-min{
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  top: auto !important;     /* neutralise tout top imposé par .reveal ou autres */
  left: auto !important;    /* ancre depuis la droite */
  z-index: 3;               /* passe au-dessus du contenu de la section */
}
.looking-for-min .lf-suffix{
  color: var(--text) !important; /* “contact me” toujours blanc/texte */
}

/* WhatsApp preferred — garder le cadre complet sur hover/focus/active */
#contact .contact-list a.kw-badge.pref-badge:hover,
#contact .contact-list a.kw-badge.pref-badge:focus,
#contact .contact-list a.kw-badge.pref-badge:focus-visible,
#contact .contact-list a.kw-badge.pref-badge:active{
  text-decoration: none !important;      /* pas d’underline */
  border-bottom-color: inherit !important; /* ne masque jamais le bas du cadre */
  outline: none !important;
  box-shadow: none !important;
}

/* Hard remove: Looking for components (HTML removed; CSS neutralized) */
.looking-for-min,
#languages .looking-for,
#languages .lf-card,
.lf-viewport,
.lf-track,
.lf-word{
  display: none !important;
  animation: none !important;
}
@keyframes lf_min_scroll { from { transform:none; } to { transform:none; } }
@keyframes lf-scroll { from { transform:none; } to { transform:none; } }

/* === Minimal Vertical Navigation === */
.resume-nav {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 999;
}

.resume-nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-nav-link {
  display: block;
  padding: 8px 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  position: relative;
  text-align: right;
  opacity: 0.6;
}

.resume-nav-link:hover {
  color: var(--text);
  opacity: 1;
  transform: translateX(-4px);
}

.resume-nav-link.active {
  color: var(--accent);
  opacity: 1;
  font-weight: 500;
  transform: translateX(-6px);
}

.resume-nav-link.active::before {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 20px;
  background: var(--accent);
}

/* Responsive */
@media (max-width: 900px) {
  .resume-nav {
    display: none;
  }
}

/* === Strong overrides: Looking for — bottom-right in Connect === */
section.container[aria-label="Connect"]{
  position: relative !important;
  padding-bottom: 5rem !important; /* espace pour le bloc en bas */
}
section.container[aria-label="Connect"] .looking-for-min{
  position: absolute !important;
  right: 1rem !important;
  bottom: 1rem !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;   /* neutralise .reveal */
  translate: none !important;
  animation: none !important;
  opacity: 1 !important;
  z-index: 10 !important;
}
/* Si la classe .reveal est appliquée, neutraliser aussi */
.looking-for-min.reveal{
  transform: none !important;
  translate: none !important;
  animation: none !important;
  opacity: 1 !important;
}

/* “— contact me” toujours en texte visible */
.looking-for-min .lf-suffix{
  color: var(--text) !important;
}

/* === Download button readability === */
a[download], .btn-download, .download, .download-btn{
  color: #000 !important;      /* noir par défaut */
  font-weight: 600;
}

[data-theme="light"] .btn-download{
  color: #fff !important;      /* noir doux en light */
}
[data-theme="light"] .btn-download:hover,
[data-theme="light"] .btn.ghost,
[data-theme="light"] .btn.ghost.btn-download{
  color: #111 !important;
}


[data-theme="dark"] a[download],
[data-theme="dark"] .btn-download,
[data-theme="dark"] .download,
[data-theme="dark"] .download-btn{
  color: #111 !important;      /* lisible en dark */
}
[data-theme="dark"] .btn-download:hover,
[data-theme="dark"] .btn.ghost,
[data-theme="dark"] .btn.ghost.btn-download{
  color: #fff !important;
}

/* === Light theme polish: ombres nettes et cohérentes === */
:root{
  --shadow-sm-light: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md-light: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg-light: 0 12px 28px rgba(0,0,0,0.14);
  --border-light: rgba(0,0,0,0.10);
  --surface-light: rgba(0,0,0,0.02);
  --surface-light-hover: rgba(0,0,0,0.04);
}

/* Spacing: reduce gap between Projects and Connect only */
#projects.section.container{
  margin-bottom: 28px !important;
}
.section.container[aria-label="Connect"]{
  margin-top: 28px !important;
}
@media (max-width: 900px){
  #projects.section.container{ margin-bottom: 20px !important; }
  .section.container[aria-label="Connect"]{ margin-top: 20px !important; }
}

/* Light: force both buttons to black text */
[data-theme="light"] .btn,
[data-theme="light"] .btn-download{
  color: #fff !important;
}
[data-theme="light"] .btn-download:hover{
  color: #000 !important;
}
[data-theme="light"] .btn.ghost,
[data-theme="light"] .btn.ghost.btn-download{
  color: #000 !important;
}
/* Explicitly ensure the theme toggle text is black in light mode */
[data-theme="light"] #theme-toggle{
  color: #000 !important;
}
[data-theme="light"] .card,
[data-theme="light"] .tile,
[data-theme="light"] .contact-card,
[data-theme="light"] .lang-card,
[data-theme="light"] .skill-cat{
  border-color: var(--border-light) !important;
  background: var(--surface-light) !important;
  box-shadow: var(--shadow-sm-light) !important;
}
[data-theme="light"] .card:hover,
[data-theme="light"] .tile:hover,
[data-theme="light"] .contact-card:hover,
[data-theme="light"] .lang-card:hover,
[data-theme="light"] .skill-cat:hover{
  border-color: rgba(0,0,0,0.14) !important;
  background: var(--surface-light-hover) !important;
  box-shadow: var(--shadow-md-light) !important;
}
[data-theme="light"] .proj-dialog{ box-shadow: var(--shadow-lg-light) !important; }
[data-theme="light"] .proj-arrow{ box-shadow: var(--shadow-sm-light) !important; }
[data-theme="light"] .chip:hover,
[data-theme="light"] .kw-badge:hover,
[data-theme="light"] .org-badge:hover{
  box-shadow: var(--shadow-sm-light) !important;
}

/* === About photo — 3:4 ratio, integrated look === */
.about-photo{
  max-width: 360px;
  margin-left: auto;
  align-self: start;
}
@media (max-width: 900px){
  .about-photo{
    max-width: 320px;
    margin: 16px auto 0;
  }
}
.about-photo img{
  width: 100%;
  aspect-ratio: 3 / 4;     /* format 3:4 */
  object-fit: cover;       /* couvre sans déformation */
  display: block;
  border-radius: 0;     /* sharp corners for design consistency */
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.04)); /* fond de secours */
}

/* Dark theme border/shadow */
[data-theme="dark"] .about-photo img{
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
}
/* Light theme border/shadow */
[data-theme="light"] .about-photo img{
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: var(--shadow-md-light, 0 8px 18px rgba(0,0,0,0.12));
}

/* Hover/Focus: légère élévation */
.about-photo img:hover,
.about-photo img:focus{
  transform: translateY(-2px);
}
[data-theme="dark"] .about-photo img:hover,
[data-theme="dark"] .about-photo img:focus{
  box-shadow: 0 14px 36px rgba(0,0,0,0.45), 0 3px 10px rgba(0,0,0,0.28);
}
[data-theme="light"] .about-photo img:hover,
[data-theme="light"] .about-photo img:focus{
  box-shadow: var(--shadow-lg-light, 0 12px 28px rgba(0,0,0,0.14));
}

/* === About photo — rounded corners fix + ambient glow === */
/* Sharp corners (image + container), design consistency */
.about-photo{
  position: relative;
  border-radius: 0 !important;
  overflow: visible; /* on laisse le halo dépasser proprement */
}
.about-photo img{
  position: relative;
  z-index: 1;               /* au-dessus du halo */
  border-radius: 0 !important;
}

/* Halo coloré basé sur l'image (façon TV bias lighting) */
.about-photo::before{
  content: "";
  position: absolute;
  inset: -12%;
  background: url("assets/img/profile.jpg") center / cover no-repeat;
  filter: blur(28px) saturate(140%) brightness(110%);
  opacity: .42;             /* dark par défaut */
  transform: scale(1.04);
  border-radius: 0;      /* sharp corners for consistency */
  z-index: 0;
  pointer-events: none;
  will-change: filter, transform, opacity;
}
/* Ajuste l’intensité du halo selon le thème */
[data-theme="light"] .about-photo::before{
  opacity: .30;             /* un peu plus léger en light */
  filter: blur(26px) saturate(130%) brightness(115%);
}
/* Hover: léger boost du halo pour donner du relief */
.about-photo:hover::before{
  opacity: .50;
  transform: scale(1.06);
}
[data-theme="light"] .about-photo:hover::before{
  opacity: .38;
}

/* === Hero role (typewriter) === */
.hero-role{
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--text);
  /* légère accentuation pour se distinguer du paragraphe */
  opacity: .95;
}
#role-typer{
  white-space: nowrap;
}
#role-cursor{
  display: inline-block;
  margin-left: 2px;
  width: 1ch;
  color: var(--accent);
  animation: roleCursorBlink 1s step-end infinite;
}
@keyframes roleCursorBlink{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* === Hero design quote (animated) === */
.design-quote{
  margin: 6px 0 8px;
  font-size: 0.98rem; /* plus petit, minimal */
  font-weight: 400;   /* plus léger */
  line-height: 1.35;
  position: relative;
  letter-spacing: .01em; /* tracking discret */
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-style: normal;
}
/* Ensure quote text is visible and keeps spaces */
.design-quote #quote-text{
  color: var(--text);
  white-space: pre; /* préserver les espaces */
}
.design-quote .quote-mark{
  color: var(--accent);
  opacity: .85;
}
[data-theme="light"] .design-quote{
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
}
.design-quote::after{
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: -8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 35%, transparent);
  opacity: .25;
  transform: translateZ(0);
}

/* Per-letter reveal */
.qch{
  display: inline-block;
  opacity: 0;
  transform: translateY(2px);
  filter: blur(0.6px);
  animation: quoteIn .36s cubic-bezier(.22,.8,.26,1) forwards;
}
@keyframes quoteIn{
  to{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Light/dark micro-variation de teinte pour s’intégrer */
[data-theme="light"] .hero-role{
  color: #0f172a; /* noir profond lisible */
}
[data-theme="dark"] .hero-role{
  color: #e5e7eb; /* texte clair harmonisé */
}

/* === Minimal Footer === */
.site-footer {
  margin-top: 80px;
  padding: 40px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .site-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.footer-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.footer-tagline {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  opacity: 0.8;
}

.footer-social {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.footer-social a:hover {
  color: var(--accent);
  transform: translateY(-2px);
}

/* Couleurs spécifiques pour certaines plateformes */
.footer-social a[aria-label="Email"]:hover {
  color: #ea4335;
}

.footer-social a[aria-label="LinkedIn"]:hover {
  color: #0077b5;
}

.footer-social a[aria-label="GitHub"]:hover {
  color: #333;
}

.footer-social a[aria-label="WhatsApp"]:hover {
  color: #25d366;
}

.footer-social a[aria-label="WeChat"]:hover {
  color: #7bb32e;
}

.footer-social a[aria-label="CodinGame"]:hover {
  color: #f2bb13;
}

.footer-social a[aria-label="LeetCode"]:hover {
  color: #ffa116;
}

[data-theme="light"] .footer-social a[aria-label="GitHub"]:hover {
  color: #24292e;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .footer-bottom {
  border-top-color: rgba(0, 0, 0, 0.05);
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.7;
  margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
  .footer-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .footer-social {
    justify-content: center;
    gap: 10px;
  }
  
  .footer-social a {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}

/* === Education GPA badge (minimal, aesthetic) === */
.gpa-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 0.85rem;
  line-height: 1.2;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: inherit;
  white-space: nowrap;
  /* underline progressif au hover */
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(transparent,transparent);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 100%, 0 0;
  background-size: 0% 1px, 0 0;
  transition: background-size .22s ease, border-color .18s ease, background-color .18s ease, transform .12s ease;
}
.gpa-badge:hover{
  background-size: 100% 1px, 0 0;
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}
/* Align GPA badge inline with location */
.meta-line .gpa-badge{
  margin-left: 8px;
  vertical-align: baseline;
}
[data-theme="light"] .gpa-badge{
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
}
[data-theme="light"] .gpa-badge:hover{
  border-color: rgba(0,0,0,0.20);
  background: rgba(0,0,0,0.05);
}

/* Responsif: pile les éléments proprement sur mobile */
@media (max-width: 640px){
  .footer-grid{
    justify-content: center;
    text-align: center;
  }
  .footer-links{
    justify-content: center;
  }
}

/* === About — minimal progressive highlight and strengths layout === */
.about-strengths{
  margin-top: 10px;
  text-align: center; /* centre le titre inline-block */
}
.about-strengths .kw-list{
  margin-top: 8px;
  justify-content: center; /* centre les badges */
}
/* Titre centré et souligné */
.about-strengths-title{
  display: inline-block;
  margin: 0 auto 6px;
  text-align: center;
  font-weight: 500;
  font-size: 0.95rem; /* plus petit, minimal */
  /* underline progressif au hover */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size .25s ease;
}
.about-strengths-title:hover{
  background-size: 100% 2px;
}

/* About: texte justifié */
#about .about-text p{
  text-align: justify;
  text-justify: inter-word;
}

/* Minimal underline highlight that fills progressively */
.hilite{
  background-image: linear-gradient(#fff, #fff); /* ligne blanche */
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size .25s ease;
  padding-bottom: 1px;
}
.hilite:hover{
  background-size: 100% 2px; /* active au survol uniquement */
}

/* === Projects modal — aesthetic minimal polish overrides === */
.proj-modal[aria-hidden="false"]{
  -webkit-backdrop-filter: blur(6px) saturate(110%);
          backdrop-filter: blur(6px) saturate(110%);
}

.proj-dialog{
  border-radius: 0;
  border-width: 1px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.32), 0 3px 10px rgba(0,0,0,0.20);
}
[data-theme="light"] .proj-dialog{
  box-shadow: 0 16px 40px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.10);
}

.proj-dialog h3{
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 10px;
}

.proj-modal-text{
  margin-bottom: 14px;
  line-height: 1.65;
}
.proj-modal-text ul{
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 8px;
  list-style: disc outside;
}
.proj-modal-text li{
  opacity: .95;
}

.proj-modal-tags{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
[data-theme="light"] .proj-modal-tags{
  border-top-color: rgba(0,0,0,0.10);
}

.proj-close{
  border-radius: 0;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.proj-close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.24);
}
[data-theme="light"] .proj-close:hover{
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.18);
}

/* === Project badges (OSS/Private) under title + tile skills clamp === */
.tile .proj-badges{
  margin: 2px 0 0; /* rapprocher du titre */
  display: flex;
  align-items: center;
  gap: 4px;        /* écart plus serré */
}
.proj-badge{
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: .01em;
  user-select: none;
}
[data-theme="light"] .proj-badge{
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
}
.proj-badge.badge-oss{
  border-color: rgba(0,200,120,0.35);
  color: rgb(140, 255, 205);
}
[data-theme="light"] .proj-badge.badge-oss{
  border-color: rgba(0,140,80,0.35);
  color: #0f5132;
  background: rgba(0,140,80,0.06);
}
.proj-badge.badge-private{
  opacity: .85;
  color: var(--muted);
}
[data-theme="light"] .proj-badge.badge-private{
  color: #444;
}

/* Clamp skill chips on tiles to 2 lines; “[other]” indicator styled like a chip */
.proj-track > .tile .kw-list.clamp-2{
  /* clamp sans ellipsis */
  overflow: hidden;
  max-height: 70px; /* ~2 lignes de chips (légèrement plus haut pour éviter la coupe) */
}
.kw-badge.other{
  opacity: .85;
  font-style: italic;
}

/* Project tiles: add breathing room for skills and ellipsis spacing */
.proj-track > .tile .kw-list{
  margin-top: 8px;             /* espace ajusté (plus compact) */
}
.proj-track > .tile .kw-list .kw-badge{
  margin-bottom: 1px;          /* interligne encore plus compact */
  line-height: 1.12;           /* resserré pour éviter la coupe */
}
.proj-track > .tile .kw-list.clamp-2{
  padding-right: 0;            /* pas d’ellipsis, pas d’espace requis */
}

#lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  padding: 6px 32px 6px 34px; /* space for icons */
  line-height: 1;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.05s ease;
  /* Globe icon (left) + caret (right) */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23bbb' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 108 8A8 8 0 008 0zm3.35 3.35A6.47 6.47 0 0113.5 8c0 .58-.08 1.14-.23 1.67H10.8c-.21.88-.57 1.72-1.06 2.47-.3.47-.64.89-1.01 1.26A6.47 6.47 0 012.5 8c0-.58.08-1.14.23-1.67h2.47c.21-.88.57-1.72 1.06-2.47.3-.47.64-.89 1.01-1.26a6.47 6.47 0 013.08 1.35z'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, transparent 0%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23bbb' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7l4.5 5 4.5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 10px center, center, right 10px center;
  background-size: 16px 16px, auto, 12px 12px;
  outline: none;
}

#lang-select:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.06);
}

#lang-select:focus {
  border-color: rgba(99, 102, 241, 0.8); /* indigo-ish */
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

#lang-select:active {
  transform: translateY(1px);
}

@media (prefers-color-scheme: light) {
  #lang-select {
    border-color: rgba(0, 0, 0, 0.15);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 108 8A8 8 0 008 0zm3.35 3.35A6.47 6.47 0 0113.5 8c0 .58-.08 1.14-.23 1.67H10.8c-.21.88-.57 1.72-1.06 2.47-.3.47-.64.89-1.01 1.26A6.47 6.47 0 012.5 8c0-.58.08-1.14.23-1.67h2.47c.21-.88.57-1.72 1.06-2.47.3-.47.64-.89 1.01-1.26a6.47 6.47 0 013.08 1.35z'/%3E%3C/svg%3E"),
      linear-gradient(to bottom, transparent 0%, transparent 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7l4.5 5 4.5-5z'/%3E%3C/svg%3E");
  }
  #lang-select:hover {
    border-color: rgba(0, 0, 0, 0.3);
    background-color: rgba(0, 0, 0, 0.04);
  }
}