/*
 * Tesla Expert : lisibilité et accessibilité (recette du 14/10/2026, constats UX-03 à UX-08 et UX-16).
 * Chargée par mu-plugins/te-lisibilite.php après les styles de BeTheme, version filemtime (cache PowerBoost).
 *
 * Règles de portée :
 * - jamais rien sous .te-sc (annuaire des Superchargeurs, traité ailleurs) : les sélecteurs larges portent
 *   :not(:where(.te-sc *)), qui n'ajoute aucune spécificité ;
 * - l'accueil (page 70, Muffin Builder) ne change que de couleurs et de focus : tailles, colonne et tableaux
 *   sont réservés à body:not(.page-id-70) ;
 * - téléphone = moins de 768 px, comme les points de rupture du thème.
 * Palette : bleu #0057D9, noir #2B2B2B, gris métas #5F6670, gris clair #C4CCD4.
 */

/* ---------------------------------------------------------------------------------------------
 * UX-03 : hiérarchie des titres (article, page, pilier, catégorie, blog ; pas l'accueil).
 * Le H1 est dans le bandeau du thème (#Subheader .title, 35 px graisse 400 avant) ; les H2 et H3 du texte
 * sont dans .the_content_wrapper (H2 40 px graisse 500 avant, plus gros que le H1).
 * ------------------------------------------------------------------------------------------- */
body:not(.page-id-70) #Subheader .title {
	font-size: 42px;
	font-weight: 700;
	line-height: 1.2;
}
body:not(.page-id-70) .the_content_wrapper h2:not(:where(.te-sc *)) {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.25;
}
body:not(.page-id-70) .the_content_wrapper h3:not(:where(.te-sc *)) {
	font-size: 24px;
}
@media only screen and (max-width: 767px) {
	body:not(.page-id-70) #Subheader .title {
		font-size: 28px;
	}
	body:not(.page-id-70) .the_content_wrapper h2:not(:where(.te-sc *)) {
		font-size: 24px;
	}
	body:not(.page-id-70) .the_content_wrapper h3:not(:where(.te-sc *)) {
		font-size: 20px;
	}
}

/* ---------------------------------------------------------------------------------------------
 * UX-05 : corps du texte. 13 px sur 19 px en téléphone avant, 18 px sur 28 px sur ordinateur.
 * Paragraphes et listes du contenu (pas l'accueil). Les extraits des cartes ont leur propre échelle,
 * plus bas (cartes des catégories et du blog).
 * ------------------------------------------------------------------------------------------- */
body:not(.page-id-70) .the_content_wrapper :is(p, li):not(:where(.te-sc *)) {
	font-size: 18px;
	line-height: 1.6;
}
@media only screen and (max-width: 767px) {
	body:not(.page-id-70) .the_content_wrapper :is(p, li):not(:where(.te-sc *)) {
		font-size: 17px;
	}
}

/* Cartes d'articles des catégories et du blog (grille BeTheme .posts_group .post-item ; pas l'accueil) :
 * titre au-dessus de l'extrait, sinon l'extrait paraît plus important que le titre (13 px sur téléphone
 * avant, contre un extrait agrandi). Titre 20 px graisse 600 (19 px sur téléphone), extrait 16 px,
 * métas de carte 14 px. */
:is(body.archive, body.blog) .posts_group .post-item .post-title .entry-title:not(:where(.te-sc *)),
:is(body.archive, body.blog) .posts_group .post-item .post-title .entry-title a:not(:where(.te-sc *)) {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}
:is(body.archive, body.blog) .posts_group .post-item .post-excerpt:not(:where(.te-sc *)) {
	font-size: 16px;
	line-height: 1.55;
}
:is(body.archive, body.blog) .posts_group .post-item .post-meta:not(:where(.te-sc *)),
:is(body.archive, body.blog) .posts_group .post-item .post-meta :is(span, a, i):not(:where(.te-sc *)) {
	font-size: 14px;
	color: #5F6670;
}
@media only screen and (max-width: 767px) {
	:is(body.archive, body.blog) .posts_group .post-item .post-title .entry-title:not(:where(.te-sc *)),
	:is(body.archive, body.blog) .posts_group .post-item .post-title .entry-title a:not(:where(.te-sc *)) {
		font-size: 19px;
	}
}

/* ---------------------------------------------------------------------------------------------
 * UX-04 : longueur de ligne. Colonne de lecture de 720 px centrée (environ 70 caractères à 18 px) sur
 * les articles, pages et piliers ; tableaux et blocs larges jusqu'à 960 px. Ni l'accueil, ni les
 * catégories, ni le blog (grilles de cartes). La colonne est posée sur les enfants directs du contenu,
 * pas sur l'enveloppe, pour que les tableaux puissent dépasser.
 * ------------------------------------------------------------------------------------------- */
