/* K·I·L·O, l'arrivée : aplat vert à gauche, photo à droite, le mât sur la couture, les lettres en face. */
.arrivee {
  position: relative;
  background: var(--vert);
  padding-top: var(--entete-h);
  --couture: 56px;
  --fut: 6px;
  --pav-w: 72px;
  --ecart: 16px;
}
.arrivee__photo {
  margin-left: var(--couture);
  height: 46svh;
  min-height: 300px;
}
.arrivee__photo img, .arrivee__photo picture { width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
.arrivee .mat {
  top: calc(var(--entete-h) + 10px);
  left: calc(var(--couture) - var(--fut) / 2);
  height: calc(max(46svh, 300px) - 10px);
  --tete: 22px;
}
.mat__drisse { display: grid; gap: var(--ecart); }
.mat__lettre {
  position: absolute;
  top: 50%;
  right: calc(100% + var(--fut) + 15px);
  transform: translateY(-50%);
  display: grid;
  justify-items: end;
  line-height: 1;
}
.mat__lettre b { font: 900 36px/.9 var(--titre); }
.mat__lettre small { display: none; font: 600 14px/1.2 var(--texte); color: var(--sur-vert); margin-top: 4px; }
.arrivee .mat__lettre { right: calc(100% + var(--fut) + 7px); }
.arrivee__plaque { display: none; }

.arrivee__texte {
  display: grid;
  justify-items: start;
  gap: 18px;
  padding: 28px max(var(--marge), env(safe-area-inset-left)) calc(var(--bb-h) + 40px);
}
.arrivee__titre { font-size: min(12vw, 72px); }
.arrivee__chapo { font-size: 17px; max-width: 34ch; }
.arrivee__prix { display: grid; gap: 14px; width: 100%; }
.arrivee__prix > div { display: grid; gap: 2px; }
.arrivee__prix dt { font-weight: 600; font-size: 16px; color: var(--sur-vert); }
.arrivee__prix dd { font-weight: 600; font-size: 16px; }
.arrivee__prix dd b { font: 900 40px/1 var(--titre); letter-spacing: -.01em; margin-left: 4px; }
.arrivee__note { font-size: 15px; color: var(--sur-vert); margin-top: -6px; }
.arrivee__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

@media (min-width: 600px) {
  .arrivee { --couture: 88px; --pav-w: 96px; }
  .arrivee .mat__lettre small { display: block; }
  .arrivee .mat__lettre b { font-size: 40px; }
}

@media (min-width: 900px) {
  .arrivee {
    --couture: 48%;
    --corridor: max(52px, 4.6vw);
    --fut: clamp(8px, .62vw, 12px);
    --pav-w: 12vw;
    --ecart: clamp(16px, 1.56vw, 30px);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: calc(var(--entete-h) + 32px);
  }
  .arrivee__photo {
    position: absolute;
    top: var(--entete-h);
    right: 0;
    bottom: 0;
    left: var(--couture);
    height: auto;
    margin: 0;
  }
  .arrivee__photo img, .arrivee__photo picture { object-position: 50% 50%; }
  .arrivee .mat {
    top: calc(var(--entete-h) + 6svh - 22px);
    bottom: 0;
    height: auto;
    left: calc(var(--couture) - var(--fut) / 2);
  }
  .arrivee .mat__lettre { right: calc(100% + var(--fut) + 15px); }
  .arrivee .mat__lettre b { font-size: max(36px, 3.3vw); }
  .arrivee__plaque {
    display: block;
    position: absolute;
    z-index: 2;
    left: calc(var(--couture) - var(--fut) / 2);
    top: calc(var(--entete-h) + 6svh + 4 * var(--pav-w) * 2 / 3 + 3 * var(--ecart) + 40px);
    width: min(360px, 26vw);
    padding: 16px 20px;
    font-size: 16px;
    line-height: 1.4;
    box-shadow: 0 10px 24px -14px rgb(12 27 34 / .45);
  }
  .arrivee__texte {
    width: calc(var(--couture) - var(--corridor) - 24px);
    padding: 0 0 64px max(var(--marge), env(safe-area-inset-left));
    gap: 20px;
  }
  .arrivee__titre { font-size: clamp(44px, 4.2vw, 84px); }
  .arrivee__chapo { font-size: clamp(17px, 1.05vw, 20px); }
  .arrivee__prix dt { font-size: 17px; }
  .arrivee__prix dd b { font-size: clamp(36px, 2.3vw, 44px); }
}
@media (min-width: 1100px) {
  .arrivee { --couture: 44%; --pav-w: 11.5vw; }
}