/*
 * AXEK Elements – Footer AXEK (par 6LEX – https://6lex.co)
 * Bloc marque + colonnes (menus WordPress) + Contact + barre du bas
 * (année dynamique · légal · signature 6LEX à droite).
 * Ambiances : gris clair (défaut) · bleu nuit · terracotta — anneaux optionnels.
 */
.axek-ft, .axek-ft *{ box-sizing:border-box; }

.axek-ft{
	position:relative; overflow:hidden;
	/* Ambiance par défaut : gris clair */
	--ft-bg:var(--ax-surface); --ft-ink:var(--ax-encre); --ft-muted:var(--ax-texte-doux); --ft-faint:var(--ax-texte-tenu);
	--ft-bord:var(--ax-filet); --ft-accent:var(--ax-terra);
	--ft-cta-bg:var(--axk-btn-terra); --ft-cta-bg-h:var(--axk-btn-terra-h); --ft-cta-ink:#fff;
	--ft-social:var(--ax-texte-doux); --ft-ring:rgba(24,30,21,.05);
	background:var(--ft-bg); color:var(--ft-ink);
}
.axek-ft--bleu{
	--ft-bg:radial-gradient(120% 130% at 84% 0%,var(--ax-nuit-halo),var(--ax-nuit) 44%,var(--ax-nuit-fond) 100%);
	--ft-ink:#fff; --ft-muted:rgba(255,255,255,.72); --ft-faint:rgba(255,255,255,.5);
	--ft-bord:var(--ax-filet-sombre); --ft-accent:var(--ax-terra-vif);
	/* Le bouton principal reste TERRACOTTA sur bleu nuit — c'est le bouton du héros.
	   Fond sombre : le survol éclaircit pour que le bouton se détache. */
	--ft-cta-bg:var(--axk-btn-terra); --ft-cta-bg-h:var(--axk-btn-terra-hd); --ft-cta-ink:#fff;
	--ft-social:rgba(255,255,255,.72); --ft-ring:rgba(255,255,255,.08);
}
.axek-ft--terra{
	--ft-bg:radial-gradient(120% 130% at 84% 0%,var(--ax-terra-halo),var(--ax-terra) 46%,var(--ax-terra-fond) 100%);
	--ft-ink:#fff; --ft-muted:rgba(255,246,240,.82); --ft-faint:rgba(255,246,240,.6);
	--ft-bord:var(--ax-filet-sombre); --ft-accent:#fff;
	/* Seul cas d'inversion : terracotta sur terracotta = contraste 1,00:1. */
	--ft-cta-bg:#fff; --ft-cta-bg-h:#fff; --ft-cta-ink:var(--axk-btn-terra);
	--ft-social:rgba(255,246,240,.82); --ft-ring:rgba(255,255,255,.1);
}

.axek-ft-rings{ position:absolute; inset:0; z-index:0; width:100%; height:100%; fill:none; stroke:var(--ft-ring); stroke-width:1.4; pointer-events:none; }
/* Pas de marge latérale : les bords viennent du conteneur, comme partout
   ailleurs sur le site. Le réglage « Marge interne » reste disponible. */
.axek-ft-in{ position:relative; z-index:1; max-width:100%; margin:0 auto; padding:76px 0 26px; }

/* ---- haut : marque | colonnes ---- */
.axek-ft-top{ display:grid; grid-template-columns:1.15fr 1.4fr; gap:56px; align-items:start; padding-bottom:52px; border-bottom:1px solid var(--ft-bord); }

/* marque */
.axek-ft-logolink{ text-decoration:none; }
.axek-ft-logo{ display:inline-block; font-weight:700; font-size: var(--ax-bloc); letter-spacing: -.02em; color:var(--ft-ink); line-height: 1.2;}
.axek-ft-logo span{ color:var(--ft-accent); font-weight: 500; font-style:italic; font-size: var(--ax-chapo); line-height: 1.55;}
.axek-ft-logoimg{ display:block; max-height:44px; width:auto; }
.axek-ft-statement{ margin:22px 0 0; font-weight:600; font-size: var(--ax-section); line-height: 1.12; letter-spacing: -.025em; color:var(--ft-ink); max-width:16ch; }
.axek-ft-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; background:var(--ft-cta-bg); font-weight:600; font-size:var(--axk-btn-md-fs); padding:var(--axk-btn-md-pad); border-radius:var(--axk-btn-radius); text-decoration:none; white-space:nowrap; transition:background var(--axk-btn-dur) var(--axk-ease), filter var(--axk-btn-dur) var(--axk-ease), transform var(--axk-btn-dur) var(--axk-ease); }
/* out-specify base.css `a[class*="-cta"]` (0,2,1)/(0,3,1) so the CTA keeps its ambiance ink (dark on the white button of bleu/terra). */
.axek-ft a.axek-ft-cta,
.axek-ft a.axek-ft-cta:hover,
.axek-ft a.axek-ft-cta:focus{ color:var(--ft-cta-ink); }
.axek-ft-cta svg{ width:16px; height:16px; flex:none; }
@media (hover:hover){
	.axek-ft-cta:hover{ background:var(--ft-cta-bg-h); transform:translateY(var(--axk-btn-lift)); }
	/* bouton blanc : il ne peut que s'assombrir */
	/* bouton blanc : profondeur, pas de changement de teinte */
	.axek-ft--terra .axek-ft-cta:hover{ box-shadow:var(--axk-btn-lift-shadow); }
}
.axek-ft-cta:active{ transform:translateY(0) scale(var(--axk-btn-press)); }
.axek-ft-cta:focus-visible{ outline:2px solid var(--axk-btn-focus); outline-offset:2px; }