:is(body.single-post, body.page:not(.page-id-70)) .the_content_wrapper:not(:where(.te-sc *)) {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
:is(body.single-post, body.page:not(.page-id-70)) .the_content_wrapper:not(:where(.te-sc *)) > :not(table, .wp-block-table, .alignwide, .alignfull, .alignleft, .alignright, style, script) {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
:is(body.single-post, body.page:not(.page-id-70)) .the_content_wrapper:not(:where(.te-sc *)) > :is(table, .wp-block-table, .alignwide, .alignfull) {
	max-width: 960px;
}
/* Ligne de métas des articles (« Publié par … le … », menus Étiquettes et Catégories) : alignée sur la
 * colonne de 720 px, comme le texte (elle restait sur la largeur du thème, 1 196 px). */
body.single-post .section-post-header .title_wrapper:not(:where(.te-sc *)) {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------------------------
 * UX-06 : couleurs (palette de Charles, daltonien). Un seul bleu, #0057D9 (6,24:1 sur blanc, 5,6:1 sur le fond bleuté de l’accueil), à la place
 * de #3385D7 (3,83:1) partout où il porte du texte ou un fond de bouton.
 * ------------------------------------------------------------------------------------------- */

/* Liens : même spécificité que la règle « a » du thème, gagnent par l'ordre de chargement ; les règles
 * plus précises du thème (pied, menu latéral) gardent la main. Survol #5EA0E8 avant : un troisième bleu. */
a:not(:where(.te-sc *)) {
	color: #0057D9;
}
a:not(:where(.te-sc *)):hover {
	color: #2B2B2B;
}

/* Liens du texte : soulignés, la couleur ne suffit pas à un lecteur daltonien. Contenu des articles,
 * pages, piliers et catégories, et paragraphes de l'accueil (liens A6, A7, A10 : rien ne bouge). */
:is(.the_content_wrapper, .column_attr) :is(p, li, td, th, dd, blockquote) a:not(.button, .button_theme, .action_button):not(:where(.te-sc *)) {
	color: #0057D9;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
:is(.the_content_wrapper, .column_attr) :is(p, li, td, th, dd, blockquote) a:not(.button, .button_theme, .action_button):not(:where(.te-sc *)):hover {
	color: #2B2B2B;
}

/* Boutons du thème (fond #3385D7 avant) : « Superchargeurs » de l'en-tête et du menu latéral, boutons de
 * formulaire du thème. Les trois boutons de l'accueil (« Tous les guides », « Voir les Superchargeurs »,
 * « Contact ») portent background-color:#3385d7!important dans leur attribut style (réglage Muffin, voir
 * outils/accueil/construire_accueil.php) : aucune feuille ne peut les reprendre, à changer dans le builder. */
.action_button:not(:where(.te-sc *)),
.action_button:not(:where(.te-sc *)):hover,
.button-default .button_theme:not(:where(.te-sc *)),
.button-default a.button.button_theme:not(:where(.te-sc *)),
.button-default button:not(:where(.te-sc *, .te-consent *, .wpforms-container *)),
.button-default input[type="submit"]:not(:where(.te-sc *, .wpforms-container *)),
.button-default input[type="button"]:not(:where(.te-sc *, .wpforms-container *)),
.button-default input[type="reset"]:not(:where(.te-sc *, .wpforms-container *)) {
	background-color: #0057D9;
	color: #fff;
}

/* Autres porteurs du bleu du thème : couleur de thème, fonds de thème (page active de la pagination,
 * filtre actif), entrée active du menu, bouton « MENU » du téléphone, filet du menu, sélection de texte. */
.themecolor:not(:where(.te-sc *)),
#Top_bar .menu > li:is(.current-menu-item, .current_page_item, .current-menu-parent, .current-page-parent, .current-menu-ancestor, .current-page-ancestor, .current_page_ancestor, .hover) > a,
#Top_bar .responsive-menu-toggle {
	color: #0057D9;
}
.themebg:not(:where(.te-sc *)),
.pager .pages a:is(:hover, .active),
.pager .pages span.page-numbers.current,
#Filters .filters_wrapper ul li:is(.current-cat) a,
#Filters .filters_wrapper ul li a:hover,
#Top_bar .menu > li a:not(.menu-toggle)::after {
	background-color: #0057D9;
}
#Filters .filters_wrapper ul li:is(.current-cat) a,
#Filters .filters_wrapper ul li a:hover,
.pager .pages a:is(:hover, .active) {
	color: #fff;
}
::selection {
	background-color: #0057D9;
	color: #fff;
}

/* Métas (auteur, « le », date) : #A8A8A8 avant (2,38:1), #5F6670 (5,8:1). Accueil compris (couleur seule). */
:is(.post-meta, .post-meta a, .date_label, .author-date, .author-date a):not(:where(.te-sc *)) {
	color: #5F6670;
}

/* Listes du contenu : #737E86 avant (thème : .the_content_wrapper ul, .column_column ul), de la couleur
 * des paragraphes (noir, couleur du corps du thème). Spécificité supérieure à la règle du thème
 * (.the_content_wrapper:not(.is-elementor) ul). */
body .the_content_wrapper:not(.is-elementor) :is(ul, ol):not(:where(.te-sc *)),
body .column_column :is(ul, ol):not(:where(.te-sc *)) {
	color: #000;
}

/* Pied de page sombre (#101015) : liens des widgets (#D1D1D1 avant) et « Contact | À propos » de la ligne
 * de copyright (#65666C avant, 3,32:1) en #C4CCD4 (11,7:1). Le survol du thème est #3385D7 : en #0057D9
 * il tomberait à 3,0:1 sur ce fond, il passe donc en blanc souligné. */
#Footer a:not(.button, .icon_bar, .mfn-btn, .mfn-option-btn, .footer_button),
#Footer .footer_copy .social-menu a {
	color: #C4CCD4;
}
#Footer a:not(.button, .icon_bar, .mfn-btn, .mfn-option-btn, .footer_button):hover,
#Footer .footer_copy .social-menu a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------------------------
 * UX-07 : focus clavier visible. Le thème met outline: 0 sur a, a:focus (be.css) : remplacé par un anneau
 * au clavier seulement (:focus-visible), double anneau bleu et blanc lisible sur fond clair comme sombre.
 * !important : les champs de WPForms et du thème annulent l'anneau avec des sélecteurs plus précis
 * (input[type="text"]:focus). « table » : Chrome rend les tableaux défilants (UX-08) atteignables au clavier.
 * ------------------------------------------------------------------------------------------- */
:is(a, button, input, select, textarea, summary, table, [tabindex]):not(:where(.te-sc *)):focus-visible {
	outline: 2px solid #0057D9 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px #fff !important;
}
/* Menu « liens d'évitement » de BeTheme (#skip-links-menu, top: -200px) : il reprend le menu du haut
 * (Contact, À propos), en double, et ne s'affiche que par js/accessibility.js, non chargé ici. Ses deux
 * liens prenaient les deux premières tabulations sans rien montrer : retirés de l'ordre de tabulation.
 * Correctif de fond : retirer ce menu de l'emplacement « Accessibility Skip Links Menu » (Apparence, Menus). */
#skip-links-menu {
	display: none;
}

