/*
 * ITES - bloc de commentaires des articles MotoMag, allege (lot 2, 22/10/2026).
 * Charge par mu-plugins/ites-avada-traductions.php (1.4.0) sur les seuls contenus
 * a commentaires. Pourquoi une feuille : aucune option Avada ne regle les espacements
 * internes, la hauteur des champs, le focus ni la couleur du bouton du SEUL formulaire
 * de commentaires (form_input_height et les couleurs de bouton sont globales au site).
 * Portee : element « Commentaires » d'Avada Builder (.fusion-comments-tb) uniquement.
 */

/* Espacements : 55 / 65 / 40 px d'Avada ramenes a 32 / 24 / 24 px. */
.fusion-body .fusion-comments-tb .comments-container { margin-top: 32px; }
.fusion-body .fusion-comments-tb .commentlist { margin-bottom: 24px; }
.fusion-body .fusion-comments-tb #respond { margin-top: 24px; }
.fusion-body .fusion-comments-tb .comments-container #respond { margin-bottom: 24px; }

/* Titres : restent en H2 (hierarchie H1 > H2, porte A11y R3), a la taille d'un intertitre.
   Avada fixe le titre de liste par « #wrapper #main #comments .fusion-title h2 » (option
   globale « Post Titles Extras », partagee avec d'autres blocs : on ne la change pas). */
#wrapper #main .fusion-comments-tb #comments .fusion-title h2,
#wrapper #main .fusion-comments-tb #reply-title { font-size: 18px; line-height: 27px; font-weight: 700; }
/* La typographie adaptative d'Avada impose sa taille en !important a partir de la variable
   --fontSize (30, ecrite dans l'attribut style du titre) : seul un !important sur la
   VARIABLE la ramene a 18 (contre-mesure d'un !important existant, seule exception admise). */
#wrapper #main .fusion-comments-tb #comments .fusion-title h2 { --fontSize: 18 !important; --minFontSize: 18 !important; }

/* Lien « Repondre » : souligne pour se distinguer du texte gris voisin (WCAG 1.4.1). */
.fusion-body .fusion-comments-tb .comment-reply-link { text-decoration: underline; text-underline-offset: 2px; }

/* Libelles visibles, lies aux champs. */
.fusion-body .fusion-comments-tb .comment-form label {
	display: block;
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 600;
	color: #262528;
}
.fusion-body .fusion-comments-tb .comment-form .ites-obl { font-weight: 400; color: #5b5b60; }

/* Champs compacts, bordure lisible (contraste 4,6:1, WCAG 1.4.11). */
.fusion-body .fusion-comments-tb #comment-textarea { margin: 0 0 12px; }
.fusion-body .fusion-comments-tb #comment-textarea textarea {
	height: auto;
	min-height: 112px;
	padding: 10px 12px;
	font-size: 18px;
	line-height: 1.4;
	resize: vertical;
	border: 1px solid #757575;
}
.fusion-body .fusion-comments-tb #comment-input { display: flex; flex-wrap: wrap; gap: 0 16px; }
/* Le clearfix d'Avada (pseudo-elements) deviendrait un element flex et decalerait l'E-mail de 16 px. */
.fusion-body .fusion-comments-tb #comment-input::before,
.fusion-body .fusion-comments-tb #comment-input::after { content: none; }
.fusion-body .fusion-comments-tb #comment-input .ites-champ { flex: 1 1 240px; margin: 0 0 12px; }
.fusion-body .fusion-comments-tb #comment-input input {
	float: none;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 12px;
	font-size: 18px;
	border: 1px solid #757575;
}

/* Case cookie : conservee (RGPD), plus petite, cible de 20 px (WCAG 2.5.8). */
.fusion-body .fusion-comments-tb .comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 4px 0 12px;
}
.fusion-body .fusion-comments-tb .comment-form .comment-form-cookies-consent input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
}
.fusion-body .fusion-comments-tb .comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: #5b5b60;
}

/* Bouton : ROUGE MM #c61b1b (blanc dessus = 5,88:1) au lieu de #e83630 (3,6:1).
   Selecteur en #main : Avada colore ce bouton par « #main #comment-submit ». */
.fusion-body .fusion-comments-tb .form-submit { margin-top: 12px; }
#main .fusion-comments-tb #comment-submit { background: #c61b1b; border-color: #c61b1b; color: #fff; }
#main .fusion-comments-tb #comment-submit:hover,
#main .fusion-comments-tb #comment-submit:focus-visible { background: #100025; border-color: #100025; color: #fff; }
#main .fusion-comments-tb #comment-submit:focus-visible { outline: 2px solid #100025; outline-offset: 2px; }

/* Focus visible au clavier (WCAG 2.4.7) : anneau bleu MM. */
.fusion-body .fusion-comments-tb .comment-form input:focus-visible,
.fusion-body .fusion-comments-tb .comment-form textarea:focus-visible,
.fusion-body .fusion-comments-tb a:focus-visible {
	outline: 2px solid #100025;
	outline-offset: 2px;
}

/* Telephone et petite tablette (WCAG 1.4.10, porte A11y R2) : Avada decale le texte de
   chaque commentaire de 69 px (avatar 54 px flottant) et chaque niveau de reponse de
   40 px ; a 320 px il ne restait que 189 px au niveau 0 et 69 px au niveau 3.
   Ici : retrait de 10 px par niveau (5 niveaux maximum : 208 px utiles au niveau 5 a
   320 px), avatar 32 px a cote du nom, texte sous l'avatar sur toute la largeur. */
@media (max-width: 640px) {
	.fusion-body .fusion-comments-tb ol.commentlist ul.children { padding-left: 10px; }
	.fusion-body .fusion-comments-tb .commentlist .the-comment .avatar { width: 32px; margin-right: 10px; }
	.fusion-body .fusion-comments-tb .commentlist .the-comment .avatar img { width: 32px; height: 32px; }
	.fusion-body .fusion-comments-tb .commentlist .the-comment .comment-text { clear: both; margin-left: 0; padding-top: 8px; }
}

/* Lien « Regles des commentaires » (1.4.1, lot 4 du 23/10/2026) : discret, souligne (WCAG 1.4.1). */
.fusion-body .fusion-comments-tb .comment-form .ites-regles-commentaires { margin: 0 0 12px; font-size: 15px; line-height: 1.4; }
.fusion-body .fusion-comments-tb .comment-form .ites-regles-commentaires a { text-decoration: underline; text-underline-offset: 2px; }