/*
 * Contenu de l'éditeur classique (chantier 1.2).
 *
 * 82 % du corpus a été écrit avant Gutenberg : images flottées, légendes
 * `wp-caption`, galeries `[gallery]`, tableaux à largeurs fixes. Un thème FSE
 * ne stylise aucune de ces classes — les articles ne « plantent » pas, ils
 * deviennent laids, ce qui est pire parce que rien ne le signale.
 *
 * Deux règles de conduite ici :
 *   1. On reprend les TOKENS du design system, jamais les styles de l'ancien
 *      thème : le contenu hérité doit ressembler au nouveau site, pas à l'ancien.
 *   2. Aucune image, aucun tableau, aucune iframe ne peut dépasser sa colonne.
 *      La colonne d'article fait 720 px et le contenu classique porte des
 *      largeurs en dur (width="1024") : sans plafond, la page entière défile
 *      latéralement sur mobile.
 *
 * Chargé sur les vues singulières uniquement (inc/setup.php).
 *
 * RACINE DE SÉLECTEUR : `:is(.ld-prose, .editor-styles-wrapper)`. Le canevas du
 * bloc-éditeur n'a PAS de `.ld-prose` — cette classe vient du bloc post-content
 * des gabarits front. Sans le second terme, add_editor_style() chargerait ce
 * fichier sans qu'aucune règle ne s'applique, et la parité éditeur/front
 * annoncée serait fausse. `:is()` prend la spécificité la plus forte de ses
 * arguments : deux classes, donc spécificité inchangée.
 */

/* ─── Plafond universel : la règle qui empêche la casse de mise en page ─── */
:is(.ld-prose, .editor-styles-wrapper) img,
:is(.ld-prose, .editor-styles-wrapper) video {
	max-width: 100%;
	height: auto;
}

/*
 * Les iframes reçoivent le plafond de largeur mais PAS `height:auto` : une
 * iframe sans hauteur explicite retombe à 150 px, et l'embed disparaît.
 * Elle se laisse donc rétrécir en largeur, l'aspect étant géré par le lecteur
 * embarqué lui-même.
 */
:is(.ld-prose, .editor-styles-wrapper) iframe,
:is(.ld-prose, .editor-styles-wrapper) embed,
:is(.ld-prose, .editor-styles-wrapper) object {
	max-width: 100%;
	border: 0;
	border-radius: 16px;
}

/*
 * Les lecteurs vidéo, et EUX SEULS, reçoivent un ratio.
 *
 * Une iframe de 560×315 rétrécie à 340 px de large garde sa hauteur de 315 : le
 * lecteur embarqué ne peut pas modifier les dimensions de son propre cadre, la
 * vidéo se retrouve donc fortement encadrée de noir. Imposer 16/9 à TOUTES les
 * iframes casserait en revanche un formulaire ou une carte embarqués, qui ont
 * une hauteur propre. On cible donc par fournisseur, ce qui couvre l'écrasante
 * majorité des embeds de l'éditeur classique.
 */
:is(.ld-prose, .editor-styles-wrapper) iframe[src*="youtube.com"],
:is(.ld-prose, .editor-styles-wrapper) iframe[src*="youtube-nocookie.com"],
:is(.ld-prose, .editor-styles-wrapper) iframe[src*="youtu.be"],
:is(.ld-prose, .editor-styles-wrapper) iframe[src*="vimeo.com"],
:is(.ld-prose, .editor-styles-wrapper) iframe[src*="dailymotion.com"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Un flottant ne doit jamais s'échapper de l'article. */
:is(.ld-prose, .editor-styles-wrapper)::after {
	content: "";
	display: table;
	clear: both;
}

/* ─── Alignements de l'éditeur classique ─── */
/*
 * `calc(100% - 1.5em)` et non `100%` : la marge d'habillage s'ajoute À
 * L'EXTÉRIEUR de la largeur. Un flottant plafonné à 100 % plus 1.5em de marge
 * dépasse sa colonne — visible entre 641 et 720 px, avant que le dé-flottement
 * mobile ne s'active, et c'est exactement le débordement que ce fichier existe
 * pour empêcher.
 */
:is(.ld-prose, .editor-styles-wrapper) .alignleft {
	float: left;
	max-width: calc(100% - 1.5em);
	margin: .35em 1.5em 1.25em 0;
}

:is(.ld-prose, .editor-styles-wrapper) .alignright {
	float: right;
	max-width: calc(100% - 1.5em);
	margin: .35em 0 1.25em 1.5em;
}

:is(.ld-prose, .editor-styles-wrapper) .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	clear: both;
}

:is(.ld-prose, .editor-styles-wrapper) .alignnone {
	display: block;
	margin: 1.25em 0;
}

:is(.ld-prose, .editor-styles-wrapper) img.alignleft,
:is(.ld-prose, .editor-styles-wrapper) img.alignright,
:is(.ld-prose, .editor-styles-wrapper) img.aligncenter {
	border-radius: 16px;
}

/*
 * Sous 640 px, un flottant de 300 px laisse 40 px au texte : illisible.
 * On dé-flotte et on centre — c'est ce que fait le contenu bloc nativement.
 */
