/* =============================================
   STONEDEV — EDITORIAL BOLD (monochrome + typo XXL)
   Développeur web & expertise SEO/GEO — Bamako, Mali
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:        #fdfdfd;
  --paper-2:      #f3f2ef;
  --ink:          #0a0909;
  --ink-2:        #171615;
  --line-on-light: rgba(10,9,9,0.1);
  --line-on-dark:  rgba(255,255,255,0.14);
  --muted-on-light: #5c5c5c;
  --muted-on-dark:  #9a9895;

  --accent:        #4f6df5;
  --accent-soft:   rgba(79,109,245,0.1);
  --available:     #34c76f;

  --radius-xl:     40px;
  --radius-lg:     28px;
  --radius:        18px;
  --radius-sm:     12px;
  --radius-pill:   999px;

  --ease-out:      cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:   cubic-bezier(0.77,0,0.175,1);
  --dur-fast:      160ms;
  --dur:           260ms;

  --space-section: clamp(4rem, 9vw, 7.5rem);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: 'Manrope', sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}

h1,h2,h3,h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

a { text-decoration: none; color: inherit; }
.acc-content p a, #cta p a, .contact-info p a, .case-text p a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.acc-content p a:hover, #cta p a:hover, .contact-info p a:hover, .case-text p a:hover { color: var(--ink); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
input, textarea, select { font-size: max(16px, 1rem); font-family: inherit; }
::selection { background: var(--ink); color: var(--paper); }

.container { max-width: min(1320px, calc(100% - 2.5rem)); margin-inline: auto; }
.mono { font-family: 'JetBrains Mono', monospace; }

section { padding: var(--space-section) 0; position: relative; }

/* ---- ghost watermark text behind section titles ---- */
.ghost-wrap { position: relative; overflow-x: clip; }
.ghost-text {
  position: absolute;
  top: -0.32em; left: -0.02em;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(4.5rem, 14vw, 11rem);
  letter-spacing: -0.03em;
  color: currentColor;
  opacity: 0.045;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 1;
}
.section-head { position: relative; z-index: 1; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; font-weight: 500;
  margin-bottom: 10px;
}
.section-head .eyebrow::before { content: '/'; font-weight: 700; }
.section-head h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); text-transform: uppercase; }
.section-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; color: var(--muted-on-light); }

/* ---- buttons & pills ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 26px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.92rem;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease-out); }
.btn:hover svg { transform: translate(2px,-2px); }
.btn:active { transform: scale(0.97); }

.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--ink-2); }
.btn-light { background: var(--paper); color: var(--ink); border-color: var(--line-on-light); }
.btn-light:hover { border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-on-light); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-full { width: 100%; justify-content: center; }

.pill-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 600;
  padding: 12px 18px 12px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-on-light);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pill-link:hover { border-color: var(--ink); background: var(--paper-2); }
.pill-link:active { transform: scale(0.96); background: var(--paper-2); }
.pill-link svg { width: 15px; height: 15px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.85rem; font-weight: 500;
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius-pill);
  padding: 9px 16px 9px 12px;
  background: var(--paper);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--available); flex-shrink: 0; animation: pulse-dot 2.4s ease infinite; }
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(52,199,111,0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(52,199,111,0); }
}

/* ---- reveal (progressive enhancement) ---- */
.reveal { opacity: 1; transform: none; }
.js-anim .reveal { opacity: 0; transform: translateY(26px); }
.js-anim .reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }


/* =============================================
   NAV OVERLAY
   ============================================= */
