/* ============================================================
   mtc-portfolio — Page Parcours (CV vivant)
   Timeline serpentante qui se dessine au scroll + accordéon.
   S'appuie sur style.css commun (tokens, .container, .grad,
   .btn-cta, .reveal). Tout est scopé .cv-* (zéro collision).
   ============================================================ */

/* ── Fond coloré spécifique au Parcours (test Liquid Glass) ─────
   Dégradé profond + blobs colorés vifs et flous, animés. Recouvre le fond
   global clair sur cette page pour que le verre liquide réfracte du couleur.
   Le texte hero passe donc sur fond sombre → on l'éclaircit (voir plus bas). */
.cv-bg {
  position: fixed;
  inset: 0;
  z-index: -1;                 /* au-dessus du fond global clair, sous le contenu */
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, #2a1457 0%, #160a2e 45%, #0c0820 100%);
}
.cv-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.85;
  will-change: transform;
}
.cv-blob-1 { width: 42vw; height: 42vw; left: -6vw;  top: 4vh;
  background: radial-gradient(circle at 35% 35%, #ff7a3c, #d6224e 70%);
  animation: cv-blob-a 26s ease-in-out infinite alternate; }
.cv-blob-2 { width: 40vw; height: 40vw; right: -8vw; top: -6vh;
  background: radial-gradient(circle at 50% 50%, #c026d3, #7c3aed 72%);
  animation: cv-blob-b 30s ease-in-out infinite alternate; }
.cv-blob-3 { width: 38vw; height: 38vw; left: 14vw;  bottom: -10vh;
  background: radial-gradient(circle at 50% 50%, #2563eb, #1e3a8a 72%);
  animation: cv-blob-c 28s ease-in-out infinite alternate; }
.cv-blob-4 { width: 34vw; height: 34vw; right: 4vw;  bottom: -6vh;
  background: radial-gradient(circle at 50% 50%, #06b6d4, #0e7490 72%);
  animation: cv-blob-a 32s ease-in-out infinite alternate-reverse; }
.cv-blob-5 { width: 30vw; height: 30vw; left: 38vw;  top: 30vh;
  background: radial-gradient(circle at 50% 50%, #f59e0b, #ec4899 72%);
  animation: cv-blob-b 24s ease-in-out infinite alternate-reverse; }
@keyframes cv-blob-a { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(8vw,6vh) scale(1.15)} }
@keyframes cv-blob-b { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-7vw,8vh) scale(1.1)} }
@keyframes cv-blob-c { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(6vw,-7vh) scale(1.12)} }
@media (prefers-reduced-motion: reduce) {
  .cv-blob { animation: none; }
}

/* ── Hero parcours ──────────────────────────────────────────── */
.cv-hero { padding: 3.5rem 0 1.5rem; position: relative; }
.cv-hero-inner {
  display: flex;
  align-items: flex-start;
  gap: 2.75rem;
}
.cv-hero-aside {
  flex-shrink: 0;
  width: 230px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.1rem;
}
.cv-hero-main { flex: 1; min-width: 0; }

/* Photo ronde (reprise de l'accueil — home.css non chargé ici) */
.cv-hero .hero-photo {
  width: 230px;
  height: 230px;
  position: relative;
  align-self: center;
}
.cv-hero .hero-photo::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,24,255,0.35) 0%, rgba(0,216,162,0.18) 55%, transparent 72%);
  filter: blur(6px);
  z-index: -1;
  animation: cv-photo-halo 6s ease-in-out infinite alternate;
}
@keyframes cv-photo-halo {
  0%   { transform: scale(1);    opacity: 0.85; }
  100% { transform: scale(1.06); opacity: 1; }
}
.cv-hero .hero-photo img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 12px 30px rgba(27,4,66,0.30));
}

/* Badge "Parcours" (home.css non chargé ici) → style verre clair sur fond sombre */
.cv-hero .hero-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.cv-hero-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.4vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;                 /* fond Parcours sombre → texte clair */
  text-shadow: 0 2px 18px rgba(0,0,0,0.3);
  margin: 0.4rem 0 1rem;
}
.cv-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: 1.6rem;
}