@media (max-width: 640px) {
	:is(.ld-prose, .editor-styles-wrapper) .alignleft,
	:is(.ld-prose, .editor-styles-wrapper) .alignright {
		float: none;
		display: block;
		margin: 1.25em auto;
	}
}

/* ─── Légendes `[caption]` ─── */
:is(.ld-prose, .editor-styles-wrapper) .wp-caption {
	/* La largeur en dur posée par l'éditeur classique ne doit pas déborder. */
	max-width: 100%;
	margin: 1.75em 0;
	padding: 0;
}

:is(.ld-prose, .editor-styles-wrapper) .wp-caption img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

:is(.ld-prose, .editor-styles-wrapper) .wp-caption-text,
:is(.ld-prose, .editor-styles-wrapper) figcaption {
	margin: .7em 0 0;
	color: rgba(243, 245, 248, .62);
	font-size: .875rem;
	line-height: 1.55;
	text-align: center;
	font-style: normal;
}

/* Une légende sous une image flottée reste dans la largeur du flottant. */
:is(.ld-prose, .editor-styles-wrapper) .wp-caption.alignleft,
:is(.ld-prose, .editor-styles-wrapper) .wp-caption.alignright {
	margin-top: .35em;
}

/* ─── Galeries `[gallery]` ─── */
:is(.ld-prose, .editor-styles-wrapper) .gallery {
	display: grid;
	gap: 12px;
	margin: 1.75em 0;
	grid-template-columns: repeat(3, 1fr);
}

:is(.ld-prose, .editor-styles-wrapper) .gallery-columns-1 { grid-template-columns: 1fr; }
:is(.ld-prose, .editor-styles-wrapper) .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
:is(.ld-prose, .editor-styles-wrapper) .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
:is(.ld-prose, .editor-styles-wrapper) .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
:is(.ld-prose, .editor-styles-wrapper) .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
:is(.ld-prose, .editor-styles-wrapper) .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
:is(.ld-prose, .editor-styles-wrapper) .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
:is(.ld-prose, .editor-styles-wrapper) .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
:is(.ld-prose, .editor-styles-wrapper) .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

:is(.ld-prose, .editor-styles-wrapper) .gallery-item {
	/* Le cœur pose `width: 33.33%` en inline sur chaque item : la grille
	   reprend la main, sinon les colonnes se cumulent avec le gap. */
	width: auto !important;
	margin: 0;
	text-align: center;
}

:is(.ld-prose, .editor-styles-wrapper) .gallery-item img,
:is(.ld-prose, .editor-styles-wrapper) .gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
}

:is(.ld-prose, .editor-styles-wrapper) .gallery-caption {
	display: block;
	margin: .5em 0 0;
	color: rgba(243, 245, 248, .62);
	font-size: .8125rem;
	line-height: 1.45;
}

/*
 * `:not(.gallery-columns-1)` : une galerie délibérément sur une colonne le reste.
 * La forcer à deux afficherait son image unique à la moitié de la largeur.
 */
