/* PRIVATE CANDIDATE 2026-11-07 — NOT PUBLISHED OR RENDER-VALIDATED.
   Include only in the exact homepage HEAD, after all currently declared CSS.
   No global/hashed stylesheet is changed. No image bytes/srcset are changed.
   All 10 direct .tile elements are retained, including DIVs and text-only cards.
   Section anchor boxes remain real grid boxes; only inner DIV wrappers flatten.
   Review desktop/iPhone/tablet, semantic order and source photos before release.
*/

/* The existing v3 image rule forces transform:none!important on IMG.
   Apply the approved photographic effect to FIGURE only. */
main > :is(.hero-c,.hero) .ms-photo-frame {
  box-sizing:border-box; min-width:0; margin:0; padding:0; aspect-ratio:1;
  overflow:hidden; border:3px solid #1f2023;
  border-bottom-color:var(--accent,#d4af37); background:var(--paper,#fff);
  box-shadow:6px 7px 0 #131315,13px 19px 25px rgba(19,19,21,0.15);
  transform:perspective(900px) rotateX(2deg) rotateY(-4deg);
  transform-origin:center; transition:transform .25s ease,box-shadow .25s ease;
}
main > :is(.hero-c,.hero) .ms-photo-frame > img {
  width:100%!important; max-width:100%!important; height:auto!important;
  aspect-ratio:1!important; object-fit:cover!important;
  object-position:var(--ms-photo-position,center)!important;
}
main > :is(.hero-c,.hero) .ms-photo-frame[role="button"] {cursor:pointer; touch-action:manipulation}
main > :is(.hero-c,.hero) .ms-photo-frame:focus-visible {
  outline:3px solid #131315; outline-offset:7px;
}
@media(hover:hover) and (pointer:fine) {
  main > :is(.hero-c,.hero) .ms-photo-frame:hover {
    transform:perspective(900px) rotateX(-1deg) rotateY(4deg);
  }
}
/* Compact the actual intervening blocks; preserve their complete text. */
main > .cost > .wrap {padding-top:40px; padding-bottom:0}
main > section.metiers.sec > .wrap {padding-top:40px}
main > section.metiers.sec {scroll-margin-top:88px}

@media(max-width:700px) {
  main > :is(.hero-c,.hero) .ms-photo-frame {
    border-width:2px; box-shadow:4px 5px 0 #131315,8px 12px 17px rgba(19,19,21,0.15);
  }
  main > .cost > .wrap {padding-top:32px}
  main > section.metiers.sec > .wrap {padding-top:32px}
}
@media(prefers-reduced-motion:reduce) {
  main > :is(.hero-c,.hero) .ms-photo-frame,
  main > :is(.hero-c,.hero) .ms-photo-frame:hover {transition:none; transform:none}
}

/* Four current frames. Original source has PANEL before PHOTO.
   A gallery initialization must place PHOTO before PANEL in DOM as well,
   before making the photos keyboard controls. CSS ordering alone is insufficient. */
main > .hero > .wrap.hero-c {
  display:flex; flex-direction:column; gap:0; padding-top:0;
}
main > .hero > .wrap.hero-c > .photo.ms-square-photo {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  order:-1; flex:0 0 auto; align-self:stretch;
  width:100%; max-width:none; min-height:0; margin:0; padding:24px 6px;
  gap:18px; overflow:clip;
}
main > .hero > .wrap.hero-c > .panel {
  order:0; flex:0 0 auto; width:100%; margin:0; min-width:0;
}
@media(max-width:700px) {
  main > .hero > .wrap.hero-c > .photo.ms-square-photo {
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px;
    margin:0; padding:18px 0;
  }
  main > .hero > .wrap.hero-c > .panel {margin:0; box-shadow:none}
}
@media(max-width:319px) {
  main > .hero > .wrap.hero-c > .photo.ms-square-photo {grid-template-columns:1fr}
}
@media(min-width:1200px) {
  @supports(grid-template-columns:subgrid) and (grid-template-rows:subgrid) {
    main > .hero {
      display:grid; grid-column:1 / -1; grid-row:1 / span 2;
      grid-template-columns:subgrid; grid-template-rows:subgrid; align-self:stretch;
    }
    main > .hero > .wrap.hero-c {display:contents}
    main > .hero > .wrap.hero-c > .photo.ms-square-photo {
      grid-column:2 / span 6; grid-row:1; padding:24px 6px;
    }
    main > .hero > .wrap.hero-c > .panel {
      grid-column:2 / span 4; grid-row:2; align-self:start; max-width:none;
    }
  }
}

@media(min-width:1200px) {
  @supports(grid-template-columns:subgrid) and (grid-template-rows:subgrid) {
    main {
      --ms-home-content-width:min(1200px,calc(100% - 32px));
      display:grid;
      grid-template-columns:minmax(16px,1fr) repeat(6,minmax(0,calc(var(--ms-home-content-width) / 6))) minmax(16px,1fr);
      align-items:start;
    }
    main > .cost {
      grid-column:6 / span 2; grid-row:2 / span 4; min-width:0;
      align-self:stretch; margin:0; padding:20px 0 24px 28px;
    }
    main > .cost > .wrap {
      display:block; width:100%; max-width:none; margin:0; padding:0;
    }
    main > .cost h2 {
      margin:0 0 18px; font-size:25px; line-height:1.16; text-wrap:balance;
    }
    main > .cost .txt {min-width:0}
    main > .cost .txt p {
      margin:0 0 15px; max-width:none; font-size:16px; line-height:1.6;
    }
    main > .cost .txt .fin {
      margin-top:20px!important; padding:13px 0 0;
      font-size:21px!important; line-height:1.25!important;
    }
    main > section.metiers.sec {
      display:grid; grid-column:2 / span 6; grid-row:3 / span 8;
      grid-template-columns:subgrid; grid-template-rows:subgrid;
      min-width:0; margin:0; padding:0; align-self:stretch;
    }
    main > section.metiers.sec > .wrap,
    main > section.metiers.sec > .wrap > .head {
      display:contents;
    }
    main > section.metiers.sec h2 {
      grid-column:1 / span 4; grid-row:1; min-width:0; max-width:none;
      margin:24px 24px 12px 0; font-size:clamp(28px,3.4vw,40px);
    }
    main > section.metiers.sec .lead {
      grid-column:1 / span 4; grid-row:2; min-width:0; max-width:62ch;
      margin:0 24px 22px 0;
    }
    main > section.metiers.sec .ph-grid {display:contents!important}
    main > section.metiers.sec .ph-grid > .tile {
      min-width:0; grid-row:auto; margin:0 8px 16px 0;
    }
    /* v3 .ms-photo-cards > .tile declares grid-column:auto!important. */
    main > section.metiers.sec .ph-grid > .tile:nth-child(1) {grid-column:1 / span 2!important; grid-row:3}
    main > section.metiers.sec .ph-grid > .tile:nth-child(2) {grid-column:3 / span 2!important; grid-row:3}
    main > section.metiers.sec .ph-grid > .tile:nth-child(3) {grid-column:1 / span 2!important; grid-row:4}
    main > section.metiers.sec .ph-grid > .tile:nth-child(4) {grid-column:3 / span 2!important; grid-row:4}
    main > section.metiers.sec .ph-grid > .tile:nth-child(5) {grid-column:5 / span 2!important; grid-row:4}
    main > section.metiers.sec .ph-grid > .tile:nth-child(6) {grid-column:1 / span 2!important; grid-row:5}
    main > section.metiers.sec .ph-grid > .tile:nth-child(7) {grid-column:3 / span 2!important; grid-row:5}
    main > section.metiers.sec .ph-grid > .tile:nth-child(8) {grid-column:5 / span 2!important; grid-row:5}
    main > section.metiers.sec .ph-grid > .tile:nth-child(9) {grid-column:1 / span 2!important; grid-row:6}
    main > section.metiers.sec .ph-grid > .tile:nth-child(10) {grid-column:3 / span 2!important; grid-row:6}
    main > section.metiers.sec .liens-plus {
      grid-column:1 / -1; min-width:0; margin:14px 8px 0 0; font-size:15px;
    }
    main > section.metiers.sec .liens-plus:nth-last-child(2) {grid-row:7}
    main > section.metiers.sec .liens-plus:last-child {grid-row:8; margin-bottom:56px}
    main > :not(.hero-c):not(.hero):not(.cost):not(.metiers) {grid-column:1 / -1}
  }
}