/* DA 2027 (#357) : bande « Vidéos pour aller plus loin », façade locale (vignette du site, lecteur créé au clic). Chargée avec la bande, sous html.da27 ; propriétés logiques (LTR et RTL). */
html.da27 .da-videos { padding-block: var(--da-section, 56px); }
html.da27 .da-videos__cadre { width: min(1200px, 100% - 32px); margin-inline: auto; }
html.da27 .da-videos__titre { margin: 0 0 8px; font: var(--t-h2); letter-spacing: -.02em; color: var(--c-text); }
html.da27 .da-videos__intro { margin: 0 0 24px; max-width: 62ch; color: var(--c-text-2); }
html.da27 .da-videos__note { margin: 20px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--c-text-2); }
html.da27 .da-videos__grille { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
html.da27 .da-videos__grille + .da-videos__grille { margin-block-start: 24px; }
@media (min-width: 700px) {
    html.da27 .da-videos__grille--moyen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    html.da27 .da-videos__grille--vignette { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
}
/* Pièces posées dans le corps de la page (#362) : grande, moyenne, rangée de vignettes */
html.da27 .da-videos-piece { margin-block: 32px; }
html.da27 .da-videos-piece--grand { max-width: 960px; margin-inline: auto; }
html.da27 .da-videos-piece--moyen { max-width: 640px; margin-inline: auto; }
html.da27 .da-videos-piece--vignette { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); align-items: start; }
html.da27 .da-videos-piece--vignette .da-video__titre { font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.da27 .da-video__desc { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--c-text); }
html.da27 .da-video { display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--c-surface, #fff); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; transition: box-shadow var(--dur-2, .2s) var(--ease, ease); }
html.da27 .da-video:hover { box-shadow: var(--sh-2); }
html.da27 .da-video__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0f1b27; color: #fff; }
html.da27 .da-video__media img, html.da27 .da-video__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
html.da27 .da-video__media img { transition: transform .4s ease; }
html.da27 .da-video__media:hover img { transform: scale(1.03); }
html.da27 .da-video__play { position: absolute; inset: 0; display: grid; place-items: center; width: 64px; height: 64px; margin: auto; border-radius: 50%; background: var(--c-action, #0066CC); box-shadow: 0 8px 24px rgba(15, 27, 39, .45); transition: transform .2s ease, background-color .2s ease; }
html.da27 .da-video__play svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }  /* le triangle de lecture reste tourné vers la droite en RTL */
html.da27 .da-video__media:hover .da-video__play { transform: scale(1.08); background: var(--c-action-hover, #0052A3); }
html.da27 .da-video--grand .da-video__play { width: 84px; height: 84px; }
html.da27 .da-video--grand .da-video__play svg { width: 36px; height: 36px; }
html.da27 .da-video--vignette .da-video__play { width: 44px; height: 44px; }
html.da27 .da-video--vignette .da-video__play svg { width: 20px; height: 20px; margin-left: 2px; }
html.da27 .da-video__duree { position: absolute; inset-block-end: 10px; inset-inline-end: 10px; padding: 2px 10px; border-radius: var(--r-full); background: rgba(15, 27, 39, .85); color: #fff; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; }
html.da27 .da-video__corps { display: flex; flex-direction: column; gap: 4px; padding: 4px 20px 20px; }
html.da27 .da-video__titre { margin: 0; font: var(--t-h3); letter-spacing: -.01em; color: var(--c-text); overflow-wrap: anywhere; }
html.da27 .da-video--grand .da-video__titre { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); }
html.da27 .da-video--vignette .da-video__titre { font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.da27 .da-video__meta { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--c-text-2); }
html.da27 .da-video__yt { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-block-start: 4px; color: var(--c-action); font-weight: 600; font-size: .9375rem; text-decoration: none; }
html.da27 .da-video__yt:hover { color: var(--c-action-hover); text-decoration: underline; }
html.da27 .da-video__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.da27 .da-video__media:focus-visible { outline: 3px solid var(--ui-focus, #0066CC); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { html.da27 .da-video__media img, html.da27 .da-video__play, html.da27 .da-video { transition: none; } }
@media print { html.da27 .da-videos, html.da27 .da-videos-piece { display: none; } }
/* #366 : bande de fin de page, la grande vidéo en largeur (image et texte côte à côte), les moyennes par deux, les vignettes en carrousel plein */
html.da27.js .da-videos .da-videos__grille--grand, html.da27.js .da-videos .da-videos__grille--moyen { display: grid; overflow: visible; }
html.da27.js .da-videos .da-videos__grille--grand > *, html.da27.js .da-videos .da-videos__grille--moyen > * { flex: none; }
@media (min-width: 700px) { html.da27.js .da-videos .da-videos__grille--moyen { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
@media (min-width: 900px) {
  html.da27 .da-videos .da-video--grand { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 0; }
  html.da27 .da-videos .da-video--grand .da-video__corps { padding: 32px; }
  html.da27.js .da-videos .da-videos__grille--vignette { --fx-v: 4; }
}
html.da27 .da-videos .da-videos__grille + .da-videos__grille { margin-block-start: 20px; }