/* assets/css/public/modules/photos/gallery.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 08-10-2026-square */
/* Grille module « Galerie » (albums) + grille photos sur fiche production (id dédié pour éviter la confusion avec le lien Galerie du menu) */
#gallery,
#production-show-photos-grid {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: var(--layout-gap, 20px); /* densité des images : design/elements/options.css */
	overflow-x: clip;
}

@media screen and (max-width: 1439px) and (min-width: 901px) {
  #gallery,
  #production-show-photos-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

#gallery a,
#production-show-photos-grid a {
  position: relative;
  /* Tuile carrée qui remplit sa cellule, image recadrée (comme les pochettes) */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  box-sizing: border-box;
  transition:
    box-shadow 0.3s ease-in-out,
    border 0.3s ease-in-out,
    filter 0.3s ease-in-out,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s linear;
}

#gallery a:hover,
#production-show-photos-grid a:hover {
  transform: var(--portfolios-thumbnail-hover-transform, none);
  filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}

#gallery a:active,
#production-show-photos-grid a:active {
  transform: var(--portfolios-thumbnail-click-transform, none);
  transition: transform 0.1s ease;
}

#gallery a::after,
#production-show-photos-grid a::after {
  position: absolute;
  top: 0;
  content: "↕";
  height: 100%;
  width: 100%;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.2s linear;
  color: var(--modules-white);
}

#gallery a:hover::after,
#production-show-photos-grid a:hover::after {
  bottom: 0px;
  opacity: 1;
}

#gallery div,
#gallery a,
#production-show-photos-grid div,
#production-show-photos-grid a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

#gallery a img,
#production-show-photos-grid a img {
  display: none;
}

@media screen and (max-width: 900px) {

  #gallery,
  #production-show-photos-grid {
    grid-template-columns: 1fr 1fr;
  }

}

/* Accueil : 2 lignes selon les colonnes (la page Galerie affiche tout) */
@media screen and (max-width: 620px) {
  #portfolio_page #home-section-gallery #gallery > :nth-child(n+3) {
    display: none;
  }
}

@media screen and (min-width: 621px) and (max-width: 900px) {
  #portfolio_page #home-section-gallery #gallery > :nth-child(n+5) {
    display: none;
  }
}

@media screen and (min-width: 901px) and (max-width: 1439px) {
  #portfolio_page #home-section-gallery #gallery > :nth-child(n+7) {
    display: none;
  }
}

@media screen and (max-width: 620px) {

  #gallery,
  #production-show-photos-grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: calc(var(--layout-gap, 20px) / 2);
  }

}
}

/* assets/css/public/modules/photos/swipebox.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 03-10-2026-viewer-b */
/* Swipebox: caption and in-page photo viewer styles (moved from main.css) */
#portfolio_page #swipebox-caption {
    color: var(--portfolios-theme-text-main, #ffffff);
    opacity: 0.9;
    font-size: 0.9rem;
    margin-top: 6px;
    transition: 0.2s linear;
}

/* Photo viewer (in-page fullscreen) + modale enquêtes.
 * Visionneuse : fond et contrôles du hub (overlay/viewer-controls.css). Modale enquêtes : fond du portfolio. */
#photo-viewer,
#survey-response-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
    overscroll-behavior: none;
    box-sizing: border-box;
    max-width: 100%;
}
#survey-response-modal {
    background: var(--portfolios-section-color-pair, var(--portfolios-theme-bg-alt, var(--portfolios-bg-alt-color, #e2e2e2)));
    color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, #222));
}
#photo-viewer.open,
#survey-response-modal.open {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overflow-x: clip;
}

html.photo-viewer-open,
html.survey-modal-open,
html.photo-viewer-open body,
html.survey-modal-open body {
    overflow: hidden;
    overflow-x: clip;
    overscroll-behavior: none;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100dvh;
    touch-action: none;
}

#photo-viewer .pv-stage,
#survey-response-modal .pv-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    padding: 88px 24px 40px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

/* Zone image : pleine largeur, sans flèches superposées */
#photo-viewer .pv-viewport {
    position: relative;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0;
    box-sizing: border-box;
    overflow: hidden;
}