.nav-overlay {
  position: fixed; inset: 0; background: var(--ink); z-index: 200;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(60px, 10vh, 100px) clamp(24px, 6vw, 60px);
  opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease-out);
}
.nav-overlay.open { opacity: 1; pointer-events: all; }
.overlay-links { display: flex; flex-direction: column; gap: 4px; }
.overlay-link {
  display: flex; align-items: baseline; gap: 18px;
  font-family: 'Outfit', sans-serif; font-size: clamp(1.7rem, 6vw, 2.8rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.01em;
  color: rgba(253,253,253,0.35);
  transform: translateX(-16px); opacity: 0;
  transition: color var(--dur) var(--ease-out), transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
.nav-overlay.open .overlay-link { opacity: 1; transform: translateX(0); }
.nav-overlay.open .overlay-links li:nth-child(1) .overlay-link { transition-delay: 0.04s; }
.nav-overlay.open .overlay-links li:nth-child(2) .overlay-link { transition-delay: 0.08s; }
.nav-overlay.open .overlay-links li:nth-child(3) .overlay-link { transition-delay: 0.12s; }
.nav-overlay.open .overlay-links li:nth-child(4) .overlay-link { transition-delay: 0.16s; }
.nav-overlay.open .overlay-links li:nth-child(5) .overlay-link { transition-delay: 0.2s; }
.overlay-link:hover { color: var(--paper); transform: translateX(8px); }
.overlay-num { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: rgba(253,253,253,0.3); min-width: 24px; }
.overlay-contact { margin-top: 44px; display: flex; gap: 26px; flex-wrap: wrap; }
.overlay-contact a { font-size: 0.88rem; color: rgba(253,253,253,0.55); }
.overlay-contact a:hover { color: var(--paper); }


/* =============================================
   NAVBAR
   ============================================= */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  padding: 20px 0;
  transition: background var(--dur) var(--ease-out), padding var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
#navbar.scrolled {
  padding: 12px 0;
  background: rgba(253,253,253,0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line-on-light);
}
.nav-container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-logo { display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.1rem; z-index: 301; position: relative; }
.logo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

.nav-links { display: none; align-items: center; gap: 2px; }
.nav-links a {
  font-size: 0.88rem; font-weight: 500; color: var(--ink);
  padding: 9px 14px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: baseline; gap: 5px;
  transition: background var(--dur) var(--ease-out);
}
.nav-links a:hover { background: var(--paper-2); }
.nav-links a .count { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--muted-on-light); }
.nav-cta-desktop { display: none; }

.nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 14px 10px; z-index: 301; position: relative; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.nav-toggle.open span { background: var(--paper); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta-desktop { display: inline-flex; }
  .nav-toggle { display: none; }
}


/* =============================================
   HERO
   ============================================= */
#hero { padding: clamp(120px, 20vh, 170px) 0 clamp(48px, 8vh, 72px); position: relative; }

/* Sous-titres façon vidéo, révélés pendant la séquence épinglée du hero (desktop/tablette) */
.hero-captions {
  display: none;
  position: fixed; top: 50%; left: max(24px, calc((100vw - 1320px) / 2));
  transform: translateY(-50%);
  width: min(30vw, 300px); text-align: left; pointer-events: none; z-index: 250;
}
@media (min-width: 700px) { .hero-captions { display: block; } }
/* Empilées au même endroit (pas en liste) : une seule ligne visible à la fois, apparaît puis
   disparaît avec le scrub — voir heroPinTl dans script.js pour les fenêtres de scroll. */
