/* ============================================================
 * AS Theme — socle du thème autonome.
 *
 * Ce fichier remplace ce qu'un thème parent fournissait jusqu'ici : reset,
 * typographie, gabarits, widgets, formulaires, commentaires et pied de page.
 *
 * DEUX RÈGLES DE COHABITATION, à ne pas relâcher :
 *   1. les défauts d'éléments passent par `:where()` — spécificité nulle, donc
 *      wpForo, MailPoet ou tout plugin hôte gagne sans avoir à surenchérir ;
 *   2. les tokens sont lus avec un repli littéral (`var(--as-bg, #07090b)`) :
 *      le thème reste présentable si AS Core est absent ou désactivé.
 *
 * `--as-sticky-top` n'est PAS déclarée ici : elle appartient à `header.css`,
 * sur `:root` uniquement (cf. AGENTS.md du thème, §8).
 * ============================================================ */

:root {
	color-scheme: dark;
	--as-theme-shell: 1320px;
	--as-theme-text: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background-color: var(--as-bg, #07090b);
	color: var(--as-ink, #f5f7f9);
	font-family: var(--as-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(img, svg, video, canvas, iframe, embed, object) { max-width: 100%; }
:where(img, svg, video) { height: auto; }
:where(a) { color: var(--as-accent, #f4b91f); text-decoration: none; }
:where(a:hover, a:focus-visible) { text-decoration: underline; }
:where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 .5em;
	color: var(--as-ink, #f5f7f9);
	font-family: var(--as-font-head, inherit);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.2;
}
:where(h1) { font-size: clamp(26px, 3.4vw, 38px); }
:where(h2) { font-size: clamp(21px, 2.5vw, 27px); }
:where(h3) { font-size: 19px; }
:where(p, ul, ol, dl, pre, table, figure, blockquote) { margin: 0 0 18px; }
:where(hr) { height: 1px; margin: 28px 0; border: 0; background: var(--as-line, #252d35); }
:where(code, kbd, pre, samp) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
:where(pre) { overflow-x: auto; padding: 14px 16px; border: 1px solid var(--as-line, #252d35); border-radius: 12px; background: var(--as-bg-2, #0a0d10); }
:where(blockquote) { margin-left: 0; padding-left: 16px; border-left: 3px solid var(--as-accent, #f4b91f); color: var(--as-ink-2, #c4cbd1); }
:where(figcaption) { color: var(--as-muted, #98a3ae); font-size: 13px; }
:where(table) { width: 100%; border-collapse: collapse; }
:where(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--as-line, #252d35); text-align: left; }
:where(fieldset) { margin: 0 0 18px; padding: 16px; border: 1px solid var(--as-line, #252d35); border-radius: 12px; }
:where(input, select, textarea, button) { font: inherit; }
:where(input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]), select, textarea) {
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--as-line, #252d35);
	border-radius: 10px;
	background: var(--as-card, #0e1216);
	color: var(--as-ink, #f5f7f9);
}
:where(input, select, textarea, button, a, [tabindex]):focus-visible {
	outline: 2px solid var(--as-accent, #f4b91f);
	outline-offset: 2px;
}

/* Cases à cocher et boutons radio : rendus par le NAVIGATEUR, d'après le
   `color-scheme` hérité — ici `dark`, posé sur `:root` en haut de ce fichier.
   En schéma sombre, une case DÉCOCHÉE est peinte en carré plein sombre : sur
   un panneau clair (popup newsletter, formulaires MailPoet, commentaires),
   elle est indiscernable d'une case cochée, et le visiteur croit avoir donné
   un consentement qu'il n'a pas donné. On repasse donc ces deux contrôles —
   et eux seuls — en schéma clair : case vide = carré blanc bordé, case cochée
   = pastille à l'accent du site. */
:where(input[type=checkbox], input[type=radio]) {
	color-scheme: light;
	accent-color: var(--as-accent, #f4b91f);
}

/* Remplissage automatique du navigateur : Chrome repeint le champ avec SA
   couleur, en `!important` dans sa feuille interne — `background` ne peut pas
   la battre. La seule parade est une ombre interne pleine, doublée de
   `-webkit-text-fill-color` pour le texte (`color` est ignoré lui aussi). Sans
   ça, un identifiant proposé par le gestionnaire de mots de passe s'affiche en
   texte clair sur fond clair : le champ paraît vide. */
:where(input:-webkit-autofill) {
	-webkit-text-fill-color: var(--as-ink, #f5f7f9);
	-webkit-box-shadow: 0 0 0 100px var(--as-card, #0e1216) inset;
	box-shadow: 0 0 0 100px var(--as-card, #0e1216) inset;
	caret-color: var(--as-ink, #f5f7f9);
}
:where(button, input[type=submit], .as-button) {
	padding: 10px 16px;
	border: 0;
	border-radius: 10px;
	background: var(--as-accent, #f4b91f);
	color: #161108;
	font-weight: 800;
	cursor: pointer;
}
:where(button:hover, input[type=submit]:hover, .as-button:hover) { background: var(--as-accent-2, #ffd35c); }

/* ---------- Classes obligatoires de WordPress ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.screen-reader-text:focus {
	z-index: 100000;
	top: 8px; left: 8px;
	width: auto; height: auto;
	padding: 10px 14px;
	clip-path: none;
	background: #fff;
	color: #111;
}
.alignleft { float: left; margin: 6px 20px 12px 0; }
.alignright { float: right; margin: 6px 0 12px 20px; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption { color: var(--as-muted, #98a3ae); font-size: 13px; }
.sticky, .bypostauthor { display: block; }

/* ---------- Ossature ---------- */
/* Le header vit HORS de `.as-site` : une hauteur minimale en `vh` sur le
 * conteneur produirait une barre de défilement permanente de la hauteur du
 * header. Une réserve sur le contenu suffit à empêcher le pied de page de
 * remonter au milieu de l'écran sur une page courte (404, recherche vide). */
.as-site__content { min-height: 60vh; }
#main-content:focus { outline: none; }

.as-main { width: 100%; }
.as-main--full .as-main__content {
	max-width: var(--as-theme-text);
	margin: 30px auto;
	padding: 0 18px;
}
.as-main--forum .as-main__content { max-width: var(--as-theme-shell); }
.as-main--sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 30px;
	max-width: var(--as-theme-shell);
	margin: 30px auto;
	padding: 0 18px;
	align-items: start;
}
.as-main--sidebar .as-main__content { min-width: 0; }
/* Colle sous le header : `--as-sticky-top` vient de header.css puis, s'il est
 * là, de la mesure réelle d'`ASCore.initStickyTabs`. */
.as-main__aside { position: sticky; top: calc(var(--as-sticky-top, 8px) + 12px); }

@media (max-width: 880px) {
	.as-main--sidebar { grid-template-columns: 1fr; }
	.as-main__aside { position: static; }
}

/* ---------- Widgets (colonne de droite et pied de page) ----------
 * Pas de carte sur le conteneur : les widgets d'AS Widget portent déjà la leur
 * (`.as-widget-projets`), une seconde bordure ferait un cadre dans un cadre. Le
 * titre reprend le traitement d'AS Widget pour que tous les blocs de la colonne
 * parlent le même langage. Les listes ne sont stylées qu'en ENFANT DIRECT : le
 * balisage interne d'un widget métier ne doit pas hériter de séparateurs. */
.widget { margin-bottom: 22px; }
.widget:last-child { margin-bottom: 0; }
.widget-title {
	margin: 0 0 10px;
	padding-left: 11px;
	border-left: 3px solid var(--as-accent, #f4b91f);
	color: var(--as-accent, #f4b91f);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .13em;
	line-height: 1.25;
	text-transform: uppercase;
}
.widget > :where(ul) { margin: 0; padding: 0; list-style: none; }
.widget > :where(ul) > :where(li) { padding: 6px 0; border-bottom: 1px solid var(--as-line, #252d35); }
.widget > :where(ul) > :where(li:last-child) { border-bottom: 0; }
.widget :where(a) { color: var(--as-ink-2, #c4cbd1); }
.widget :where(a:hover, a:focus-visible) { color: var(--as-ink, #f5f7f9); }

/* ---------- Contenus (article, page) ---------- */
.as-entry--single { max-width: 100%; }
.as-entry__title { margin-bottom: 10px; }
.as-entry__meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--as-muted, #98a3ae); font-size: 13px; }
.as-entry__thumbnail { margin: 0 0 22px; }
.as-entry__thumbnail img { border-radius: var(--as-radius, 18px); }
.as-entry__content { color: var(--as-ink-2, #c4cbd1); }
.as-entry__content :where(h2, h3, h4) { margin-top: 1.6em; color: var(--as-ink, #f5f7f9); }
.as-entry__content :where(li) { margin-bottom: 6px; }
.as-entry__pages { margin-top: 18px; color: var(--as-muted, #98a3ae); font-size: 13px; }

.as-archive__header { margin-bottom: 24px; }
.as-archive__description { color: var(--as-muted, #98a3ae); }
.as-entry--summary {
	padding: 20px 0;
	border-bottom: 1px solid var(--as-line, #252d35);
}
.as-entry--summary .as-entry__title { font-size: 21px; }
.as-entry--summary .as-entry__title a { color: var(--as-ink, #f5f7f9); }
.as-entry__excerpt { color: var(--as-ink-2, #c4cbd1); }

/* ---------- Pagination et navigation entre articles ---------- */
.as-pagination { margin: 28px 0; }
.as-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.as-pagination :where(a, span.current) {
	display: inline-flex;
	min-width: 40px;
	min-height: 40px;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--as-line, #252d35);
	border-radius: 10px;
	color: var(--as-ink-2, #c4cbd1);
	text-decoration: none;
}
.as-pagination span.current { border-color: var(--as-accent, #f4b91f); color: var(--as-ink, #f5f7f9); }
.as-postnav { margin: 32px 0; padding-top: 20px; border-top: 1px solid var(--as-line, #252d35); }
.as-postnav .nav-links { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.as-postnav a { color: var(--as-ink-2, #c4cbd1); }
.as-postnav span { display: block; color: var(--as-muted, #98a3ae); font-size: 12px; text-transform: uppercase; }

/* ---------- Recherche et vues vides ---------- */
.as-searchform { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.as-searchform input[type=search] { flex: 1 1 240px; }
.as-empty { max-width: 640px; margin: 60px auto; padding: 0 18px; text-align: center; }
.as-empty__code { margin: 0; color: var(--as-accent, #f4b91f); font-size: 56px; font-weight: 900; line-height: 1; }
.as-empty__text { color: var(--as-muted, #98a3ae); }
.as-empty .as-searchform { justify-content: center; }
.as-empty__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 0; padding: 0; list-style: none; }
.as-empty__links a {
	display: inline-flex;
	padding: 8px 14px;
	border: 1px solid var(--as-line, #252d35);
	border-radius: 999px;
	color: var(--as-ink-2, #c4cbd1);
	font-size: 13px;
	text-decoration: none;
}
.as-empty__links a:hover { border-color: var(--as-accent, #f4b91f); color: var(--as-ink, #f5f7f9); }

/*
 * Modules de rebond de la page 404 (« Le duel des plateformes » + « Rechercher
 * dans la base projets »). Le thème ne pose QUE le conteneur : la mise en forme
 * des modules appartient à AS Classement et à AS Core.
 * `.as-empty` reste étroit et centré ; les modules, eux, ont besoin de largeur.
 */
.as-empty-modules { max-width: 1120px; margin: 0 auto 64px; padding: 0 18px; }
.as-empty-modules__grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	align-items: start;
}
.as-empty-modules__item { min-width: 0; }

/* ---------- Commentaires ---------- */
.as-comments { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--as-line, #252d35); }
.as-comments__list { margin: 0 0 28px; padding: 0; list-style: none; }
.as-comments__list :where(ol, ul) { list-style: none; }
.as-comments__list .children { margin-left: 22px; padding-left: 0; }
.as-comments__list :where(.comment-body) {
	margin-bottom: 16px;
	padding: 16px;
	border: 1px solid var(--as-line, #252d35);
	border-radius: var(--as-radius-sm, 12px);
	background: var(--as-card, #0e1216);
}
.as-comments__list :where(.comment-meta) { color: var(--as-muted, #98a3ae); font-size: 13px; }
.as-comments__list :where(.avatar) { border-radius: 50%; vertical-align: middle; }
.as-comments__closed { color: var(--as-muted, #98a3ae); }
.as-comment-form :where(p) { margin-bottom: 14px; }
.as-comment-form :where(input[type=text], input[type=email], input[type=url], textarea) { width: 100%; }

/* ---------- Pied de page ---------- */
.as-footer {
	margin-top: 48px;
	border-top: 1px solid var(--as-line, #252d35);
	background: var(--as-bg-2, #0a0d10);
	color: var(--as-ink-2, #c4cbd1);
	font-size: 14px;
}
.as-footer__widgets,
.as-footer__inner,
.as-footer__legal { width: min(var(--as-theme-shell), calc(100% - 36px)); margin-inline: auto; }
.as-footer__widgets {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	padding: 30px 0;
	border-bottom: 1px solid var(--as-line, #252d35);
}
.as-footer__inner {
	display: grid;
	gap: 30px;
	grid-template-columns: minmax(240px, 1fr) minmax(0, 2.4fr);
	padding: 36px 0;
}
.as-footer__brand {
	display: inline-flex;
	gap: .23em;
	color: var(--as-ink, #f5f7f9);
	font-size: 17px;
	font-weight: 900;
	letter-spacing: -.04em;
	text-decoration: none;
}
.as-footer__amp { color: var(--as-accent, #f4b91f); }
.as-footer__baseline { margin: 10px 0 16px; color: var(--as-muted, #98a3ae); font-size: 13px; }
.as-footer__newsletter {
	display: inline-flex;
	flex-direction: column;
	padding: 11px 16px;
	border: 1px solid var(--as-accent, #f4b91f);
	border-radius: 10px;
	color: var(--as-accent, #f4b91f);
	text-decoration: none;
}
.as-footer__newsletter span { font-size: 13px; font-weight: 800; }
.as-footer__newsletter small { color: var(--as-muted, #98a3ae); font-size: 11px; }
.as-footer__newsletter:hover { background: var(--as-accent-bg, rgba(244, 185, 31, .12)); text-decoration: none; }
.as-footer__nav { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.as-footer__nav :where(h2) {
	margin: 0 0 10px;
	color: var(--as-ink, #f5f7f9);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.as-footer__nav :where(ul) { margin: 0; padding: 0; list-style: none; }
.as-footer__nav :where(li) { margin-bottom: 7px; }
.as-footer__nav :where(a) { color: var(--as-muted, #98a3ae); font-size: 13px; }
.as-footer__nav :where(a:hover, a:focus-visible) { color: var(--as-ink, #f5f7f9); }
/* Un menu WordPress affecté à l'emplacement produit une seule liste : on la
 * remet à plat plutôt que de la laisser prendre la grille des colonnes. */
.as-footer__nav--menu { display: block; }
.as-footer__nav--menu .as-footer__menu { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.as-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	padding: 18px 0 26px;
	border-top: 1px solid var(--as-line, #252d35);
	color: var(--as-muted, #98a3ae);
	font-size: 12px;
}
.as-footer__risk { flex: 1 1 460px; margin: 0; }
.as-footer__copyright { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }

@media (max-width: 880px) {
	.as-footer__inner { grid-template-columns: 1fr; }
}

/* Portée volontairement limitée aux surfaces du thème : le contenu des plugins
 * porte ses propres règles de mouvement réduit, on ne les court-circuite pas. */
@media (prefers-reduced-motion: reduce) {
	:where(.as-footer, .as-main__aside, .as-empty, .as-pagination, .as-searchform) :where(*) {
		transition: none !important;
		animation: none !important;
	}
}