/* Accueil, hero : quatre photos inclinées à filet doré (remplace la photo en forme de galet) */
.hero-collage { display: none; }

@media (min-width: 641px) {
  .hero-collage { display: block; position: relative; justify-self: center; width: clamp(380px, 41vw, 700px); aspect-ratio: 1 / 1.02; }
  .hero-collage figure {
    position: absolute; margin: 0; overflow: hidden; background: var(--forest-deep);
    border: 1px solid rgba(233, 207, 159, .75);
    box-shadow: 0 28px 44px -22px rgba(0, 0, 0, .8);
    transition: transform .7s var(--ease-out);
  }
  .hero-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hc-a { left: 4%; top: 0; width: 58%; aspect-ratio: 1.11; transform: rotate(-1.6deg); z-index: 3; }
  .hc-b { right: 0; top: 10%; width: 38%; aspect-ratio: .9; transform: rotate(2.6deg); z-index: 2; }
  .hc-c { left: 0; bottom: 12%; width: 50%; aspect-ratio: 1.5; transform: rotate(-2.4deg); z-index: 4; }
  .hc-d { right: 2%; bottom: 0; width: 54%; aspect-ratio: 1.6; transform: rotate(1.8deg); z-index: 3; }
}
@media (min-width: 641px) and (hover: hover) {
  .hero-collage:hover .hc-a { transform: rotate(-1deg) translateY(-6px); }
  .hero-collage:hover .hc-b { transform: rotate(1.8deg) translateY(-4px); }
  .hero-collage:hover .hc-c { transform: rotate(-1.6deg) translateY(4px); }
  .hero-collage:hover .hc-d { transform: rotate(1.2deg) translateY(4px); }
}
@media (min-width: 1081px) {
  .hero-inner:has(.hero-collage) { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .hero-collage { width: min(100%, 560px); margin: 48px auto 40px; }
}
@media (prefers-reduced-motion: reduce) { .hero-collage figure { transition: none; } }

/* ---- Variante 2 (activée avec ?hero=2) : mosaïque à formes arche / cercle / carte, filets dorés décalés ---- */
@media (min-width: 641px) {
  .hero-collage.v2 { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: auto auto; gap: clamp(14px, 1.6vw, 22px); align-items: center; aspect-ratio: auto; padding: 14px 10px; }
  .hero-collage.v2 figure { position: relative; inset: auto; width: auto; aspect-ratio: auto; transform: none; border: 0; box-shadow: 0 26px 44px -24px rgba(0, 0, 0, .8); outline: 1px solid rgba(233, 207, 159, .6); outline-offset: 7px; }
  .hero-collage.v2 .hc-a { grid-column: 1; grid-row: 1; aspect-ratio: 1.02; border-radius: 999px 999px 10px 10px; }
  .hero-collage.v2 .hc-a img { object-position: 28% 50%; }
  .hero-collage.v2 .hc-b { grid-column: 2; grid-row: 1; aspect-ratio: 1; border-radius: 50%; transform: translateY(26px); outline-offset: 8px; }
  .hero-collage.v2 .hc-b img { object-position: 50% 40%; }
  .hero-collage.v2 .hc-c { grid-column: 1 / span 1; grid-row: 2; aspect-ratio: 1.35; border-radius: 10px; margin-top: 18px; }
  .hero-collage.v2 .hc-d { grid-column: 2; grid-row: 2; aspect-ratio: .92; border-radius: 10px 10px 999px 999px; transform: translateY(8px); }
  .hero-collage.v2 .hc-d img { object-position: 50% 50%; }
}
@media (min-width: 641px) and (hover: hover) {
  .hero-collage.v2:hover .hc-a, .hero-collage.v2:hover .hc-c { transform: translateY(-4px); }
  .hero-collage.v2:hover .hc-b { transform: translateY(20px); }
  .hero-collage.v2:hover .hc-d { transform: translateY(14px); }
}

/* ---- Variante 3 (?hero=3) : galerie sobre, cadres droits à filet intérieur, composition asymétrique ---- */
@media (min-width: 641px) {
  .hero-collage.v3 { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); aspect-ratio: 1 / 1.04; }
  .hero-collage.v3 figure { position: relative; inset: auto; width: auto; aspect-ratio: auto; transform: none; border: 0; border-radius: 0; box-shadow: 0 30px 50px -34px rgba(0, 0, 0, .85); background: var(--forest-deep); }
  .hero-collage.v3 figure::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(244, 242, 232, .55); pointer-events: none; transition: inset .9s var(--ease-out), border-color .9s var(--ease-out); }
  .hero-collage.v3 img { transition: transform 1.1s var(--ease-out); }
  .hero-collage.v3 .hc-a { grid-column: 6 / 13; grid-row: 2 / 8; }
  .hero-collage.v3 .hc-b { grid-column: 1 / 6;  grid-row: 1 / 8; }
  .hero-collage.v3 .hc-c { grid-column: 7 / 13; grid-row: 9 / 13; }
  .hero-collage.v3 .hc-d { grid-column: 1 / 7;  grid-row: 8 / 13; }
  .hero-collage.v3 .hc-a { transform: rotate(-1.3deg); z-index: 2; }
  .hero-collage.v3 .hc-b { transform: rotate(1.7deg);  z-index: 3; }
  .hero-collage.v3 .hc-c { transform: rotate(-1.7deg); z-index: 3; }
  .hero-collage.v3 .hc-d { transform: rotate(1.2deg);  z-index: 2; }
  .hero-collage.v3 figure { transition: transform .9s var(--ease-out); overflow: hidden; }
  .hero-collage.v3 .hc-a img { object-position: 38% 50%; }
  .hero-collage.v3 .hc-b img { object-position: 50% 45%; }
  .hero-collage.v3 .hc-d img { object-position: 60% 55%; }
}
@media (min-width: 641px) and (hover: hover) {
  .hero-collage.v3 figure:hover img { transform: scale(1.045); }
  .hero-collage.v3 .hc-a:hover { transform: rotate(-.6deg); }
  .hero-collage.v3 .hc-b:hover { transform: rotate(.9deg); }
  .hero-collage.v3 .hc-c:hover { transform: rotate(-.9deg); }
  .hero-collage.v3 .hc-d:hover { transform: rotate(.6deg); }
  .hero-collage.v3 figure:hover::after { inset: 14px; border-color: rgba(233, 207, 159, .85); }
}
@media (min-width: 641px) and (prefers-reduced-motion: reduce) { .hero-collage.v3 img, .hero-collage.v3 figure, .hero-collage.v3 figure::after { transition: none; } }