.hero-captions .cap {
  position: absolute; top: 0; left: 0; width: 100%;
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: clamp(1rem, 1.9vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: -0.01em; color: var(--ink);
  opacity: 0;
  filter: blur(8px);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-name {
  position: relative;
  z-index: 1;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(3.4rem, 12vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 0 0.28em;
  margin-bottom: clamp(24px, 5vw, 40px);
}
.hero-name .outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  text-stroke: 2px var(--ink);
}
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
  .hero-name .outline { color: var(--ink); -webkit-text-fill-color: unset; }
}
.hero-name .solid { color: var(--ink); }

.hero-body { display: grid; grid-template-columns: 1fr; gap: clamp(8px, 2vw, 16px); align-items: end; }
/* Sous 960px, .hero-body reste en une seule colonne : ce même `gap` sert alors d'espace VERTICAL entre
   .hero-left et .hero-social empilés — 8-16px est pensé pour un gap horizontal desktop, trop serré une
   fois empilé (les pills sociales collaient directement sous la liste de preuves). */
@media (max-width: 959px) { .hero-body { gap: 28px; } }

/* Photo en détourage réel (PNG alpha) : pas de cadre, chevauche le bas de la typo */
.hero-portrait {
  position: relative;
  z-index: 2;
  /* justify-self:center seul ne centre un bloc en flux normal (hors grid) que sur les moteurs les plus
     récents — pas fiable sur tous les navigateurs mobiles réels. margin-inline:auto centre partout,
     de façon universelle, depuis toujours. Les deux sont gardés : justify-self reprend la main si un
     jour .hero-portrait se retrouve dans un contexte grid (ex. desktop ≥960px). */
  justify-self: center;
  margin-inline: auto;
  width: clamp(200px, 30vw, 360px);
  margin-top: clamp(-64px, -9vw, -140px);
  pointer-events: none;
}
.hero-portrait img {
  width: 100%; height: auto; display: block;
  filter: contrast(1.05) drop-shadow(0 24px 34px rgba(10,9,9,0.28));
}
/* drop-shadow() recalcule son masque à chaque frame quand le parent est transformé en continu (notre
   parallax scrub mobile) — sur certains moteurs mobiles ça se recompose mal et clignote en halo
   rectangulaire. Retiré <700px, seul contexte où ce parent bouge au scroll ; contrast() reste (pas de coût). */
@media (max-width: 699px) {
  .hero-portrait img { filter: contrast(1.05); }
  /* Plus de chevauchement négatif avec le nom sur mobile (demande explicite) : la photo doit se
     détacher nettement de "STONE DEV", pas être collée dessous. Le rapprochement visuel reste géré
     par l'animation du pin (script.js), qui l'amène ensuite au centre de l'écran au scroll. */
  .hero-portrait { margin-top: 20px; }

  /* Le pin GSAP réserve un "spacer" dont la hauteur = distance de pin (900px) + hauteur NATURELLE (hors
     pin) de #hero. Avec .hero-body (pitch + CTA + réseaux, ~512px) en flux normal, cette hauteur
     naturelle gonflait à ~1090px → spacer de ~1990px → ~270px d'écran totalement blanc à combler au
     scroll une fois le pin relâché (mesuré). En sortant .hero-body du flux (position:absolute, ancré
     exactement à sa position actuelle via `top`, donc aucun changement visuel au repos), #hero ne
     contribue plus que la hauteur du statut+nom+photo (~340px) à son propre calcul de hauteur naturelle
     → spacer très allégé, gap résiduel après le pin quasi éliminé. */
  #hero .container { position: relative; }
  .hero-body { position: absolute; top: 339px; left: 0; right: 0; }
}

.hero-left { max-width: 480px; }
.hero-left h2 {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.3;
  letter-spacing: -0.01em; margin-bottom: 16px;
}
.hero-left h2 .accent-line { display: block; color: var(--muted-on-light); font-weight: 500; }
.hero-left > p { color: var(--muted-on-light); max-width: 42ch; line-height: 1.7; margin-bottom: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.hero-proof { font-size: 0.78rem; color: var(--muted-on-light); letter-spacing: 0.02em; }

/* Preuves mobile : équivalent de .hero-captions/.cap desktop, mais en overlay ancré dans #hero
   (position:relative) plutôt qu'en position:fixed — le pin mobile applique position:fixed directement
   à #hero (pas un transform sur un wrapper), donc pas besoin d'échapper le pin comme sur desktop.
   Placées en absolu (pas dans le flux) : sinon, une fois après .hero-body dont l'espace réservé reste
   occupé même à opacity:0 pendant le pin, elles se retrouveraient loin en bas de la zone épinglée.
   Une seule ligne visible à la fois (empilées), révélées par le scrub du pin dans script.js — pas au
   chargement, pour rester synchronisées au scroll comme sur desktop. */
.hero-proof-list {
  position: absolute; left: 24px; right: 24px; top: 66%;
  text-align: center; pointer-events: none;
}
.hero-proof-list li {
  position: absolute; left: 0; right: 0; top: 0;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.05rem;
  color: var(--ink); opacity: 0;
}
@media (min-width: 700px) { .hero-proof-list { display: none; } }

.hero-social { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 760px) { .hero-social { flex-direction: column; align-items: flex-end; } }

@media (min-width: 960px) {
  .hero-body { grid-template-columns: 1fr auto; align-items: end; }
}


/* =============================================
   MARQUEE
   ============================================= */
.marquee-band { border-top: 1px solid var(--line-on-light); border-bottom: 1px solid var(--line-on-light); padding: 18px 0; overflow: hidden; }
.marquee-track { display: flex; gap: 44px; width: max-content; animation: marquee 26s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.marquee-track span { font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; letter-spacing: 0.06em; color: var(--muted-on-light); white-space: nowrap; text-transform: uppercase; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }


/* =============================================
   RÉALISATIONS — grille 2 colonnes + filtres texte
   ============================================= */
.work-filters { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(28px, 4vw, 40px); }
.work-tabs { display: flex; gap: clamp(16px, 3vw, 30px); flex-wrap: wrap; }
.work-tab { font-size: 0.94rem; font-weight: 500; color: var(--muted-on-light); cursor: pointer; background: none; border: none; padding: 10px 2px; position: relative; transition: transform var(--dur-fast) var(--ease-out); }
.work-tab:active { transform: scale(0.94); }
.work-tab.active { color: var(--ink); font-weight: 700; }
.work-tab.active::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--ink); }

.work-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px); }
@media (min-width: 780px) { .work-grid { grid-template-columns: 1fr 1fr; } }

