/* =========================================================================
   LargeGamer — Comments
   Aucune image, aucune police chargee, aucun JavaScript. Le repli se fait
   avec une case a cocher masquee : le bloc a sa taille definitive des le
   premier rendu, CLS strictement nul.
   ========================================================================= */

#lg-comments {
	--lgc-bg: #0e0b16;
	--lgc-surface: #130f1f;
	--lgc-violet: #2e1f49;
	--lgc-cyan: #6fc3f7;
	--lgc-cyan-bright: #6fd6ff;
	--lgc-gold: #e8b338;
	--lgc-text: #f2f4f3;
	--lgc-dim: #a9a6b8;
	--lgc-line: rgba(111, 195, 247, 0.18);

	display: block;
	box-sizing: border-box;
	margin: 26px 0 0;
	padding: 22px;
	background: linear-gradient(160deg, var(--lgc-violet) 0%, var(--lgc-surface) 55%, var(--lgc-bg) 100%);
	border: 1px solid rgba(111, 195, 247, 0.28);
	border-radius: 10px;
	color: var(--lgc-text);
	font-size: 15px;
	line-height: 1.55;

	/* Le bloc est parfois insere dans une Row Divi en `et_flex_row` : un
	   enfant en display block s'y reduit a la largeur de son contenu. Ces
	   trois lignes lui rendent la pleine largeur, sans effet ailleurs. */
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	flex: 1 1 100%;
}

#lg-comments * {
	box-sizing: border-box;
}

#lg-comments .lg-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   Titre
   ------------------------------------------------------------------------- */
#lg-comments .lg-comments__title {
	margin: 0 0 18px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--lgc-line);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lgc-cyan);
}

#lg-comments .lg-comments__closed {
	margin: 16px 0 0;
	font-size: 14px;
	color: var(--lgc-dim);
}

/* -------------------------------------------------------------------------
   La liste

   Selecteurs doubles et !important sur les puces : Divi applique
   `.entry-content ol` et `.entry-content li`, plus specifiques qu'une classe
   seule. Sans ca, une puce native se glisse devant chaque commentaire.
   ------------------------------------------------------------------------- */
#lg-comments .lg-comments__list,
#lg-comments .lg-cmt__children {
	margin: 0;
	padding: 0;
	list-style: none !important;
	list-style-type: none !important;
}

#lg-comments .lg-comments__list > li,
#lg-comments .lg-cmt__children > li {
	list-style: none !important;
	list-style-type: none !important;
}

#lg-comments .lg-comments__list > li::marker,
#lg-comments .lg-cmt__children > li::marker {
	content: none;
}

#lg-comments .lg-cmt {
	margin: 0 0 14px;
	padding: 0;
}

/* Les reponses : legerement rentrees, avec un filet qui montre le fil. */
#lg-comments .lg-cmt__children {
	margin: 14px 0 0 0;
	padding-left: 18px;
	border-left: 2px solid rgba(111, 195, 247, 0.2);
}

#lg-comments .lg-cmt__children > .lg-cmt:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Un commentaire
   ------------------------------------------------------------------------- */
#lg-comments .lg-cmt__box {
	--lgc-box: #14101d; /* opaque : sert aussi de couleur de fondu au repli */
	padding: 14px 16px;
	background: var(--lgc-box);
	border: 1px solid rgba(111, 195, 247, 0.16);
	border-radius: 8px;
	transition: border-color 0.18s ease;
}

#lg-comments .lg-cmt__box:hover {
	border-color: rgba(111, 195, 247, 0.3);
}

#lg-comments .lg-cmt--by-author > .lg-cmt__box {
	--lgc-box: #221838;
	border-color: rgba(232, 179, 56, 0.4);
	background: var(--lgc-box);
}

#lg-comments .lg-cmt__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 10px;
}

/* La pastille d'initiale : dessinee, jamais telechargee. */
#lg-comments .lg-cmt__avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
}

#lg-comments .lg-cmt__avatar--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg, hsl(var(--lgc-hue, 265) 42% 38%), hsl(var(--lgc-hue, 265) 46% 22%));
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

#lg-comments .lg-cmt__avatar-img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

#lg-comments .lg-cmt__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	min-width: 0;
}

#lg-comments .lg-cmt__author {
	font-size: 15px;
	font-weight: 700;
	color: var(--lgc-text);
	overflow-wrap: anywhere;
}

#lg-comments .lg-cmt__author a {
	color: var(--lgc-cyan);
	text-decoration: none;
}

#lg-comments .lg-cmt__author a:hover {
	color: var(--lgc-cyan-bright);
}

#lg-comments .lg-cmt__badge {
	padding: 1px 9px;
	border: 1px solid rgba(232, 179, 56, 0.45);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--lgc-gold);
	white-space: nowrap;
}

