/*
 * AXEK Elements – Bloc service (par 6LEX – https://6lex.co)
 * Média + contenu (icône, sur-titre, titre, interventions, apports, bouton).
 */
.axek-sb, .axek-sb * { box-sizing: border-box; }
.axek-sb{ --sb-gap: 64px;
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--sb-gap); align-items: stretch; }

/* ---------- DISPOSITION DE L'IMAGE ----------
   Quatre positions, réglables par appareil. La classe est posée sur
   l'enveloppe Elementor (prefix_class), pas construite dans le rendu :
   deux mécaniques pour une même question finissent toujours par diverger.

   La largeur réglable se pose sur la colonne du MÉDIA, et le texte prend
   le reste. L'inverse rendrait la largeur du texte dépendante d'une valeur
   qui ne le concerne pas. */
.axek-sb--media-right  .axek-sb{
	grid-template-columns:
		calc((100% - var(--sb-gap)) * (100 - var(--sb-media-n, 50)) / 100)
		calc((100% - var(--sb-gap)) * var(--sb-media-n, 50) / 100); }
.axek-sb--media-right  .axek-sb-media{ order: 2; }
.axek-sb--media-left   .axek-sb{
	grid-template-columns:
		calc((100% - var(--sb-gap)) * var(--sb-media-n, 50) / 100)
		calc((100% - var(--sb-gap)) * (100 - var(--sb-media-n, 50)) / 100); }
.axek-sb--media-left   .axek-sb-media{ order: 0; }
.axek-sb--media-top    .axek-sb,
.axek-sb--media-bottom .axek-sb{ grid-template-columns: 1fr; }
.axek-sb--media-top    .axek-sb-media{ order: 0; }
.axek-sb--media-bottom .axek-sb-media{ order: 2; }

/* conteneur média : fond (couleur / dégradé / image) + marge ; l'image flotte
   au-dessus. Épouse la hauteur du bloc de contenu voisin (grille stretch). */
.axek-sb-media{ background: var(--ax-surface); border-radius: 28px; min-height: 400px; padding: 32px; display: flex; flex-direction: column; }
.axek-sb-media img{ width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; display: block; border-radius: 16px; }
.axek-sb-corps{ align-self: center; }

.axek-sb-ico{ display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--ax-terra); line-height: 1; }
.axek-sb-ico svg, .axek-sb-ico img{ width: 60px; height: 60px; }
.axek-sb-ico i{ font-size: var(--ax-section); }
.axek-sb-sur{
	display: inline-flex; align-items: center; gap: 12px;
	font-weight: 500; font-size: var(--ax-meta); letter-spacing: 0;
	text-transform: uppercase; color: var(--ax-terra);
	margin-bottom: 14px; line-height: 1.2;
}
.axek-sb-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-sb-title.axek-sb-title{ font-weight: 600; font-size: var(--ax-section); letter-spacing: -.025em; line-height: 1.12; color: var(--ax-encre); margin: 0 0 14px; }
/* Corps secondaire (elle était en Chapô). */
.axek-sb-desc{ color: var(--ax-texte-doux); font-size: var(--ax-second); line-height: 1.6; margin: 0 0 26px; max-width: 480px; font-weight: 500;}
.axek-sb-label{ font-weight: 500; font-size: var(--ax-meta); letter-spacing: 0; text-transform: uppercase; color: var(--ax-texte-tenu); margin: 0 0 14px; line-height: 1.2;}
.axek-sb-list{ list-style: none; display: grid; gap: 12px; margin: 0 0 26px; padding: 0; }
/* Corps secondaire. L'intitulé de famille, lui, garde Légende. */
.axek-sb-list li{ display: flex; gap: 12px; align-items: flex-start; font-size: var(--ax-second); color: var(--ax-encre); line-height: 1.6; font-weight: 500;}
.axek-sb-coche{ flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; background: rgba(171,64,20,.1);
	/* Voile de la couleur d'accent. La déclaration précédente sert de repli
	   aux navigateurs qui ignorent color-mix : ils gardent le voile fixe. */
	background: color-mix(in srgb, var(--sb-accent, var(--ax-terra)) 10%, transparent); color: var(--ax-terra); display: grid; place-items: center; margin-top: 1px; }