/* ── Chiffres clés animés ───────────────────────────────────── */
.cv-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem 2.4rem;
}
.cv-stat { display: flex; flex-direction: column; }
.cv-stat-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1;
  background: linear-gradient(120deg, var(--primary) 0%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cv-stat-label {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.01em;
}

/* Ligne : chiffres clés + bouton « Ils parlent de moi » juste après, même écart
   horizontal qu'entre les chiffres (2.4rem). */
.cv-stats-row {
  display: flex;
  align-items: center;
  gap: 1.8rem 2.4rem;
  flex-wrap: wrap;
}
.cv-stats-row .cv-stats { margin: 0; }

/* Bouton « Ils parlent de moi » → défile vers les témoignages */
.cv-testi-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(100deg, rgba(124,58,237,0.55), rgba(0,216,162,0.45));
  border: 1px solid rgba(255,255,255,0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.2s cubic-bezier(.22,1,.36,1), box-shadow 0.2s ease, background 0.2s ease;
}
.cv-testi-cta svg { color: #5eead4; flex-shrink: 0; }
.cv-testi-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(100deg, rgba(124,58,237,0.7), rgba(0,216,162,0.6));
  box-shadow: 0 16px 34px -14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.55);
}
.cv-testi-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cv-testi-cta { transition: none; } }

/* ── Boutons dépliables (Formation / Compétences / Intérêts) ─── */
.cv-foldbar { display: flex; flex-direction: column; gap: 0.6rem; }
.cv-fold { display: flex; flex-direction: column; }
.cv-fold-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.7rem 0.95rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
  background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.cv-fold-trigger:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); }
.cv-fold-trigger:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
.cv-fold-trigger .cv-chevron {
  width: 16px; height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: rgba(255,255,255,0.85);
}
.cv-fold-trigger[aria-expanded="true"] { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.55); }
.cv-fold-trigger[aria-expanded="true"] .cv-chevron { transform: rotate(180deg); }

/* Panneau : ouverture fluide via grid-rows 0fr → 1fr */
.cv-fold-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(.22,1,.36,1);
}
.cv-fold-panel.open { grid-template-rows: 1fr; }
.cv-fold-panel-inner {
  overflow: hidden;
  min-height: 0;
}
.cv-fold-panel.open .cv-fold-panel-inner {
  margin-top: 0.5rem;
}
.cv-fold-card {
  padding: 0.95rem 1.05rem;
  background: var(--surface-bg);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: var(--surface-border);
  border-left: 3px solid var(--teal);
  border-radius: 12px;
  box-shadow: var(--surface-bezel), 0 12px 30px -18px rgba(0,0,0,0.5);
}
.cv-fold-card h4 {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  color: #fff;
  margin: 0.7rem 0 0.3rem;
}
.cv-fold-card h4:first-child { margin-top: 0; }
.cv-fold-card ul { list-style: none; }
.cv-fold-card li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
  margin-bottom: 0.3rem;
}
.cv-fold-card li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

/* ── Timeline serpentante ───────────────────────────────────── */
.cv-timeline-section { padding: 1rem 0 4rem; }
/* Grand cadre Liquid Glass transparent autour de toute la timeline
   (même matériau que « Flux global » dans Architecture IA : on voit le fond
   coloré à travers). Le fil ondulé et les pastilles vivent à l'intérieur.
   Padding généreux pour qu'il soit un peu plus large que le contenu. */
