/* L'explication video reste independante des formulaires et des autres fenetres. */
.reloge-identite-video,
.reloge-identite-video * { box-sizing: border-box; }
.reloge-identite-video { width: 112px; max-width: 100%; margin: .5rem 0; }
.reloge-identite-video--tarif { display: inline-block; margin: .7rem 0 .15rem; vertical-align: top; }
.reloge-identite-video .reloge-identite-video-apercu {
    display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; gap: .4rem;
    width: 100%; min-height: 0; height: auto; margin: 0; padding: 0; border: 0;
    border-radius: 0; background: transparent; color: #245f69; box-shadow: none; text-align: center;
    font: inherit; font-weight: 400; line-height: 1.3; letter-spacing: normal; text-transform: none;
    text-decoration: none; white-space: normal; cursor: pointer;
}
.reloge-identite-video .reloge-identite-video-apercu:hover { background: transparent; color: #174952; }
.reloge-identite-video .reloge-identite-video-affiche { display: block; position: relative; width: 80px; }
.reloge-identite-video .reloge-identite-video-affiche img { display: block; width: 80px; height: 142px; margin: 0; border: 0; border-radius: 6px; object-fit: contain; background: transparent; }
.reloge-identite-video .reloge-identite-video-affiche .reloge-identite-video-play { display: grid; place-items: center; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border-radius: 50%; transform: translate(-50%, -50%); background: #245f69; color: #fff; font-size: 16px; padding-left: 2px; box-shadow: 0 2px 9px #0003; }
.reloge-identite-video .reloge-identite-video-apercu:hover .reloge-identite-video-play { background: #174952; }
.reloge-identite-video .reloge-identite-video-action { color: #245f69; font-size: .76rem; font-weight: 700; line-height: 1.35; text-decoration: underline; text-underline-offset: .15em; }
/* Le cadre orange existant contient le texte et la miniature, sans carte imbriquee. */
.reloge-identite-garantie.reloge-identite-garantie--video {
    display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 1rem;
    width: 100%; max-width: 100%;
}
.reloge-identite-garantie--video .reloge-identite-garantie-texte { display: flex; align-items: flex-start; gap: .55rem; min-width: 0; font-size: 1rem; line-height: 1.6; }
.reloge-identite-garantie--video .reloge-identite-garantie-texte > .reloge-espace-icone { flex: 0 0 1.1rem; }
.reloge-identite-garantie--video .reloge-identite-garantie-texte > span { min-width: 0; }
.reloge-identite-garantie--video > .reloge-identite-video { justify-self: end; margin: 0; }
/* Le lien reste fonctionnel sans JS ou sans prise en charge de dialog. */
.reloge-identite-video .reloge-identite-video-enrichi { display: none; }
.reloge-identite-video-js .reloge-identite-video .reloge-identite-video-repli { display: none; }
.reloge-identite-video-js .reloge-identite-video .reloge-identite-video-enrichi { display: grid; }
.reloge-identite-video :focus-visible { outline: 3px solid #fd6905; outline-offset: 3px; }
dialog.reloge-identite-video-fenetre {
    position: fixed; inset: 0; width: min(30rem, calc(100vw - 1.5rem)); max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); margin: auto; padding: 1rem;
    border: 0; border-radius: 16px; background: #fff; color: #20383d; overflow: auto;
    box-shadow: 0 12px 50px #0005; text-align: left; box-sizing: border-box;
}
dialog.reloge-identite-video-fenetre:not([open]) { display: none; }
dialog.reloge-identite-video-fenetre::backdrop { background: rgba(13, 32, 36, .72); }
dialog.reloge-identite-video-fenetre h2,
main.reloge-espace .reloge-espace__corps dialog.reloge-identite-video-fenetre h2 { margin: 0 3rem .8rem 0; color: #245f69; font-size: 1.12rem; line-height: 1.25; }
dialog.reloge-identite-video-fenetre .reloge-identite-video-fermer {
    position: absolute; top: .45rem; right: .45rem; display: grid; place-items: center;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0;
    border: 1px solid #d5e3e0; border-radius: 50%; background: #f0f5f3; color: #20383d;
    box-shadow: none; font: inherit; font-size: 1.65rem; line-height: 1; cursor: pointer;
}
dialog.reloge-identite-video-fenetre .reloge-identite-video-fermer:hover { background: #e1efeb; }
dialog.reloge-identite-video-fenetre .reloge-identite-video-lecteur {
    display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
    max-height: calc(100vh - 10rem); max-height: calc(100dvh - 10rem);
    margin: 0 auto; border-radius: 9px; background: #163f47; object-fit: contain;
}
dialog.reloge-identite-video-fenetre .reloge-identite-video-detail { display: block; margin-top: .65rem; color: #245f69; font-size: .85rem; line-height: 1.4; text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 640px) {
    .reloge-identite-garantie.reloge-identite-garantie--video { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    .reloge-identite-garantie--video > .reloge-identite-video { justify-self: center; }
}
