/* === marcdebies.com — feuille de styles principale === */

/* --- Bloc 1 (était à la position 37923 dans index.html) --- */
/* ── RESET & BASE ────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --black: #0a0a0a;
      --white: #f5f4f0;
      --grey-light: #e8e6e1;
      --grey-mid: #9a9690;
      --grey-dark: #3a3835;
      --accent: #c8b89a;
      --bg: #f0ede8;
      --text: #1a1816;
      --text-mid: #5a5450;
      --em-color: #3d2a1a;
      --red: #c53d2e;
      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body: 'Outfit', sans-serif;
      --font-mono: 'DM Mono', monospace;
      --gap: 2rem;
      --max: 1200px;
    }

    html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
    body { overflow-x: hidden; }

    body { cursor: auto;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-weight: 300;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      
    }

    /* ── CUSTOM CURSOR ───────────────────────────────── */

    /* ── TYPOGRAPHY ──────────────────────────────────── */
    h1, h2, h3 { font-family: var(--font-display); font-weight: 300; line-height: 1.1; }
    h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); letter-spacing: -.02em; }
    h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
    h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 400; }
    p { font-size: clamp(.9rem, 1.1vw, 1.05rem); color: var(--text-mid); }
    em { font-style: italic; font-family: var(--font-display); font-size: 1.1em; color: var(--em-color); }

    .label {
      font-family: var(--font-mono);
      font-size: .7rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--grey-mid);
    }

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

    /* ── LAYOUT ──────────────────────────────────────── */
    .container { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem); }
    section { padding: clamp(5rem, 10vw, 9rem) 0; }

    /* ── DIVIDER ─────────────────────────────────────── */
    .divider {
      width: 100%; height: 1px;
      background: linear-gradient(90deg, transparent, #b8b4ae 30%, #b8b4ae 70%, transparent);
      margin: 0;
    }

    /* ── NAV ─────────────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 1.5rem clamp(1.5rem, 5vw, 4rem);
      display: flex; align-items: center; justify-content: space-between;
      background: #f0ede8;
    }
    nav.scrolled {
      background: #f0ede8;
    }
    .nav-logo { display: flex; align-items: center; }
    .nav-logo span { color: var(--accent); }
    .nav-logo-img {
      height: 32px;
      width: auto;
      display: block;
    }
    .nav-links { display: flex; gap: 2.5rem; align-items: center; }
    .nav-links a {
      font-family: var(--font-mono);
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text-mid);
      transition: color .2s;
      position: relative;
    }
    .nav-links a::after {
      content: ''; position: absolute; bottom: -.3rem; left: 0;
      width: 0; height: 1px; background: var(--accent);
      transition: width .3s;
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a:hover::after { width: 100%; }
    .lang-toggle {
      font-family: var(--font-mono);
      font-size: .7rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--grey-mid);
      cursor: pointer;
      padding: .4rem .8rem;
      border: 1px solid var(--grey-dark);
      transition: all .2s;
    }
    .lang-toggle:hover { color: var(--white); border-color: var(--grey-mid); }
    .nav-menu-btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
    .nav-menu-btn span { display: block; width: 24px; height: 2px; background: var(--text); transition: .3s; }

    /* ── HERO ────────────────────────────────────────── */
    #hero {
      min-height: 100vh;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding-bottom: 0;
      position: relative; overflow: hidden;
    }
    .hero-banner {
      position: relative;
      width: 100%;
      max-height: 28vh;
      overflow: hidden;
      margin-top: clamp(3rem, 5vw, 5rem);
      flex-shrink: 0;
    }
    .hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background: radial-gradient(ellipse 80% 60% at 60% 40%, #d8d0c4 0%, var(--bg) 70%);
    }
    .hero-content { position: relative; z-index: 2; padding-bottom: clamp(3rem, 6vw, 5rem); }
      50%       { opacity: .85; stroke-width: 1.4; }
    }
      50%       { opacity: .9;  transform: scaleX(1); }
    }
    .hero-tag {
      font-family: var(--font-mono);
      font-size: .72rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--text-mid);
      margin-bottom: 1.5rem;
      opacity: 0;
      animation: fadeUp .8s .2s forwards;
    }
    .hero-title {
      opacity: 0;
      animation: fadeUp .9s .4s forwards;
    }
    .hero-title em {
      font-size: clamp(.7rem, 1vw, .85rem);
      font-family: var(--font-mono);
      font-style: normal;
      font-weight: 300;
      letter-spacing: .18em;
      text-transform: uppercase;
      display: block;
      color: var(--text-mid);
      margin-top: .6rem;
    }
    .hero-subtitle strong { color: var(--text); font-weight: 700; font-style: normal; font-family: var(--font-body); font-size: 1em; }
    .hero-subtitle em {
      font-style: normal;
      font-family: var(--font-mono);
      font-size: .8em;
      letter-spacing: .03em;
      color: var(--text-mid);
      border-left: 2px solid var(--red);
      padding-left: .75rem;
      display: block;
    }
    .hero-keynote {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 300;
      font-style: italic;
      color: #4a3f38;
      line-height: 1.2;
      white-space: normal;
      max-width: 16em;
      margin-bottom: 1.5rem;
    }
    .hero-subtitle {
      margin-top: 2rem;
      max-width: 52ch;
      opacity: 0;
      animation: fadeUp .9s .7s forwards;
      font-size: clamp(.95rem, 1.2vw, 1.1rem);
      color: var(--text);
      line-height: 1.75;
    }
    .hero-cta {
      margin-top: 3rem;
      display: flex; gap: 1.5rem; align-items: center;
      opacity: 0;
      animation: fadeUp .9s .95s forwards;
    }
    .btn-primary {
      padding: .9rem 2rem;
      background: var(--text);
      color: var(--bg);
      font-family: var(--font-mono);
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      transition: background .2s, transform .2s;
      display: inline-block;
    }
    .btn-primary:hover { background: var(--em-color); transform: translateY(-2px); }
    .btn-ghost {
      padding: .9rem 2rem;
      border: 1px solid #b8b4ae;
      color: var(--text-mid);
      font-family: var(--font-mono);
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      transition: all .2s;
      display: inline-block;
    }
    .btn-ghost:hover { color: var(--text); border-color: var(--text); transform: translateY(-2px); }
    .hero-scroll { display: none; }
    .hero-scroll span {
      font-family: var(--font-mono);
      font-size: .62rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--text-mid);
      writing-mode: vertical-rl;
    }
    .scroll-line {
      width: 1px; height: 50px;
      background: linear-gradient(to bottom, var(--em-color), transparent);
      animation: scrollPulse 2s 1.4s infinite;
    }
    .hero-clients {
      margin-top: 2.5rem;
      opacity: 0;
      animation: fadeIn 1s 1.6s forwards;
    }
    .hero-clients .label { margin-bottom: .8rem; }
    .client-list {
      display: flex; gap: 1.5rem; flex-wrap: wrap;
      font-family: var(--font-mono);
      font-size: .65rem;
      letter-spacing: .1em;
      color: var(--text-mid);
      text-transform: uppercase;
    }


    .hero-grid {
      display: block;
    }
    .hero-text { }
    .hero-stats-right {
      display: flex;
      flex-direction: row;
      gap: 3rem;
      align-items: baseline;
      margin-top: 2.5rem;
      padding-top: 2rem;
      border-top: 1px solid #c8c4be;
      opacity: 0;
      animation: fadeIn 1s 1.2s forwards;
    }
    .hero-stat { text-align: left; }
    .hero-stat-num {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 2.8vw, 2.4rem);
      font-weight: 300;
      font-style: italic;
      color: var(--text);
      line-height: 1;
    }
    .hero-stat-label {
      font-family: var(--font-mono);
      font-size: .6rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text-mid);
      margin-top: .3rem;
    }
    @media (max-width: 768px) {
      .hero-stats-right { gap: 1.5rem; }
    }

    /* ── ABOUT ───────────────────────────────────────── */
    #about .about-grid {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 5rem;
      align-items: start;
    }
