@font-face {
      font-family: "Roboto";
      src: url("Annexes_00969DV015/Roboto/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --yellow: #ffff00;
      --soft-yellow: #fff8a6;
      --black: #090909;
      --white: #fff;
      --grey: #f1f1f1;
      --beige: #ede9d5;
      --line: #c9c9c9;
      --max: 1240px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--black);
      background: var(--white);
      font-family: "Roboto", Arial, sans-serif;
      font-size: 17px;
      line-height: 1.6;
    }
    img { display: block; max-width: 100%; 
    }

    a { color: inherit; 
    }

   [id] {
    scroll-margin-top: 10px;
}

    .wrap { 
      width: min(calc(100% - 40px), var(--max)); 
      margin-inline: auto; 
    }

  .bs-header {
  width: 100%;
  border-bottom: 1px solid rgba(26, 166, 166, 0.25);
  background: var(--yellow);
  box-shadow: 0 8px 24px rgba(15, 111, 116, 0.08);
}

.bs-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(1120px, calc(100% - 2rem));
  min-height: 104px;
  margin-inline: auto;
}

.bs-header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
  padding: 0 0 16px;
}

.bs-return-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 16px;
  border: 2px solid var(--black);
  border-radius: 999px;
  color: var(--black);
  background: var(--soft-yellow );
 
  box-shadow: 3px 3px 0 var(--black);
  font-family: Arial, sans-serif;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.bs-return-button:hover,
.bs-return-button:focus-visible {
  color: var(--black);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--black);
  outline: none;
}

.bs-return-button:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--black);
}

.bs-brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: #263238;
  text-decoration: none;
}

.bs-brand img {
  width: 176px;
  height: 76px;
  object-fit: contain;
}

.bs-brand span {
  display: grid;
}

.bs-brand strong {
  color: var(--black);
  font-family: "Fraunces", serif;
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
}

.bs-brand small {
  color: #65767a;
  font-family: Arial, sans-serif;
}

.bs-nav a,
.bs-footer a {
  color: #0f6f74;
  font-family: Arial, sans-serif;
  font-weight: 700;
  text-decoration: none;
}