.cv-timeline {
  position: relative;
  /* Élargi au-delà du .container (qui a padding 0 2rem) pour redonner de la
     place aux pastilles serpentines : le cadre déborde des deux côtés et garde
     un padding interne réduit → les cartes à 46% respirent. */
  margin-inline: -2.5rem;
  padding: 1.75rem 1.25rem 1.25rem;
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 18px 44px -22px rgba(0,0,0,0.5);
  overflow: hidden;
}
@supports (backdrop-filter: url(#liquid-glass)) {
  .cv-timeline {
    -webkit-backdrop-filter: blur(10px) url(#liquid-glass) saturate(150%);
    backdrop-filter: blur(10px) url(#liquid-glass) saturate(150%);
  }
}
@media (max-width: 600px) {
  .cv-timeline { margin-inline: -0.5rem; padding: 1.25rem 0.75rem 1rem; border-radius: 22px; }
}
.cv-thread {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.cv-thread .thread-base {
  fill: none;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 3;
  stroke-linecap: round;
}
.cv-thread .thread-fill {
  fill: none;
  stroke: url(#threadGrad);
  stroke-width: 3.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(0,216,162,0.35));
}
.cv-thread .thread-flux {
  fill: none;
  stroke: rgba(255,255,255,0.9);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 22 6000;
  filter: drop-shadow(0 0 6px rgba(94,234,212,0.95));
  opacity: 0.85;
}
.cv-thread .thread-node {
  fill: #fff;
  stroke: rgba(88,24,255,0.5);
  stroke-width: 2.5;
  r: 6;
  transition: r 0.35s ease, fill 0.35s ease, stroke 0.35s ease;
}
.cv-thread .thread-node.lit {
  fill: var(--node-c, var(--teal));
  stroke: #fff;
  r: 8.5;
  filter: drop-shadow(0 0 7px var(--node-c, rgba(0,216,162,0.9)));
}

/* ── Repères d'année sur le fil (badges verre) ──────────────────────────────
   Posés en absolu sur la timeline (hors du SVG étiré pour un texte net).
   Cachés par défaut, ils apparaissent (.lit) quand le fil les franchit au
   scroll, et disparaissent quand on remonte → effet « au fur et à mesure ». */
.cv-years {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;                /* au-dessus du fil, sous les cartes ouvertes */
}
.cv-year {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.7);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: #fff;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  /* Petit badge Liquid Glass */
  background: rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 4px 14px -6px rgba(0,0,0,0.5);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.34,1.4,.64,1);
}
.cv-year.lit {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .cv-year { transition: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── Cartes d'expérience (rail) ─────────────────────────────── */
.cv-rail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4rem;                 /* espacement vertical des cartes */
  padding: 1.5rem 0 3rem;
}
.xp-card {
  --accent: var(--primary);
  position: relative;
  width: 46%;
  border-radius: 20px;
}
.xp-card.left  { align-self: flex-start; }
.xp-card.right { align-self: flex-end; }

/* Zoom CONTINU de la carte au passage du trait (--xp-scale piloté par cv.js).
   Le grossissement culmine PILE quand le trait atteint la carte, et redescend
   en douceur → fluide, pas "d'un coup". Transition courte = lissage des frames. */
.xp-card {
  --xp-scale: 1;
  transform: scale(var(--xp-scale));   /* scale piloté par cv.js, suit le scroll en temps réel */
  transform-origin: center center;
  will-change: transform;
}
.xp-card.left  { transform-origin: left center; }
.xp-card.right { transform-origin: right center; }
/* Carte la plus grossie passe au-dessus de ses voisines */
.xp-card { z-index: 1; }
.xp-card:hover, .xp-card.open { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .xp-card { transform: none; transition: none; }
}

/* ── Tête de carte (surface de contenu — matériau opaque) ───────
   Fond opaque --surface-bg + blur léger pour la profondeur seule.
   Ombre portée colorée conservée (accent). Pas de réfraction SVG. */
.xp-head {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.95rem;
  width: 100%;
  text-align: left;
  padding: 1.15rem 1.3rem 1.15rem 1.55rem;
  border-radius: 22px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  /* Verre semi-opaque clair (lisibilité garantie) avec une légère teinte
     d'accent par carte → plus lumineux et plus « Liquid Glass » que l'ancien
     bleu foncé, tout en gardant le texte blanc parfaitement lisible. */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.16)) 0%,
      rgba(255,255,255,0.12) 55%,
      color-mix(in srgb, var(--accent2, var(--accent)) 14%, rgba(255,255,255,0.10)) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 18px 44px -22px color-mix(in srgb, var(--accent) 55%, transparent),
    0 2px 10px -4px rgba(0,0,0,0.22);
  transition: transform 0.28s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease, border-color 0.3s ease, background 0.3s ease;
}
@supports (backdrop-filter: url(#liquid-glass)) {
  .xp-head {
    -webkit-backdrop-filter: blur(12px) url(#liquid-glass) saturate(155%);
    backdrop-filter: blur(12px) url(#liquid-glass) saturate(155%);
  }
}
/* Légère teinte colorée diffuse en coin (profondeur, SANS reflet blanc).
   Le matériau opaque (point A) ne capte plus de lumière comme le verre :
   on retire le reflet diagonal blanc et on garde juste un halo d'accent discret. */
.xp-head::after {
  content: '';
  position: absolute;
  top: -50%; right: -12%;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 66%);
  pointer-events: none;
  z-index: 0;
  filter: blur(6px);
}
.xp-head > * { position: relative; z-index: 1; }
.xp-head:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 30px 60px -20px color-mix(in srgb, var(--accent) 70%, transparent),
    0 3px 12px -4px rgba(0,0,0,0.28);
}
.xp-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Logo dans un cadre verre translucide */
.xp-logo {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  overflow: hidden;
}
/* Le logo remplit toute la pastille (cover) : les bords sont légèrement rognés
   mais l'icône est zoomée et occupe tout l'espace. overflow:hidden + radius du
   parent assurent les coins arrondis propres. */
.xp-logo img { width: 100%; height: 100%; object-fit: cover; background: rgba(255,255,255,0.92); }

.xp-headtext { min-width: 0; }
.xp-role {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.12rem;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
  line-height: 1.2;
}
.xp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin: 0.32rem 0 0.38rem;
}
.xp-company {
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
/* Période en badge verre */
.xp-period {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 0.14rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.xp-hook {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.45;
}
.xp-chevron {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.85);
  transition: transform 0.35s ease;
  align-self: start;
  margin-top: 0.15rem;
}
.xp-card.open .xp-chevron { transform: rotate(180deg); }
/* Carte ouverte : halo accentué */
.xp-card.open .xp-head {
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.4));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 22px 50px -18px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* Corps déroulé (accordéon) */
.xp-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(.22,1,.36,1);
}
.xp-card.open .xp-body { grid-template-rows: 1fr; }
.xp-body-inner {
  overflow: hidden;
  min-height: 0;
}
/* Conteneur des blocs dépliés : transparent, sert juste d'espaceur vertical. */
.xp-detail {
  margin-top: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
/* Chaque bloc = une sous-pastille rectangle distincte (1 ou plusieurs par exp.) */
.xp-block {
  padding: 1.1rem 1.3rem;
  background: var(--surface-bg);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: var(--surface-border);
  border-left: 3px solid color-mix(in srgb, var(--accent) 70%, #fff);
  border-radius: 16px;
  box-shadow: var(--surface-bezel);
}
.xp-block-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 0.96rem;
  color: #fff;
  margin-bottom: 0.55rem;
}
.xp-context { font-size: 0.9rem; color: rgba(255,255,255,0.82); line-height: 1.6; margin-bottom: 0.9rem; }
.xp-block .xp-context:last-child, .xp-block .xp-missions:last-child { margin-bottom: 0; }
.xp-missions { list-style: none; margin-bottom: 0.95rem; }
.xp-missions li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
  margin-bottom: 0.45rem;
}
.xp-missions li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 60%, #fff);
  transform: rotate(45deg);
}
.xp-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.xp-tag {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  color: #fff;
  background: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.12));
  border: 1px solid rgba(255,255,255,0.3);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cv-hero-inner { flex-direction: column; align-items: stretch; gap: 1.75rem; }
  .cv-hero-aside { width: 100%; flex-direction: column; }
  .cv-hero .hero-photo { width: 150px; height: 150px; align-self: flex-start; }
  .cv-foldbar { width: 100%; }
}
@media (max-width: 760px) {
  /* Zigzag réduit : cartes plus larges, alternance conservée mais resserrée */
  .xp-card { width: 86%; }
  .xp-card.right { align-self: flex-end; }
  .xp-card.left  { align-self: flex-start; }
  .cv-stats { gap: 1.2rem 1.6rem; }
  .cv-stat-num { font-size: 1.9rem; }
}

