/* Page d'accueil immersive (Three.js) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ul { list-style: none; }
html { font-size: 16px; scroll-behavior: auto; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; background: #BE3220; }

/* ── Canvas ── */
#canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* ── Nav — Liquid Glass ── */
#main-nav {
  position: fixed; top: 1.1rem; left: 50%; transform: translateX(-50%);
  z-index: 200;
  width: calc(100% - 3rem); max-width: 920px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.75rem;
  border-radius: 2.5rem;
  /* Glass */
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(52px) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(52px) saturate(200%) brightness(1.08);
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(255,255,255,0.07),
    inset 1px 0 0 rgba(255,255,255,0.12),
    inset -1px 0 0 rgba(255,255,255,0.08),
    0 10px 40px rgba(0,0,0,0.22),
    0 2px 8px rgba(0,0,0,0.14);
  overflow: hidden;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
/* Shimmer iridescent */
#main-nav::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(
    112deg,
    rgba(255,255,255,0.22) 0%,
    rgba(190,80,255,0.05) 28%,
    rgba(80,160,255,0.06) 55%,
    rgba(255,200,80,0.04) 78%,
    rgba(255,255,255,0.10) 100%
  );
}
/* Specular spot haut-gauche */
#main-nav::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 45%;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.00) 100%
  );
}
#main-nav.light {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.35);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 8px 32px rgba(0,0,0,0.10),
    0 2px 6px rgba(0,0,0,0.07);
}
#nav-ab-canvas {
  width: 54px; height: 46px; display: block;
  position: relative; z-index: 1; flex-shrink: 0;
}
.logo {
  font-family: 'Playfair Display', serif; font-size: 1.15rem;
  font-weight: 500; font-style: italic; color: rgba(255,255,255,0.92);
  text-decoration: none; position: relative; z-index: 1;
}
#main-nav.light .logo { color: #1A1210; }
.nav-pill { display: flex; }
.nav-links {
  display: flex; gap: 0.2rem; list-style: none;
  position: relative; z-index: 1;
}
.nav-links a {
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em;
  color: #fff; text-decoration: none;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  padding: 0.55rem 1.25rem; border-radius: 2rem;
  transition: background 0.18s, color 0.18s; white-space: nowrap;
}
#main-nav.light .nav-links a { color: #1A1210; text-shadow: none; }
.nav-links a:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
#main-nav.light .nav-links a:hover {
  background: rgba(26,18,16,0.08);
  color: #1A1210;
}

/* ── Role labels ── */
.role-label {
  position: fixed; z-index: 10; pointer-events: none;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5.5vw, 5rem); font-weight: 400;
  color: rgba(255,255,255,0.92); letter-spacing: -0.025em;
  line-height: 1.0; opacity: 0;
}
.role-dev { top: 12%; right: 6%; text-align: right; }
.role-art { bottom: 16%; left: 6%; text-align: left; }

/* ── Page wrapper ── */
.page { position: relative; z-index: 1; }

