/**
 * Mise en page commune, calée sur la page d'accueil (chargée en dernier).
 *
 * - Gouttières : le contenu des sections s'aligne sur le logo et le bouton « Prendre contact » du header.
 * - Rythme vertical : 50px en haut et en bas de chaque section (sauf heros et bandeau logos).
 * - Titres de section et sur-titres : une seule échelle, réglable dans Apparence > Styles > Typographie
 *   (tailles « Titre de section » et « Sur-titre »).
 * Les heros gardent leur composition propre, sauf celui de l'accueil, aligné comme ses sections.
 * Valeurs : theme.json > settings.custom.layout (variables --wp--custom--layout--*).
 */

:root {
	--accessite-gutter-left: var(--wp--custom--layout--gutter-left, 81px);
	--accessite-gutter-right: var(--wp--custom--layout--gutter-right, 86px);
	--accessite-section-y: var(--wp--custom--layout--section-y, 50px);
}
@media (max-width: 1100px) {
	:root {
		--accessite-gutter-left: var(--wp--custom--layout--gutter-tablet, 62px);
		--accessite-gutter-right: var(--wp--custom--layout--gutter-tablet, 62px);
	}
}
@media (max-width: 700px) {
	:root {
		--accessite-gutter-left: var(--wp--custom--layout--gutter-mobile, 20px);
		--accessite-gutter-right: var(--wp--custom--layout--gutter-mobile, 20px);
	}
}
/* Très grands écrans : le contenu (et le header) ne dépasse pas 1600px de large, centré.
 * Les gouttières grandissent au-delà ; les fonds pleine largeur restent pleine largeur. */
@media (min-width: 1601px) {
	:root {
		--accessite-gutter-left: calc((100vw - 1600px) / 2 + var(--wp--custom--layout--gutter-left, 81px));
		--accessite-gutter-right: calc((100vw - 1600px) / 2 + var(--wp--custom--layout--gutter-right, 86px));
	}
}

/* 1. Sections de contenu (hors heros) : gouttières + 50px haut/bas. ---------------------------------- */
:is(.site-content, .site-content > .entry-content, .is-root-container) > :is(.section, .couverture-figma):not([class*="-hero"]):not(#_) {
	padding-left: var(--accessite-gutter-left);
	padding-right: var(--accessite-gutter-right);
}
:is(.site-content, .site-content > .entry-content, .is-root-container) > :is(.section, .couverture-figma):not([class*="-hero"]):not(.section--besoins-logos):not(#_) {
	padding-top: var(--accessite-section-y);
	padding-bottom: var(--accessite-section-y);
}

/* Hero de l'accueil : aligné sur le header comme les autres sections de la page (en mobile, il garde sa marge de 20px). */
.section--home-hero:not(#_) {
	padding-top: var(--accessite-section-y);
	padding-bottom: var(--accessite-section-y);
}
@media (max-width: 700px) {
	.section--home-hero:not(#_) {
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media (min-width: 701px) {
	.section--home-hero:not(#_) {
		padding-left: var(--accessite-gutter-left);
		padding-right: var(--accessite-gutter-right);
	}
}
.section--home-hero > .section--home-hero__inner:not(#_) {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}
/* Heros suivis d'une section : espace bas resserré en mobile (repris de l'ancien sans-traits.css). */
@media (max-width: 700px) {
	.section--approche-hero:has(+ .section--approche-methode) { padding-bottom: 4px; }
	.section--contact-hero:has(+ .section--contact-form) { padding-bottom: 28px; }
	.section--references-hero:has(+ .couverture-figma) { padding-bottom: 0; }
}

/* Conteneurs internes : la largeur et les marges latérales sont portées par la section. */
:is(.site-content, .site-content > .entry-content, .is-root-container) > :is(.section, .couverture-figma):not([class*="-hero"]):not(.section--home-cta-diag):not(.section--contact-form) > :is(
	.section__inner, .carrieres__inner, .chiffres-bento__inner, .metiers__inner,
	.ressources-blog__head, .ressources-blog__grid, .ressources-blog__pagination,
	.ressources-livre__head, .ressources-livre__visual, .ressources-podcast__head, .ressources-podcast__list,
	.couverture-figma__head, .approche-methode-figma
):not(#_),
.couverture-figma > div:not([class*="decor"]):not(#_),
.couverture-figma .couverture-figma__head:not(#_) {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}
/* Blocs volontairement plus étroits (CTA, formulaires) : restent centrés, sans marge latérale propre. */
:is(.section--home-cta-diag, .section--contact-form) > .section__inner:not(#_) {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}
/* Pages simples (mentions légales, politique de confidentialité, 404). */
.site-content > .entry-content > .sw-container,
.error404 .site-content {
	padding-left: var(--accessite-gutter-left);
	padding-right: var(--accessite-gutter-right);
}
.site-content > .entry-content > .sw-container {
	max-width: none;
}

/* En-tête de section titre + chapô (Nos métiers) : le titre peut passer à la ligne sans déborder. */
.metiers__head > .wp-block-group { min-width: 0; max-width: 100%; }

/* 2. Typographie des sections (hors heros). ------------------------------------------------------- */
:is(
	.accessite-section-title, .carrieres__title, .couverture-figma__title,
	.ressources-blog__title, .ressources-livre__title, .ressources-podcast__title
):not([class*="hero__"]):not([class*="-font-size"]):not(#_){
	font-size: var(--wp--preset--font-size--titre-section);
	line-height: 1.04;
}
:is(.accessite-section-overtitle, [class*="__surtitre"]):not([class*="hero__"]):not([class*="-font-size"]):not(#_){
	font-size: var(--wp--preset--font-size--overtitle);
}