/* ── Hero (bandeau gris clair) ── */
    .ap-hero {
      background: #f3f3f3;
      color: #1a1a1a;
      padding: 7rem 1.5rem 3rem;
      text-align: center;
    }
    .ap-hero__title {
      font-family: 'SKODA Next', sans-serif;
      font-size: clamp(2rem, 5vw, 2.8rem);
      font-weight: 800;
      margin: 0;
      letter-spacing: normal;
    }

    /* ── Section generics ── */
    .ap-section {
      padding: 5rem 1.5rem;
    }
    .ap-section--gray {
      background: var(--off-white, #f5f5f5);
    }
    .ap-section__title {
      font-family: 'SKODA Next', sans-serif;
      font-size: clamp(1.5rem, 3.5vw, 2.25rem);
      font-weight: 700;
      color: var(--dark, #1a1a1a);
      margin: 0 0 1rem;
      letter-spacing: normal;
    }
    .ap-section__title--center {
      text-align: center;
    }

    /* ── Notre histoire (2-col) ── */
    .ap-history {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      max-width: 1100px;
      margin: 0 auto;
      align-items: center;
    }
    .ap-history__text p {
      font-family: 'SKODA Next', sans-serif;
      font-size: 1rem;
      line-height: 1.8;
      color: var(--text, #3a3a3a);
      margin: 0 0 1.25rem;
    }
    .ap-history__img {
      width: 100%;
      border-radius: 0;
      display: block;
    }

    /* ── Chronologie slider ── */
    .chrono { position: relative; max-width: 1300px; margin: 2.5rem auto 0; overflow: hidden; padding: 20px 0; }
    .chrono__track { display: flex; transition: transform .45s ease; }
    .chrono__slide {
      min-width: 100%; box-sizing: border-box;
      display: grid; grid-template-columns: 1fr 1fr; align-items: center;
      background: #fff; box-shadow: 0 0 5px 0 #0000000d,0 5px 20px 0 #0000000d;
    }
    .chrono__img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
    .chrono__body { padding: 3rem 3.5rem; }
    .chrono__body h3 {
      font-family: 'SKODA Next', sans-serif; font-size: clamp(1.4rem,2.5vw,1.8rem);
      font-weight: 800; color: #1a1a1a; margin: 0 0 1.25rem;
    }
    .chrono__body p {
      font-family: 'SKODA Next', sans-serif; font-size: 1rem; line-height: 1.8;
      color: #3a3a3a; margin: 0;
    }
    .chrono__btn {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 48px; height: 48px; border-radius: 50%; border: 2px solid #ccc;
      background: #fff; cursor: pointer; display: flex; align-items: center;
      justify-content: center; z-index: 2; transition: border-color .2s;
    }
    .chrono__btn:hover { border-color: #1a1a1a; }
    .chrono__btn svg { width: 20px; height: 20px; stroke: #1a1a1a; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .chrono__btn--prev { left: 16px; }
    .chrono__btn--next { right: 16px; }
    .chrono__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
    .chrono__dot {
      width: 10px; height: 10px; border-radius: 50%; background: #ccc;
      border: none; cursor: pointer; transition: background .2s;
    }
    .chrono__dot.is-active { background: #1a1a1a; }
    .chrono__bar-wrap { max-width: 500px; margin: 1rem auto 0; height: 4px; background: #e0e0e0; border-radius: 2px; overflow: hidden; }
    .chrono__bar { height: 100%; background: #1a1a1a; border-radius: 2px; transition: width .4s ease; }
    @media (max-width: 768px) {
      .chrono__slide { grid-template-columns: 1fr; }
      .chrono__body { padding: 1.5rem; }
      .chrono__btn { width: 36px; height: 36px; }
      .chrono__btn--prev { left: 8px; }
      .chrono__btn--next { right: 8px; }
    }

    /* ── Škoda à Mayotte ── */
    .ap-local {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
    }
    .ap-local p {
      font-family: 'SKODA Next', sans-serif;
      font-size: 1.05rem;
      line-height: 1.8;
      color: var(--text, #3a3a3a);
      margin: 0 0 2rem;
    }
    .ap-cta {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: linear-gradient(135deg, #0e3a2f, #1a5c42);
      color: #fff;
      font-family: 'SKODA Next', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      padding: .9rem 2.25rem;
      border-radius: 0;
      text-decoration: none;
      transition: opacity .25s ease, transform .25s ease;
    }
    .ap-cta:hover {
      opacity: .9;
      transform: translateY(-2px);
    }
    .ap-cta svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ── Thematic cards (3-col) ── */
    .ap-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      max-width: 1100px;
      margin: 2.5rem auto 0;
    }
    .ap-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      background: #fff;
      border-radius: 0;
      padding: 2.25rem 2rem;
      border: 1px solid rgba(0,0,0,.07);
      text-decoration: none;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .ap-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0,0,0,.1);
    }
    .ap-card__icon {
      width: 44px;
      height: 44px;
      border-radius: 0;
      background: var(--off-white, #f5f5f5);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
    }
    .ap-card__icon svg {
      width: 22px;
      height: 22px;
      stroke: #1a5c42;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .ap-card__title {
      font-family: 'SKODA Next', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--dark, #1a1a1a);
      margin: 0 0 .5rem;
    }
    .ap-card__arrow {
      margin-top: auto;
      padding-top: 1rem;
      color: #1a5c42;
      font-family: 'SKODA Next', sans-serif;
      font-weight: 600;
      font-size: .9rem;
      display: flex;
      align-items: center;
      gap: .35rem;
    }
    .ap-card__arrow svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .ap-history {
        grid-template-columns: 1fr;
      }
      .ap-history__img {
        order: -1;
      }
      .ap-identity-grid,
      .ap-cards-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
      }
    }
    @media (max-width: 600px) {
      .ap-hero {
        padding: 6rem 1.25rem 3.5rem;
      }
      .ap-section {
        padding: 3.5rem 1.25rem;
      }
    }