:root {
      --blue: #30B2EC;
      --blue-dark: #1A9CD7;
      --ink: #1C2D42;
      --muted: #5C6E84;
      --border: #E2EAF1;
      --bg-light: #F0F8FD;
      --bg-cream: #FFF7F0;
      --orange: #F2994A;
      --footer: #0B1A2C;
      --footer-muted: #AFC0D4;
      --shadow: 0 4px 20px -2px rgba(28, 45, 66, 0.04);
      --sans: Inter, "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
      --display: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    }

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

    html { scroll-behavior: smooth; }

    body {
      background: #FFFFFF;
      color: var(--ink);
      font-family: var(--sans);
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
    }

    a { color: inherit; }
    img { max-width: 100%; display: block; }

    /* ---------- Layout ---------- */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding-left: 32px;
      padding-right: 32px;
    }
    .section { padding: 96px 0; }
    .bg-light { background: var(--bg-light); }
    .bg-white { background: #FFFFFF; }
    .bg-cream { background: var(--bg-cream); }

    /* ---------- Typography ---------- */
    .eyebrow {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--blue);
      text-transform: uppercase;
    }
    .eyebrow--boxed {
      background: #FFFFFF;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 6px 12px;
    }
    .accent { color: var(--blue); }

    h1 {
      font-family: var(--display);
      font-size: 40px;
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-wrap: pretty;
    }
    h2 {
      font-family: var(--display);
      font-size: 32px;
      line-height: 1.3;
      font-weight: 700;
      letter-spacing: -0.01em;
      text-wrap: pretty;
    }
    h3 {
      font-family: var(--display);
      font-size: 24px;
      line-height: 1.4;
      font-weight: 700;
      text-wrap: pretty;
    }
    .lead {
      font-size: 18px;
      line-height: 1.6;
      color: var(--muted);
      text-wrap: pretty;
    }
    p.body {
      font-size: 16px;
      line-height: 1.6;
      color: var(--muted);
      text-wrap: pretty;
    }
    p.body strong { color: var(--ink); font-weight: 600; }

    /* ---------- Buttons ---------- */
    .btn {
      display: inline-block;
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.05em;
      border-radius: 9999px;
      transition: all 150ms ease-in-out;
      white-space: nowrap;
      cursor: pointer;
    }
    .btn--primary {
      color: #FFFFFF;
      background: var(--blue);
      padding: 16px 32px;
    }
    .btn--primary:hover { background: var(--blue-dark); transform: scale(1.02); }
    .btn--sm { padding: 14px 32px; }
    .btn--ghost {
      color: var(--blue);
      background: transparent;
      border: 2px solid var(--blue);
      padding: 14px 32px;
    }
    .btn--ghost:hover { background: #FFFFFF; }

    /* ---------- Header ---------- */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .site-header .container {
      padding-top: 16px;
      padding-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 48px;
    }
    .brand { display: flex; align-items: center; gap: 8px; }
    .brand__mark {
      width: 32px; height: 32px;
      border-radius: 9999px;
      background: var(--blue);
      display: flex; align-items: center; justify-content: center;
      color: #FFFFFF;
      font-family: var(--display);
      font-weight: 800;
      font-size: 18px;
      flex-shrink: 0;
    }
    .brand__name {
      font-family: var(--display);
      font-weight: 800;
      font-size: 20px;
      letter-spacing: -0.02em;
      color: var(--ink);
      white-space: nowrap;
    }
    .brand__name span { color: var(--muted); font-weight: 600; }
    .nav { display: flex; align-items: center; gap: 32px; flex: 1; }
    .nav a {
      text-decoration: none;
      color: var(--muted);
      font-size: 16px;
      font-weight: 500;
      transition: color 150ms ease;
    }
    .nav a:hover { color: var(--ink); }
    .header__cta { flex-shrink: 0; }

    /* ---------- Hero ---------- */
    .hero .container {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .stack { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
    .hero p.lead { max-width: 520px; }
    .btn-row { display: flex; align-items: center; gap: 24px; margin-top: 8px; flex-wrap: wrap; }

    /* ---------- Image slots ---------- */
    .slot {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background:
        linear-gradient(135deg, rgba(48,178,236,0.10), rgba(48,178,236,0.02)),
        #FFFFFF;
      border: 1px dashed #B9D8EC;
      color: var(--muted);
      font-size: 15px;
      font-weight: 600;
      overflow: hidden;
    }
    .slot::before {
      content: "";
      position: absolute;
      top: 50%; left: 50%;
      width: 48px; height: 48px;
      margin-top: -44px;
      transform: translateX(-50%);
      background: var(--blue);
      opacity: 0.9;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-4.5-4.5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-4.5-4.5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    .slot span { position: relative; padding-top: 44px; }
    .slot--r24 { border-radius: 24px; }
    .slot--r16 { border-radius: 16px; }
    .slot--hero { height: 400px; }
    .slot--video { height: 380px; }
    .slot--culture { width: 280px; height: 280px; flex-shrink: 0; }

    /* ---------- Cards ---------- */
    .card {
      background: #FFFFFF;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

    .section-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      text-align: center;
    }
    .section-head h2 { max-width: 680px; }

    /* ---------- Audit ---------- */
    .audit .container {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 64px;
      align-items: start;
    }
    .audit__intro { position: sticky; top: 112px; }
    .audit__list { display: flex; flex-direction: column; gap: 24px; }
    .opp {
      background: var(--bg-light);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px;
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }
    .badge-num {
      width: 44px; height: 44px;
      border-radius: 9999px;
      background: var(--blue);
      color: #FFFFFF;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--display);
      font-weight: 800;
      font-size: 18px;
      flex-shrink: 0;
    }
    .opp__text { display: flex; flex-direction: column; gap: 8px; }

    /* ---------- Plan 90 ---------- */
    .plan__pill {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #FFFFFF;
      text-transform: uppercase;
      background: var(--blue);
      border-radius: 4px;
      padding: 6px 12px;
      align-self: flex-start;
    }
    .plan__items { display: flex; flex-direction: column; gap: 12px; }
    .plan__item { display: flex; gap: 12px; align-items: flex-start; }
    .plan__item .arrow { color: var(--blue); font-weight: 800; line-height: 1.6; }
    .plan__item span.txt { font-size: 16px; line-height: 1.6; color: var(--muted); }

    /* ---------- Idées ---------- */
    .ideas-head { align-items: flex-start; text-align: left; max-width: 680px; }
    .idea {
      background: #FFFFFF;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px 32px;
      box-shadow: var(--shadow);
      display: flex;
      gap: 24px;
      align-items: center;
    }
    .idea__num {
      font-family: var(--display);
      font-size: 24px;
      font-weight: 800;
      color: var(--blue);
      flex-shrink: 0;
      width: 40px;
    }

    /* ---------- Culture ---------- */
    .culture .container { display: flex; flex-direction: column; align-items: center; gap: 48px; }
    .eyebrow--culture {
      color: var(--ink);
      background: var(--orange);
      border-radius: 4px;
      padding: 6px 14px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      font-size: 14px;
    }
    .culture__card {
      max-width: 1000px;
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 48px;
      align-items: center;
      background: #FFFFFF;
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 48px;
      box-shadow: var(--shadow);
    }
    blockquote {
      font-family: var(--display);
      font-size: 24px;
      line-height: 1.4;
      font-weight: 700;
      color: var(--ink);
      text-wrap: pretty;
    }
    figure { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
    figcaption { display: flex; flex-direction: column; gap: 4px; }
    figcaption .name { font-size: 16px; font-weight: 700; color: var(--ink); }
    figcaption .role { font-size: 16px; color: var(--muted); }

    /* ---------- CTA ---------- */
    .cta .container { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
    .cta h2 { max-width: 680px; }
    .cta .lead { max-width: 560px; }
    .cta__contact { font-size: 14px; font-weight: 500; color: var(--muted); }

    /* ---------- Footer ---------- */
    .site-footer { background: var(--footer); color: #FFFFFF; }
    .site-footer .container {
      padding-top: 48px;
      padding-bottom: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap;
    }
    .site-footer .credit { font-size: 14px; color: var(--footer-muted); }
    .footer__links { display: flex; align-items: center; gap: 32px; }
    .footer__links a { text-decoration: none; font-size: 14px; color: var(--footer-muted); transition: color 150ms ease; }
    .footer__links a:hover { color: #FFFFFF; }

    /* ---------- Responsive ---------- */
    @media (max-width: 960px) {
      .section { padding: 72px 0; }
      h1 { font-size: 34px; }
      h2 { font-size: 28px; }
      .hero .container,
      .video .container,
      .audit .container { grid-template-columns: 1fr; gap: 40px; }
      .audit__intro { position: static; top: auto; }
      .grid-3 { grid-template-columns: 1fr 1fr; }
      .nav { display: none; }
    }
    @media (max-width: 760px) {
      .video .container { display: flex; flex-direction: column-reverse; }
      .culture__card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 32px; }
      .culture__card figure { align-items: center; }
      .slot--culture { width: 100%; max-width: 280px; }
    }
    @media (max-width: 620px) {
      .container { padding-left: 20px; padding-right: 20px; }
      .section { padding: 56px 0; }
      h1 { font-size: 28px; }
      h2 { font-size: 24px; }
      .grid-3, .grid-2 { grid-template-columns: 1fr; }
      .header__cta { display: none; }
      .site-header .container { gap: 16px; }
      .btn-row .btn { flex: 1; text-align: center; }
      blockquote { font-size: 20px; }
    }

    /* ---------- Médias réels (remplacent les emplacements témoins) ---------- */
    .media-hero,
    .media-video,
    .media-culture {
      display: block;
      object-fit: cover;
      overflow: hidden;
    }
    .media-hero { width: 100%; height: 400px; border-radius: 24px; }
    .media-video { width: 100%; height: 380px; border-radius: 24px; background: #000; }
    .media-culture { width: 280px; height: 280px; border-radius: 16px; flex-shrink: 0; }
    @media (max-width: 760px) {
      .media-culture { width: 100%; max-width: 280px; }
    }