/* ===== Page « Récupérer mes vidéos » — identité v2 ===== * Palette pastel du site (turquoise, aqua, corail, pêche, coquille), * verre dépoli, angles arrondis, typo Geist + Pixelify Sans (display). * Page autonome (aucune dépendance à l'ancien site). */ :root { --shell: #fff5f0; --teal: #7bc6c9; --aqua: #a5e1df; --coral: #ffb199; --coral-deep: #ef8f6e; --peach: #ffcdb2; --teal-ink: #2e7377; --ink: #26393c; --muted: #5d7275; --line: rgba(38, 57, 60, 0.16); --sans: "Geist", -apple-system, "Helvetica Neue", sans-serif; --display: "Pixelify Sans", "Geist", monospace; } * { box-sizing: border-box; } html, body { margin: 0; } /* retour de paiement (voir le script de recuperer.html) : masque le formulaire de code et affiche la galerie (encore vide) dès le tout premier rendu, avant même que recuperer.js ait fini de charger — évite un flash de l'écran de code sur une connexion lente. */ html.is-returning #gate { display: none !important; } html.is-returning #videosSection { display: block !important; } body { color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; background: radial-gradient(58% 46% at 14% 6%, rgba(165, 225, 223, 0.55), transparent 70%), radial-gradient(50% 42% at 88% 30%, rgba(255, 205, 178, 0.5), transparent 72%), radial-gradient(46% 40% at 30% 96%, rgba(255, 177, 153, 0.28), transparent 70%), var(--shell); background-attachment: fixed; min-height: 100vh; } /* --- barre haute (verre) --- */ .topbar { position: sticky; top: 14px; z-index: 20; display: flex; align-items: center; justify-content: space-between; width: min(1100px, calc(100% - 32px)); margin: 14px auto 0; padding: 12px 22px; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 999px; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 12px 32px rgba(123, 198, 201, 0.16); } .brand { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--ink); text-decoration: none; } .topbar-right { display: flex; align-items: center; gap: 14px; } .lang-switch { display: inline-flex; gap: 2px; } .lang-switch .lang-btn { border: none; background: none; font-size: 1.05rem; line-height: 1; padding: 4px 5px; cursor: pointer; border-radius: 999px; opacity: 0.5; transition: opacity 0.25s ease, transform 0.25s ease; } .lang-switch .lang-btn:hover { opacity: 1; transform: translateY(-1px); } .lang-switch .lang-btn.is-active { opacity: 1; } .topbar-back { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.3s ease; white-space: nowrap; } .topbar-back:hover { color: var(--coral-deep); } /* --- structure --- */ .retrieve-main { max-width: 1080px; margin: 0 auto; padding: clamp(48px, 9vh, 100px) 24px 90px; } .eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--teal-ink); margin: 0 0 1.1rem; } h1, h2 { font-family: var(--display); font-weight: 600; margin: 0; } h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); line-height: 1.08; } h1 em { font-style: normal; color: var(--coral-deep); } h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); } /* --- étape 1 : le code (panneau de verre central) --- */ .retrieve-gate { text-align: center; width: min(640px, 100%); margin: 6vh auto 0; padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.4rem, 4vw, 3rem); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 32px; background: rgba(255, 255, 255, 0.42); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 24px 60px rgba(123, 198, 201, 0.2); } .retrieve-sub { color: var(--muted); line-height: 1.7; margin: 1.4rem auto 2.4rem; max-width: 440px; } .retrieve-sub strong { color: var(--ink); font-weight: 700; } .code-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .code-form input { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.22em; text-align: center; text-transform: uppercase; color: var(--ink); background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 999px; padding: 16px 24px; width: min(300px, 100%); outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .code-form input::placeholder { color: #a9b6b4; letter-spacing: 0.22em; } .code-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(123, 198, 201, 0.25); } /* --- boutons --- */ .btn { display: inline-block; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; padding: 17px 30px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .btn-primary { background: linear-gradient(120deg, var(--coral), var(--coral-deep)); color: #fff; box-shadow: 0 14px 30px rgba(239, 143, 110, 0.35); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(239, 143, 110, 0.45); } .btn-primary:disabled { opacity: 0.55; cursor: default; transform: none; } .btn-ghost { background: rgba(255, 255, 255, 0.5); color: var(--ink); border-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn-ghost:hover { border-color: var(--teal); color: var(--teal); } .code-error { min-height: 1.4em; margin: 1.3rem 0 0; color: #d26a4b; font-size: 0.9rem; font-weight: 500; } /* --- étape 2 : galerie --- */ .videos-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 2.4rem; text-align: left; } .videos-expiry { margin: 0.5rem 0 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral-deep); } .videos-actions { display: flex; gap: 12px; flex-wrap: wrap; } .videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(16px, 2.4vw, 28px); } .video-card { border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 22px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; box-shadow: 0 14px 36px rgba(123, 198, 201, 0.14); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .video-card:hover { border-color: var(--coral); transform: translateY(-3px); box-shadow: 0 24px 52px rgba(239, 143, 110, 0.22); } .video-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--aqua); cursor: zoom-in; overflow: hidden; } .video-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .video-zoom { position: absolute; right: 10px; bottom: 10px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 12px; background: rgba(38, 57, 60, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 1rem; line-height: 1; padding: 8px 10px; cursor: zoom-in; opacity: 0; transition: opacity 0.3s ease; } .video-card:hover .video-zoom { opacity: 1; } .video-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; } .video-card-name { font-size: 0.85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .video-card-dl { flex-shrink: 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--coral-deep); text-decoration: none; } .video-card-dl:hover { text-decoration: underline; } /* --- visionneuse --- */ .viewer { position: fixed; inset: 0; z-index: 50; background: rgba(38, 57, 60, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 24px; } .viewer[hidden] { display: none; } .viewer-panel { background: rgba(255, 245, 240, 0.92); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 24px; overflow: hidden; width: min(1080px, 100%); max-height: 92vh; display: flex; flex-direction: column; } .viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); } .viewer-name { font-size: 0.85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .viewer-close { border: none; background: none; font-size: 1.1rem; color: var(--ink); cursor: pointer; padding: 4px 8px; border-radius: 999px; } .viewer-close:hover { color: var(--coral-deep); } .viewer-panel video { width: 100%; max-height: 68vh; background: #0d1b1d; display: block; } .viewer-foot { padding: 14px 20px; text-align: right; border-top: 1px solid var(--line); } /* --- pied de page --- */ .footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: min(1100px, calc(100% - 32px)); margin: 0 auto 22px; padding: 18px 26px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 0.8rem; color: var(--muted); } .brand-footer { font-size: 1rem; } .footer a { color: var(--muted); text-decoration: none; } .footer a:hover { color: var(--coral-deep); } /* ===== Sélection + panier + paiement (vidéos & photos) ===== */ .pick-hint { margin: -0.6rem 0 1.8rem; font-size: 0.9rem; color: var(--muted); } /* bannière « paiement confirmé » */ .paid-banner { display: flex; flex-direction: column; gap: 4px; margin: 0 0 1.8rem; padding: 16px 22px; border: 1px solid rgba(123, 198, 201, 0.5); border-radius: 18px; background: linear-gradient(120deg, rgba(165, 225, 223, 0.55), rgba(255, 255, 255, 0.5)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .paid-banner[hidden] { display: none; } .paid-banner strong { font-family: var(--display); font-size: 1.1rem; color: var(--teal-ink); } .paid-banner span { font-size: 0.9rem; color: var(--muted); } /* carte média (dérivée de .video-card, cliquable pour sélectionner) */ .media-card { position: relative; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 22px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; cursor: pointer; box-shadow: 0 14px 36px rgba(123, 198, 201, 0.14); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } /* uniquement sur appareil à souris/trackpad réel : sur tactile, un ":hover" qui change l'apparence force Safari/Chrome mobile à traiter le PREMIER tap comme un survol (et le SECOND comme le vrai clic) — d'où le bug "il faut cliquer deux fois pour sélectionner" sur mobile. Gainé dans la media query, le clic reste immédiat sur tactile tout en gardant l'effet sur desktop. */ @media (hover: hover) { .media-card:hover { border-color: var(--coral); transform: translateY(-3px); box-shadow: 0 24px 52px rgba(239, 143, 110, 0.22); } .media-card.is-paid:hover { transform: none; } } .media-card.is-selected { border-color: var(--coral-deep); box-shadow: 0 0 0 3px rgba(239, 143, 110, 0.35), 0 20px 46px rgba(239, 143, 110, 0.28); } /* cartes de la page de livraison (après paiement) : pas de sélection */ .media-card.is-paid { cursor: default; border-color: rgba(123, 198, 201, 0.5); } .media-card.is-paid .media-foot { min-height: 56px; } .media-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--aqua); overflow: hidden; } .media-thumb video, .media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* voile corail léger quand sélectionné */ .media-card.is-selected .media-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(239, 143, 110, 0.18); pointer-events: none; } /* pastille de sélection (coin haut-gauche) */ .media-badge { position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.9); background: rgba(38, 57, 60, 0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; } .media-badge::after { content: "✓"; color: #fff; font-size: 0.8rem; font-weight: 700; opacity: 0; transform: scale(0.5); transition: opacity 0.2s ease, transform 0.2s ease; } .media-card.is-selected .media-badge { background: linear-gradient(120deg, var(--coral), var(--coral-deep)); border-color: #fff; } .media-card.is-selected .media-badge::after { opacity: 1; transform: scale(1); } /* type de média (coin haut-droit) */ .media-kind { position: absolute; top: 8px; right: 10px; font-size: 0.95rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); pointer-events: none; } /* toujours visible (pas seulement au survol) : sur tactile, le survol ne se déclenche jamais, donc un bouton "opacity:0 sauf hover" restait invisible et injoignable sur mobile — c'est pourtant l'action la plus intuitive pour voir la vidéo en plein écran, elle doit être visible d'emblée partout. */ .media-zoom { position: absolute; right: 10px; bottom: 10px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 12px; background: rgba(38, 57, 60, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 1.15rem; line-height: 1; padding: 9px 11px; cursor: zoom-in; box-shadow: 0 4px 14px rgba(38, 57, 60, 0.25); transition: transform 0.2s ease, background 0.2s ease; } .media-zoom:hover { background: rgba(38, 57, 60, 0.75); transform: scale(1.08); } .media-zoom:active { transform: scale(0.95); } .media-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; min-height: 52px; } .media-name { font-size: 0.85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .media-dl { flex-shrink: 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 999px; background: linear-gradient(120deg, var(--coral), var(--coral-deep)); box-shadow: 0 8px 18px rgba(239, 143, 110, 0.35); } .media-dl:hover { transform: translateY(-1px); } /* ----- barre panier fixe (bas d'écran) ----- */ .recap-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 20px; width: min(680px, calc(100% - 28px)); padding: 14px 16px 14px 24px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; background: rgba(255, 245, 240, 0.82); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 18px 44px rgba(123, 198, 201, 0.28); } .recap-bar[hidden] { display: none; } .recap-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .recap-counts { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recap-total { font-family: var(--sans); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--teal-ink); } .recap-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .recap-clear { border: none; background: none; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); cursor: pointer; white-space: nowrap; } .recap-clear:hover { color: var(--coral-deep); } /* ----- fenêtre de validation (réutilise la visionneuse) ----- */ .checkout-panel { width: min(480px, 100%); } .checkout-body { padding: 22px 24px 6px; } .checkout-lines { list-style: none; margin: 0 0 6px; padding: 0; } .checkout-lines li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; color: var(--ink); } .checkout-lines li span:last-child { font-weight: 600; white-space: nowrap; } .checkout-lines em { font-style: normal; color: var(--teal-ink); font-size: 0.82rem; } .checkout-total { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 0 4px; } .checkout-total span { font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .checkout-total strong { font-family: var(--sans); font-weight: 700; font-size: 1.7rem; letter-spacing: -0.01em; color: var(--teal-ink); } .checkout-note { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.5; } .checkout-note a { color: var(--teal-ink); } .checkout-msg { min-height: 1.2em; margin: 0.4rem 0 0; color: #d26a4b; font-size: 0.85rem; } .checkout-foot { display: flex; gap: 12px; justify-content: flex-end; } /* aperçu photo dans la visionneuse */ #viewerImg { width: 100%; max-height: 68vh; object-fit: contain; background: #0d1b1d; display: block; } #viewerImg[hidden] { display: none; } .viewer-panel .btn.is-remove { background: rgba(255, 255, 255, 0.5); color: var(--ink); border-color: rgba(255, 255, 255, 0.8); box-shadow: none; } @media (max-width: 560px) { .videos-head { flex-direction: column; align-items: flex-start; } .code-form input { letter-spacing: 0.14em; } .footer { border-radius: 24px; justify-content: center; text-align: center; } /* mobile : on masque « Lino Sanchez » dans la barre haute (demandé) */ .topbar { justify-content: flex-end; } .topbar .brand { display: none; } /* la barre panier reste lisible sur petit écran */ .recap-bar { border-radius: 22px; gap: 12px; padding: 12px 14px; } .recap-actions { gap: 8px; } .recap-clear { display: none; } /* on garde l'essentiel : total + payer */ .retrieve-main { padding-bottom: 130px; } /* place pour la barre fixe */ }