/* ============================================================
   DESIGN SYSTEM — Gaël Tréfeu OnePage v3
   Mobile-first · CSS Custom Properties · Plus Jakarta Sans
   ============================================================ */

/* ------------------------------------------------------------
   1. CUSTOM PROPERTIES (tokens)
   ------------------------------------------------------------ */
:root {
  /* Couleurs base */
  --color-bg:            #000000;
  --color-surface:       #121212;
  --color-surface-hover: #1a1a1a;
  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-hover:  rgba(255, 255, 255, 0.2);
  --color-text:          #FFFFFF;
  --color-text-muted:    #A0A0A0;

  /* Palette — site Framer original */
  --color-coral:  #FF7163;
  --color-lime:   #E7FF63;
  --color-olive:  #475346;
  --color-orange: #FFB347;
  --color-green:  #7AF080;

  /* Aliases accent */
  --color-accent:     var(--color-coral);
  --color-accent-end: var(--color-orange);

  /* Gradients */
  --gradient-accent:  linear-gradient(135deg, #FF7163, #FFB347);
  --gradient-lime:    linear-gradient(135deg, #E7FF63, #7AF080);
  --gradient-contact: linear-gradient(160deg, #FF7163 0%, #FF8C42 55%, #FFB347 100%);

  /* Highlight via <mark> */
  --color-highlight-bg:   rgba(255, 179, 71, 0.15);
  --color-highlight-text: #FFB347;

  /* Typographie */
  --font-family:         'Plus Jakarta Sans', sans-serif;
  --font-weight-regular: 400;
  --font-weight-semi:    600;
  --font-weight-bold:    800;
  --line-height-body:    1.7;
  --line-height-title:   1.15;

  /* Espacement */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Conteneur */
  --container-max:     960px;
  --container-padding: 1.25rem;

  /* Cartes */
  --card-radius:  24px;
  --card-padding: 1.5rem;

  /* Transitions */
  --transition-base:   0.25s ease;
  --transition-reveal: 0.85s cubic-bezier(0.22, 1, 0.36, 1);

  /* Fondu de fond scroll-linked (mis à jour en JS, voir initScrollColorFade) */
  --scroll-fade-bg: #000000;
}


/* ------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--scroll-fade-bg);
  overscroll-behavior-y: none;
  /* Scroll anchoring désactivé : le site anime en continu (carrousel loves,
     cascades, reveals) et le navigateur peut ancrer le scroll sur un élément
     animé → la page "suit" le contenu et saute toute seule */
  overflow-anchor: none;
}

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--scroll-fade-bg);
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top);
}

ul, ol { list-style: none; }
a      { color: inherit; text-decoration: none; }
img    { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Surlignage balayé au scroll-in : le fond se déploie de gauche à droite
   quand le <mark> entre au viewport (classe .swept posée par initMarkSweep) */
mark {
  background-color: transparent; /* neutralise le jaune UA par défaut */
  background-image: linear-gradient(120deg, rgba(255, 113, 99, 0.32), rgba(255, 179, 71, 0.32));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
  border-radius: 0.3em;
  padding: 0.02em 0.18em;
  margin-inline: -0.08em;
  color: inherit;
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition:
    background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.5s ease;
}

mark.swept {
  background-size: 100% 100%;
  color: var(--color-text);
}


/* ------------------------------------------------------------
   3. LAYOUT — Conteneur & Sections
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--space-xl);
}

.section__title {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-title);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.section__intro {
  color: var(--color-text-muted);
  max-width: 65ch;
  margin-bottom: var(--space-lg);
}


/* ------------------------------------------------------------
   4. NAVIGATION PILL
   ------------------------------------------------------------ */
#nav-pill {
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(18, 18, 18, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
  overflow-x: auto;
  scrollbar-width: none;
}

#nav-pill::-webkit-scrollbar { display: none; }

#nav-pill ul {
  display: flex;
  gap: 0.15rem;
  align-items: center;
}

#nav-pill a {
  font-size: 0.72rem;
  font-weight: var(--font-weight-semi);
  color: var(--color-text-muted);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  transition: color var(--transition-base), background var(--transition-base);
}

#nav-pill a:hover,
#nav-pill a.active {
  color: var(--color-text);
  background: rgba(255, 113, 99, 0.18);
}