#about .about-left p { margin-bottom: 1.5rem; }
    #about .about-left .section-label { margin-bottom: 1rem; }
    #about .about-left h2 { margin-bottom: 2rem; }
    #about .about-left h2 em { font-size: inherit; display: block; }
    .about-subhead {
      font-family: var(--font-body);
      font-size: clamp(1rem, 1.3vw, 1.15rem);
      font-weight: 600;
      font-style: normal;
      color: var(--text);
      margin: 2.5rem 0 1rem;
      letter-spacing: .01em;
    }
    .about-list {
      list-style: none;
      padding: 0;
      margin: 0 0 1.5rem;
    }
    .about-list li {
      padding: .7rem 0 .7rem 1.2rem;
      border-left: 2px solid var(--red);
      margin-bottom: .6rem;
      color: var(--text-mid);
      font-size: clamp(.88rem, 1.05vw, 1rem);
      line-height: 1.65;
    }
    .about-list li strong { color: var(--text); font-weight: 600; font-style: normal; font-family: var(--font-body); }
    .pillar-inline {
      font-family: var(--font-display);
      font-size: 1.15em;
      font-weight: 600;
      font-style: italic;
      color: var(--em-color);
    }
    .pillar-inline-desc {
      font-size: .9em;
      color: var(--text-mid);
    }

    

    .about-partners-label {
      font-family: var(--font-mono);
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--red);
    }
    .about-partners-toggle {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      text-align: left;
      gap: 1rem;
    }
    .about-partners-toggle .label {
      font-size: .75rem;
      letter-spacing: .14em;
      color: var(--red);
      transition: color .2s;
    }
    .about-partners-toggle:hover .label { color: #a03020; }
    .about-partners-toggle .about-partner-toggle {
      font-family: var(--font-mono);
      font-size: 1.6rem;
      font-style: normal;
      color: var(--red);
      line-height: 1;
      flex-shrink: 0;
      margin-left: 1rem;
    }
    .about-partners-toggle[aria-expanded="true"] .about-partner-toggle {
      font-family: var(--font-mono);
      font-size: 1.6rem;
      font-style: normal;
      color: var(--red);
      line-height: 1;
      flex-shrink: 0;
      margin-left: 1rem;
    }
    .about-partners-list { display: flex; flex-direction: column; gap: 1.25rem; max-height: 0; overflow: hidden; transition: max-height .5s ease; padding: 0; }
    .about-partners-list.open { max-height: 4000px; padding-top: 1rem; }
    .about-partner-item { border-bottom: 1px solid #e0dcd6; padding-bottom: 1rem; }
    .about-partner-item:last-child { border-bottom: none; }
    .about-partner-item { border-bottom: 1px solid #e0dcd6; }
    .about-partner-header {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      width: 100%;
      background: none;
      border: none;
      padding: .9rem 0;
      cursor: pointer;
      text-align: left;
    }
    .about-partner-left {
      display: flex;
      align-items: center;
      gap: .75rem;
      min-width: 200px;
    }
    .about-partner-name {
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 600;
      color: var(--text);
    }
    .about-partner-role {
      font-family: var(--font-mono);
      font-size: .62rem;
      letter-spacing: .08em;
      color: var(--text-mid);
      text-transform: uppercase;
      flex: 1;
    }
    .about-partner-toggle {
      font-family: var(--font-mono);
      font-size: 1.6rem;
      font-style: normal;
      color: var(--red);
      line-height: 1;
      flex-shrink: 0;
      margin-left: 1rem;
    }
    .about-partner-header[aria-expanded="true"] .about-partner-toggle {
      font-family: var(--font-mono);
      font-size: 1.6rem;
      font-style: normal;
      color: var(--red);
      line-height: 1;
      flex-shrink: 0;
      margin-left: 1rem;
    }
    .about-partner-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease;
    }
    .about-partner-body.open { max-height: 2000px; }
    .about-partner-body p {
      font-size: .85rem;
      color: var(--text-mid);
      line-height: 1.7;
      padding: .75rem 0 1rem;
    }
    .about-partners-inline {
      font-size: clamp(.9rem, 1.1vw, 1rem);
      color: var(--text-mid);
      line-height: 1.75;
      margin-top: 1.75rem;
    }
    .lang-fr { display: inline; }
    .lang-en { display: none; }
    .heho-link {
      display: inline-flex;
      align-items: baseline;
      text-decoration: none;
      opacity: .85;
      transition: opacity .2s;
    }
    .heho-link:hover { opacity: 1; }
    .heho-inline {
      height: 1em;
      width: auto;
      vertical-align: text-bottom;
      margin: 0 .2em;
    }
    .about-conviction {
      margin-top: 3rem;
      padding-top: 2.5rem;
      border-top: 1px solid #c8c4be;
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      font-weight: 300;
      font-style: italic;
      color: var(--em-color);
      line-height: 1.5;
    }
    .about-conviction strong { font-weight: 300; color: inherit; font-style: inherit; }
    .about-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
      margin-top: 3rem;
      border-top: 1px solid #c8c4be;
      padding-top: 2rem;
    }
    .stat-item .stat-num {
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 4.5vw, 4rem);
      font-weight: 300;
      color: var(--text);
      line-height: 1;
    }
    .stat-item .stat-label {
      font-family: var(--font-mono);
      font-size: .68rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text-mid);
      margin-top: .4rem;
    }

    /* ── SERVICES ────────────────────────────────────── */
    #services { background: #e8e4de; }
    #services .section-header { margin-bottom: 4rem; }
    #services .section-header .label { margin-bottom: 1rem; }
    .services-grid {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid #c8c4be;
    }
    .service-card {
      background: transparent;
      padding: 2.5rem 0;
      border-bottom: 1px solid #c8c4be;
      position: relative;
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 3rem;
      align-items: start;
      transition: background .3s;
    }
    .service-card::before {
      content: '';
      position: absolute; top: 0; left: 0;
      width: 0; height: 2px;
      background: var(--red);
      transition: width .4s ease;
    }
    .service-card:hover::before { width: 100%; }
    .service-card-left { }
    .service-card-right { }
    .service-num {
      font-family: var(--font-mono);
      font-size: .6rem;
      letter-spacing: .15em;
      color: var(--red);
      margin-bottom: .5rem;
      display: block;
    }
    .service-card h3 {
      font-size: clamp(1.1rem, 1.6vw, 1.35rem);
      font-weight: 400;
      margin-bottom: .5rem;
      line-height: 1.3;
    }
    .service-card p { font-size: .9rem; line-height: 1.7; }
    .service-tags {
      display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.25rem;
    }
    a.service-tag {
      text-decoration: none;
      transition: background .2s, color .2s;
    }
    a.service-tag:hover {
      background: var(--red);
      color: #fff;
      border-color: var(--red);
    }
    .service-tag {
      font-family: var(--font-mono);
      font-size: .6rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .3rem .7rem;
      border: 1px solid #b8b4ae;
      color: var(--text-mid);
    }

    /* ── PROJECTS ────────────────────────────────────── */
    #projects .section-header {
      display: flex; justify-content: space-between; align-items: flex-end;
      margin-bottom: 4rem;
    }
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.5rem;
    }
    /* Projects grid layout */
    .proj-1 { grid-column: 1 / 3; grid-row: 1; }
    .proj-2 { grid-column: 3 / 4; grid-row: 1; }
    .proj-4 { grid-column: 1 / 2; grid-row: 2; }
    .proj-3 { grid-column: 2 / 4; grid-row: 2; }
    .proj-5 { grid-column: 1 / 2; grid-row: 3; }
    .proj-6 { grid-column: 2 / 3; grid-row: 3; }
    .proj-7 { grid-column: 3 / 4; grid-row: 3; }
    .proj-8 { grid-column: 1 / 2; grid-row: 4; }
    .proj-9 { grid-column: 2 / 4; grid-row: 4; }
    .project-card {
      position: relative;
      background: #1a1816;
      cursor: pointer;
    }
    .project-card:not(.has-photo):not(.featured) {
      overflow: hidden;
      aspect-ratio: 3/4;
    }
    .project-card.has-photo {
      aspect-ratio: unset !important;
      overflow: visible;
      display: grid;
      grid-template-rows: 190px auto;
    }
    .project-card.has-photo .project-visual {
      position: relative;
      overflow: hidden;
      height: 190px;
    }
    .project-card.has-photo .project-visual .project-overlay { display: none; }
    .project-card.has-photo .project-text {
      background: #1a1816;
      padding: 1.25rem 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      max-height: 220px;
      overflow-y: auto;
      position: relative;
      scroll-behavior: smooth;
    }
    /* Fade gradient indicating scrollable content */
    .project-text-wrap {
      position: relative;
    }
    .project-text-wrap::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      background: linear-gradient(to bottom, transparent, #1a1816);
      pointer-events: none;
      transition: opacity .3s;
      z-index: 2;
    }
    .project-text-wrap.scrolled-to-end::after {
      opacity: 0;
    }
    /* Scroll indicator arrow */
    .scroll-indicator {
      position: absolute;
      bottom: .5rem;
      right: 1rem;
      font-size: .65rem;
      color: rgba(245,244,240,.35);
      pointer-events: none;
      z-index: 3;
      animation: bounce-down .8s ease-in-out infinite alternate;
    }
    @keyframes bounce-down {
      from { transform: translateY(0); }
      to   { transform: translateY(3px); }
    }
    .project-card.featured {
      grid-column: span 2;
      aspect-ratio: unset !important;
      overflow: visible;
      display: grid;
      grid-template-rows: 190px auto;
    }
    .project-card.featured .project-visual {
      position: relative;
      overflow: hidden;
      height: 190px;
    }
    .project-card.featured .project-visual .project-overlay {
      display: none;
    }
    .project-card.featured .project-text {
      grid-row: 2;
      background: #1a1816;
      padding: 1.5rem 2rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      max-height: 220px;
      overflow-y: auto;
    }
    .project-visual {
      width: 100%; height: 100%;
      position: relative; overflow: hidden;
    }
    .project-bg {
      position: absolute; inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform .6s ease;
    }
    }
    .project-card:hover .project-bg {
      transform: scale(1.04);
    }

    .proj-1 .project-bg { background-color: #1a1f2e; }           /* Grand Paris */
    .proj-2 .project-bg { background: linear-gradient(135deg, #1f1a0e 0%, #3d2d10 50%, #1a150a 100%); } /* Orange */
    .proj-3 .project-bg { background: linear-gradient(135deg, #0e1f14 0%, #103d1e 50%, #0a1a10 100%); } /* Westfield */
    .proj-4 .project-bg { background: linear-gradient(135deg, #0e1a1f 0%, #103340 50%, #0a1a20 100%); } /* Monnaie */
    .proj-5 .project-bg { background: linear-gradient(135deg, #1a0e1f 0%, #2d103d 50%, #120a1a 100%); } /* Plaza */
    .proj-6 .project-bg { background: linear-gradient(135deg, #0a1520 0%, #0d2535 50%, #0a1520 100%); } /* BA */
    .proj-7 .project-bg { background: linear-gradient(135deg, #141414 0%, #1e1e18 50%, #141410 100%); } /* EPR */
    .proj-8 .project-bg { background: linear-gradient(135deg, #1a1a0e 0%, #2f2d10 50%, #121210 100%); } /* Hermès */
    .proj-9 .project-bg { background: linear-gradient(135deg, #1a1008 0%, #2d1f0a 50%, #1a1008 100%); } /* Ritz */
    .project-pattern {
      position: absolute; inset: 0; opacity: .3;
      background-image: repeating-linear-gradient(
        0deg, transparent, transparent 40px, rgba(255,255,255,.03) 40px, rgba(255,255,255,.03) 41px
      ),
      repeating-linear-gradient(
        90deg, transparent, transparent 40px, rgba(255,255,255,.03) 40px, rgba(255,255,255,.03) 41px
      );
    }
    .project-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(5,5,5,.92) 0%, rgba(5,5,5,.5) 50%, transparent 100%);
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: clamp(1.2rem, 3vw, 2rem);
    }
    .project-also {
      margin-top: .75rem;
      font-size: .8rem;
      color: rgba(255,255,255,.5);
      font-style: italic;
    }
    .project-also strong { color: rgba(255,255,255,.75); font-style: normal; font-weight: 500; }
    .project-press {
      display: block;
      margin-top: 0.75rem;
      font-family: var(--font-mono);
      font-size: .58rem;
      letter-spacing: .08em;
      color: rgba(255,255,255,.55);
      padding: 0;
      background: none;
      line-height: 1.6;
    }
    .project-press-link {
      color: rgba(255,255,255,.55);
      text-decoration: none;
      transition: color .2s;
    }
    .project-press-link:hover { color: rgba(255,255,255,.85); }
    .project-cat {
      font-family: var(--font-mono);
      font-size: .62rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: .5rem;
    }
    .project-card h3 { font-size: clamp(1.1rem, 2vw, 1.6rem); margin-bottom: .4rem; color: #fff; }
    .project-cat { color: rgba(255,255,255,.55); }
    .project-client { color: rgba(255,255,255,.55); }
    .project-context { color: rgba(255,255,255,.8); }
    .project-desc { color: rgba(255,255,255,.9); }

    /* ── RÉFÉRENCES ──────────────────────────────────── */
    .refs-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 4rem;
      padding-top: 1rem;
    }
    .refs-cat {
      font-family: var(--font-mono);
      font-size: .6rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: .85rem;
    }
    .refs-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .refs-list li {
      font-size: clamp(.85rem, .95vw, .92rem);
      color: var(--text-mid);
      line-height: 1.5;
      padding: .4rem 0;
      border-bottom: 1px solid #e8e4de;
    }
    .refs-list li:last-child { border-bottom: none; }



    .refs-sub {
      display: block;
      font-size: .8em;
      color: var(--text-mid);
      opacity: .7;
      margin-top: .15rem;
      line-height: 1.5;
    }
    /* ── FAQ MODAL ──────────────────────────────── */


    .faq-modal-inner { padding: 2.5rem; }
    .faq-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2rem;
      border-bottom: 1px solid #d8d4ce;
      padding-bottom: 1.25rem;
    }
    .faq-modal-header h2 {
      font-size: clamp(1.25rem, 2vw, 1.5rem);
      margin: 0;
    }
    .faq-modal-close {
      background: none; border: none;
      font-size: 1.1rem; cursor: pointer;
      color: var(--text-mid);
      padding: .25rem .5rem;
      transition: color .2s;
    }
    .faq-modal-close:hover { color: var(--red); }

    .refs-sub {
      display: block;
      font-size: .8em;
      color: var(--text-mid);
      opacity: .7;
      margin-top: .15rem;
      line-height: 1.5;
    }
    /* ── FAQ OVERLAY ──────────────────────────────────── */
    #faq
    
    .faq-close:hover { color: var(--red); }

    .refs-sub {
      display: block;
      font-size: .8em;
      color: var(--text-mid);
      opacity: .7;
      margin-top: .15rem;
      line-height: 1.5;
    }
    /* ── FAQ MODAL ──────────────────────────────── */


    .faq-modal-inner { padding: 2.5rem; }
    .faq-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2rem;
      border-bottom: 1px solid #d8d4ce;
      padding-bottom: 1.25rem;
    }
    .faq-modal-header h2 {
      font-size: clamp(1.25rem, 2vw, 1.5rem);
      margin: 0;
    }
    .faq-modal-close {
      background: none; border: none;
      font-size: 1.1rem; cursor: pointer;
      color: var(--text-mid);
      padding: .25rem .5rem;
      transition: color .2s;
    }
    .faq-modal-close:hover { color: var(--red); }

    .refs-sub {
      display: block;
      font-size: .8em;
      color: var(--text-mid);
      opacity: .7;
      margin-top: .15rem;
      line-height: 1.5;
    }
    /* ── FAQ ─────────────────────────────────────────── */
    #faq .section-header { margin-bottom: 3rem; }
    .faq-list { max-width: 800px; }
    .faq-item {
      border-bottom: 1px solid #c8c4be;
      overflow: hidden;
    }
    .faq-question {
      display: flex; justify-content: space-between; align-items: center;
      padding: 1.8rem 0;
      cursor: pointer;
    }
    .faq-question h3 {
      font-size: clamp(1rem, 1.5vw, 1.2rem);
      font-weight: 400;
      font-family: var(--font-display);
    }
    .faq-icon {
      width: 20px; height: 20px; flex-shrink: 0;
      position: relative;
    }
    .faq-icon::before, .faq-icon::after {
      content: ''; position: absolute;
      background: var(--grey-mid);
      transition: transform .3s, opacity .3s;
    }
    .faq-icon::before { width: 100%; height: 1px; top: 50%; left: 0; transform: translateY(-50%); }
    .faq-icon::after { width: 1px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
    .faq-item.open .faq-answer { max-height: 600px; padding-bottom: .75rem; }
    .faq-item.open .faq-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
    .faq-answer {
      max-height: 0; overflow: hidden;
      transition: max-height .4s ease, padding .4s;
    }
    .faq-item.open .faq-answer { max-height: 300px; padding-bottom: 1.8rem; }
    .faq-answer p { font-size: .95rem; }
    /* ── REFERENCES (inside projects) ───────── */
    .refs-inner {
      margin-top: 4rem;
      padding-top: 3rem;
      border-top: 1px solid #d8d4ce;
      display: block;
      width: 100%;
      clear: both;
    }
    .refs-header { margin-bottom: 2rem; }
    .refs-cols {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2.5rem;
      padding-top: 1rem;
    }
    .about-schema {
      margin: 3rem 0 0;
      width: 100%;
    }
    .about-schema svg { width: 100%; height: auto; }
    .project-expertises {
      margin: .6rem 0 .2rem;
      font-family: var(--font-mono);
      font-size: .62rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(240, 237, 232, 0.6);
    }
    .expertise-tag {
      font-family: var(--font-mono);
      font-size: .62rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(240,237,232,.7);
      background: none;
      cursor: pointer;
      transition: color .2s, background .2s;
      text-decoration: none;
      border: 1px solid rgba(197,61,46,.45);
      border-radius: 2px;
      padding: .35rem .7rem;
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      margin: .15rem 0;
    }
    .expertise-tag:hover,
    .expertise-tag:focus-visible {
      color: #f0ede8;
      background: rgba(197,61,46,.12);
      outline: none;
    }
    @media (max-width: 768px) {
      .expertise-tag { min-height: 36px; padding: .45rem .8rem; font-size: .65rem; }
    }
    
    
    .contact-signature {
      font-family: var(--font-display);
      font-size: clamp(.95rem, 1.2vw, 1.15rem);
      font-style: italic;
      font-weight: 300;
      color: var(--text-mid);
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid #c8c4be;
    }

    .about-partners {
      margin-top: 3rem;
      padding-top: 2.5rem;
      border-top: 1px solid #c8c4be;
    }
    .about-partners-toggle {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      text-align: left;
      gap: 1rem;
    }
    .about-partners-header {
      display: flex;
      flex-direction: column;
      gap: .3rem;
    }
    .about-partners-label {
      font-family: var(--font-mono);
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--red);
    }
    .about-partners-title {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2vw, 1.9rem);
      font-weight: 300;
      font-style: italic;
      color: var(--ink);
      line-height: 1.15;
    }
    .about-partners-sub {
      font-family: var(--font-body);
      font-size: .85rem;
      font-style: italic;
      font-weight: 300;
      color: var(--text-mid);
    }

    /* Schema mobile */
    .schema-mobile { display: none; }
    .about-schema svg { display: block; }
    @media (max-width: 640px) {
      .about-schema svg { display: none; }
      .schema-mobile {
        display: block;
        padding: 1.25rem 0;
        border-top: 1px solid #c8c4be;
        border-bottom: 1px solid #c8c4be;
        margin: 1.5rem 0;
      }
      .schema-oneliner {
        font-family: var(--font-mono);
        font-size: .72rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #6b5a4e;
        line-height: 1.8;
      }
      .schema-oneliner span { color: #c53d2e; }
      .schema-oneliner em { font-family: var(--font-display); font-style: italic; font-size: .95rem; color: #1a1816; text-transform: none; letter-spacing: 0; }
    }
    .service-bold {
      font-family: var(--font-body);
      font-size: clamp(1rem, 1.2vw, 1.1rem);
      font-weight: 600;
      color: var(--ink);
      margin-bottom: .5rem;
      line-height: 1.4;
    }
    .service-para {
      font-size: clamp(.9rem, 1.05vw, 1rem);
      color: var(--text-mid);
      line-height: 1.7;
    }
    .service-rest {
      display: none;
    }
    .service-rest.open {
      display: inline;
    }
    .service-more {
      display: inline;
    }
    .service-more.hidden {
      display: none;
    }
    .service-toggle {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      color: var(--red);
      font-size: 1rem;
      line-height: 1;
      opacity: .8;
      transition: opacity .2s;
      vertical-align: baseline;
      font-weight: 300;
      margin-left: .2rem;
    }
    .service-toggle:hover { opacity: 1; }
    .service-close {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--red);
      font-size: .85rem;
      line-height: 1;
      padding: 0 0 0 .2rem;
      vertical-align: baseline;
      opacity: .7;
      transition: opacity .2s;
    }
    .service-close:hover { opacity: 1; }
    .toggle-icon {
      font-size: 1rem;
      line-height: 1;
      transition: transform .3s;
    }
    .service-intro {
      font-size: clamp(.9rem, 1.05vw, 1rem);
      color: var(--text-mid);
      line-height: 1.7;
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 0;
      margin-bottom: 0;
    }

    .service-pillar {
      display: block;
      font-family: var(--font-mono);
      font-size: .6rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--red);
      margin-top: .3rem;
      opacity: .7;
    }
    /* ── CONTACT ─────────────────────────────────────── */
    #contact { background: var(--bg); padding-top: 4rem; padding-bottom: 5rem; }
    .contact-header { margin-bottom: 2rem; }
    .contact-simple { max-width: 560px; }
    .contact-intro {
      font-family: var(--font-mono);
      font-size: .8rem;
      color: var(--text-mid);
      letter-spacing: .02em;
      line-height: 1.7;
      margin-bottom: 2.5rem;
      border-left: 2px solid var(--red);
      padding-left: 1rem;
    }
    .contact-items { display: flex; flex-direction: column; }
    .contact-item {
      display: flex;
      align-items: baseline;
      gap: 2rem;
      padding: 1.1rem 0;
      border-bottom: 1px solid #d8d4ce;
    }
    .contact-item:first-child { border-top: 1px solid #d8d4ce; }
    .contact-key {
      font-family: var(--font-mono);
      font-size: .62rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--red);
      min-width: 110px;
      flex-shrink: 0;
    }
    .contact-val {
      font-size: 1rem;
      color: var(--text);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color .2s;
    }
    a.contact-val:hover { border-bottom-color: var(--red); }
    #contact h2 {
      font-family: var(--font-display);
      font-size: clamp(3rem, 6vw, 5.5rem);
      font-weight: 300;
      letter-spacing: -.01em;
      line-height: 1.05;
      color: var(--ink);
      margin-bottom: 2rem;
    }
    #contact .label {
      font-family: var(--font-mono);
      font-size: .65rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--grey-mid);
      margin-bottom: .75rem;
      display: block;
    }
    /* ── PROJECT BENEFIT */
    .project-benefit {
      font-family: var(--font-display);
      font-style: italic;
      font-size: clamp(1rem, 1.2vw, 1.1rem);
      color: var(--white);
      line-height: 1.65;
      margin: 1rem 1.25rem 0;
      padding: .9rem 1rem;
      border-left: 2px solid var(--red);
      background: rgba(255,255,255,.04);
    }

    /* ── PROJECT CTA INLINE */
    .project-cta-inline {
      margin-top: 1.25rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(197,61,46,.15);
    }
    .project-cta-inline a {
      font-family: var(--font-mono);
      font-size: .6rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--white);
      text-decoration: none;
      transition: color .2s;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
    }
    .project-cta-inline a::before {
      content: '→';
      color: var(--red);
      font-size: .75rem;
    }
    .project-cta-inline a:hover { color: var(--accent); }

    /* ── FOOTER ──────────────────────────────────────── */
    footer {
      padding: 3rem 0;
      border-top: 1px solid #c8c4be;
    }
    footer .footer-inner {
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 1.5rem;
    }
    footer .footer-name {
      font-family: var(--font-display);
      font-size: 1.1rem;
    }
    footer .footer-links {
      display: flex; gap: 2rem;
      font-family: var(--font-mono);
      font-size: .65rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--grey-mid);
    }
    footer .footer-links a:hover { color: var(--white); }
    footer .footer-copy {
      font-family: var(--font-mono);
      font-size: .62rem;
      letter-spacing: .08em;
      color: var(--grey-dark);
    }

    .about-photo-wrap {
      position: relative;
      width: 100%;
      max-width: 260px;
      height: 380px;
      flex-shrink: 0;
      margin-left: 0;
      overflow: hidden;
    }
    .about-photo-wrap::before {
      content: '';
      position: absolute;
      top: -10px; left: 0;
      width: 50%;
      height: 50%;
      border-top: 2px solid var(--red);
      border-left: 2px solid var(--red);
      z-index: 0;
    }
    .about-photo-wrap::after {
      content: '';
      position: absolute;
      bottom: -10px; right: -10px;
      width: 40%;
      height: 40%;
      border-bottom: 1px solid var(--red);
      border-right: 1px solid var(--red);
      z-index: 0;
    }
    .about-photo {
      transition: transform .5s ease, filter .5s ease;
      filter: grayscale(100%);
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 15%;
      display: block;
    }
    .about-photo-wrap:hover .about-photo {
      transform: scale(1.12);
      filter: grayscale(0%);
    }

    .about-photo:hover {
      filter: grayscale(60%) contrast(1.05);
      transform: scale(1.06);
    }
    .about-photo-caption {
      font-family: var(--font-mono);
      font-size: .6rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--red);
      margin-top: .8rem;
    }
    /* ── PHOTO BANNER ───────────────────────────── */
    #photo-banner { padding: 0; }
    .banner-wrap {
      position: relative;
      width: 100%;
      overflow: hidden;
      line-height: 0;
    }
    .banner-img {
      width: 100%;
      height: clamp(220px, 28vh, 340px);
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      display: block;
      filter: grayscale(100%) contrast(1.1) brightness(.85);
    }
    .banner-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(10,10,10,.72) 0%, rgba(10,10,10,.2) 60%, transparent 100%);
      display: flex;
      align-items: center;
      padding: 0 clamp(2rem, 8vw, 7rem);
    }
    .banner-quote {
      font-family: var(--font-display);
      font-size: clamp(1.3rem, 2.5vw, 2.2rem);
      font-weight: 300;
      line-height: 1.25;
      color: var(--white);
      letter-spacing: -.01em;
      max-width: 22ch;
    }
    .banner-quote em {
      color: var(--red);
      font-style: italic;
      font-size: inherit;
      font-family: inherit;
    }
    .banner-caption {
      position: absolute;
      bottom: 1rem;
      right: clamp(1.5rem, 4vw, 3rem);
      font-family: var(--font-mono);
      font-size: .6rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(245,244,240,.4);
      line-height: 1;
    }

    /* ── SCROLL REVEAL ───────────────────────────────── */
    /* JS-disabled fallback : tout reste visible */
    .reveal { opacity: 1; transform: none; }
    /* JS activé + desktop : état caché initial directement en CSS (plus besoin du forEach JS qui causait forced layout/TBT) */
    .js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
    .js .reveal.visible { opacity: 1; transform: none; }
    /* Mobile : pas d'animation (perfo + UX) */
    @media (max-width: 768px) { .js .reveal { opacity: 1; transform: none; transition: none; } }
    /* Préférence utilisateur : reduce motion */
    @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
    /* Compatibilité avec balisage existant */
    .reveal.animate { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.animate.visible, .reveal.visible { opacity: 1; transform: none; }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .2s; }
    .reveal-delay-3 { transition-delay: .35s; }
    .reveal-delay-4 { transition-delay: .5s; }

    /* ── ANIMATIONS ──────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: none; }
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes scrollPulse {
      0%, 100% { opacity: 1; transform: scaleY(1); }
      50% { opacity: .4; transform: scaleY(.6); }
    }

    /* ── MOBILE NAV ──────────────────────────────────── */
    @media (max-width: 768px) {
      .nav-links { display: none; flex-direction: column; position: fixed; inset: 0; background: var(--black); justify-content: center; align-items: center; gap: 2.5rem; font-size: 1.1rem; z-index: 99; }
      .nav-links.open { display: flex; }
      .nav-links a { font-size: .9rem; }
      .nav-menu-btn { display: flex; z-index: 101; }
      #about .about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
      .about-photo-wrap { max-width: 100%; height: 380px; }
      .about-photo-col { display: block; }
      .about-photo-wrap img { display: none; }
      .about-photo-wrap::before, .about-photo-wrap::after { display: none; }
      .about-photo-caption { display: none; }
      .about-photo-wrap { transition: background-size .6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
      .about-photo-wrap:hover { background-size: 110%; }
      .about-photo-wrap { background-image: url("img/marc-debies-portrait.webp"); background-size: cover; background-position: center 55%; background-repeat: no-repeat; background-color: #f0ede8; }
            #contact .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
      .projects-grid { grid-template-columns: 1fr; }
      .projects-grid > article { grid-column: 1 !important; }
      .refs-grid { grid-template-columns: 1fr; gap: 2.5rem; }
        .refs-cols { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
      .service-card { grid-template-columns: 1fr; gap: 1rem; }
      .project-card.has-photo {
        aspect-ratio: auto;
        min-height: unset;
        display: flex;
        flex-direction: column;
      }
      .project-card.has-photo .project-visual {
        position: relative;
        overflow: hidden;
        height: 220px;
        flex-shrink: 0;
      }
      .project-card.has-photo .project-visual .project-overlay { display: none; }
      .project-card.has-photo .project-text {
        background: #1a1816;
        padding: 1.25rem 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex-shrink: 0;
      }
      .project-card.featured {
        grid-column: 1 !important;
        min-height: unset;
        display: flex;
        flex-direction: column;
      }
      .project-card.featured .project-visual { height: 220px; flex-shrink: 0; }
      .project-card.featured .project-text { flex-shrink: 0; }
      .about-stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
      .hero-clients { display: none; }
      .about-partners-grid { grid-template-columns: 1fr; }
      .reveal, .reveal.animate { opacity: 1 !important; transform: none !important; }
      .proj-1, .proj-2, .proj-3, .proj-4, .proj-5, .proj-6, .proj-7, .proj-8, .proj-9 {
        grid-column: auto !important;
        grid-row: auto !important;
      }
    }
  
    .about-partners-trigger { margin-top: 2rem; }
    .partners-modal-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: .62rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--red);
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: 0;
      transition: opacity .2s;
    }
    .partners-modal-btn:hover { opacity: .7; }
    .partners-modal-arrow { font-size: .8rem; }
  
    /* Schema mobile tiles */
    .schema-tiles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--grey-light);
      margin: 1.5rem 0;
    }
    .schema-tile {
      background: var(--bg);
      border: none;
      cursor: pointer;
      padding: 1.25rem 1rem 1.25rem 1rem;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: .35rem;
      transition: background .15s;
      position: relative;
    }
    .schema-tile::after {
      content: '+';
      position: absolute;
      top: .6rem;
      right: .75rem;
      font-family: var(--font-mono);
      font-size: .75rem;
      color: var(--red);
      line-height: 1;
    }
    .schema-tile:active { background: var(--grey-light); }
    .schema-tile--experience {
      background: var(--ink);
      color: var(--bg);
    }
    .schema-tile--experience:active { background: #2a2624; }
    .schema-tile-arrow {
      font-size: 1rem;
      color: var(--red);
      margin-bottom: .1rem;
    }
    .schema-tile-label {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 400;
      color: var(--ink);
      line-height: 1.2;
    }
    .schema-tile--experience .schema-tile-label,
    .schema-tile--experience .schema-tile-label.lang-fr,
    .schema-tile--experience .schema-tile-label.lang-en,
    .schema-tile--experience .schema-tile-arrow { color: #f0ede8 !important; }
    .schema-tile--experience .schema-tile-sub,
    .schema-tile--experience .schema-tile-sub.lang-fr,
    .schema-tile--experience .schema-tile-sub.lang-en { color: rgba(240,237,232,.6) !important; }
    .schema-tile-sub {
      font-family: var(--font-mono);
      font-size: .58rem;
      letter-spacing: .08em;
      color: var(--grey-mid);
      text-transform: uppercase;
    }
  

  
    /* Modal overlay - applied via JS */
    .modal-backdrop {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      z-index: 9999 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 1rem !important;
      box-sizing: border-box !important;
      overflow-y: auto !important;
    }

/* --- Bloc 2 (était à la position 89498 dans index.html) --- */
.sc-lbl  { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; fill: #c53d2e; }
                .sc-sub1 { font-family: 'DM Mono', monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; fill: #1a1816; font-weight: 500; }
                .sc-sub2 { font-family: 'Outfit', sans-serif; font-size: 13px; fill: #6b5a4e; }
                .sc-ctr  { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; fill: #1a1816; }
                .sc-ctrup { font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; fill: #1a1816; }
                .sc-axis { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; fill: #c53d2e; }
                .sc-rule { stroke: #c8c2bb; stroke-width: 0.5; }
                .sc-tick { stroke: #c53d2e; stroke-width: 0.6; }
                .sc-hotspot { cursor: pointer; }
                .sc-hotspot rect { fill: transparent; }
                .sc-hotspot:hover .sc-lbl { fill: #a03020; }
                .sc-hotspot:hover .sc-ctrup { fill: #a03020; }
                .sc-hotspot:hover .sc-ctr { fill: #a03020; }
                .sc-hotspot:hover rect { fill: rgba(197,61,46,.07); }

/* --- Bloc 3 (était à la position 270848 dans index.html) --- */
.parcours-section {
      padding: 1.5rem 0;
      border-bottom: 1px solid var(--grey-light);
    }
    .parcours-section h3 {
      font-family: var(--font-mono);
      font-size: .62rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: .85rem;
      font-weight: 400;
      padding-left: .75rem;
      border-left: 2px solid var(--red);
    }
    .parcours-section p {
      font-size: clamp(.92rem, 1.05vw, 1rem);
      color: var(--text-mid);
      line-height: 1.8;
      margin: 0 0 .9rem;
    }
    .parcours-section p:last-child { margin-bottom: 0; }
    .parcours-section strong {
      color: var(--text);
      font-weight: 500;
      font-style: normal;
      font-family: var(--font-body);
    }
    .parcours-citation {
      font-style: italic;
      font-family: var(--font-display);
      font-size: 1em;
      color: var(--em-color);
    }




/* ====================================================================
   AMÉLIORATIONS UX (v2 — sobre)
   ==================================================================== */

/* ── Indicateur de scroll : ↓ subtil, présent uniquement si scrollable ── */
.scroll-indicator {
  position: absolute;
  bottom: .35rem;
  right: .75rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: rgba(245, 244, 240, .65);
  background: rgba(26, 24, 22, .35);
  border-radius: 50%;
  /* Cliquable */
  pointer-events: none; /* surchargé via .is-scrollable */
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transition: opacity .3s ease, background .12s ease, color .12s ease;
  animation: bounce-down 1.4s ease-in-out infinite alternate;
  -webkit-tap-highlight-color: transparent;
}
.project-text-wrap.is-scrollable .scroll-indicator { pointer-events: auto; }
.scroll-indicator:hover {
  background: rgba(197, 61, 46, .85);
  color: #fff;
  animation-play-state: paused;
}

/* Affichage uniquement quand le contenu dépasse réellement */
.project-text-wrap.is-scrollable .scroll-indicator { opacity: 1; }
.project-text-wrap.is-scrollable.scrolled-to-end .scroll-indicator { opacity: 0; }

/* Idem pour le gradient ::after — caché par défaut */
.project-text-wrap::after { opacity: 0; }
.project-text-wrap.is-scrollable::after { opacity: 1; }
.project-text-wrap.is-scrollable.scrolled-to-end::after { opacity: 0; }

/* ── Boutons de fermeture des modales (X) — version sobre ─────────────── */
.modal-close {
  position: absolute;
  touch-action: manipulation;
  top: .65rem;
  right: .65rem;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer !important;
  font-size: 1.4rem;
  line-height: 1;
  color: #5a5450;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Pas de transition — feedback strictement instantané */
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

/* Hover sobre : juste un cercle gris léger */
.modal-close:hover {
  background: rgba(26, 24, 22, .08);
}

/* Active (clic) : feedback instantané — scale + fond plus marqué */
.modal-close:active {
  background: rgba(26, 24, 22, .15);
  transform: scale(.9);
  transition-duration: .03s;
}

/* Focus clavier accessible */
.modal-close:focus-visible {
  outline: 2px solid #c53d2e;
  outline-offset: 2px;
}