/* Couleurs de texte — list.css / tiles.css (chargés avant) définissent la mise en page liste vs tuiles */
.thumbnail, .thumbnail * {
	color: var(--portfolios-text-main-color, inherit);
}
.thumbnail h4, .thumbnail div, .thumbnail-tile h4, .thumbnail-tile div {
	color: var(--portfolios-text-main-color, inherit);
}

/* Complément mode tuiles uniquement (le mode liste : .thumbnail sans .thumbnail-tile sur le lien) */
.thumbnail-tile {
	overflow: visible;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	box-sizing: border-box;
	position: relative;
	top: 0;
	transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumbnail-tile .thumb {
	position: relative;
	padding-bottom: 60%;
	background-size: cover;
	background-position: center center;
	transition: box-shadow 0.2s, border 0.2s, filter 0.18s, transform 0.18s;
	filter: brightness(100%);
}

.thumbnail-tile .thumb::after {
	position: absolute;
	bottom: 0;
	content: "¶";
	height: 100%;
	width: 100%;
	font-size: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: var(--thumbnail-hover-effect, 0.2s linear);
	color: var(--portfolios-text-main-color, var(--modules-white));
}

.thumbnail-tile:hover .thumb::after {
	bottom: 0px;
	opacity: 1;
	box-shadow: var(--thumbnail-hover-effect, none);
}

.thumbnail-tile .article-blog-infos {
	flex: 1;
	display: flex;
	flex-direction: column;
	color: var(--portfolios-text-main-color, #222);
	padding: 20px;
}

.thumbnail-tile h5 {
	font-weight: bold;
	margin-bottom: 10px;
	margin-top: 10px;
	color: var(--portfolios-text-main-color, #222);
}

/* ========================================== */
/* MAIN.CSS ORIGINAL CONTENT */
/* ========================================== */
/* Styles principaux des vignettes (thumbnails) */
/* Ce fichier surcharge les styles de list.css et tiles.css */

/* Transitions de base pour mode LISTE */
.thumbnail {
	transition: transform 0.3s ease, filter 0.3s ease;
}

/* Effets au survol - Mode LISTE (sur .thumbnail) */
.thumbnail:hover {
	transform: var(--portfolios-thumbnail-hover-transform, none);
	filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
	/* z-index removed for centralization */
}

/* Effets au clic - Mode LISTE (sur .thumbnail) */
.thumbnail:active {
	transform: var(--portfolios-thumbnail-click-transform, none) !important;
	transition: transform 0.1s ease;
}

/* Correction pour éviter que l'ombre soit coupée par le lien parent en mode liste */
.thumbnail a {
    overflow: visible !important;
}

/* Transitions de base pour mode TUILES */
.thumbnail-tile {
	transition: transform 0.3s ease, filter 0.3s ease;
}

/* Ajout d'un fond plus prononcé pour les tuiles */
.thumbnail-tile {
    background-color: var(--portfolios-bg-alt-color);
}

/* Effets au survol - Mode TUILES (sur .thumbnail-tile) */
.thumbnail-tile:hover {
	transform: var(--portfolios-thumbnail-hover-transform, none);
	filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}

/* Effets au clic - Mode TUILES (sur .thumbnail-tile) */
.thumbnail-tile:active {
	transform: var(--portfolios-thumbnail-click-transform, none) !important;
	transition: transform 0.1s ease;
}

/* Classe thumb-border pour les bordures personnalisées */
/* PRIORITÉ : Surcharge list.css et tiles.css */

/* Mode LISTE : .thumb.thumb-border (div enfant avec image) */
.thumbnail .thumb.thumb-border {
	box-sizing: border-box;
	display: block;
	width: auto;
	border-width: var(--portfolios-thumbnail-border-width, 0px);
	border-style: var(--portfolios-thumbnail-border-type, solid);
	border-color: var(--portfolios-thumbnail-border-color, #222);
	box-shadow: var(--portfolios-thumbnail-box-shadow, none);
	overflow: visible;
	transition: border-width 0.3s ease, 
	            border-style 0.3s ease, 
	            border-color 0.3s ease, 
	            border-radius 0.3s ease, 
	            box-shadow 0.3s ease;
	/* Arrondi sur tous les angles */
	border-radius: var(--portfolios-thumbnail-radius, 0%);
}

/* Mode TUILES : a.thumbnail-tile.thumb-border (lien parent) */
.thumbnail-tile.thumb-border,
a.thumbnail-tile.thumb-border {
	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);
	overflow: visible !important;
	transition: 0.2s linear;
}

thumbnail-tile.thumb-border:hover,
a.thumbnail-tile.thumb-border:hover {
	/* z-index removed for centralization */
}

/* Mode TUILES - Arrondi du thumb enfant pour suivre le parent */
.thumbnail-tile.thumb-border .thumb,
a.thumbnail-tile.thumb-border .thumb {
	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;
	transition: border-radius 0.3s ease;
    width: 100%;
    display: block;
    padding-bottom: 60%; /* Force le ratio d'aspect */
}

/* ===== Video tile specific styling to match thumbnails ===== */
.thumbnail-tile.video-tile {
    box-shadow: var(--portfolios-thumbnail-box-shadow, none);
    overflow: visible;
    background-color: var(--portfolios-bg-alt-color);
}

.thumbnail-tile.video-tile .thumb {
    background-size: cover;
    background-position: center center;
    position: relative;
    overflow: hidden;
}

/* Replace default ¶ with a play icon for videos */
.thumbnail-tile.video-tile .thumb::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='36' fill='%23ffffff' fill-opacity='0.8'/><polygon points='40,30 70,50 40,70' fill='%23000000'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px 48px;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.thumbnail-tile.video-tile:hover .thumb::after {
    opacity: 1;
}

/* Styling for video hover - Zoom disabled as requested */
.thumbnail-tile.video-tile:hover,
.thumbnail-tile.video-tile:focus,
.thumbnail-tile.video-tile:active {
    transform: none !important;
    filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
    box-shadow: var(--portfolios-thumbnail-box-shadow, 0 6px 24px rgba(0,0,0,0.08));
}

.thumbnail-tile.video-tile .showvideo-set-infos {
	padding: 25px;
}

.thumbnail-tile.video-tile .showvideo-set-infos h4 {
    margin-bottom: 6px;
}

.thumbnail-tile.video-tile .showvideo-set-infos p {
    margin: 0;
    opacity: 0.9;
}

.thumbnail .thumb.thumb-border::after,
.thumbnail-tile.thumb-border .thumb::after {
    border-radius: inherit;
}

#demo-tiles-css > div {
    overflow: visible !important;
}

/* ─────────────────────────────────────────────────────────── */
/* EXTENSION AUX ÉLÉMENTS DE GRILLE (DEMANDE UTILISATEUR)      */
/* ─────────────────────────────────────────────────────────── */

/* 1. Vertical & Horizontal Grid Items */
.vertical-grid-item,
.horizontal-grid-item {
	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);
	overflow: visible !important;
	box-sizing: border-box;
	transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}

.vertical-grid-item:hover,
.horizontal-grid-item:hover {
    transform: var(--portfolios-thumbnail-hover-transform, none);
    filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
	/* z-index removed for centralization */
}

.vertical-grid-item:active,
.horizontal-grid-item:active {
    transform: var(--portfolios-thumbnail-click-transform, none) !important;
    transition: transform 0.1s ease;
}

/* Héritage du radius pour le poster interne */
.vertical-grid-item .poster,
.horizontal-grid-item .poster {
    border-radius: inherit;
}

/* Héritage du radius pour les infos en bas */
.vertical-grid-item .vertical-infos,
.horizontal-grid-item .horizontal-infos {
    border-bottom-left-radius: var(--portfolios-thumbnail-radius, 0%);
    border-bottom-right-radius: var(--portfolios-thumbnail-radius, 0%);
}

/* Vignette blog sans image : fond et icône selon variables :root (portfolios-light / portfolios-night) */
.thumb.thumb-placeholder-blog {
	position: relative;
	background-color: var(--portfolios-neutral-bg-color);
	background-image: linear-gradient(
		145deg,
		var(--portfolios-bg-alt-color) 0%,
		var(--portfolios-neutral-bg-color) 50%,
		var(--portfolios-bg-alt-color) 100%
	);
	background-size: cover;
	background-position: center;
}

.thumb.thumb-placeholder-blog .thumb-placeholder-blog__icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(22%, 72px);
	/* Même couleur que le texte des vignettes / du lien carte (--portfolios-text-main-color sur :root clair/sombre) */
	color: var(--portfolios-text-main-color);
	opacity: 0.4;
	line-height: 0;
	pointer-events: none;
}