#photo-viewer .pv-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    line-height: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: opacity .3s ease, transform .3s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#photo-viewer .pv-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width:700px){
    #photo-viewer .pv-stage,
    #survey-response-modal .pv-stage { padding: 64px 12px 16px; gap: 8px; }
}

/* Légende + navigation : flèches aux extrémités du bloc titres */
#photo-viewer .pv-caption-bar {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-inline: 0;
    box-sizing: border-box;
    min-width: 0;
}

#photo-viewer .pv-caption {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 720px;
    margin-inline: auto;
    padding-inline: 4px;
    box-sizing: border-box;
    transition: opacity .3s ease;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Légende : police du portfolio (.portfolio-font), couleurs et tailles du hub (lisibles sur fond sombre). */
#photo-viewer .pv-title {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--arktefakt-text-main);
    margin: 0;
    padding: 0;
}
#photo-viewer .pv-title:empty {
    display: none;
}
#photo-viewer .pv-description {
    font-size: 0.95rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--arktefakt-text-muted);
    margin: 6px 0 0;
    padding: 0;
}
#photo-viewer .pv-description:empty {
    display: none;
}
#photo-viewer .pv-title :is(a, span, p, strong, em, b, i, small) {
    color: var(--arktefakt-text-main);
}
#photo-viewer .pv-description :is(a, span, p, strong, em, b, i, small) {
    color: var(--arktefakt-text-muted);
}
#photo-viewer .pv-counter {
    font-size: 0.85rem;
    line-height: 1.4;
    font-weight: initial;
    color: var(--arktefakt-text-muted);
    font-variant-numeric: tabular-nums;
    margin: 10px 0 0;
    padding: 0;
}
#photo-viewer .pv-counter[hidden] {
    display: none;
}
#photo-viewer .pv-counter :is(.pv-counter-current, .pv-counter-separator, .pv-counter-total) {
    color: inherit;
}

/* Navigation prev/next, orientation & Fermer : apparence dans overlay/viewer-controls.css
   (.ak-viewer-ctl, design du hub) ; ici seulement le placement. */
#photo-viewer .pv-prev,
#photo-viewer .pv-next {
    position: relative;
    flex: 0 0 auto;
    z-index: 5;
    pointer-events: auto;
}

#photo-viewer .pv-close,
#survey-response-modal .pv-close {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
    z-index: 10;
}

#photo-viewer .pv-orientation {
    display: none;
    position: absolute;
    top: max(1rem, env(safe-area-inset-top, 0px));
    left: max(1rem, env(safe-area-inset-left, 0px));
    z-index: 10;
}

@media (orientation: portrait) {
    #photo-viewer.open .pv-orientation {
        display: inline-flex;
    }
}

/* Bascule d'orientation : bouton secondaire, plus petit que fermer / précédent / suivant. */
#photo-viewer .pv-orientation.ak-viewer-ctl {
    width: 2rem;
    height: 2rem;
}
#photo-viewer .pv-orientation.ak-viewer-ctl :is(svg, svg path) {
    width: 1rem;
    height: 1rem;
}

#photo-viewer .pv-prev.pv-rotate-left svg { transform: rotate(-90deg); }
#photo-viewer .pv-next.pv-rotate-right svg { transform: rotate(90deg); }

@media screen and (max-width: 900px) {
    #photo-viewer .pv-close,
    #survey-response-modal .pv-close {
        top: 1rem;
        right: 1rem;
    }
    #photo-viewer .pv-orientation {
        top: 1rem;
        left: 1rem;
    }
    #photo-viewer .pv-caption-bar {
        gap: 8px;
    }
}

@media (orientation: landscape) {
    #photo-viewer .pv-stage {
        justify-content: center;
    }
}

/*
 * Portrait vertical : compacter les espacements pour tenir dans l'écran sans scroll.
 */