/* ════════════════════════════════════════
   S1 — HERO
════════════════════════════════════════ */
#hero {
  position: relative; height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  background: transparent; overflow: hidden;
}
.hero-name {
  display: none;
}
@keyframes nameFloat {
  0%, 100% { transform: translate(-50%, -50%) perspective(1400px) rotateX(0deg)   rotateY(-4deg)  translateY(0px);   }
  25%       { transform: translate(-50%, -50%) perspective(1400px) rotateX(1.5deg) rotateY(0deg)   translateY(-14px); }
  50%       { transform: translate(-50%, -50%) perspective(1400px) rotateX(0deg)   rotateY(4deg)   translateY(-20px); }
  75%       { transform: translate(-50%, -50%) perspective(1400px) rotateX(-1deg)  rotateY(0deg)   translateY(-14px); }
}
.hero-name .line {
  display: block; font-family: 'Playfair Display', serif; font-weight: 500;
  font-size: clamp(3.5rem, 10vw, 10rem); color: rgba(255,255,255,0.96);
  text-transform: uppercase; white-space: nowrap;
}
.hero-meta {
  position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  z-index: 10; pointer-events: auto;
  transition: opacity 0.3s ease;
}
.hero-tagline { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.08em; color: rgba(255,255,255,0.65); }
.hero-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em;
  color: #fff; background: rgba(0,0,0,0.2); border: 0.5px solid rgba(255,255,255,0.3);
  padding: 0.75rem 1.5rem; border-radius: 2rem; text-decoration: none;
  transition: background 0.2s; backdrop-filter: blur(8px);
}
.hero-cta:hover { background: rgba(0,0,0,0.35); }
.scroll-hint {
  position: absolute; bottom: 2.5rem; right: 2.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.4;
}
.scroll-hint span { font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; writing-mode: vertical-rl; color: #fff; }
.scroll-line { width: 0.5px; height: 40px; background: #fff; animation: sl 2.2s ease-in-out infinite; }
@keyframes sl {
  0%,100% { transform: scaleY(0); transform-origin: top; }
  50%      { transform: scaleY(1); }
  80%      { transform: scaleY(0); transform-origin: bottom; }
}

/* ════════════════════════════════════════
   S2 — THREE.JS SCROLL ZONE (transparent)
════════════════════════════════════════ */
#scroll-zone { height: 200vh; background: transparent; }
#scroll-zone .sticky-inner {
  position: sticky; top: 0; height: 100vh; background: transparent;
}

/* ════════════════════════════════════════
   S3 — TICKER GÉANT
════════════════════════════════════════ */
#ticker-section {
  background: #F2EDE5; overflow: hidden;
  padding: 2.5rem 0;
}
.ticker-track {
  /* Largeur = contenu (4 copies) : -50 % = exactement 2 copies → boucle sans saut.
     Durée recalculée en JS selon la longueur réelle du texte. */
  display: inline-block; width: max-content; white-space: nowrap; line-height: 1;
  animation: ticker-scroll 60s linear infinite;
  will-change: transform;
}
.ticker-text {
  display: inline;
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(9rem, 16vw, 18rem);
  color: #1A1210; letter-spacing: -0.03em; line-height: 1;
}
.ticker-sep {
  display: inline;
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: clamp(5rem, 10vw, 11rem);
  color: rgba(26,18,16,0.18);
  margin: 0 1.5rem;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ════════════════════════════════════════
   S4-S7 — MOTS SEULS
════════════════════════════════════════ */
.word-section {
  height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #0E0C0A;
}
.word-reveal {
  font-family: 'Inter', sans-serif; font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 700; color: #EDE8DF; letter-spacing: -0.04em;
  text-align: center; opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.word-section.phrase .word-reveal { font-size: clamp(3rem, 8vw, 8rem); }
.word-reveal.visible { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════
   S8 — GRADIENT "les deux."
════════════════════════════════════════ */
#gradient-section { height: 160vh; position: relative; }
#gradient-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gradient-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 90% at 15% 55%, #E84820 60%, transparent),
    radial-gradient(ellipse 65% 80% at 85% 45%, #6030C8 60%, transparent),
    radial-gradient(ellipse 50% 60% at 50% 20%, #C82860 40%, transparent);
  background-color: #200C30;
}
.gradient-noise {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: 0.65;
}
.gradient-text-wrap { position: relative; z-index: 2; text-align: center; }
.gradient-text-outline {
  font-family: 'Inter', sans-serif; font-size: clamp(5rem, 13vw, 13rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.85);
}
.gradient-text-fill {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: clamp(5rem, 13vw, 13rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  color: #fff; opacity: 0;
}

/* ════════════════════════════════════════
   S9 — SPLIT "je les réunis."
════════════════════════════════════════ */
#split-section { height: 220vh; position: relative; background: #F2EDE5; }
#split-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #F2EDE5;
}
.split-blocks {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.split-block {
  width: 50%; height: 100vh; overflow: hidden; flex-shrink: 0;
}
.split-block.left {
  background:
    radial-gradient(ellipse 80% 100% at 80% 50%, #F37E30, #BE3220 80%);
}
.split-block.right {
  background:
    radial-gradient(ellipse 80% 100% at 20% 50%, #7845D0, #4015A0 80%);
}
.split-block::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: 0.5;
}
.split-bridge-text {
  position: absolute; z-index: 10; pointer-events: none;
  font-family: 'Inter', sans-serif; font-size: clamp(2.5rem, 6vw, 6.5rem);
  font-weight: 700; letter-spacing: -0.04em; color: #1A1210;
  opacity: 0; text-align: center; white-space: nowrap;
}

/* ════════════════════════════════════════
   S10 — AUJOURD'HUI
════════════════════════════════════════ */
#aujourdhui {
  height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #F2EDE5;
}
.auj-word {
  font-family: 'Inter', sans-serif; font-size: clamp(4rem, 11vw, 11rem);
  font-weight: 700; letter-spacing: -0.04em; color: #1A1210;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.auj-word.visible { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════
   ABOUT — redesign cinématique centré
════════════════════════════════════════ */
#about {
  background: transparent;
  max-width: 860px; margin: 0 auto;
  padding: 8rem 2rem; width: 100%;
  text-align: center; position: relative; z-index: 2;
}
.abt-eyebrow {
  display: block; font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #F37E30; margin-bottom: 2rem;
}
.abt-big {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: clamp(3.2rem, 8.5vw, 8.5rem); font-weight: 400;
  line-height: 1.0; letter-spacing: -0.03em; color: #EDE8DF;
  margin-bottom: 0.75rem;
}
.abt-big em { color: #BE3220; font-style: italic; }
.abt-caption {
  font-size: 0.8125rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(237,232,223,0.32);
  margin-bottom: 4rem;
}
.abt-desc {
  font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.8;
  color: rgba(237,232,223,0.62); max-width: 52ch;
  margin: 0 auto 2.5rem;
}
.abt-desc strong { color: #EDE8DF; font-weight: 500; }
.abt-statement {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  color: rgba(237,232,223,0.9); line-height: 1.3;
  max-width: 38ch; margin: 0 auto 5rem;
}
.abt-nums {
  display: flex; justify-content: center; align-items: center;
  gap: 4rem; margin-bottom: 4rem;
}
.abt-num-item { text-align: center; }
.abt-num {
  display: block; font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 5.5vw, 5.5rem); font-weight: 400;
  color: #EDE8DF; letter-spacing: -0.04em; line-height: 1;
}
.abt-num-l {
  display: block; font-size: 0.6875rem;
  color: rgba(237,232,223,0.32);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.4rem;
}
.abt-vbar { width: 0.5px; height: 4rem; background: rgba(237,232,223,0.1); flex-shrink: 0; }
.abt-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
}
.abt-chip {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em;
  padding: 0.4rem 1rem; border-radius: 2rem;
  border: 0.5px solid rgba(237,232,223,0.16);
  color: rgba(237,232,223,0.5);
}
/* Garder .about-label pour section SEO */
.about-label {
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: #F37E30; margin-bottom: 2rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.about-label::after { content: ''; flex: 0 0 24px; height: 0.5px; background: currentColor; opacity: 0.35; }

/* ════════════════════════════════════════
   ART AU FÉMININ — Showcase
════════════════════════════════════════ */
#aaf {
  background: #0E0C0A; padding: 8rem 2rem;
  display: flex; align-items: center; min-height: 100vh;
}
.aaf-inner { max-width: 1200px; margin: 0 auto; width: 100%; }
.aaf-label {
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: #F37E30; margin-bottom: 2.5rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.aaf-label::after { content: ''; flex: 0 0 24px; height: 0.5px; background: currentColor; opacity: 0.35; }
.aaf-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6rem; align-items: center; }
.aaf-title {
  font-family: 'Playfair Display', serif; font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 400; line-height: 1.0; letter-spacing: -0.03em; color: #EDE8DF;
  margin-bottom: 1.5rem;
}
.aaf-title em { color: #BE3220; font-style: italic; }
.aaf-body { font-size: 1rem; color: rgba(237,232,223,0.55); line-height: 1.75; margin-bottom: 2.5rem; max-width: 48ch; }
.aaf-link {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em;
  color: #EDE8DF; border-bottom: 0.5px solid rgba(237,232,223,0.3);
  padding-bottom: 0.25rem; text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.aaf-link:hover { color: #BE3220; border-color: #BE3220; }
.aaf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.aaf-stat-box {
  background: rgba(237,232,223,0.04); border: 0.5px solid rgba(237,232,223,0.08);
  border-radius: 12px; padding: 1.5rem;
}
.aaf-stat-n {
  font-family: 'Playfair Display', serif; font-size: 3rem;
  color: #EDE8DF; font-weight: 400; letter-spacing: -0.04em; line-height: 1;
}
.aaf-stat-l { font-size: 0.8rem; color: rgba(237,232,223,0.35); margin-top: 0.35rem; line-height: 1.4; }

/* ════════════════════════════════════════
   SEO — Visibilité (sticky scroll + cards)
════════════════════════════════════════ */
#seo-section { height: 700vh; position: relative; }
#seo-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3rem; padding: 4rem 8vw;
  background: #0E0C0A;
}
#seo-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block; pointer-events: none;
}
.seo-header { text-align: center; position: relative; z-index: 1; }
.seo-title {
  font-family: 'Playfair Display', serif; font-size: clamp(2.6rem, 5vw, 4.5rem);
  font-weight: 400; line-height: 1.08; letter-spacing: -0.025em; color: #EDE8DF;
}
.seo-title em { color: #BE3220; font-style: italic; }
#seo-section .about-label { color: #F37E30; }
#seo-section .about-label::after { background: #F37E30; }
.seo-cards-wrap {
  display: flex; flex-direction: column; gap: 0.55rem;
  width: 100%; max-width: 700px;
  position: relative; z-index: 1;
}
.seo-card {
  display: flex; align-items: center; gap: 1.75rem;
  background: rgba(237,232,223,0.08);
  border: 1px solid rgba(237,232,223,0.22);
  border-radius: 12px; padding: 1.25rem 2rem;
  opacity: 0; transform: translateY(28px);
  will-change: opacity, transform;
}
.seo-card-n {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 2rem; font-weight: 400; line-height: 1;
  color: rgba(190,50,32,0.75); flex-shrink: 0;
  letter-spacing: -0.03em; width: 2.4rem; text-align: right;
}
.seo-card-title {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 1.05rem; font-weight: 400;
  color: #EDE8DF; line-height: 1.4; margin: 0;
}
.seo-dots {
  display: flex; gap: 0.5rem; align-items: center;
  position: relative; z-index: 1;
}
.seo-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(237,232,223,0.15);
  transition: background 0.35s, transform 0.35s;
}
.seo-dot.active { background: #BE3220; transform: scale(1.5); }
@media (max-width: 768px) {
  .seo-card { gap: 1.25rem; padding: 1rem 1.25rem; }
  .seo-card-title { font-size: 0.9rem; }
}

/* ════════════════════════════════════════
   CONSEILS — Cards éditoriales
════════════════════════════════════════ */
/* La section reste à l'écran le temps que les lettres se rejoignent (cf. immersive.js) */
#conseils { background: #0E0C0A; height: 220vh; position: relative; }
.conseils-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 0 2rem; text-align: center;
}
.cl { display: inline-block; will-change: transform, opacity; }
.conseils-title {
  font-family: 'Playfair Display', serif; font-size: clamp(2.3rem, 7.5vw, 7rem);
  font-weight: 400; color: #EDE8DF; letter-spacing: -0.03em; line-height: 1.05;
}
.conseils-title em { color: #BE3220; font-style: italic; transition: color 0.4s; }

/* Titre cliquable qui ondule ; l'amplitude grandit au survol (--amp animée via @property) */
@property --amp { syntax: '<length>'; inherits: true; initial-value: 0px; }
.conseils-link {
  --amp: 0.06em;
  display: inline-block; color: inherit; text-decoration: none;
  transition: --amp 0.6s cubic-bezier(0.2, 0, 0, 1);
}
.conseils-link:hover, .conseils-link:focus-visible { --amp: 0.16em; }
.conseils-link:hover em, .conseils-link:focus-visible em { color: #F37E30; }
.cw-word { display: inline-block; white-space: nowrap; }
.cw { display: inline-block; animation: conseilWave 2.8s ease-in-out infinite; }
@keyframes conseilWave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-1 * var(--amp))); }
}
.conseils-arrow {
  display: inline-block; margin-left: 0.25em; font-style: normal;
  font-size: 0.6em; vertical-align: 0.15em; color: #F37E30;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.conseils-link:hover .conseils-arrow { transform: translateX(0.2em); }

/* ════════════════════════════════════════
   CTA — Travaillons ensemble
════════════════════════════════════════ */
/* Scène du bouton 3D : la section dure un peu plus d'un écran pour l'entrée au scroll */
#contact { position: relative; height: 160vh; }
.cta3d-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
.cta3d {
  position: relative; width: min(1100px, 100%);
  height: clamp(260px, 38vw, 440px);
}
#cta3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Lien réel, invisible, calé par immersive.js sur la silhouette du bouton 3D */
.cta3d-link {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  border-radius: 999px; color: transparent; font-size: 1px; overflow: hidden;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cta3d-link:focus-visible { outline: 2px solid #F37E30; outline-offset: 6px; }

/* Repli sans WebGL : beau bouton CSS en dégradé */
.cta3d--fallback #cta3d-canvas { display: none; }
.cta3d--fallback .cta3d-link {
  left: 50% !important; top: 50% !important; width: auto !important; height: auto !important;
  transform: translate(-50%, -50%); overflow: visible; white-space: nowrap;
  font-size: clamp(1rem, 2.4vw, 1.5rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; padding: 1.4rem 3rem;
  background: linear-gradient(110deg, #F37E30, #BE3220 50%, #7845D0);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 12px 0 #5a1810, 0 24px 50px rgba(0,0,0,0.5);
  transition: transform 0.15s, box-shadow 0.15s;
}
.cta3d--fallback .cta3d-link:active { transform: translate(-50%, calc(-50% + 6px)) scale(0.98); box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 6px 0 #5a1810, 0 14px 30px rgba(0,0,0,0.5); }

/* ════════════════════════════════════════
   S11 — TOOLKIT (fan cards)
════════════════════════════════════════ */
#toolkit { height: 340vh; background: #0E0C0A; }
#toolkit-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 5rem; overflow: hidden;
}
.toolkit-header { text-align: center; margin-bottom: 3rem; flex-shrink: 0; }
.toolkit-title {
  font-family: 'Inter', sans-serif; font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700; color: #EDE8DF; letter-spacing: -0.04em; line-height: 1;
}
.toolkit-sub {
  font-size: 1rem; font-weight: 400; color: rgba(237,232,223,0.4);
  letter-spacing: 0.01em; margin-top: 0.5rem; transition: opacity 0.4s;
}
.toolkit-stage {
  position: relative; flex: 1; width: 100%;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 2.5rem;
}
.tk-card {
  --tx: 0px; --ty: 60px; --rot: 0deg;
  position: absolute;
  width: 230px; height: 300px; border-radius: 20px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1rem; padding: 1.5rem;
  transform-origin: center 88%;
  transform: translate(var(--tx), calc(var(--ty) + var(--lift))) rotate(var(--rot));
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 18px 40px rgba(0,0,0,0.35);
  transition: --lift 0.35s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.35s;
  will-change: transform;
}
/* Même soulèvement au survol que les cartes « Pour qui » */
.tk-card:hover {
  --lift: -28px; z-index: 20 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 30px 60px rgba(0,0,0,0.5);
}
.tk-card-name {
  font-family: 'Inter', sans-serif; font-size: 2rem;
  font-weight: 700; letter-spacing: -0.04em;
  text-align: center; line-height: 1.05; white-space: pre-line;
}
.tk-badge {
  padding: 0.35rem 0.9rem; border-radius: 2rem;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ════════════════════════════════════════
   S12 — PROJETS
════════════════════════════════════════ */
#projets { height: 300vh; position: relative; }
#projets-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: #F2EDE5;
  display: flex; align-items: center; justify-content: center;
}
.projets-inner { text-align: center; padding: 0 2rem; }
.projets-title {
  font-family: 'Inter', sans-serif; font-size: clamp(2.2rem, 5vw, 4.5rem);
  font-weight: 700; color: #1A1210; letter-spacing: -0.04em; margin-bottom: 1.5rem;
}
.projet-item {
  display: block;
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 400;
  color: #1A1210; line-height: 1.65; text-decoration: none;
}
.projets-inner:hover .projet-item { opacity: 0.15; transition: opacity 0.3s; }
.projet-item:hover { opacity: 1 !important; }
.projet-meta {
  display: inline-block; margin-left: 0.75rem;
  font-family: 'Inter', sans-serif; font-style: normal;
  font-size: clamp(0.6rem, 0.9vw, 0.72rem); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(26,18,10,0.3); vertical-align: middle;
}
@keyframes projCharIn {
  0%   { opacity: 0; transform: translateY(38px); }
  65%  { opacity: 1; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}
.proj-char { display: inline-block; opacity: 0; }
.projet-item.revealed .proj-char {
  animation: projCharIn 0.75s cubic-bezier(0.23,1,0.32,1) forwards;
}

/* ════════════════════════════════════════
   S13 — FIN / FOOTER  (blocs qui s'écartent)
════════════════════════════════════════ */
#fin { height: 320vh; position: relative; }
#fin-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: #0E0C0A;
}
/* Les deux blocs coulissants — même palette que "je les réunis." */
.fin-blocks {
  position: absolute; inset: 0; display: flex; z-index: 2; pointer-events: none;
}
.fin-block {
  width: 50%; height: 100%; position: relative; will-change: transform;
}
.fin-block.left {
  background: radial-gradient(ellipse 80% 100% at 80% 50%, #F37E30, #BE3220 80%);
}
.fin-block.right {
  background: radial-gradient(ellipse 80% 100% at 20% 50%, #7845D0, #4015A0 80%);
}
.fin-block::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: 0.5;
}
/* Contenu footer — révélé derrière les blocs */
.fin-content {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; will-change: opacity;
}
.footer-band {
  padding: 4rem 5vw 3rem;
  display: grid; grid-template-columns: 1fr auto auto; gap: 4rem; align-items: start;
}
.footer-cta-main {
  font-family: 'Inter', sans-serif; font-size: clamp(1.1rem, 2vw, 1.75rem);
  font-weight: 500; color: #EDE8DF; line-height: 1.4; margin-bottom: 1.25rem;
}
.footer-cta-sub { font-size: 0.8125rem; color: rgba(237,232,223,0.45); letter-spacing: 0.04em; }
.footer-nav-title {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(237,232,223,0.45); margin-bottom: 1rem;
}
.footer-nav a {
  display: block; font-size: 0.9rem; color: rgba(237,232,223,0.7);
  text-decoration: none; margin-bottom: 0.5rem; transition: color 0.2s;
}
.footer-nav a:hover { color: #EDE8DF; }
.footer-bottom {
  border-top: 0.5px solid rgba(255,255,255,0.12);
  padding: 1.25rem 5vw;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.72rem; color: rgba(237,232,223,0.3); letter-spacing: 0.04em;
}

/* ════════════════════════════════════════
   REVEAL — entrée au scroll (toutes sections)
════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 768px) {
  #main-nav .nav-links li:not(.nav-contact) { display: none; }
  .role-label { font-size: clamp(1.5rem, 7vw, 2.5rem); }
  .split-bridge-text { white-space: normal; padding: 0 1rem; max-width: 60vw; }
  #about { grid-template-columns: 1fr; gap: 3rem; }
  .about-right { padding-top: 0; }
  .aaf-grid { grid-template-columns: 1fr; gap: 3rem; }
  .aaf-stats { grid-template-columns: 1fr 1fr; }
  .seo-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-band { grid-template-columns: 1fr; gap: 2rem; }
  .fin-giant { font-size: clamp(5rem, 15vw, 9rem); }
}

/* ════════════════════════════════════════
   ACCESSIBILITÉ & UTILITAIRES
════════════════════════════════════════ */
.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;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 1000;
  background: #EDE8DF; color: #0E0C0A; padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 8px; font-size: 0.875rem; font-weight: 500;
  text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid #F37E30; outline-offset: 3px; }
.nav-home { display: block; position: relative; z-index: 1; border-radius: 1rem; }
.dark-band { background: #0E0C0A; }

.text-link {
  display: inline-block; margin-top: 3rem;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em;
  color: #EDE8DF; text-decoration: none;
  border-bottom: 0.5px solid rgba(237,232,223,0.3); padding: 0.5rem 0 0.25rem;
  transition: color 0.2s, border-color 0.2s;
}
.text-link:hover { color: #F37E30; border-color: #F37E30; }
.link-row { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: baseline; }
.link-row .text-link { margin-top: 0; }
.link-row--center { justify-content: center; margin-top: 2.5rem; }

/* ════════════════════════════════════════
   SECTIONS STANDARD (secteurs, avis, tarifs, FAQ)
════════════════════════════════════════ */
.std-section { background: #0E0C0A; padding: 9rem 2rem; color: #EDE8DF; }
.std-inner { max-width: 1200px; margin: 0 auto; }
.std-inner--narrow { max-width: 820px; }
.std-title {
  font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 5.5vw, 4.75rem);
  font-weight: 400; line-height: 1.04; letter-spacing: -0.03em; color: #EDE8DF;
  margin-bottom: 1.75rem; text-wrap: balance;
}
.std-title em { color: #BE3220; font-style: italic; }

/* Pour qui — cartes secteurs en éventail (cf. « Ma palette ») */
@property --lift { syntax: '<length>'; inherits: false; initial-value: 0px; }
#secteurs, .fan-section { height: 230vh; position: relative; }
#secteurs-sticky, .fan-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 6.5rem 2rem 0;
}
.secteurs-header { text-align: center; max-width: 820px; flex-shrink: 0; }
.secteurs-label { justify-content: center; margin-bottom: 1.25rem; }
.secteurs-label::after { display: none; }
.secteurs-title {
  font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3.8vw, 3.6rem);
  font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; color: #EDE8DF;
  text-wrap: balance;
}
.secteurs-title em { color: #BE3220; font-style: italic; }
.secteurs-lead {
  margin: 1.25rem auto 0; max-width: 56ch;
  font-size: 0.975rem; line-height: 1.7; color: rgba(237,232,223,0.55); text-wrap: balance;
}
.secteurs-stage {
  position: relative; flex: 1; width: 100%;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 2.5rem;
}
.sc-item {
  --tx: 0px; --ty: 60px; --rot: 0deg;
  position: absolute; opacity: 0;
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
  transform-origin: center 88%;
  will-change: transform;
}
.sc-item:hover, .sc-item:focus-within { z-index: 10; }
.sc-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; width: 230px; height: 300px; padding: 1.75rem 1.5rem;
  border-radius: 20px; text-decoration: none;
  background: var(--bg); color: var(--fg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 18px 40px rgba(0,0,0,0.35);
  transform: translateY(var(--lift));
  transition: --lift 0.35s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.35s;
}
.sc-card:hover, .sc-card:focus-visible {
  --lift: -28px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 30px 60px rgba(0,0,0,0.5);
}
.sc-card:active { transform: translateY(var(--lift)) scale(0.97); }
.sc-n {
  position: absolute; top: 1.25rem; left: 1.4rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.sc-name {
  font-family: 'Inter', sans-serif; font-size: 1.6rem; font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.05; text-align: center; white-space: pre-line;
}
.sc-badge {
  padding: 0.35rem 0.9rem; border-radius: 2rem; background: var(--badge);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.05em; white-space: nowrap; opacity: 0.9;
}
.sc-arrow {
  position: absolute; bottom: 1.25rem; right: 1.4rem; font-size: 1.1rem;
  opacity: 0.5; transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1), opacity 0.35s;
}
.sc-card:hover .sc-arrow, .sc-card:focus-visible .sc-arrow { opacity: 1; transform: translateX(4px); }
.sc-card:focus-visible { outline: 2px solid #F37E30; outline-offset: 4px; }

/* Mobile : grille 2 colonnes de cartes légèrement inclinées, pas d'éventail */
@media (max-width: 768px) {
  #secteurs, .fan-section { height: auto; padding: 6rem 1.25rem; }
  #secteurs-sticky, .fan-sticky { position: static; height: auto; padding: 0; overflow: visible; }
  /* Offres : une colonne, cartes à hauteur de contenu */
  .fan-section .secteurs-stage { grid-template-columns: 1fr; gap: 1.5rem; }
  .fan-section .sc-item:nth-child(even) { transform: rotate(1.5deg); }
  .sc-card.sc-card--offer { height: auto; padding: 1.75rem 1.5rem; }
  .secteurs-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
  .sc-item { position: static; opacity: 1; transform: rotate(-1.5deg); }
  .sc-item:nth-child(even) { transform: rotate(1.5deg) translateY(1rem); }
  .sc-card { width: 100%; height: 190px; padding: 1.25rem 0.75rem; gap: 0.75rem; }
  .sc-name { font-size: 1.15rem; }
  .sc-badge { font-size: 0.62rem; padding: 0.3rem 0.6rem; white-space: normal; text-align: center; }

  /* Ma palette : même grille */
  #toolkit { height: auto; padding: 6rem 1.25rem; }
  #toolkit-sticky { position: static; height: auto; padding: 0; overflow: visible; }
  .toolkit-header { margin-bottom: 0; }
  .toolkit-sub { display: none; }
  .toolkit-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; padding-top: 0; }
  .tk-card { position: static; width: 100%; height: 170px; padding: 1.25rem 0.75rem; transform: rotate(-1.5deg); }
  .tk-card:nth-child(even) { transform: rotate(1.5deg) translateY(1rem); }
  .tk-card-name { font-size: 1.3rem; }
}

/* Projets — lien vers toutes les réalisations */
.projets-all {
  display: inline-block; margin-top: 2.5rem;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em;
  color: inherit; opacity: 0.7; text-decoration: underline; text-underline-offset: 4px;
  transition: opacity 0.2s;
}
.projets-all:hover { opacity: 1; }

/* Témoignages — citations éditoriales */
.testi-foot { margin-top: 6rem; text-align: center; }
.testi-rating {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1.1rem; border-radius: 3rem;
  background: rgba(237,232,223,0.05); border: 0.5px solid rgba(237,232,223,0.14);
  font-size: 0.85rem; color: rgba(237,232,223,0.7); text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.testi-rating:hover { border-color: rgba(243,126,48,0.6); color: #EDE8DF; }
.testi-rating strong { color: #EDE8DF; font-weight: 600; font-variant-numeric: tabular-nums; }
.testi-rating-stars { color: #F37E30; letter-spacing: 0.15em; }

.testi {
  position: relative; margin: 0; max-width: 900px;
  padding: 2rem 0 0 0;
}
.testi + .testi { margin-top: 7rem; }
.testi--right { margin-left: auto; }

.testi-quote { margin: 0 0 2.5rem; }
.testi-quote p {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1.12; letter-spacing: -0.02em;
  color: #EDE8DF; text-wrap: balance;
}
.testi-quote em { color: #BE3220; }

/* Mots révélés un par un (découpés par immersive.js) */
.testi-quote[data-reveal] { opacity: 1; transform: none; }
.qw {
  display: inline-block; opacity: 0; transform: translateY(0.35em); filter: blur(6px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.revealed .qw { opacity: 1; transform: none; filter: blur(0); }

.testi-body {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
  max-width: 62ch;
}
.testi--right .testi-body { margin-left: auto; }
.testi-full {
  font-size: 0.975rem; line-height: 1.85; color: rgba(237,232,223,0.55); text-wrap: pretty;
}
.testi-author { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.testi-author-line { width: 2.5rem; height: 1px; background: linear-gradient(90deg, #F37E30, #7845D0); }
.testi-author strong { display: block; font-weight: 500; color: #EDE8DF; font-size: 1rem; }
.testi-role { display: block; font-size: 0.8rem; color: rgba(237,232,223,0.45); margin-top: 0.15rem; }
.testi-source {
  margin-left: auto; font-size: 0.75rem; letter-spacing: 0.08em; color: #F37E30;
  padding: 0.35rem 0.75rem; border-radius: 2rem; border: 0.5px solid rgba(243,126,48,0.35);
}

@media (max-width: 768px) {
  .testi-foot { margin-top: 4rem; }
  .testi + .testi { margin-top: 4.5rem; }
  .testi-source { margin-left: 0; }
  #conseils { height: 200vh; }
  .conseils-sticky { padding: 0 1.25rem; }
  .conseils-arrow { font-size: 0.7em; }
}

/* Footer — contenu partagé avec les autres pages (_includes/footer-content.html) */
.footer-band { grid-template-columns: 1.4fr repeat(4, auto); }
.footer-nav a { padding: 0.3rem 0; margin-bottom: 0.15rem; }
.footer-rdv {
  display: inline-block; margin-top: 1.5rem; padding: 0.7rem 1.4rem;
  font-size: 0.85rem; font-weight: 600; color: #fff; text-decoration: none;
  background: #BE3220; border-radius: 3rem; transition: background-color 0.2s;
}
.footer-rdv:hover { background: #9A2818; }
.footer-cta-sub a { color: rgba(237,232,223,0.55); text-decoration: none; }
.footer-cta-sub a:hover { color: #EDE8DF; }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: rgba(237,232,223,0.7); }

@media (max-width: 992px) {
  .footer-band { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-cta { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .std-section { padding: 6rem 1.25rem; }
  .footer-band { grid-template-columns: 1fr 1fr; padding: 3.5rem 1.25rem 2.5rem; gap: 2rem 1.5rem; }
  .footer-nav a { padding: 0.65rem 0; margin: 0; }
  /* Le footer dépasse la hauteur d'écran : pas de révélation sticky sur mobile */
  #fin { height: auto; }
  #fin-sticky { position: relative; height: auto; overflow: visible; }
  .fin-blocks { display: none; }
  .fin-content { position: relative; opacity: 1 !important; }
  .footer-cta { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .qw { opacity: 1; transform: none; filter: none; transition: none; }
  .cw { animation: none; }
}

/* ════════════════════════════════════════
   MOBILE — corrections responsive
════════════════════════════════════════ */
/* Filet de sécurité : jamais de scroll horizontal (clip ne casse pas les sticky) */
html, body { overflow-x: clip; }

@media (max-width: 768px) {
  /* Qui je suis — chiffres sur une ligne qui tient dans l'écran */
  #about { padding: 6rem 1.25rem; }
  .abt-nums { gap: 1.25rem; margin-bottom: 3rem; }
  .abt-num { font-size: 2.4rem; }
  .abt-vbar { height: 3rem; }
  .abt-statement { margin-bottom: 3.5rem; }

  /* Art au Féminin — grille de stats compacte */
  #aaf { padding: 6rem 1.25rem; min-height: 0; }
  .aaf-grid > * { min-width: 0; }
  .aaf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .aaf-stat-box { padding: 1.1rem; }
  .aaf-stat-n { font-size: 2rem; }

  /* Libellés trop petits pour être lus */
  .abt-eyebrow, .aaf-label, .about-label { font-size: 0.7rem; }

  /* Cibles tactiles ≥ 44px */
  .text-link, .aaf-link, .projets-all {
    display: inline-block; padding-top: 0.75rem; padding-bottom: 0.75rem;
  }
  .aaf-link { padding-bottom: 0.5rem; }
  .footer-cta-sub a { display: inline-block; padding: 0.8rem 0; }
  .footer-legal a { display: inline-block; padding: 0.8rem 0; margin: -0.8rem 0; }
}

@media (max-width: 768px) {
  /* Hero — accroche centrée, bouton sur une ligne */
  .hero-meta { width: calc(100% - 2.5rem); text-align: center; bottom: 18%; }
  .hero-tagline { text-wrap: balance; line-height: 1.6; }
  .hero-cta { white-space: nowrap; }

  /* Projets — noms sur une ligne (chaque lettre est un span animé) */
  .projet-item { font-size: clamp(1.35rem, 6.2vw, 2rem); line-height: 1.9; }
  .proj-name { white-space: nowrap; }
}

/* ════════════════════════════════════════
   FIL ROUGE 3D — les sections sombres laissent voir la scène Three.js
   (fond sombre animé + sculpture iridescente, cf. immersive.js)
════════════════════════════════════════ */
[data-ambient],
[data-ambient] #toolkit-sticky,
[data-ambient] #secteurs-sticky,
[data-ambient] .fan-sticky,
[data-ambient] #projets-sticky { background: transparent !important; }

/* ════════════════════════════════════════
   RESPIRATIONS DE COULEUR — même alternance qu'au début de la page
   (sombre → vermillon → sombre → crème → sombre)
════════════════════════════════════════ */

/* Projets : vermillion plein, rappel du hero */
.band-vermillion,
.band-vermillion #projets-sticky {
  background: radial-gradient(ellipse 90% 80% at 30% 40%, #D2452A, #BE3220 55%, #9A2818);
}
#projets .projets-title,
#projets .projet-item,
#projets .projets-all { color: #EDE8DF; }

/* Témoignages : fond crème éditorial, comme le ticker et « je les réunis. » */
.band-cream { background: #F2EDE5; color: #1A1210; }
.band-cream .testi-quote p { color: #1A1210; }
.band-cream .testi-quote em { color: #BE3220; }
.band-cream .testi-full { color: rgba(26,18,16,0.62); }
.band-cream .testi-author strong { color: #1A1210; }
.band-cream .testi-role { color: rgba(26,18,16,0.55); }
.band-cream .testi-source { color: #BE3220; border-color: rgba(190,50,32,0.35); }
.band-cream .testi-rating {
  background: rgba(26,18,16,0.04); border-color: rgba(26,18,16,0.15); color: rgba(26,18,16,0.7);
}
.band-cream .testi-rating:hover { border-color: #BE3220; color: #1A1210; }
.band-cream .testi-rating strong { color: #1A1210; }
.band-cream .testi-rating-stars { color: #BE3220; }

/* ════════════════════════════════════════
   PAGES INTÉRIEURES (tarifs…) — même univers que l'accueil
   Scène 3D sombre dès le départ, sections [data-ambient] transparentes
════════════════════════════════════════ */
.page-hero {
  min-height: 92vh; display: flex; align-items: center;
  padding: 9rem 2rem 5rem; color: #EDE8DF;
}
.page-hero-inner, .page-inner { max-width: 1200px; margin: 0 auto; width: 100%; }
.page-inner--narrow { max-width: 820px; }
.page-title {
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(3.2rem, 9vw, 8.5rem); line-height: 0.98; letter-spacing: -0.035em;
  color: #EDE8DF; margin-bottom: 2.5rem; text-wrap: balance;
}
.page-title[data-reveal] { opacity: 1; transform: none; }
.page-title em { color: #BE3220; font-style: italic; }
.page-lead {
  max-width: 58ch; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.8;
  color: rgba(237,232,223,0.7); text-wrap: pretty;
}
.page-note { margin-top: 1.75rem; font-size: 0.8rem; letter-spacing: 0.04em; color: rgba(237,232,223,0.45); }

.page-section { padding: 8rem 2rem; color: #EDE8DF; }
.page-h2 {
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -0.03em;
  color: #EDE8DF; margin-bottom: 1.5rem; text-wrap: balance;
}
.page-h2 em { color: #BE3220; font-style: italic; }
.page-text { font-size: 1rem; line-height: 1.8; color: rgba(237,232,223,0.6); max-width: 46ch; margin-bottom: 2.5rem; text-wrap: pretty; }
.page-aside {
  max-width: 70ch; margin: 4rem auto 0; text-align: center;
  font-size: 0.95rem; line-height: 1.8; color: rgba(237,232,223,0.55); text-wrap: balance;
}

/* Offres — mêmes cartes en éventail que « Pour qui », en plus grand pour le contenu */
.sc-card.sc-card--offer {
  width: 270px; height: 390px; padding: 1.5rem 1.4rem 1.4rem;
  align-items: stretch; justify-content: flex-start; gap: 0.75rem; text-align: left;
}
.sc-card--featured { box-shadow: 0 0 0 1px rgba(243,126,48,0.6), 0 24px 60px rgba(190,50,32,0.45); }
.sc-card--offer .offer-name { font-size: 1.45rem; margin-top: 0.25rem; }
.sc-card--offer .offer-price { font-size: 2.3rem; }
.sc-card--offer .offer-list { gap: 0.4rem; padding-top: 0.8rem; }
.sc-card--offer .offer-list li { font-size: 0.82rem; }
.sc-card--offer .offer-cta { margin-top: auto; }
.offer-tag {
  align-self: flex-start; padding: 0.35rem 0.85rem; border-radius: 2rem; background: var(--badge);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.offer-name {
  font-family: 'Inter', sans-serif; font-size: 1.6rem; font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.05; margin-top: 0.5rem;
}
.offer-price {
  font-family: 'Playfair Display', serif; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.offer-price span {
  display: block; margin-top: 0.4rem;
  font-family: 'Inter', sans-serif; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--soft);
}
.offer-list { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 1rem; border-top: 1px solid var(--badge); flex: 1; }
.offer-list li { position: relative; padding-left: 1.1rem; font-size: 0.9rem; line-height: 1.5; color: var(--soft); }
.offer-list li::before { content: '—'; position: absolute; left: 0; opacity: 0.6; }
.offer-for { font-size: 0.8rem; font-style: italic; color: var(--soft); }
.offer-cta {
  display: block; margin-top: 0.5rem; padding: 0.85rem 1rem; border-radius: 3rem; text-align: center;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none;
  color: var(--bg); background: var(--fg);
  transition: transform 0.15s, opacity 0.2s;
}
.offer-cta:hover { opacity: 0.88; }
.offer-cta:active { transform: scale(0.96); }

/* Témoignage centré */
.page-quote { padding: 8rem 2rem; }
.testi--center { margin: 0 auto; text-align: center; max-width: 980px; }
.testi--center .testi-author { justify-content: center; margin-top: 2rem; }
.testi--center .testi-source { margin-left: 0; }

/* Deux colonnes : variables / inclus */
.page-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.num-list { counter-reset: n; display: flex; flex-direction: column; }
.num-list li {
  counter-increment: n; display: flex; gap: 1.25rem; align-items: baseline;
  padding: 1rem 0; border-top: 0.5px solid rgba(237,232,223,0.14);
  font-size: 1rem; line-height: 1.5; color: rgba(237,232,223,0.8);
}
.num-list li::before {
  content: counter(n, decimal-leading-zero); flex-shrink: 0;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; color: #F37E30; font-variant-numeric: tabular-nums;
}
.incl-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.incl-list li {
  padding: 0.7rem 1.1rem; border-radius: 2rem;
  background: rgba(237,232,223,0.05); border: 0.5px solid rgba(237,232,223,0.16);
  font-size: 0.9rem; color: rgba(237,232,223,0.85);
}
.incl-list li::before { content: '✓'; margin-right: 0.5rem; color: #F37E30; }

/* FAQ */
.faq-list { border-top: 0.5px solid rgba(237,232,223,0.14); margin-top: 2rem; }
.faq-item { border-bottom: 0.5px solid rgba(237,232,223,0.14); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.6rem 3rem 1.6rem 0;
  font-family: 'Playfair Display', serif; font-size: 1.3rem; line-height: 1.35; color: #EDE8DF;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  font-family: 'Inter', sans-serif; font-weight: 300; font-size: 1.5rem; color: #F37E30;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: #F37E30; }
.faq-item p { padding: 0 3rem 1.75rem 0; font-size: 0.975rem; line-height: 1.8; color: rgba(237,232,223,0.62); text-wrap: pretty; }

@media (max-width: 992px) {
  .page-cols { grid-template-columns: 1fr; gap: 4rem; }
}
@media (max-width: 768px) {
  .page-hero { padding: 8rem 1.25rem 4rem; min-height: 80vh; }
  .page-section, .page-quote { padding: 5.5rem 1.25rem; }
  .faq-item summary { font-size: 1.1rem; }
  .faq-item p { padding-right: 0; }
}

.page-section--tight { padding-top: 2rem; padding-bottom: 4rem; }
.page-section--tight .page-aside { margin-top: 0; }

/* ════════════════════════════════════════
   PAGE À PROPOS
════════════════════════════════════════ */
/* Phrase qui s'assemble : même mise en scène que « Mes conseils » */
.assemble-section { height: 220vh; position: relative; }
.assemble-section .conseils-title em { color: #BE3220; font-style: italic; }

.about-hero-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 5rem; align-items: center; }
.about-role { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(237,232,223,0.5); margin: -1rem 0 1.75rem; }
.about-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }
.about-portrait { margin: 0; position: relative; }
.about-portrait::before {
  content: ''; position: absolute; inset: -14px 14px 14px -14px; border-radius: 22px;
  background: linear-gradient(135deg, #F37E30, #BE3220 50%, #7845D0); opacity: 0.85;
}
.about-portrait img {
  position: relative; display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 20px; outline: 1px solid rgba(255,255,255,0.1); outline-offset: -1px;
}

/* Boutons pilule partagés */
.btn-pill {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 3rem;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none;
  color: #EDE8DF; border: 0.5px solid rgba(237,232,223,0.35);
  transition: background-color 0.2s, border-color 0.2s, transform 0.15s;
}
.btn-pill:hover { background: rgba(237,232,223,0.08); border-color: #EDE8DF; }
.btn-pill:active { transform: scale(0.96); }
.btn-pill--solid { background: #BE3220; border-color: #BE3220; color: #fff; }
.btn-pill--solid:hover { background: #9A2818; border-color: #9A2818; }
.btn-pill--cream { background: #EDE8DF; border-color: #EDE8DF; color: #BE3220; }
.btn-pill--cream:hover { background: #fff; border-color: #fff; }
.btn-pill--light { border-color: rgba(237,232,223,0.55); }

/* Cartes texte (approche) et cartes image (projets) — variantes des cartes éventail */
.sc-card.sc-card--text { gap: 0.9rem; padding: 1.75rem 1.5rem; }
.sc-desc { font-size: 0.85rem; line-height: 1.55; text-align: center; opacity: 0.85; text-wrap: pretty; }
.sc-card.sc-card--project {
  width: 280px; height: 380px; padding: 0.75rem 0.75rem 1.4rem; gap: 0.7rem;
  justify-content: flex-start; overflow: hidden;
}
.sc-card--project img {
  width: 100%; height: 150px; object-fit: cover; border-radius: 14px;
  outline: 1px solid rgba(0,0,0,0.1); outline-offset: -1px;
}
.sc-card--project .sc-name { font-size: 1.4rem; }
.sc-card--project .sc-desc { padding: 0 0.6rem; }

/* Parcours — frise numérotée */
.timeline { margin-top: 3.5rem; }
.timeline-item {
  display: grid; grid-template-columns: 7rem 1fr; gap: 2rem; align-items: start;
  padding: 2.5rem 0; border-top: 0.5px solid rgba(237,232,223,0.14);
}
.timeline-n {
  font-family: 'Playfair Display', serif; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1;
  background: linear-gradient(135deg, #F37E30, #BE3220 55%, #7845D0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.timeline-kicker { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #F37E30; margin-bottom: 0.6rem; }
.timeline-title { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); color: #EDE8DF; margin-bottom: 0.9rem; }
.timeline-text { max-width: 62ch; font-size: 1rem; line-height: 1.8; color: rgba(237,232,223,0.62); text-wrap: pretty; }

/* Art au Féminin sur vermillon */
.about-aaf { color: #EDE8DF; }
.about-aaf-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 5rem; align-items: center; }
.about-aaf .page-h2 em { color: #1A1210; }
.about-label--light { color: rgba(237,232,223,0.85); }
.about-label--light::after { background: rgba(237,232,223,0.85); }
.about-aaf-text { max-width: 56ch; font-size: 1.05rem; line-height: 1.8; color: rgba(237,232,223,0.85); margin-bottom: 1.25rem; text-wrap: pretty; }
.about-aaf-text strong { color: #fff; font-weight: 600; }
.about-aaf-img { margin: 0; }
.about-aaf-img img {
  display: block; width: 100%; height: auto; border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.3); outline: 1px solid rgba(255,255,255,0.1); outline-offset: -1px;
  transform: rotate(2deg);
}

@media (max-width: 992px) {
  .about-hero-grid, .about-aaf-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .about-portrait { max-width: 380px; }
}
@media (max-width: 768px) {
  .assemble-section { height: 200vh; }
  .timeline-item { grid-template-columns: 1fr; gap: 0.75rem; padding: 2rem 0; }
  .sc-card.sc-card--text { height: auto; min-height: 210px; padding: 1.25rem 0.9rem; }
  .sc-card--text .sc-name { font-size: 1.1rem; }
  .sc-card--text .sc-desc { font-size: 0.75rem; }
  .sc-card.sc-card--project { height: auto; width: 100%; }
  .fan-section#about-projets .secteurs-stage { grid-template-columns: 1fr; }
}

/* Étiquettes de technologies (projet à la une) */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0.5rem; }
.tag-row li {
  padding: 0.4rem 0.9rem; border-radius: 2rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em;
  color: #EDE8DF; background: rgba(237,232,223,0.14); border: 0.5px solid rgba(237,232,223,0.3);
}

/* ════════════════════════════════════════
   BLOG — liste des articles
════════════════════════════════════════ */
.blog-une-title a { color: inherit; text-decoration: none; }
.blog-une-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.blog-une-title { font-size: clamp(2rem, 4vw, 3.4rem); }

/* Cartes d'articles : même langage que les cartes de l'accueil (couleurs pleines, soulèvement) */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3.5rem; }
.post-card-item:nth-child(3n+1) { transform: rotate(-0.8deg); }
.post-card-item:nth-child(3n+3) { transform: rotate(0.8deg); }
.post-card-item.revealed:nth-child(3n+1) { transform: rotate(-0.8deg); }
.post-card-item.revealed:nth-child(3n+3) { transform: rotate(0.8deg); }
.post-card {
  display: flex; flex-direction: column; gap: 0.7rem; height: 100%;
  padding: 0.75rem 0.75rem 1.4rem; border-radius: 20px; text-decoration: none;
  background: var(--bg); color: var(--fg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 18px 40px rgba(0,0,0,0.35);
  transform: translateY(var(--lift));
  transition: --lift 0.35s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.35s;
}
.post-card:hover, .post-card:focus-visible {
  --lift: -14px; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 30px 60px rgba(0,0,0,0.5);
}
.post-card:focus-visible { outline: 2px solid #F37E30; outline-offset: 4px; }
.post-card img {
  width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 14px;
  outline: 1px solid rgba(0,0,0,0.1); outline-offset: -1px;
}
.post-card-date { padding: 0.35rem 0.6rem 0; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--soft); font-variant-numeric: tabular-nums; }
.post-card-title {
  padding: 0 0.6rem; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400;
  font-size: 1.35rem; line-height: 1.22; text-wrap: balance;
}
.post-card-desc { padding: 0 0.6rem; font-size: 0.86rem; line-height: 1.6; color: var(--soft); flex: 1; text-wrap: pretty; }
.post-card-more { padding: 0 0.6rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; }

/* Articles techniques repliés */
.dev-posts { border-top: 0.5px solid rgba(237,232,223,0.14); border-bottom: 0.5px solid rgba(237,232,223,0.14); }
.dev-posts summary {
  list-style: none; cursor: pointer; position: relative; padding: 1.6rem 3rem 1.6rem 0; color: #EDE8DF;
  font-family: 'Playfair Display', serif; font-size: 1.5rem;
}
.dev-posts summary::-webkit-details-marker { display: none; }
.dev-posts summary::after {
  content: '+'; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  font-family: 'Inter', sans-serif; font-weight: 300; font-size: 1.6rem; color: #F37E30; transition: transform 0.2s;
}
.dev-posts[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.dev-posts-sub { display: block; margin-top: 0.3rem; font-family: 'Inter', sans-serif; font-size: 0.8rem; letter-spacing: 0.04em; color: rgba(237,232,223,0.5); }
.dev-list { padding-bottom: 1.5rem; }
.dev-list a {
  display: flex; gap: 1.25rem; align-items: baseline; padding: 0.85rem 0; text-decoration: none;
  border-top: 0.5px solid rgba(237,232,223,0.08); color: rgba(237,232,223,0.8); transition: color 0.2s;
}
.dev-list a:hover { color: #F37E30; }
.dev-list time { flex-shrink: 0; font-size: 0.75rem; color: rgba(237,232,223,0.45); font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════
   ARTICLE — en-tête sur la scène 3D, corps sur papier crème
════════════════════════════════════════ */
.post-hero-head { min-height: 75vh; }
.post-back {
  display: inline-block; margin-bottom: 2.5rem; padding: 0.5rem 0;
  font-size: 0.85rem; color: rgba(237,232,223,0.6); text-decoration: none; transition: color 0.2s;
}
.post-back:hover { color: #F37E30; }
.post-h1 {
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(2.3rem, 5.5vw, 4.8rem); line-height: 1.06; letter-spacing: -0.03em;
  color: #EDE8DF; margin-bottom: 2rem; text-wrap: balance;
}
.post-h1[data-reveal] { opacity: 1; transform: none; }

.post-paper { padding: 0 1.5rem 7rem; }
.post-paper-inner { max-width: 760px; margin: 0 auto; }
.post-cover { margin: 0 0 3.5rem; transform: translateY(-3rem); }
.post-cover img {
  display: block; width: 100%; height: auto; border-radius: 20px;
  box-shadow: 0 30px 60px rgba(26,18,16,0.25); outline: 1px solid rgba(0,0,0,0.1); outline-offset: -1px;
}
.post-cover figcaption { margin-top: 0.75rem; font-size: 0.8rem; color: rgba(26,18,16,0.55); text-align: center; }
.band-cream.post-paper { padding-top: 0; }
.post-paper-inner:not(:has(.post-cover)) { padding-top: 5rem; }

/* Typographie de lecture */
.post-body { font-size: 1.075rem; line-height: 1.85; color: rgba(26,18,16,0.86); }
.post-body > * + * { margin-top: 1.4rem; }
.post-body h2 {
  margin-top: 3.5rem; font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.15; letter-spacing: -0.02em; color: #1A1210; text-wrap: balance;
}
.post-body h3 { margin-top: 2.5rem; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.45rem; line-height: 1.25; color: #1A1210; }
.post-body h4 { margin-top: 2rem; font-size: 1.05rem; font-weight: 700; color: #1A1210; }
.post-body p, .post-body li { text-wrap: pretty; }
.post-body a { color: #BE3220; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-body a:hover { color: #8B1A30; }
.post-body strong { color: #1A1210; font-weight: 600; }
.post-body ul, .post-body ol { padding-left: 1.4rem; }
.post-body ul { list-style: none; }
.post-body ul li { position: relative; }
.post-body ul li::before { content: '—'; position: absolute; left: -1.4rem; color: #BE3220; }
.post-body ol { list-style: decimal; }
.post-body ol li::marker { color: #BE3220; font-weight: 600; }
.post-body li + li { margin-top: 0.5rem; }
.post-body blockquote {
  margin-left: 0; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 3px solid #BE3220;
  font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.3rem; line-height: 1.55; color: #1A1210;
}
.post-body hr { border: 0; height: 1px; background: rgba(26,18,16,0.15); margin: 3rem 0; }
.post-body img { max-width: 100%; height: auto; border-radius: 14px; outline: 1px solid rgba(0,0,0,0.1); outline-offset: -1px; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.post-body th, .post-body td { padding: 0.75rem 0.9rem; border-bottom: 1px solid rgba(26,18,16,0.12); text-align: left; vertical-align: top; }
.post-body th { font-weight: 600; color: #1A1210; background: rgba(26,18,16,0.04); }
.post-body code { font-family: 'SF Mono', 'Fira Mono', monospace; font-size: 0.88em; padding: 0.12em 0.4em; border-radius: 6px; background: rgba(26,18,16,0.07); }
.post-body pre {
  overflow-x: auto; padding: 1.25rem 1.4rem; border-radius: 14px; background: #1A1210; color: #EDE8DF;
  font-size: 0.88rem; line-height: 1.65;
}
.post-body pre code { padding: 0; background: none; font-size: inherit; color: inherit; }
/* Coloration syntaxique (rouge) aux couleurs du site */
.post-body .highlight .k, .post-body .highlight .kd, .post-body .highlight .kn, .post-body .highlight .kr, .post-body .highlight .nb { color: #F37E30; }
.post-body .highlight .s, .post-body .highlight .s1, .post-body .highlight .s2, .post-body .highlight .ss, .post-body .highlight .si { color: #C9A8F5; }
.post-body .highlight .c, .post-body .highlight .c1, .post-body .highlight .cm { color: rgba(237,232,223,0.45); font-style: italic; }
.post-body .highlight .nf, .post-body .highlight .nc, .post-body .highlight .no { color: #F8B98A; }
.post-body .highlight .mi, .post-body .highlight .mf { color: #F0A0B4; }
/* Boutons écrits en HTML dans certains articles */
.post-body .text-center { text-align: center; }
.post-body .btn {
  display: inline-block; padding: 0.85rem 1.6rem; border-radius: 3rem; text-decoration: none;
  font-size: 0.9rem; font-weight: 600; color: #BE3220; border: 1px solid #BE3220; transition: background-color 0.2s, color 0.2s;
}
.post-body .btn:hover { background: #BE3220; color: #fff; }

.post-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 4rem; }
.post-tags li { padding: 0.35rem 0.8rem; border-radius: 2rem; font-size: 0.78rem; color: rgba(26,18,16,0.6); background: rgba(26,18,16,0.05); }
.post-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(26,18,16,0.12); }
/* Article précédent / suivant : cartes de couleur comme « Ma palette » */
.post-pager { gap: 1.5rem; padding-top: 3rem; }
.pager-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  min-height: 230px; padding: 2rem 1.75rem; border-radius: 20px; text-align: center; text-decoration: none;
  background: var(--bg); color: var(--fg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 18px 40px rgba(26,18,16,0.25);
  transform: translateY(var(--lift)) rotate(-2deg);
  transition: --lift 0.35s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.35s;
}
.pager-card--next { transform: translateY(var(--lift)) rotate(2deg); }
.pager-card:hover, .pager-card:focus-visible {
  --lift: -14px; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 30px 60px rgba(26,18,16,0.35);
}
.pager-card:focus-visible { outline: 2px solid #F37E30; outline-offset: 4px; }
.pager-card:active { transform: translateY(var(--lift)) rotate(-2deg) scale(0.97); }
.pager-badge {
  padding: 0.35rem 0.9rem; border-radius: 2rem; background: var(--badge);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.05em; white-space: nowrap;
}
.pager-title {
  font-family: 'Inter', sans-serif; font-size: 1.35rem; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance;
}

@media (max-width: 992px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-card-item:nth-child(n) { transform: none; }
  .post-paper { padding: 0 1.1rem 5rem; }
  .post-cover { transform: translateY(-2rem); margin-bottom: 2rem; }
  .post-body { font-size: 1rem; }
  .post-pager { grid-template-columns: 1fr; }
  .pager-card, .pager-card--next { min-height: 180px; transform: translateY(var(--lift)) rotate(-1deg); }
  .pager-card--next { transform: translateY(var(--lift)) rotate(1deg); }
}

/* Chiffres « Qui je suis » : 5 repères */
#about { max-width: 1100px; }
.abt-nums { gap: 2.5rem; flex-wrap: wrap; }
.abt-num { font-size: clamp(2.6rem, 4.6vw, 4.6rem); font-variant-numeric: tabular-nums; }
.abt-num-l { max-width: 14ch; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) {
  .abt-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .abt-vbar { display: none; }
  .abt-num-item:last-child { grid-column: 1 / -1; }
}