/* =========================================================
   TSF — Footer (Toits Et Savoir-Faire)
   v1.0.0 — dégradé de fond (linéaire / radial, 2-3 couleurs) ; entièrement personnalisable ; défaut : marine intégral #191E35
   ========================================================= */

.tsfft {
	--tsf-accent1: #1E569F;
	--tsf-accent2: #4F79B8;
	--tsf-pad-x: 24px;
	--tsfft-logo-h: 58px;
	--tsfft-texte: rgba(255, 255, 255, .62);
	--tsfft-titre: #fff;
	--tsfft-lien: rgba(255, 255, 255, .72);
	--tsfft-filet: rgba(255, 255, 255, .1);
	--tsf-ease: cubic-bezier(.22, .61, .36, 1);
	--tsfft-bg: #191E35;
	--tsfft-pad-t: 64px;
	--tsfft-gap: 48px;

	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding: var(--tsfft-pad-t) var(--tsf-pad-x) 0;
	/* Par défaut : noir intégral. La texture décorative est une option (.avec-texture). */
	background-color: var(--tsfft-bg);
	background-image: none;
	overflow: hidden;
}

/* Texture décorative optionnelle : halos + chevrons + légère profondeur,
   en calques transparents pour respecter la couleur de fond choisie */
.tsfft.avec-texture {
	background-image:
		radial-gradient(1100px 420px at 12% -10%, rgba(255, 255, 255, .05), transparent 60%),
		radial-gradient(900px 380px at 96% 110%, rgba(255, 255, 255, .04), transparent 60%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='34'%3E%3Cpath d='M0 24 L14 10 L28 24 M28 24 L42 10 L56 24' fill='none' stroke='rgba(255,255,255,0.022)' stroke-width='1.4'/%3E%3C/svg%3E"),
		linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .22) 100%);
}

/* Dégradé de fond (option « Dégradé de fond ») : variable --tsfft-grad posée en ligne par le widget.
   Seul → il remplace le fond uni ; avec la texture → les calques de texture passent au-dessus du dégradé. */
.tsfft.avec-degrade {
	background-image: var(--tsfft-grad);
}
.tsfft.avec-degrade.avec-texture {
	background-image:
		radial-gradient(1100px 420px at 12% -10%, rgba(255, 255, 255, .05), transparent 60%),
		radial-gradient(900px 380px at 96% 110%, rgba(255, 255, 255, .04), transparent 60%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='34'%3E%3Cpath d='M0 24 L14 10 L28 24 M28 24 L42 10 L56 24' fill='none' stroke='rgba(255,255,255,0.022)' stroke-width='1.4'/%3E%3C/svg%3E"),
		linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .22) 100%),
		var(--tsfft-grad);
}

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

.tsfft [hidden] { display: none !important; }

/* calques image de fond + voile (sous le contenu, au-dessus du fond travaillé) */
.tsfft-fond {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.tsfft.fond-fixe .tsfft-fond { background-attachment: fixed; }

/* le fixed est mal géré sur mobile/tactile : retour au défilement normal */
@media (hover: none), (max-width: 767px) {
	.tsfft.fond-fixe .tsfft-fond { background-attachment: scroll; }
}

.tsfft-voile {
	position: absolute;
	inset: 0;
	background-color: var(--tsfft-voile-c, rgba(13, 12, 11, 1));
	opacity: var(--tsfft-voile-o, .88);
}

.tsfft.design-ivoire .tsfft-voile {
	background-color: var(--tsfft-voile-c, rgba(251, 250, 248, 1));
}

.tsfft-int { z-index: 1; }

/* crête dégradée */
.tsfft::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 2;
	background: linear-gradient(90deg, var(--tsfft-crete1, var(--tsf-accent1)), var(--tsfft-crete2, var(--tsf-accent2)));
}

.tsfft.sans-crete::before { content: none; }

.tsfft-int {
	position: relative;
	max-width: 1220px;
	margin: 0 auto;
}

/* ---------------------- Grille ---------------------- */
.tsfft-grille {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
	grid-column-gap: var(--tsfft-gap);
	grid-row-gap: 40px;
	padding-bottom: 48px;
}

.tsfft.tsfft--cols-3 .tsfft-grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.15fr); }
.tsfft.tsfft--cols-2 .tsfft-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tsfft.tsfft--cols-1 .tsfft-grille { grid-template-columns: minmax(0, 1fr); }

/* ---------------------- Colonne présentation ---------------------- */
.tsfft-logo-lien {
	display: inline-block;
	line-height: 0;
	text-decoration: none !important;
}

.tsfft .tsfft-logo {
	display: block !important;
	height: var(--tsfft-logo-h) !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 0 18px !important;
	border: 0 !important;
	object-fit: contain !important;
}

.tsfft-description {
	margin: 0;
	color: var(--tsfft-texte);
	font-size: 14px;
	line-height: 1.8;
	text-align: justify;
	text-align-last: left;
	hyphens: auto;
	-webkit-hyphens: auto;
	text-transform: none;
}

/* ---------------------- Titres de colonnes ---------------------- */
.tsfft .tsfft-col-titre {
	position: relative;
	margin: 6px 0 20px;
	padding-bottom: 12px;
	color: var(--tsfft-titre);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.tsfft-col-titre::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--tsf-accent1), var(--tsf-accent2));
}