/* ------------------------------------------------------------
   5. SECTION HERO
   ------------------------------------------------------------ */
.section--hero {
  display: flex;
  align-items: center;
  padding-block: var(--space-xl) var(--space-lg);
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(255, 113, 99, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(255, 179, 71, 0.08), transparent 60%),
    transparent;
}

.hero__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.hero__content {
  flex: 1;
}

/* Avatar */
.hero__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 113, 99, 0.5);
  box-shadow: 0 0 0 6px rgba(255, 113, 99, 0.1);
  margin-bottom: var(--space-md);
  display: block;
}

.hero__topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.hero__badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: var(--font-weight-semi);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  padding: 0.4rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

/* Intitulés de postes ciblés — lisibles en 3 secondes par un recruteur */
.hero__roles {
  font-size: 0.95rem;
  font-weight: var(--font-weight-semi);
  color: var(--color-coral);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-sm);
}

/* CTA principal : scroll vers la section Contact */
.hero__cta {
  display: inline-block;
  margin-top: var(--space-md);
  padding: 0.75rem 1.6rem;
  background: var(--gradient-accent);
  color: #111111;
  font-weight: var(--font-weight-bold);
  font-size: 0.95rem;
  border-radius: 999px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255, 113, 99, 0.35);
}

.hero__opentowork {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: var(--font-weight-semi);
  color: var(--color-lime);
  letter-spacing: 0.04em;
  padding: 0.4rem 1rem;
  border: 1px solid var(--color-lime);
  border-radius: 999px;
  margin-top: 0;
  margin-bottom: var(--space-md);
}

.lang-switcher {
  display: flex;
  gap: 0.5rem;
}

.lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  line-height: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.lang-pill:hover:not(.lang-pill--active) {
  border-color: rgba(255, 113, 99, 0.5);
}

.lang-pill--active {
  border-color: var(--color-coral);
  background-color: rgba(255, 113, 99, 0.1);
  cursor: default;
}

/* Titre gradient — l'emoji est protégé via .hero__emoji */
.hero__title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-title);
  margin-bottom: var(--space-md);
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* L'emoji est wrappé en span par JS pour rester visible */
.hero__emoji {
  -webkit-text-fill-color: initial;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  display: inline;
}

.hero__description {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--color-text-muted);
  max-width: 55ch;
  margin-bottom: var(--space-sm);
}

.hero__highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.hero__highlights li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.hero__highlights li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient-accent);
  flex-shrink: 0;
  margin-top: 0.6rem;
}

/* Image unique Hero (avatar) */
.hero__images {
  flex-shrink: 0;
  position: relative;
}

.hero__images img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 2rem;
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.hero__images img:hover {
  transform: scale(1.02);
  border-color: rgba(255, 113, 99, 0.4);
}

.hero__heart-hint {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.06em;
  padding: 0.3rem 0.9rem;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  display: inline-flex;
  justify-content: center;
}

/* Fondu du texte seul ("double clic" ↔ "awww...") — la gélule reste opaque */
.hero__heart-hint__text {
  transition: opacity 0.2s ease;
}

.hero__heart-hint__text.is-fading { opacity: 0; }


/* ------------------------------------------------------------
   6. SECTION VISION
   ------------------------------------------------------------ */
.section--vision {
  border-top: 1px solid var(--color-border);
  background: transparent;
}

.vision__intro {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: var(--font-weight-semi);
  margin-bottom: var(--space-md);
}

.vision__body p {
  color: var(--color-text-muted);
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  font-weight: var(--font-weight-semi);
  line-height: 1.55;
  margin-bottom: var(--space-sm);
  max-width: 60ch;
}

/* Illumination progressive du texte Vision, scroll-linked (voir initVisionIllumination)
   Chaque mot est un span .vw ; .lit s'allume au fil du scroll, type page produit Apple */
.vw {
  opacity: 0.22;
  transition: opacity 0.35s linear, color 0.35s linear;
}

.vw.lit { opacity: 1; }

.vision__body .vw.lit { color: var(--color-text); }

/* Les mots dans un <mark> suivent la couleur du mark, pas celle du paragraphe */
mark .vw.lit { color: inherit; }

.vision__body p:last-child { margin-bottom: 0; }


/* ------------------------------------------------------------
   7. SECTION TICKER — Défilement continu d'images
   ------------------------------------------------------------ */
