/* =========================================================================
   /concepts — styles propres à la page (mise en page + incrustations « simulation »).
   Aucun coin arrondi (sauf l'écran d'un téléphone réel), aucune ombre, mouvement horizontal hérité.
   ========================================================================= */

/* Héros sans image : bande motif 64 px SOUS le chapô, jamais sous le texte */
.cpt-hero .hero__title { max-width: 12em; }
.cpt-hero__band { padding-bottom: clamp(8px, 1vw, 16px); }

/* Têtes de bloc */
.cpt-head > .label { display: block; }
.cpt-head > .h2 { margin-top: 16px; max-width: 13em; }
.cpt-text { margin-top: 22px; max-width: 34em; font-size: var(--fs-body); line-height: 1.5; color: var(--graphite); }
.on-encre .cpt-text { color: var(--cendre); }
.cpt-note { margin-top: 20px; }
.cpt-link { margin-top: 24px; }
.cpt-split { align-items: center; row-gap: 40px; }

/* Brief ALBA : liste à filets (dl) */
.cpt-brief { margin-top: 32px; }
.cpt-brief > div { padding: 18px 0; border-bottom: 1px solid var(--trait); }
.cpt-brief dd { font-size: var(--fs-body); line-height: 1.5; color: var(--graphite); max-width: 34em; }

/* ALBA : page entière à faire défiler (défilement natif, vertical, dans le cadre) + téléphone */
.cpt-alba__media { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--g); align-items: end; }
.cpt-scroll .cpt-scroll__view { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cpt-scroll .cpt-scroll__view > picture,
.cpt-scroll .cpt-scroll__view > img { position: static; display: block; height: auto; }
.cpt-scroll .cpt-scroll__view img { height: auto; object-fit: initial; }
.cpt-scroll .cpt-scroll__view:focus-visible { outline: 3px solid var(--encre); outline-offset: -3px; }
.cpt-phone { align-self: center; }
@media (max-width: 1100px) {
  .cpt-alba__media { grid-template-columns: minmax(0, 1fr); }
  .cpt-scroll { max-width: 320px; }
}

/* Écrans incrustés (SIMULATION) : positions mesurées sur les zones blanches des images d'origine.
   Les cadres gardent le ratio exact de l'image, donc les pourcentages suivent à toutes les tailles. */
.cpt-screen { position: absolute; z-index: 1; overflow: hidden; background: var(--blanc); }
.cpt-screen > picture, .cpt-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* ss2-concept-telephone-main : écran x 65,10–80,42 % · y 24,63–74,35 % (coins arrondis du téléphone réel) */
.cpt-screen--phone { left: 65.4%; top: 25%; width: 14.75%; height: 49%; border-radius: 6% / 3%; }
/* ss2-sites-avant-apres : écrans x 26,35–42,03 % et 54,11–69,74 % · y 36,1–69,5 % */
.cpt-screen--avant { left: 26.6%; top: 36.4%; width: 15.2%; height: 32.8%; border-radius: 9% / 4.5%; }
.cpt-screen--apres { left: 54.35%; top: 36.4%; width: 15.15%; height: 32.75%; border-radius: 9% / 4.5%; }
/* ss2-concept-laptop-banc-nuit : écran x 35,05–64,90 % · y 34,35–62,75 % */
.cpt-screen--laptop { left: 35.2%; top: 34.5%; width: 29.55%; height: 28.1%; }
.cpt-screen--laptop img { object-position: 50% 50%; }

/* Avant / après : scène + paire de captures */
.cpt-aa__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--g); align-items: center; }
.cpt-aa__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); max-width: 560px; justify-self: end; width: 100%; }
@media (max-width: 900px) {
  .cpt-aa__grid { grid-template-columns: minmax(0, 1fr); }
  .cpt-aa__pair { justify-self: start; }
}

/* Identité : deux cadres */
.cpt-id__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
@media (max-width: 600px) { .cpt-id__grid { grid-template-columns: minmax(0, 1fr); } }

/* Campagne : affiche ALBA posée sur l'affiche vierge (mêmes mesures que /publicite, image 4:5 non recadrée) */
.cpt-camp__media .frame { max-width: 560px; }
@media (max-width: 899px) { .cpt-camp__media { order: 2; } }
.cpt-affiche__poster {
  position: absolute; z-index: 1;
  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;
}
.cpt-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;
}
.cpt-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;
}
.cpt-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));
}

/* Travail maison · ce site : ordinateur + vidéo */
.cpt-site__media { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: var(--g); align-items: end; }
.cpt-video { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
@media (max-width: 600px) {
  .cpt-site__media { grid-template-columns: minmax(0, 1fr); }
  .cpt-video { flex-direction: row; align-items: flex-end; }
  .cpt-video .frame { width: 160px; }
}

/* Brand book : grande page + gabarits */
.cpt-bb__wide { margin-top: var(--g); max-width: 760px; }
.cpt-posts__label { display: block; margin-top: clamp(40px, 2rem + 2vw, 64px); }
.cpt-posts { list-style: none; margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
.cpt-posts__note { margin-top: 18px; color: var(--cendre); }
@media (max-width: 900px) { .cpt-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Note : la coupe précède des sections sur encre ; la note revient sur papier */
.cpt-note-sec .note-line { max-width: 60em; }

/* Brand kit ALBA (22/10) : pages 16:9 en grille, sans recadrage */
.cpt-bb__wide .frame { max-width: none; width: 100%; }
.cpt-kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.cpt-kit .frame { --ratio: 16 / 9; }
.cpt-kit .frame .frame__cut { aspect-ratio: 16 / 9; }
@media (max-width: 900px) { .cpt-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cpt-kit { grid-template-columns: 1fr; } }
.cpt-bb .cpt-bb__wide { max-width: none; }