/*
 * Socle : styles des composants.
 * Règle : aucune couleur, police ou taille de charte en dur. Tout vient de theme.json
 * (--wp--preset--* et --wp--custom--*). Seules les constantes structurelles
 * (grilles, points de rupture, épaisseurs de 1 px) sont fixées ici.
 */

/* Variables locales, redéfinies sur fond sombre */
:root {
	--socle-texte-2: var(--wp--preset--color--texte-secondaire);
	--socle-filet: var(--wp--preset--color--filet);
	--socle-accent-texte: var(--wp--preset--color--accent);
	--socle-ligne: var(--wp--preset--color--texte);
	--socle-plomb: var(--wp--preset--color--accent);
	--socle-carte: var(--wp--preset--color--carte);
}
.has-surface-background-color {
	--socle-carte: var(--wp--preset--color--fond);
}
.has-sombre-background-color {
	--socle-texte-2: var(--wp--preset--color--texte-sur-sombre-secondaire);
	--socle-filet: var(--wp--preset--color--filet-sur-sombre);
	--socle-accent-texte: var(--wp--preset--color--accent-sur-sombre);
	--socle-ligne: var(--wp--preset--color--texte-sur-sombre);
	--socle-plomb: var(--wp--preset--color--accent-sur-sombre);
	--socle-carte: transparent;
}

/* Accessibilité */
:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
.has-sombre-background-color :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--accent-sur-sombre);
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
h1, h2, h3, h4 { text-wrap: balance; }

/* Sections */
.socle-section {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}
.socle-section.socle-section--serree {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}
.socle-section > * + * { margin-block-start: var(--wp--preset--spacing--50); }

/* Surtitre et chapô */
.socle-sur {
	font-size: var(--wp--custom--taille--surtitre);
	font-weight: 600;
	letter-spacing: var(--wp--custom--espacement-lettres--surtitre);
	text-transform: uppercase;
	color: var(--socle-accent-texte);
	margin: 0;
}
.socle-chapo {
	font-size: var(--wp--preset--font-size--chapo);
	color: var(--socle-texte-2);
	max-width: var(--wp--custom--mesure);
}
.socle-secondaire { color: var(--socle-texte-2); }

/* En-tête de section à fil : fil vertical + plomb */
.wp-block-group.is-style-fil {
	position: relative;
	padding-left: 1.75rem;
	max-width: 760px;
}
/* Dans une section, l'en-tête s'aligne à gauche de la colonne de contenu (et non au centre). */
.is-layout-constrained > .wp-block-group.is-style-fil {
	max-width: min(760px, var(--wp--style--global--content-size));
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}
.wp-block-group.is-style-fil > * { margin-block: 0; }
.wp-block-group.is-style-fil > * + * { margin-block-start: 0.875rem; }
.wp-block-group.is-style-fil::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25rem;
	bottom: 0.25rem;
	width: var(--wp--custom--fil--epaisseur);
	background: var(--socle-ligne);
}
.wp-block-group.is-style-fil::after {
	content: "";
	position: absolute;
	left: calc((var(--wp--custom--fil--plomb-largeur) - var(--wp--custom--fil--epaisseur)) / -2);
	bottom: -0.25rem;
	width: var(--wp--custom--fil--plomb-largeur);
	height: var(--wp--custom--fil--plomb-hauteur);
	background: var(--socle-plomb);
	border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
}

/* Cartes */
.wp-block-group.is-style-carte {
	background: var(--socle-carte);
	border: 1px solid var(--socle-filet);
	border-radius: var(--wp--custom--rayon);
	padding: 1.75rem;
	min-width: 0;
}
.wp-block-group.is-style-carte > * { margin-block: 0; }
.wp-block-group.is-style-carte > * + * { margin-block-start: 0.625rem; }
.wp-block-group.is-style-carte p:not(.socle-etiquette) { color: var(--socle-texte-2); font-size: var(--wp--custom--taille--carte); }
a.socle-carte-lien { text-decoration: none; }
.socle-etiquette {
	font-size: var(--wp--custom--taille--etiquette);
	font-weight: 600;
	letter-spacing: var(--wp--custom--espacement-lettres--etiquette);
	text-transform: uppercase;
	color: var(--socle-texte-2);
}
.has-sombre-background-color .socle-etiquette { color: var(--wp--preset--color--accent-sur-sombre); }
.socle-prix {
	border-top: 1px solid var(--socle-filet);
	padding-top: 0.75rem;
	font-size: var(--wp--custom--taille--note);
}

/* Liste à filets : éléments séparés par un filet horizontal */
.socle-filets, .socle-modules { row-gap: 0 !important; }
.socle-filets > .wp-block-group {
	border-top: 1px solid var(--socle-filet);
	padding-top: 1.375rem;
	padding-bottom: 1.625rem;
	min-width: 0;
}
.socle-filets > .wp-block-group > * { margin-block: 0; }
.socle-filets > .wp-block-group > * + * { margin-block-start: 0.5rem; }
.socle-filets p { color: var(--socle-texte-2); }