.bs-nav a:hover,
.bs-footer a:hover {
  color: #f27d72;
}



   header {
      position: sticky;
      top: 0;
      z-index: 10;
      border-bottom: 1px solid var(--black);
      background: rgba(255, 255, 0, .96);
    }



    nav {
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand { 
      font-size: 1.1rem; 
      font-weight: 850; 
      letter-spacing: -.04em; 
      text-decoration: none; 
    }
    
    .menu { 
      display: flex; 
      flex-wrap: wrap; 
      gap: 22px; 
      font-size: .78rem; 
      font-weight: 700; 
      text-transform: uppercase; 
      letter-spacing: .08em; 
    }

    .menu a { 
      text-decoration: none; 
    }

    .menu a:hover { 
      text-decoration: underline; 
      text-underline-offset: 5px; 
    }

    .hero {
      min-height: 38vh;
      display: grid;
      align-items: end;
      background: var(--beige);
      border-bottom: 1px solid var(--black);
    }

    .hero-inner { 
      padding: 2vw 0 3vw; 
    }

    /* Visuel principal volontairement très ample dans le hero. */
    .hero .grid-2 {
      grid-template-columns: minmax(250px, .65fr) minmax(0, 1.35fr);
      align-items: stretch;
      gap: clamp(30px, 4vw, 64px);
    }

    .hero .grid-2 > div:first-child {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hero .current-site {
      margin-top: 0;
      padding: 12px;
      width: 100%;
      max-width: none;
      margin-left: 0;
      display: flex;
      flex-direction: column;
    }

    .hero .current-site img {
      width: 100%;
      height: clamp(500px, 65vh, 780px);
      max-height: none;
      object-fit: cover;
      object-position: center;
      flex: 1;
    }

    .hero .current-site figcaption {
      display: block;
      width: 100%;
      margin: 0 auto;
      padding: 12px 8px 0;
      text-align: center !important;
      align-self: center;
    }

    .eyebrow { 
      margin: 0 0 26px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; 
    }

    h1, h2, h3 { 
      margin-top: 0; line-height: .96; letter-spacing: -.045em; 
    }

    h1 { 
      max-width: 850px; margin-bottom: 38px; font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 760; }

    h2 { 
      margin-bottom: 32px; font-size: clamp(2rem, 3.5vw, 4rem); }

    h3 { 
      margin-bottom: 14px; font-size: clamp(1.45rem, 2.5vw, 2.25rem); }

    .intro { 
      max-width: 460px; 
      margin: 0; 
      font-size: clamp(1.05rem, 1.5vw, 1.35rem); 
      line-height: 1.45; 
    }

    .meta { 
      margin-top: 40px; 
      padding-top: 18px; 
      border-top: 1px solid var(--black); 
      display: grid; 
      grid-template-columns: repeat(3, 1fr); 
      gap: 20px; 
      font-size: .9rem; 
    }

    .meta strong { 
      display: block; 
      text-transform: uppercase; 
      font-size: .7rem; 
      letter-spacing: .09em; 
    }

    section { 
      padding: 110px 0; 
      border-bottom: 1px solid var(--black); 
    }

    .section-head { 
      display: grid; 
      grid-template-columns: 120px 1fr; 
      gap: 30px; 
      align-items: start; 
    }

    .number { 
      padding-top: 10px; 
      font-size: .8rem; 
      font-weight: 800; 
      letter-spacing: .1em; 
    }

    .lead { 
      max-width: 600px; 
      margin: -12px 0 56px 150px; 
        font-size: clamp(1.05rem, 1.5vw, 1.35rem); 
      line-height: 1.45; 
    }

    .grid-2 { 
      display: grid; 
      grid-template-columns: repeat(2, minmax(0, 1fr)); 
      gap: 26px; 
    }

    .grid-3 { 
      display: grid; 
      grid-template-columns: repeat(3, minmax(0, 1fr)); 
      gap: 18px; 
    }

    .card { 
      padding: 30px; 
      border: 1px solid var(--black); 
      background: var(--white); 
    }

    .card p:last-child { margin-bottom: 0; 
    }

    .label { 
      display: inline-block; 
      margin-bottom: 24px; 
      padding: 4px 9px; 
      background: var(--yellow); 
      font-size: .72rem; 
      font-weight: 800; 
      letter-spacing: .08em; 
      text-transform: uppercase; 
    }

    .analysis { 
      background: var(--grey); 
    }

    .current-site { 
      margin-top: 55px; 
      padding: 18px; 
      background: var(--yellow); 
      border: 1px solid var(--black); 
    }

    .current-site img { 
      width: 100%; 
      max-height: 720px; 
      object-fit: cover; 
     
      object-position: top; 
      border: 1px solid var(--black); 
    }

    figcaption { 
      padding-top: 12px; 
      font-size: .82rem; 
    }

    .charter { 
      background: var(--white); 
    }

    .moodboard { 
      margin: 56px 0; 
      display: grid; 
      grid-template-columns: 1.2fr .8fr; 
      gap: 24px; align-items: stretch; 
    }

    .image-frame { 
      overflow: hidden; 
      border: 1px solid var(--black); 
      background: var(--beige); 
    }

    .image-frame img { 
      width: 100%; 
      height: 100%; 
      object-fit: cover; 
    }
    .mood-note { 
      padding: clamp(28px, 5vw, 60px); 
      background: var(--black); 
      color: var(--white); 
    }

    .mood-note .label { 
      color: var(--black); 
    }

    .palette { 
      margin-top: 26px; 
      display: grid; 
      grid-template-columns: repeat(6, 1fr); 
      border: 1px solid var(--black); 
    }

    .swatch { 
      min-height: 155px; 
      padding: 14px; 
      display: flex; 
      flex-direction: column; 
      justify-content: flex-end; 
      border-right: 1px solid var(--black); 
      font-size: .72rem; 
      font-weight: 700; 
    }

    .swatch:last-child { 
      border-right: 0; 
    }

    .swatch.dark { 
      color: white; 
    }

    .type-sample { 
      margin-top: 26px; 
      padding: 44px; 
      border: 1px solid var(--black); 
      display: grid; 
      grid-template-columns: .85fr 1.15fr; 
      gap: 60px; 
    }

    .type-display { 
      font-size: clamp(3rem, 7vw, 6rem); 
      font-weight: 750; line-height: .9; letter-spacing: -.06em; }
    .type-body { max-width: 550px; }

    .wireframes { 
      background: var(--beige); 
    }

    .visual-link { 
      display: block; 
      color: inherit; 
      text-decoration: none; 
    }

    .visual { 
      padding: 14px; 
      border: 1px solid var(--black); 
      background: white; 
    }

    .visual img { 
      width: 100%; 
      height: 560px; 
      object-fit: contain; 
      background: #f7f7f7; 
     }

    .visual figcaption { 
      display: flex; 
      justify-content: space-between; 
      gap: 16px; 
    }

    .visual figcaption span:last-child { 
      font-weight: 700; 
    }

    .mockups { 
      background: var(--white); 
    }

    .screens { 
      display: grid; gap: 50px; 
    }

    .screen { 
      display: grid; 
      grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); 
      gap: 26px; 
      align-items: start; 
    }

    .screen:nth-child(even) { 
      grid-template-columns: minmax(260px, .55fr) minmax(0, 1.45fr); 
    }

    .screen:nth-child(even) .screen-copy { 
      order: -1; 
    }

    .screen-image { 
      padding: 14px; 
      border: 1px solid var(--black); 
      background: var(--grey); 
    }

    .screen-image img { 
      width: 100%; 
      max-height: 880px; 
      object-fit: contain; 
      object-position: top; 
    }

    .screen-copy { 
      position: sticky; 
      top: 100px; 
      padding: 30px; 
      border-top: 6px solid var(--yellow); 
      background: var(--grey); 
    }

    .screen-copy ul { 
      margin: 20px 0 0; 
      padding-left: 20px; 
    }

    footer { 
      padding: 56px 0; 
      background: var(--black); 
      color: var(--white); 
    }

    .footer-inner { 
      display: flex; 
      justify-content: space-between; 
      gap: 30px; 
      align-items: end; 
    }

    .footer-title { 
      margin: 0; 
      color: var(--yellow); 
      font-size: clamp(2rem, 5vw, 4.5rem); 
      font-weight: 800; 
      line-height: 1; 
      letter-spacing
      : -.05em; 
    }
    .top { 
      color: white; 
      text-underline-offset: 4px; 
    }

    .lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: .25s;
    z-index: 999;
    cursor: zoom-out;
}

.lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.lightbox img {
    max-width: 255vw;
    max-height: 545vh;
    object-fit: contain;
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
      z-index: 10001;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.75);
    color: #000;
    font-size: 2rem;
    cursor: pointer;
}

.lightbox-close:hover {
    background: rgba(255,255,255,.3);
}

    .to-top {
      position: fixed;
      right: clamp(16px, 2.5vw, 34px);
      bottom: clamp(16px, 2.5vw, 34px);
      z-index: 50;
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border: 2px solid var(--black);
      border-radius: 50%;
      color: var(--black);
      background: var(--yellow);
      box-shadow: 4px 4px 0 var(--black);
      font-size: 1.7rem;
      font-weight: 800;
      line-height: 1;
      text-decoration: none;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .to-top:hover,
    .to-top:focus-visible {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 var(--black);
      outline: none;
    }

    .to-top:active {
      transform: translate(2px, 2px);
      box-shadow: 1px 1px 0 var(--black);
    }

    @media (max-width: 800px) {
      body { 
        font-size: 16px; 
      }

      header { 
        position: static; 
      }

      .bs-header-inner {
        width: min(100% - 28px, 680px);
        min-height: 0;
        padding: 16px 0;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
      }

      .bs-header-actions {
        justify-content: flex-start;
        width: min(100% - 28px, 680px);
        padding-bottom: 16px;
        flex-wrap: wrap;
      }

      .bs-brand {
        width: 100%;
        gap: 12px;
      }

      .bs-brand img {
        width: 128px;
        height: 56px;
        flex: 0 0 auto;
      }

      .bs-brand strong {
        font-size: clamp(1.05rem, 4vw, 1.35rem);
        line-height: 1.15;
      }

      .bs-brand small {
        font-size: .78rem;
        line-height: 1.3;
      }

      .bs-nav {
        width: 100%;
        min-height: 0;
        padding: 10px 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px 16px;
        border-top: 1px solid rgba(9, 9, 9, .2);
      }

      .bs-nav a {
        font-size: .78rem;
        line-height: 1.25;
      }

      nav { 
        align-items: flex-start; 
        padding: 18px 0; 
      }

      .menu { 
        justify-content: flex-end; 
        gap: 9px 15px; 
      }

      .hero { 
        min-height: 0;
      }

      .hero-inner {
        width: min(100% - 28px, var(--max));
        padding: 46px 0 34px;
      }

      h1 {
        margin-bottom: 22px;
        font-size: clamp(2.8rem, 11vw, 5rem);
      }

      .eyebrow {
        margin-bottom: 18px;
      }

      .intro {
        max-width: 38rem;
      }

      section { padding: 75px 0; 
      }

      .section-head { grid-template-columns: 55px 1fr; gap: 10px; 
      }

      .lead { 
        margin: 0 0 40px 65px; 
      }

      .grid-2, .grid-3, 
      .moodboard, 
      .type-sample, 
      .screen, 
      .screen:nth-child(even) { 
        grid-template-columns: 1fr; 
      }

      .hero .grid-2 {
        grid-template-columns: 1fr;
        gap: 34px;
      }

      .hero .grid-2 > div:first-child {
        min-height: 0;
      }

      .hero .current-site {
        padding: 9px;
      }

      .hero .current-site img {
        height: clamp(300px, 62vw, 500px);
      }

      .palette { 
        grid-template-columns: repeat(2, 1fr); 
      }

      .swatch { 
        min-height: 115px; 
        border-bottom: 1px solid var(--black); 
      }

      .visual img { 
        height: auto; 
        max-height: 600px; 
      }

      .screen-copy, .screen:nth-child(even) .screen-copy { position: static; 
        order: initial; 
      }

      .meta { grid-template-columns: 1fr; }
      .footer-inner { 
        align-items: flex-start; 
        flex-direction: column; 
      }

    }

    @media (max-width: 520px) {
      .bs-header-inner {
        width: calc(100% - 22px);
        padding: 12px 0;
      }

      .bs-header-actions {
        width: calc(100% - 22px);
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        padding-bottom: 14px;
      }

      .bs-return-button {
        width: 100%;
        min-height: 40px;
      }

      .bs-brand img {
        width: 96px;
        height: 46px;
      }

      .bs-brand small {
        display: none;
      }

      .bs-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 12px;
      }

      .bs-nav a {
        padding: 4px 0;
      }

      .hero-inner {
        width: calc(100% - 22px);
        padding: 34px 0 26px;
      }

      h1 {
        font-size: clamp(2.6rem, 14vw, 4rem);
      }

      .hero .grid-2 {
        gap: 26px;
      }

      .hero .current-site img {
        height: clamp(260px, 82vw, 410px);
      }

      .hero .current-site figcaption {
        padding: 9px 4px 0;
        font-size: .72rem;
        line-height: 1.35;
      }
    }