.work-card { display: flex; flex-direction: column; }
.work-card[hidden] { display: none; }

.work-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  margin-bottom: 20px;
  transition: transform var(--dur) var(--ease-out);
}
.work-card:hover .work-thumb { transform: translateY(-4px); }
.work-thumb:active { transform: scale(0.98); }

.work-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-pill); padding: 6px 12px;
}
.work-badge.badge-soon { background: rgba(253,253,253,0.85); }

.work-view {
  position: absolute; top: 50%; left: 50%; margin: -24px 0 0 -24px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; scale: 0.7;
  z-index: 2; pointer-events: none;
}
.work-view svg { width: 18px; height: 18px; }

.work-thumb-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  will-change: transform, clip-path;
}

.work-info h3 { font-family: 'Outfit', sans-serif; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700; margin-bottom: 10px; }
.work-info > p { color: var(--muted-on-light); font-size: 0.92rem; line-height: 1.65; margin-bottom: 14px; }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.work-tags span { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; border: 1px solid var(--line-on-light); border-radius: var(--radius-pill); padding: 5px 11px; color: var(--muted-on-light); }

/* tilt-stack decoration in the SEO/GEO accordion panel — vraies captures */
.tilt-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }


/* =============================================
   CASE STUDY — Mali Mannol (preuve SEO/GEO)
   ============================================= */
#case-study { border-top: 1px solid var(--line-on-light); }
.case-layout { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 56px); align-items: center; position: relative; z-index: 1; }
.case-text p { color: var(--muted-on-light); font-size: 1.02rem; line-height: 1.8; margin-bottom: 26px; max-width: 52ch; }
.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 28px; }
.fact-chip { border: 1px solid var(--line-on-light); border-radius: var(--radius); padding: 18px 16px; min-width: 0; }
.fact-chip strong { display: block; font-family: 'Outfit', sans-serif; font-size: 1.5rem; color: var(--ink); margin-bottom: 6px; }
.fact-chip span { display: block; font-size: 0.78rem; color: var(--muted-on-light); line-height: 1.5; }

