/* ── TOKENS ── */
    :root {
      --bordeaux:   #7B0018;
      --bordeaux-d: #5a0012;
      --bordeaux-l: #9b1a2e;
      --sky:        #8EB4D4;
      --sky-l:      #b3cfdf;
      --gold:       #D4A017;
      --gold-l:     #e8b82a;
      --white:      #ffffff;
      --text-light: rgba(255,255,255,0.78);
      --text-muted: rgba(255,255,255,0.5);
      --radius:     4px;
      --transition: .35s cubic-bezier(.4,0,.2,1);
    }

    /* ── RESET ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 80px; }
    body {
      font-family: 'Barlow', sans-serif;
      background: var(--bordeaux);
      color: var(--white);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; color: inherit; }
    button { font: inherit; }

    .container { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

    /* ── REVEAL (seulement si JS actif : le contenu reste lisible sans JS) ── */
    .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
    .js .reveal.visible { opacity: 1; transform: none; }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .22s; }
    .reveal-delay-3 { transition-delay: .34s; }
    .reveal-delay-4 { transition-delay: .46s; }

    /* ── NAV ── */
    nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 0; transition: background var(--transition), padding var(--transition); }
    nav.scrolled { background: rgba(90,0,18,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 12px 0; border-bottom: 1px solid rgba(142,180,212,.15); }
    nav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .nav-logo { display: flex; align-items: center; flex-shrink: 0; }
    .nav-logo svg { height: 34px; width: auto; }
    .nav-links { display: flex; gap: 24px; list-style: none; }
    .nav-links a { font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-l); transition: color var(--transition); white-space: nowrap; }
    .nav-links a:hover { color: var(--gold); }
    .nav-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
    .lang-switch { display: flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
    .lang-switch a { color: rgba(142,180,212,.45); transition: color var(--transition); padding: 4px 7px; border-radius: 3px; }
    .lang-switch a:hover { color: var(--sky); }
    .lang-switch a.active { color: var(--sky); border: 1px solid rgba(142,180,212,.3); }
    .lang-sep { color: rgba(142,180,212,.2); }
    .nav-cta { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 1.5px solid var(--gold); color: var(--gold); padding: 8px 20px; border-radius: var(--radius); transition: background var(--transition), color var(--transition); white-space: nowrap; }
    .nav-cta:hover { background: var(--gold); color: var(--bordeaux); }
    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: 0; }
    .hamburger span { display: block; width: 26px; height: 2px; background: var(--sky); border-radius: 2px; transition: all .3s ease; }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .mobile-menu { display: none; flex-direction: column; background: var(--bordeaux-d); border-top: 1px solid rgba(142,180,212,.15); }
    .mobile-menu.open { display: flex; }
    .mobile-menu a { padding: 15px 32px; font-size: .85rem; font-weight: 500; letter-spacing: .08em; color: var(--sky-l); text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.05); }

    /* ── HERO ── */
    #hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 130px 32px 90px; position: relative; overflow: hidden; }
    .hero-bg { position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 80% 60% at 50% 60%, rgba(142,180,212,.07) 0%, transparent 70%),
        radial-gradient(circle 320px at 8% 18%, rgba(212,160,23,.06) 0%, transparent 60%),
        radial-gradient(circle 220px at 92% 78%, rgba(142,180,212,.07) 0%, transparent 60%); }
    .hero-bg::before, .hero-bg::after { content: ''; position: absolute; border-radius: 50%; animation: float 8s ease-in-out infinite; }
    .hero-bg::before { width: 340px; height: 340px; top: 4%; left: -9%; background: rgba(212,160,23,.1); }
    .hero-bg::after  { width: 220px; height: 220px; bottom: 8%; right: -5%; background: rgba(142,180,212,.09); animation-delay: -4s; }
    @keyframes float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-22px) scale(1.04); } }

    .hero-kicker { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(212,160,23,.38); padding: 7px 18px; border-radius: 40px; margin-bottom: 40px; }
    .hero-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.1rem, 5.4vw, 4.2rem); font-weight: 800; line-height: 1.04; letter-spacing: .03em; text-transform: uppercase; color: var(--sky); margin-bottom: 30px; }
    .hero-title span { display: block; }
    .hero-title .line-2 { color: var(--white); }
    .hero-title .line-3 { color: var(--gold); }
    .hero-tagline { max-width: 680px; font-size: clamp(.95rem, 1.6vw, 1.1rem); font-weight: 300; line-height: 1.78; color: var(--text-light); margin: 0 auto 52px; }
    .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

    .btn-primary { display: inline-block; font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--gold); color: var(--bordeaux-d); padding: 15px 34px; border-radius: var(--radius); box-shadow: 0 4px 22px rgba(212,160,23,.28); transition: background var(--transition), transform var(--transition), box-shadow var(--transition); }
    .btn-primary:hover { background: var(--gold-l); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(212,160,23,.38); }
    .btn-secondary { display: inline-block; font-size: .82rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid rgba(142,180,212,.5); color: var(--sky); padding: 14px 30px; border-radius: var(--radius); transition: border-color var(--transition), color var(--transition); }
    .btn-secondary:hover { border-color: var(--sky); color: var(--white); }

    .hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); }
    .scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, var(--sky)); animation: scrollPulse 2s ease-in-out infinite; }
    @keyframes scrollPulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

    /* ── SHARED ── */
    section { padding: 100px 0; }
    hr.rule { border: none; border-top: 1px solid rgba(142,180,212,.13); margin: 0; }
    .section-label { font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
    .section-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.05; color: var(--sky); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 24px; }
    .section-body { font-size: clamp(.93rem, 1.4vw, 1.04rem); font-weight: 300; line-height: 1.82; color: var(--text-light); max-width: 680px; }
    .section-body + .section-body { margin-top: 16px; }
    .section-body strong { color: var(--white); font-weight: 500; }

    /* ── CONTEXTE ── */
    #context { background: var(--bordeaux-d); }
    .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 64px; }
    .stat-card { background: rgba(142,180,212,.055); border: 1px solid rgba(142,180,212,.12); padding: 40px 32px; display: flex; flex-direction: column; transition: background var(--transition), border-color var(--transition); }
    .stat-card:hover { background: rgba(142,180,212,.1); border-color: rgba(142,180,212,.24); }
    .stat-card:first-child { border-radius: var(--radius) 0 0 var(--radius); }
    .stat-card:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
    .stat-number { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.8rem, 6vw, 4.5rem); font-weight: 900; color: var(--gold); line-height: 1; margin-bottom: 12px; }
    .stat-title { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: 10px; }
    .stat-desc { font-size: .87rem; font-weight: 300; line-height: 1.68; color: var(--text-light); flex: 1; }
    .stat-source { margin-top: 18px; font-size: .72rem; letter-spacing: .06em; color: var(--text-muted); }
    .stat-source a { border-bottom: 1px solid rgba(142,180,212,.3); }
    .stat-source a:hover { color: var(--sky); }

    /* ── ENJEU ── */
    #challenge { background: var(--bordeaux); }
    .enjeu-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .enjeu-quote { font-size: clamp(1rem, 1.8vw, 1.25rem); font-style: italic; font-weight: 300; line-height: 1.72; color: var(--sky); border-left: 3px solid var(--gold); padding-left: 28px; margin-top: 40px; }
    .enjeu-points { display: flex; flex-direction: column; gap: 28px; }
    .enjeu-point { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
    .enjeu-icon { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(142,180,212,.28); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
    .enjeu-icon svg { width: 17px; height: 17px; }
    .enjeu-point h3 { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
    .enjeu-point p { font-size: .88rem; font-weight: 300; line-height: 1.65; color: var(--text-light); }

    /* ── V.M.R. ── */
    #vmr { background: var(--bordeaux-d); }
    .vmr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; }
    .vmr-card { background: rgba(255,255,255,.03); border: 1px solid rgba(142,180,212,.1); padding: 44px 34px; position: relative; }
    .vmr-card:first-child { border-radius: var(--radius) 0 0 var(--radius); }
    .vmr-card:last-child  { border-radius: 0 var(--radius) var(--radius) 0; background: rgba(212,160,23,.07); border-color: rgba(212,160,23,.28); }
    .vmr-letter { font-family: 'Barlow Condensed', sans-serif; font-size: 4.6rem; font-weight: 900; line-height: .9; color: var(--sky); margin-bottom: 18px; }
    .vmr-card:last-child .vmr-letter { color: var(--gold); }
    .vmr-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--white); margin-bottom: 4px; }
    .vmr-level { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
    .vmr-card p { font-size: .9rem; font-weight: 300; line-height: 1.7; color: var(--text-light); }
    .vmr-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px; }
    .vmr-bottom h3 { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: 10px; }
    .vmr-bottom p { font-size: .92rem; font-weight: 300; line-height: 1.75; color: var(--text-light); }

    /* ── MÉTHODE ── */
    #method { background: var(--bordeaux); }
    .solution-intro { max-width: 720px; margin-bottom: 72px; }
    .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
    .step-card { background: rgba(255,255,255,.03); border: 1px solid rgba(142,180,212,.1); padding: 48px 36px; position: relative; transition: background var(--transition), border-color var(--transition), transform var(--transition); }
    .step-card:hover { background: rgba(142,180,212,.08); border-color: rgba(142,180,212,.22); transform: translateY(-4px); }
    .step-card:first-child { border-radius: var(--radius) 0 0 var(--radius); }
    .step-card:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
    .step-number { font-family: 'Barlow Condensed', sans-serif; font-size: 5rem; font-weight: 900; color: rgba(142,180,212,.07); line-height: 1; position: absolute; top: 20px; right: 28px; user-select: none; pointer-events: none; }
    .step-tag { font-size: .67rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
    .step-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.7rem; font-weight: 800; text-transform: uppercase; color: var(--sky); letter-spacing: .04em; margin-bottom: 6px; }
    .step-subtitle { font-size: .77rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(142,180,212,.6); margin-bottom: 22px; }
    .tech-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
    .tech-pill { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(142,180,212,.3); color: var(--sky-l); padding: 4px 10px; border-radius: 20px; }
    .step-items { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .step-items li { font-size: .87rem; font-weight: 300; line-height: 1.62; color: var(--text-light); padding-left: 16px; position: relative; }
    .step-items li::before { content: ''; position: absolute; left: 0; top: 10px; width: 5px; height: 1px; background: var(--gold); }
    .step-items li strong { color: var(--white); font-weight: 500; }

    /* ── RADAR ── */
    #radar { background: var(--bordeaux-d); }
    .radar-intro { max-width: 760px; }
    .radar-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 56px 0 18px; }
    .kpi { background: rgba(142,180,212,.055); border: 1px solid rgba(142,180,212,.12); padding: 28px 24px; }
    .kpi:first-child { border-radius: var(--radius) 0 0 var(--radius); }
    .kpi:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
    .kpi-number { font-family: 'Barlow Condensed', sans-serif; font-size: 2.8rem; font-weight: 900; line-height: 1; color: var(--gold); margin-bottom: 8px; }
    .kpi-label { font-size: .84rem; font-weight: 300; line-height: 1.5; color: var(--text-light); }
    .radar-method { font-size: .78rem; font-weight: 300; line-height: 1.7; color: var(--text-muted); max-width: 900px; margin-bottom: 52px; }

    .radar-tabs { display: none; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
    .js .radar-tabs { display: flex; }
    .radar-tab { cursor: pointer; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-l); background: transparent; border: 1px solid rgba(142,180,212,.3); padding: 10px 18px; border-radius: 40px; transition: all var(--transition); }
    .radar-tab:hover { border-color: var(--sky); color: var(--white); }
    .radar-tab[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--bordeaux-d); }
    .radar-tab:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

    .radar-panel + .radar-panel { margin-top: 64px; }
    .js .radar-panel + .radar-panel { margin-top: 0; }
    .radar-panel h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sky); margin-bottom: 18px; }
    .radar-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
    .chart { background: rgba(255,255,255,.035); border: 1px solid rgba(142,180,212,.12); padding: 28px 26px; }
    .chart:first-child { border-radius: var(--radius) 0 0 var(--radius); }
    .chart:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
    .chart figcaption { display: flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--white); margin-bottom: 20px; }
    .chart figcaption::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--fill); }
    .chart.gpt { --fill: var(--sky); }
    .chart.gemini { --fill: var(--gold); }
    .ranking { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .ranking li { display: grid; grid-template-columns: 1.4rem minmax(0, 9.5rem) 1fr 3.2rem; align-items: center; gap: 10px; font-size: .84rem; }
    .rk { color: var(--text-muted); font-weight: 500; text-align: right; }
    .brand { color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .track { height: 16px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
    .fill { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--fill); border-radius: 3px; }
    .val { font-weight: 600; color: var(--white); text-align: right; font-variant-numeric: tabular-nums; }
    .radar-insight { margin-top: 22px; padding: 24px 28px; border-left: 3px solid var(--gold); background: rgba(212,160,23,.06); font-size: .95rem; font-weight: 300; line-height: 1.75; color: var(--text-light); }
    .radar-insight strong { display: block; margin-top: 8px; color: var(--white); font-weight: 500; }

    .radar-cta { margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 36px 40px; border: 1px solid rgba(142,180,212,.2); border-radius: var(--radius); background: rgba(142,180,212,.05); }
    .radar-cta h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.7rem; font-weight: 800; text-transform: uppercase; color: var(--sky); margin-bottom: 6px; }
    .radar-cta p { font-size: .92rem; font-weight: 300; line-height: 1.65; color: var(--text-light); max-width: 560px; }

    /* ── FAQ ── */
    #faq { background: var(--bordeaux); }
    .faq-list { margin-top: 48px; border-top: 1px solid rgba(142,180,212,.15); max-width: 900px; }
    .faq-item { border-bottom: 1px solid rgba(142,180,212,.15); }
    .faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: 1.02rem; font-weight: 500; color: var(--white); }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: '+'; font-size: 1.5rem; font-weight: 300; color: var(--gold); flex-shrink: 0; transition: transform var(--transition); }
    .faq-item[open] summary::after { transform: rotate(45deg); }
    .faq-item summary:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; }
    .faq-answer { padding: 0 0 26px; font-size: .93rem; font-weight: 300; line-height: 1.78; color: var(--text-light); max-width: 780px; }

    /* ── AGENCES ── */
    #agencies { background: var(--bordeaux-d); }
    .agences-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 2px; margin-top: 60px; }
    .agence-card { background: rgba(255,255,255,.03); border: 1px solid rgba(142,180,212,.1); padding: 52px 44px; display: flex; flex-direction: column; }
    .agence-card:first-child { border-radius: var(--radius) 0 0 var(--radius); background: rgba(142,180,212,.06); border-color: rgba(142,180,212,.2); }
    .agence-card:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
    .agence-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--white); margin-bottom: 6px; }
    .agence-type { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
    .agence-desc { font-size: .93rem; font-weight: 300; line-height: 1.78; color: var(--text-light); margin-bottom: 22px; }
    .agence-refs-label { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(142,180,212,.6); margin-bottom: 10px; }
    .agence-refs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-bottom: 26px; }
    .agence-refs li { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(212,160,23,.3); color: var(--gold); padding: 5px 11px; border-radius: 20px; }
    .agence-team { font-size: .82rem; font-weight: 400; color: rgba(142,180,212,.6); font-style: italic; margin-top: auto; }
    .agence-link { display: inline-block; margin-top: 14px; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
    .agence-link:hover { color: var(--gold); }
    .agences-ambition { text-align: center; margin-top: 52px; font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 700; letter-spacing: .04em; color: var(--gold); text-transform: uppercase; }

    /* ── CONTACT ── */
    #contact { background: var(--bordeaux); text-align: center; }
    .contact-inner { max-width: 640px; margin: 0 auto; }
    .contact-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--sky); line-height: 1; margin-bottom: 20px; }
    .contact-body { font-size: 1rem; font-weight: 300; line-height: 1.78; color: var(--text-light); margin-bottom: 48px; }
    .contact-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-field { display: flex; flex-direction: column; gap: 6px; }
    .form-field label { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(142,180,212,.75); }
    .form-field input, .form-field select, .form-field textarea { background: rgba(255,255,255,.06); border: 1px solid rgba(142,180,212,.2); border-radius: var(--radius); color: var(--white); font-family: 'Barlow', sans-serif; font-size: .9rem; font-weight: 300; padding: 13px 16px; outline: none; -webkit-appearance: none; transition: border-color var(--transition), background var(--transition); }
    .form-field input::placeholder, .form-field textarea::placeholder { color: rgba(255,255,255,.3); }
    .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--sky); background: rgba(142,180,212,.1); }
    .form-field select option { background: var(--bordeaux-d); }
    .form-field textarea { resize: vertical; min-height: 110px; }
    .form-submit { margin-top: 8px; width: 100%; font-size: .84rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--gold); color: var(--bordeaux-d); padding: 16px; border: none; border-radius: var(--radius); cursor: pointer; box-shadow: 0 4px 20px rgba(212,160,23,.22); transition: background var(--transition), transform var(--transition), box-shadow var(--transition); }
    .form-submit:hover { background: var(--gold-l); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(212,160,23,.32); }
    .contact-note { margin-top: 20px; font-size: .74rem; color: var(--text-muted); text-align: center; }

    /* ── FOOTER ── */
    footer { background: var(--bordeaux-d); border-top: 1px solid rgba(142,180,212,.1); padding: 40px 0; }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
    .footer-logo svg { height: 26px; width: auto; }
    .footer-copy { font-size: .74rem; font-weight: 300; color: var(--text-muted); }
    .footer-copy a:hover, .footer-links a:hover { color: var(--gold); }
    .footer-links { display: flex; gap: 22px; list-style: none; flex-wrap: wrap; }
    .footer-links a { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(142,180,212,.5); transition: color var(--transition); }

    /* ── RESPONSIVE ── */
    @media (max-width: 1080px) {
      .nav-links, .nav-cta { display: none; }
      .hamburger { display: flex; }
    }
    @media (max-width: 960px) {
      .stats-grid, .steps-grid, .vmr-grid, .radar-charts, .agences-grid { grid-template-columns: 1fr; }
      .radar-kpis { grid-template-columns: 1fr 1fr; }
      .stat-card, .step-card, .vmr-card, .chart, .agence-card, .kpi { border-radius: 0 !important; }
      .enjeu-inner, .vmr-bottom { grid-template-columns: 1fr; gap: 40px; }
      .form-row { grid-template-columns: 1fr; }
      .footer-inner { flex-direction: column; text-align: center; }
      .footer-links { justify-content: center; }
      section { padding: 72px 0; }
    }
    @media (max-width: 480px) {
      .container { padding: 0 16px; }
      #hero { padding: 120px 16px 80px; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .hero-actions a { text-align: center; }
      .step-card, .vmr-card, .agence-card { padding: 34px 22px; }
      .chart { padding: 22px 16px; }
      .ranking li { grid-template-columns: 1.1rem minmax(0, 7rem) 1fr 2.8rem; gap: 8px; font-size: .8rem; }
      .brand { white-space: normal; line-height: 1.2; }
      .radar-cta { padding: 28px 22px; }
      .radar-insight { padding: 20px 18px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .hero-bg::before, .hero-bg::after, .scroll-line { animation: none; }
      .js .reveal { opacity: 1; transform: none; transition: none; }
    }

    /* ── V3 : multi-pages ── */
    nav .nav-links a[aria-current="page"] { color: var(--gold); }
    .nav-logo svg { overflow: visible; }
    .page-head { padding: 150px 0 24px; background: var(--bordeaux-d); }
    .page-head nav.breadcrumb { position: static; padding: 0; }
    .breadcrumb { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 26px; }
    .breadcrumb a { color: var(--sky-l); }
    .breadcrumb a:hover { color: var(--gold); }
    .breadcrumb span[aria-hidden] { margin: 0 8px; opacity: .5; }
    .page-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; color: var(--sky); margin-bottom: 22px; }
    .page-lead { max-width: 760px; font-size: 1.05rem; font-weight: 300; line-height: 1.8; color: var(--text-light); }
    .page-section { background: var(--bordeaux-d); padding-top: 40px; }
    .radar-flag { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 5px 12px; border-radius: 30px; border: 1px solid rgba(212,160,23,.5); color: var(--gold); }
    .radar-flag.soon { border-color: rgba(142,180,212,.4); color: var(--sky-l); }
    .radar-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
    .teaser-preview { margin-top: 8px; }
    .teaser-preview h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--white); margin-bottom: 18px; }
    .editions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 8px; }
    .edition-card { display: flex; flex-direction: column; gap: 12px; padding: 30px 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(142,180,212,.14); }
    .edition-card .num { font-family: 'Barlow Condensed', sans-serif; font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--gold); }
    .edition-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.45rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--white); }
    .edition-card p { font-size: .9rem; font-weight: 300; line-height: 1.7; color: var(--text-light); }
    .edition-card a.edition-link { margin-top: auto; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
    .edition-card a.edition-link:hover { color: var(--white); }
    .edition-card.is-soon { opacity: .82; }
    .radar-note { max-width: 900px; margin-top: 18px; margin-bottom: 22px; padding: 16px 20px; border-left: 3px solid var(--sky); background: rgba(142,180,212,.07); font-size: .84rem; font-weight: 300; line-height: 1.7; color: var(--text-light); }
    .radar-nav { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 40px; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
    .radar-nav a { color: var(--gold); }
    .radar-nav a:hover { color: var(--white); }
    .prose h2:not(.section-title) { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 800; text-transform: uppercase; color: var(--white); margin: 44px 0 14px; }
    .prose p:not(.section-label) { max-width: 760px; font-size: .98rem; font-weight: 300; line-height: 1.85; color: var(--text-light); margin-bottom: 14px; }
    .prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
    @media (max-width: 900px) {
      .editions-grid { grid-template-columns: 1fr; }
      .page-head { padding: 120px 0 16px; }
    }
    @media (max-width: 600px) { .container { padding: 0 16px; } }

    /* ── V3.1 : Radar #2 (cité en premier, blocs d'analyse, pont étape 3) ── */
    .track { position: relative; }
    .fill2 { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--r) * 1%); background: rgba(255,255,255,.5); border-radius: 3px; }
    .ranking.has-first li { grid-template-columns: 1.4rem minmax(0, 9.5rem) 1fr 3.2rem 3rem; }
    .ranking .first { font-size: .76rem; text-align: right; color: var(--text-muted); }
    .radar-search, .radar-legend { max-width: 900px; font-size: .92rem; font-weight: 300; line-height: 1.75; color: var(--text-light); margin-bottom: 18px; }
    .radar-search strong { color: var(--white); font-weight: 500; }
    .edition-tested { font-size: .74rem; letter-spacing: .06em; color: var(--text-muted); margin-top: -6px; }
    .bridge-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 8px 0 8px; }
    .bridge-compare-card { padding: 26px 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(142,180,212,.14); }
    .bridge-compare-card:last-child { border-color: rgba(212,160,23,.55); }
    .bridge-compare-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--sky); margin-bottom: 14px; }
    .bridge-compare-card ul { list-style: none; display: grid; gap: 12px; }
    .bridge-compare-card li { font-size: .88rem; font-weight: 300; line-height: 1.65; color: var(--text-light); }
    .bridge-compare-card li strong { display: block; color: var(--white); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
    .bridge-closing { margin-top: 28px; font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--gold); line-height: 1.25; }
    @media (max-width: 900px) { .bridge-compare { grid-template-columns: 1fr; } }
    .radar-byline { margin-top: 18px; font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
    .radar-byline a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
    .radar-legend { font-size: .76rem; color: var(--text-muted); margin-bottom: 14px; }
    .radar-brand { margin-top: 14px; padding: 20px 28px; border-left: 3px solid var(--sky); background: rgba(142,180,212,.07); font-size: .92rem; font-weight: 300; line-height: 1.75; color: var(--text-light); }
    .radar-brand strong { color: var(--sky-l); font-weight: 600; }
    .radar-h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--white); margin: 56px 0 14px; }
    .radar-h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sky); margin: 36px 0 14px; }
    .radar-lead { max-width: 860px; font-size: .96rem; font-weight: 300; line-height: 1.85; color: var(--text-light); margin-bottom: 18px; }
    .radar-table-wrap { overflow-x: auto; margin: 6px 0 4px; }
    .radar-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
    .radar-table th, .radar-table td { padding: 12px 14px; text-align: right; border-bottom: 1px solid rgba(142,180,212,.14); color: var(--text-light); font-weight: 300; }
    .radar-table thead th { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-l); }
    .radar-table th:first-child, .radar-table td:first-child { text-align: left; }
    .radar-table tbody th { color: var(--white); font-weight: 500; }
    .bridge-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 8px 0 8px; }
    .bridge-step { padding: 26px 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(142,180,212,.14); }
    .bridge-step.is-here { border-color: rgba(212,160,23,.55); }
    .bridge-num { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
    .bridge-step h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--sky); margin-bottom: 10px; }
    .bridge-step p:not(.bridge-num) { font-size: .88rem; font-weight: 300; line-height: 1.7; color: var(--text-light); }
    .bridge-map { list-style: none; display: grid; gap: 2px; }
    .bridge-map li { display: grid; grid-template-columns: 1fr 1.6rem 1fr; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(255,255,255,.035); font-size: .88rem; font-weight: 300; line-height: 1.6; color: var(--text-light); }
    .bridge-map .arrow { color: var(--gold); text-align: center; }
    .bridge-map strong { color: var(--white); font-weight: 500; }
    @media (max-width: 900px) {
      .bridge-steps { grid-template-columns: 1fr; }
      .bridge-map li { grid-template-columns: 1fr; gap: 4px; }
      .bridge-map .arrow { text-align: left; }
    }
    @media (max-width: 600px) {
      .ranking.has-first li { grid-template-columns: 1.1rem minmax(0, 6.2rem) 1fr 2.7rem 2.5rem; gap: 6px; font-size: .78rem; }
      .radar-brand { padding: 18px 16px; }
      .radar-h2 { font-size: 1.55rem; }
    }