@media (max-width: 640px) {
	:is(.ld-prose, .editor-styles-wrapper) .gallery:not(.gallery-columns-1) {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ─── Tableaux hérités ─── */
/*
 * Le contenu classique porte des `width` en dur et des `border="1"`. On force
 * le défilement DANS le tableau plutôt que de laisser la page défiler.
 */
/*
 * `:not(.ld-chart-table)` : le tableau d'accessibilité des graphiques est
 * volontairement hors flux et masqué — il ne doit pas devenir une zone
 * défilante d'un pixel.
 */
:is(.ld-prose, .editor-styles-wrapper) table:not(.ld-chart-table):not(.screen-reader-text) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

:is(.ld-prose, .editor-styles-wrapper) table[border] th,
:is(.ld-prose, .editor-styles-wrapper) table[border] td {
	border: 1px solid rgba(255, 255, 255, .08);
}

/* ─── Éléments de texte qu'un thème FSE ne stylise pas ─── */
:is(.ld-prose, .editor-styles-wrapper) dl { margin: 0 0 1.25em; }
:is(.ld-prose, .editor-styles-wrapper) dt { font-weight: 700; color: #f3f5f8; margin-top: 1em; }
:is(.ld-prose, .editor-styles-wrapper) dd { margin: .25em 0 0 1.5em; color: rgba(243, 245, 248, .92); }

:is(.ld-prose, .editor-styles-wrapper) sub,
:is(.ld-prose, .editor-styles-wrapper) sup { font-size: .72em; line-height: 0; position: relative; vertical-align: baseline; }
:is(.ld-prose, .editor-styles-wrapper) sup { top: -.5em; }
:is(.ld-prose, .editor-styles-wrapper) sub { bottom: -.25em; }

:is(.ld-prose, .editor-styles-wrapper) small { font-size: .875em; color: rgba(243, 245, 248, .72); }
:is(.ld-prose, .editor-styles-wrapper) abbr[title] { text-decoration: underline dotted; cursor: help; }
:is(.ld-prose, .editor-styles-wrapper) mark { background: rgba(92, 224, 216, .18); color: #f3f5f8; padding: .05em .25em; border-radius: 4px; }
:is(.ld-prose, .editor-styles-wrapper) del { text-decoration: line-through; color: rgba(243, 245, 248, .55); }
:is(.ld-prose, .editor-styles-wrapper) ins { text-decoration: none; border-bottom: 2px solid #84ebad; }
:is(.ld-prose, .editor-styles-wrapper) kbd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .85em;
	padding: .1em .4em;
	border: 1px solid rgba(255, 255, 255, .16);
	border-bottom-width: 2px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .06);
}
:is(.ld-prose, .editor-styles-wrapper) address { font-style: normal; color: rgba(243, 245, 248, .92); }

/* Très ancien HTML : `<center>` reste valide dans un corps d'article. */
:is(.ld-prose, .editor-styles-wrapper) center { display: block; text-align: center; }

/* ─── Listes imbriquées ─── */
/*
 * `:is(.ld-prose, .editor-styles-wrapper) ul` retire les puces natives et pose une pastille en dégradé.
 * Sans règle dédiée, un niveau 2 hérite de la même pastille et l'imbrication
 * cesse d'être lisible.
 */
:is(.ld-prose, .editor-styles-wrapper) ul ul > li::before,
:is(.ld-prose, .editor-styles-wrapper) ol ul > li::before {
	width: 7px;
	height: 7px;
	top: .62em;
	background: rgba(132, 235, 173, .55);
	box-shadow: none;
}

:is(.ld-prose, .editor-styles-wrapper) ul ul,
:is(.ld-prose, .editor-styles-wrapper) ul ol,
:is(.ld-prose, .editor-styles-wrapper) ol ul,
:is(.ld-prose, .editor-styles-wrapper) ol ol {
	margin: .5em 0 .5em;
}

:is(.ld-prose, .editor-styles-wrapper) ol ol { list-style-type: lower-alpha; }
:is(.ld-prose, .editor-styles-wrapper) ol ol ol { list-style-type: lower-roman; }

/* ─── Lien « lire la suite » du classique ─── */
:is(.ld-prose, .editor-styles-wrapper) .more-link {
	display: inline-block;
	margin-top: .5em;
	font-weight: 600;
}

/* ─── Bloc comparatif hérité (chantier 1.7) ─── */
/*
 * `[aces-casinos-N]` insérait un comparatif de produits au fil du texte : 3 112
 * occurrences dans 546 contenus, six par article en moyenne. Le bloc est porté
 * vers le catalogue produit et réutilise `.ld-saascard`, déjà stylée par le
 * thème ; il ne reste ici que la grille qui les dispose et le titre.
 */
:is(.ld-prose, .editor-styles-wrapper) .ld-legacy-comparatif {
	margin: 2em 0;
	clear: both;
}

:is(.ld-prose, .editor-styles-wrapper) .ld-legacy-comparatif-title {
	margin: 0 0 .8em;
}

:is(.ld-prose, .editor-styles-wrapper) .ld-saasgrid-items {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(var(--ld-cols, 1), minmax(0, 1fr));
}

:is(.ld-prose, .editor-styles-wrapper) .ld-saasgrid-cols-1 .ld-saasgrid-items { --ld-cols: 1; }
:is(.ld-prose, .editor-styles-wrapper) .ld-saasgrid-cols-2 .ld-saasgrid-items { --ld-cols: 2; }
:is(.ld-prose, .editor-styles-wrapper) .ld-saasgrid-cols-3 .ld-saasgrid-items { --ld-cols: 3; }
:is(.ld-prose, .editor-styles-wrapper) .ld-saasgrid-cols-4 .ld-saasgrid-items { --ld-cols: 4; }

/*
 * La colonne d'article fait 720 px : trois cartes y tiennent, au-delà elles
 * deviennent illisibles. Sous 640 px on repasse à une colonne — une carte de
 * 150 px de large ne rend service à personne.
 */
@media (max-width: 900px) {
	:is(.ld-prose, .editor-styles-wrapper) .ld-saasgrid-cols-3 .ld-saasgrid-items,
	:is(.ld-prose, .editor-styles-wrapper) .ld-saasgrid-cols-4 .ld-saasgrid-items { --ld-cols: 2; }
}

@media (max-width: 640px) {
	:is(.ld-prose, .editor-styles-wrapper) .ld-saasgrid-items { --ld-cols: 1 !important; }
}

/* La note éditoriale, absente des cartes du listing. */
:is(.ld-prose, .editor-styles-wrapper) .ld-saascard-score {
	margin: 0;
	font-size: .875rem;
	font-weight: 600;
	color: #84ebad;
}

/* Le lien de carte ne doit pas hériter du dégradé des liens de prose. */
:is(.ld-prose, .editor-styles-wrapper) a.ld-saascard,
:is(.ld-prose, .editor-styles-wrapper) a.ld-saascard:hover {
	background: rgba(12, 18, 36, .65);
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: #f3f5f8;
	text-decoration: none;
}