.section--ticker {
  overflow: hidden;
  padding-block: var(--space-md);
  background: transparent;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.ticker-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ticker-row {
  overflow: hidden;
  position: relative;
}

/* Fondu sur les bords */
.ticker-row::before,
.ticker-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.ticker-row::before { left: 0;  background: linear-gradient(to right, #000, transparent); }
.ticker-row::after  { right: 0; background: linear-gradient(to left, #000, transparent); }

.ticker-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
}

.ticker-track--left  { animation: tickerLeft  28s linear infinite; }
.ticker-track--right { animation: tickerRight 32s linear infinite; }

@keyframes tickerLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes tickerRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.ticker-track img {
  height: 130px;
  width: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  transition: border-color 0.3s ease;
}

.ticker-wrapper:hover .ticker-track { animation-play-state: paused; }


/* ------------------------------------------------------------
   8. SECTION EXPERTISE — Filtres + Cartes
   ------------------------------------------------------------ */
.section--expertise {
  border-top: 1px solid var(--color-border);
  background:
    radial-gradient(ellipse 50% 40% at 90% 0%, rgba(255, 113, 99, 0.08), transparent 60%),
    transparent;
}

.expertise__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.filter-btn {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: var(--font-weight-semi);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.filter-btn:hover {
  color: var(--color-text);
  border-color: var(--color-border-hover);
}

.filter-btn.active {
  color: var(--color-coral);
  border-color: var(--color-coral);
  background: rgba(255, 113, 99, 0.1);
}

/* --- Grille de cartes flip 3D ---
   Face avant : emoji + mot-clé visible sans interaction (scan recruteur, SEO).
   Clic → la carte se retourne (rotateY) et révèle le détail. --- */
.expertise__flip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  perspective: 1200px;
}

.flip-card {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.flip-card__inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.flip-card.flipped .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.flip-card:hover .flip-card__face,
.flip-card:focus-visible .flip-card__face {
  border-color: rgba(255, 113, 99, 0.4);
  box-shadow: 0 6px 24px rgba(255, 113, 99, 0.12);
}

.flip-card__emoji {
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  transition: transform var(--transition-base);
}

.flip-card:hover .flip-card__emoji { transform: scale(1.15); }

.flip-card__title {
  display: block;
  font-size: 0.9rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-text);
}

.flip-card__hint {
  position: absolute;
  bottom: 0.55rem;
  right: 0.8rem;
  font-size: 0.9rem;
  font-weight: var(--font-weight-semi);
  color: var(--color-text-muted);
  opacity: 0.45;
}

.flip-card__back {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, rgba(255, 113, 99, 0.10), rgba(255, 179, 71, 0.06)), var(--color-surface);
}

.flip-card__body {
  display: block;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text);
}

.flip-card.is-hidden { display: none; }


/* ------------------------------------------------------------
   9. SECTION SOFT SKILLS — Accordion coloré
   ------------------------------------------------------------ */
.section--softskills {
  border-top: 1px solid var(--color-border);
  background: transparent;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Bloc accordion — fermé : tout flouté + gradient */
.accordion-item {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.accordion-item__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.25rem var(--card-padding);
  text-align: left;
  cursor: pointer;
  gap: var(--space-sm);
  border: none;
  /* État fermé : gradient + blur */
  background: var(--gradient-contact);
  color: rgba(255, 255, 255, 0.92);
  border-radius: calc(var(--card-radius) - 1px);
  filter: blur(4px);
  transition: filter 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, color 0.4s ease;
  user-select: none;
}

/* État ouvert : lisible, pas de gradient */
.accordion-item.open .accordion-item__trigger {
  filter: blur(0);
  background: var(--color-surface);
  color: var(--color-text);
  user-select: auto;
}

.accordion-item.open {
  border-color: rgba(255, 113, 99, 0.4);
}

.accordion-item__content {
  flex: 1;
}

.accordion-item__label {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.5rem;
}

.accordion-item__text {
  font-size: 0.925rem;
  line-height: var(--line-height-body);
  color: inherit;
  opacity: 0.9;
}

.accordion-item.open .accordion-item__text {
  color: var(--color-text-muted);
}



/* ------------------------------------------------------------
   10. SECTION TÉMOIGNAGES — Lignes pleine largeur
   ------------------------------------------------------------ */
.section--testimonials {
  border-top: 1px solid var(--color-border);
  background: transparent;
}

.testimonials__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--space-lg) var(--card-padding);
  transition: border-color var(--transition-base);
}

.testimonial-card:hover { border-color: rgba(255, 113, 99, 0.25); }

/* Header : guillemet + auteur sur la même ligne */
.testimonial-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.testimonial-card__quotemark {
  font-size: 5rem;
  line-height: 0.75;
  color: var(--color-coral);
  font-family: Georgia, serif;
  flex-shrink: 0;
  user-select: none;
}

.testimonial-card__author-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonial-card__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 113, 99, 0.3);
  flex-shrink: 0;
}

