/* ============================================================
   Portfolio - Dark Dev Theme (main.css) - CLEAN BUILD
   - Dark developer palette (violet / cyan / green / orange)
   - Sticky header + dropdown
   - Hero full viewport (centered)
   - About: profile card with circular avatar + colored border
   - Bio: intro + highlight chips + 2 panels with vertical bullet lists
   - Timeline: chronological vertical line + dots per item
   ============================================================ */

/* ---------------------------
   Fonts
---------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ---------------------------
   Theme tokens
---------------------------- */
:root {
  --bg: #0b1220;
  --surface: #0f1b2e;
  --surface-2: #0c1729;
  --surface-3: #111f35;
  --border: #1d3250;

  --text: #e6eefc;
  --muted: #a9b7d0;
  --muted-2: #7f93b4;

  --accent: #7c5cff;
  /* violet */
  --accent-2: #22c55e;
  /* green */
  --accent-3: #06b6d4;
  /* cyan */
  --accent-4: #f97316;
  /* orange */

  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-soft: 0 8px 20px rgba(0, 0, 0, .22);
  --ring: 0 0 0 3px rgba(124, 92, 255, .35);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  --container: 1120px;
  --pad: 22px;

  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --t: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------
   Reset / Base
---------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 550px at 15% -10%, rgba(124, 92, 255, .22), transparent 60%),
    radial-gradient(900px 550px at 85% 0%, rgba(6, 182, 212, .18), transparent 62%),
    radial-gradient(900px 700px at 75% 120%, rgba(34, 197, 94, .14), transparent 60%),
    var(--bg);
  line-height: 1.55;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 10px;
}

::selection {
  background: rgba(124, 92, 255, .35);
}

/* ---------------------------
   Layout helpers
---------------------------- */
.main>section,
.site-footer {
  padding: 64px var(--pad);
}

.hero-container,
.about-content,
.timeline-content,
.training,
.skills,
.watch-content,
.footer-contact {
  max-width: var(--container);
  margin: 0 auto;
}

/* Headings */
.about-title,
.timeline-title,
.training-title,
.skills-title,
.watch-title,
.footer-title {
  font-size: clamp(22px, 2.3vw, 34px);
  letter-spacing: -0.02em;
}

.about-subtitle,
.skills-subtitle,
.watch-subtitle,
.training-intro {
  margin-top: 10px;
  color: var(--muted);
}

/* ---------------------------
   Header / Nav
---------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 14px var(--pad);
  backdrop-filter: blur(10px);
  background: rgba(11, 18, 32, .55);
  border-bottom: 1px solid rgba(29, 50, 80, .6);
}

.header-brand .brand-logo {
  font-weight: 700;
  letter-spacing: .4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 92, 255, .22), rgba(6, 182, 212, .12));
  border: 1px solid rgba(124, 92, 255, .25);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset;
}

.header-nav .nav-list {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  transition: background var(--t), color var(--t), transform var(--t);
}

.nav-link i {
  font-size: .95em;
  opacity: .9;
}

.nav-link:hover {
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  transform: translateY(-1px);
}

.nav-item.has-submenu>.nav-link {
  padding-right: 14px;
}

/* Dropdown */
.submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(15, 27, 46, .92);
  border: 1px solid rgba(29, 50, 80, .9);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}

.submenu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 18px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: rgba(15, 27, 46, .92);
  border-left: 1px solid rgba(29, 50, 80, .9);
  border-top: 1px solid rgba(29, 50, 80, .9);
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu-link {
  display: flex;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--muted);
  transition: background var(--t), color var(--t);
}

.submenu-link:hover {
  background: rgba(124, 92, 255, .14);
  color: var(--text);
}

/* Mobile nav wrap */
@media (max-width: 980px) {
  .header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .header-nav {
    width: 100%;
  }

  .header-nav .nav-list {
    flex-wrap: wrap;
    justify-content: center;
  }

  .submenu {
    left: 50%;
    transform: translate(-50%, -6px);
  }

  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu {
    transform: translate(-50%, 0);
  }

  .submenu::before {
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
}

/* ---------------------------
   Hero (FULL PAGE)
---------------------------- */
.main-hero {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding-top: 110px;
  /* sticky header space */
  padding-bottom: 80px;
}

.hero-container {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

.hero-badge .hero-badge-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-family: var(--mono);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(249, 115, 22, .25);
  background: linear-gradient(135deg, rgba(249, 115, 22, .12), rgba(124, 92, 255, .10));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset;
}

.hero-name {
  font-size: clamp(34px, 5vw, 80px);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.hero-text {
  color: var(--muted);
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 18px);
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------
   About
---------------------------- */
.about-header {
  max-width: var(--container);
  margin: 0 auto 24px auto;
}

.about-content {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
  /* IMPORTANT: avoid same-height cards */
}

.about-card {
  border-radius: var(--r-lg);
  border: 1px solid rgba(29, 50, 80, .9);
  background: rgba(15, 27, 46, .78);
  box-shadow: var(--shadow-soft);
  padding: 18px;
  height: fit-content;
}

.about-card--profile {
  position: sticky;
  top: 88px;
  align-self: start;
}

/* Avatar: circular with colored border (wrapper-based) */
.about-card--profile .profile-media {
  width: 176px;
  height: 176px;
  margin: 10px auto 10px auto;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-3), var(--accent-2));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-card--profile .profile-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, .03);
}

/* Profile info (as you requested) */
.profile-info {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  border-bottom: 1px dashed rgba(29, 50, 80, .9);
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.profile-name {
  font-size: 20px;
}

.profile-role {
  color: var(--muted);
  margin-top: 6px;
}

.profile-location {
  margin-top: 10px;
  color: var(--muted-2);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.profile-links {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.profile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(29, 50, 80, .7);
  color: var(--muted);
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}

.profile-link:hover {
  background: rgba(124, 92, 255, .12);
  border-color: rgba(124, 92, 255, .35);
  color: var(--text);
  transform: translateY(-1px);
}

.profile-link::after {
  content: "›";
  font-family: var(--mono);
  color: var(--muted-2);
  opacity: .9;
  margin-left: 12px;
  transform: translateY(-1px);
}

.profile-link:hover::after {
  color: var(--text);
}

.profile-link i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(29, 50, 80, .7);
}

.profile-cv-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(124, 92, 255, .95), rgba(6, 182, 212, .65));
  border: 1px solid rgba(124, 92, 255, .35);
  box-shadow: 0 12px 28px rgba(124, 92, 255, .18);
  transition: transform var(--t), filter var(--t);
}

.profile-cv-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Bio card */
.about-card--bio {
  display: flex;
  flex-direction: column;
  align-self: start;
}

.about-card--bio .bio-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.bio-title {
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.bio-title i {
  color: var(--accent-3);
  opacity: .95;
}

.bio-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Intro paragraph */
.bio-intro {
  color: var(--muted);
  line-height: 1.6;
  max-width: 90ch;
}

/* Highlight chips */
.bio-highlight {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, .28);
  background: rgba(124, 92, 255, .10);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset;
  white-space: nowrap;
}