/* Intertitre dans la liste : il introduit, il n'énumère pas — donc pas de
   coche, et l'aplomb du texte reste celui des lignes qui suivent. */
.axek-sb-groupe{
	display: block; margin: 6px 0 2px;
	font-weight: 500; font-size: var(--ax-meta); letter-spacing: 0;
	text-transform: uppercase; color: var(--ax-texte-tenu); line-height: 1.2;
}
.axek-sb-list li.axek-sb-groupe:first-child{ margin-top: 0; }

/* ---------- LISTE SOUS LE TEXTE ----------
   Le pied traverse les deux colonnes et passe toujours en dernier : l'image
   se place par `order` (0 ou 2), il faut donc être au-delà pour ne jamais
   s'intercaler entre elle et le texte. */
.axek-sb--liste-dessous .axek-sb-pied{ grid-column: 1 / -1; order: 3; min-width: 0; }

/* Une colonne par famille. Le nombre vient d'un contrôle responsive, pas
   d'une @media : sur ce widget une @media serait morte, la règle du
   contrôle (0,2,0) la battant sans condition. */
.axek-sb-fams{
	--sb-fam-cols: 3;
	display: grid; grid-template-columns: repeat(var(--sb-fam-cols), minmax(0, 1fr));
	column-gap: 40px; row-gap: 22px; align-items: start;
}
.axek-sb-fams .axek-sb-fam{ display: grid; gap: 12px; align-content: start; min-width: 0; }
.axek-sb-fams .axek-sb-groupe{ margin: 0 0 2px; }
/* Pas de couleur ici : le réglage « Texte secondaire » du widget vise les
   `li`, et la prestation en hérite. La reposer ferait de ce bloc le seul en
   encre quand les autres sont en gris. */
.axek-sb-fams .axek-sb-ligne{
	display: flex; gap: 12px; align-items: flex-start;
	font-size: var(--ax-second); line-height: 1.6; font-weight: 500;
	overflow-wrap: anywhere;
}

/* ---------- FORMAT CARTE ----------
   Une seule colonne, encadrée, sans image : pour une offre qui n'a pas le
   poids d'un pilier. Deux cartes tiennent alors côte à côte dans un
   conteneur Elementor à deux colonnes, sans widget supplémentaire. */
.axek-sb--carte{
	display: flex; flex-direction: column; gap: 13px; height: 100%;
	border: 1px solid var(--ax-filet); border-radius: 24px; padding: 34px;
	transition: border-color var(--axk-dur) var(--axk-ease);
}
.axek-sb--carte:hover{ border-color: var(--ax-texte-tenu); }
/* Le corps ne se centre plus : dans une carte, tout part du haut. */
.axek-sb--carte .axek-sb-corps{
	align-self: stretch; display: flex; flex-direction: column; gap: 13px; height: 100%;
}
.axek-sb--carte .axek-sb-sur,
.axek-sb--carte .axek-sb-title,
.axek-sb--carte .axek-sb-desc{ margin: 0; }
.axek-sb--carte .axek-sb-title{ font-size: var(--ax-bloc); }
.axek-sb--carte .axek-sb-desc{ max-width: none; }

/* Les interventions en pastilles : on énumère, on ne détaille pas. */
.axek-sb-puces{
	list-style: none; margin: 4px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 7px 8px;
}
.axek-sb-puces li{
	background: var(--ax-surface); border-radius: 100px; padding: 7px 14px;
	font-size: var(--ax-meta); font-weight: 500; line-height: 1.45; color: var(--ax-encre);
}

/* Le lien de la carte. La balise est dans le sélecteur : base.css pose
   `[class*="axek-"] a{ color: inherit }` en (0,1,1). */
