/* ══════════════════════════════════════════════════════════════
   AZUROTEC — vitrine
   Chargée en dernier : dernier mot sur les cartes et les visuels.

   Trois défauts constatés sur le site en ligne, avec ses vraies images :
     1. Le titre de la section arche était recouvert par la photo, qui
        remonte de -12vw (style.css:508) — texte illisible.
     2. Les visuels de méthode étaient plafonnés à 260px de large par un
        !important de carousel.css : des vignettes perdues dans la carte.
     3. Les cartes de rendus étaient trop petites pour un studio qui vend
        précisément de l'image.

   Règle héritée, à ne pas casser : ne jamais poser opacity ni transform
   sur un élément animé par app.js hors :hover. app.js anime .process-card,
   .service-card, .gallery-item, .pricing-card. Les transformations de
   parallaxe portent donc sur les IMAGES à l'intérieur, jamais sur la carte.
   ══════════════════════════════════════════════════════════════ */

:root {
  --glass: color-mix(in srgb, var(--color-white) 62%, transparent);
  --glass-dark: color-mix(in srgb, var(--color-paper) 9%, transparent);
  --glass-edge: color-mix(in srgb, var(--color-ink) 12%, transparent);
  --glass-edge-dark: color-mix(in srgb, var(--color-paper) 22%, transparent);
  --card-visual: clamp(240px, 25vw, 400px);
}

/* ═══ 1. Section arche — le titre repasse devant ═══════════ */

/* La photo remontait sur le titre. On lui rend l'espace : plus de
   respiration en haut de l'arche, et un chevauchement réduit. */
.era-arch {
  padding-top: clamp(4.5rem, 11vw, 10rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
  min-height: 0;
}
.era-arch h2 {
  position: relative;
  z-index: 2;
  max-width: 16ch;
  margin-inline: auto;
}
.era-arch-image {
  position: relative;
  z-index: 1;
  margin-top: clamp(-3rem, -3vw, -1.5rem);
}
.era-arch-image img { height: clamp(280px, 40vw, 560px); }

@media (max-width: 700px) {
  .era-arch { min-height: 0; padding-top: 4rem; }
  .era-arch-image { margin-top: -1.5rem; }
  .era-arch-image img { height: 280px; }
}

/* ═══ 2. Grandes images, sans cadre ════════════════════════ */

/* Le conteneur n'est plus une boîte : il devient le format de l'image.
   Avant, un cadre haut et étroit recevait un dessin en paysage en
   object-fit: contain — l'image se réduisait à la largeur et laissait un
   grand vide coloré au-dessus et en dessous. On aligne donc le RATIO du
   conteneur sur celui de l'image, et on retire fond, bordure et marge
   intérieure : il ne reste que l'image. */
.whiteboard-visual,
.process-visual,
.service-asset,
.story-visual {
  /* La carte est un conteneur flex centré : sans align-self, l'image se
     rétrécit au lieu de s'étirer sur toute la largeur. */
  width: 100% !important;
  align-self: stretch !important;
  flex: none !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 10 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  /* L'image déborde jusqu'aux bords de la carte : le verre encadre le
     texte, pas la photo. */
  margin: calc(-1 * clamp(1rem, 1.6vw, 1.5rem)) calc(-1 * clamp(1rem, 1.6vw, 1.5rem)) var(--space-lg) !important;
  overflow: hidden;
  position: relative;
  box-shadow: none !important;
}

/* Les décorations « papier collé » qui restaient : ruban adhésif et
   grain, sans objet dès lors qu'il n'y a plus de planche. */
.whiteboard-visual::before,
.process-visual::after,
.service-visual::after { content: none !important; }

/* Le ratio du conteneur épouse celui de la source, donc « cover » remplit
   sans rien recadrer. */
.whiteboard-story-img,
.process-visual img,
.service-asset img,
.service-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  padding: 0 !important;
  display: block;
}

/* Deux colonnes pour les rendus au-delà de 1100px : chaque carte gagne en
   présence, et l'image atteint ~600px de large. */
@media (min-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(2.5rem, 4vw, 5rem); }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 3.5vw, 4rem); }
}
@media (min-width: 1500px) {
  .process-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══ 3. Verre ═════════════════════════════════════════════ */

/* Glassmorphism, mais tenu : le fond translucide porte du texte, donc il
   reste assez opaque pour que le contraste passe. Un verre trop ténu est
   joli en capture et illisible en usage. */
.process-card,
.service-card,
.pricing-card {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--glass-edge);
  border-top: 1px solid var(--glass-edge);
  padding: clamp(1rem, 1.6vw, 1.5rem);
  border-radius: 3px;
}

/* Sur les sections sombres, le verre s'inverse : voile clair sur fond
   profond, et non l'inverse. */
.era-collage-section .service-card,
.era-sky-offers .pricing-card {
  background: var(--glass-dark);
  border-color: var(--glass-edge-dark);
}

/* Un reflet diagonal, très discret, qui donne l'épaisseur du verre. */
.process-card::before,
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-white) 26%, transparent) 0%,
    transparent 38%);
  opacity: .7;
  height: auto !important;
}

.process-card:hover,
.service-card:hover,
.pricing-card:hover {
  background: color-mix(in srgb, var(--color-white) 78%, transparent);
  border-color: color-mix(in srgb, var(--color-gold) 55%, transparent);
  box-shadow: 0 28px 70px -30px rgba(23, 35, 59, .45);
}
.era-collage-section .service-card:hover {
  background: color-mix(in srgb, var(--color-paper) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-gold) 60%, transparent);
}

/* ═══ 4. Parallaxe et mouvement ════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* Parallaxe native : pilotée par le compositeur, sans écouteur de
     défilement et sans dépendre du CDN GSAP. Elle porte sur l'image, pas
     sur la carte — app.js anime déjà la carte. */
  @supports (animation-timeline: view()) {
    .service-asset img,
    .service-video,
    .era-arch-image img,
    .gallery-item img {
      animation: sc-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    /* Le visuel de méthode respire au lieu de dériver : c'est un dessin
       cadré, le décaler le couperait. */
    .whiteboard-story-img {
      animation: sc-breathe linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
  }

  .service-asset img, .service-video,
  .process-visual img, .gallery-item img {
    transition: transform 900ms var(--ease-out), filter 900ms var(--ease-out);
  }
  .service-card:hover .service-asset img,
  .service-card:hover .service-video { transform: scale(1.05); filter: saturate(1.06); }
  .process-card:hover .process-visual img { transform: scale(1.04); }

  /* Le numéro glisse et s'allume au survol : un détail qui signale que la
     carte est cliquable, sans ajouter d'icône. */
  .service-num, .process-num {
    transition: color var(--dur-s) var(--ease-out), letter-spacing var(--dur-s) var(--ease-out);
  }
  .service-card:hover .service-num,
  .process-card:hover .process-num { color: var(--color-burgundy); letter-spacing: .3em; }
}

@keyframes sc-drift {
  from { transform: scale(1.1) translateY(2.2%); }
  to   { transform: scale(1.1) translateY(-2.2%); }
}
@keyframes sc-breathe {
  from { transform: scale(.965); }
  to   { transform: scale(1); }
}

/* ═══ 5. Mouvement réduit ══════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .service-asset img, .service-video, .era-arch-image img,
  .gallery-item img, .whiteboard-story-img { animation: none !important; transform: none !important; }
  .process-card, .service-card, .pricing-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--color-white);
  }
}