.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: var(--font-weight-bold);
  color: #fff;
  flex-shrink: 0;
}

.testimonial-card__author {
  font-weight: var(--font-weight-bold);
  font-size: 0.95rem;
}

.testimonial-card__title-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Bouton haut-parleur */
.testimonial-card__audio-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base);
}

.testimonial-card__audio-btn .audio-icon {
  width: 20px;
  height: 20px;
  transform: scaleX(-1); /* speaker orienté vers la gauche */
  flex-shrink: 0;
}

.testimonial-card__audio-btn:hover:not(:disabled) {
  color: var(--color-coral);
  border-color: var(--color-coral);
}

.testimonial-card__audio-btn.playing {
  color: var(--color-coral);
  border-color: var(--color-coral);
}

.testimonial-card__audio-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

/* Citation : première phrase en gras, reste en régulier */
.testimonial-card__quote {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--color-text-muted);
  line-height: 1.65;
  font-style: normal;
  font-weight: var(--font-weight-regular);
}

.testimonial-card__quote strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semi);
}

.kb {
  transition: color 0.4s ease;
}

.kb--bold {
  color: var(--color-text);
  font-weight: var(--font-weight-semi);
}

.kb--active {
  color: var(--color-coral);
}


/* ------------------------------------------------------------
   11. SECTION TIMELINE
   ------------------------------------------------------------ */
.section--timeline {
  border-top: 1px solid var(--color-border);
  background: transparent;
}

.timeline__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  margin-top: var(--space-lg);
}

.timeline__list::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-coral), transparent);
}

.timeline-item {
  padding-left: 2.5rem;
  position: relative;
  transition: opacity var(--transition-base);
}

.timeline-item:hover .timeline-item__period { color: var(--color-coral); }

.timeline-item::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0.45rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--gradient-accent);
}

.timeline-item__period {
  font-size: 0.8rem;
  font-weight: var(--font-weight-semi);
  color: var(--color-coral);
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  transition: color var(--transition-base);
}

.timeline-item__title {
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.timeline-item__company {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}

.timeline-item__impact {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.timeline-item__counters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-sm);
}

.timeline-counter {
  flex: 1 1 130px;
  min-width: 110px;
  padding: 0.6rem 0.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.timeline-counter__value {
  font-size: 1.7rem;
  font-weight: var(--font-weight-bold);
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Pop d'atterrissage quand le compteur démarre (classe posée par animateCounter) */
.timeline-counter__value.pop {
  animation: counter-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes counter-pop {
  0%   { transform: scale(0.55); }
  65%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.timeline-counter__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

.timeline-item__parallel {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  font-size: 0.85rem;
}

.timeline-item__parallel-period  { font-size: 0.75rem; color: var(--color-coral); font-weight: var(--font-weight-semi); margin-bottom: 0.15rem; }
.timeline-item__parallel-title   { font-weight: var(--font-weight-bold); }
.timeline-item__parallel-company { color: var(--color-text-muted); margin-bottom: 0.25rem; }
.timeline-item__parallel-detail  { color: var(--color-text-muted); }



/* ------------------------------------------------------------
   12. SECTION CE QUE J'AIME
   ------------------------------------------------------------ */
.section--loves {
  border-top: 1px solid var(--color-border);
  background:
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(231, 255, 99, 0.06), transparent 60%),
    transparent;
}

/* Carrousel vertical "Ce que j'aime" */
.loves__carousel {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.loves__mask {
  flex: 1;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  cursor: pointer;
  height: 140px;
}

.loves__track {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.loves__slide {
  min-height: 140px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--card-padding);
  box-sizing: border-box;
  flex-shrink: 0;
}

.loves__emoji {
  font-size: 2.2rem;
  flex-shrink: 0;
  width: 3.5rem;
  text-align: center;
}

.loves__separator {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  margin: 0.5rem 0;
  flex-shrink: 0;
}

.loves__text {
  flex: 1;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
  padding-left: var(--space-md);
}

/* Dots verticaux */
.loves__dots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}

.loves__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--color-coral);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.loves__dot--active {
  background: var(--color-coral);
  border-color: var(--color-coral);
}

.loves__dot:hover:not(.loves__dot--active) {
  border-color: var(--color-text-muted);
}

/* Mobile */
@media (max-width: 767px) {
  .loves__emoji { font-size: 1.8rem; width: 2.5rem; }
}


/* ------------------------------------------------------------
   13. SECTION PORTFOLIO — Cards visuelles + Modale
   ------------------------------------------------------------ */
.section--portfolio {
  border-top: 1px solid var(--color-border);
  background: transparent;
}

/* Grille portfolio */
.portfolio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Carte portfolio — thumbnail large, titre en overlay */
.portfolio-card {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-base), transform var(--transition-base);
  perspective: 800px; /* tilt 3D desktop (voir initPortfolioTilt) */
}

.portfolio-card:hover {
  border-color: rgba(255, 113, 99, 0.4);
  transform: translateY(-4px);
}

.portfolio-card__thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1a1a;
}

