/*
 * Contenu Gutenberg des pages (.oxo-blocks, voir guttenberg.twig et woo/shop.twig).
 *
 * Reproduit la mise en page de l'éditeur de blocs pour un thème classique
 * (wp-includes/css/dist/edit-post/classic.css) :
 *   - blocs dans une colonne centrée de 840 px ;
 *   - « Grande largeur » (alignwide) : 1100 px ;
 *   - « Pleine largeur » (alignfull) et blocs du thème (<section> : en-tête, résumé,
 *     grille de produits…) : toute la largeur, comme avant.
 * Rétablit aussi ce que la remise à zéro du thème (* { margin:0; padding:0 }) retire
 * au texte : espacement entre blocs, retrait et puces des listes.
 * Fichier à part, hors Sass : style.css est compilé et n'a pas de chaîne de build dans le dépôt.
 */
.oxo-blocks {
	--oxo-content: 840px;
	--oxo-wide: 1100px;
	--oxo-gutter: 16px;
	--oxo-space: 1.25em;
}

/* Couleur du texte des blocs : le corps du thème est blanc ; l'éditeur affiche le texte en #353535 (editor-style.css). */
.oxo-blocks > :not(section) {
	color: #353535;
}

/* ---- Largeurs ---- (les <section> du thème gardent leurs propres marges et largeurs) */
.oxo-blocks > :not(section) {
	max-width: min(var(--oxo-content), calc(100% - 2 * var(--oxo-gutter)));
	margin-left: auto;
	margin-right: auto;
}

.oxo-blocks > .alignwide {
	max-width: min(var(--oxo-wide), calc(100% - 2 * var(--oxo-gutter)));
}

.oxo-blocks > .alignfull {
	max-width: none;
}

/* Images flottantes (aligner à gauche/droite) : dans la colonne, comme dans l'éditeur */
.oxo-blocks > .alignleft {
	float: left;
	margin: 0 1.5em 1em max(var(--oxo-gutter), calc((100% - var(--oxo-content)) / 2));
}

.oxo-blocks > .alignright {
	float: right;
	margin: 0 max(var(--oxo-gutter), calc((100% - var(--oxo-content)) / 2)) 1em 1.5em;
}

/* ---- Espacement vertical ----
   Règles de même poids (0,1,2), l'ordre décide : texte < titre < titre+sous-titre < après une section. */
/* Entre deux blocs de texte ; les sections du thème restent collées entre elles comme avant. */
.oxo-blocks > :not(section) + :not(section) {
	margin-top: var(--oxo-space);
}

.oxo-blocks > :not(section) + :is(h1, h2, h3, h4, h5, h6) {
	margin-top: calc(var(--oxo-space) * 1.6);
}

/* Le titre suivi de son sous-titre (h2 + h2…) reste groupé */
.oxo-blocks > :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
	margin-top: .4em;
}

/* Respiration entre une section du thème et le texte qui la suit ou la précède */
.oxo-blocks > section + :not(section) {
	margin-top: 50px;
}

.oxo-blocks > :not(section):first-child {
	margin-top: 50px;
}

.oxo-blocks > :not(section):has(+ section),
.oxo-blocks > :not(section):last-child {
	margin-bottom: 50px;
}

/* Dans les colonnes, groupes, etc. */
.oxo-blocks :is(.wp-block-column, .wp-block-group, .wp-block-media-text__content, blockquote):not(section *) > * + * {
	margin-top: var(--oxo-space);
}

.oxo-blocks > hr.wp-block-separator,
.oxo-blocks > .wp-block-separator {
	margin-top: calc(var(--oxo-space) * 1.6);
	margin-bottom: calc(var(--oxo-space) * 1.6);
}

.oxo-blocks > .wp-block-separator + :not(section) {
	margin-top: 0;
}

/* ---- Texte ---- (« :not(section *) » : jamais à l'intérieur des blocs du thème) */
.oxo-blocks :is(p, li):not(section *) {
	line-height: 1.5;
}

.oxo-blocks :is(ul, ol):not([class*="is-layout-"]):not(.wp-block-social-links):not(section *) {
	padding-left: 1.5em;
}

.oxo-blocks ul:not([class*="is-layout-"]):not(.wp-block-social-links):not(section *) {
	list-style: disc;
}

.oxo-blocks ol:not(section *) {
	list-style: decimal;
}

.oxo-blocks :is(li + li, li > ul, li > ol):not(section *) {
	margin-top: .35em;
}

.oxo-blocks a:not(.wp-block-button__link):not(.wp-element-button):not(section *) {
	color: #587f9f;
}

.oxo-blocks img:not(section *) {
	max-width: 100%;
	height: auto;
}

.oxo-blocks figcaption:not(section *) {
	margin-top: .5em;
	font-size: 14px;
	color: #6b6b6b;
}

/* Les colonnes passent l'une sous l'autre sur mobile (comportement natif) : on garde un écart */
@media (max-width: 781px) {
	.oxo-blocks .wp-block-columns:not(section *) {
		row-gap: var(--oxo-space);
	}
}