.thumb.thumb-placeholder-blog .thumb-placeholder-blog__icon svg {
	width: 100%;
	height: auto;
	display: block;
	fill: currentColor;
}

.thumb.thumb-placeholder-blog::after,
.thumbnail-tile .thumb.thumb-placeholder-blog::after,
.thumbnail .thumb.thumb-placeholder-blog::after {
	display: none !important;
	content: none !important;
}

/* 2. Blog List Items (Renforcement) */
/* Mode Tuiles (conteneur) */
.blog-list .thumbnail-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);
    overflow: visible !important;
}

/* ─────────────────────────────────────────────────────────── */
/* #goto Anchors — appliquer les mêmes contours que .vertical-grid-item
   Sans toucher au fond actuel : on ne change que l'aspect de bordure/arrondi/ombre */
#goto article a {
    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);
    overflow: visible;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}

#goto article a:hover {
    transform: var(--portfolios-thumbnail-hover-transform, none);
    filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}

#goto article a:active {
    transform: var(--portfolios-thumbnail-click-transform, none) !important;
    transition: transform 0.1s ease;
}

#goto article a .poster {
    border-radius: inherit;
}

/* Mode Liste (image interne) */
.blog-list .thumbnail .thumb {
    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);
}

/* Application des effets de survol/clic pour le blog-list si pas déjà appliqués */
.blog-list .thumbnail-tile:hover,
.blog-list .thumbnail:hover {
    transform: var(--portfolios-thumbnail-hover-transform, none);
    filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
	/* z-index removed for centralization */
}

