/* CLC Vignettes — styles partagés front + éditeur.
   Les couleurs sont personnalisables par bloc via variables CSS
   (--clc-bg, --clc-text, --clc-text-soft, --clc-accent),
   avec les couleurs d'origine en valeurs par défaut. */

/* 2.6.0 — le bloc utilise désormais les « block supports » de Gutenberg :
   fond, couleur de texte, police, taille du corps, marges et hauteur
   minimale arrivent en style EN LIGNE, posé par l'éditeur. Les valeurs
   ci-dessous ne sont donc plus que des défauts : tout réglage natif les
   surcharge naturellement, sans !important.

   Conséquence sur les enfants : titre, texte et lien passent en « em » et
   en « color: inherit ». C'est ce qui fait qu'un seul réglage de taille au
   niveau du bloc redimensionne l'ensemble de façon proportionnée, au lieu
   de trois tailles fixes indépendantes. */
.clc-vignette {
	background: var(--clc-bg, #fff);
	color: var(--clc-text, #111);
	font-size: 15px;
	/* La marge interne est devenue réglable (panneau Dimensions natif) et la
	   largeur vaut 100 % en mode étiré : sans border-box, toute marge interne
	   déborderait de la colonne. Les thèmes le posent généralement sur « * »,
	   on ne s'y fie pas. */
	box-sizing: border-box;
	border-radius: 0 18px 18px 18px;
	padding: 26px 26px 30px;
	margin: 28px 6px;
	box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.85);
	font-family: var(--clc-font, Arial, sans-serif);
	max-width: 340px;
	min-height: var(--clc-vig-minh, 220px);
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Remplir la colonne (défaut depuis 2.6.0).
   height: 100% est ce qui aligne trois vignettes côte à côte : dans un bloc
   Colonnes ou Grille, chaque cellule est déjà étirée à la hauteur de la
   rangée, la vignette n'a qu'à la remplir. La marge extérieure passe à zéro
   — l'écart entre vignettes est celui du conteneur, pas de la vignette,
   sinon deux gouttières s'additionnent. */
.clc-vignette.clc-vig-etire {
	max-width: none;
	width: 100%;
	align-self: stretch;
	margin: 0;
}

/* Deux conteneurs, deux mécaniques d'étirement — et elles s'excluent.
   Dans une Rangée ou une Grille, la vignette EST l'élément flex/grille :
   « align-self: stretch » ci-dessus suffit, et un « height: 100% » la
   casserait (une hauteur définie désactive l'étirement, chaque vignette
   reprendrait la hauteur de son propre contenu — exactement le défaut que
   ce mode doit corriger).
   Dans un bloc Colonnes, l'élément flex est la COLONNE : elle est bien
   étirée à la hauteur de la rangée, mais elle ne transmet rien à son
   contenu. Il faut donc que la vignette réclame cette hauteur. */
.wp-block-column > .clc-vignette.clc-vig-etire {
	height: 100%;
}

/* Effet au survol : la vignette se redresse et se soulève. */
.clc-vignette:hover {
	transform: rotate(0deg) translateY(-5px) !important;
	box-shadow: 8px 11px 0 0 rgba(0, 0, 0, 0.85);
}

/* Modes de largeur */
.clc-vignette.clc-w-adaptatif {
	max-width: 100%;
}

.clc-vignette.clc-w-pleine {
	max-width: none;
	width: 100%;
}

.clc-vignette.clc-w-contenu {
	max-width: none;
	width: fit-content;
	min-height: 0;
}

/* Sans texte de contenu : titre et lien centrés verticalement.
   Deux règles séparées : la classe (blocs réenregistrés) et :has()
   (agit sur toutes les vignettes sans texte, même non réenregistrées —
   règle isolée car un navigateur sans :has() ignorerait toute la liste). */
.clc-vignette-centre {
	justify-content: center;
}

.clc-vignette:not(:has(.clc-vignette-excerpt)) {
	justify-content: center;
}

/* Image optionnelle en tête de vignette */
.clc-vignette-img {
	margin: 0 0 14px;
}

.clc-vignette-img img {
	display: block;
	width: 100%;
	/* --clc-vig-img-taille n'est posée que si une hauteur est demandée ;
	   sans elle, l'image garde ses proportions et object-fit n'a rien à
	   recadrer. */
	height: var(--clc-vig-img-taille, auto);
	object-fit: cover;
	border-radius: 0 10px 10px 10px;
}

/* ---------- Image à gauche, texte qui l'habille (2.6.0) ---------- */
/* Un flottant n'existe pas dans un conteneur flex : ses enfants ne
   l'habillent pas, ils se placent à côté. Cette disposition repasse donc la
   vignette en flux normal — flow-root plutôt que block, pour contenir le
   flottant sans clearfix. Les réglages qui dépendent du flex (texte qui
   pousse le lien vers le bas, centrage vertical sans texte) ne s'appliquent
   pas ici : c'est le prix de l'habillage. */
.clc-vignette.clc-vig-img-gauche {
	display: flow-root;
}

.clc-vig-img-gauche .clc-vignette-img {
	float: left;
	width: var(--clc-vig-img-taille, 120px);
	margin: 0 14px 10px 0;
}

.clc-vig-img-gauche .clc-vignette-img img {
	height: auto;
}

.clc-vig-img-gauche .clc-vignette-link {
	display: inline-block;
}

/* ---------- Image en fond de vignette (2.6.0) ---------- */
/* Le voile n'est pas un calque supplémentaire : c'est l'image elle-même qui
   est rendue partiellement transparente au-dessus de la couleur de fond de
   la vignette. Un voile réglé à 70 % donne une image à 30 % d'opacité.
   L'intérêt : la couleur de fond reste celle choisie dans le panneau natif,
   quelle qu'elle soit, sans avoir à la relire en JavaScript pour en
   fabriquer un calque de recouvrement. */
.clc-vignette.clc-vig-img-fond {
	position: relative;
}

.clc-vig-img-fond::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--clc-vig-img);
	background-size: cover;
	background-position: center center;
	opacity: var(--clc-vig-voile, 0.45);
	border-radius: inherit;
	pointer-events: none;
}

