/*
 * AXEK Elements – Portrait en diagonale (par 6LEX – https://6lex.co)
 *
 * Texte d'un côté, portrait de l'autre, séparés par une coupe en biais.
 *
 * LA COUPE EST À L'ANGLE DE LA MARQUE. Ce n'est pas un biseau décoratif :
 * c'est l'inclinaison de la barre qui précède chaque sur-titre du site,
 * reprise à l'échelle d'une section. Une diagonale à un autre angle ne
 * dirait plus rien de particulier.
 *
 * LE PORTRAIT DOIT ÊTRE DÉTOURÉ. C'est la condition du bloc : une photo
 * détourée peut FRANCHIR la coupe, une photo rectangulaire y reste
 * enfermée — et un portrait enfermé dans une forme reste plat. Le réglage
 * « débordement » ne sert qu'à ça.
 *
 * L'ambiance du champ reprend la recette de la bande CTA telle quelle :
 * dégradé radial depuis le haut, halo clair au même point, grain en
 * surimpression. Aucune valeur n'est réinventée ici.
 */

.axek-pt, .axek-pt *, .axek-pt *::before, .axek-pt *::after{ box-sizing: border-box; }

.axek-pt{
	--pt-min-h: 620px;
	--pt-radius: 24px;
	--pt-fond: var(--ax-surface);

	--pt-champ-l: 66%;      /* largeur du champ coloré                    */
	--pt-coupe: 21%;        /* où la coupe touche le haut du champ        */
	--pt-decal: 0px;        /* décalage horizontal du portrait            */
	--pt-air: 40px;         /* air au-dessus de la tête                   */
	--pt-img-l: 452px;      /* largeur MAXIMALE du portrait               */
	--pt-txt-pad: 72px;

	/* Le portrait est ANCRÉ AU MÊME BORD que le champ coloré, et non posé
	   dans une colonne de grille. C'est ce qui rend le franchissement
	   stable : le champ est un pourcentage, le débordement des pixels ;
	   dans une grille, les deux dérivent l'un par rapport à l'autre et le
	   geste se défait dès qu'on change de largeur d'écran. Mesuré : réglé
	   à 1188px, il ne franchissait plus rien à 1400px. */
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: center; min-height: var(--pt-min-h);
	background: var(--pt-fond); border-radius: var(--pt-radius);
}

/* ---------- texte ---------- */
/* La colonne de texte prend EXACTEMENT ce que le champ ne prend pas. Deux
   largeurs réglées séparément finiraient par dépasser 100 % — c'est ce qui
   faisait passer le texte sous la photo (46 % + 66 % = 112 %). Un seul
   réglage commande le partage, le chevauchement devient impossible. */
.axek-pt-txt{ position: relative; z-index: 4;
	flex: 0 0 calc(100% - var(--pt-champ-l));
	padding: var(--pt-txt-pad) 0 var(--pt-txt-pad) var(--pt-txt-pad); }

.axek-pt-sur{
	display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px;
	font-weight: 500; font-size: var(--ax-meta); letter-spacing: 0;
	text-transform: uppercase; color: var(--ax-terra); line-height: 1.2;
}
.axek-pt-sur::before{
	content: ""; flex: none;
	width: var(--ax-sur-barre-w); height: var(--ax-sur-barre-h);
	border-radius: calc(var(--ax-sur-barre-w) / 2);
	background: currentColor;
	transform: rotate(var(--ax-sur-barre-a));
}
.axek-pt-titre.axek-pt-titre{
	margin: 0 0 22px;
	font-size: var(--ax-section); font-weight: 600;
	letter-spacing: -.025em; line-height: 1.12;
	color: var(--ax-encre); text-wrap: balance;
}
.axek-pt-corps{ font-size: var(--ax-corps); font-weight: 500; line-height: 1.6;
	color: var(--ax-encre); }
.axek-pt-corps p{ margin: 0 0 15px; text-wrap: pretty; }
.axek-pt-corps p:last-child{ margin-bottom: 0; }
.axek-pt-corps strong{ color: var(--ax-encre); font-weight: 600; }

