/* Échelle de la vitrine : hero plus affirmé, études de cas, signature,
   et mise à l'échelle des écrans très larges (moniteurs ultra-larges à 100 %).
   Chargé en dernier sur les pages vitrine (scripts/build-editorial.mjs). */

/* ---------- Hero ----------
   Le collage commence à 44 % de la largeur. Le titre et le paragraphe sont
   dimensionnés en vw pour toujours s'arrêter avant lui, à toutes les tailles.
   Entre 768 et 1023 px, il n'y a pas la place côte à côte : on empile,
   comme sur mobile. */
@media (min-width: 1024px) {
  .agency-scale .creative-title { font-size: min(5.6vw, 104px); }
  .agency-scale .creative-hero .creative-copy > p:not(.font-mono) { max-width: min(620px, 36vw); }
}
@media (min-width: 1600px) {
  .agency-scale .creative-title { font-size: min(5.6vw, 136px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .agency-scale .creative-hero { min-height: 0; height: auto; max-height: none; display: flex; flex-direction: column; padding-bottom: 16px; }
  .agency-scale .creative-copy { position: relative; order: 0; width: 100%; top: 0; transform: none; padding: 64px 48px 8px; }
  .agency-scale .creative-title { font-size: 8.6vw; }
  .agency-scale .creative-hero .creative-copy > p:not(.font-mono) { max-width: 560px; }
  .agency-scale .creative-scene { position: relative; order: 1; inset: auto; height: auto; aspect-ratio: 1.85; margin-top: 1.5rem; overflow: hidden; }
  .agency-scale .creative-scene .hero-collective { width: 85%; height: 100%; right: 0; }
  .agency-scale .creative-paper-lavender { width: 45%; height: 70%; right: 0; top: 0; }
  .agency-scale .creative-paper-sage { width: 43%; height: 57%; right: 28%; bottom: 0; }
  .agency-scale .creative-paper-peach { width: 17%; height: 27%; bottom: 10%; }
  .agency-scale .creative-network { width: 95%; height: 100%; }
  .agency-scale .creative-caption { position: relative; order: 2; inset: auto; margin: 8px 48px 0; }
}
@media (min-width: 768px) {
  .agency-scale .creative-copy .hero-contact { min-height: 54px; padding: 14px 28px; font-size: 17px; border-radius: 999px; }
  .agency-scale .creative-copy .hero-contact + a { font-size: 17px; }
}

/* ---------- Études de cas : une couleur dominante par étude ---------- */
/* Gaspésie = lavande, DistribuComm = prune, Cantons-de-l'Est = pêche. */
.agency-scale .work-card:nth-child(3) .work-material > img:first-child {
  inset: auto auto 0 0;
  width: 165%;
  height: 165%;
  object-position: 0% 100%;
  transform-origin: 0% 100%;
}

/* ---------- Signature du pied de page, d'un bord à l'autre ---------- */
.agency-scale .site-footer { container-type: inline-size; }
@media (min-width: 768px) {
  .agency-scale .footer-signature {
    max-width: none;
    font-size: 9.4cqw;
    line-height: 1;
    letter-spacing: -.035em;
    white-space: nowrap;
  }
  /* La phrase française est plus longue : un peu plus petite pour tenir d'un bord à l'autre. */
  html[lang="fr"] .agency-scale .footer-signature { font-size: 8.4cqw; }
}

/* ---------- Écrans très larges ----------
   La mise en page est dessinée pour ~1700 px. Au-delà, on agrandit tout
   proportionnellement : zoom pour les blocs sans unités d'écran, calc() pour
   le hero et le manifeste (le zoom multiplierait leurs hauteurs en svh). */
@media (min-width: 2000px) { .agency-scale { --uw: 1.1; } }
@media (min-width: 2400px) { .agency-scale { --uw: 1.2; } }
@media (min-width: 2800px) { .agency-scale { --uw: 1.3; } }
@media (min-width: 3200px) { .agency-scale { --uw: 1.35; } }

@media (min-width: 2000px) {
  .agency-scale > header,
  .agency-scale .client-strip,
  .agency-scale #expertises,
  .agency-scale #realisations,
  .agency-scale .closing-band > div,
  .agency-scale .site-footer { zoom: var(--uw); }

  .agency-scale .creative-hero { max-height: calc(1250px * var(--uw)); }
  .agency-scale .creative-title { font-size: min(5.6vw, calc(136px * var(--uw))); }
  .agency-scale .creative-hero .creative-copy > p:not(.font-mono) { max-width: min(calc(620px * var(--uw)), 36vw); font-size: calc(24px * var(--uw)); }
  .agency-scale .creative-copy > div { margin-top: calc(2rem * var(--uw)); gap: calc(1.5rem * var(--uw)); }
  .agency-scale .creative-copy .hero-contact { min-height: calc(54px * var(--uw)); padding: calc(14px * var(--uw)) calc(28px * var(--uw)); font-size: calc(17px * var(--uw)); }
  .agency-scale .creative-copy .hero-contact + a { font-size: calc(17px * var(--uw)); }
  .agency-scale .creative-caption { font-size: calc(10px * var(--uw)); }

  .agency-scale .story { --pin-top: calc(112px * var(--uw)); max-width: calc(1720px * var(--uw)); }
  .agency-scale .story-intro { max-width: calc(850px * var(--uw)); }
  .agency-scale .story-intro h2 { font-size: calc(84px * var(--uw)); }
  .agency-scale .network-key span { font-size: calc(16px * var(--uw)); }
  .agency-scale .act h3 { font-size: calc(58px * var(--uw)); }
  .agency-scale section.story .act p:not(.font-mono) { font-size: calc(20px * var(--uw)); }
  .agency-scale .act-nav a { font-size: calc(12px * var(--uw)); min-height: calc(40px * var(--uw)); }
  .agency-scale .act { min-height: clamp(310px, 57svh, calc(620px * var(--uw))); }

  .agency-scale .paper-join { --rim-tile: calc(2400px * var(--uw)); }
}

/* ---------- Expertises : icônes en papier découpé ---------- */
/* Taille alignée sur les anciennes icônes ; léger soulèvement au survol. */
.agency-scale .expertise-paper { object-fit: contain; transition: transform .35s cubic-bezier(.3,.7,.3,1); }
#expertises li > a.group > .expertise-paper { width: 60px; height: 60px; }
.agency-scale #expertises li > a.group { grid-template-columns: 60px minmax(0, 1fr) 20px; }
@media (min-width: 768px) {
  .agency-scale #expertises li > a.group { grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.2fr) 24px; }
  .agency-scale #expertises li > a.group > .expertise-paper { width: 88px; height: 88px; }
}
@media (hover: hover) {
  .agency-scale a.group:hover .expertise-paper { transform: translateY(-3px) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .agency-scale a.group:hover .expertise-paper { transform: none; }
}

/* ---------- Hero : le collage suit la souris (public/assets/collage.js) ----------
   --mx / --my vont de -1 à 1. Plus la couche est « proche », plus elle bouge.
   La propriété translate se compose avec les rotations et animations existantes. */
.agency-scale .creative-hero { --mx: 0; --my: 0; }
.agency-scale .creative-hero :is(.creative-paper, .creative-network, .hero-collective) {
  transition: translate .9s cubic-bezier(.2,.7,.2,1);
}
.agency-scale .creative-hero .hero-collective { translate: calc(var(--mx) * -2px) calc(var(--my) * -2px); }
.agency-scale .creative-hero .creative-paper-lavender { translate: calc(var(--mx) * 3px) calc(var(--my) * 3px); }
.agency-scale .creative-hero .creative-network { translate: calc(var(--mx) * 4px) calc(var(--my) * 4px); }
.agency-scale .creative-hero .creative-paper-sage { translate: calc(var(--mx) * 6px) calc(var(--my) * 5px); }
.agency-scale .creative-hero .creative-paper-peach { translate: calc(var(--mx) * 8px) calc(var(--my) * 7px); }
@media (prefers-reduced-motion: reduce), (max-width: 767px) {
  .agency-scale .creative-hero :is(.creative-paper, .creative-network, .hero-collective) { translate: none; transition: none; }
}

/* ---------- Logo (public/assets/logo) ---------- */
.agency-scale > header .site-logo { width: auto; height: 44px; }
@media (min-width: 1280px) { .agency-scale > header .site-logo { height: 54px; } }
@media (max-width: 760px) { .agency-scale > header .site-logo { width: auto; height: 36px; } }
.agency-scale .site-footer .footer-logo { width: 240px; }
@media (min-width: 768px) { .agency-scale .site-footer .footer-logo { width: 300px; } }

/* Contraste : bouton de langue inactif lisible (WCAG AA) */
[role="group"] button[aria-pressed="false"].text-muted-foreground { color: #6E626B; }