/* Le contenu repasse au-dessus du calque d'image. */
.clc-vig-img-fond > * {
	position: relative;
	z-index: 1;
}

/* Tailles en em : 1.4 / 1 / 0.87 reproduisent exactement les 21 / 15 / 13 px
   d'origine sur la base de 15 px du bloc, et suivent désormais le réglage de
   taille du panneau Typographie. */
.clc-vignette-title {
	font-size: 1.4em;
	font-weight: 800;
	color: inherit;
	margin-bottom: 12px;
	line-height: 1.3;
}

/* L'opacité remplace l'ancien --clc-text-soft (#444 en dur) : la nuance
   secondaire se dérive maintenant de la couleur choisie dans le panneau
   natif, quelle qu'elle soit, au lieu d'être figée en gris. */
.clc-vignette-excerpt {
	font-size: 1em;
	color: inherit;
	opacity: 0.82;
	line-height: 1.6;
	margin-bottom: 14px;
	flex: 1 1 0%;
}

.clc-vignette-link {
	font-size: 0.87em;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid var(--clc-accent, #f5d000);
	align-self: flex-start;
}

.clc-vignette-link:visited {
	color: inherit;
}

.clc-vignette-link:hover,
.clc-vignette-link:focus {
	color: inherit;
	border-bottom-width: 3px;
}

/* Vignette entièrement cliquable (balise <a>) */
a.clc-vignette,
a.clc-vignette:visited,
a.clc-vignette:hover,
a.clc-vignette:focus {
	color: inherit;
	text-decoration: none;
}

/* Liste du bloc "Dernières actus" */
.clc-vignettes-list.clc-layout-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	align-items: stretch;
}

.clc-vignettes-list.clc-layout-grille .clc-vignette {
	max-width: 100%;
	margin: 0;
}

.clc-vignettes-list.clc-w-pleine {
	width: 100%;
}

@media (max-width: 768px) {
	.clc-vignette {
		max-width: 100%;
		margin: 0 0 16px;
		padding: 18px 16px 20px;
		min-height: var(--clc-vig-minh, auto);
		box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.85);
	}

	.clc-vignette-title {
		font-size: 16px;
		margin-bottom: 8px;
	}

	.clc-vignette-excerpt {
		font-size: 13px;
		line-height: 1.5;
		margin-bottom: 10px;
	}

	.clc-vignette-link {
		font-size: 12px;
	}

	.clc-vignettes-list.clc-layout-grille {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ---------- Alignement du texte ---------- */

.clc-align-left { text-align: left; }
.clc-align-center { text-align: center; }
.clc-align-right { text-align: right; }

.clc-align-center .clc-vignette-link { align-self: center; }
.clc-align-right .clc-vignette-link { align-self: flex-end; }