/* ── Accessibilité : mouvement réduit ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cv-hero .hero-photo::before { animation: none; }
  .cv-fold-panel, .xp-body { transition: none; }
  .cv-fold-trigger .cv-chevron, .xp-chevron { transition: none; }
  .xp-head { transition: none; }
  .cv-thread .thread-flux { display: none; }
  .cv-thread .thread-node { transition: none; }
  .xp-card { transform: none; }
}

/* ════════ Témoignages (hors pastille, carrousel) ════════ */
.cv-testimonials {
  padding: 3.5rem 0 4.5rem;
}
.testi-title {
  text-align: center;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #fff;
  margin-bottom: 2.4rem;
  letter-spacing: -0.01em;
}
/* Grands guillemets décoratifs de chaque côté du titre */
.testi-quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7em;
  line-height: 0;
  vertical-align: -0.35em;
  color: transparent;
  background: linear-gradient(120deg, #c4b5fd, #5eead4);
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0 0.35em;
  opacity: 0.9;
}

.testi-carousel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 880px;
  margin: 0 auto;
}
.testi-viewport { flex: 1; overflow: hidden; }
.testi-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(.22,1,.36,1);
}
.testi-item {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  padding: 0 1.5rem;
  text-align: center;
}
/* Titre optionnel d'un témoignage (au-dessus de la citation) */
.testi-headline {
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  margin: 0 0 0.9rem;
  background: linear-gradient(120deg, #c4b5fd, #5eead4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.testi-item blockquote {
  margin: 0 0 1.4rem;
  font-size: clamp(1.02rem, 1.8vw, 1.22rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
  font-style: italic;
  /* léger relief, pas de pastille */
  text-shadow: 0 1px 14px rgba(0,0,0,0.35);
}
.testi-item figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.testi-author {
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}
.testi-role {
  font-size: 0.84rem;
  color: #5eead4;
  font-weight: 600;
}

/* Flèches de navigation (rondes, discrètes) */
.testi-nav {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.testi-nav:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); border-color: rgba(255,255,255,0.4); }
.testi-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Points indicateurs */
.testi-dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.8rem;
}
.testi-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.25);
  transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}
.testi-dot.active {
  width: 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c4b5fd, #5eead4);
}
.testi-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 600px) {
  .testi-nav { width: 38px; height: 38px; font-size: 1.3rem; }
  .testi-item { padding: 0 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .testi-track { transition: none; }
}