/* Panels grid */
.bio-details {
  margin-top: 2px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Panel card */
.bio-panel {
  border-radius: 16px;
  border: 1px solid rgba(29, 50, 80, .75);
  background: rgba(255, 255, 255, .03);
  padding: 14px;
}

.bio-panel-title {
  font-size: 13px;
  font-family: var(--mono);
  color: var(--muted-2);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bio-panel-title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(34, 197, 94, .65);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .12);
}

.bio-panel:nth-child(2) .bio-panel-title::before {
  background: rgba(6, 182, 212, .65);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .12);
}

/* Bio list: COLUMN + DOTS (as you requested) */
.bio-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.bio-list-item {
  position: relative;
  padding: 10px 12px 10px 28px;
  border-radius: 14px;
  border: 1px solid rgba(29, 50, 80, .65);
  background: rgba(15, 27, 46, .55);
  color: var(--muted);
  transition: transform var(--t), border-color var(--t), background var(--t), color var(--t);
}

.bio-list-item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(34, 197, 94, .8);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .16);
}

.bio-panel:nth-child(2) .bio-list-item::before {
  background: rgba(6, 182, 212, .85);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .16);
}

.bio-list-item:hover {
  transform: translateY(-1px);
  color: var(--text);
  border-color: rgba(6, 182, 212, .32);
  background: rgba(6, 182, 212, .06);
}

/* If the HTML no longer contains .bio-more, this is harmless */
.bio-more {
  display: none;
}

@media (max-width: 980px) {
  .about-content {
    grid-template-columns: 1fr;
  }

  .about-card--profile {
    position: relative;
    top: 0;
  }

  .bio-details {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------
   Timeline (chronological line + dots)
---------------------------- */
.timeline-header {
  max-width: var(--container);
  margin: 0 auto 18px auto;
}

.timeline-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.timeline-section-title {
  color: var(--text);
  font-size: 18px;
  margin-bottom: 12px;
  font-family: var(--mono);
  letter-spacing: -0.01em;
}

/* Each column becomes a vertical timeline */
.timeline-section {
  position: relative;
  padding-left: 26px;
}

.timeline-section::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 44px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg,
      rgba(124, 92, 255, .55),
      rgba(6, 182, 212, .40),
      rgba(34, 197, 94, .32));
  opacity: .9;
}

.timeline-item {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid rgba(29, 50, 80, .9);
  background: rgba(15, 27, 46, .70);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  margin-bottom: 14px;
}

/* Dot + connector */
.timeline-item::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(11, 18, 32, 1);
  border: 2px solid rgba(6, 182, 212, .75);
  box-shadow: 0 0 0 4px rgba(6, 182, 212, .12), 0 10px 20px rgba(0, 0, 0, .25);
}

.timeline-item--school::before {
  border-color: rgba(124, 92, 255, .80);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, .14), 0 10px 20px rgba(0, 0, 0, .25);
}

.timeline-item--job::before {
  border-color: rgba(34, 197, 94, .80);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .14), 0 10px 20px rgba(0, 0, 0, .25);
}

.timeline-item::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 27px;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: rgba(29, 50, 80, .85);
}

.timeline-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.timeline-logo {
  width: 70px;
  height: 70px;
  border-radius: 14px;
  border: 1px solid rgba(29, 50, 80, .9);
  background: rgba(255, 255, 255, .03);
  object-fit: cover;
}

.timeline-role {
  font-size: 16px;
}

.timeline-organization,
.timeline-motion {
  color: var(--muted);
  margin: 4px;
}

.timeline-date,
.timeline-contract {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 13px;
}

.timeline-contract {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .08);
  color: #c9ffd7;
}

.timeline-type-item {
  padding: 2px;
  display: flex;
  align-items: center;
}

.timeline-motion {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.08);
  color: #e9d5ff;
}

.timeline-item-body {
  margin-top: 12px;
}

.timeline-description {
  color: var(--muted);
}

.timeline-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.timeline-skill {
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124, 92, 255, .12);
  border: 1px solid rgba(124, 92, 255, .25);
}

.timeline-missions {
  margin-top: 12px;
}

.timeline-missions-title {
  font-size: 13px;
  color: var(--muted-2);
  font-family: var(--mono);
  margin-bottom: 8px;
}

.timeline-missions-list {
  display: grid;
  gap: 8px;
}

.timeline-missions-list li {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(29, 50, 80, .7);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
}

@media (max-width: 980px) {
  .timeline-content {
    grid-template-columns: 1fr;
  }

  .timeline-section {
    padding-left: 22px;
  }

  .timeline-item::before {
    left: -18px;
  }

  .timeline-item::after {
    left: -7px;
    width: 12px;
  }
}

/* ---------------------------
   Training
---------------------------- */
.training-header {
  max-width: var(--container);
  margin: 0 auto 18px auto;
}

.training-section-title {
  font-size: 18px;
  margin: 18px 0 12px;
  font-family: var(--mono);
  color: var(--text);
}

.training-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

/* Organisation */
.training-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

/* Programme */
.training-card:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

/* Compétences communes */
.training-card.training-card--full {
  grid-column: 1 / 3;
  grid-row: 2;
}



.training-card,
.option-card {
  border-radius: var(--r-lg);
  border: 1px solid rgba(29, 50, 80, .9);
  background: rgba(15, 27, 46, .70);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.training-card-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-family: var(--mono);
}

.training-card-text {
  margin-top: 10px;
  color: var(--muted);
}

.training-skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.training-list {
  padding-left: 0;
  display: grid;
}

.training-list li {
  margin-left: 2rem;
}


.training-skill-title {
  font-size: 13px;
  font-family: var(--mono);
  color: var(--muted-2);
}

.training-skill-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.training-skill-item {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(29, 50, 80, .7);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
}

/* Options */
.training-option {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid rgba(29, 50, 80, .7);
}

.training-option-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.training-option-title {
  font-size: 18px;
  font-family: var(--mono);
}

.training-option-subtitle {
  color: var(--muted);
}

.training-option--sisr .training-option-title i {
  color: var(--accent-3);
}

.training-option--slam .training-option-title i {
  color: var(--accent-2);
}

.training-option-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.option-card-title {
  font-size: 14px;
  font-family: var(--mono);
  color: var(--text);
}

.option-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.option-item {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(29, 50, 80, .7);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
}

@media (max-width: 980px) {
  .training-cards {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tc1"
      "tc2"
      "tfull";
  }

  .training-skills-grid {
    grid-template-columns: 1fr;
  }

  .training-option-cards {
    grid-template-columns: 1fr;
  }

  .training-cards {
    display: flex;
    flex-direction: column;
  }

}

/* ===========================
   ACTIVITY
   =========================== */

.activity {
  max-width: var(--container);
  margin: 0 auto;
}

