/* Page « Vidéos » (maquette : Exemple 75 ; éléments : Exemples 76 à 79 ; fabriquée par H24ROULETTE-ACCUEIL-FABRIQUE\videos.py ;
   comportement : videos.js ; vidéos : videos.json). Chargée après accueil.css, strategies.css, pied.css, infos.css, simulateur.css. */

:root { --vd-or: #f7c948; --vd-or-clair: #ffe27a; --vd-rouge: #e3172f; --vd-cadre: rgba(247, 201, 72, .75); }

/* =========================================================
   Bandeau « vidéothèque »
   ========================================================= */
.vd-bandeau {
  position: relative; overflow: hidden; margin-top: 12px; height: clamp(340px, 29vw, 540px);
  display: grid; place-items: center; background: #050a22;
  border-top: 1px solid rgba(70, 150, 255, .35); border-bottom: 1px solid rgba(247, 201, 72, .45);
}
.vd-bandeau picture { display: contents; }
.vd-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; z-index: 0; }
.vd-bandeau::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 34% 52% at 50% 52%, rgba(4, 8, 24, .55), transparent 80%), linear-gradient(0deg, rgba(4, 8, 24, .55), transparent 30%);
}
.vd-femme {
  position: absolute; z-index: 2; left: max(0px, calc(50% - 820px)); bottom: 0; height: 92%; width: auto; max-width: none;
  pointer-events: none; filter: drop-shadow(0 0 22px rgba(0, 0, 0, .65)) drop-shadow(4px 0 22px rgba(247, 201, 72, .2));
}
.vd-deco-droite { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vd-clap {
  position: absolute; right: max(15vw, calc(50% - 470px)); top: 7%; width: clamp(120px, 11vw, 200px); height: auto;
  transform: rotate(-6deg); filter: drop-shadow(0 0 18px rgba(247, 201, 72, .45)) drop-shadow(0 10px 16px rgba(0, 0, 0, .6));
}
.vd-pellicule {
  position: absolute; right: -2vw; top: 3%; width: clamp(240px, 22vw, 420px); height: auto;
  filter: drop-shadow(0 0 16px rgba(120, 90, 255, .45));
}
/* Notre cylindre (vrai ordre des numéros) posé exactement sur celui du fond, qui a de faux numéros :
   le fond est aligné en bas et suit la largeur, d'où des positions en vw (centre du cylindre du fond : 97 % de la largeur). */
.vd-roue { position: absolute; width: 38vw; aspect-ratio: 1; right: -16.3vw; bottom: -12vw; perspective: 900px; }
.vd-roue-in { position: relative; width: 100%; height: 100%; transform: rotateX(60deg); filter: drop-shadow(0 -6px 24px rgba(0, 0, 0, .6)); }
.vd-roue-in .cylindre-svg { display: block; width: 100%; height: 100%; }
.vd-titre { position: relative; z-index: 3; text-align: center; padding: 0 var(--marge); margin-left: clamp(0px, 16vw, 330px); margin-right: clamp(0px, 10vw, 200px); }
.vd-titre h1 { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 20px); margin: 0; }
.vd-play {
  flex: none; display: grid; place-items: center; width: clamp(62px, 6.6vw, 112px); aspect-ratio: 1.25; border-radius: 22%;
  background: linear-gradient(180deg, #ff3448, #b4081c); border: 3px solid var(--vd-or);
  box-shadow: 0 0 22px rgba(255, 40, 60, .7), inset 0 2px 0 rgba(255, 255, 255, .35);
}
.vd-play svg.i { width: 48%; height: 48%; color: #ffe9a0; filter: drop-shadow(0 0 6px rgba(255, 210, 90, .9)); }
.vd-h1 { display: flex; flex-direction: column; align-items: flex-start; line-height: .95; }
.vd-marque {
  font-weight: 900; font-style: italic; letter-spacing: .02em; font-size: clamp(1.25rem, 2.5vw, 2.6rem);
  background: linear-gradient(180deg, #fff 0%, #eef2f8 40%, #98a4b8 58%, #e9eef6 80%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .7));
}
.vd-mot {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-weight: 700; font-style: italic;
  font-size: clamp(3rem, 6.6vw, 7rem); letter-spacing: .01em;
  background: linear-gradient(180deg, #fff7c8 0%, #ffd94f 38%, #e09a10 58%, #ffcf45 78%, #fff1a6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #3b2000) drop-shadow(0 0 16px rgba(255, 190, 60, .45));
}
.vd-ruban {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .1em .45em; margin: clamp(10px, 1.2vw, 18px) 0 0;
  padding: .35em 1.4em; font-style: italic; font-weight: 700; font-size: clamp(.95rem, 1.45vw, 1.5rem); color: #fff;
  background: linear-gradient(180deg, #e8243a, #a50a1c); border: 2px solid rgba(255, 120, 130, .9); border-radius: 10px;
  transform: skewX(-8deg); box-shadow: 0 0 18px rgba(255, 30, 50, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.vd-ruban > * { transform: skewX(8deg); }
.vd-ruban b { color: var(--vd-or-clair); }
.vd-avert { display: flex; align-items: center; justify-content: center; gap: .45em; margin: 12px 0 0; font-size: .86rem; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 6px #000; }
.vd-avert svg.i { flex: none; width: 1.1em; height: 1.1em; color: var(--cyan); }

/* =========================================================
   Page : filtres, vidéo à la une, bibliothèque, vidéos courtes
   ========================================================= */
/* z-index 3 : au-dessus du pied de page (z-index 2 sur ordinateur), pour que le lecteur flottant reste devant lui */
.vd { position: relative; z-index: 3; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--marge); }
.vd-sansjs { margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--vd-cadre); background: rgba(5, 10, 34, .8); }

.vd-filtres { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; }
.vd-cats { flex: 1; min-width: 0; }
.vd-cats ul {
  display: flex; gap: 6px; margin: 0; padding: 6px; list-style: none; border-radius: 16px; overflow-x: auto; scrollbar-width: none;
  border: 1.5px solid rgba(70, 150, 255, .6); background: linear-gradient(180deg, rgba(12, 26, 70, .9), rgba(4, 10, 34, .92));
  box-shadow: 0 0 14px rgba(47, 134, 255, .3);
}
.vd-cats ul::-webkit-scrollbar { display: none; }
.vd-cats li { flex: 1 0 auto; }
.vd-cats button {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .45em; padding: .55em .9em; border-radius: 12px;
  border: 2px solid transparent; background: none; color: #fff; font-weight: 700; font-size: clamp(.84rem, .95vw, 1rem); white-space: nowrap; cursor: pointer;
}
.vd-cats button svg.i { width: 1.35em; height: 1.35em; color: #d6e4ff; }
.vd-cats button:hover { background: rgba(47, 134, 255, .16); }
.vd-cats button[aria-pressed="true"] {
  color: var(--vd-or); border-color: var(--vd-or); background: radial-gradient(ellipse at 50% 120%, rgba(247, 201, 72, .28), rgba(247, 201, 72, .05));
  box-shadow: 0 0 12px rgba(247, 201, 72, .45);
}
.vd-cats button[aria-pressed="true"] svg.i { color: var(--vd-or); }
.vd-recherche {
  flex: 0 0 clamp(200px, 20vw, 280px); display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 46px; border-radius: 14px;
  border: 1.5px solid rgba(70, 150, 255, .7); background: rgba(4, 10, 34, .9); box-shadow: 0 0 12px rgba(47, 134, 255, .3);
}
.vd-recherche:focus-within { border-color: var(--vd-or); box-shadow: 0 0 14px rgba(247, 201, 72, .45); }
.vd-recherche svg.i { flex: none; width: 1.2em; height: 1.2em; color: #cfe0ff; }
.vd-recherche input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #fff; font: inherit; font-size: .95rem; outline: none; }
.vd-recherche input::placeholder { color: rgba(220, 230, 255, .6); }

/* ---------- Vidéo à la une ---------- */
.vd-une {
  position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(18px, 2.4vw, 34px); align-items: center;
  margin: 22px 0 0; padding: clamp(14px, 1.6vw, 22px); border-radius: 18px; overflow: hidden;
  border: 1.5px solid rgba(70, 150, 255, .45); background: radial-gradient(ellipse at 85% 50%, rgba(247, 201, 72, .1), transparent 55%), var(--cadre-fond);
  box-shadow: 0 0 18px rgba(47, 134, 255, .25);
}
.vd-cadre { position: relative; aspect-ratio: 16 / 9; }
.vd-ecran {
  position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: #02040e;
  border: 2px solid var(--vd-cadre); box-shadow: 0 0 22px rgba(247, 201, 72, .35), 0 12px 26px rgba(0, 0, 0, .6);
}
.vd-ecran > img.vd-affiche, .vd-vis-ecran > img.vd-affiche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-ecran iframe, .vd-vis-ecran iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vd-yt { position: absolute; inset: 0; background: #000; }
.vd-objet { position: absolute; inset: 0; display: grid; place-items: center; }
.vd-objet img { width: 62%; height: 78%; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6)); }
.vd-fond-or { background: radial-gradient(ellipse at 50% 60%, rgba(247, 201, 72, .35), transparent 65%), linear-gradient(160deg, #1b1550, #070b26); }
.vd-fond-bleu { background: radial-gradient(ellipse at 50% 60%, rgba(60, 150, 255, .4), transparent 65%), linear-gradient(160deg, #0b2a66, #050a22); }
.vd-fond-violet { background: radial-gradient(ellipse at 50% 60%, rgba(170, 90, 255, .42), transparent 65%), linear-gradient(160deg, #2d1060, #08061e); }
.vd-fond-vert { background: radial-gradient(ellipse at 50% 60%, rgba(50, 200, 110, .38), transparent 65%), linear-gradient(160deg, #0c4a2c, #04150c); }
/* Grand bouton de lecture et voile « Bientôt » */
.vd-gros-lire {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  width: clamp(64px, 9vw, 104px); aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; background: rgba(8, 12, 30, .55);
  color: #fff; cursor: pointer; box-shadow: 0 0 22px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 255, 255, .25); transition: transform .2s, background .2s;
}
.vd-gros-lire:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(227, 23, 47, .75); }
.vd-gros-lire svg.i { width: 46%; height: 46%; margin-left: 8%; }
.vd-voile {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px;
  text-align: center; background: linear-gradient(0deg, rgba(3, 6, 20, .88), rgba(3, 6, 20, .45));
}
.vd-voile strong { font-size: clamp(1.05rem, 1.6vw, 1.45rem); color: #fff; }
.vd-voile p { margin: 0; max-width: 34em; font-size: .92rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.vd-badge-bientot {
  display: inline-block; padding: .3em .9em; border-radius: 999px; font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: #1a1200; background: linear-gradient(180deg, #ffe680, #f0b820); box-shadow: 0 0 12px rgba(247, 201, 72, .6);
}
.vd-accord { justify-content: center; background: rgba(3, 6, 20, .9); }
.vd-accord .vd-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vd-accord label { display: flex; align-items: center; gap: .5em; font-size: .86rem; color: rgba(255, 255, 255, .85); cursor: pointer; }
.vd-accord a { color: #9fd0ff; font-size: .86rem; }
.vd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .6em 1.2em; border-radius: 12px; font-weight: 800; cursor: pointer;
  color: #fff; border: 2px solid #ff7b86; background: linear-gradient(180deg, #ff3a4c, #c80d20); box-shadow: 0 0 14px rgba(255, 30, 50, .55);
}
.vd-btn.discret { border-color: rgba(255, 255, 255, .6); background: rgba(5, 10, 30, .7); box-shadow: none; }
.vd-btn svg.i { width: 1.1em; height: 1.1em; }
/* Lecteur flottant (seulement si le visiteur l'a coché) */
.vd-ecran.vd-flotte {
  position: fixed; z-index: 60; inset: auto 16px 16px auto; width: min(380px, calc(100vw - 32px)); aspect-ratio: 16 / 9; height: auto;
  box-shadow: 0 0 22px rgba(247, 201, 72, .5), 0 14px 30px rgba(0, 0, 0, .75);
}
.vd-mini { position: absolute; z-index: 2; top: 6px; right: 6px; display: none; gap: 6px; }
.vd-flotte .vd-mini { display: flex; }
.vd-mini button {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8);
  background: rgba(4, 8, 24, .85); color: #fff; cursor: pointer;
}
.vd-mini svg.i { width: 16px; height: 16px; }

.vd-info { position: relative; z-index: 1; padding-right: clamp(0px, 7vw, 120px); }
.vd-etiquette {
  display: inline-block; margin: 0 0 8px; padding: .25em .85em; border-radius: 8px; font-weight: 900; font-size: .82rem; letter-spacing: .05em;
  text-transform: uppercase; color: #1a1200; background: linear-gradient(180deg, #ffe680, #f0b820); box-shadow: 0 0 12px rgba(247, 201, 72, .55);
}
.vd-info h2 {
  margin: 0 0 8px; font-style: italic; font-weight: 900; font-size: clamp(1.4rem, 2.2vw, 2.2rem); line-height: 1.1; color: #fff;
  text-shadow: 0 0 14px rgba(120, 170, 255, .45);
}
.vd-desc { margin: 0 0 10px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.vd-points { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; }
.vd-points li { display: flex; align-items: center; gap: .55em; color: rgba(255, 255, 255, .92); }
.vd-points svg.i { flex: none; width: 1.15em; height: 1.15em; color: var(--vd-or); }
.vd-meta { margin: 0 0 12px; font-size: .88rem; color: rgba(220, 230, 255, .8); }
.vd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.vd-regarder {
  display: inline-flex; align-items: center; gap: .55em; padding: .7em 1.5em; border-radius: 14px; font-weight: 900; font-size: clamp(1rem, 1.2vw, 1.15rem); cursor: pointer;
  color: #fff; border: 2px solid #ff7b86; background: linear-gradient(180deg, #ff3a4c, #c80d20);
  box-shadow: 0 0 16px rgba(255, 30, 50, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.vd-regarder svg.i { width: 1.2em; height: 1.2em; color: #ffe39a; }
.vd-regarder:disabled { cursor: default; color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .35); background: rgba(40, 46, 80, .7); box-shadow: none; }
.vd-regarder:disabled svg.i { color: rgba(255, 255, 255, .6); }
.vd-flottant { display: inline-flex; align-items: center; gap: .45em; font-size: .88rem; color: rgba(255, 255, 255, .85); cursor: pointer; }
.vd-flottant svg.i { width: 1.2em; height: 1.2em; color: #9fd0ff; }
.vd-flottant input { width: 18px; height: 18px; accent-color: var(--vd-or); }
.vd-flottant[hidden] { display: none; }
.vd-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; font-size: .86rem; }
.vd-liens > span { color: rgba(220, 230, 255, .75); margin-right: 2px; }
.vd-liens a {
  display: inline-flex; align-items: center; padding: .3em .75em; border-radius: 999px; text-decoration: none; color: #dfe9ff;
  border: 1px solid rgba(70, 150, 255, .6); background: rgba(8, 18, 52, .8);
}
.vd-liens a:hover { border-color: var(--vd-or); color: var(--vd-or-clair); }
.vd-une-deco { position: absolute; z-index: 0; right: -14px; bottom: -10px; width: clamp(150px, 15vw, 230px); pointer-events: none; display: flex; align-items: flex-end; }
.vd-pieces { width: 80%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)); }
.vd-jetons2 { width: 34%; height: auto; margin-left: -18%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)); }

/* ---------- Titres de section ---------- */
.vd-titre-section {
  display: flex; align-items: center; gap: .45em; margin: 0; font-style: italic; font-weight: 900; font-size: clamp(1.35rem, 2vw, 2rem);
  background: linear-gradient(180deg, #fff7c8 0%, #ffd94f 40%, #e09a10 62%, #ffcf45 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vd-titre-section svg.i { width: 1.25em; height: 1.25em; color: var(--vd-or); filter: drop-shadow(0 0 8px rgba(247, 201, 72, .6)); }
.vd-nb { font-size: .55em; font-style: normal; font-weight: 700; -webkit-text-fill-color: rgba(220, 230, 255, .75); }

/* ---------- Bibliothèque ---------- */
.vd-biblio { margin: 28px 0 0; }
.vd-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; }
.vd-carte {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  border-radius: 14px; border: 1.5px solid var(--vd-cadre); background: linear-gradient(180deg, rgba(10, 22, 64, .96), rgba(4, 9, 30, .98));
  color: #fff; box-shadow: 0 0 12px rgba(247, 201, 72, .2); transition: transform .2s, box-shadow .2s;
}
.vd-carte:hover, .vd-carte:focus-visible { transform: translateY(-3px); box-shadow: 0 0 20px rgba(247, 201, 72, .5); }
.vd-carte[aria-current="true"] { border-color: var(--vd-or-clair); box-shadow: 0 0 22px rgba(247, 201, 72, .65); }
.vd-vignette { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.vd-vignette > img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.vd-carte:hover .vd-vignette > img { transform: scale(1.04); }
.vd-lire {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 46px; aspect-ratio: 1;
  border-radius: 50%; border: 2px solid #fff; background: rgba(8, 12, 30, .6); color: #fff; box-shadow: 0 0 14px rgba(0, 0, 0, .6);
}
.vd-lire svg.i { width: 46%; height: 46%; margin-left: 8%; }
.vd-vignette .vd-badge-bientot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.vd-cat-etiq, .vd-duree {
  position: absolute; bottom: 7px; padding: .15em .55em; border-radius: 6px; font-size: .72rem; font-weight: 800;
  background: rgba(3, 6, 20, .8); border: 1px solid rgba(255, 255, 255, .25);
}
.vd-cat-etiq { left: 7px; color: var(--vd-or-clair); }
.vd-vo {
  position: absolute; top: 7px; right: 7px; padding: .1em .45em; border-radius: 6px; font-size: .7rem; font-weight: 900; letter-spacing: .04em;
  color: #fff; background: rgba(30, 90, 200, .9); border: 1px solid rgba(160, 200, 255, .8);
}
.vd-duree { right: 7px; color: #fff; }
.vd-carte-texte { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px 12px; }
.vd-carte-titre { font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
.vd-carte-desc { font-size: .84rem; line-height: 1.35; color: rgba(220, 230, 255, .82); }
.vd-aucune { margin: 14px 0 0; padding: 14px; border-radius: 12px; text-align: center; color: rgba(255, 255, 255, .85); border: 1px dashed rgba(247, 201, 72, .5); }

/* ---------- Vidéos courtes ---------- */
.vd-courtes {
  display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 28px 0 0;
  padding: 16px clamp(14px, 1.6vw, 22px); border-radius: 18px; border: 1.5px solid rgba(70, 150, 255, .45); background: var(--cadre-fond);
}
.vd-courtes[hidden] { display: none; }
.vd-courtes-intro { display: flex; align-items: center; gap: 12px; }
svg.vd-tel { flex: none; width: 54px; height: 54px; color: var(--vd-or); filter: drop-shadow(0 0 10px rgba(247, 201, 72, .6)); }
.vd-courtes-intro p { margin: 6px 0 0; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.vd-courtes-liste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.vd-courtes-liste.tout { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.vd-courtes-liste li.cache { display: none; }
.vd-court {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; overflow: hidden; cursor: pointer; border-radius: 12px;
  border: 1.5px solid var(--vd-cadre); background: #050a22; color: #fff; box-shadow: 0 0 10px rgba(247, 201, 72, .2); transition: transform .2s, box-shadow .2s;
}
.vd-court:hover, .vd-court:focus-visible { transform: translateY(-3px); box-shadow: 0 0 18px rgba(247, 201, 72, .5); }
.vd-court > img { width: 100%; height: 100%; object-fit: cover; }
.vd-court .vd-objet img { width: 82%; height: 60%; }
.vd-court .vd-lire { width: 38px; }
.vd-court .vd-badge-bientot { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: .66rem; white-space: nowrap; }
.vd-court-titre {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 7px 7px; font-size: .74rem; font-weight: 700; line-height: 1.2; text-align: left;
  background: linear-gradient(0deg, rgba(3, 6, 20, .92), transparent);
}
.vd-tout {
  display: inline-flex; align-items: center; gap: .4em; padding: .7em 1em; border-radius: 14px; cursor: pointer; text-align: center;
  font-weight: 700; color: #fff; border: 1.5px solid var(--vd-cadre); background: rgba(5, 10, 34, .9); box-shadow: 0 0 12px rgba(247, 201, 72, .3);
}
.vd-tout svg.i { width: 1.1em; height: 1.1em; color: var(--vd-or); }
.vd-tout[hidden] { display: none; }

/* ---------- Pour aller plus loin ---------- */
.vd-plus { margin: 28px 0 0; padding: 16px clamp(14px, 1.6vw, 22px); border-radius: 18px; border: 1.5px solid rgba(70, 150, 255, .45); background: var(--cadre-fond); }
.vd-plus > p { margin: 6px 0 12px; color: rgba(255, 255, 255, .85); }
.vd-plus-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vd-plus-bloc { padding: 10px 12px 12px; border-radius: 14px; border: 1px solid rgba(70, 150, 255, .45); background: rgba(5, 12, 38, .75); }
.vd-plus-bloc h3 { display: flex; align-items: center; gap: .45em; margin: 0 0 8px; font-size: 1rem; color: var(--vd-or-clair); }
.vd-plus-bloc h3 svg.i { width: 1.3em; height: 1.3em; color: var(--vd-or); }
.vd-plus-bloc ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vd-plus-bloc a {
  display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .45em .7em; border-radius: 10px; text-decoration: none;
  color: #fff; font-weight: 600; font-size: .92rem; border: 1px solid rgba(70, 150, 255, .5); background: rgba(8, 18, 52, .8);
}
.vd-plus-bloc a:hover { border-color: var(--vd-or); color: var(--vd-or-clair); }
.vd-plus-bloc a svg.i { flex: none; width: 1em; height: 1em; color: var(--vd-or); }

/* ---------- Visionneuse des vidéos courtes ---------- */
.vd-visionneuse {
  width: min(520px, 96vw); max-height: 96vh; padding: 12px; border-radius: 18px; border: 2px solid var(--vd-or); color: #fff;
  background: linear-gradient(180deg, #0c1640, #040818); box-shadow: 0 0 30px rgba(247, 201, 72, .45);
}
.vd-visionneuse::backdrop { background: rgba(2, 4, 14, .82); }
.vd-vis-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.vd-vis-tete h2 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.vd-vis-fermer, .vd-vis-nav {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, .7); background: rgba(5, 10, 30, .8); color: #fff;
}
.vd-vis-fermer svg.i, .vd-vis-nav svg.i { width: 18px; height: 18px; }
.vd-vis-nav:disabled { opacity: .35; cursor: default; }
.vd-vis-corps { display: flex; align-items: center; justify-content: center; gap: 10px; }
.vd-vis-ecran {
  position: relative; flex: 0 1 auto; height: min(78vh, 680px); aspect-ratio: 9 / 16; max-width: calc(100% - 100px); overflow: hidden;
  border-radius: 14px; border: 2px solid var(--vd-cadre); background: #02040e;
}

@media (prefers-reduced-motion: reduce) {
  .vd-carte, .vd-court, .vd-vignette > img, .vd-gros-lire { transition: none; }
}

/* =========================================================
   Tailles intermédiaires
   ========================================================= */
@media (max-width: 1199px) {
  .vd-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vd-courtes { grid-template-columns: minmax(0, 1fr) auto; }
  .vd-courtes-intro { grid-column: 1 / -1; }
}

/* =========================================================
   Tablette et téléphone
   ========================================================= */
@media (max-width: 999px) {
  /* Bandeau : le titre en haut, la femme en bas à gauche, le cylindre en bas à droite */
  .vd-bandeau { height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding: 22px 0 0; }
  .vd-titre { order: 1; }
  .vd-fond { object-position: 30% 50%; }
  .vd-titre { margin: 0; padding: 0 var(--marge); }
  .vd-pellicule, .vd-clap { display: none; }
  .vd-femme { order: 2; position: relative; display: block; left: auto; height: auto; width: min(66%, 320px); margin: 6px 0 0 -2%; }
  .vd-roue { right: -24vw; bottom: -26vw; width: 66vw; }
  .vd-filtres { flex-direction: column; align-items: stretch; gap: 10px; }
  .vd-cats ul { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .vd-cats li { flex: 0 0 auto; }
  .vd-cats li:last-child { padding-right: 24px; }
  .vd-recherche { flex-basis: auto; }
  .vd-une { grid-template-columns: minmax(0, 1fr); }
  .vd-info { padding-right: 0; }
  .vd-une-deco { display: none; }
  .vd-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vd-courtes { grid-template-columns: minmax(0, 1fr); }
  .vd-courtes-liste, .vd-courtes-liste.tout {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; scrollbar-width: thin;
  }
  .vd-courtes-liste li { flex: 0 0 clamp(120px, 30vw, 170px); scroll-snap-align: start; }
  .vd-courtes-liste li.cache { display: block; }
  .vd-tout { display: none; }
  .vd-plus-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd-ecran.vd-flotte { width: min(300px, calc(100vw - 24px)); inset: auto 12px 12px auto; }
}
@media (max-width: 640px) {
  .vd-bandeau { padding-top: 16px; }
  .vd-play { width: 54px; }
  .vd-marque { font-size: 1.15rem; }
  .vd-mot { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .vd-ruban { font-size: .86rem; padding: .3em 1em; }
  .vd-avert { font-size: .78rem; text-align: left; }
}
@media (max-width: 560px) {
  /* Bibliothèque : une vidéo par ligne, image à gauche */
  .vd-grille { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vd-carte { flex-direction: row; align-items: stretch; }
  .vd-vignette { flex: 0 0 42%; aspect-ratio: 16 / 10; }
  .vd-carte-texte { justify-content: center; padding: 8px 10px; }
  .vd-carte-titre { font-size: .95rem; }
  .vd-carte-desc { font-size: .8rem; }
  .vd-lire { width: 36px; }
  .vd-vignette .vd-badge-bientot { font-size: .62rem; padding: .25em .6em; }
  .vd-cat-etiq { display: none; }
  .vd-plus-grille { grid-template-columns: minmax(0, 1fr); }
  .vd-vis-corps { position: relative; }
  .vd-vis-ecran { max-width: 100%; height: min(72vh, 620px); }
  .vd-vis-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); }
  .vd-vis-nav[data-vis-prec] { left: 4px; }
  .vd-vis-nav[data-vis-suiv] { right: 4px; }
}