/* ---------- le champ coloré ---------- */
.axek-pt-champ{
	position: absolute; inset: 0 calc(-1 * var(--pt-radius)) 0 auto;
	width: var(--pt-champ-l); z-index: 1;
	background: radial-gradient(120% 130% at 50% 0%,
		var(--ax-terra-halo), var(--ax-terra) 45%, var(--ax-terra-fond) 100%);
	clip-path: polygon(var(--pt-coupe) 0, 100% 0, 100% 100%, 0 100%);
}
.axek-pt-champ::before{
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(60% 60% at 50% 0%, rgba(255,158,92,.30), transparent 62%);
}
.axek-pt--grain .axek-pt-champ::after{
	content: ""; position: absolute; inset: 0;
	opacity: .5; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Ambiances : mêmes recettes que la bande CTA, jamais recopiées à la main. */
.axek-ptamb-nuit .axek-pt-champ{
	background: radial-gradient(120% 130% at 50% 0%,
		var(--ax-nuit-halo), var(--ax-nuit) 45%, var(--ax-nuit-fond) 100%);
}
.axek-ptamb-nuit .axek-pt-champ::before{
	background: radial-gradient(60% 60% at 50% 0%, rgba(126,96,255,.32), transparent 62%);
}
.axek-ptamb-voile .axek-pt-champ{ background: var(--ax-terra-voile); }
.axek-ptamb-voile .axek-pt-champ::before{ background: none; }

.axek-pt-anneaux{ position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.axek-pt-anneaux circle{ fill: none; stroke: rgba(255,255,255,.11); stroke-width: 1.4; }
.axek-ptamb-voile .axek-pt-anneaux circle{ stroke: rgba(171,64,20,.16); }

/* ---------- le portrait ----------
   Seul élément au-dessus du champ : c'est lui qui franchit la coupe. */
/* Le portrait est CENTRÉ dans le champ, et tenu par la HAUTEUR.
   Le dimensionner par la largeur était l'erreur : dès que le texte
   raccourcit, le bloc raccourcit aussi et la tête sort par le haut.
   Ici la scène est bornée en haut comme en bas, l'image s'y ajuste, et
   `--pt-air` garantit toujours du vide au-dessus de la tête. */
.axek-pt-scene{
	position: absolute; z-index: 3;
	top: var(--pt-air); bottom: 0;
	right: calc(var(--pt-champ-l) / 2 - var(--pt-img-l) / 2 - var(--pt-radius) + var(--pt-decal));
	display: flex; align-items: flex-end; justify-content: center;
}
.axek-pt-scene img{
	display: block; width: auto; height: auto;
	max-height: 100%; max-width: var(--pt-img-l);
	filter: drop-shadow(-18px 22px 40px rgba(24,30,21,.20));
}

/* Image à gauche : on retourne la grille et la coupe, sans toucher au DOM. */
.axek-pt--gauche{ flex-direction: row-reverse; }
.axek-pt--gauche .axek-pt-txt{
	padding: var(--pt-txt-pad) var(--pt-txt-pad) var(--pt-txt-pad) 0; }
.axek-pt--gauche .axek-pt-scene{ right: auto;
	left: calc(var(--pt-champ-l) / 2 - var(--pt-img-l) / 2 - var(--pt-radius) + var(--pt-decal)); }
.axek-pt--gauche .axek-pt-champ{
	inset: 0 auto 0 calc(-1 * var(--pt-radius));
	clip-path: polygon(0 0, calc(100% - var(--pt-coupe)) 0, 100% 100%, 0 100%);
}

/* ---------- responsive ----------
   En une colonne la coupe passe à l'HORIZONTALE : une diagonale verticale
   n'a plus de sens quand le texte est au-dessus du portrait. */
@media (max-width: 900px){
	.axek-pt{ display: block; min-height: 0; }
	.axek-pt-txt,
	.axek-pt--gauche .axek-pt-txt{ padding: 44px 26px 0; }
	.axek-pt-scene,
	.axek-pt--gauche .axek-pt-scene{
		position: static; margin-top: 28px; }
	/* En pile, plus de hauteur de bloc à respecter : c'est la largeur qui
	   borne à nouveau, et elle suit la fenêtre pour rester fluide. */
	/* La photo occupe plus franchement la largeur : à 68 vw elle flottait
	   au milieu d'un champ qui, lui, allait d'un bord à l'autre. */
	.axek-pt-scene img{ max-height: none; width: var(--pt-photo-l); }
	/* EN PILE, LE CHAMP NE DOIT PLUS CROISER LE TEXTE.
	   En colonnes il occupe 66 % de la largeur et le texte vit à côté ; en
	   pile il prend toute la largeur, montait à 62 % de la hauteur du bloc
	   et passait DERRIÈRE le dernier paragraphe : de l'encre sur du
	   terracotta, illisible. Il passait aussi PAR-DESSUS la photo, son
	   z-index valant 1.
	   Il se cale donc sur la photo : même largeur, même hauteur, et il
	   repasse dessous. Sa hauteur suit celle de l'image, calculée depuis sa
	   largeur et son rapport, pour rester juste si la photo change. */
	.axek-pt{ --pt-photo-l: min(340px, 82vw); --pt-photo-r: 1.313; }
	/* On repasse en `relative` pour pouvoir empiler la photo au-dessus du
	   champ, mais il faut alors NEUTRALISER le décalage prévu pour le grand
	   écran : sinon `right` reprend effet et pousse la photo hors cadre. */
	.axek-pt-scene{ position: relative; z-index: 1;
		top: auto; right: auto; bottom: auto; left: auto; }
	.axek-pt-champ,
	.axek-pt--gauche .axek-pt-champ{
		inset: auto 0 0; width: 100%; z-index: 0;
		height: calc(var(--pt-photo-l) * var(--pt-photo-r) + 34px);
		clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%);
	}
	.axek-pt-scene img{ position: relative; z-index: 1; }
}