/* Header */
.activity-header {
  text-align: center;
  margin-bottom: 22px;
}

.activity-title {
  font-size: clamp(22px, 2.3vw, 34px);
  letter-spacing: -0.02em;
}

.activity-subtitle {
  margin-top: 10px;
  color: var(--muted);
}

/* Content */
.activity-content {
  display: grid;
  gap: 18px;
}

/* Section (Tableau / Réalisations plus tard) */
.activity-section {
  border-radius: var(--r-lg);
  border: 1px solid rgba(29, 50, 80, .9);
  background: rgba(15, 27, 46, .70);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}

.activity-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: var(--mono);
  margin-bottom: 14px;
  color: var(--text);
}

/* Card */
.activity-card {
  border-radius: 16px;
  border: 1px solid rgba(29, 50, 80, .7);
  background: rgba(255, 255, 255, .03);
  padding: 18px;
}

.activity-card-text {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.6;
}

/* Actions */
.activity-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Buttons */
.activity-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 54px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 13px;
  transition: transform var(--t), background var(--t), border-color var(--t);
}

/* Primary */
.activity-action-btn--primary {
  background: linear-gradient(135deg,
      rgba(124, 92, 255, .95),
      rgba(6, 182, 212, .75));
  border: 1px solid rgba(124, 92, 255, .45);
  box-shadow: 0 12px 26px rgba(124, 92, 255, .25);
  color: var(--text);
}

.activity-action-btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.activity-action-btn i {
  margin-right: 5px;
}

/* Secondary */
.activity-action-btn--secondary {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(29, 50, 80, .75);
  color: var(--muted);
}

.activity-action-btn--secondary:hover {
  transform: translateY(-2px);
  background: rgba(124, 92, 255, .12);
  border-color: rgba(124, 92, 255, .35);
  color: var(--text);
}

/* Responsive */
@media (max-width: 600px) {
  .activity-actions {
    flex-direction: column;
  }

  .activity-action-btn {
    width: 100%;
  }
}

/* ---------------------------
   Skills
---------------------------- */



/* Scrollbar visible */
.cert-grid.is-slider::-webkit-scrollbar {
  height: 8px;
}

.cert-grid.is-slider::-webkit-scrollbar-thumb {
  background: rgba(124, 92, 255, .4);
  border-radius: 999px;
}

.skills-header {
  max-width: var(--container);
  margin: 0 auto 18px auto;
}

.skills-categories {
  display: grid;
  gap: 18px;
}

.skills-category {
  border-radius: var(--r-lg);
  border: 1px solid rgba(29, 50, 80, .9);
  background: rgba(15, 27, 46, .70);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.skills-category-title {
  font-size: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  margin-bottom: 14px;
}

.skills-category-title i {
  color: var(--accent);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.skill-card {
  border-radius: 16px;
  border: 1px solid rgba(29, 50, 80, .7);
  background: rgba(255, 255, 255, .03);
  padding: 14px;
  transition: transform var(--t), border-color var(--t), background var(--t);
}

.skill-card:hover {
  transform: translateY(-2px);
  border-color: rgba(6, 182, 212, .35);
  background: rgba(6, 182, 212, .06);
}

.skill-card-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.skill-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: 1px solid rgba(29, 50, 80, .8);
  background: rgba(255, 255, 255, .03);
  object-fit: cover;
}

.skill-name {
  font-size: 14px;
  font-family: var(--mono);
}

.skill-description {
  margin-top: 10px;
  color: var(--muted);
}


@media (max-width: 980px) {
  .skills-grid {
    grid-template-columns: 1fr;
  }

  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .cert-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------
   Watch (Veille)
---------------------------- */
.watch-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto 18px auto;
}

.watch-section {
  border-radius: var(--r-lg);
  border: 1px solid rgba(29, 50, 80, .85);
  background: rgba(15, 27, 46, .55);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  margin-bottom: 14px;
}

.watch-section-title {
  font-size: 16px;
  font-family: var(--mono);
}

.watch-text {
  margin-top: 10px;
  color: var(--muted);
}

.watch-grid {
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

.watch-card {
  border-radius: var(--r-lg);
  border: 1px solid rgba(29, 50, 80, .9);
  background: rgba(15, 27, 46, .72);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--t), border-color var(--t);
}

.watch-card:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 197, 94, .35);
}

.watch-card-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(29, 50, 80, .9);
}

.watch-card-body {
  padding: 14px;
}

.watch-card-title {
  font-size: 14px;
  font-family: var(--mono);
}

.watch-card-desc {
  margin-top: 10px;
  color: var(--muted);
}

.watch-card-date {
  display: inline-block;
  margin-top: 12px;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 12px;
}

.watch-card-link {
  display: inline-flex;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(29, 50, 80, .8);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  transition: background var(--t), transform var(--t), border-color var(--t);
}

.watch-card-link:hover {
  transform: translateY(-1px);
  background: rgba(34, 197, 94, .10);
  border-color: rgba(34, 197, 94, .35);
}

.watch-card-link i {
  display: flex;
  margin: 5px;
}

/* ---------------------------
   Footer
---------------------------- */
.site-footer {
  padding-top: 56px;
  border-top: 1px solid rgba(29, 50, 80, .7);
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .01));
}

.footer-contact-header {
  margin-bottom: 12px;
}

.footer-contact-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.footer-contact-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(29, 50, 80, .85);
  background: rgba(15, 27, 46, .55);
  box-shadow: var(--shadow-soft);
}

.footer-contact-label {
  color: var(--muted);
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
}

.footer-contact-value,
.footer-contact-link {
  justify-self: end;
  color: var(--text);
}

.footer-contact-link {
  padding: 8px 14x;
  border-radius: 12px;
  border: 1px solid rgba(29, 50, 80, .8);
  background: rgba(255, 255, 255, .03);
  transition: background var(--t), border-color var(--t), transform var(--t);
}

.footer-contact-link:hover {
  transform: translateY(-1px);
  background: rgba(124, 92, 255, .12);
  border-color: rgba(124, 92, 255, .35);
}

.footer-bottom {
  max-width: var(--container);
  margin: 24px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(29, 50, 80, .6);
  display: flex;
  justify-content: space-around;
}

.footer-credit {
  color: var(--muted-2);
  font-family: var(--mono);
  padding: 10px 12px;
  border-radius: 12px;
  transition: background var(--t), color var(--t);
}

.footer-credit:hover {
  background: rgba(255, 255, 255, .03);
  color: var(--text);
}

.footer-credit-link {
  display: flex;
  align-items: center;
  color: var(--muted-2);
}

.footer-link-item {
  font-size: 1rem;
  padding: 10px;
}

.footer-link-item:hover {
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  border-radius: 5px;
}