.portfolio-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.portfolio-card:hover .portfolio-card__thumb { transform: scale(1.06); }

/* Fallback si pas de thumbnail */
.portfolio-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: #1a1a1a;
}

/* Overlay gradient avec titre */
.portfolio-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-lg) var(--card-padding) var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.portfolio-card__title {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Icône "clic pour plus" */
.portfolio-card__hint {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
  transition: background var(--transition-base), transform var(--transition-base);
}

.portfolio-card:hover .portfolio-card__hint {
  background: rgba(255, 113, 99, 0.8);
  transform: scale(1.1);
}


/* ------------------------------------------------------------
   14. MODALE PORTFOLIO
   ------------------------------------------------------------ */
.portfolio-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-modal.is-open {
  pointer-events: all;
  opacity: 1;
}

.portfolio-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 499;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.portfolio-modal__backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

.portfolio-modal__dialog {
  position: relative;
  z-index: 501;
  background: #141414;
  border: 1px solid rgba(255, 113, 99, 0.25);
  border-radius: var(--card-radius);
  width: 100%;
  max-width: 700px;
  max-height: 90svh;
  overflow-y: auto;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,113,99,0.3) transparent;
}

.portfolio-modal.is-open .portfolio-modal__dialog {
  transform: translateY(0) scale(1);
}

.portfolio-modal__close {
  position: sticky;
  top: var(--space-sm);
  float: right;
  margin: var(--space-sm) var(--space-sm) 0 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), border-color var(--transition-base);
  z-index: 1;
}

.portfolio-modal__close:hover {
  background: rgba(255, 113, 99, 0.3);
  border-color: var(--color-coral);
}

.portfolio-modal__body {
  padding: var(--space-md) var(--card-padding) var(--card-padding);
  clear: both;
}

/* Contenu de la modale */
.modal-project__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-border);
}

.modal-project__title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.25rem;
}

.modal-project__subtitle {
  font-size: 0.85rem;
  color: var(--color-coral);
  font-weight: var(--font-weight-semi);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.modal-project__description {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
  margin-bottom: var(--space-sm);
}

.modal-project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-md);
}

.modal-project__tag {
  font-size: 0.72rem;
  font-weight: var(--font-weight-semi);
  color: var(--color-text-muted);
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

.modal-project__cta {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.modal-project__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.4rem;
  font-size: 0.9rem;
  font-weight: var(--font-weight-semi);
  color: #000;
  background: var(--gradient-accent);
  border-radius: 999px;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.modal-project__link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.modal-project__on-request {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  align-self: center;
}

.modal-project__badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: var(--font-weight-semi);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}


/* ------------------------------------------------------------
   15. CAROUSEL (modale Prototype IA + Twitch)
   ------------------------------------------------------------ */
.modal-carousel {
  position: relative;
  margin-bottom: var(--space-md);
}

.modal-carousel__viewport {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
}

.modal-carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-carousel__slide {
  min-width: 100%;
  height: 100%;
}

.modal-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.modal-carousel__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), border-color var(--transition-base);
  flex-shrink: 0;
}

