/*
Styles du pattern « En-tête d'accueil » (patterns/home-header.php).

Chargé uniquement sur les pages qui utilisent ce pattern, voir
sixclicks_enqueue_pattern_styles() dans functions.php.
*/

.home-header {
	top: -25px;
	position: relative;
	max-width: 100%;
	background: linear-gradient(
		to right,
		var(--wp--preset--color--snow) 0%,
		var(--wp--preset--color--plum) 0%
	);
margin-right: calc(var(--wp--style--root--padding-right) * 0)!important;
  margin-left: calc(var(--wp--style--root--padding-left) * 0)!important;

	overflow-x: clip; /* la signature pivotée déborde à gauche */
}


.home-header__split {
	position: relative;
	
}
.home-header__logos {
	position: absolute;
	z-index: 2;
	align-items: center;
	flex-direction: column;
	top: 60px;
	width: 100%;
}

.page-john-robert-nicoud-6clicks main {
	margin-block-start: 150px;
}

/* Signature verticale, à gauche du bloc.
   Repliée à l'horizontale sous 782px, où il n'y a pas la place. */
.home-header__side {
	text-align: center;
}


.home-header__name {
	margin: 0;
	font-size: 1.4em;
	line-height: 1.3;
}

.home-header__name span {
	color: var(--wp--preset--color--aubergine);
	font-weight: 600;
	font-style: italic;
}

.home-header__tag {
	margin: 0;
	font-size: 0.9rem;
}

.home-header__texts {
	position: relative;
	z-index: 1;
	margin-block-start: 0;
}

.home-header__cards {
	position: relative;
	z-index: 1;
	margin-block-start: var(--wp--preset--spacing--50);
	align-items: start;
	grid-template-columns: 16vw 5vw 18vw 18vw 18vw;
	top: 55px;
}
/* Logo WordPress en filigrane, en haut à droite. Décoratif : il passe
   derrière le contenu et disparaît sur petit écran. */
.home-header__wplogo {
	display: none;
}

.home-header__split {
	position: relative;
	
	/* Bloc de référence du logo WordPress (position:absolute, right:-100px) :
	   c'est ici qu'il faut le clipper, pas sur .home-header. */
	overflow-x: clip;
}

.home-header__texts {
	position: relative;
	z-index: 1;
}


.home-header__text-2 {
	padding: 14vw 0 0 13vw;
	text-wrap: pretty;
}
.home-header__text-1 {
	padding: 14vw 0 0 4vw;
}


/* -------------------------------------------------------------- Les cartes */

.home-card {
	border-radius: 20px;
	overflow: hidden;
	text-align: center;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.home-card--bio {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.home-card h3 {
	font-style: italic;
	font-weight: 300;
}

.home-card p {
	text-align: left;
}

/* Le bouton est collé en bas quelle que soit la hauteur du texte : c'est ce
   que l'original obtenait avec position:absolute, en moins fragile. */
.home-card .wp-block-buttons {
	margin-block-start: auto;
}

.home-card .wp-block-button__link {
	border-radius: 0;
	width: 100%;
}

.home-card--bio .home-card__img {
	margin: 0;
}

.home-card--bio .home-card__img img {
	display: block;
	background-color: var(--wp--preset--color--aubergine);
}

.home-card--bio h3 {
	color: var(--wp--preset--color--aubergine);
	font-size: 1.2em;
	margin: 0.6rem;
}

@media (min-width: 782px) {
	.home-header {
		background: linear-gradient(
			to right,
			var(--wp--preset--color--snow) 50%,
			var(--wp--preset--color--plum) 50%
		);
	}

	.home-header__side {
		position: absolute;
		top: 23rem;
		left: 262px;
		z-index: 1;
		transform-origin: left center;
		rotate: -90deg;
		translate: -50% 0;
		text-align: right;
		white-space: nowrap;
	}

	.home-header__wplogo {
		display: block;
		position: absolute;
		top: -10px;
		right: -100px;
		z-index: 0;
		pointer-events: none;
		opacity: 0.9;
	}


	.home-card--bio .home-card__img img {
		width: 100%;
	}
}

/* Le spacer ne sert plus à rien sous 768px, il sort de la grille.
   La carte bio prend toute la largeur, les trois autres se placent en dessous. */
@media (max-width: 768px) {
	.home-header__cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
		width: 86vw;
	}

	.home-header__cards > .wp-block-spacer {
		display: none;
	}

	.home-header__cards > .home-card--bio {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.home-header__cards {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 1.5rem;
	}

	.home-header__cards > .wp-block-spacer {
		display: none;
	}

	.home-header__cards > .home-card--bio {
		grid-column: 1 / -1;
	}
}