/* ---------------------------
   Small quality-of-life
---------------------------- */
@media (max-width: 520px) {

  .main>section,
  .site-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-contact-item {
    grid-template-columns: 1fr;
  }

  .footer-contact-value,
  .footer-contact-link {
    justify-self: start;
  }

  .timeline-type-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Scrollbar (WebKit) */
@media (hover: hover) {
  ::-webkit-scrollbar {
    width: 12px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .02);
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(124, 92, 255, .22);
    border: 3px solid rgba(11, 18, 32, 1);
    border-radius: 999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, .25);
  }
}

/* ===========================
   Patch v7 (Training option grid wrapper)
   - Styles for your new HTML wrapper: .training-option-grid
   - Makes SISR and SLAM appear as 2 balanced columns
   - Inside each option: cards stacked (better readability in half-width)
   =========================== */

.training-option-grid {
  max-width: var(--container);
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

/* Remove extra top margin when inside the grid wrapper */
.training-option-grid>.training-option {
  margin-top: 0;
}

/* In half width, stack the 3 cards vertically */
.training-option-grid .training-option-cards {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Option cards: slightly more compact */
.training-option-grid .option-card {
  padding: 14px;
}

/* Make subtitle not stretch weirdly */
.training-option-grid .training-option-subtitle {
  max-width: none;
}

/* Responsive */
@media (max-width: 980px) {
  .training-option-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   Patch v8 (Training divider thicker)
   - Adds a thicker divider between "Présentation de la formation" and the options grid
   - Increases spacing (more breathing room) like your screenshot annotation "PLUS EPAIS"
   =========================== */

/* More space before the options block */
.training-option-grid {
  margin-top: 34px;
  /* was 22px */
  padding-top: 18px;
  position: relative;
}

/* Option headers: add a subtle separator under the title area */
.training-option-header {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(29, 50, 80, .65);
  margin-bottom: 12px;
}

/* Make the option title row slightly more prominent */
.training-option-title {
  font-size: 18px;
}

.training-option-subtitle {
  font-size: 13px;
}

/* ===========================
   Patch v9 (Vertical divider SISR / SLAM)
   - Thick vertical separator between SISR and SLAM
   - Visible, centered, and consistent with top divider
   =========================== */

/* Prepare grid for divider */
.training-option-grid {
  position: relative;
}

/* Space so cards don't touch divider */
.training-option-grid>.training-option {
  padding-left: 18px;
  padding-right: 18px;
}

/* Disable divider on mobile */
@media (max-width: 980px) {
  .training-option-grid::after {
    display: none;
  }
}

/* ===========================
   Patch v10 (Wider training options)
   - Make SISR / SLAM blocks wider (closer to full section width)
   - Reduce empty space on sides
   =========================== */

/* Allow training section to use more width */
.training {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Options grid wider */
.training-option-grid {
  max-width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  gap: 28px;
}

/* Each option card slightly wider internally */
.training-option {
  padding: 22px;
}

/* Cards inside options breathe more */
.training-option-grid .option-card {
  padding: 16px 18px;
}

/* ===========================
   Patch v11 (User requested changes)
   1) Center the main BTS SIO heading
   2) Separate training overview and option grid visually
   3) Ensure options have their own bordered container and never touch
   4) Skills: remove borders from category containers, use arrows on items
   5) Skills vs Certifications: visually separate blocks
   6) Certifications: horizontal scrollbar when many items
   7) Contact: redesigned footer contact (clean, modern)
   =========================== */

/* 1) Training main title centered */
.training-header {
  text-align: center;
}

.training-title {
  text-align: center;
}

.training-intro {
  margin-left: auto;
  margin-right: auto;
}

/* 2) Clear separation between overview and options */
.training-overview {
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(29, 50, 80, .6);
}

/* 3) Options: ensure they don't stick to each other + stronger outer border */
.training-option-grid {
  gap: 28px;
  /* never glued */
  padding-left: 12px;
  padding-right: 12px;
}

/* Each option is a bordered container (already), make it a bit clearer */
.training-option {
  border: 1px solid rgba(29, 50, 80, .95);
  background: rgba(15, 27, 46, .62);
}

/* Ensure the center divider doesn't overlap content */
.training-option-grid::after {
  width: 6px;
  opacity: .85;
}

/* 4) Skills: no border on category container, add arrows to skill cards */
.skills-category {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Keep the category title looking like a header row */
.skills-category-title {
  padding: 12px 14px;
}

/* Skill cards become "arrow items" (still cards but cleaner) */
.skill-card {
  border: 1px solid rgba(29, 50, 80, .65);
  background: rgba(255, 255, 255, .02);
}

.skill-card-header {
  position: relative;
  padding-right: 22px;
}

/* If you want even less "border feel" on items, uncomment:
.skill-card{ border-color: transparent; }
*/

/* 5) Separate Skills and Certifications blocks visually */
.skills-block--certs {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(29, 50, 80, .65);
}

/* Give certifications a slightly different backdrop to feel like a new section */
.skills-block--certs {
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .01));
  border-radius: 24px;
}


/* 7) Contact redesigned */
.footer-contact {
  max-width: var(--container);
  margin: 0 auto;
}

.footer-contact-header {
  text-align: center;
  margin-bottom: 14px;
}

.footer-contact-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

/* Contact tiles */
.footer-contact-item {
  grid-template-columns: 1fr;
  /* override old two-col layout */
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(29, 50, 80, .9);
  background: linear-gradient(135deg, rgba(124, 92, 255, .10), rgba(6, 182, 212, .06));
  box-shadow: var(--shadow-soft);
  transition: transform var(--t), border-color var(--t), background var(--t);
}

.footer-contact-item:hover {
  transform: translateY(-2px);
  border-color: rgba(6, 182, 212, .35);
  background: linear-gradient(135deg, rgba(6, 182, 212, .10), rgba(34, 197, 94, .06));
}

.footer-contact-label {
  justify-content: center;
  color: var(--muted-2);
  font-size: 12px;
  letter-spacing: .2px;
}

.footer-contact-value {
  justify-self: center;
  font-size: 16px;
  color: var(--text);
  font-weight: 700;
}

/* Make email look like a button */
.footer-contact-link {
  justify-self: center;
  width: fit-content;
  padding: 8px 50px;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, .35);
  background: rgba(124, 92, 255, .12);
  font-family: var(--mono);
}

.footer-contact-link:hover {
  background: rgba(6, 182, 212, .12);
  border-color: rgba(6, 182, 212, .35);
}

/* Footer bottom */
.footer-bottom {
  margin-top: 26px;
}

@media (max-width: 980px) {
  .footer-contact-list {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   Patch v15 (Exact requested adjustments only)
   1) training-option: rounded borders (visible) + keep clean
   2) option-card: remove "option-list" / li borders & pills (plain list)
   3) skills-block--skills: skills-category gets same border/background style as its title bar (global container)
   4) skills-block--certs: header better positioned + cert-grid centered (when <=4) while keeping the section panel look
   =========================== */

/* 1) TRAINING OPTION: stronger radius (ensure it wins) */
.training-option {
  border-radius: 22px !important;
  overflow: hidden;
  /* keep radius clean */
}