.case-mockup { position: relative; background: #08152B; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 30px 60px -25px rgba(0,0,0,0.35); }
.case-mockup-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 14px 18px; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); }
.case-mockup-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); }
.case-mockup-url { margin-left: 10px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: rgba(255,255,255,0.6); }
.case-mockup-frame { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.case-mockup-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  will-change: transform, clip-path;
}
.case-mockup-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: #08152B;
  background: #F5C200; border-radius: var(--radius-pill); padding: 6px 12px;
}

@media (min-width: 960px) { .case-layout { grid-template-columns: 1fr 1fr; } }


/* =============================================
   EXPERTISE — accordion
   ============================================= */
#services { border-top: 1px solid var(--line-on-light); }

.acc { display: flex; flex-direction: column; position: relative; z-index: 1; }
.acc-item { border-bottom: 1px solid var(--line-on-light); }
.acc-item:first-child { border-top: 1px solid var(--line-on-light); }

.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: clamp(20px, 3vw, 28px) 4px;
  transition: background var(--dur-fast) var(--ease-out);
}
.acc-trigger:active { background: var(--paper-2); }
.acc-trigger h3 {
  font-family: 'Outfit', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 4vw, 2.4rem); letter-spacing: -0.01em;
  transition: opacity var(--dur) var(--ease-out);
}
.acc-trigger .acc-num { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--muted-on-light); margin-right: 14px; }
.acc-trigger .acc-icon {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-on-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.acc-trigger .acc-icon svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.acc-item.open .acc-trigger .acc-icon { background: var(--ink); border-color: var(--ink); }
.acc-item.open .acc-trigger .acc-icon svg { color: var(--paper); transform: rotate(135deg); }

.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-in-out); }
.acc-panel-inner { overflow: hidden; }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }

.acc-content {
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-lg);
  margin: 0 4px clamp(20px, 3vw, 28px);
  padding: clamp(24px, 4vw, 36px);
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
}
@media (min-width: 860px) { .acc-content { grid-template-columns: 1.3fr 1fr; } }
.acc-content p { color: rgba(253,253,253,0.65); line-height: 1.75; margin-bottom: 20px; max-width: 52ch; }
.acc-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.acc-list li { display: flex; gap: 10px; font-size: 0.9rem; color: rgba(253,253,253,0.9); align-items: flex-start; }
.acc-list li svg { width: 15px; height: 15px; color: var(--paper); flex-shrink: 0; margin-top: 3px; }
.acc-content .btn-light { border-color: rgba(253,253,253,0.3); }
.acc-content .btn-light:hover { border-color: var(--paper); }

.acc-visual { display: none; }
@media (min-width: 860px) { .acc-visual { display: block; } }
.tilt-stack { position: relative; height: 220px; }
.tilt-card {
  position: absolute; width: 78%; aspect-ratio: 16/10;
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 40px -15px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
}
.tilt-card.t1 { top: 0; left: 0; transform: rotate(-7deg); z-index: 1; }
.tilt-card.t2 { top: 30px; left: 20%; transform: rotate(4deg); z-index: 2; }


/* =============================================
   PARCOURS — panneau sombre (Expérience + Formation)
   ============================================= */
#resume-wrap { padding: 0 0 var(--space-section); }
.resume-panel {
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 6vw, 64px);
  position: relative; overflow: hidden;
}
.resume-panel .ghost-text { color: var(--paper); }
.resume-panel .section-head .eyebrow { color: rgba(253,253,253,0.55); }
.resume-panel .section-head h2 { color: var(--paper); }
.resume-panel .section-meta { color: rgba(253,253,253,0.5); }
.resume-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }

.resume-decor { position: absolute; top: 10%; right: 6%; display: none; }
@media (min-width: 900px) { .resume-decor { display: block; } }

.cv-grid { display: grid; grid-template-columns: 1fr; gap: 40px; position: relative; z-index: 1; }
@media (min-width: 760px) { .cv-grid { grid-template-columns: 1fr 1fr; gap: 60px; } }

