/* ============================================================================
   Accueil Mian Fan, habillage photo (15/09/2026).
   La charte ne bouge pas (crème, encre, jaune ocre, Cormorant italique, Inter),
   les textes, les liens de réservation et le suivi non plus. Cette feuille ne
   fait qu'une chose : laisser les photos respirer. Elle est scopée sur la classe
   de body "home-wahou" et se charge après main.css et home-conversion.css.
   Pour revenir en arrière : retirer le lien vers ce fichier et la classe.
   ============================================================================ */

/* ---------- Barre de navigation : lisible une fois le hero passé ---------- */
.home-wahou .nav { isolation:isolate; }
.home-wahou .nav--scrolled { color:var(--ink); padding-top:12px; padding-bottom:12px; }
/* Le flou est sur un pseudo-élément : posé sur .nav il en ferait le conteneur
   du bouton mobile position:fixed. */
.home-wahou .nav--scrolled::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(250,246,236,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(22,22,22,.06);
}

/* ---------- Hero vivant ------------------------------------------------- */
.home-wahou .hero { height:100vh; min-height:640px; max-height:none; }
.home-wahou .hero__video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:68% 50%; z-index:0;   /* le barman est à droite du cadre */
}
.home-wahou .hero__slides { position:absolute; inset:0; z-index:0; }
.home-wahou .hero__slide {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04);
  animation:hero-fondu 21s ease-in-out infinite;
}
.home-wahou .hero__slide:first-child { animation-delay:-1.3s; }   /* démarre déjà visible */
.home-wahou .hero__slide:nth-child(2) { animation-delay:7s; }
.home-wahou .hero__slide:nth-child(3) { animation-delay:14s; object-position:50% 40%; }
@keyframes hero-fondu {
  0%   { opacity:0; transform:scale(1.04); }
  6%   { opacity:1; }
  33%  { opacity:1; transform:scale(1.12); }
  40%  { opacity:0; transform:scale(1.13); }
  100% { opacity:0; }
}
.home-wahou .hero.has-video .hero__slides { display:none; }
.home-wahou .hero__overlay {
  background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.72) 100%);
}
.home-wahou .hero__scroll {
  position:absolute; right:56px; bottom:44px; z-index:2;
  display:flex; align-items:center; gap:12px;
  color:#fff; font-size:10px; letter-spacing:.32em; text-transform:uppercase; opacity:.85;
}
.home-wahou .hero__scroll::after {
  content:""; width:1px; height:56px; background:rgba(255,255,255,.7);
  animation:hero-trait 2.2s ease-in-out infinite; transform-origin:top;
}
@keyframes hero-trait { 0%,100% { transform:scaleY(.3); opacity:.4 } 50% { transform:scaleY(1); opacity:1 } }
@media (prefers-reduced-motion: reduce) {
  .home-wahou .bande img, .home-wahou .coulisses__media img, .home-wahou .ambient__bg, .home-wahou .cta-band__photo { transform:none !important; }
  .home-wahou .hero__slide { animation:none; opacity:1; transform:none; }
  .home-wahou .hero__slide:nth-child(n+2) { display:none; }
  .home-wahou .hero__scroll::after { animation:none; }
}
@media(max-width:900px) {
  .home-wahou .hero__video { object-position:70% 50%; }            /* boucle 16:9 : le barman est a droite */
  .home-wahou .hero__video--vertical { object-position:50% 50%; }  /* version verticale : deja cadree */
  .home-wahou .hero__scroll { display:none; }
  /* Sur telephone le titre et les boutons couvrent la moitie basse : voile un
     peu plus present a partir du tiers, le haut de l'image reste clair. */
  .home-wahou .hero__overlay {
    background:linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.20) 25%, rgba(0,0,0,.46) 45%, rgba(0,0,0,.60) 62%, rgba(0,0,0,.82) 100%);
  }
}

/* Le surtitre n'a pas d'ombre dans le thème : sur une image claire (bokeh du bar,
   suspensions de la salle) il devenait illisible. Mesuré sur la boucle mobile. */
.home-wahou .hero__eyebrow { text-shadow:0 1px 6px rgba(0,0,0,.75); }

/* ---------- Les 10 maisons : mosaïque photo sur ordinateur ---------------- */
/* Le balisage de production est conservé (article.card, card__menu, card__book).
   Sur téléphone, la liste compacte de production reste telle quelle. */