#lg-comments .lg-cmt__date,
#lg-comments .lg-cmt__date:hover {
	font-size: 12.5px;
	color: var(--lgc-dim);
	text-decoration: none;
	white-space: nowrap;
}

#lg-comments .lg-cmt__date:hover {
	color: var(--lgc-cyan);
}

#lg-comments .lg-cmt__pending {
	margin: 0 0 10px;
	padding: 7px 11px;
	background: rgba(232, 179, 56, 0.1);
	border-left: 3px solid var(--lgc-gold);
	border-radius: 4px;
	font-size: 13.5px;
	color: var(--lgc-gold);
}

/* -------------------------------------------------------------------------
   Le texte
   ------------------------------------------------------------------------- */
#lg-comments .lg-cmt__text {
	color: var(--lgc-text);
	overflow-wrap: anywhere;
}

#lg-comments .lg-cmt__text p {
	margin: 0 0 10px;
	line-height: 1.6;
}

#lg-comments .lg-cmt__text p:last-child {
	margin-bottom: 0;
}

#lg-comments .lg-cmt__text a {
	color: var(--lgc-cyan);
	text-decoration: underline;
	text-underline-offset: 2px;
}

#lg-comments .lg-cmt__text a:hover {
	color: var(--lgc-cyan-bright);
}

/* Petit repere sur les liens qui quittent le site. */
#lg-comments .lg-cmt__text a[target="_blank"]::after {
	content: "\2197";
	display: inline-block;
	margin-left: 2px;
	font-size: 0.82em;
	text-decoration: none;
	vertical-align: baseline;
}

#lg-comments .lg-cmt__text blockquote {
	margin: 10px 0;
	padding: 8px 14px;
	background: rgba(46, 31, 73, 0.4);
	border-left: 3px solid var(--lgc-cyan);
	border-radius: 0 4px 4px 0;
	color: var(--lgc-dim);
	font-style: normal;
}

#lg-comments .lg-cmt__text code,
#lg-comments .lg-cmt__text pre {
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(111, 195, 247, 0.16);
	border-radius: 4px;
	color: #d9e6ef;
	font-size: 13px;
}

#lg-comments .lg-cmt__text code {
	padding: 1px 5px;
}

#lg-comments .lg-cmt__text pre {
	padding: 10px 12px;
	overflow-x: auto;
}

#lg-comments .lg-cmt__text img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* -------------------------------------------------------------------------
   Le repli — case a cocher masquee, zero JavaScript

   La hauteur repliee est fixee en CSS et appliquee des le premier rendu :
   rien ne bouge apres coup, donc rien a compter en CLS. Le texte complet est
   present dans le HTML, il est seulement masque : les moteurs le lisent.
   ------------------------------------------------------------------------- */
#lg-comments .lg-cmt__text--fold {
	position: relative;
}

#lg-comments .lg-cmt__switch {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

#lg-comments .lg-cmt__clip {
	position: relative;
	max-height: 9.6em; /* environ six lignes */
	overflow: hidden;
}

/* Le degrade qui annonce qu'il reste du texte. */
#lg-comments .lg-cmt__clip::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3.2em;
	background: linear-gradient(to bottom, rgba(20, 16, 29, 0), var(--lgc-box, #14101d) 88%);
	pointer-events: none;
}

#lg-comments .lg-cmt__switch:checked ~ .lg-cmt__clip {
	max-height: none;
	overflow: visible;
}

#lg-comments .lg-cmt__switch:checked ~ .lg-cmt__clip::after {
	content: none;
}

#lg-comments .lg-cmt__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 4px 12px;
	background: rgba(46, 31, 73, 0.65);
	border: 1px solid rgba(111, 195, 247, 0.3);
	border-radius: 999px;
	color: var(--lgc-cyan);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	user-select: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#lg-comments .lg-cmt__more::after {
	content: "\25BE";
	font-size: 11px;
	line-height: 1;
	transition: transform 0.18s ease;
}

#lg-comments .lg-cmt__more:hover {
	background: rgba(46, 31, 73, 0.95);
	border-color: var(--lgc-cyan-bright);
	color: var(--lgc-cyan-bright);
}

#lg-comments .lg-cmt__switch:focus-visible ~ .lg-cmt__more {
	outline: 3px solid var(--lgc-cyan-bright);
	outline-offset: 2px;
}

#lg-comments .lg-cmt__more-close {
	display: none;
}

#lg-comments .lg-cmt__switch:checked ~ .lg-cmt__more .lg-cmt__more-open {
	display: none;
}

#lg-comments .lg-cmt__switch:checked ~ .lg-cmt__more .lg-cmt__more-close {
	display: inline;
}

#lg-comments .lg-cmt__switch:checked ~ .lg-cmt__more::after {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
   Pied du commentaire
   ------------------------------------------------------------------------- */