.modal-carousel__btn:hover {
  background: rgba(255, 113, 99, 0.2);
  border-color: var(--color-coral);
}

.modal-carousel__dots {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.modal-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border-hover);
  transition: background var(--transition-base), transform var(--transition-base);
  cursor: pointer;
}

.modal-carousel__dot.active {
  background: var(--color-coral);
  transform: scale(1.4);
}


/* ------------------------------------------------------------
   16. SECTION CONTACT — Fond dégradé coral
   ------------------------------------------------------------ */
.section--contact {
  border-top: 1px solid var(--color-border);
  background: var(--gradient-contact);
  color: #1a0a00;
}

/* Textes sur fond coral : sombres pour le contraste */
.section--contact .section__title,
.contact__intro,
.contact__cta,
.contact__availability {
  color: #fff;
}

.contact__avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.contact__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.5);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.contact__intro {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
  text-align: center;
}

.contact__cta {
  font-size: 1rem;
  max-width: 50ch;
  margin-inline: auto;
  margin-bottom: var(--space-xs);
  text-align: center;
  opacity: 0.9;
}

.contact__availability {
  font-size: 0.85rem;
  margin-bottom: var(--space-lg);
  text-align: center;
  opacity: 0.75;
}

/* Liens — style adapté sur fond coral */
.contact__links-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.1rem;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 18px;
  color: #fff;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.contact-link:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

.contact-link__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.contact-link__icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.contact-link__label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.7);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
}

.contact-link__handle {
  font-weight: var(--font-weight-semi);
  font-size: 0.9rem;
  color: #fff;
  display: block;
}

/* Bloc CV : bordure lime pour ressortir sans capter toute l'attention */
.contact-link--cv {
  border: 2px solid var(--color-lime);
}

.contact-link--cv:hover {
  border-color: #f2ffa1;
  background: rgba(0, 0, 0, 0.3);
}

.contact-link--cv .contact-link__label { color: var(--color-lime); }

/* Séparateur formulaire */
.contact__divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  max-width: 600px;
  margin-inline: auto;
}

.contact__divider::before,
.contact__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.3);
  border-top: 1px dashed rgba(255,255,255,0.4);
}

.contact__divider span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
}

/* Formulaire sur fond coral */
.contact-form {
  max-width: 600px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-form__honeypot { display: none; }

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-form__label {
  font-size: 0.8rem;
  font-weight: var(--font-weight-semi);
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.04em;
}

.contact-form__input {
  font-family: var(--font-family);
  font-size: 0.95rem;
  color: #111;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 14px;
  padding: 0.8rem 1rem;
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  outline: none;
  width: 100%;
}

.contact-form__input::placeholder { color: rgba(0, 0, 0, 0.4); }

.contact-form__input:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 130px;
}

.contact-form__submit {
  align-self: flex-start;
  padding: 0.85rem 1.75rem;
  font-size: 0.95rem;
  font-weight: var(--font-weight-semi);
  color: #fff;
  background: #111;
  border-radius: 999px;
  transition: background var(--transition-base), transform var(--transition-base);
}

.contact-form__submit:hover {
  background: #000;
  transform: translateY(-1px);
}

/* Suivi du curseur en JS (desktop, voir initMagneticButtons) — remplace le hover CSS */
.contact-form__submit.magnetic {
  transition: background var(--transition-base), transform 0.15s ease-out;
}

.contact-form__submit.magnetic:hover {
  transform: none;
}

.contact-form__success {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
  font-weight: var(--font-weight-semi);
  min-height: 1.4rem;
}


/* ------------------------------------------------------------
   17. ANIMATIONS — Scroll Reveal
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(44px) scale(0.985);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Orchestration : enfants directs d'une section, révélés en cascade */
.reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible .reveal-item,
.hero-intro.hero-intro-visible .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

.reveal-item:nth-child(1) { transition-delay: 0ms; }
.reveal-item:nth-child(2) { transition-delay: 90ms; }
.reveal-item:nth-child(3) { transition-delay: 180ms; }
.reveal-item:nth-child(4) { transition-delay: 270ms; }
.reveal-item:nth-child(n+5) { transition-delay: 360ms; }