.home-wahou .restos-wrap { background-image:none; background-attachment:scroll; }
@media(min-width:901px) {
  .home-wahou .restos__grid {
    grid-template-columns:repeat(4, 1fr); grid-auto-rows:340px; gap:14px;
    /* Le HTML est déjà dans l'ordre visuel (front-page.php) : aucune case vide,
       et la touche Tab suit l'ordre de l'écran. */
  }
  .home-wahou .card {
    position:relative; overflow:hidden; display:block;
    background:#151515; color:#fff; isolation:isolate;
    box-shadow:none;
  }
  .home-wahou .card:hover { transform:none; box-shadow:none; }
  /* Deux grandes tuiles : Dumpling Factory (6e) et Naï Naï (9e). */
  .home-wahou .card--big { grid-column:span 2; grid-row:span 2; }
  .home-wahou .card__media { position:absolute; inset:0; aspect-ratio:auto; height:100%; }
  .home-wahou .card__media img {
    width:100%; height:100%; object-fit:cover; object-position:50% 30%;
    transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
  }
  .home-wahou .card:hover .card__media img, .home-wahou .card:focus-within .card__media img { transform:scale(1.06); }
  .home-wahou .card::after {
    content:""; position:absolute; inset:0; z-index:1;
    /* Greg (16/09) : noms et descriptions illisibles sur les photos. Le texte
       occupe les deux tiers bas d'une petite tuile : le fond y est sombre. */
    background:linear-gradient(180deg, rgba(0,0,0,0) 12%, rgba(0,0,0,.34) 34%, rgba(0,0,0,.76) 58%, rgba(0,0,0,.9) 100%);
  }
  /* Grandes tuiles : le texte n'occupe que le bas, le plat garde le haut. */
  .home-wahou .card--big::after {
    background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.9) 100%);
  }
  .home-wahou .card__body {
    position:absolute; left:22px; right:22px; bottom:18px; z-index:2;
    padding:0; display:block;
  }
  .home-wahou .card__title, .home-wahou .card__title a {
    color:#fff; font-size:30px; line-height:.95; margin-bottom:6px;
    text-shadow:0 1px 3px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.7);
  }
  .home-wahou .card--big .card__title { font-size:clamp(42px, 3.6vw, 60px); }
  .home-wahou .card__concept { color:#fff; opacity:1; font-style:normal; font-size:13px; line-height:1.45; margin-bottom:6px; max-width:40ch; text-shadow:0 1px 8px rgba(0,0,0,.85); }
  .home-wahou .card__addr { color:#fff; opacity:.86; font-size:11px; margin-bottom:10px; text-shadow:0 1px 8px rgba(0,0,0,.85); }
  .home-wahou .card__menu { text-shadow:0 1px 8px rgba(0,0,0,.85); }
  .home-wahou .card__actions { gap:6px 12px; padding-top:0; margin-top:0; }
  .home-wahou .card__menu { color:#fff; text-decoration-color:var(--yellow); }
  .home-wahou .card__book { background:var(--yellow); color:var(--ink); }
  .home-wahou .card__book:hover { background:#fff; }
  .home-wahou .card__tag { top:14px; right:14px; }
  .home-wahou .card__badge { top:14px; left:14px; }
  .home-wahou .card--new .card__tag { top:14px; }
  .home-wahou .card:focus-within { box-shadow:none; }
}
@media(min-width:901px) and (max-width:1180px) {
  .home-wahou .restos__grid { grid-template-columns:repeat(3, 1fr); grid-auto-rows:320px; }
  /* À 3 colonnes, deux tuiles 2x2 laisseraient une case vide : format large 2x1. */
  .home-wahou .card--big { grid-column:span 2; grid-row:span 1; }
  .home-wahou .card--big::after {
    background:linear-gradient(180deg, rgba(0,0,0,0) 12%, rgba(0,0,0,.34) 34%, rgba(0,0,0,.76) 58%, rgba(0,0,0,.9) 100%);
  }
  .home-wahou .card__title, .home-wahou .card__title a { font-size:26px; }
  .home-wahou .card--big .card__title { font-size:clamp(36px, 4vw, 48px); }
  .home-wahou .card__body { left:16px; right:16px; bottom:14px; }
}

/* ---------- Manifeste : plus de voile ------------------------------------- */
.home-wahou .manifesto-wrap { background-image:none; background-attachment:scroll; }
.home-wahou .manifesto__media img { box-shadow:0 30px 80px rgba(22,22,22,.14); }

/* ---------- Bandes photo pleine largeur ---------------------------------- */
.home-wahou .bande {
  position:relative; height:74vh; min-height:440px; overflow:hidden; background:#111;
}
/* Parallax : les grandes photos sont plus hautes que leur cadre (12 % de
   chaque côté) et glissent au défilement, sans jamais laisser de vide
   (js/home-wahou.js borne le déplacement à cette marge). */
.home-wahou .bande img {
  position:absolute; left:0; right:0; top:-12%; width:100%; height:124%; object-fit:cover;
  will-change:transform;
}
.home-wahou .bande::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.62) 100%);
}
.home-wahou .bande__caption {
  position:absolute; left:56px; bottom:44px; z-index:2; color:#fff;
  display:flex; align-items:baseline; gap:18px;
}
.home-wahou .bande__caption strong {
  font-family:'Cormorant',serif; font-style:italic; font-weight:500;
  font-size:clamp(34px, 4.5vw, 62px); line-height:1; letter-spacing:-.01em;
}
.home-wahou .bande__caption span { font-size:11px; letter-spacing:.32em; text-transform:uppercase; opacity:.9; }
@media(max-width:900px) {
  .home-wahou .bande { height:44vh; min-height:280px; }
  .home-wahou .bande__caption { left:24px; bottom:28px; flex-direction:column; gap:8px; }
}