#lg-comments .lg-cmt__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
}

#lg-comments .lg-cmt__foot .comment-reply-link,
#lg-comments .lg-cmt__edit a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--lgc-dim);
	text-decoration: none;
	transition: color 0.15s ease;
}

#lg-comments .lg-cmt__foot .comment-reply-link:hover,
#lg-comments .lg-cmt__edit a:hover {
	color: var(--lgc-cyan-bright);
}

#lg-comments .lg-cmt__foot .comment-reply-link:focus-visible {
	outline: 2px solid var(--lgc-cyan-bright);
	outline-offset: 3px;
	border-radius: 3px;
}

#lg-comments .lg-cmt__reply-ico {
	font-size: 14px;
	line-height: 1;
}

/* -------------------------------------------------------------------------
   Le pager, facon forum
   ------------------------------------------------------------------------- */
#lg-comments .lg-pager {
	margin: 18px 0 4px;
}

#lg-comments .lg-pager__list {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none !important;
	list-style-type: none !important;
}

#lg-comments .lg-pager__item {
	margin: 0;
	padding: 0;
	list-style: none !important;
	list-style-type: none !important;
}

#lg-comments .lg-pager__item::marker {
	content: none;
}

#lg-comments .lg-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 9px;
	background: rgba(14, 11, 22, 0.6);
	border: 1px solid rgba(111, 195, 247, 0.26);
	border-radius: 8px;
	color: var(--lgc-cyan);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

#lg-comments .lg-pager a.page-numbers:hover {
	background: rgba(46, 31, 73, 0.85);
	border-color: var(--lgc-cyan-bright);
	color: var(--lgc-cyan-bright);
	transform: translateY(-2px);
}

#lg-comments .lg-pager a.page-numbers:focus-visible {
	outline: 3px solid var(--lgc-cyan-bright);
	outline-offset: 2px;
}

#lg-comments .lg-pager .page-numbers.current {
	background: linear-gradient(160deg, var(--lgc-violet), var(--lgc-bg));
	border-color: rgba(232, 179, 56, 0.55);
	color: var(--lgc-gold);
}

#lg-comments .lg-pager .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var(--lgc-dim);
	min-width: 20px;
	padding: 0;
}

#lg-comments .lg-pager__chevron {
	display: block;
}

/* -------------------------------------------------------------------------
   Le formulaire
   ------------------------------------------------------------------------- */
#lg-comments .lg-cform {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--lgc-line);
}

#lg-comments .lg-cform__title {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lgc-cyan);
}

#lg-comments .lg-cform__cancel a {
	margin-left: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lgc-dim);
	text-decoration: none;
}

#lg-comments .lg-cform__cancel a:hover {
	color: var(--lgc-cyan-bright);
}

#lg-comments .lg-cform__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0 14px;
}

/* Le formulaire est un conteneur flex, et d'autres extensions injectent des
   elements dedans par l'action `comment_form` — Akismet pose un nonce et des
   champs caches, un anti-spam peut ajouter une case a cocher. Un enfant
   inconnu deviendrait un element flex etroit, colle au bouton d'envoi.
   Par defaut, tout enfant direct prend donc la largeur entiere ; seuls nos
   deux demi-champs, declares juste apres, s'y soustraient. */
#lg-comments .lg-cform__form > * {
	flex: 1 1 100%;
}

#lg-comments .lg-cform__field {
	flex: 1 1 100%;
	margin: 0 0 12px;
}

#lg-comments .lg-cform__field--half {
	flex: 1 1 calc(50% - 7px);
	min-width: 200px;
}

#lg-comments .lg-cform__field label {
	display: block;
	margin-bottom: 5px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lgc-dim);
}

#lg-comments .lg-cform__req {
	color: var(--lgc-gold);
}

#lg-comments .lg-cform__form input[type="text"],
#lg-comments .lg-cform__form input[type="email"],
#lg-comments .lg-cform__form input[type="url"],
#lg-comments .lg-cform__form textarea {
	width: 100%;
	padding: 10px 12px;
	background: rgba(14, 11, 22, 0.7);
	border: 1px solid rgba(111, 195, 247, 0.24);
	border-radius: 8px;
	color: var(--lgc-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	transition: border-color 0.15s ease, background 0.15s ease;
}

#lg-comments .lg-cform__form textarea {
	min-height: 140px;
	resize: vertical;
}

#lg-comments .lg-cform__form input:focus,
#lg-comments .lg-cform__form textarea:focus {
	background: rgba(46, 31, 73, 0.5);
	border-color: var(--lgc-cyan-bright);
	outline: 2px solid rgba(111, 214, 255, 0.35);
	outline-offset: 1px;
}

#lg-comments .lg-cform__form ::placeholder {
	color: rgba(169, 166, 184, 0.7);
}

