/* Le Releve : surface de lecture. Tokens de la direction active. */

:root {
	--jm-papier: #E8EBEA;
	--jm-quadrillage: #BFC8C9;
	--jm-encre: #17211F;
	--jm-carter: #4F5A58;
	--jm-trace: #0E3A5A;
	--jm-repere: #9E2B20;

	--jm-display: "Syne", "Trebuchet MS", sans-serif;
	--jm-texte: "Spectral", Georgia, "Times New Roman", serif;
	--jm-utile: "JetBrains Mono", ui-monospace, Consolas, monospace;

	--jm-mesure: 62ch;

	/* Retargetage des tokens globaux d'Astra sur la direction Le Releve.
	   Astra les definit sur :root ; cette feuille se charge apres, donc elle gagne.
	   C'est la seule bonne prise : Astra les consomme partout en CSS dynamique. */
	--ast-global-color-0: #0E3A5A;  /* accent            */
	--ast-global-color-1: #17211F;  /* accent au survol  */
	--ast-global-color-2: #17211F;  /* titres            */
	--ast-global-color-3: #17211F;  /* texte courant     */
	--ast-global-color-4: #E8EBEA;  /* fond du contenu   */
	--ast-global-color-5: #E8EBEA;  /* fond du site      */
	--ast-global-color-6: #4F5A58;  /* fond alternatif   */
	--ast-global-color-7: #BFC8C9;  /* fond subtil       */
	--ast-global-color-8: #17211F;

	--ast-code-block-background: #BFC8C9;
	--ast-comment-inputs-background: #E8EBEA;
	--ast-widget-bg-color: #E8EBEA;
	--ast-title-layout-bg: #BFC8C9;
	--ast-search-border-color: #BFC8C9;
}

/* ---------- fondations ---------- */

body {
	background-color: var(--jm-papier);
	color: var(--jm-encre);
	font-family: var(--jm-texte);
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .widget-title {
	font-family: var(--jm-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--jm-encre);
}

::selection { background: var(--jm-trace); color: var(--jm-papier); }

:focus-visible {
	outline: 2px solid var(--jm-trace);
	outline-offset: 2px;
}

/* Astra pose son propre fond et une carte blanche autour de l'article.
   On ramene le tout sur le papier de la direction. */

html,
body,
body.ast-separate-container {
	background-color: var(--jm-papier);
}

body.ast-separate-container .ast-article-single,
body.ast-separate-container .ast-article-post,
body.ast-separate-container .ast-comment-list li,
body.ast-separate-container .comments-area .comment-respond,
body.ast-separate-container .ast-archive-description {
	background-color: var(--jm-papier);
	border: none;
	box-shadow: none;
}

/* ---------- une seule colonne partagee ----------
   Astra sert trois gabarits differents (separate, plain, page-builder) avec
   trois largeurs. On les ramene tous sur le rythme de la page Elementor :
   colonne utile de 1180px, retrait de page de 88px, meme bord gauche pour
   l'en-tete, le contenu et le pied. 1356 = 1180 + 2 x 88. */

:root {
	--ast-narrow-container-width: 1356px;
	--ast-normal-container-width: 1356px;
}

/* Astra centre ses conteneurs et les plafonne (750px sur les gabarits etroits).
   On annule les deux partout : en-tete, contenu et pied partent du meme bord
   gauche que la page Elementor, et c'est la colonne de lecture qui limite la
   largeur du texte, pas le conteneur. */
.ast-container,
body.ast-narrow-container .site-content > .ast-container,
body.ast-plain-container .site-content > .ast-container,
body.ast-separate-container .site-content > .ast-container,
.site-header .ast-container,
.ast-primary-header-bar .ast-container,
.site-header .ast-builder-grid-row-container,
.site-footer .ast-container,
.site-footer .ast-builder-grid-row-container,
.ast-small-footer .ast-container {
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--jm-gouttiere, 88px);
}

body .site-content .content-area {
	max-width: 1180px;
}

@media (max-width: 1024px) {
	:root { --jm-gouttiere: 40px; }
}

@media (max-width: 768px) {
	:root { --jm-gouttiere: 24px; }
}

/* Astra ajoute son propre retrait a l'interieur du conteneur sur les gabarits
   "separate" et "plain". Il ferait double emploi avec celui ci-dessus. */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-plain-container .site-content > .ast-container,
.ast-separate-container .ast-archive-description {
	padding-inline: 0;
}

/* ---------- en-tete et pied, geres par Astra ---------- */

.site-header,
.ast-primary-header-bar,
.ast-header-break-point .ast-primary-header-bar {
	background-color: var(--jm-papier);
	border-bottom: 1px solid var(--jm-quadrillage);
}

.site-title a,
.site-title a:hover {
	color: var(--jm-encre);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.main-header-menu a,
.ast-header-break-point .main-header-menu a {
	font-family: var(--jm-utile);
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jm-carter);
}

.main-header-menu a:hover,
.main-header-menu .current-menu-item > a {
	color: var(--jm-trace);
}

.site-footer,
.ast-small-footer {
	background-color: var(--jm-carter);
	color: var(--jm-papier);
	font-family: var(--jm-utile);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
}

.site-footer a { color: var(--jm-papier); }

/* ---------- article ---------- */

.ast-single-post .entry-header,
.ast-single-post .entry-content,
.ast-single-post .post-navigation,
.ast-single-post .comments-area {
	max-width: var(--jm-mesure);
	margin-inline: 0;
}