/* Étapes numérotées (vraie séquence) */
.socle-etapes { counter-reset: socle-etape; position: relative; row-gap: var(--wp--preset--spacing--40) !important; }
.socle-etapes > .wp-block-group {
	counter-increment: socle-etape;
	position: relative;
	padding-top: 3.5rem;
	padding-right: 1.5rem;
	min-width: 0;
}
.socle-etapes > .wp-block-group > * { margin-block: 0; }
.socle-etapes > .wp-block-group > * + * { margin-block-start: 0.625rem; }
.socle-etapes > .wp-block-group::before {
	content: counter(socle-etape);
	position: absolute;
	top: 0;
	left: 0;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	border: 1px solid var(--socle-ligne);
	background: inherit;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	z-index: 1;
}
.socle-etapes > .wp-block-group::after {
	content: "";
	position: absolute;
	top: 1.2rem;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--socle-filet);
}
.socle-etapes p { color: var(--socle-texte-2); font-size: var(--wp--custom--taille--carte); }
.socle-etapes > .wp-block-group::before { background: var(--wp--preset--color--fond); }
.has-surface-background-color .socle-etapes > .wp-block-group::before { background: var(--wp--preset--color--surface); }
.has-sombre-background-color .socle-etapes > .wp-block-group::before { background: var(--wp--preset--color--sombre); }

/* Programme : modules numérotés */
.socle-modules { counter-reset: socle-module; }
.socle-modules > .wp-block-group {
	counter-increment: socle-module;
	border-top: 1px solid var(--socle-filet);
	padding: 1.25rem 0 1.25rem 3.5rem;
	position: relative;
	min-width: 0;
}
.socle-modules > .wp-block-group > * { margin-block: 0; }
.socle-modules > .wp-block-group > * + * { margin-block-start: 0.25rem; }
.socle-modules > .wp-block-group::before {
	content: counter(socle-module);
	position: absolute;
	left: 0;
	top: 1.1rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--custom--taille--chiffre);
	color: var(--socle-accent-texte);
	font-variant-numeric: tabular-nums;
}
.socle-modules p { color: var(--socle-texte-2); }

/* En bref */
.socle-bref {
	border-top: 1px solid var(--socle-ligne);
	border-bottom: 1px solid var(--socle-ligne);
	gap: 0 !important;
}
.socle-bref > .wp-block-group {
	padding: 1.25rem 1.25rem 1.25rem 0;
	border-bottom: 1px solid var(--socle-filet);
	min-width: 0;
}
.socle-bref > .wp-block-group > * { margin-block: 0; }
.socle-bref > .wp-block-group > * + * { margin-block-start: 0.25rem; }
.socle-bref p:first-child {
	font-size: var(--wp--custom--taille--libelle);
	font-weight: 600;
	letter-spacing: var(--wp--custom--espacement-lettres--etiquette);
	text-transform: uppercase;
	color: var(--socle-texte-2);
}
.socle-bref p:last-child { font-weight: 500; }

/* Visuel en attente (emplacement d'image nommé) */
.socle-visuel {
	border: 1px dashed var(--socle-texte-2);
	border-radius: var(--wp--custom--rayon);
	min-height: 16rem;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 1.5rem;
	color: var(--socle-texte-2);
	font-size: var(--wp--custom--taille--visuel);
	background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--socle-filet) 14px 15px);
	background-blend-mode: normal;
}
.socle-visuel > * { margin: 0; background: var(--wp--preset--color--fond); padding: 0.25rem 0.5rem; }
.has-surface-background-color .socle-visuel > * { background: var(--wp--preset--color--surface); }
.has-sombre-background-color .socle-visuel > * { background: var(--wp--preset--color--sombre); }

/* Emplacement vide (témoignages en attente de retours réels) */
.socle-attente {
	border: 1px dashed var(--socle-filet);
	border-radius: var(--wp--custom--rayon);
	padding: 1.375rem 1.625rem;
	color: var(--socle-texte-2);
}
.socle-attente > * { margin-block: 0; }
.socle-attente > * + * { margin-block-start: 0.375rem; }

/* FAQ (bloc Détails natif) */
.socle-faq { border-top: 1px solid var(--socle-filet); }
.is-layout-constrained > .socle-faq {
	max-width: min(820px, var(--wp--style--global--content-size));
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}
.socle-faq > * + * { margin-block-start: 0 !important; }
.socle-faq .wp-block-details { border-bottom: 1px solid var(--socle-filet); padding: 0; }
.socle-faq .wp-block-details summary {
	cursor: pointer;
	list-style: none;
	padding: 1.25rem 2.5rem 1.25rem 0;
	position: relative;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 600;
	font-size: var(--wp--custom--taille--question);
}
.socle-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.socle-faq .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 1rem;
	font-family: var(--wp--preset--font-family--texte);
	font-weight: 400;
	font-size: var(--wp--custom--taille--signe);
	color: var(--socle-accent-texte);
}
.socle-faq .wp-block-details[open] summary::after { content: "–"; }
.socle-faq .wp-block-details > p { padding-bottom: 1.375rem; margin-top: 0; color: var(--socle-texte-2); max-width: var(--wp--custom--mesure); }