/* ---------------------- Menus WordPress ---------------------- */
.tsfft .tsfft-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsfft .tsfft-menu li {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.tsfft .tsfft-menu a {
	position: relative;
	display: inline-block;
	padding-left: 16px;
	color: var(--tsfft-lien);
	font-size: 14px;
	line-height: 1.55;
	text-decoration: none !important;
	transition: color .25s ease, padding-left .25s var(--tsf-ease);
}

.tsfft .tsfft-menu a::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	border-top: 1.6px solid var(--tsf-accent1);
	border-right: 1.6px solid var(--tsf-accent1);
	transform: rotate(45deg) scale(.85);
	opacity: .7;
	transition: opacity .25s ease, transform .25s var(--tsf-ease);
}

.tsfft .tsfft-menu a:hover {
	color: var(--tsfft-lien-h, var(--tsf-accent1));
	padding-left: 20px;
	text-decoration: none !important;
}

.tsfft .tsfft-menu a:hover::before {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.tsfft-menu-vide {
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed rgba(255, 255, 255, .25);
	border-radius: 8px;
	color: var(--tsfft-texte);
	font-size: 12.5px;
	line-height: 1.5;
}

/* ---------------------- Coordonnées ---------------------- */
.tsfft .tsfft-coords {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsfft .tsfft-coord {
	display: flex;
	align-items: flex-start;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.tsfft-ico {
	display: inline-flex;
	width: 18px;
	height: 18px;
	margin: 1px 12px 0 0 !important;
	flex: 0 0 auto;
	color: var(--tsfft-ico-c, var(--tsf-accent1));
}

.tsfft-ico svg { width: 100%; height: 100%; display: block; }

.tsfft-coord-txt,
.tsfft .tsfft-coord-lien {
	color: var(--tsfft-lien);
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none !important;
	text-transform: none;
}

.tsfft .tsfft-coord-lien {
	transition: color .25s ease;
}

.tsfft .tsfft-coord-lien:hover {
	color: var(--tsfft-lien-h, var(--tsf-accent1));
	text-decoration: none !important;
}

/* ---------------------- Barre du bas ---------------------- */
.tsfft-barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 20px 0 22px;
	border-top: 1px solid var(--tsfft-filet);
}

.tsfft-copyright,
.tsfft .tsfft-credit {
	margin: 0;
	color: var(--tsfft-bas-c, rgba(255, 255, 255, .45));
	font-size: 12.5px;
	letter-spacing: .02em;
	text-transform: none;
	text-decoration: none !important;
}

.tsfft a.tsfft-credit { transition: color .25s ease; }

.tsfft a.tsfft-credit:hover { color: var(--tsfft-lien-h, var(--tsf-accent1)); }

/* =========================================================
   Design IVOIRE — fond clair
   ========================================================= */
.tsfft.design-ivoire {
	--tsfft-texte: #6a665f;
	--tsfft-titre: #000;
	--tsfft-lien: #55524c;
	--tsfft-filet: #e8e5df;
	--tsfft-bg: #fbfaf8;
	--tsfft-bas-c: #918c83;

	border-top: 1px solid #e8e5df;
}

.tsfft.design-ivoire.avec-texture {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='34'%3E%3Cpath d='M0 24 L14 10 L28 24 M28 24 L42 10 L56 24' fill='none' stroke='rgba(0,0,0,0.028)' stroke-width='1.4'/%3E%3C/svg%3E"),
		linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(0, 0, 0, .03) 100%);
}
.tsfft.design-ivoire.avec-degrade.avec-texture {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='34'%3E%3Cpath d='M0 24 L14 10 L28 24 M28 24 L42 10 L56 24' fill='none' stroke='rgba(0,0,0,0.028)' stroke-width='1.4'/%3E%3C/svg%3E"),
		linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(0, 0, 0, .03) 100%),
		var(--tsfft-grad);
}

.tsfft.design-ivoire .tsfft-menu-vide {
	border-color: #d8d4cc;
	color: #918c83;
}

/* =========================================================
   Design AURORE — sombre, halo orangé
   ========================================================= */
.tsfft.design-aurore::after {
	content: "";
	position: absolute;
	top: -30%;
	right: -12%;
	width: 55%;
	height: 90%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .10), transparent 70%);
	pointer-events: none;
}

.tsfft.design-aurore .tsfft-int { z-index: 1; }

/* ---------------------- Responsive ---------------------- */
@media (max-width: 1024px) {
	.tsfft-grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-column-gap: 40px;
	}
}

@media (max-width: 640px) {
	.tsfft { --tsf-pad-x: 16px; padding-top: 44px; }

	.tsfft-grille {
		grid-template-columns: minmax(0, 1fr);
		grid-row-gap: 32px;
		padding-bottom: 36px;
	}

	.tsfft-barre {
		flex-direction: column;
		align-items: flex-start;
	}

	.tsfft .tsfft-credit { margin-top: 6px; }
}

/* ---------------------- Accessibilité ---------------------- */
@media (prefers-reduced-motion: reduce) {
	.tsfft .tsfft-menu a,
	.tsfft .tsfft-menu a::before,
	.tsfft .tsfft-coord-lien { transition: none; }
}