/* ---------------------------------------------------------------------------------------------
 * UX-08 : tableaux sur téléphone. Le thème les passe déjà en bloc défilant (classe table-responsive) sans
 * rien indiquer. Première colonne figée, ombre à droite tant qu'il reste à faire défiler (fond « local »
 * blanc qui recouvre une ombre « scroll » au bout du défilement), cellules en 15 px. Pas l'accueil.
 * ------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	body:not(.page-id-70) .the_content_wrapper table:not(:where(.te-sc *)) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
		background:
			linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
			radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll;
		background-color: #fff;
	}
	body:not(.page-id-70) .the_content_wrapper table:not(:where(.te-sc *)) :is(td, th) {
		font-size: 15px;
		line-height: 1.45;
	}
	body:not(.page-id-70) .the_content_wrapper table:not(:where(.te-sc *)) tr > :first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background-color: #fff;
		border-right: 1px solid #C4CCD4;
	}
}

/* ---------------------------------------------------------------------------------------------
 * UX-16 : cibles tactiles sur téléphone, 44 px de haut au moins. Menu latéral (40 px avant : 11 + 19 + 10),
 * liens « Contact | À propos » du menu latéral et du copyright (19 px), liens des widgets du pied (19 px,
 * titres sur deux lignes accolés).
 * ------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	#Side_slide #menu ul li a:not(.menu-toggle) {
		padding-top: 13px;
		padding-bottom: 12px;
	}
	/* bouton « + » des sous-menus : 40 × 40 px dans be.css (#Side_slide #menu ul li.submenu .menu-toggle) */
	#Side_slide #menu ul li.submenu > a.menu-toggle {
		width: 44px;
		height: 44px;
		line-height: 44px;
	}
	#Side_slide .social-menu li a,
	#Footer .footer_copy .social-menu li a,
	#Footer .widgets_wrapper p a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	#Footer .widgets_wrapper li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 6px 0;
		box-sizing: border-box;
	}
}