/* Liens textuels */
.socle-lien a, a.socle-lien {
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--socle-filet);
	text-underline-offset: 4px;
	color: inherit;
}
.socle-lien a:hover, a.socle-lien:hover { text-decoration-color: var(--socle-accent-texte); color: inherit; }

/* Boutons sur fond sombre : l'accent reste lisible */
.has-sombre-background-color .wp-element-button,
.has-sombre-background-color .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--texte-sur-accent);
}

/* Marqueurs de chantier (contenus à fournir ou à confirmer) */
.socle-a-fournir {
	font-style: normal;
	color: var(--socle-texte-2);
	border-bottom: 1px dashed var(--socle-accent-texte);
	padding: 0 0.2em;
}
.socle-a-confirmer {
	display: inline-block;
	vertical-align: middle;
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--custom--taille--marqueur);
	font-weight: 600;
	letter-spacing: var(--wp--custom--espacement-lettres--marqueur);
	text-transform: uppercase;
	padding: 0.1em 0.5em;
	border: 1px solid var(--socle-accent-texte);
	color: var(--socle-accent-texte);
	border-radius: var(--wp--custom--rayon-marqueur);
	margin-left: 0.4em;
	line-height: 1.5;
}

/* En-tête du site */
.socle-entete { border-bottom: 1px solid var(--socle-filet); }
/* L'en-tête reste visible au défilement : la position collante s'applique à la partie de modèle,
   enfant direct de la page (sur .socle-entete, elle resterait sans effet dans un parent de même hauteur). */
.wp-site-blocks > header.wp-block-template-part:has(> .socle-entete) {
	position: sticky;
	top: 0;
	z-index: 20;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .socle-entete) { top: var(--wp-admin--admin-bar--height, 0px); }
/* Sous 600 px, la barre d'administration n'est plus fixe : l'en-tête colle au bord. */
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .socle-entete) { top: 0; }
}
/* Ancres, focus et défilement programmé : la cible s'arrête sous l'en-tête collant (hauteur maximale constatée : 115 px). */
html:has(.wp-site-blocks > header.wp-block-template-part > .socle-entete) { scroll-padding-top: 8rem; }
/* Au-dessus de 600 px, la barre d'administration est fixe : elle s'ajoute au décalage. */
@media (min-width: 601px) {
	html:has(body.admin-bar .wp-site-blocks > header.wp-block-template-part > .socle-entete) { scroll-padding-top: calc(8rem + var(--wp-admin--admin-bar--height, 32px)); }
}
.socle-entete .wp-block-buttons .wp-block-button__link { padding: 0.625rem 1rem; font-size: var(--wp--custom--taille--bouton-entete); }
.socle-entete .wp-block-navigation a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent); }
@media (max-width: 600px) {
	.socle-entete .wp-block-buttons .wp-block-button__link {
		padding: 0.45rem 0.625rem;
		font-size: var(--wp--custom--taille--bouton-entete-mobile);
		line-height: 1.2;
		max-width: 9.5rem;
		text-align: center;
	}
	.socle-entete .wp-block-group { gap: 0.75rem !important; }
}

/* Pied du site */
.socle-pied a { text-decoration: none; color: inherit; }
.socle-pied a:hover { color: var(--wp--preset--color--accent-sur-sombre); }
.socle-pied .socle-pied-bas { border-top: 1px solid var(--socle-filet); padding-top: 1.25rem; font-size: var(--wp--custom--taille--note); color: var(--socle-texte-2); }

/* Articles */
.socle-article .wp-block-post-content > * { max-width: 720px; }
.socle-liste-articles .wp-block-post { border-top: 1px solid var(--socle-filet); padding-top: 1.5rem; }

/* Grilles : une colonne en dessous de 640 px */
@media (max-width: 640px) {
	.wp-block-group.is-layout-grid.socle-grille { grid-template-columns: 1fr !important; }
}
@media (max-width: 781px) {
	.socle-etapes > .wp-block-group { padding-top: 0; padding-left: 3.5rem; padding-right: 0; }
	.socle-etapes > .wp-block-group::after { top: 2.4rem; left: 1.2rem; right: auto; width: 1px; height: calc(100% + var(--wp--preset--spacing--40) - 2.4rem); }
	.socle-etapes > .wp-block-group:last-child::after { display: none; }
}