/* Deux photos, proportions réelles (aucun recadrage) */
@media (min-width: 641px) {
  .hero-collage.v3 { aspect-ratio: 1 / 1.16; }
  .hero-collage.v3 .hc-a { grid-column: 5 / 13;  grid-row: 1 / 13; align-self: start; height: auto; }
  .hero-collage.v3 .hc-c { grid-column: 1 / 9; grid-row: 1 / 13; align-self: end; height: auto; }
  .hero-collage.v3 .hc-a img { height: auto; object-fit: contain; object-position: 50% 50%; }
  .hero-collage.v3 .hc-c img { height: auto; object-fit: contain; object-position: 50% 50%; }
}

/* ---- Mobile (≤640px) : même composition que sur ordinateur (couple en haut à droite, boissons en bas à gauche), photos entières ---- */
@media (max-width: 640px) {
  .hero { min-height: 0; }
  .hero-bg { background: linear-gradient(180deg, var(--forest-deep) 0%, var(--ink) 55%, var(--forest-deep) 100%); }
  .hero-inner {
    background:
      radial-gradient(ellipse 80% 65% at 50% 0%, rgba(138, 154, 91, 0.7) 0%, rgba(138, 154, 91, 0.22) 45%, transparent 75%),
      linear-gradient(160deg, var(--forest-deep) 0%, var(--ink) 72%);
  }
  .hero-collage.v3 {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr));
    width: 100%; aspect-ratio: 1 / 1.4; gap: 8px; margin: 14px 0 6px; order: 2;
  }
  .hero-collage.v3 figure {
    position: relative; margin: 0; overflow: hidden; background: var(--forest-deep);
    box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .85); height: auto;
  }
  .hero-collage.v3 figure::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(244, 242, 232, .55); pointer-events: none; }
  .hero-collage.v3 img { display: block; width: 100%; height: auto; object-fit: contain; }
  .hero-collage.v3 .hc-a { grid-column: 3 / 13; grid-row: 1 / 13; align-self: start; transform: rotate(-1.3deg); z-index: 2; }
  .hero-collage.v3 .hc-c { grid-column: 1 / 11; grid-row: 1 / 13; align-self: end; transform: rotate(-1.7deg); z-index: 3; }
}

