/*
 * AXEK Elements – Bibliothèque A.C.T.I.F. Guides (par 6LEX – https://6lex.co)
 *
 * LA COUVERTURE PORTE LE TITRE, et le titre n'est PAS répété dessous.
 * Écrit deux fois à deux centimètres d'écart, il ferait du bruit ; porté
 * par la couverture, il transforme la grille en étagère de documents —
 * on lit les titres comme des dos de livres. C'est aussi la seule forme
 * qui tienne encore debout quand l'image sort de la page, en partage.
 *
 * Le fond reprend la recette du héros à l'identique : dégradé radial,
 * halo au même point, grain en surimpression, anneaux avec leur masque.
 */

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

.axek-gd{
	--gd-cols: 3;
	--gd-gap: 26px;
	--gd-radius: 20px;
	--gd-ratio: 16 / 10;
}

/* ---------- barre de tri ---------- */
.axek-gd-barre{ display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 30px; }
.axek-gd-rech{
	flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 10px;
	background: var(--ax-surface); border: 1px solid transparent; border-radius: 100px;
	padding: 11px 18px; transition: border-color var(--axk-dur) var(--axk-ease);
}
.axek-gd-rech:focus-within{ border-color: var(--ax-terra); }
.axek-gd-rech svg{ flex: none; width: 16px; height: 16px; stroke: var(--ax-texte-tenu); fill: none; stroke-width: 1.8; }
.axek-gd-rech input{
	flex: 1; min-width: 0; border: 0; background: none; outline: none;
	font-family: inherit; font-size: var(--ax-second); font-weight: 500; line-height: 1.4;
	color: var(--ax-encre);
}
.axek-gd-rech input::placeholder{ color: var(--ax-texte-tenu); }

.axek-gd-themes{ display: flex; gap: 8px; flex-wrap: wrap; }
/* Classe DOUBLÉE : le filtre est un <button>, et une règle du thème en
   (0,1,1) passait devant la classe seule — mesuré, les filtres rendaient en
   16/600 au lieu de 13/500. */