.ast-single-post .entry-title {
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.entry-meta,
.entry-meta *,
.ast-taxonomy-container a {
	font-family: var(--jm-utile);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jm-carter);
}

.entry-content {
	font-size: 1.0625rem;
	line-height: 1.68;
}

.entry-content > p { margin-block-end: 1.35em; }

.entry-content h2 {
	font-size: clamp(1.45rem, 3vw, 1.85rem);
	line-height: 1.12;
	margin-block: 2.6em 0.75em;
}

.entry-content h3 {
	font-size: 1.08rem;
	font-weight: 600;
	letter-spacing: 0;
	margin-block: 2.1em 0.6em;
}

.entry-content a {
	color: var(--jm-trace);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.entry-content a:hover { color: var(--jm-encre); }

.entry-content strong { font-weight: 600; }
.entry-content em { color: var(--jm-carter); }

/* ---------- listes ---------- */

.entry-content ol,
.entry-content ul { padding-inline-start: 1.5em; }

.entry-content li {
	margin-block-end: 0.85em;
	line-height: 1.62;
}

.entry-content li::marker {
	font-family: var(--jm-utile);
	font-size: 0.82em;
	color: var(--jm-trace);
}

/* ---------- code ---------- */

code, pre, kbd, samp { font-family: var(--jm-utile); }

.entry-content code {
	font-size: 0.87em;
	background-color: rgba(191, 200, 201, 0.5);
	color: var(--jm-encre);
	padding: 0.12em 0.36em;
	border-radius: 0;
}

.entry-content pre {
	background-color: var(--jm-carter);
	color: var(--jm-papier);
	padding: 1.2em 1.4em;
	border-radius: 0;
	overflow-x: auto;
	font-size: 0.86rem;
	line-height: 1.7;
}

.entry-content pre code { background: none; padding: 0; color: inherit; }

/* ---------- tableau ---------- */

.entry-content .wp-block-table { overflow-x: auto; }

.entry-content table,
.entry-content th,
.entry-content td {
	border: 0;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--jm-utile);
	font-size: 0.84rem;
	font-variant-numeric: tabular-nums;
}

.entry-content th {
	text-align: start;
	font-weight: 500;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jm-carter);
	border-block-end: 1px solid var(--jm-quadrillage);
	padding: 0.8em 1.2em 0.8em 0;
}

.entry-content td {
	border-block-end: 1px solid var(--jm-quadrillage);
	padding: 0.65em 1.2em 0.65em 0;
}

.entry-content tbody tr:last-child td {
	border-block-end: none;
	color: var(--jm-trace);
}

/* Astra decale encore ses grilles et son pied par des marges negatives et des
   retraits de gouttiere. On les remet a zero pour garder un seul bord gauche. */
.ast-row,
body .ast-builder-footer-grid-columns,
body .site-below-footer-inner-wrap,
body .site-primary-footer-inner-wrap,
body .site-header .ast-builder-grid-row-container-inner > .ast-builder-grid-row,
.site-below-footer-wrap[data-section] .ast-builder-grid-row,
.site-primary-footer-wrap[data-section] .ast-builder-grid-row,
.ast-primary-header-bar[data-section] .ast-builder-grid-row {
	margin-inline: 0;
	max-width: none;
}

/* Le constructeur de pied d'Astra centre son contenu. On le range a gauche,
   sur le meme bord que le reste. */
.site-below-footer-wrap .ast-builder-grid-row,
.site-primary-footer-wrap .ast-builder-grid-row {
	margin-inline: 0;
	max-width: none;
	justify-items: start;
	justify-content: start;
}

.ast-footer-copyright,
.ast-footer-copyright p,
.site-footer .site-info {
	text-align: start;
}

.blog .ast-article,
.archive .ast-article,
.blog .ast-article-post,
.archive .ast-article-post {
	padding-inline: 0;
}

/* ---------- liste des billets ----------
   Billets empiles, pas de grille de cartes, pas de vignette. */

.blog .ast-article,
.archive .ast-article,
.blog .ast-article-post,
.archive .ast-article-post,
.blog .ast-article-inner,
.archive .ast-article-inner {
	background: transparent;
	box-shadow: none;
	border: none;
}

.blog .ast-article-post,
.archive .ast-article-post {
	max-width: 62ch;
	padding-block: 2rem;
	border-block-end: 1px solid var(--jm-quadrillage);
}

.blog .ast-article-post .entry-title,
.archive .ast-article-post .entry-title {
	font-size: clamp(1.35rem, 2.6vw, 1.7rem);
	line-height: 1.14;
	margin-block: 0.5rem 0.6rem;
}

.blog .ast-article-post .entry-content,
.archive .ast-article-post .entry-content {
	font-size: 1rem;
	color: var(--jm-carter);
}

.blog .ast-taxonomy-container,
.archive .ast-taxonomy-container {
	margin-block-end: 0.2rem;
}

.blog .entry-title a,
.archive .entry-title a { color: var(--jm-encre); }

.blog .entry-title a:hover,
.archive .entry-title a:hover { color: var(--jm-trace); }

/* ---------- bouton ---------- */

.ast-button,
.wp-block-button__link,
.entry-content .wp-block-button__link {
	background-color: var(--jm-trace);
	color: var(--jm-papier);
	font-family: var(--jm-utile);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 0;
	border: none;
}

.ast-button:hover,
.wp-block-button__link:hover {
	background-color: var(--jm-encre);
	color: var(--jm-papier);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}