.blog-list .thumbnail-tile:active,
.blog-list .thumbnail:active {
    transform: var(--portfolios-thumbnail-click-transform, none) !important;
}

.service-item,
.faq-item,
.profil-button,
.agenda-item,
#blog-main-article img,
.youtube,
.vimeo,
.dailymotion {
	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);
    border-radius: var(--portfolios-thumbnail-radius, 8px);
	box-sizing: border-box;
	transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}

.service-item:hover,
.faq-item:hover,
.profil-button:hover,
.agenda-item:hover,
#blog-main-article img:hover,
.youtube:hover,
.vimeo:hover,
.dailymotion:hover {
    transform: var(--portfolios-thumbnail-hover-transform, none);
    filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}

.service-item:active,
.faq-item:active,
.profil-button:active,
.agenda-item:active,
#blog-main-article img:active,
.youtube:active,
.vimeo:active,
.dailymotion:active {
    transform: var(--portfolios-thumbnail-click-transform, none) !important;
    transition: transform 0.1s ease;
}

/* 4. Square Grid Items */
.square-grid-item {
	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);
	overflow: visible !important;
	box-sizing: border-box;
	transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}

.square-grid-item:hover {
    transform: var(--portfolios-thumbnail-hover-transform, none);
    filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
	/* z-index removed for centralization */
}

.square-grid-item:active {
    transform: var(--portfolios-thumbnail-click-transform, none) !important;
    transition: transform 0.1s ease;
}

.square-grid-item .poster {
    border-radius: inherit;
}

.square-grid-item .square-infos {
    border-bottom-left-radius: var(--portfolios-thumbnail-radius, 0%);
    border-bottom-right-radius: var(--portfolios-thumbnail-radius, 0%);
}

.swipebox {
	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);
	overflow: visible !important;
	box-sizing: border-box;
	transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}

.swipebox:hover {
    transform: var(--portfolios-thumbnail-hover-transform, none);
    filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
	/* z-index removed for centralization */
}

.swipebox:active {
    transform: var(--portfolios-thumbnail-click-transform, none) !important;
    transition: transform 0.1s ease;
}

/* Video Embeds Inheritance */
.youtube iframe,
.vimeo iframe,
.dailymotion iframe {
    border-radius: inherit;
}