.cv-col-title { font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(253,253,253,0.5); margin-bottom: 22px; }
.cv-list { display: flex; flex-direction: column; }
.cv-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-on-dark); transition: border-color var(--dur) var(--ease-out); }
.cv-item:hover { border-color: rgba(255,255,255,0.4); }
.cv-item:first-child { border-top: 1px solid var(--line-on-dark); }
.cv-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cv-info strong { font-size: 0.94rem; font-weight: 600; color: var(--paper); }
.cv-info span { font-size: 0.82rem; color: rgba(253,253,253,0.55); }
.cv-date { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: rgba(253,253,253,0.55); border: 1px solid var(--line-on-dark); padding: 4px 11px; border-radius: var(--radius-pill); white-space: nowrap; flex-shrink: 0; }


/* =============================================
   COMPÉTENCES — liste à rangées (identique au motif /SERVICE)
   ============================================= */
.skills-list { position: relative; z-index: 1; display: flex; flex-direction: column; }
.skills-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(18px, 3vw, 26px) 4px;
  border-bottom: 1px solid var(--line-on-light);
}
.skills-row:first-child { border-top: 1px solid var(--line-on-light); }
.skills-row h3 {
  font-family: 'Outfit', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.25rem, 3.6vw, 2.1rem); letter-spacing: -0.01em;
}
.skills-row .skills-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--muted-on-light); flex-shrink: 0; }


/* =============================================
   CTA finale
   ============================================= */
#cta { text-align: center; }
#cta .status-pill { margin-bottom: 28px; }
#cta h2 { font-size: clamp(2.4rem, 7vw, 5rem); text-transform: uppercase; max-width: 18ch; margin: 0 auto 20px; }
#cta > .container > p { color: var(--muted-on-light); max-width: 56ch; margin: 0 auto 32px; font-size: 1.05rem; line-height: 1.7; }
.cta-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 48px; }


/* =============================================
   CONTACT
   ============================================= */
#contact { border-top: 1px solid var(--line-on-light); }
.contact-wrapper { display: grid; grid-template-columns: 1fr; gap: 44px; position: relative; z-index: 1; }
@media (min-width: 960px) { .contact-wrapper { grid-template-columns: 0.8fr 1.2fr; gap: 72px; } }
.contact-info > p { color: var(--muted-on-light); line-height: 1.75; max-width: 44ch; margin-bottom: 26px; }
.contact-details { display: flex; flex-direction: column; gap: 14px; }
.contact-item { display: flex; align-items: center; gap: 12px; font-size: 0.94rem; }
.contact-item svg { width: 17px; height: 17px; flex-shrink: 0; }