a.axek-sb-lien{
	margin-top: auto; padding-top: 14px; width: fit-content;
	display: inline-flex; align-items: center; gap: 7px;
	font-size: var(--ax-second); font-weight: 600; color: var(--ax-encre); text-decoration: none;
	transition: color var(--axk-dur) var(--axk-ease);
}
a.axek-sb-lien:hover{ color: var(--ax-terra); }
a.axek-sb-lien svg{ width: 15px; height: 15px; transition: transform var(--axk-dur) var(--axk-ease); }
a.axek-sb-lien:hover svg{ transform: translateX(3px); }

.axek-sb-apports{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
/* Légende : la taille y était déjà, la graisse non (600 au lieu de 500). */
.axek-sb-apport{ background: var(--ax-surface); border-radius: 100px; padding: 8px 16px; font-weight: 500; font-size: var(--ax-meta); line-height: 1.45;}
.axek-sb-btn{ display: inline-flex; align-items: center; gap: 8px; background: var(--ax-terra); color: #fff; font-weight: 600; font-size: var(--axk-btn-lg-fs); padding: var(--axk-btn-lg-pad); border-radius: var(--axk-btn-radius); text-decoration: none; transition: transform var(--axk-dur) var(--axk-ease), filter var(--axk-dur) var(--axk-ease); }
.axek-sb-btn:hover{ background: var(--axk-btn-terra-h); transform: translateY(var(--axk-btn-lift)); }

/* ---------- par appareil ----------
   Elementor suffixe la classe (-tablet, -mobile) ; ces règles ne touchent
   qu'à la disposition. L'image était auparavant remontée de force par un
   `order: -1 !important` : impossible à contredire, donc impossible de la
   passer sous le texte sur téléphone. */
@media (max-width: 1024px){
	.axek-sb{ --sb-gap: 36px; }
	.axek-sb-media{ min-height: 300px; padding: 20px; }
	.axek-sb-media img{ min-height: 210px; }

	.axek-sb-tablet--media-right  .axek-sb{
		grid-template-columns:
			calc((100% - var(--sb-gap)) * (100 - var(--sb-media-n, 50)) / 100)
			calc((100% - var(--sb-gap)) * var(--sb-media-n, 50) / 100); }
	.axek-sb-tablet--media-right  .axek-sb-media{ order: 2; }
	.axek-sb-tablet--media-left   .axek-sb{
		grid-template-columns:
			calc((100% - var(--sb-gap)) * var(--sb-media-n, 50) / 100)
			calc((100% - var(--sb-gap)) * (100 - var(--sb-media-n, 50)) / 100); }
	.axek-sb-tablet--media-left   .axek-sb-media{ order: 0; }
	.axek-sb-tablet--media-top    .axek-sb,
	.axek-sb-tablet--media-bottom .axek-sb{ grid-template-columns: 1fr; }
	.axek-sb-tablet--media-top    .axek-sb-media{ order: 0; }
	.axek-sb-tablet--media-bottom .axek-sb-media{ order: 2; }
}

@media (max-width: 767px){
	.axek-sb-mobile--media-right  .axek-sb{
		grid-template-columns:
			calc((100% - var(--sb-gap)) * (100 - var(--sb-media-n, 50)) / 100)
			calc((100% - var(--sb-gap)) * var(--sb-media-n, 50) / 100); }
	.axek-sb-mobile--media-right  .axek-sb-media{ order: 2; }
	.axek-sb-mobile--media-left   .axek-sb{
		grid-template-columns:
			calc((100% - var(--sb-gap)) * var(--sb-media-n, 50) / 100)
			calc((100% - var(--sb-gap)) * (100 - var(--sb-media-n, 50)) / 100); }
	.axek-sb-mobile--media-left   .axek-sb-media{ order: 0; }
	.axek-sb-mobile--media-top    .axek-sb,
	.axek-sb-mobile--media-bottom .axek-sb{ grid-template-columns: 1fr; }
	.axek-sb-mobile--media-top    .axek-sb-media{ order: 0; }
	.axek-sb-mobile--media-bottom .axek-sb-media{ order: 2; }
}

/* ---------- 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){
	a.axek-sb-lien{ padding-block: 12px; }
}