@media (orientation: portrait) {
    #photo-viewer.open:not(.pv-layout-horizontal) .pv-stage {
        padding-top: calc(3.25rem + env(safe-area-inset-top, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
        padding-left: max(8px, env(safe-area-inset-left, 0px));
        gap: 8px;
    }

    /* Bascule vertical / horizontal : fondu de la scène (durée = ORIENTATION_FADE_MS de photo-viewer.js).
       `scale` est indépendant de `transform`, qui porte la rotation en horizontal. */
    #photo-viewer.open .pv-stage {
        transition: opacity 0.16s ease, scale 0.16s ease;
    }

    #photo-viewer.open.pv-orientation-animating .pv-stage {
        opacity: 0;
        scale: 0.97;
    }

    #photo-viewer.open.pv-layout-horizontal {
        align-items: center;
        justify-content: center;
        overflow: hidden;
        overflow-x: clip;
    }

    #photo-viewer.open.pv-layout-horizontal .pv-stage {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100dvh;
        height: 100dvw;
        max-width: 100dvh;
        max-height: 100dvw;
        padding: calc(3.25rem + env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
        gap: 8px;
        transform: translate(-50%, -50%) rotate(90deg);
        transform-origin: center center;
        overflow: hidden;
    }
}

@media (orientation: portrait) and (prefers-reduced-motion: reduce) {
    #photo-viewer.open .pv-stage {
        transition: none;
    }
}

@media (orientation: portrait) and (max-width: 700px) {
    #photo-viewer.open:not(.pv-layout-horizontal) .pv-stage {
        padding-top: calc(3rem + env(safe-area-inset-top, 0px));
    }

    #photo-viewer.open.pv-layout-horizontal .pv-stage {
        padding-top: calc(3rem + env(safe-area-inset-top, 0px));
    }

    #photo-viewer .pv-caption-bar {
        gap: 4px;
    }
}

/* Mobile : légende compacte — après les règles de base pour gagner la cascade */
@media (max-width: 700px) {
    #photo-viewer .pv-caption > h1,
    #photo-viewer .pv-caption > h1.pv-title,
    #photo-viewer .pv-caption .pv-title {
        font-size: 1rem;
        line-height: 1.3;
    }

    #photo-viewer .pv-caption > h2,
    #photo-viewer .pv-caption > h2.pv-description,
    #photo-viewer .pv-caption .pv-description {
        font-size: 0.85rem;
        line-height: 1.4;
        margin-top: 3px;
    }
}

/* --------------------------------------------------------------------------
   Légende de la visionneuse : hiérarchie titre / description / compteur
   -------------------------------------------------------------------------- */

#photo-viewer .pv-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#photo-viewer .pv-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-weight: 500;
    letter-spacing: 0.005em;
}

#photo-viewer .pv-description {
    max-width: 60ch;
    max-height: 4.4em;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Filet entre titre et description quand les deux sont présents. */
#photo-viewer .pv-title:not(:empty) + .pv-description:not(:empty)::before {
    content: '';
    display: block;
    width: 1.75rem;
    height: 1px;
    margin: 0 auto calc(var(--layout-space-y-sm, 15px) / 2);
    background: currentColor;
    opacity: 0.35;
}

#photo-viewer .pv-counter:not([hidden]) {
    display: inline-flex;
    padding: 2px var(--layout-space-x-sm, 10px);
    border: 1px solid color-mix(in srgb, var(--arktefakt-text-muted) 40%, transparent);
    border-radius: 999px;
    font-size: 0.75rem;
}

/* Sans titre ni description : seul le compteur reste, plus de marge vide. */
#photo-viewer .pv-caption:has(.pv-title:empty):has(.pv-description:empty) .pv-counter {
    margin-top: 0;
}
}

/* assets/css/public/modules/videos/show.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 23-09-2026-20-19 */
/* ── Une seule vidéo ── */
#videos.videos-single {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
}

#videos.videos-single > h2,
#videos.videos-single .videos-cookies-fallback {
    grid-column: 1 / -1;
}

/* ── Mode tuiles : deux blocs distincts respectant le design système de grilles.
   On ne mélange jamais les orientations dans une même rangée : les vidéos horizontales
   (YouTube, Vimeo, Dailymotion…) forment un bloc en pf-cols-2 au plus, les vidéos verticales
   (Shorts, Reels, TikTok…) un bloc en pf-cols-4 au plus (3 en portable et tablette, 2 en mobile),
   via les primitives de core/layout.css. ── */
