/*
	Tokens de design des blocs Proskuneo.

	Préfixe --ps- pour cohabiter sans collision avec les variables héritées de Webflow
	(--color-a, --avenir…) tant que main.css reste chargé. Voir docs/BLOCS.md.
*/

:root {
	/* Couleurs */
	--ps-navy: #1e2140;
	--ps-navy-dark: #16203f;
	--ps-navy-deep: #0f162c;
	--ps-gold: #e5ac5b;
	--ps-cream: #faeede;
	--ps-white: #fff;
	--ps-text: #333;
	--ps-text-invert: #e7e9f1;

	/* Typographies */
	--ps-font-display: 'Poppins', Arial, sans-serif;
	--ps-font-heading: 'Bricolage Grotesque', Arial, sans-serif;
	--ps-font-ui: 'Hanken Grotesk', Arial, sans-serif;
	--ps-font-body: Arial, Helvetica, sans-serif;

	/* Rythme vertical */
	--ps-space-xs: 8px;
	--ps-space-sm: 16px;
	--ps-space-md: 24px;
	--ps-space-lg: 40px;
	--ps-space-xl: 64px;
	--ps-space-2xl: 100px;

	/* Gabarit */
	--ps-container: 1200px;
	--ps-container-wide: 1440px;
	--ps-radius: 15px;
}

/*
	Fonds de section. Le contraste du texte suit le fond : c'est volontairement lié plutôt
	qu'exposé comme réglage séparé, pour qu'aucune combinaison illisible ne soit atteignable
	depuis l'éditeur.
*/
.ps-fond-blanc {
	--ps-sur-fond: var(--ps-text);
	--ps-sur-fond-titre: var(--ps-navy);
	background-color: var(--ps-white);
}

.ps-fond-creme {
	--ps-sur-fond: var(--ps-text);
	--ps-sur-fond-titre: var(--ps-navy);
	background-color: var(--ps-cream);
}

.ps-fond-marine {
	--ps-sur-fond: var(--ps-text-invert);
	--ps-sur-fond-titre: var(--ps-white);
	background-color: var(--ps-navy);
}

.ps-fond-or {
	--ps-sur-fond: var(--ps-navy);
	--ps-sur-fond-titre: var(--ps-navy);
	background-color: var(--ps-gold);
}

/* Enveloppe commune à toutes les sections de bloc */
.ps-section {
	padding-block: var(--ps-space-2xl);
	color: var(--ps-sur-fond, var(--ps-text));
}

.ps-section__inner {
	width: 90%;
	max-width: var(--ps-container);
	margin-inline: auto;
}

/* Titre de section, unifié : Poppins 900 uppercase (voir docs/BLOCS.md, normalisation) */
.ps-titre {
	margin: 0 0 var(--ps-space-md);
	color: var(--ps-sur-fond-titre, var(--ps-navy));
	font-family: var(--ps-font-display);
	font-size: 1.7rem;
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
}

.ps-titre strong,
.ps-titre .ps-accent {
	color: var(--ps-gold);
	font-weight: 900;
}

.ps-texte {
	margin: 0;
	font-family: var(--ps-font-body);
	font-size: 15px;
	line-height: 1.6;
}

.ps-texte + .ps-texte {
	margin-top: var(--ps-space-sm);
}

/* Bouton, repris des mesures relevées sur Webflow (rayon 15px, pas d'ombre) */
.ps-bouton {
	display: inline-block;
	padding: 12px 32px;
	border-radius: var(--ps-radius);
	background-color: var(--ps-navy);
	color: var(--ps-white);
	font-family: var(--ps-font-ui);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.ps-bouton:hover,
.ps-bouton:focus {
	background-color: var(--ps-navy-dark);
}

.ps-fond-marine .ps-bouton {
	background-color: var(--ps-gold);
	color: var(--ps-navy);
}

@media screen and (max-width: 991px) {
	.ps-section {
		padding-block: var(--ps-space-xl);
	}

	.ps-section__inner {
		width: 90%;
		max-width: 768px;
	}
}

/* ==========================================================================
   Ancres

   Le header reste collé en haut de l'écran : sans réserve, un lien vers #prix
   ou #tarifs amène sa cible juste dessous, à moitié cachée par le menu.
   ========================================================================== */
:target {
	scroll-margin-top: 110px;
}

/* ==========================================================================
   Pied de page

   Un liseré pour détacher le pied de page de ce qui le précède : sur les pages
   au fond blanc — articles, blog, catégories — les deux se confondaient.
   ========================================================================== */
.section-22-footer {
	border-top: 4px solid var(--ps-navy);
}

/* ==========================================================================
   Sections posées sur une photo

   Webflow habillait certaines sections d'une image de fond en CSS ; les blocs la
   portent maintenant en attribut. Sous 991 px, la photo est retirée comme chez
   Webflow : à cette largeur le sujet est rogné et le texte passe dessus.
   ========================================================================== */
.ps-section--image {
	background-repeat: no-repeat;
	background-size: cover;
}

.ps-section--image.ps-texte-clair,
.ps-section--image.ps-texte-clair :is(h1, h2, h3, h4, p, li) {
	color: var(--ps-white);
}

@media screen and (max-width: 991px) {
	.ps-section--image {
		background-image: none !important;
	}

	.ps-section--image.ps-texte-clair,
	.ps-section--image.ps-texte-clair :is(h1, h2, h3, h4, p, li) {
		color: inherit;
	}
}