/* réseaux — icônes nues */
.axek-ft-social{ display:flex; gap:20px; margin-top:30px; }
.axek-ft-social a{ display:inline-flex; align-items:center; color:var(--ft-social); text-decoration:none; transition:color var(--axk-dur) var(--axk-ease), transform var(--axk-dur) var(--axk-ease); }
.axek-ft-social a svg{ width:20px; height:20px; display:block; }
.axek-ft-social a i{ font-size: var(--ax-carte); line-height: 1.25; }
@media (hover:hover){ .axek-ft-social a:hover{ color:var(--ft-accent); transform:translateY(-2px); } }

/* colonnes (menus WP) */
.axek-ft-cols{ display:grid; gap:32px; grid-template-columns:var(--ft-grid,repeat(auto-fit,minmax(0,1fr))); }
/* h3 et non h5 : le document passait de h2 à h5 sans marche
   intermédiaire, ce que Lighthouse relève en accessibilité. L'apparence
   ne change pas — c'est le niveau sémantique qui est corrigé. */
.axek-ft-col.axek-ft-col h3{ font-weight: 500; font-size: var(--ax-meta); letter-spacing: 0; text-transform:uppercase; color:var(--ft-faint); margin:0 0 18px; line-height: 1.2;}
.axek-ft-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.axek-ft-col a{ font-size: var(--ax-second); color:var(--ft-muted); text-decoration:none; transition:color var(--axk-dur) var(--axk-ease); line-height: 1.55; font-weight: 500;}
@media (hover:hover){ .axek-ft-col a:hover{ color:var(--ft-ink); } }
.axek-ft-contact .ci{ display:flex; gap:10px; align-items:flex-start; font-size: var(--ax-second); color:var(--ft-muted); line-height: 1.55; font-weight: 500;}
.axek-ft-contact .ci svg, .axek-ft-contact .ci i{ flex:none; margin-top:2px; color:var(--ft-accent); }
.axek-ft-contact .ci svg{ width:16px; height:16px; }
.axek-ft-contact .ci i{ font-size: var(--ax-second); width:16px; text-align:center; line-height: 1.55; font-weight: 500;}
.axek-ft-contact .ci a{ color:inherit; text-decoration:none; }
.axek-ft-contact .ci a.hl{ font-weight:600; color:var(--ft-ink); }

/* ---- bas : © · légal · signature 6LEX ---- */
.axek-ft-bottom{ display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; padding-top:24px; }
.axek-ft-copy{ font-size: var(--ax-meta); color:var(--ft-faint); line-height: 1.45;}
.axek-ft-right{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.axek-ft-legal{ display:flex; gap:20px; flex-wrap:wrap; }
.axek-ft-legal a{ font-size: var(--ax-meta); color:var(--ft-muted); text-decoration:none; transition:color var(--axk-dur) var(--axk-ease); line-height: 1.45;}
@media (hover:hover){ .axek-ft-legal a:hover{ color:var(--ft-ink); } }
.axek-ft-sign{ font-size: var(--ax-meta); color:var(--ft-faint); padding-left:26px; border-left:1px solid var(--ft-bord); line-height: 1.45;}
.axek-ft-sign a{ color:inherit; }
.axek-ft-sign b{ color:var(--ft-ink); font-weight:600; }

@media (max-width:900px){
	.axek-ft-top{ grid-template-columns:1fr; gap:44px; }
	.axek-ft-cols{ grid-template-columns:1fr 1fr !important; }  /* mobile/tablette : colonnes 50 % / 50 % */
	.axek-ft-bottom{ flex-direction:column; align-items:flex-start; gap:16px; }
	.axek-ft-sign{ padding-left:0; border-left:0; }
}

/* ---------- 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){
	.axek-ft-social a{ min-width: 44px; min-height: 44px; display: inline-flex;
		align-items: center; justify-content: center; }
	/* Les liens des colonnes n'ont pas de classe à eux : on passe par la
	   colonne. Mesuré, ils faisaient 17 px de haut.
	   En BLOC, pas en inline-block : en inline-block la marge s'AJOUTE à
	   l'espace qui séparait déjà les lignes (mesuré : l'écart perçu passait de
	   19 à 42 px et le footer prenait 226 px). En bloc, la marge remplace cet
	   espace au lieu de s'y ajouter. 9 px de part et d'autre d'une ligne de
	   23,25 px font 41,25 px de haut. */
	/* Le `ul` sépare déjà ses lignes de 12 px : ils s'AJOUTERAIENT à la marge.
	   La marge de touche devient le seul espaceur. */
	.axek-ft-col ul{ row-gap: 0; }
	.axek-ft-col a, .axek-ft-contact a{ padding-block: 9px; display: block; }
	/* La ligne de contact aligne son icône sur le HAUT du texte : le lien
	   grandissant, l'icône resterait perchée. On recentre la paire. */
	.axek-ft-contact .ci{ align-items: center; }
	.axek-ft-contact .ci svg, .axek-ft-contact .ci i{ margin-top: 0; }
	/* La ligne légale est une rangée, elle : la mettre en bloc l'empilerait. */
	.axek-ft-legal a{ padding-block: 11px; display: inline-block; }
	.axek-ft-legal{ row-gap: 0; }
}