.axek-gd-th.axek-gd-th{
	border: 1px solid var(--ax-filet); background: none; border-radius: 100px;
	padding: 9px 16px; font-family: inherit; font-size: var(--ax-meta); font-weight: 500;
	line-height: 1; color: var(--ax-texte-doux); cursor: pointer;
	transition: border-color var(--axk-dur) var(--axk-ease), color var(--axk-dur) var(--axk-ease);
}
.axek-gd-th:hover{ border-color: var(--ax-terra); color: var(--ax-terra); }
.axek-gd-th[aria-pressed="true"]{ background: var(--ax-terra); border-color: var(--ax-terra); color: #fff; }

/* ---------- grille ---------- */
.axek-gd-grille{ display: grid; grid-template-columns: repeat(var(--gd-cols), minmax(0, 1fr)); gap: var(--gd-gap); }
.axek-gd-carte[hidden]{ display: none; }

/* Survol repris des cartes du blog : une seule grammaire de mouvement. */
.axek-gd-carte{
	display: flex; flex-direction: column; background: #fff;
	text-decoration: none; color: inherit;
	border: 1px solid var(--ax-filet); border-radius: var(--gd-radius); overflow: hidden;
	transition: transform var(--axk-dur-mid) var(--axk-ease), box-shadow var(--axk-dur-mid) var(--axk-ease);
}
.axek-gd-carte:hover{
	transform: translateY(var(--axk-carte-lift));
	box-shadow: var(--axk-carte-lift-shadow);
}
.axek-gd-carte:focus-visible{ outline: 2px solid var(--ax-terra); outline-offset: 3px; }

/* ---------- la couverture ---------- */
.axek-gd-couv{
	position: relative; isolation: isolate; overflow: hidden; display: block;
	aspect-ratio: var(--gd-ratio); padding: 24px; text-decoration: none; color: #fff;
	background-color: var(--ax-terra-fond);
	background-image: radial-gradient(120% 130% at 50% 0%,
		var(--ax-terra-halo), var(--ax-terra) 45%, var(--ax-terra-fond) 100%);
}
.axek-gd-couv::before{
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(58% 52% at 50% 4%, rgba(255,158,92,.30), transparent 60%);
}
.axek-gd-couv::after{
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	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");
}
.axek-gd-anneaux{
	position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
	-webkit-mask: radial-gradient(circle at 50% 42%, #000 24%, transparent 72%);
	        mask: radial-gradient(circle at 50% 42%, #000 24%, transparent 72%);
}
.axek-gd-anneaux circle{ fill: none; stroke: rgba(255,255,255,.09); stroke-width: 1; }

/* Une vraie couverture, quand elle existe, passe devant la composition. */
.axek-gd-couv img{
	position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover;
}
.axek-gd-couv--image::before,
.axek-gd-couv--image::after{ content: none; }

.axek-gd-cv{ position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }
.axek-gd-cv-th{
	font-size: var(--ax-meta); font-weight: 500; text-transform: uppercase;
	color: rgba(255,255,255,.72); line-height: 1.2; margin-bottom: 10px;
}
/* Rôle « Titre de bloc », quel que soit le niveau de balise employé. */
.axek-gd-cv-t{
	margin: auto 0 0; font-size: var(--ax-bloc); font-weight: 600;
	line-height: 1.18; letter-spacing: -.02em; color: #fff; text-wrap: balance;
}

/* ---------- corps ---------- */
.axek-gd-corps{ display: flex; flex-direction: column; flex: 1; padding: 20px 20px 18px; }
.axek-gd-extrait{
	margin: 0 0 16px; font-size: var(--ax-corps); font-weight: 500; line-height: 1.6;
	color: var(--ax-texte-doux); text-wrap: pretty;
}
.axek-gd-meta{
	margin-top: auto; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
	padding-top: 14px; border-top: 1px solid var(--ax-filet);
	font-size: var(--ax-meta); font-weight: 500; color: var(--ax-texte-tenu);
}
.axek-gd-actions{ display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
/* ⚠ CES BOUTONS NE S'APPELLENT PAS « -btn », ET C'EST VOULU.
   base.css force `color:#fff` sur tout `a[class*="-btn"]` et remplit les
   SVG qui n'ont pas d'attribut fill — deux règles faites pour les boutons
   PLEINS de la DA. Le bouton de téléchargement est un bouton à contour :
   il s'y retrouvait avec du texte blanc sur fond blanc, donc invisible, et
   des icônes en aplat. Renommer coûte moins cher qu'une guerre de
   spécificité, et laisse les règles de base intactes pour qui en a besoin.

   Icône APRÈS le texte : la convention du site. */
.axek-gd-lien{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-weight: 600; font-size: var(--axk-btn-sm-fs); line-height: 1;
	padding: var(--axk-btn-sm-pad); border-radius: var(--axk-btn-radius);
	border: var(--axk-btn-bw) solid transparent; text-decoration: none; white-space: nowrap;
	transition: background var(--axk-btn-dur) var(--axk-ease), border-color var(--axk-btn-dur) var(--axk-ease);
}
.axek-gd-lien svg{ width: 16px; height: 16px; fill: none; stroke: currentColor;
	stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Sélecteurs montés d'un cran (élément + deux classes) : base.css pose
   `[class*="axek-"] a{ color: inherit }` en (0,1,1), qui battrait une
   classe seule et rendrait le texte du bouton plein couleur d'encre sur
   fond terracotta. */
a.axek-gd-lien.axek-gd-lien--lire{ background: var(--ax-terra); color: #fff; }
a.axek-gd-lien.axek-gd-lien--lire:hover{ background: var(--axk-btn-terra-h); color: #fff; }
a.axek-gd-lien.axek-gd-lien--tel{ border-color: var(--axk-btn-ink); color: var(--axk-btn-ink); }
a.axek-gd-lien.axek-gd-lien--tel:hover{ background: var(--axk-btn-ink-tint); color: var(--axk-btn-ink); }

.axek-gd-vide{
	grid-column: 1 / -1; padding: 46px 20px; text-align: center;
	font-size: var(--ax-corps); font-weight: 500; color: var(--ax-texte-doux);
}

@media (max-width: 1000px){ .axek-gd{ --gd-cols: 2; } }
@media (max-width: 640px){
	.axek-gd{ --gd-cols: 1; }
	.axek-gd-actions .axek-gd-lien{ flex: 1 1 auto; }
}


/* ═══════════════════ LA PAGE D'UN GUIDE ═══════════════════
   Le texte à gauche, le document à droite. Le panneau reste visible au
   défilement : c'est le geste attendu de cette page, on ne doit pas
   remonter pour télécharger.

   Tous les niveaux de titre au rôle « Titre de bloc ». Dans un texte
   court, une hiérarchie de tailles n'apporte rien et fait des sauts ;
   le niveau ne sert plus qu'à la structure du document. */
/* Le gabarit d'article du thème borne son contenu à 600 px — trop étroit
   pour deux colonnes. Plutôt que d'aller modifier le thème, la page se
   recentre sur la FENÊTRE : elle reste juste quelle que soit la largeur
   que le gabarit lui accorde, et ne dépend d'aucun nom de classe du thème.
   Les 94vw, et non 100vw, laissent la place de la barre de défilement. */
.axek-gu-page{
	width: min(1180px, 94vw);
	margin-left: 50%; transform: translateX(-50%);
	/* La réserve du haut est portée par la PAGE et non par l'en-tête : les
	   deux colonnes démarrent alors à la même hauteur, et le panneau du
	   document s'aligne sur le lien de retour au lieu de commencer sous le
	   titre. La barre de navigation est fixe sur 92 px. */
	padding: 124px 0 70px;
}
.axek-gu-page, .axek-gu-page *{ box-sizing: border-box; }

.axek-gu-tete{ margin-bottom: 34px; }
/* En ligne mais SEUL sur la sienne : `inline-flex` laissait le thème venir
   se coller à sa suite, sans même une espace entre les deux. */
/* Sélecteur avec la balise : base.css pose `[class*="axek-"] a{ color:
   inherit }` en (0,1,1), qui battrait la classe seule et rendrait le lien
   à l'encre du texte au lieu du gris. */
/* La ligne de méta, calquée sur celle de l'article : retour | date | thème.
   Sélecteurs avec la balise : base.css pose `[class*="axek-"] a{ color:
   inherit }` en (0,1,1), qui battrait une classe seule. */
.axek-gu-meta{
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
	font-size: var(--ax-meta); font-weight: 500; color: var(--ax-texte-doux); line-height: 1.4;
}
.axek-gu-sep{ opacity: .5; }
.axek-gu-date{ color: var(--ax-texte-doux); }

a.axek-gu-retour{
	display: inline-flex; align-items: center; gap: 6px;
	font-size: var(--ax-meta); font-weight: 600; color: var(--ax-terra);
	text-decoration: none; line-height: 1.2;
	transition: color var(--axk-dur) var(--axk-ease);
}
a.axek-gu-retour:hover{ color: var(--axk-btn-terra-h); }

a.axek-gu-cat{
	font-size: var(--ax-meta); font-weight: 600; color: var(--ax-texte-doux);
	text-decoration: none; transition: color var(--axk-dur) var(--axk-ease);
}
a.axek-gu-cat:hover{ color: var(--ax-terra); }
.axek-gu-retour svg{ width: 14px; height: 14px; }
.axek-gu-titre.axek-gu-titre{
	margin: 0; font-size: var(--ax-section); font-weight: 600;
	letter-spacing: -.025em; line-height: 1.12; color: var(--ax-encre);
	text-wrap: balance; max-width: 22ch;
}

.axek-gu{ display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; }

/* La colonne réunit l'en-tête et le texte ; les règles de prose ne
   s'appliquent qu'à ce dernier. */
.axek-gu-col{ min-width: 0; }
.axek-gu-prose{ min-width: 0; }
.axek-gu-prose.axek-gu-prose p{
	margin: 0 0 18px; font-size: var(--ax-corps); font-weight: 500; line-height: 1.6;
	color: var(--ax-encre); text-wrap: pretty;
}
/* Classe DOUBLÉE : le kit Elementor vise les balises via
   `.elementor-kit-N h2` (0,1,1) et battrait une classe simple (0,1,0). */
.axek-gu-prose.axek-gu-prose h1, .axek-gu-prose.axek-gu-prose h2,
.axek-gu-prose.axek-gu-prose h3, .axek-gu-prose.axek-gu-prose h4,
.axek-gu-prose.axek-gu-prose h5, .axek-gu-prose.axek-gu-prose h6{
	margin: 30px 0 12px; font-size: var(--ax-bloc); font-weight: 600;
	line-height: 1.2; letter-spacing: -.02em; color: var(--ax-encre);
}
.axek-gu-prose.axek-gu-prose ul, .axek-gu-prose.axek-gu-prose ol{ margin: 0 0 18px; padding-left: 20px; }
.axek-gu-prose.axek-gu-prose li{
	margin-bottom: 8px; font-size: var(--ax-corps); font-weight: 500;
	line-height: 1.6; color: var(--ax-encre);
}
/* Dans le corps d'un texte, la couleur seule signale le lien. */
.axek-gu-prose a{ color: var(--ax-terra); }
.axek-gu-prose strong{ color: var(--ax-encre); font-weight: 600; }

.axek-gu-panneau{
	/* La barre fixe mesure 92 px : le panneau se cale dessous. */
	position: sticky; top: 116px;
	background: var(--ax-surface); border-radius: 20px; padding: 24px;
}
.axek-gu-couv{
	position: relative; isolation: isolate; overflow: hidden;
	aspect-ratio: 16 / 10; border-radius: 14px; margin-bottom: 18px;
	display: flex; align-items: flex-end; padding: 20px;
	background-color: var(--ax-terra-fond);
	background-image: radial-gradient(120% 130% at 50% 0%,
		var(--ax-terra-halo), var(--ax-terra) 45%, var(--ax-terra-fond) 100%);
}
.axek-gu-couv::before{
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(58% 52% at 50% 4%, rgba(255,158,92,.30), transparent 60%);
}
.axek-gu-couv--image::before{ content: none; }
.axek-gu-couv img{ position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.axek-gu-cv-t{
	position: relative; z-index: 2;
	font-size: var(--ax-carte); font-weight: 600; line-height: 1.2;
	letter-spacing: -.02em; color: #fff; text-wrap: balance;
}

.axek-gu-fiche{ margin: 0 0 18px; }
.axek-gu-fiche div{
	display: flex; justify-content: space-between; gap: 16px;
	padding: 11px 0; border-bottom: 1px solid var(--ax-filet);
	font-size: var(--ax-meta); font-weight: 500;
}
.axek-gu-fiche div:last-child{ border-bottom: 0; }
.axek-gu-fiche dt{ margin: 0; color: var(--ax-texte-tenu); }
.axek-gu-fiche dd{ margin: 0; color: var(--ax-encre); text-align: right; }

.axek-gu-actions{ flex-direction: column; margin: 0 0 20px; }
.axek-gu-actions .axek-gd-lien{
	width: 100%; font-size: var(--axk-btn-md-fs); padding: var(--axk-btn-md-pad);
}

/* Partage — même dessin que celui des articles : ronds au filet, l'icône
   prend l'accent au survol. Rien de nouveau à apprendre à l'œil. */
/* Pas de filet ici : la fiche qui précède en pose déjà un sous chaque
   ligne. Un trait de plus ferait deux traits parallèles à quelques pixels. */
.axek-gu-partage{ margin-top: 22px; }
.axek-gu-partage-lbl{
	display: block; margin-bottom: 12px;
	font-size: var(--ax-meta); font-weight: 500; color: var(--ax-texte-tenu); line-height: 1.4;
}
.axek-gu-partage-rangee{ display: flex; gap: 10px; flex-wrap: wrap; }
.axek-gu-partage a{
	width: 36px; height: 36px; border-radius: 50%;
	border: 1px solid var(--ax-filet); display: grid; place-items: center;
	color: var(--ax-texte-doux); text-decoration: none;
	transition: border-color var(--axk-dur) var(--axk-ease), color var(--axk-dur) var(--axk-ease);
}
.axek-gu-partage a:hover{ border-color: var(--ax-terra); color: var(--ax-terra); }
.axek-gu-partage svg{ width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 1000px){
	.axek-gu{ grid-template-columns: 1fr; gap: 34px; }
	.axek-gu-panneau{ position: static; }
	.axek-gu-tete{ margin-bottom: 26px; }
	/* En pile, le panneau prend toute la largeur et la couverture grandirait
	   avec : à 900 px de large elle ferait 560 px de haut et repousserait les
	   boutons hors de l'écran. On la borne en HAUTEUR, la proportion cède. */
	.axek-gu-couv{ aspect-ratio: auto; height: 200px; }
}

/* ---------- ZONES DE TOUCHE ----------
   Au doigt, ce qui se touche doit faire au moins 40 px. Téléphone ET tablette :
   le pointeur grossier ("pointer: coarse") attrape aussi les hybrides tactiles,
   la largeur attrape les tablettes que le navigateur déclare fines. On agrandit la
   ZONE, jamais le dessin : marge intérieure verticale sur les liens en ligne,
   carré plein sur les icônes. Pas de pseudo-élément qui déborderait sur le
   voisin : deux zones de touche ne doivent jamais se chevaucher. */
@media (max-width: 1024px), (pointer: coarse){
	/* Le champ mesurait 37 px. La marge de la barre est pilotée par un
	   contrôle (0,4,0) : une règle ici serait battue. On agit donc sur le
	   champ lui-même, qui n'a pas de contrôle. */
	.axek-gd-rech input{ min-height: 40px; }
	a.axek-gu-retour, a.axek-gu-cat{ padding-block: 14px; }
	.axek-gu-meta{ margin-bottom: 8px; }
	.axek-gu-partage a{ min-width: 44px; min-height: 44px; }
}