#videos.videos-wall {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#videos.videos-wall .videos-grid:not(.pf-w-content) {
    margin: 0;
}

#videos .videos-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

#videos.videos-wall .production-video-item,
#videos.videos-wall .video-tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}

/* ── Mode liste : grille blog ── */
#videos.videos-list > h2,
#videos.videos-list .videos-cookies-fallback {
    margin-bottom: 20px;
}

#videos.videos-list .blog-list {
    width: 100%;
}

#videos.videos-list .thumbnail {
    height: 100%;
}

#videos.videos-list .production-video-list-item--portrait {
    grid-column: span 2;
}

#videos.videos-list .production-video-item,
#videos.videos-list .video-tile {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

#videos.videos-list .production-video-media {
    margin-bottom: 20px;
}

/* ── Cartes tuiles (alignées blog) ── */
#videos .thumbnail-tile.production-video-item,
#videos .thumbnail-tile.video-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color));
}

/* Mode tuiles — aligné vignettes blog : pas de bordure sur le média, radius haut uniquement */
#videos .thumbnail-tile.production-video-item,
#videos .thumbnail-tile.video-tile {
    border-width: var(--portfolios-thumbnail-border-width, 0px);
    border-style: var(--portfolios-thumbnail-border-type, solid);
    border-color: var(--portfolios-thumbnail-border-color, #222);
    border-radius: var(--portfolios-thumbnail-radius, 0%);
    box-shadow: var(--portfolios-thumbnail-box-shadow, none);
}

#videos .thumbnail-tile .production-video-media,
#videos .thumbnail-tile.video-tile .thumb {
    border: none;
    box-shadow: none;
    border-top-left-radius: var(--portfolios-thumbnail-radius, 0%);
    border-top-right-radius: var(--portfolios-thumbnail-radius, 0%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    overflow: hidden;
}

#videos .thumbnail-tile .production-video-media > :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook),
#videos .thumbnail-tile .production-video-media :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook) iframe {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

#videos .thumbnail-tile .article-blog-infos {
    border-bottom-left-radius: var(--portfolios-thumbnail-radius, 0%);
    border-bottom-right-radius: var(--portfolios-thumbnail-radius, 0%);
}

#videos .production-video-item .article-blog-infos,
#videos .video-tile .article-blog-infos {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

#videos .production-video-item .article-blog-infos h4,
#videos .production-video-item .article-blog-infos p,
#videos .video-tile .article-blog-infos h4,
#videos .video-tile .article-blog-infos p {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

#videos .production-video-item {
    min-width: 0;
    box-sizing: border-box;
}

#videos .production-video-media {
    width: 100%;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    min-width: 0;
}

/* Conteneur portrait (TikTok, Reels, Shorts…) — ratio 9:16, sans étirement horizontal */
#videos .production-video-media:has(:is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait)) {
    aspect-ratio: 9 / 16;
    width: 100%;
    max-width: 100%;
}

#videos.videos-wall .production-video-item--portrait .production-video-media:has(:is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait)),
#videos.videos-wall .video-tile.production-video-item--portrait .production-video-media:has(:is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait)) {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
}

#videos .production-video-media > :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Paysage : ratio 16:9 */
#videos .production-video-media:not(:has(:is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait))) > :is(.youtube, .vimeo, .dailymotion, .facebook),
#videos .production-video-media > .youtube:not(.video-portrait),
#videos .production-video-media > .vimeo,
#videos .production-video-media > .dailymotion,
#videos .production-video-media > .facebook:not(.video-portrait) {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 56.25%;
}

#videos .production-video-media .youtube:not(.video-portrait) iframe,
#videos .production-video-media .vimeo iframe,
#videos .production-video-media .dailymotion iframe,
#videos .production-video-media .facebook:not(.video-portrait) iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Portrait : TikTok, Instagram, Shorts — remplissent le conteneur media */
#videos .production-video-media :is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    aspect-ratio: auto;
    overflow: hidden;
}

#videos .production-video-media :is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait) iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Une seule vidéo portrait : largeur raisonnable sur grand écran */
#videos.videos-single .production-video-item--portrait .production-video-media:has(:is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait)) {
    width: 100%;
    max-width: min(100%, 420px);
    margin-inline: auto;
}

