/* =====================================================================
   Page « Vidéos » (/nos_videos)
   Une scène couleur terre de nuit pour faire ressortir les courtes vidéos
   verticales, un lecteur plein écran façon « stories », puis le film YouTube
   (chargé seulement au clic) sur le fond orange du site.
   ===================================================================== */

.videos-espace-entete { height: var(--hauteur-entete, 112px); background: #2b1709; }

.page-videos {
    --videos-nuit: #2b1709;
    --videos-nuit-claire: #3d2312;
    --videos-creme: #fffaf3;
    --videos-sable: #f3e3cf;
    --videos-sable-doux: #d9c2a5;
    --videos-orange: #e7a45c;
    --videos-orange-clair: #f1b878;
    --videos-encre: #4a260b;
    --videos-vert: #0e7a3e;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    display: block;
}
.page-videos ::selection { background: var(--videos-orange); color: var(--videos-nuit); }
.visuellement-cache {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Scène : titre et vidéos ---------- */
.videos-scene {
    padding: 28px 16px 40px;
    background: var(--videos-nuit);
    color: var(--videos-sable);
}
.videos-tete, .videos-liste, .videos-astuce { max-width: 1180px; margin-left: auto; margin-right: auto; }
.videos-tete h1 {
    font-family: 'Rancho', cursive; font-weight: 400; color: var(--videos-creme);
    font-size: clamp(2.6rem, 9vw, 4.4rem); line-height: .95; letter-spacing: 0;
    text-wrap: balance;
}
.videos-tete h1 span { display: block; font-family: inherit; color: var(--videos-orange); }
.videos-intro { max-width: 42ch; margin-top: 14px; font-size: 1.05rem; line-height: 1.6; color: var(--videos-sable); }

/* Téléphone : une rangée qui défile au doigt, la carte suivante dépasse pour inviter à glisser */
.videos-liste {
    display: flex; gap: 14px;
    margin-top: 26px; margin-left: -16px; margin-right: -16px;
    padding: 6px 16px 14px; list-style: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    scrollbar-width: thin; scrollbar-color: rgba(231, 164, 92, .45) transparent;
}
.videos-liste::-webkit-scrollbar { height: 6px; }
.videos-liste::-webkit-scrollbar-thumb { background: rgba(231, 164, 92, .45); border-radius: 3px; }
.video-carte { flex: 0 0 min(66vw, 290px); list-style: none; scroll-snap-align: start; }

.page-videos .video-carte-lien {
    display: block; color: var(--videos-creme); text-decoration: none;
    border-radius: 18px; -webkit-tap-highlight-color: transparent;
}
.video-carte-lien:focus-visible { outline: 3px solid var(--videos-orange); outline-offset: 4px; }
.video-carte-media {
    position: static; /* annule « section video » de style.css (vidéos de fond) */
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: 18px; background: var(--videos-nuit-claire);
    box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .85);
    transition: transform .2s var(--ease-out);
}
.video-carte-lien { position: relative; }
.video-carte-texte { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 4px 0; }
.video-carte-titre { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.video-carte-duree { flex: none; font-size: .85rem; color: var(--videos-sable-doux); font-variant-numeric: tabular-nums; }
/* Pastille « lecture » en haut à gauche : signale une vidéo, même à l'arrêt */
.video-carte-lecture {
    position: absolute; top: 12px; left: 12px;
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(43, 23, 9, .62); color: var(--videos-creme);
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.video-carte-lecture svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.video-carte.est-active .video-carte-lecture { opacity: 0; transform: scale(.9); }

.videos-astuce { margin-top: 8px; font-size: .9rem; color: var(--videos-sable-doux); }

@media (hover: hover) and (pointer: fine) {
    .video-carte-lien:hover .video-carte-media { transform: translateY(-4px); }
}
@media (min-width: 600px) {
    .video-carte { flex-basis: min(40vw, 300px); }
}
@media (min-width: 960px) {
    .videos-scene { padding: 44px 24px 56px; }
    .videos-tete { display: grid; grid-template-columns: 1fr minmax(0, 40ch); gap: 48px; align-items: end; }
    .videos-intro { margin-top: 0; padding-bottom: 6px; }
    .videos-liste {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
        margin: 34px auto 0; padding: 6px 0 0; overflow: visible;
    }
    .videos-astuce { margin-top: 18px; }
}

/* ---------- Lecteur plein écran ---------- */
html.lecteur-ouvert { overflow: hidden; scrollbar-gutter: stable; } /* la page ne bouge pas derrière le fondu */
.lecteur {
    position: fixed; inset: 0;
    width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: #140a04; color: var(--videos-creme);
    overscroll-behavior: contain;
}
/* Fond porté par la fenêtre elle-même : elle s'ouvre et se ferme en fondu sur la page.
   (Le ::backdrop ne suit pas l'opacité de <dialog> : opaque, il couperait net.) */
.lecteur::backdrop { background: transparent; }
.lecteur[open] { animation: lecteur-fondu .2s var(--ease-out); }
@keyframes lecteur-fondu { from { opacity: 0; } }
.lecteur svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lecteur .icone-lecture path { fill: currentColor; }
.lecteur button { font: inherit; color: inherit; cursor: pointer; }
.lecteur :focus-visible { outline: 3px solid var(--videos-orange); outline-offset: 2px; }

.lecteur-scene { display: grid; place-items: center; height: 100%; }
.lecteur-cadre {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.lecteur-cadre.est-glisse { transition: none; }
.lecteur[open] .lecteur-cadre { animation: lecteur-entree .32s var(--ease-out); }
.lecteur.se-ferme { opacity: 0; transition: opacity .18s var(--ease-out); }
@keyframes lecteur-entree { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.lecteur-haut { flex: none; padding: max(12px, env(safe-area-inset-top)) 14px 8px; }
.lecteur-progres { display: flex; gap: 4px; }
.lecteur-progres-piste { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 250, 243, .28); }
.lecteur-progres-barre { display: block; height: 100%; background: var(--videos-creme); transform: scaleX(0); transform-origin: left; }
.lecteur-outils { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.lecteur-compteur { margin-right: auto; font-size: .88rem; font-weight: 600; color: var(--videos-sable); font-variant-numeric: tabular-nums; }
.lecteur-bouton {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 50%; background: transparent;
    transition: background-color .2s ease, transform .16s var(--ease-out);
}
.lecteur-bouton:active { transform: scale(.97); }
.lecteur .icone-lecture, .lecteur .icone-son { display: none; }
.lecteur.est-en-pause .icone-pause { display: none; }
.lecteur.est-en-pause .icone-lecture { display: block; }
.lecteur.avec-son .icone-muet { display: none; }
.lecteur.avec-son .icone-son { display: block; }
.lecteur.est-a-la-fin [data-lecteur-pause] { visibility: hidden; }

/* Téléphone : la vidéo et sa légende, centrées ensemble sous la barre du haut */
.lecteur-media {
    position: relative; flex: none; width: 100%; aspect-ratio: 3 / 4;
    max-height: calc(100dvh - 230px); margin-top: auto;
}
.lecteur-video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
/* Zone de toucher : gauche = précédente, droite = suivante, appui long = pause, glisser vers le bas = fermer */
.lecteur-zone { position: absolute; inset: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; -webkit-user-select: none; }

.lecteur-legende { flex: none; margin-bottom: auto; padding: 14px 18px max(18px, env(safe-area-inset-bottom)); }
.lecteur-titre { font-family: 'Rancho', cursive; font-weight: 400; font-size: 2rem; line-height: 1.05; color: var(--videos-creme); }
.lecteur-description { max-width: 46ch; margin-top: 4px; font-size: .95rem; line-height: 1.5; color: var(--videos-sable); }

/* Téléphone tenu à l'horizontale : la vidéo d'abord, la légende réduite au titre */
@media (max-height: 559px) and (orientation: landscape) {
    .lecteur-haut { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 4px; }
    .lecteur-outils { margin-top: 2px; }
    .lecteur-media { max-height: calc(100dvh - 120px); }
    .lecteur-legende { padding-top: 6px; padding-bottom: max(8px, env(safe-area-inset-bottom)); text-align: center; }
    .lecteur-titre { font-size: 1.4rem; }
    .lecteur-description { display: none; }
}

/* Flèches : ordinateur seulement (au doigt, on touche la gauche ou la droite de la vidéo) */
.lecteur-fleche { display: none; }

/* Fin de la série : invitation à réserver, sur la dernière image floutée */
.lecteur-fin {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px; text-align: center;
    background: rgba(43, 23, 9, .7);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    animation: lecteur-fin-entree .25s var(--ease-out);
}
.lecteur-fin[hidden] { display: none; }
@keyframes lecteur-fin-entree { from { opacity: 0; } }
.lecteur-fin > * { animation: lecteur-fin-texte .3s var(--ease-out) both; }
.lecteur-fin > :nth-child(2) { animation-delay: .04s; }
.lecteur-fin > :nth-child(3) { animation-delay: .08s; }
.lecteur-fin > :nth-child(4) { animation-delay: .12s; }
@keyframes lecteur-fin-texte { from { opacity: 0; transform: translateY(10px); } }
.lecteur-fin-titre { font-family: 'Rancho', cursive; font-size: 3rem; line-height: 1; color: var(--videos-creme); }
.lecteur-fin-texte { max-width: 30ch; margin-top: 10px; line-height: 1.55; color: var(--videos-sable); }
.lecteur-fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.lecteur .lecteur-fin-reserver, .lecteur .lecteur-fin-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 24px; border-radius: 999px;
    font-weight: 600; text-decoration: none;
    transition: background-color .2s ease, transform .16s var(--ease-out);
}
.lecteur .lecteur-fin-reserver { background: var(--videos-orange); color: var(--videos-nuit); }
.lecteur .lecteur-fin-whatsapp { background: var(--videos-vert); color: #fff; }
.lecteur .lecteur-fin-whatsapp svg { width: 20px; height: 20px; stroke: none; }
.lecteur-fin-reserver:active, .lecteur-fin-whatsapp:active { transform: scale(.97); }
.lecteur-fin-revoir {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 18px; padding: 10px 14px; border: 0; border-radius: 999px; background: transparent;
    font-size: .95rem; color: var(--videos-sable);
    text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(243, 227, 207, .45);
}
.lecteur-fin-revoir svg { width: 18px; height: 18px; }

@media (hover: hover) and (pointer: fine) {
    .lecteur-bouton:hover { background: rgba(255, 250, 243, .14); }
    .lecteur .lecteur-fin-reserver:hover { background: var(--videos-orange-clair); }
    .lecteur .lecteur-fin-whatsapp:hover { background: #0c8a44; }
    .lecteur-fin-revoir:hover { color: var(--videos-creme); }
}

/* Ordinateur et tablette : la vidéo au centre, encadrée, flèches de part et d'autre */
@media (min-width: 700px) and (min-height: 560px) {
    .lecteur-scene { grid-template-columns: 64px auto 64px; gap: 20px; justify-content: center; }
    .lecteur-cadre {
        --largeur: min(calc((100dvh - 210px) * .75), calc(100vw - 220px), 600px);
        width: var(--largeur); height: auto;
    }
    .lecteur-haut { padding: 0 0 10px; }
    .lecteur-media { width: var(--largeur); max-height: none; margin-top: 0; overflow: hidden; border-radius: 16px; }
    .lecteur-legende { margin-bottom: 0; padding: 14px 2px 0; }
    .lecteur-fleche {
        display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
        border: 0; border-radius: 50%; background: rgba(255, 250, 243, .1);
        transition: background-color .2s ease, opacity .2s ease, transform .16s var(--ease-out);
    }
    .lecteur-fleche svg { width: 26px; height: 26px; }
    .lecteur-fleche:hover { background: rgba(255, 250, 243, .2); }
    .lecteur-fleche:active { transform: scale(.97); }
    .lecteur-fleche:disabled { opacity: .3; cursor: default; background: rgba(255, 250, 243, .1); }
}

/* ---------- Le film de l'auberge (YouTube) ---------- */
.videos-film {
    display: grid; gap: 20px;
    padding: 44px 16px 52px;
    background: var(--videos-orange); color: var(--videos-encre);
}
.videos-film > * { width: 100%; max-width: 1180px; margin: 0 auto; }
.videos-film h2 {
    font-family: 'Rancho', cursive; font-weight: 400; color: var(--videos-encre);
    font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1; text-align: left; text-wrap: balance;
}
.videos-film-texte p { max-width: 40ch; margin-top: 10px; font-size: 1.05rem; line-height: 1.6; color: #4f2c10; }
.videos-film-cadre {
    position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px;
    background: var(--videos-nuit);
    box-shadow: 0 20px 44px -26px rgba(74, 38, 11, .85);
}
.videos-film-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.page-videos .videos-film-lancer { position: absolute; inset: 0; display: block; color: var(--videos-creme); text-decoration: none; }
.videos-film-lancer:focus-visible { outline: 3px solid var(--videos-nuit); outline-offset: 4px; border-radius: 18px; }
.videos-film-lancer img { width: 100%; height: 100%; object-fit: cover; }
.videos-film-lancer img[hidden] { display: none; } /* vignette YouTube injoignable : le fond suffit */
.videos-film-lancer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(43, 23, 9, .7), rgba(43, 23, 9, 0) 55%); }
.videos-film-play {
    position: absolute; top: 50%; left: 50%; z-index: 1;
    display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
    background: var(--videos-nuit); color: var(--videos-creme);
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .7);
    transition: transform .2s var(--ease-out), background-color .2s ease;
}
.videos-film-play svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.videos-film-mention { position: absolute; left: 18px; bottom: 16px; z-index: 1; font-weight: 600; font-size: .98rem; }
.videos-film-mention span { font-weight: 400; color: var(--videos-sable); }
@media (hover: hover) and (pointer: fine) {
    .videos-film-lancer:hover .videos-film-play { transform: scale(1.05); background: #4a260b; }
}
@media (min-width: 960px) {
    .videos-film {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: center;
        padding: 64px max(24px, calc((100% - 1180px) / 2));
    }
    .videos-film > * { max-width: none; margin: 0; }
}

/* ---------- Moins d'animations si demandé ---------- */
@media (prefers-reduced-motion: reduce) {
    .video-carte-media { transition: none; }
    .video-carte-lien:hover .video-carte-media, .videos-film-lancer:hover .videos-film-play { transform: none; }
    .videos-film-play { transition: background-color .2s ease; }
    .lecteur[open] .lecteur-cadre { animation: none; } /* le fondu de la fenêtre suffit */
    .lecteur-fin, .lecteur-fin > * { animation: lecteur-fondu .2s var(--ease-out) both; }
}