/* ==========================================================================
   0. Activation du Moteur d'Espacement (Ciblé sur le Contenu)
   ========================================================================== */
/* 
   CRITIQUE : On cible UNIQUEMENT les éléments dans .entry-content (le corps de page).
   Cela active le Flexbox pour l'espacement (gap) dans vos articles,
   SANS toucher au Header ni au Footer qui restent en dehors de ce sélecteur.
*/

/* A. Groupes dans le contenu -> Empilement vertical avec espacement */
.entry-content .wp-block-group,
.entry-content .wp-block-stack {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--plus-2);
}

/* B. Conteneurs de colonnes dans le contenu -> Alignement horizontal */
.entry-content .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* Garde les colonnes côte à côte */
    gap: var(--wp--preset--spacing--plus-2); /* Espace ENTRE les colonnes */
    align-items: flex-start;
}

/* C. Colonnes individuelles dans le contenu -> Empilement interne */
.entry-content .wp-block-column {
    display: flex;
    flex-direction: column; /* Empile H3, P, etc. verticalement */
    gap: var(--wp--preset--spacing--plus-2); /* Espace INTERNE */
    flex: 1;
    min-width: 0;
}

/* Fin du moteur d'espacement */

/* ==========================================================================
   1. Typographie & Headings
   ========================================================================== */

h1, h2 {
	text-wrap: balance;
}

.is-style-exergue {
	font-family: var(--wp--preset--font-family--judson) !important;
}

.is-style-eyebrow {
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.25rem;
}

/* ==========================================================================
   2. Composants : Boutons
   ========================================================================== */

.wp-block-button__link {
	transition: all 150ms ease-in-out;
}

.is-style-primaire .wp-block-button__link {
	background-color: var(--wp--preset--color--custom-primaire);
}

.is-style-primaire .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--custom-secondaire);
}

.is-style-secondaire .wp-block-button__link,
.btn-contact.active a {
	background-color: var(--wp--preset--color--custom-secondaire);
}

.is-style-secondaire .wp-block-button__link:hover,
.btn-contact.active a:hover {
	background-color: var(--wp--preset--color--custom-primaire);
}

.has-custom-primaire-background-color .is-style-secondaire .wp-block-button__link {
	background-color: var(--wp--preset--color--custom-secondaire);
}

.has-custom-primaire-background-color .is-style-secondaire .wp-block-button__link:hover {
	color: var(--wp--preset--color--custom-primaire);
	background-color: var(--wp--preset--color--custom-tertiaire);
}

/* ==========================================================================
   3. Structure : Header & Navigation
   ========================================================================== */

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 24px 0;
	z-index: 9999; /* Priorité maximale */
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
}

header p {
	margin: 0;
}

/* Compensation du header fixe */
.entry-content {
	margin-top: 100px; 
}

.wp-block-polylang-language-switcher {
	padding: 0;
	margin: 0;
}

.lang-item {
	list-style-type: none;
}

.lang-item a {
	text-decoration: none;
}

.lang-item a:hover {
	color: var(--wp--preset--color--custom-secondaire);
}

/* ==========================================================================
   4. Mise en page : Hero Section
   ========================================================================== */

.hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.hero .wp-block-heading {
	position: relative;
	z-index: 2;
}

.composition-hero {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
    z-index: 1;
}

/* ==========================================================================
   5. Éléments de Design & Décorations
   ========================================================================== */

.cmc-lines--style-1,
.cmc-lines--style-2,
.cmc-lines--style-3 {
	position: absolute;
	opacity: 0.5;
	margin: 0;
}

.cmc-lines--style-1 {
	left: 0;
	bottom: 0;
	transform: rotateX(180deg) scale(-1, 1);
}

.cmc-lines--style-2 {
	left: 0;
	top: 0;
	transform: rotateX(180deg) scale(-1, -1);
}

.cmc-lines--style-3 {
	right: 0;
	bottom: 0;
}

.cmc-lines--style-1 img,
.cmc-lines--style-2 img {
	width: 200px;
}

.cmc-lines--style-3 img {
	width: 125px;
}

.cmc-quarts-group .cmc-quart {
	margin: 0 1.25rem;
}

.rotate--90 { transform-origin: center; transform: rotate(90deg); }
.rotate--180 { transform-origin: center; transform: rotate(180deg); }
.rotate--270 { transform-origin: center; transform: rotate(270deg); }

/* ==========================================================================
   6. Footer
   ========================================================================== */

footer {
	margin-top: 0;
}

footer a span:hover {
	color: var(--wp--preset--color--custom-secondaire);
}

/* ==========================================================================
   7. Responsive Design
   ========================================================================== */

@media screen and (max-width: 1024px) {
	.cmc-lines--style-1 img, .cmc-lines--style-2 img { width: 150px; }
	.cmc-lines--style-3 img { width: 90px; }
	.composition-hero { width: 360px; }
}

@media screen and (max-width: 780px) {
	header { padding: 16px 0; }
	img.custom-logo { content: url('../images/cmc-logo_mobile.svg'); height: 28px; width: auto; }
	.site-logo img { height: auto; }
	.btn-contact a { text-indent: -9999px; background-image: url("../images/cmc-mail.svg"); background-repeat: no-repeat; background-position: center; padding: 0; width: 48px !important; height: 48px; }
	.hero { min-height: 50rem; }
	.cmc-lines--style-1, .cmc-lines--style-2, .cmc-lines--style-3 { display: none; }
	.diagnostic-premium-PI-cover { width: 60%; }
	.visually-hidden--phone { text-indent: -9999px; }
}

@media screen and (max-width: 480px) {
	.composition-hero { width: 280px; }
}

/* ==========================================================================
   8. Utilitaires & Accessibilité
   ========================================================================== */

.visually-hidden {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}