/* =========================================================================
   /direction-artistique — styles propres à la page.
   Aucun coin arrondi (sauf l'écran du téléphone, objet réel), aucune ombre, citron rare.
   Les incrustations ALBA (marque fictive) sont des SIMULATIONS posées en HTML/CSS sur les
   surfaces vierges des images du pack 2 : l'image brute n'est jamais modifiée.
   ========================================================================= */

.da-h2 { margin-top: 16px; max-width: 13em; }
.da-text { margin-top: 22px; max-width: 34em; font-size: var(--fs-body); line-height: 1.5; color: var(--graphite); }

/* Scène : boîte au ratio exact de l'image (--ar), qui « couvre » le cadre comme object-fit: cover.
   Les incrustations sont placées en % de l'image, donc restent calées quel que soit le recadrage.
   --fx / --fy : point de cadrage (0 = bord gauche/haut, 1 = bord droit/bas). */
.da-stage {
  --w: max(100cqw, calc(100cqh * var(--ar)));
  --h: max(100cqh, calc(100cqw / var(--ar)));
  position: absolute; width: var(--w); height: var(--h);
  left: calc((100cqw - var(--w)) * var(--fx, 0.5));
  top: calc((100cqh - var(--h)) * var(--fy, 0.5));
}
.da-stage > picture, .da-stage > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.da-stage > picture > img { object-fit: cover; }

/* Objets de marque (image 1280 × 1600) : face avant du sac et carte tenue en main */
.da-objets__sac {
  position: absolute; left: 37.5%; top: 19.4%; width: 30.9%; height: 36.9%;
  container-type: size; display: flex; justify-content: center;
}
.da-objets__sac > span {
  margin-top: 30cqh; font-family: var(--font-sans); font-weight: 800; font-size: 30cqw;
  line-height: 0.8; letter-spacing: -0.06em; color: #E9E6DC; opacity: 0.92;
}
.da-objets__carte {
  position: absolute; left: 61.8%; top: 55.7%; width: 17.2%; height: 5.4%;
  transform: rotate(-18deg); transform-origin: 50% 50%;
  container-type: size; display: flex; align-items: center; justify-content: center;
}
.da-objets__carte > span {
  font-family: var(--font-sans); font-weight: 800; font-size: 34cqh; line-height: 1;
  letter-spacing: -0.05em; color: #171414; mix-blend-mode: multiply;
}

/* Deux tablettes (image 1280 × 850) : deux planches de direction, posées en multiply */
.da-planche {
  position: absolute; container-type: size; mix-blend-mode: multiply;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 14cqw; transform: rotate(-4deg); color: #171414;
}
.da-planche--a { left: 10.6%; top: 37.2%; width: 37%; height: 34.6%; }
.da-planche--b { left: 50.4%; top: 31.5%; width: 34.5%; height: 33.4%; }
.da-planche__k {
  font-family: var(--font-mono); font-weight: 500; font-size: 5.2cqw; letter-spacing: 0.08em;
  text-transform: uppercase; color: #5F5D58;
}
.da-planche__word { margin-top: 3cqh; font-family: var(--font-sans); font-weight: 800; line-height: 0.8; white-space: nowrap; }
.da-planche--a .da-planche__word { font-size: 30cqw; letter-spacing: -0.07em; }
.da-planche--b .da-planche__word { font-family: var(--font-mono); font-weight: 500; font-size: 15cqw; letter-spacing: 0.32em; }
.da-planche__sw { display: flex; gap: 2cqw; margin-top: 8cqh; }
.da-planche__sw > i { display: block; width: 12cqw; height: 9cqw; background: #171414; }
.da-planche__sw > i:nth-child(2) { background: #A8A79F; }
.da-planche__sw > i:nth-child(3) { background: #D9D6CC; }
.da-planche__bar { display: block; width: 72cqw; height: 6cqh; margin-top: 9cqh; background: #171414; }

/* Téléphone (image 1280 × 850) : capture de la boutique ALBA dans l'écran */
.da-ecran {
  position: absolute; left: 65.08%; top: 24.71%; width: 15.31%; height: 49.65%;
  overflow: hidden; border-radius: 7% / 3.3%;
}
.da-ecran > picture, .da-ecran img { display: block; width: 100%; height: 100%; }
.da-ecran img { object-fit: cover; object-position: 50% 0; }

/* Affiche (image 1280 × 1600) : mêmes mesures que /publicite (coins mesurés sur l'affiche vierge) */
.da-affiche {
  position: absolute; left: 16.64%; top: 24.92%; width: 34.49%; height: 39.19%;
  container-type: size; background: #0D0D0D; color: #F6F2E7; mix-blend-mode: multiply;
  clip-path: polygon(0 0, 98.75% 0.89%, 100% 98.02%, 0.57% 100%); overflow: hidden;
}
.da-affiche__top {
  position: absolute; left: 7cqw; right: 7cqw; top: 6cqw; display: flex; justify-content: space-between; gap: 4cqw;
  font-family: var(--font-mono); font-weight: 500; font-size: 4.6cqw; line-height: 1.2;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.da-affiche__word {
  position: absolute; left: 6cqw; bottom: 25cqh; font-family: var(--font-sans); font-weight: 800;
  font-size: 45cqw; line-height: 0.72; letter-spacing: -0.07em; white-space: nowrap;
}
.da-affiche__band {
  --c: 3cqw; position: absolute; left: 7cqw; right: 7cqw; bottom: 7cqw; padding: 4.2cqw 5cqw 4cqw;
  background: #CBFA5E; color: #0D0D0D; font-family: var(--font-mono); font-weight: 500; font-size: 4.4cqw;
  line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(calc(var(--c) * 1.5) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c) * 1.5) 100%, 0 100%, 0 var(--c));
}

/* Ce qu'on livre : liste en 2 colonnes, illustration à droite (≤ 40 %) */
.da-features { margin-top: 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.da-livre__illus { display: flex; align-items: center; justify-content: flex-end; }
@media (max-width: 899px) {
  .da-livre__illus { justify-content: flex-start; margin-top: 32px; }
  .da-livre__illus .illus { max-width: 300px; }
}
@media (max-width: 600px) { .da-features { grid-template-columns: minmax(0, 1fr); } }

/* Deux directions */
.da-split { align-items: center; row-gap: 40px; }

/* Concept ALBA : galerie, puis lien */
.da-alba__more { margin-top: 32px; }

/* Travail maison : grande page à gauche, deux pages empilées à droite (toutes en 16:9) */
.da-bb { display: grid; grid-template-columns: 2fr 1fr; gap: var(--g); }
.da-bb__main { grid-row: span 2; }
@media (max-width: 899px) {
  .da-bb { grid-template-columns: 1fr 1fr; }
  .da-bb__main { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .da-bb { grid-template-columns: minmax(0, 1fr); }
}

/* Questions */
.da-faq .grid-12 { align-items: start; }
@media (max-width: 899px) { .da-faq .faq { margin-top: 28px; } }