/* 2) OPTION LIST: remove borders/pills on li (and any background) */
.option-list {
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0;
}

.option-item {
  border: none !important;
  background: transparent !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
}

/* 3) SKILLS CATEGORY: same style as title bar, but for the whole container */
.skills-block--skills .skills-category {
  border-radius: 18px !important;
  border: 1px solid rgba(29, 50, 80, .75) !important;
  background: rgba(11, 18, 32, .55) !important;
  /* same feel as title bar */
  box-shadow: var(--shadow-soft) !important;
  padding: 14px !important;
}

/* Keep the title bar as-is, but ensure spacing is clean */
.skills-block--skills .skills-category-title {
  margin: 0 0 14px !important;
}


/* =========================================================
   MENU MOBILE - VERSION "NUKE" (réinitialise les styles conflictuels)
   Objectif : enlever les gros blocs/cadres qui cassent l'overlay.
   ========================================================= */

.menu-toggle {
  display: none;
  background: transparent !important;
  border: 0 !important;
  padding: 10px !important;
  border-radius: 12px;
  cursor: pointer;
  color: inherit;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle i {
  font-size: 20px;
}

@media (max-width: 900px) {
  .header {
    position: sticky;
    top: 0;
    z-index: 199999999;
  }

  /* place burger à droite si ton header est flex */
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* base: nav cachée */
  .header-nav {
    display: none !important;
  }

  body.nav-open {
    overflow: hidden !important;
  }

  /* OVERLAY NAV */
  body.nav-open .header-nav {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    padding: calc(64px + env(safe-area-inset-top)) 16px 20px !important;
    background: rgba(7, 12, 24, .88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  /* Nuke styles internes qui peuvent créer "gros rectangle" */
  body.nav-open .header-nav,
  body.nav-open .header-nav * {
    box-shadow: none !important;
    text-shadow: none !important;
  }




  /* Liste */
  body.nav-open .nav-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: min(520px, 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
  }

  body.nav-open .nav-item {
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
  }

  body.nav-open .nav-link {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    text-decoration: none !important;
  }

  /* Submenu accordéon */
  body.nav-open .nav-item.has-submenu {
    position: static !important;
  }

  body.nav-open .submenu {
    display: none !important;
    margin: 8px 0 0 !important;
    padding: 8px !important;
    list-style: none !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
  }

  body.nav-open .nav-item.has-submenu.submenu-open .submenu {
    display: block !important;
  }

  body.nav-open .submenu-link {
    display: block !important;
    text-align: center !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  body.nav-open .submenu-link:hover {
    background: rgba(255, 255, 255, .07) !important;
  }

  .header-nav .nav-item.has-submenu>.nav-link>i.fa-caret-down {
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-item.has-submenu:hover .submenu {
    display: none !important;
  }

  .nav-item.has-submenu .fa-caret-down {
    transition: transform .2s ease;
  }

  .nav-item.has-submenu.submenu-open .fa-caret-down {
    transform: rotate(180deg);
  }
}

/* ===========================
   MOBILE MENU (REWORK - FIX)
   =========================== */

/* Overlay injected by JS */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 9998;
}

/* Prevent background scroll when menu open */
body.nav-open {
  overflow: hidden;
}

/* Mobile-only behavior */
@media (max-width: 900px) {

  /* keep header layout stable */
  .header {
    position: sticky;
    top: 0;
    z-index: 10000;
  }

  /* hamburger button (if present in your HTML) */
  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(120, 160, 220, .18);
    background: rgba(12, 18, 30, .6);
    color: var(--text, #eaf2ff);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }

  .menu-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(120, 160, 220, .30);
  }

  /* OFF-CANVAS NAV PANEL (right) */
  .header-nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(86vw, 360px) !important;
    height: 100vh !important;
    padding: 92px 18px 18px !important;
    /* space for header */
    background: rgba(10, 16, 28, .92) !important;
    border-left: 1px solid rgba(120, 160, 220, .12) !important;
    transform: translateX(110%) !important;
    transition: transform .22s ease !important;
    z-index: 9999 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.nav-open .header-nav {
    transform: translateX(0) !important;
  }

  body.nav-open .nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* menu list vertical */
  .nav-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .nav-item {
    width: 100% !important;
    position: relative;
  }

  .nav-link {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 12px 12px !important;
    border-radius: 12px !important;
  }

  /* Submenus become collapsible blocks */
  .submenu {
    position: static !important;
    min-width: 0 !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(120, 160, 220, .10) !important;
    background: rgba(12, 18, 30, .55) !important;
    box-shadow: none !important;
    display: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .nav-item.submenu-open>.submenu {
    display: block !important;
  }

  .submenu-link {
    display: flex !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
  }

  /* remove desktop hover dropdown on mobile */
  .nav-item.has-submenu:hover .submenu {
    display: none !important;
  }

  /* caret rotate when open */
  .nav-item.has-submenu .fa-caret-down {
    transition: transform .18s ease;
  }

  .nav-item.submenu-open .fa-caret-down {
    transform: rotate(180deg);
  }
}


/* === Mobile menu: show caret icons & align === */
@media (max-width: 900px) {

  /* Keep normal links centered, but show caret on items with submenu */
  .header-nav .nav-item.has-submenu>.nav-link {
    justify-content: space-between;
    padding-right: 18px;
  }

  .header-nav .nav-item:not(.has-submenu)>.nav-link {
    justify-content: center;
  }

  /* Make sure Font Awesome carets render and are not clipped */
  .header-nav .nav-link {
    overflow: visible;
  }

  .header-nav .nav-link i {
    display: inline-block;
    margin-left: 10px;
    opacity: .9;
    font-size: .95em;
    line-height: 1;
    flex: 0 0 auto;
    /* In case a parent rule overrides font-family */
    font-weight: 900;
  }

  /* Rotate caret when submenu is open */
  .header-nav .nav-item.submenu-open>.nav-link i {
    transform: rotate(180deg);
  }
}





/* =========================================================
   PATCH (Responsive Header Icons)
   But : garder les <i> FontAwesome visibles en menu mobile
   - icône à gauche (ex: Accueil)
   - caret à droite (submenu)
   ========================================================= */
@media (max-width: 980px) {
  .header-nav .nav-link>i {
    display: inline-block !important;
    min-width: 22px;
    text-align: center;
    flex: 0 0 auto;
    line-height: 1;
  }
}

/* Off-canvas menu (JS breakpoint = 900px) */
@media (max-width: 900px) {

  /* Aligne tout à gauche (icône + texte), caret à droite */
  .header-nav .nav-link {
    justify-content: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
  }

  /* Icône à gauche (si présente) */
  .header-nav .nav-link>i:first-child {
    margin-left: 0 !important;
    margin-right: 2px !important;
  }

  /* Caret à droite uniquement pour les items avec submenu */
  .header-nav .nav-item.has-submenu>.nav-link>i.fa-caret-down {
    margin-left: auto !important;
    min-width: auto !important;
  }
}


/* =========================================================
   FINAL FIX (mobile nav)
   Objectifs :
   1) Forcer un overlay plein écran (et neutraliser la version "panel à droite")
   2) Garder les sous-menus en accordéon
   ========================================================= */
@media (max-width: 900px) {

  /* Overlay plein écran */
  body.nav-open .header-nav {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    transform: none !important;
    /* neutralise translateX */
    border-left: 0 !important;
    /* neutralise panel border */
    padding: calc(64px + env(safe-area-inset-top)) 16px 20px !important;
    background: rgba(7, 12, 24, .90) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    overflow: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
    z-index: 9999 !important;
  }

  /* Important : si une règle "panel" met .header-nav en fixed même quand fermé,
     on s'assure qu'il reste caché tant que nav-open n'est pas là */
  body:not(.nav-open) .header-nav {
    display: none !important;
  }

  /* Taille du bloc menu */
  body.nav-open .nav-list {
    width: min(520px, 100%) !important;
  }
}



/* =========================================================
   Font Awesome 7 friendly (no font forcing)
   ========================================================= */
.header-nav i,
.menu-toggle i {
  display: inline-block;
  line-height: 1;
}

/* ===========================
   OPTIONS BTS – RENDU SIMPLE (VALIDÉ MAQUETTE)
   =========================== */

.option-card {
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(29, 50, 80, .7);
  border-radius: 16px;
  padding: 16px;
}

.option-list {
  margin-top: 12px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
}

.training-option--sisr .option-item i {
  color: var(--accent-3);
  font-size: 12px;
}

.training-option--slam .option-item i {
  color: var(--accent-2);
  font-size: 12px;
}

/* ===========================
   COMPÉTENCES COMMUNES – BLOC COMPLET (cadre rouge sur ta capture)
   Objectif :
   - un grand "panel" à droite (training-card--full)
   - à l’intérieur : 3 sous-cartes alignées (les 3 colonnes)
   =========================== */

.training-card--full {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Les 3 colonnes dans le grand bloc */
.training-skills-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Sous-cartes (Support / Projets / Environnement) */
.training-skill-group {
  border-radius: 16px;
  border: 1px solid rgba(29, 50, 80, .75);
  background: rgba(255, 255, 255, .03);
  padding: 14px;
}

/* Titre de sous-carte */
.training-skill-title {
  margin: 0;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--muted-2);
}

/* Liste inside */
.training-skill-list {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

/* Items (on garde l’aspect "simple" et lisible) */
.training-skill-item {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(29, 50, 80, .65);
  background: rgba(11, 18, 32, .35);
  color: var(--muted);
}

/* Responsive : 3 colonnes -> 1 colonne */
@media (max-width: 980px) {
  .training-skills-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE NAV - PANEL RIGHT (USER REQUEST)
   Objectif :
   - Menu mobile dans un panneau à DROITE (zone rouge)
   - Le reste de l’écran (à gauche) = "vide" cliquable via .nav-overlay
   - Écrase le bloc "FINAL FIX (mobile nav)" plein écran
   ========================================================= */
@media (max-width: 900px) {

  /* Overlay (créé par main.js) : couvre tout l’écran et capte le clic */
  .nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 9998 !important;
  }

  body.nav-open .nav-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Menu = panneau à droite (pas plein écran) */
  body.nav-open .header-nav {
    display: block !important;

    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    width: min(86vw, 380px) !important;
    max-width: 380px !important;
    height: 100dvh !important;

    padding: calc(64px + env(safe-area-inset-top)) 16px 20px !important;

    background: rgba(7, 12, 24, .92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    border-left: 1px solid rgba(255, 255, 255, .08) !important;

    overflow: auto !important;
    z-index: 9999 !important;

    /* Neutralise les règles "plein écran" existantes */
    transform: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Quand fermé : nav cachée */
  body:not(.nav-open) .header-nav {
    display: none !important;
  }

  /* Menu vertical (garde ton design actuel) */
  body.nav-open .header-nav .nav-list {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Liens : texte à gauche + caret à droite */
  body.nav-open .header-nav .nav-link {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body.nav-open .header-nav .nav-item.has-submenu>.nav-link>i.fa-caret-down,
  body.nav-open .header-nav .nav-item.has-submenu>.nav-link>i.fa-chevron-down {
    margin-left: auto !important;
  }
}

/* =========================================================
   WATCH (Veille) - REWORK (v2)
   - KPI cards
   - Split layout (definition / subject)
   - Better lists, chips, tags
   - Toolbar filters (UI only)
   ========================================================= */

.watch-content {
  max-width: var(--container);
  margin: 0 auto;
}

.watch-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.watch-kpi {
  border-radius: 16px;
  border: 1px solid rgba(29, 50, 80, .85);
  background: rgba(15, 27, 46, .55);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  display: grid;
  gap: 8px;
}

.watch-kpi-label {
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.watch-kpi-value {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.watch-split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 14px;
  margin-bottom: 14px;
}

.watch-panel {
  border-radius: var(--r-lg);
  border: 1px solid rgba(29, 50, 80, .85);
  background: rgba(15, 27, 46, .55);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.watch-panel-title {
  font-size: 16px;
  font-family: var(--mono);
}

.watch-mini-title {
  margin-top: 14px;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--muted-2);
}

.watch-chips {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.watch-chip {
  font-size: 12px;
  font-family: var(--mono);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, .25);
  background: rgba(124, 92, 255, .10);
  color: var(--text);
}

.watch-list-block {
  margin-top: 10px;
}

.watch-list {
  margin-top: 10px;
  display: grid;
  gap: 10px;
  list-style: none;
  padding-left: 0;
}

.watch-list li {
  position: relative;
  padding: 10px 12px 10px 30px;
  border-radius: 14px;
  border: 1px solid rgba(29, 50, 80, .65);
  background: rgba(11, 18, 32, .35);
  color: var(--muted);
}

.watch-list li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(6, 182, 212, .85);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .14);
}

.watch-toolbar {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.watch-filter-label {
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

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

.watch-filter {
  border: 1px solid rgba(29, 50, 80, .75);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t), color var(--t);
}

.watch-filter:hover {
  transform: translateY(-1px);
  background: rgba(6, 182, 212, .08);
  border-color: rgba(6, 182, 212, .30);
  color: var(--text);
}

.watch-filter.is-active {
  background: rgba(124, 92, 255, .16);
  border-color: rgba(124, 92, 255, .35);
  color: var(--text);
}

.watch-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.watch-tag {
  font-size: 11px;
  font-family: var(--mono);
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, .25);
  background: rgba(34, 197, 94, .10);
  color: var(--text);
}

.watch-card-foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.watch-note {
  margin-top: 14px;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 12px;
}

.watch-steps {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.watch-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(29, 50, 80, .65);
  background: rgba(11, 18, 32, .35);
}

.watch-step-n {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  background: linear-gradient(135deg, rgba(124, 92, 255, .22), rgba(6, 182, 212, .12));
  border: 1px solid rgba(124, 92, 255, .25);
}

.watch-step-body .watch-mini-title {
  margin-top: 0;
}

@media (max-width: 980px) {
  .watch-kpis {
    grid-template-columns: 1fr;
  }

  .watch-split {
    grid-template-columns: 1fr;
  }
}


/* ===============================
   WATCH - KPI LEFT COLUMN FIX
   =============================== */

.watch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 980px) {
  .watch-grid {
    grid-template-columns: none;
  }
}

.watch-kpis {
  grid-column: 1 / 2;
  /* Force into left column */
  display: grid;
  grid-template-columns: 1fr;
  /* Stack vertically */
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-card {
  width: 100%;
}


/* ===============================
   WATCH - KPI LAYOUT (SUJET + PÉRIODE SUR 1 LIGNE, OUTILS EN DESSOUS)
   =============================== */

.watch-kpis {
  grid-column: 1 / 2;
  /* dans la colonne gauche */
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2 cartes côte à côte */
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.watch-kpis .kpi-card:nth-child(3) {
  grid-column: 1 / -1;
  /* OUTILS sur toute la largeur sous les 2 autres */
}

/* Mobile : on empile tout */
@media (max-width: 720px) {
  .watch-kpis {
    grid-template-columns: 1fr;
  }

  .watch-kpis .kpi-card:nth-child(3) {
    grid-column: auto;
  }
}



/* =====================================================
   WATCH SECTION – CLEAN SPACING UPDATE
   Objectif : plus aéré mais compact (propre visuellement)
   ===================================================== */

/* espace général entre les blocs */
.watch-content {
  gap: 24px !important;
}

/* colonne gauche */
.watch-left {
  gap: 20px !important;
}

/* KPI cards */
.watch-kpi {
  margin-bottom: 6px;
  padding: 18px 20px !important;
}

/* panneau définition */
.watch-panel {
  padding: 22px 24px !important;
}

/* panneau droite */
.watch-panel:last-child {
  padding: 24px 26px !important;
}

/* espace entre les éléments internes */
.watch-panel p {
  margin-bottom: 14px;
}

.watch-panel ul {
  margin-top: 10px;
}

.watch-panel li {
  margin-bottom: 10px;
}

/* amélioration visuelle légère */
.watch-kpi,
.watch-panel {
  border-radius: 14px !important;
}

/* responsive propre */
@media (max-width: 980px) {
  .watch-content {
    gap: 18px !important;
  }
}



/* =====================================================
   WATCH – "Pourquoi ce sujet ?" + "Axes de recherche" en 2 colonnes
   ===================================================== */
.watch-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.watch-two-cols h4 {
  margin-top: 0 !important;
}

.watch-two-cols .watch-col {
  display: grid;
  gap: 10px;
  align-content: start;
}

/* En mobile, on repasse en 1 colonne */
@media (max-width: 900px) {
  .watch-two-cols {
    grid-template-columns: 1fr;
  }
}


/* =========================
   WATCH - Articles filters
   ========================= */
.watch-card.is-hidden {
  display: none !important;
}

.watch-empty {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed rgba(29, 50, 80, .75);
  background: rgba(11, 18, 32, .25);
  color: var(--muted-2);
  font-family: var(--mono);
}




/* =====================================================
   PROJECTS HEADER REWORK + 4 COLUMN GRID (PATCH)
   ===================================================== */

/* HEADER PROPRE */
.projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.projects-title {
  font-size: 26px;
  font-family: var(--mono);
  letter-spacing: -0.01em;
}

/* filtres style pill */
.projects-filters {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(29, 50, 80, .75);
  background: rgba(255, 255, 255, .02);
}

.projects-filter {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t), color var(--t);
}

.project-card.is-hidden {
  display: none !important;
}

.projects-filter:hover {
  transform: translateY(-1px);
  background: rgba(6, 182, 212, .08);
  color: var(--text);
}

.projects-filter.is-active {
  background: rgba(124, 92, 255, .18);
  border-color: rgba(124, 92, 255, .35);
  color: var(--text);
}

/* GRID 4 COLONNES */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Responsive */
@media (max-width: 1200px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 980px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}




/* =====================================================
   PROJECTS (RÉALISATIONS) – FULL COMPONENT (v2)
   Fix: cards + media + button styles + 4-col grid
   ===================================================== */

.projects {
  max-width: var(--container);
  margin: 0 auto;
}

/* Header */
.projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.projects-title {
  font-size: clamp(22px, 2.3vw, 30px);
  font-family: var(--mono);
  letter-spacing: -0.02em;
}

/* Filters pill container */
.projects-filters {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(29, 50, 80, .75);
  background: rgba(255, 255, 255, .02);
}

.projects-filter {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t), color var(--t);
}

.projects-filter:hover {
  transform: translateY(-1px);
  background: rgba(6, 182, 212, .08);
  color: var(--text);
}

.projects-filter.is-active {
  background: rgba(124, 92, 255, .18);
  border-color: rgba(124, 92, 255, .35);
  color: var(--text);
}

/* Grid (4 cards horizontal) */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Card */
.project-card {
  border-radius: 20px;
  border: 1px solid rgba(29, 50, 80, .85);
  background: rgba(15, 27, 46, .65);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform var(--t), border-color var(--t);
}

.project-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 92, 255, .35);
}

/* Media */
.project-card-media {
  position: relative;
  border-bottom: 1px solid rgba(29, 50, 80, .85);
  background: rgba(255, 255, 255, .02);
}

.project-card-media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Badge icon */
.project-badge {
  position: absolute;
  top: 14px;
  left: 14px;

  width: 42px;
  height: 42px;
  border-radius: 50%;

  display: grid;
  place-items: center;

  background: rgba(15, 27, 46, .75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(124, 92, 255, .35);

  color: var(--text);
  font-size: 14px;

  box-shadow:
    0 0 0 4px rgba(124, 92, 255, .08),
    0 8px 20px rgba(0, 0, 0, .35);

  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.project-card:hover .project-badge {
  transform: scale(1.08);
  border-color: rgba(6, 182, 212, .45);
  box-shadow:
    0 0 0 6px rgba(6, 182, 212, .12),
    0 10px 24px rgba(0, 0, 0, .4);
}

.project-card-body {
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.project-card-title {
  font-size: 14px;
  font-family: var(--mono);
}

.project-card-desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* CTA button */
.project-card-btn {
  width: fit-content;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(29, 50, 80, .75);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  transition: transform var(--t), background var(--t), border-color var(--t), color var(--t);
}

.project-card-btn:hover {
  transform: translateY(-2px);
  background: rgba(34, 197, 94, .10);
  border-color: rgba(34, 197, 94, .35);
}

/* Responsive */
@media (max-width: 1200px) {
  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .projects-filters {
    width: 100%;
    justify-content: space-between;
  }

  .projects-filter {
    flex: 1;
    text-align: center;
  }
}


/* =====================================================
   CERTIFICATIONS – FINAL OVERRIDE (SCROLLBAR FIX)
   Objectif : si .cert-grid a la classe .is-slider -> slider horizontal + scrollbar visible
   NOTE : ce bloc est placé en FIN de fichier pour écraser les règles conflictuelles.
   ===================================================== */

/* Ne pas couper la scrollbar via le parent */
.skills-section--certifications,
.skills-section.skills-section--certifications,
#certifications {
  overflow: visible !important;
}

/* Slider uniquement quand .is-slider est présent */
.skills-section--certifications .cert-grid.is-slider,
.cert-grid.is-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 8px 6px 18px !important;
  /* espace pour la scrollbar */
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

/* Cartes : largeur fixe pour forcer l'overflow (donc la scrollbar) */
.skills-section--certifications .cert-grid.is-slider .cert-card,
.cert-grid.is-slider .cert-card {
  flex: 0 0 260px !important;
  width: 260px !important;
  min-width: 260px !important;
  scroll-snap-align: start !important;
}

/* Scrollbar (WebKit) */
.skills-section--certifications .cert-grid.is-slider::-webkit-scrollbar,
.cert-grid.is-slider::-webkit-scrollbar {
  height: 10px !important;
}

.skills-section--certifications .cert-grid.is-slider::-webkit-scrollbar-track,
.cert-grid.is-slider::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .04) !important;
  border-radius: 999px !important;
}

.skills-section--certifications .cert-grid.is-slider::-webkit-scrollbar-thumb,
.cert-grid.is-slider::-webkit-scrollbar-thumb {
  background: rgba(124, 92, 255, .45) !important;
  border: 2px solid rgba(11, 18, 32, 1) !important;
  border-radius: 999px !important;
}

.skills-section--certifications .cert-grid.is-slider::-webkit-scrollbar-thumb:hover,
.cert-grid.is-slider::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, .45) !important;
}

/* Scrollbar (Firefox) */
.skills-section--certifications .cert-grid.is-slider,
.cert-grid.is-slider {
  scrollbar-width: auto !important;
  scrollbar-color: rgba(124, 92, 255, .55) rgba(255, 255, 255, .06) !important;
}



/* =====================================================
   CERTIFICATIONS – CLEAN SIZE FIXED
   - Same width as other sections (var(--container))
   - Centered block
   - Horizontal flex
   - Fixed card width
   ===================================================== */

.skills-block--certs {
  max-width: var(--container);
  margin: 60px auto 0 auto;
  padding: 32px 24px;

  border-radius: 22px;
  border: 1px solid rgba(29, 50, 80, .65);
  background: rgba(15, 27, 46, .70);
}

/* Horizontal container */
.skills-block--certs .cert-grid {
  width: 100%;
  display: flex;
  gap: 18px;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 8px 6px 18px;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: auto;
  scrollbar-color: rgba(124, 92, 255, .5) rgba(255, 255, 255, .06);
}

/* Fixed card width */
.skills-block--certs .cert-card {
  flex: 0 0 240px;
  min-width: 240px;

  display: flex;
  flex-direction: column;
  align-items: center;

  border-radius: 18px;
  border: 1px solid rgba(29, 50, 80, .85);
  background: rgba(15, 27, 46, .70);
  box-shadow: var(--shadow-soft);
  padding: 18px;
  text-align: center;

  scroll-snap-align: start;
  transition: transform var(--t), border-color var(--t);
}

.skills-block--certs .cert-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 92, 255, .35);
}

/* Scrollbar */
.skills-block--certs .cert-grid::-webkit-scrollbar {
  height: 10px;
}

.skills-block--certs .cert-grid::-webkit-scrollbar-thumb {
  background: rgba(124, 92, 255, .4);
  border-radius: 999px;
}

.cert-badge {
  max-width: 50%;
}

.cert-date,
.cert-name {
  font-size: 14px;
}


/* =====================================================
   CERTIFICATIONS – SINGLE SYSTEM (FINAL)
   - Un seul système (supprime conflits)
   - Toujours en flex horizontal
   - Cartes largeur fixe (overflow => scroll)
   - Scrollbar visible + stylée
   - Compatible HTML:
       - section#certifications.skills-block--certs (actuel)
       - section.skills-section--certifications (ancien)
       - items: .cert-card OU <a class="cert-link"> .cert-card
   ===================================================== */

/* Panel sizing (même largeur que le reste) */
#certifications.skills-block--certs,
.skills-section--certifications {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

/* Ne pas couper le scroll via overflow hidden */
#certifications,
.skills-section--certifications {
  overflow: visible;
}

/* Container horizontal */
#certifications .cert-grid,
.skills-section--certifications .cert-grid {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 8px 6px 18px;
  /* espace pour scrollbar */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: auto;
  /* Firefox */
  scrollbar-color: rgba(124, 92, 255, .55) rgba(255, 255, 255, .06);
}

/* Wrapper possible */
#certifications .cert-grid>.cert-link,
.skills-section--certifications .cert-grid>.cert-link {
  display: block;
  color: inherit;
  text-decoration: none;

  flex: 0 0 260px;
  width: 260px;
  min-width: 260px;

  scroll-snap-align: start;
}

/* Enfant direct possible */
#certifications .cert-grid>.cert-card,
.skills-section--certifications .cert-grid>.cert-card {
  flex: 0 0 260px;
  width: 260px;
  min-width: 260px;

  scroll-snap-align: start;
}

/* Si wrapper, la carte prend toute la largeur */
#certifications .cert-grid>.cert-link .cert-card,
.skills-section--certifications .cert-grid>.cert-link .cert-card {
  width: 100%;
}

/* Scrollbar (WebKit) */
#certifications .cert-grid::-webkit-scrollbar,
.skills-section--certifications .cert-grid::-webkit-scrollbar {
  height: 10px;
}

#certifications .cert-grid::-webkit-scrollbar-track,
.skills-section--certifications .cert-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .04);
  border-radius: 999px;
}

#certifications .cert-grid::-webkit-scrollbar-thumb,
.skills-section--certifications .cert-grid::-webkit-scrollbar-thumb {
  background: rgba(124, 92, 255, .45);
  border: 2px solid rgba(11, 18, 32, 1);
  border-radius: 999px;
}

#certifications .cert-grid::-webkit-scrollbar-thumb:hover,
.skills-section--certifications .cert-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, .45);
}

/* ===============================
   CERTIFICATIONS – HEADER STYLE
   =============================== */

#certifications .skills-header,
.skills-section--certifications .skills-section-head {
  text-align: center;
  margin-bottom: 26px;
}

#certifications .skills-title,
.skills-section--certifications .skills-title {
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

#certifications .skills-subtitle,
.skills-section--certifications .skills-subtitle {
  max-width: 620px;
  margin: 0 auto;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}