/* Vignettes lien externe : ratio selon orientation */
#videos.videos-wall .production-video-item--portrait .video-tile .thumb,
#videos.videos-wall .video-tile.production-video-item--portrait .thumb {
    padding-bottom: 177.78%;
}

#videos.videos-wall .production-video-item--landscape .video-tile .thumb,
#videos.videos-wall .video-tile.production-video-item--landscape .thumb {
    padding-bottom: 56.25%;
}

#videos.videos-list .video-tile .thumb {
    padding-bottom: 50%;
}

@media screen and (max-width: 1099px) {

    #videos.videos-list .production-video-list-item--portrait {
        grid-column: span 1;
    }

}

@media screen and (max-width: 700px) {

    /* TikTok / Reels : hauteur plafonnée sur mobile pour éviter un défilement excessif */
    #videos .production-video-media:has(:is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait)) {
        width: 100%;
        max-height: 85svh;
    }

    #videos.videos-single .production-video-item--portrait .production-video-media:has(:is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait)) {
        max-width: 100%;
    }

}

/* --------------------------------------------------------------------------
   Légendes sous les vidéos (titre + description)
   -------------------------------------------------------------------------- */

#videos .media-caption {
    display: flex;
    flex-direction: column;
    gap: calc(var(--layout-space-y-sm, 15px) / 3);
    padding-top: var(--layout-space-y-sm, 15px);
    text-align: left;
}

#videos .thumbnail-tile .media-caption {
    padding: var(--layout-space-y-sm, 15px) var(--layout-space-x-md, 20px) var(--layout-space-y-md, 25px);
}

#videos .media-caption .article-blog-infos__title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.005em;
}

#videos .media-caption .article-blog-infos__description {
    margin: 0;
    max-width: 65ch;
    font-size: 0.9em;
    line-height: 1.55;
    opacity: 0.72;
}

/* Tuiles : description limitée à 3 lignes pour garder une grille régulière. */
#videos .video-tile .media-caption .article-blog-infos__description,
#videos .thumbnail-tile .media-caption .article-blog-infos__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Vidéo seule : légende centrée sous le média, filet discret. */
#videos.videos-single .media-caption {
    align-items: center;
    text-align: center;
}

#videos.videos-single .media-caption .article-blog-infos__title::after {
    content: '';
    display: block;
    width: 2rem;
    height: 1px;
    margin: calc(var(--layout-space-y-sm, 15px) / 2) auto 0;
    background: currentColor;
    opacity: 0.3;
}
}

/* assets/css/public/modules/videos/productions.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 08-10-2026-works-ratio */
/* Version: 19-07-2026 — Productions : affiches verticales + pochette mobile */

/* Listing / « autres productions » : format affiche portrait (2:3) */
#portfolio_page #productions .pf-thumbs--portrait:where(:not([data-works-layout]), [data-works-layout="grid"]) a.vertical-grid-item,
#portfolio_page main .pf-thumbs--portrait:where(:not([data-works-layout]), [data-works-layout="grid"]) a.vertical-grid-item {
    padding: 0 0 150% 0;
}

/* Fiche desktop : affiche | texte */
#portfolio_page #hero #title-star {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

#portfolio_page #hero #title-star > #pochette {
    --pochette-width: min(200px, 20%);
    width: var(--pochette-width);
    height: auto;
    max-width: 220px;
    max-height: none;
    min-height: 0;
    aspect-ratio: 2 / 3;
    flex: 0 0 var(--pochette-width);
    align-self: flex-start;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#portfolio_page #hero #title-star #title-about {
    flex: 1;
    min-width: 0;
}

@media screen and (max-width: 700px) {

    /* Afficher la pochette (annule le masquage global éventuel) */
    #portfolio_page #hero #pochette,
    #portfolio_page #hero #title-star > #pochette {
        display: block;
        --pochette-width: min(160px, 48vw);
        width: var(--pochette-width);
        flex: 0 0 auto;
        margin-bottom: 1.25rem;
    }

    #portfolio_page #hero #title-star {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 0;
    }

    #portfolio_page #hero #title-star #title-about {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

}
}