.contact-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form-group label { font-size: 0.84rem; font-weight: 500; color: var(--muted-on-light); }
.label-optional { color: #b5b5b5; font-weight: 400; }
.form-group input, .form-group textarea, .form-group select {
  background: var(--paper); border: 1px solid var(--line-on-light); border-radius: var(--radius-sm);
  padding: 13px 16px; color: var(--ink);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none; border-color: var(--accent); background: var(--paper-2);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-success { font-size: 0.88rem; color: #1c7a41; background: rgba(52,199,111,0.1); border: 1px solid rgba(52,199,111,0.3); border-radius: var(--radius-sm); padding: 12px 16px; }


/* =============================================
   FOOTER
   ============================================= */
footer { padding: 40px 0; border-top: 1px solid var(--line-on-light); }
.footer-inner { display: flex; flex-direction: column; gap: 24px; }
.footer-copy { font-size: 0.82rem; color: var(--muted-on-light); margin-top: 8px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-nav a { font-size: 0.88rem; color: var(--muted-on-light); transition: color var(--dur) var(--ease-out); }
.footer-nav a:hover { color: var(--ink); }
.footer-right { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-email { font-size: 0.9rem; }
.footer-links { display: flex; gap: 16px; }
.footer-links a { font-size: 0.8rem; color: #b5b5b5; }
.footer-links a:hover { color: var(--muted-on-light); }
@media (min-width: 860px) {
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .footer-right { align-items: flex-end; }
}

/* =============================================
   BLOG / ARTICLE — pages statiques, léger (pas de GSAP)
   ============================================= */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.76rem;
  color: var(--muted-on-light); margin-bottom: clamp(24px, 5vw, 40px);
}
.breadcrumb a { color: var(--muted-on-light); transition: color var(--dur) var(--ease-out); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span[aria-hidden] { opacity: 0.5; }

.article-hero { padding-top: clamp(96px, 15vh, 140px); padding-bottom: 0; }
.article-hero h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.08; letter-spacing: -0.02em;
  max-width: 18ch;
}
.article-meta {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 20px; font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; color: var(--muted-on-light);
}
.article-lede {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--muted-on-light);
  max-width: 62ch;
  margin-top: 22px;
  line-height: 1.65;
}

.article-body { max-width: 720px; padding-top: clamp(2rem, 5vw, 3.5rem); }
.article-body h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  text-transform: none; letter-spacing: -0.01em;
  margin: 2.4em 0 0.7em;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: 1.05rem; margin: 1.8em 0 0.5em;
}
.article-body p { margin-bottom: 1.1em; color: var(--ink-2); }
.article-body ul, .article-body ol { margin: 0 0 1.4em; padding-left: 1.3em; color: var(--ink-2); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.5em; line-height: 1.6; }
.article-body strong { font-weight: 700; color: var(--ink); }
.article-body a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
.article-body a:not(.btn):hover { color: var(--accent); }

.price-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 1.6em 0 2em; }
@media (min-width: 720px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price-card { border: 1px solid var(--line-on-light); border-radius: var(--radius); padding: 22px 20px; }
.price-card.featured { border-color: var(--ink); background: var(--paper-2); }
.price-card .price-label { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--muted-on-light); text-transform: uppercase; letter-spacing: 0.04em; }
.price-card .price-amount { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.7rem; margin: 8px 0 10px; letter-spacing: -0.02em; }
.price-card .price-desc { font-size: 0.86rem; color: var(--muted-on-light); line-height: 1.55; }

.article-cta {
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 5vw, 44px);
  margin: 2.5em 0;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.article-cta h3 { font-size: clamp(1.3rem, 3vw, 1.7rem); text-transform: none; }
.article-cta p { color: var(--muted-on-dark); margin: 0; }
.article-cta .btn-dark { background: var(--paper); color: var(--ink); }
.article-cta .btn-dark:hover { background: var(--paper-2); }

.author-bio {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 2.8em; padding-top: 1.8em; border-top: 1px solid var(--line-on-light);
}
.author-bio img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-bio strong { display: block; font-family: 'Outfit', sans-serif; font-size: 1rem; margin-bottom: 4px; }
.author-bio p { margin: 0 0 8px; color: var(--muted-on-light); font-size: 0.88rem; line-height: 1.55; }
.author-links { display: flex; gap: 14px; }
.author-links a { font-size: 0.82rem; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.author-links a:hover { color: var(--ink); }

.article-faq { margin-top: 2.5em; }
.article-faq-item { padding: 18px 0; border-top: 1px solid var(--line-on-light); }
.article-faq-item:last-child { border-bottom: 1px solid var(--line-on-light); }
.article-faq-item h3 { margin: 0 0 8px; font-size: 1rem; }
.article-faq-item p { margin: 0; color: var(--muted-on-light); font-size: 0.92rem; }

.blog-list { display: grid; grid-template-columns: 1fr; gap: 18px; }
.blog-card {
  display: block; border: 1px solid var(--line-on-light); border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 36px);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.blog-card:hover { border-color: var(--ink); background: var(--paper-2); }
.blog-card .price-label { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: var(--muted-on-light); text-transform: uppercase; letter-spacing: 0.04em; }
.blog-card h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); text-transform: none; margin: 10px 0 10px; letter-spacing: -0.01em; }
.blog-card p { color: var(--muted-on-light); max-width: 60ch; margin-bottom: 14px; }
.blog-card .pill-link { pointer-events: none; }