/* Hero : contenu déjà présent en HTML statique (LCP) — reste visible sans JS */
html:not(.js) .hero-intro .reveal-item {
  opacity: 1;
  transform: none;
}

/* Titres de section — reveal mot par mot */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.reveal-word__inner {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible .reveal-word__inner {
  transform: translateY(0);
}

.reveal-word:nth-child(2) .reveal-word__inner { transition-delay: 40ms; }
.reveal-word:nth-child(3) .reveal-word__inner { transition-delay: 80ms; }
.reveal-word:nth-child(4) .reveal-word__inner { transition-delay: 120ms; }
.reveal-word:nth-child(n+5) .reveal-word__inner { transition-delay: 160ms; }

/* ------------------------------------------------------------
   17b. ANIMATIONS — Effet WOW (Phase 7)
   Hero 3D scroll-linked, glare, cascades d'apparition
   ------------------------------------------------------------ */

/* Sortie de scène scroll-linked : le contenu de chaque section recule et
   s'estompe quand elle quitte le viewport par le haut (--exit-p mis à jour
   en JS, voir initExitScenes ; Contact exclu — dernière section) */
.section:not(.section--contact) > .container {
  transform: translateY(calc(var(--exit-p, 0) * -40px)) scale(calc(1 - var(--exit-p, 0) * 0.06));
  opacity: calc(1 - var(--exit-p, 0) * 1.2);
  transform-origin: center top;
}

/* Grille bento portfolio : les cartes --wide s'étendent sur 2 colonnes
   à hauteur de rangée constante (l'image s'étend par object-fit: cover).
   Sur une rangée mixte, la hauteur vient de la carte simple (16/9) ;
   sur une rangée 2 colonnes où la carte large est seule, ratio 21/9. */
@media (min-width: 768px) {
  .portfolio__grid { grid-auto-flow: dense; }

  .portfolio-card--wide { grid-column: span 2; }

  .portfolio-card--wide .portfolio-card__thumb-wrap {
    aspect-ratio: 21 / 9;
  }
}

@media (min-width: 1024px) {
  /* La vignette large remplit la carte en absolu : elle ne contribue plus
     à la hauteur de rangée, dictée par les cartes simples 16/9 */
  .portfolio-card--wide {
    position: relative;
  }

  .portfolio-card--wide .portfolio-card__thumb-wrap {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}

/* Carte portfolio vedette (PEMTL) : halo coral qui pulse lentement
   pour attirer le clic — coupé au survol (le hover prend le relais) */
.portfolio-card--featured {
  border-color: rgba(255, 113, 99, 0.35);
  animation: featured-halo 3.2s ease-in-out infinite;
}

.portfolio-card--featured:hover {
  animation: none;
}

@keyframes featured-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 113, 99, 0.10), 0 0 22px rgba(255, 113, 99, 0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 113, 99, 0.14), 0 0 44px rgba(255, 113, 99, 0.42); }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card--featured {
    animation: none;
    box-shadow: 0 0 28px rgba(255, 113, 99, 0.3);
  }
}

/* Vignettes portfolio : glare au survol pendant le tilt 3D */
.portfolio-card__thumb-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, 0.22), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

.portfolio-card__thumb-wrap.tilting::after { opacity: 1; }

/* Cascades d'apparition : les enfants des listes montent un par un
   (délais posés en JS par initCascades, classe .cascade-in) */
.js :is(.timeline__list, .testimonials__list, .expertise__flip-grid):not(.cascade-off) > *:not(.cascade-in) {
  opacity: 0;
  transform: translateY(44px) scale(0.97);
}

.js :is(.timeline__list, .testimonials__list, .expertise__flip-grid) > * {
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--transition-base);
}

/* Barre de progression de scroll */
#scroll-progress {
  position: fixed;
  /* En web app iOS (bookmark écran d'accueil), top: 0 passe sous la barre
     de statut translucide — on décale de la safe-area */
  top: env(safe-area-inset-top, 0);
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-coral), var(--color-lime));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 150;
  pointer-events: none;
}