/* ---------- Ambiance : plus haute, voile allégé -------------------------- */
.home-wahou .ambient { height:78vh; min-height:480px; overflow:hidden; }
.home-wahou .ambient__bg { top:-12%; height:124%; will-change:transform; }
.home-wahou .ambient::after { background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.48)); }
@media(max-width:900px) { .home-wahou .ambient { height:56vh; min-height:360px; } }

/* ---------- Plats : bandeau qui défile, bord à bord ---------------------- */
.home-wahou .foodporn { background-image:none; background-attachment:scroll; padding:96px 0 80px; }
.home-wahou .foodporn__head { padding:0 56px; margin:0 auto 48px; }
.home-wahou .foodporn__marquee { overflow:hidden; position:relative; }
.home-wahou .foodporn__marquee::before, .home-wahou .foodporn__marquee::after {
  content:""; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none;
}
.home-wahou .foodporn__marquee::before { left:0;  background:linear-gradient(90deg, #1c1c1e, transparent); }
.home-wahou .foodporn__marquee::after  { right:0; background:linear-gradient(-90deg, #1c1c1e, transparent); }
.home-wahou .foodporn__track {
  display:flex; gap:16px; width:max-content; padding:0 8px;
  animation:dishes-scroll 70s linear infinite;
}
.home-wahou .foodporn__marquee:hover .foodporn__track { animation-play-state:paused; }
@keyframes dishes-scroll { from { transform:translateX(0) } to { transform:translateX(-50%) } }
.home-wahou .dishcard { position:relative; flex:0 0 400px; overflow:hidden; background:#000; color:#fff; }
.home-wahou .dishcard img {
  width:400px; height:320px; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.home-wahou .dishcard:hover img { transform:scale(1.05); }
.home-wahou .dishcard__body {
  position:absolute; left:0; right:0; bottom:0; padding:64px 20px 18px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72));
}
.home-wahou .dishcard__resto {
  font-family:'Cormorant',serif; font-style:italic; font-weight:500;
  font-size:26px; line-height:1; color:#fff;
}
.home-wahou .dishcard__go {
  display:block; margin-top:6px; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--yellow); font-weight:500;
}
@media (prefers-reduced-motion: reduce) {
  .home-wahou .foodporn__track { animation:none; }
  .home-wahou .foodporn__marquee { overflow-x:auto; }
}
@media(max-width:900px) {
  .home-wahou .foodporn { padding:72px 0 56px; }
  .home-wahou .foodporn__head { padding:0 24px; }
  .home-wahou .dishcard { flex:0 0 280px; }
  .home-wahou .dishcard img { width:280px; height:224px; }
  /* Sur tactile : bandeau glissable au doigt, pas seulement animé. */
  .home-wahou .foodporn__marquee { overflow-x:auto; scrollbar-width:none; }
  .home-wahou .foodporn__marquee::-webkit-scrollbar { display:none; }
  .home-wahou .foodporn__marquee::before, .home-wahou .foodporn__marquee::after { width:40px; }
}

/* ---------- Coulisses : plus de voile, la photo prend la moitié ----------- */
.home-wahou .coulisses { background-image:none; background-attachment:scroll; min-height:620px; }
.home-wahou .coulisses__media { position:relative; overflow:hidden; min-height:420px; }
/* Cadrage (16/09) : le bol entier et les nouilles levées, moins de manche sombre. */
.home-wahou .coulisses__media img {
  position:absolute; left:0; right:0; top:-12%; width:100%; height:124%; min-height:0;
  object-fit:cover; object-position:50% 84%; will-change:transform;
}
@media(max-width:900px) { .home-wahou .coulisses__media { height:440px; min-height:0; } }

/* ---------- Bandeau final : la table se voit sous le jaune ---------------- */
.home-wahou .cta-band { padding:128px 24px; background-image:none !important; overflow:hidden; isolation:isolate; }
.home-wahou .cta-band::before {
  content:""; position:absolute; inset:0; z-index:0;
  /* Jaune plein derrière le texte, la photo respire sur les bords. */
  background:radial-gradient(ellipse at center, rgba(244,200,74,.94) 0 34%, rgba(244,200,74,.58) 100%);
}
.home-wahou .cta-band__photo {
  position:absolute; left:0; right:0; top:-12%; width:100%; height:124%; object-fit:cover; z-index:-1;
  will-change:transform;
}

/* ---------- Mobile : hauteur d'écran réelle ------------------------------ */
/* min-height et non height : si le texte est plus haut que l'écran, le hero
   grandit au lieu de couper les boutons. */
@media(max-width:900px) {
  .home-wahou .hero { height:auto; min-height:100vh; min-height:100svh; }
}

/* ---------- Téléphone : les maisons en cartes photo ----------------------- */
/* Greg (16/09) : la liste compacte fait annuaire. Même esprit que la mosaïque
   de l'ordinateur : la photo porte la carte, le texte passe dessus. Le balisage
   de production (card__menu, card__book, data-resa) ne change pas. */
@media(max-width:900px) {
  .home-wahou .restos__grid { gap:14px; }
  .home-wahou .card {
    position:relative; display:flex; flex-direction:column; justify-content:flex-end;
    grid-template-columns:none; min-height:340px; overflow:hidden;
    background:#151515; color:#fff; isolation:isolate;
  }
  /* Les deux grandes maisons de la mosaïque restent plus hautes ici aussi. */
  .home-wahou .card--big { min-height:400px; }
  .home-wahou .card__media { position:absolute; inset:0; z-index:0; min-height:0; }
  .home-wahou .card__media img { width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
  .home-wahou .card::after {
    content:""; position:absolute; inset:0; z-index:1;
    /* Contraste (vérification du 16/09) : fond sombre partout où il y a du texte. */
    background:linear-gradient(180deg, rgba(0,0,0,0) 10%, rgba(0,0,0,.42) 30%, rgba(0,0,0,.8) 52%, rgba(0,0,0,.92) 100%);
  }
  /* flex:0 : la couche de production etire le corps sur toute la carte, ce qui
     collait le texte en haut ; ici il reste en bas, sur la partie sombre. */
  .home-wahou .card__body { position:relative; z-index:2; width:100%; padding:14px 16px; display:block; flex:0 0 auto; }
  .home-wahou .card__title, .home-wahou .card__title a { color:#fff; font-size:34px; line-height:.95; }
  .home-wahou .card__title { margin-bottom:6px; text-shadow:0 1px 3px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.7); }
  .home-wahou .card__concept { color:#fff; opacity:1; font-style:normal; font-size:13px; line-height:1.45; margin-bottom:4px; text-shadow:0 1px 8px rgba(0,0,0,.85); }
  .home-wahou .card__addr { color:#fff; opacity:.86; font-size:11px; margin-bottom:10px; text-shadow:0 1px 8px rgba(0,0,0,.85); }
  .home-wahou .card__menu { text-shadow:0 1px 8px rgba(0,0,0,.85); }
  .home-wahou .card__actions { padding-top:0; gap:8px 16px; }
  .home-wahou .card__menu { color:#fff; text-decoration-color:var(--yellow); }
  .home-wahou .card__book { background:var(--yellow); color:var(--ink); }
  .home-wahou .card__tag { left:auto; right:12px; top:12px; max-width:none; font-size:9px; letter-spacing:.08em; padding:5px 8px; z-index:2; }
  .home-wahou .card__badge { left:12px; top:12px; z-index:2; }
  .home-wahou .card--new .card__tag { top:12px; }

}

/* ---------- Focus clavier sur les cartes photo (toutes largeurs) ---------- */
/* Le contour général du thème est noir : invisible sur une photo sombre. */
.home-wahou .card a:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.home-wahou .card .card__book:focus-visible { outline:3px solid #fff; outline-offset:3px; }
/* Cadre jaune sur la carte active, peint au-dessus de la photo. */
.home-wahou .card:focus-within::after { box-shadow:inset 0 0 0 3px var(--yellow); }

/* ---------- Bandeau de plats : clavier et animations réduites ---------- */
.home-wahou .foodporn__track { padding-block:6px; }
.home-wahou .foodporn__marquee:focus-within .foodporn__track { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) {
  .home-wahou .dishcard[aria-hidden="true"] { display:none; }
}