.home-page .hero { --home-photo-height: clamp(350px, calc(48.4vw - 90px), 525px); grid-template-columns: minmax(0,.38fr) minmax(0,.62fr); grid-template-areas: "heading visual" "details visual" "badges badges"; grid-template-rows: 1fr 1fr auto; gap: 0 clamp(1.5rem,2.5vw,2.5rem); }
.home-page .hero .illustration-card { --home-frame-radius: 28px; --home-photo-radius: 22px; width: 100%; border-width: 6px; border-radius: var(--home-frame-radius); }
.home-page .hero .illustration-card::before { inset: -6px; border-radius: inherit; }
.home-page .hero .illustration-card > img,
.home-page .hero .home-slideshow-stage { border-radius: var(--home-photo-radius); }
.home-page .hero .illustration-card > img { height: var(--home-photo-height); aspect-ratio: auto; }
.home-slideshow { position: relative; }
.home-slideshow-stage { position: relative; height: var(--home-photo-height); width: 100%; overflow: hidden; background: #173a32; }
.home-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.home-slide.is-current { opacity: 1; visibility: visible; z-index: 2; }
.home-page .hero .home-slide img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.home-slideshow[data-effect=fade] .home-slide,
.home-slideshow[data-effect=zoom] .home-slide { transition: opacity .7s ease, visibility .7s; }
.home-slideshow[data-effect=slide] .home-slide { transform: translateX(100%); transition: transform .65s ease, opacity .65s, visibility .65s; }
.home-slideshow[data-effect=slide] .home-slide.is-current { transform: translateX(0); }
.home-slideshow[data-effect=slide] .home-slide.is-previous { transform: translateX(-100%); }
.home-slideshow[data-effect=zoom] .home-slide img { transform: scale(1); }
.home-slideshow[data-effect=zoom] .home-slide.is-current img { animation: home-photo-zoom var(--slide-duration,6s) linear both; animation-play-state: paused; }
.home-slideshow[data-effect=zoom].is-playing .home-slide.is-current img { animation-play-state: running; }
@keyframes home-photo-zoom { to { transform: scale(1.06); } }
.home-slideshow-controls { position: static; display: flex; justify-content: center; padding: 0 .3rem .15rem; color: #173a32; }
.home-slideshow-controls[hidden] { display: none; }
.home-slideshow-controls [data-slide-play] { min-height: 44px; border: 0; padding: .3rem .6rem; border-radius: 3px; background: transparent; color: #475e55; font: 500 .75rem/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.home-slideshow-controls button:hover { color: #173a32; }
.home-slideshow-controls button:focus-visible { outline: 3px solid #a64725; outline-offset: 3px; }
.home-page .hero .illustration-caption { display: block; min-height: 2.5rem; padding: .95rem .7rem .4rem; color: #102f27; font-family: var(--sans); font-size: clamp(1.0625rem,1.5vw,1.25rem); font-weight: 700; font-style: normal; line-height: 1.45; letter-spacing: .01em; text-align: center; overflow-wrap: anywhere; }
/* Un titre et une introduction compacts à gauche, la photo sur toute la colonne droite. */
.home-page .hero .hero-copy { grid-area: heading; align-self: end; width: 100%; max-width: none; margin: 0; padding: 0; }
.home-page .hero .hero-copy h1 { margin-bottom: 1.25rem; font-size: clamp(2.75rem,4.15vw,4.4rem); line-height: 1.06; }
.home-page .hero .eyebrow { margin-bottom: 1rem; }
.home-page .hero .hero-details { position: relative; z-index: 5; grid-area: details; align-self: start; min-width: 0; }
.home-page .hero .hero-intro { margin: 0 0 1.4rem; font-size: clamp(1rem,1.15vw,1.1rem); line-height: 1.65; }
.home-page .hero .hero-actions { flex-direction: column; align-items: flex-start; gap: .85rem; }
.home-page .hero .hero-actions .button { max-width: 100%; gap: .7rem; padding: .85rem 1rem; }
.home-page .hero .hero-actions .button span { flex-shrink: 0; }
.home-page .hero .hero-visual { grid-area: visual; align-self: center; max-width: none; margin: 0; padding: 1rem .5rem .6rem .7rem; }
.home-page .hero .hero-logo { width: clamp(72px,6vw,88px); top: -.8rem; left: -.8rem; }
.home-page .hero .hero-badges { grid-area: badges; margin: 2rem 0 0; }
@media(max-width:900px) {
  .home-page .hero { grid-template-columns: minmax(0,1fr); grid-template-areas: "heading" "visual" "details" "badges"; grid-template-rows: auto; gap: 1.4rem; padding: 2.2rem 1.2rem 2rem; --home-photo-height: clamp(280px,85vw,460px); }
  .home-page .hero .hero-copy, .home-page .hero .hero-details { width: 100%; max-width: 650px; margin: 0 auto; }
  .home-page .hero .hero-copy h1 { margin-bottom: 0; font-size: clamp(2.8rem,7.5vw,4.2rem); }
  .home-page .hero .hero-visual { width: 100%; max-width: 650px; margin: 0 auto; }
  .home-page .hero .illustration-card { --home-frame-radius: 24px; --home-photo-radius: 18px; }
  .home-page .hero .hero-logo { width: 72px; }
  .home-page .hero .hero-actions { flex-direction: row; align-items: center; gap: .85rem 1.25rem; }
  .home-page .hero .hero-badges { margin: .3rem 0 0; }
}
@media(prefers-reduced-motion:reduce){.home-slideshow .home-slide,.home-slideshow .home-slide img{transition:none!important;animation:none!important}}

/* STYLE RETENU — PHOTO SOUVENIR DE COLO
   Le cadre et toutes ses photos retrouvent ensemble l'angle de l'ancien bloc.
   La rotation du parent conserve les dimensions et les effets du diaporama. */
.home-page .hero .illustration-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(1.6deg);
  overflow: visible;
}
.home-page .hero .illustration-card::before {
  z-index: -1;
  inset: 18px -10px -10px 14px;
  border: 0;
  border-radius: 32px 26px 36px 28px;
  background: rgba(5,29,22,.2);
  box-shadow: 0 24px 46px rgba(5,29,22,.24);
  transform: rotate(-.8deg);
}
.home-page .hero .paper-tape {
  top: -12px;
  left: 61%;
  width: 106px;
  height: 24px;
  border-radius: 2px;
  background: rgba(239,173,63,.9);
  transform: rotate(-3deg);
}
.home-page .hero .home-slideshow {
  z-index: 2;
  margin-bottom: 2.4rem;
  filter: drop-shadow(0 18px 22px rgba(5,29,22,.2));
}
.home-page .hero .home-slideshow::after {
  content: '';
  position: absolute;
  z-index: 7;
  bottom: -3px;
  left: -12px;
  width: 78px;
  height: 21px;
  border-radius: 2px;
  background: rgba(216,111,76,.82);
  box-shadow: 0 2px 5px rgba(73,43,22,.16);
  transform: rotate(7deg);
  pointer-events: none;
}
.home-page .hero .home-slideshow-stage,
.home-page .hero .illustration-card > img {
  box-sizing: border-box;
  border: 5px solid #f4eedf;
  border-radius: 30px 24px 32px 26px;
  box-shadow: 0 0 0 1px rgba(23,58,50,.16);
}
.home-page .hero .illustration-caption {
  position: absolute;
  z-index: 8;
  right: auto;
  bottom: -1.45rem;
  left: 50%;
  display: block;
  width: max-content;
  max-width: calc(100% - 5rem);
  min-height: 0;
  padding: .62rem 1.15rem;
  border: 2px solid #f4eedf;
  border-radius: 999px;
  background: #f3ae3f;
  box-shadow: 0 8px 16px rgba(5,29,22,.22);
  color: #102f27;
  font-size: clamp(.82rem,1.1vw,1rem);
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%) rotate(-1.1deg);
}
.home-page .hero .home-slideshow-controls {
  position: absolute;
  z-index: 10;
  top: .75rem;
  right: .75rem;
  padding: 0;
}
.home-page .hero .home-slideshow-controls [data-slide-play] {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid #f4eedf;
  border-radius: 50%;
  background: rgba(244,238,223,.92);
  box-shadow: 0 5px 13px rgba(5,29,22,.24);
  color: #173a32;
  font-size: 0;
  line-height: 1;
  text-decoration: none;
  backdrop-filter: blur(5px);
}
.home-page .hero .home-slideshow-controls [data-slide-play]::before { content: '▶'; font-size: .9rem; }
.home-page .hero .home-slideshow.is-playing .home-slideshow-controls [data-slide-play]::before { content: 'Ⅱ'; font-size: 1rem; font-weight: 800; letter-spacing: -.12em; }
.home-page .hero .hero-logo {
  top: -.65rem;
  left: -.65rem;
  padding: .22rem;
  border: 3px solid #f4eedf;
  box-shadow: 0 8px 18px rgba(5,29,22,.24);
  transform: rotate(-8deg);
}
.home-page .hero .hero-logo::after { inset: 4px; border-width: 1.5px; }
@media(max-width:900px) {
  .home-page .hero .illustration-card { transform: rotate(1.2deg); }
  .home-page .hero .illustration-caption { bottom: -1.25rem; max-width: calc(100% - 3rem); padding: .55rem .9rem; font-size: .78rem; }
  .home-page .hero .home-slideshow-controls { top: .55rem; right: .55rem; }
  .home-page .hero .home-slideshow-controls [data-slide-play] { width: 42px; min-height: 42px; }
}