/* ------------------------------------------------------------
   18. RESPONSIVE — Desktop (≥ 768px)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  #nav-pill { display: none; }

  /* Sorties de scène désactivées sur mobile : le fondu + translateY(-40px)
     des sections au-dessus provoque un saut à contre-sens en remontant
     (la section se "recharge" sous le doigt). Effet conservé sur desktop. */
  .section:not(.section--contact) > .container {
    transform: none;
    opacity: 1;
  }

  /* Reveals et cascades en FONDU PUR sur mobile : les translateY d'entrée
     font glisser le contenu sous le doigt quand une section rejoue son
     apparition au scroll up ("ça tire le scroll"). Le rejeu bidirectionnel
     est conservé, seuls les déplacements sont neutralisés. Desktop intact. */
  .reveal,
  .reveal.visible,
  .reveal-item,
  .reveal.visible .reveal-item,
  .hero-intro.hero-intro-visible .reveal-item {
    transform: none;
  }

  .js :is(.timeline__list, .testimonials__list, .expertise__flip-grid):not(.cascade-off) > *:not(.cascade-in) {
    transform: none;
  }

  .contact__links-wrapper {
    grid-template-columns: 1fr;
  }

  .contact-link__handle {
    word-break: break-all;
  }
}

@media (min-width: 768px) {
  :root { --container-padding: 2rem; }

  .hero__container {
    flex-direction: row;
    align-items: center;
  }

  .hero__images { width: 260px; }

  .hero__highlights {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .hero__highlights li {
    align-items: center;
  }

  .hero__highlights li::before {
    margin-top: 0;
  }

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

  .ticker-track img { height: 160px; }
}

@media (min-width: 1024px) {
  .hero__images    { width: 320px; }
  .portfolio__grid  { grid-template-columns: repeat(3, 1fr); }
  .expertise__flip-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ------------------------------------------------------------
   19. ACCESSIBILITÉ
   ------------------------------------------------------------ */

/* Prévenir le zoom double-tap sur mobile */
a, button, [role="button"], input, textarea, select,
.portfolio-card, .modal-carousel__btn, .accordion-item__trigger {
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .reveal-item {
    opacity: 1;
    transform: none;
  }
  .reveal-word__inner {
    transform: none;
  }
  .ticker-track { animation: none; }
  .vw { opacity: 1; }
  mark { background-size: 100% 100%; color: var(--color-text); }
  .section:not(.section--contact) > .container { transform: none; opacity: 1; }
  .js :is(.timeline__list, .testimonials__list, .expertise__flip-grid) > *:not(.cascade-in) {
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   EASTER EGG — Explosion de cœurs (double-clic / double-tap)
   ============================================================ */
.heart-burst {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  line-height: 1;
  transform-origin: center;
  user-select: none;
}

/* ============================================================
   MODALE CACHÉE — CVs
   ============================================================ */
.cv-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cv-modal.is-open {
  pointer-events: all;
  opacity: 1;
}
.cv-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 599;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
.cv-modal__dialog {
  position: relative;
  z-index: 601;
  background: #141414;
  border: 1px solid rgba(255, 113, 99, 0.25);
  border-radius: var(--card-radius);
  width: 100%;
  max-width: 460px;
  padding: var(--card-padding);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cv-modal.is-open .cv-modal__dialog {
  transform: translateY(0) scale(1);
}
.cv-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.cv-modal__item {
  margin: 0;
}
.cv-modal__link {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.cv-modal__link:hover,
.cv-modal__link:focus-visible {
  background: rgba(255, 113, 99, 0.08);
  border-color: var(--color-coral);
  transform: translateY(-2px);
  outline: none;
}
.cv-modal__icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  width: 2.25rem;
  text-align: center;
}
.cv-modal__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cv-modal__label {
  font-family: var(--font-family);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-coral);
  font-weight: var(--font-weight-bold);
}
.cv-modal__desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ==========================================================
   VISIONNEUSE CV IN-APP
   Overlay plein écran avec iframe — évite la navigation hors
   du PWA iOS (window.open sur même domaine reste dans le WebView)
   ========================================================== */
.cv-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: #fff;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.cv-viewer.is-open {
  transform: translateY(0);
  pointer-events: all;
}
.cv-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.6rem 1rem;
  background: var(--color-bg);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  padding-top: calc(0.6rem + env(safe-area-inset-top));
}
.cv-viewer__close {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.cv-viewer__close:hover,
.cv-viewer__close:focus-visible {
  border-color: var(--color-coral);
  color: var(--color-coral);
  outline: none;
}
.cv-viewer__frame {
  flex: 1;
  width: 100%;
  border: none;
}