/*
* Nom du fichier : edt_contenu.css
* Version : v2 - 02/10/2026 - Listes : neutralise les puces/compteurs générés par le thème (doublons) et force display:list-item.
* Version : v1 - 18/09/2026 12:40
*
* === CONTEXTE (pour l'IA) ===
* But du code : Styles du CONTENU produit par l'éditeur (colonnes, images, boutons).
* Demande utilisateur : images cliquables "sans contour, avec un survol animé", colonnes bien
*   réparties, comportement optimal sur mobile.
* Logique implémentée :
*   - Le HTML produit par l'éditeur porte DÉJÀ ses styles en ligne (largeur, flottement,
*     couleurs des boutons, colonnes en flex). Il s'affiche donc correctement MÊME SI ce
*     fichier n'est pas chargé : c'est volontaire, aucune page ne peut se retrouver cassée.
*   - Ce fichier apporte uniquement les finitions impossibles en style en ligne :
*     les survols animés, les media-queries mobile, la coupure des mots.
*   - Il doit être chargé sur les pages ADMIN (fait automatiquement) et sur les pages du
*     SITE PUBLIC (une ligne à ajouter là où stylerepere.css est appelé).
* Points d'attention : tous les sélecteurs sont préfixés .edt- : impossible de perturber
*   le CSS existant du site.
*
* === DESCRIPTION UTILISATEUR ===
* Les finitions d'affichage du texte sur le site : effets de survol des images,
* comportement des colonnes sur mobile, coupure propre du texte justifié.
*/

/* =========================================================================
   COLONNES
   -------------------------------------------------------------------------
   Le conteneur porte déjà display:flex + flex-wrap en style en ligne.
   Ici on ajoute seulement le confort de lecture.
   ========================================================================= */

.edt-colonnes {
	align-items: flex-start;
}

.edt-colonne {
	min-width: 0;
	/* indispensable : sans cela un mot long fait déborder la colonne */
	overflow-wrap: break-word;
}

.edt-colonne> :first-child {
	margin-top: 0;
}

.edt-colonne> :last-child {
	margin-bottom: 0;
}

/* =========================================================================
   IMAGES
   ========================================================================= */

.edt-img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Image cliquable : aucun cadre, léger zoom et ombre au survol */
.edt-img-lien {
	display: inline-block;
	max-width: 100%;
	border: none;
	outline: none;
	text-decoration: none;
	overflow: hidden;
	border-radius: 4px;
	-webkit-tap-highlight-color: transparent;
}

.edt-img-lien img {
	display: block;
	border: none;
	transition: transform .45s cubic-bezier(.2, .7, .3, 1), filter .3s, box-shadow .3s;
	will-change: transform;
}

.edt-img-lien:hover img,
.edt-img-lien:focus img {
	transform: scale(1.04);
	filter: brightness(1.04);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

.edt-img-lien:active img {
	transform: scale(1.01);
}

/* Le placement "centré" ne doit pas casser quand l'image est dans un lien */
.edt-img-lien:has(.edt-img-centre) {
	display: block;
	margin: 0 auto;
	width: fit-content;
}

/* =========================================================================
   BOUTONS
   -------------------------------------------------------------------------
   Couleurs et dimensions viennent du style en ligne (palette de l'éditeur) :
   ici uniquement l'animation, impossible à faire en ligne.
   ========================================================================= */

.edt-bouton {
	transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
	cursor: pointer;
	text-align: center;
	max-width: 100%;
}

.edt-bouton:hover,
.edt-bouton:focus {
	filter: brightness(1.1);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
	text-decoration: none;
}

.edt-bouton:active {
	transform: translateY(0);
	box-shadow: none;
}

/* =========================================================================
   MOBILE
   ========================================================================= */

@media (max-width: 600px) {

	/* Le texte justifié crée de gros trous entre les mots sur un écran étroit :
	   on repasse automatiquement en alignement à gauche. */
	[style*="justify"] {
		text-align: left !important;
	}

	/* Une image flottante sur un écran de téléphone étrangle le texte :
	   elle reprend toute la largeur. */
	.edt-img-gauche,
	.edt-img-droite {
		float: none !important;
		display: block !important;
		width: 100% !important;
		margin: 1em 0 !important;
	}

	/* Les boutons deviennent pleine largeur : bien plus faciles à toucher */
	.edt-bouton {
		display: block !important;
		width: 100%;
		box-sizing: border-box;
	}

	/* Un tableau hérité de l'ancien contenu peut déborder : il défile */
	.edt-colonnes table,
	table {
		max-width: 100%;
		display: block;
		overflow-x: auto;
	}
}

/* =========================================================================
   LISIBILITÉ DU TEXTE JUSTIFIÉ (desktop)
   ========================================================================= */

[style*="justify"] {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* =========================================================================
   LISTES
   -------------------------------------------------------------------------
   Les puces et numéros sont imposés en style en ligne sur <ul>/<ol> (voir
   edt_nettoyage). Ici on neutralise seulement ce qu'un thème peut ajouter
   par-dessus : puces dessinées en CSS (::before) qui feraient doublon, et
   <li> en display:block/flex qui font disparaître le marqueur natif.
   Le sélecteur [style*="list-style"] ne cible QUE les listes de l'éditeur.
   ========================================================================= */

ul[style*="list-style"]>li,
ol[style*="list-style"]>li {
	display: list-item !important;
	float: none !important;
	position: static;
}

ul[style*="list-style"]>li::before,
ol[style*="list-style"]>li::before {
	content: none !important;
}