/* OubaZ Digital — fonds et côtés des pages intérieures
   (même esprit que l'accueil : bandes pleine largeur + formes bleues sur les côtés) */

/* ---------- En-tête de page : fond doux (seulement s'il a un titre) ---------- */
.page-hero:has(h1) {
  padding-bottom: clamp(28px, 4vw, 52px);
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 70%, #fff 100%),
    #F4F8FF url("../img/fond-hero.webp") center / cover no-repeat;
}

/* ---------- Bandes pleine largeur ---------- */
.svc-row, .proj, .values, .info-strip,
.svc-cta, .pg-cta, .case-cta,
main > .wrap:has(> .contact-grid) {
  position: relative;
  isolation: isolate;
}
.svc-row::before, .proj::before, .values::before, .info-strip::before,
.svc-cta::before, .pg-cta::before, .case-cta::before,
main > .wrap:has(> .contact-grid)::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  z-index: -1;
  background: transparent;
}

/* plus de filets : les bandes séparent les blocs */
.svc-row, .proj, .svc-cta, .pg-cta, .case-cta { border-top: 0 !important; }

/* une ligne sur deux est teintée */
article.svc-row:nth-of-type(even)::before,
article.proj:nth-of-type(even)::before { background: #DCE8FB; }

/* À propos : valeurs et informations */
.values { padding: clamp(32px, 4vw, 52px) 0 !important; }
.values::before { background: #DCE8FB; }
.info-strip::before { background: #EAF2FF; }

/* Appels à l'action intermédiaires */
.svc-cta::before, .pg-cta::before, .case-cta::before { background: #C9DCF9; }

/* Contact : fond derrière le formulaire */
main > .wrap:has(> .contact-grid) { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(32px, 5vw, 56px); }
main > .wrap:has(> .contact-grid)::before { background: #DCE8FB; }

/* ---------- Formes bleues sur les côtés (grands écrans) ---------- */
.gx-side { display: none; }
@media (min-width: 1360px) {
  .svc-row::after, .proj::after, .values::after, .info-strip::after,
  main > .wrap:has(> .contact-grid)::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 26%;
    width: 130px; height: 130px;
    pointer-events: none;
    mix-blend-mode: multiply;               /* les PNG ont un fond blanc */
    background: var(--gx, url("../elements/06_forme_bleue_cube.png")) center / contain no-repeat;
    filter: contrast(1.2) brightness(1.05);
  }
  /* impairs à droite, pairs à gauche */
  article:nth-of-type(odd)::after  { right: calc(50% - 50vw - 50px); transform: rotate(7deg); }
  article:nth-of-type(even)::after { left:  calc(50% - 50vw - 50px); transform: rotate(-6deg); }
  .values::after, .info-strip::after { right: calc(50% - 50vw - 50px); transform: rotate(7deg); }
  main > .wrap:has(> .contact-grid)::after { left: calc(50% - 50vw - 50px); top: 40%; transform: rotate(-6deg); }

  /* formes variées */
  article:nth-of-type(5n+1)::after { --gx: url("../elements/06_forme_bleue_cube.png"); }
  article:nth-of-type(5n+2)::after { --gx: url("../elements/07_forme_bleue_sphere.png"); }
  article:nth-of-type(5n+3)::after { --gx: url("../elements/09_forme_bleue_diamant.png"); }
  article:nth-of-type(5n+4)::after { --gx: url("../elements/08_forme_bleue_prisme.png"); }
  article:nth-of-type(5n+5)::after { --gx: url("../elements/10_forme_bleue_arrondie.png"); }
  .values::after { --gx: url("../elements/08_forme_bleue_prisme.png"); }
  .info-strip::after { --gx: url("../elements/10_forme_bleue_arrondie.png"); }
  main > .wrap:has(> .contact-grid)::after { --gx: url("../elements/07_forme_bleue_sphere.png"); }
}

/* Respiration autour des bandes (À propos) */
.reps-head { padding-top: clamp(32px, 4vw, 52px) !important; }
.info-strip { padding: clamp(24px, 3vw, 36px) 0 !important; }

/* Réalisations : les cartes ont déjà leurs propres formes, pas de formes latérales en plus */
.proj::after { display: none !important; }

/* Services : images des cartes à une taille proche de leur définition réelle (nettes, sans flou) */
.svc-visual { padding: clamp(10px, 2vw, 24px) !important; }
.svc-visual > img[src*="assets/img/svc-"] {
  width: auto; height: auto;
  max-width: min(74%, 320px); max-height: min(82%, 280px);
  object-fit: contain;
}