/* Mobile : les photos s'insèrent entre le titre et les boutons */
@media (max-width: 640px) {
  .hero-content { display: contents; }
  .hero-inner { gap: 0; }
  .hero-inner .eyebrow { order: 1; }
  .hero-inner .hero-title { order: 2; }
  .hero-inner .hero-subtitle { order: 3; }
  .hero-inner .hero-collage.v3 { order: 4; margin: 22px 0 26px; }
  .hero-inner .hero-actions { order: 5; }
  .hero-inner .hero-meta { order: 6; margin-top: 20px; }
}

/* Entrée des deux photos : elles glissent depuis la gauche, l'une après l'autre, et restent légèrement inclinées */
.hero-collage.v3.reveal { opacity: 1; transform: none; animation: none; }
.hero-collage.v3 { --hc-p: 1100px; --hc-ry: -14deg; }   /* recul à gauche, avancée à droite */
.hero-collage.v3 .hc-a { --hc-rot: 0deg;    transform: perspective(var(--hc-p)) rotateY(var(--hc-ry)) rotate(var(--hc-rot)); }
.hero-collage.v3 .hc-c { --hc-rot: 0deg; transform: perspective(var(--hc-p)) rotateY(var(--hc-ry)) rotate(var(--hc-rot)); }
.hero-collage.v3 figure {
  animation: hcGlide 1.7s cubic-bezier(.16, 1, .3, 1) backwards;
}
.hero-collage.v3 .hc-a { animation-delay: calc(var(--reveal-delay, .6s) + .05s); --hc-from: -7deg; }
.hero-collage.v3 .hc-c { animation-delay: calc(var(--reveal-delay, .6s) + .35s); --hc-from: 6deg; }
@keyframes hcGlide {
  from { opacity: 0; transform: perspective(var(--hc-p)) translateX(-90vw) rotateY(var(--hc-fy, -28deg)) rotate(0deg); }
  35%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(var(--hc-p)) translateX(0) rotateY(var(--hc-ry)) rotate(var(--hc-rot)); }
}
/* le Hero attend la fin de l'intro, comme le reste de l'entrée */
.intro-lock .hero-collage.v3 figure { animation-play-state: paused; }
@media (min-width: 641px) and (hover: hover) {
  .hero-collage.v3 .hc-a:hover, .hero-collage.v3 .hc-c:hover { transform: perspective(var(--hc-p)) translateY(-4px) rotateY(0deg) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .hero-collage.v3 figure { animation: none; } }

/* Ordinateur : l'ensemble des deux photos est décalé un peu vers la gauche */
@media (min-width: 1081px) {
  .hero-collage.v3 { translate: -24px 0; }
}

/* Les photos ne bougent plus au survol de la souris (ni déplacement, ni zoom, ni changement du filet) */
@media (hover: hover) {
  .hero-collage.v3 .hc-a:hover, .hero-collage.v3 .hc-c:hover,
  .hero-collage.v3:hover .hc-a, .hero-collage.v3:hover .hc-c { transform: perspective(var(--hc-p)) rotateY(var(--hc-ry)) rotate(0deg); }
  .hero-collage.v3 figure:hover img { transform: none; }
  .hero-collage.v3 figure:hover::after { inset: 10px; border-color: rgba(244, 242, 232, .55); }
}

/* Titre au-dessus du grand titre du hero : blanc, sur ordinateur et mobile */
.hero .eyebrow, .hero-inner .eyebrow { color: #fff; }

/* Photo des boissons : retrouve sa position droite d'avant (sans pivot 3D) ; la photo du couple garde l'effet 3D */
.hero-collage.v3 .hc-c { --hc-ry: 0deg; --hc-fy: 0deg; }

/* Hero : seulement la photo du couple, sans cadre ni effet, agrandie */
.hero-collage.v3 .hc-c { display: none; }
.hero-collage.v3 { translate: none; aspect-ratio: auto; display: block; }
.hero-collage.v3 .hc-a {
  position: relative; inset: auto; grid-column: auto; grid-row: auto; width: 100%; height: auto; aspect-ratio: auto;
  transform: none; animation: none; border: 0; box-shadow: none; background: none; overflow: visible;
}
.hero-collage.v3 .hc-a::after { content: none; display: none; }
.hero-collage.v3 .hc-a img { display: block; width: 100%; height: auto; object-fit: cover; }
.hero-collage.v3 .hc-a:hover, .hero-collage.v3:hover .hc-a { transform: none; }
@media (min-width: 1081px) {
  .hero-inner:has(.hero-collage) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .hero-collage.v3 { width: 100%; justify-self: stretch; translate: none; }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .hero-collage.v3 { width: min(100%, 640px); }
}
@media (max-width: 640px) {
  .hero-collage.v3 { width: 100%; aspect-ratio: auto; display: block; }
}

/* Hero : la photo du couple s'intègre à l'arrière-plan du côté droit, fondue dans le vert */
@media (min-width: 1081px) {
  .hero-inner:has(.hero-collage) { position: relative; }
  .hero-inner:has(.hero-collage) .hero-content { position: relative; z-index: 2; }
  .hero-collage.v3 { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 54%; height: 100%; margin: 0; justify-self: auto; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%), linear-gradient(180deg, transparent 0%, transparent 12%, #000 27%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 11%), linear-gradient(180deg, transparent 0%, transparent 12%, #000 27%); }
  .hero-collage.v3 { -webkit-mask-composite: source-in; mask-composite: intersect; }
  .hero-collage.v3 .hc-a { height: 100%; }
  .hero-collage.v3 .hc-a img { height: 100%; object-fit: contain; object-position: right bottom; }
}
/* tablette et mobile : la photo se fond en haut et en bas */
@media (max-width: 1080px) {
  .hero-collage.v3 { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
}

/* Mobile uniquement : la photo remonte sous le titre, « Café · Restaurant · Terrasse » passe sous la photo */
@media (max-width: 640px) {
  .hero-inner .hero-collage.v3 { order: 3; margin: -8px 0 6px; }
  .hero-inner .hero-subtitle { order: 4; margin-top: 6px; }
}

/* Ordinateur uniquement : un peu d'espace autour de la photo du hero, et dégradé vert très foncé sur ses quatre bords.
   Pseudo-élément posé sur la photo seule, sans clic. Le mobile n'est pas concerné. */
@media (min-width: 1081px) {
  .hero-collage.v3 { top: 9%; bottom: 9%; right: 3.5%; width: 51%; height: auto; display: flex; align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%); }
  .hero-collage.v3 .hc-a { position: relative; height: auto; width: 100%; }
  .hero-collage.v3 .hc-a img { height: auto; object-fit: cover; }
  .hero-collage.v3 .hc-a::after {
    content: ''; display: block; position: absolute; inset: 0; pointer-events: none; border: 0; box-shadow: none;
    background:
      linear-gradient(to bottom, rgba(16, 37, 31, .85) 0%, rgba(16, 37, 31, .55) 8%, rgba(16, 37, 31, .24) 18%, rgba(16, 37, 31, 0) 32%),
      linear-gradient(to top, rgba(16, 37, 31, .85) 0%, rgba(16, 37, 31, .55) 8%, rgba(16, 37, 31, .24) 18%, rgba(16, 37, 31, 0) 32%),
      linear-gradient(to right, rgba(16, 37, 31, .85) 0%, rgba(16, 37, 31, .55) 8%, rgba(16, 37, 31, .24) 18%, rgba(16, 37, 31, 0) 32%),
      linear-gradient(to left, rgba(16, 37, 31, .85) 0%, rgba(16, 37, 31, .55) 8%, rgba(16, 37, 31, .24) 18%, rgba(16, 37, 31, 0) 32%);
  }
}

/* Ordinateur : les bords de la photo se dissolvent complètement dans le fond (le rectangle ne se voit plus) */
@media (min-width: 1081px) {
  .hero-collage.v3 { -webkit-mask-image: none; mask-image: none; }
  .hero-collage.v3 .hc-a {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 8%, #000 20%, #000 88%, rgba(0, 0, 0, .5) 95%, transparent 100%),
                        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 8%, #000 20%, #000 80%, rgba(0, 0, 0, .5) 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 8%, #000 20%, #000 88%, rgba(0, 0, 0, .5) 95%, transparent 100%),
                linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 8%, #000 20%, #000 80%, rgba(0, 0, 0, .5) 92%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}

/* Ordinateur : la photo reste dans la zone du hero (elle ne déborde plus sous le cadre) ; elle est recadrée en hauteur si l'écran est large */
@media (min-width: 1081px) {
  .hero-collage.v3 { align-items: stretch; }
  .hero-collage.v3 .hc-a { height: 100%; }
  .hero-collage.v3 .hc-a img { height: 100%; object-fit: cover; object-position: 50% 42%; }
}