/* La Marmite Dauphinoise — interactions avec le visiteur (29/09/2026).
   Chargé après site.css. Les états cachés n'existent que si un script a posé .interactions-actives sur <html>
   (assets/js/avant-rendu.js, avant le premier affichage ; jamais quand le visiteur demande moins d'animations). */

html { scrollbar-gutter: stable; }

/* ---------- Visionneuse : la photo en grand (sert aussi sans animation) ---------- */
.agrandissable { cursor: zoom-in; }
.agrandissable:focus-visible { outline: 2px solid var(--dore); outline-offset: 4px; }
.visionneuse-ouverte { overflow: hidden; }
.visionneuse {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 1rem; border: 0; overflow: hidden;
  background: rgba(22, 10, 12, 0.94); color: #FFFFFF; cursor: zoom-out;
}
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse::backdrop { background: transparent; }
.visionneuse__cadre { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.visionneuse__image {
  display: block; max-width: none; object-fit: cover;
  outline: 1px solid rgba(255, 255, 255, 0.55); outline-offset: -12px;
  box-shadow: 0 34px 90px -30px rgba(0, 0, 0, 0.85);
}
.visionneuse__legende { max-width: 60ch; text-align: center; font-style: italic; font-size: 1.15rem; line-height: 1.4; color: rgba(255, 255, 255, 0.94); }
.visionneuse__legende .credit { margin-top: 0.25rem; color: rgba(255, 255, 255, 0.68); }
.visionneuse__fermer {
  position: absolute; top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem;
  display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
  color: #FFFFFF; background: rgba(22, 10, 12, 0.35);
  border: 1px solid rgba(217, 189, 132, 0.75); border-radius: 50%; cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.visionneuse__fermer:hover { background: var(--bordeaux); border-color: var(--bordeaux); }
.visionneuse__fermer svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Apparitions au défilement ---------- */
  .interactions-actives .apparait {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.8s var(--ease) var(--retard, 0s), transform 0.9s var(--ease) var(--retard, 0s);
  }
  .interactions-actives .apparait.est-visible { opacity: 1; transform: none; }
  .interactions-actives .apparait.est-pose { transition: none; }
  .interactions-actives .bouton.apparait {
    transition: opacity 0.8s var(--ease) var(--retard, 0s), transform 0.9s var(--ease) var(--retard, 0s),
                background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  }
  .interactions-actives .bouton.apparait.est-pose {
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  }

  /* les photos montent derrière un cache, puis se posent */
  .interactions-actives .devoile {
    clip-path: inset(30% -12% -12% -12%); opacity: 0.001;
    transition: clip-path 1.2s var(--ease) var(--retard, 0s), opacity 0.7s var(--ease) var(--retard, 0s);
  }
  .interactions-actives .devoile.est-visible { clip-path: inset(-12% -12% -12% -12%); opacity: 1; }
  .interactions-actives .devoile.est-pose { clip-path: none; transition: none; }
  .interactions-actives .devoile:not(.pilote):not(.est-pose) img { transform: scale(1.09); transition: transform 1.6s var(--ease) var(--retard, 0s); }
  .interactions-actives .devoile.est-visible:not(.pilote):not(.est-pose) img { transform: none; }

  /* le repère marmite oscille quand sa section arrive */
  .interactions-actives .fleuron.est-visible > * {
    transform-box: view-box; transform-origin: 50% 100%;
    animation: fleuron-salut 1.2s ease-in-out 0.35s both;
  }
  @keyframes fleuron-salut {
    0%, 100% { transform: none; }
    25% { transform: rotate(-7deg); }
    55% { transform: rotate(5deg); }
    80% { transform: rotate(-2deg); }
  }

  /* ---------- Ouverture : le titre monte mot à mot ---------- */
  /* avant le script : caché ; si le script ne vient pas, tout réapparaît de lui-même */
  .interactions-actives .ouverture:not(.intro):not(.sans-intro) :is(h1, .ouverture__lieu, .ouverture__actions) {
    opacity: 0; animation: ouverture-secours 0.5s ease 2.6s forwards;
  }
  @keyframes ouverture-secours { to { opacity: 1; } }
  .interactions-actives .ouverture h1 .mot {
    display: inline-block; overflow: hidden; vertical-align: top;
    padding: 0.08em 0.04em 0.14em; margin: -0.08em -0.04em -0.14em;
  }
  .interactions-actives .ouverture h1 .mot > span {
    display: inline-block; transform: translateY(115%);
    transition: transform 1.1s var(--ease) var(--retard, 0s);
  }
  .interactions-actives .ouverture.est-prete h1 .mot > span { transform: none; }
  .interactions-actives .ouverture__photo { display: block; position: absolute; inset: 0; z-index: -2; will-change: transform; }

  /* ---------- Photos vivantes : le filet blanc reste fixe, l'image glisse dessous ---------- */
  .interactions-actives .pilote img { outline-color: transparent; transition: none; will-change: transform; }
  .interactions-actives .pilote::before {
    content: ""; position: absolute; inset: 11px; z-index: 1; pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: inset 0.5s var(--ease);
  }

  /* sous la souris : la photo s'incline, un reflet chaud suit le pointeur, le filet se resserre */
  .interactions-souris .reagit { transform-origin: 50% 50%; }
  .interactions-souris .maison__galerie figure, .interactions-souris .maison__arche, .interactions-souris .ardoise { position: relative; }
  .interactions-souris .reagit::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 246, 230, 0.42), rgba(255, 246, 230, 0) 52%);
    mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.5s var(--ease);
  }
  .interactions-souris .reagit.survol::after { opacity: 1; }
  .interactions-souris .pilote.survol::before { inset: 17px; }
  .interactions-souris .mosaique__photo img, .interactions-souris .vedette__photos img { transition: filter 0.6s var(--ease); }
  .interactions-souris .maison__galerie img { transition: filter 0.6s var(--ease), outline-offset 0.5s var(--ease); }
  .interactions-souris .maison__galerie figure.survol img { outline-offset: -13px; }
  .interactions-souris .service__photo.reagit {
    transition: clip-path 1.2s var(--ease) var(--retard, 0s), opacity 0.7s var(--ease) var(--retard, 0s), outline-offset 0.5s var(--ease);
  }
  .interactions-souris .service__photo.reagit.est-pose { transition: outline-offset 0.5s var(--ease); }
  .interactions-souris .service__photo.survol { outline-offset: -17px; }
  /* les autres photos du groupe s'effacent un peu */
  .interactions-souris .mosaique:has(.mosaique__photo:hover) .mosaique__photo:not(:hover) img,
  .interactions-souris .maison__galerie:has(figure:hover) figure:not(:hover) img { filter: brightness(0.78) saturate(0.85); }

  /* ---------- La carte ---------- */
  /* fermée, la couverture s'entrouvre quand on la survole */
  .interactions-souris .carte-imprimee.est-fermee .couverture:hover {
    transform: rotateY(-8deg);
    box-shadow: inset 16px 0 22px -12px rgba(0, 0, 0, 0.5), 24px 26px 46px -20px rgba(40, 8, 14, 0.55);
    transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
  }
  /* ouverte : un filet doré souligne le plat survolé, sa photo suit la souris */
  .interactions-souris .plats li { position: relative; }
  .interactions-souris .plats li::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--dore); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 0.55s var(--ease);
  }
  .interactions-souris .plats li:hover::after { transform: scaleX(1); }
  .interactions-souris .plat__prix { transition: color 0.3s var(--ease); }
  .interactions-souris .plats li:hover .plat__prix { color: var(--bordeaux-fonce); }
  .interactions-souris .choix li { transition: color 0.3s var(--ease); }
  .interactions-souris .choix li:hover { color: var(--bordeaux); }

  /* ---------- Curseur d'accompagnement ---------- */
  .curseur-anneau {
    position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1px solid var(--dore); border-radius: 50%; opacity: 0;
    transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease),
                background-color 0.35s var(--ease), border-color 0.35s var(--ease), opacity 0.3s var(--ease);
  }
  .curseur-anneau.est-visible { opacity: 0.95; }
  .visionneuse-ouverte .curseur-anneau { opacity: 0; }
  .curseur-anneau.sur-lien, .curseur-anneau.sur-appel { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(124, 29, 43, 0.08); }
  .curseur-anneau.a-texte { width: 78px; height: 78px; margin: -39px 0 0 -39px; border-color: rgba(255, 255, 255, 0.92); }
  .curseur-anneau__etiquette {
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.1rem 0.6rem 0.2rem; white-space: nowrap;
    background: var(--nappe); color: var(--bordeaux); border: 1px solid var(--dore); border-radius: 2px;
    font-size: 1rem; letter-spacing: 0.08em; font-variant-caps: all-small-caps;
    opacity: 0; transition: opacity 0.25s var(--ease);
  }
  .curseur-anneau__etiquette svg { display: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .curseur-anneau.sur-appel .curseur-anneau__etiquette svg { display: block; }
  .curseur-anneau.a-texte .curseur-anneau__etiquette, .curseur-anneau.sur-appel .curseur-anneau__etiquette { opacity: 1; }

  /* ---------- Défilement ---------- */
  /* À la souris et au clavier, le script mène la page de section en section (glissement doux, voir
     interactions.js). Au doigt (téléphone, tablette) : défilement libre, sans aucun calage. Le calage du
     navigateur (scroll-snap) ramenait la page en arrière ou la lançait plus loin toute seule après un
     glissé : bug signalé le 08/11/2026, retiré. */
  html.defilement-aimante { scroll-snap-type: none; }
  @media (max-width: 899px) { html.defilement-aimante { scroll-padding-bottom: 3.7rem; } }

  /* ---------- Filet de lecture ---------- */
  .progression-lecture {
    position: fixed; left: 0; top: 0; z-index: 50; width: 100%; height: 2px;
    background: var(--dore); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  }
}

@media print {
  .apparait, .devoile, .ouverture h1, .ouverture__texte > * { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
  .progression-lecture, .curseur-anneau, .visionneuse { display: none !important; }
}