#lg-comments .lg-cform__consent {
	flex: 1 1 100%;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 13.5px;
	color: var(--lgc-dim);
}

#lg-comments .lg-cform__consent input {
	margin-top: 3px;
	accent-color: #6fd6ff;
}

#lg-comments .lg-cform__consent label {
	margin: 0;
	line-height: 1.45;
}

#lg-comments .form-submit {
	flex: 1 1 100%;
	margin: 0;
}

#lg-comments .lg-cform__submit,
#lg-comments input.lg-cform__submit {
	padding: 12px 26px;
	background: linear-gradient(160deg, var(--lgc-violet) 0%, var(--lgc-bg) 100%);
	border: 1px solid var(--lgc-cyan);
	border-radius: 8px;
	color: var(--lgc-cyan-bright);
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#lg-comments .lg-cform__submit:hover,
#lg-comments input.lg-cform__submit:hover {
	background: linear-gradient(160deg, #3a2659 0%, #150f22 100%);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(111, 195, 247, 0.18);
}

#lg-comments .lg-cform__submit:focus-visible {
	outline: 3px solid var(--lgc-cyan-bright);
	outline-offset: 3px;
}

#lg-comments .comment-notes,
#lg-comments .logged-in-as {
	margin: 0 0 12px;
	flex: 1 1 100%;
	font-size: 13px;
	color: var(--lgc-dim);
}

#lg-comments .logged-in-as a {
	color: var(--lgc-cyan);
	text-decoration: none;
}

/* Mention de confidentialite d'Akismet, si tu l'actives dans ses reglages.
   Elle est posee par l'action `comment_form_after`, donc apres le formulaire
   et non dedans. */
#lg-comments .akismet_comment_form_privacy_notice {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--lgc-dim);
}

#lg-comments .akismet_comment_form_privacy_notice a {
	color: var(--lgc-cyan);
	text-decoration: underline;
	text-underline-offset: 2px;
}

#lg-comments .akismet_comment_form_privacy_notice a:hover {
	color: var(--lgc-cyan-bright);
}

/* -------------------------------------------------------------------------
   L'ancre de saut ne doit pas se glisser sous un en-tete collant.
   Pas de `scroll-behavior` ici : Divi gere deja le defilement fluide en
   JavaScript et les deux se neutralisent (constate sur le sommaire en 1.0.3).
   ------------------------------------------------------------------------- */
#lg-comments,
#lg-comments .lg-cmt {
	scroll-margin-top: 90px;
}

/* -------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------- */
@media (max-width: 700px) {
	#lg-comments {
		padding: 16px 14px;
	}

	#lg-comments .lg-cmt__box {
		padding: 12px 13px;
	}

	#lg-comments .lg-cmt__children {
		padding-left: 11px;
	}

	#lg-comments .lg-cmt__avatar,
#lg-comments .lg-cmt__avatar-img {
		width: 34px;
		height: 34px;
	}

	#lg-comments .lg-cmt__avatar--initial {
		font-size: 15px;
	}

	#lg-comments .lg-cform__field--half {
		flex: 1 1 100%;
	}

	/* Neuf tuiles au maximum doivent tenir sur une seule ligne : au-dela, la
	   fleche droite bascule seule en dessous et le bloc devient bancal. */
	#lg-comments .lg-pager .page-numbers {
		min-width: 32px;
		height: 40px;
		padding: 0 3px;
		font-size: 13.5px;
	}

	#lg-comments .lg-pager .page-numbers.dots {
		min-width: 12px;
	}

	#lg-comments .lg-pager__chevron {
		width: 18px;
		height: 18px;
	}

	#lg-comments .lg-pager__list {
		gap: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#lg-comments *,
#lg-comments *::after {
		transition: none !important;
	}

	#lg-comments .lg-pager a.page-numbers:hover,
#lg-comments .lg-cform__submit:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Tres petits ecrans (320 px : iPhone SE de premiere generation, Galaxy Fold
   replie). Les points de suspension ne sont qu'un repere visuel, on les
   escamote pour que les fleches restent sur la meme ligne que les numeros.
   ------------------------------------------------------------------------- */
@media (max-width: 360px) {
	#lg-comments .lg-pager__item--dots {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Le champ leurre du pot de miel.

   Seule règle de cette feuille qui n'est PAS préfixée par `#lg-comments` :
   si un jour `LGC_TAKEOVER` passe à false, le champ se retrouve dans le
   formulaire du thème, hors de notre conteneur — et un leurre visible serait
   pire que pas de leurre du tout.

   Pas de `display: none` : c'est le premier signal que cherchent les robots
   un peu évolués pour ignorer un champ. On le sort de l'écran.
   ------------------------------------------------------------------------- */
.lg-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}