/*
Theme Name: Spline Online
Theme URI: https://splineonline.fr
Author: Spline Online
Author URI: https://splineonline.fr
Description: Thème vitrine minimaliste : un très grand logo au centre, des vignettes cliquables (image + titre + adresse) tout autour, un pied de page doux en dégradé. Sur smartphone, le logo prend toute la largeur et les vignettes se rangent dessous. Vignettes illimitées, tout se règle au Personnalisateur. Aucune boîte de connexion sur le site public.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: splineonline
Tags: one-column, custom-logo, custom-colors, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   1. Base
   ====================================================================== */
:root {
	--sp-bg: #f1f1f2;
	--sp-surface: #ffffff;
	--sp-ink: #1b2230;
	--sp-accent: #3d9bf5;
	--sp-accent-2: #7b46e3;
	--sp-logo-w: 620px;
	--sp-radius: 22px;

	--sp-muted: color-mix(in srgb, var(--sp-ink) 58%, transparent);
	--sp-line: color-mix(in srgb, var(--sp-ink) 12%, transparent);
	--sp-shadow: 0 24px 48px -28px rgba(16, 24, 40, .45), 0 2px 6px rgba(16, 24, 40, .05);
	--sp-shadow-hi: 0 34px 60px -26px rgba(16, 24, 40, .5), 0 3px 8px rgba(16, 24, 40, .07);
	--sp-gap: clamp(20px, 3vw, 40px);
	--sp-pad: clamp(18px, 4vw, 48px);
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--sp-bg);
	color: var(--sp-ink);
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--sp-ink);
}

.sp-skip {
	position: absolute;
	left: -9999px;
}

.sp-skip:focus {
	left: 16px;
	top: 16px;
	z-index: 99;
	background: var(--sp-surface);
	padding: 10px 16px;
	border-radius: 999px;
	box-shadow: var(--sp-shadow);
}

:focus-visible {
	outline: 3px solid var(--sp-accent);
	outline-offset: 3px;
}

/* =========================================================================
   2. En-tête
   ====================================================================== */
.sp-header {
	padding: clamp(14px, 2.5vw, 28px) var(--sp-pad);
}

.sp-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
}

.sp-header__link {
	display: inline-block;
	text-decoration: none;
}

/* Hauteur imposée : un logo vectoriel sans dimensions propres se réduirait
   sinon à zéro dans un conteneur ajusté au contenu. */
.sp-header__logo {
	height: clamp(34px, 4.4vw, 54px);
	width: auto;
	max-width: min(46vw, 280px);
	object-fit: contain;
	object-position: left center;
}

.sp-header__name {
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: .01em;
}

.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 26px;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--sp-accent), var(--sp-accent-2));
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	box-shadow: 0 10px 24px -14px var(--sp-accent-2);
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.sp-btn:hover,
.sp-btn:focus {
	transform: translateY(-2px);
	filter: saturate(1.08);
	box-shadow: 0 16px 30px -14px var(--sp-accent-2);
}

/* =========================================================================
   3. Vitrine : logo au centre, vignettes autour
   ====================================================================== */
.sp-main {
	display: block;
}

.sp-showcase-wrap {
	padding: clamp(10px, 2vw, 30px) var(--sp-pad) clamp(50px, 8vw, 110px);
}

.sp-showcase {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-flow: row dense;
	gap: var(--sp-gap);
	align-items: center;
}

/* Le logo occupe la colonne centrale ; les vignettes coulent de chaque côté. */
.sp-logo-cell {
	grid-column: 2;
	grid-row: 1 / span 2;
	text-align: center;
	padding: clamp(10px, 2vw, 30px) 0;
}

.sp-showcase--solo .sp-logo-cell {
	grid-column: 1 / -1;
	grid-row: auto;
}

.sp-logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
}

.sp-logo__float {
	display: block;
	width: 100%;
}

.sp-logo-img {
	width: 100%;
	max-width: var(--sp-logo-w);
	height: auto;
	margin: 0 auto;
}

/* --- Flottement du logo et traînée qui s'estompe ------------------------
   Le logo monte et descend ; trois halos bleu-violet suivent le mouvement
   avec un temps de retard croissant, de plus en plus flous et pâles :
   la trace reste un instant derrière lui, puis s'efface. */
@keyframes sp-float {
	0%,
	100% {
		transform: translateY(-11px);
	}

	50% {
		transform: translateY(11px);
	}
}

/* Au milieu de la course — là où le logo va le plus vite — la trace s'étire
   dans le sens du mouvement, puis se resserre aux extrémités. */
@keyframes sp-wake {
	0%,
	100% {
		transform: translate(-50%, calc(-50% - 11px)) scaleY(1);
	}

	50% {
		transform: translate(-50%, calc(-50% + 11px)) scaleY(var(--sp-stretch, 1.2));
	}
}

.sp-logo--anim .sp-logo__float {
	animation: sp-float 6.5s ease-in-out infinite;
	will-change: transform;
}

.sp-logo__wake {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.sp-logo__wake i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(78%, 560px);
	height: 46%;
	border-radius: 50%;
	background: linear-gradient(115deg, var(--sp-accent), var(--sp-accent-2));
	transform: translate(-50%, -50%);
	animation: sp-wake 6.5s ease-in-out infinite;
	will-change: transform;
}

/* Chaque halo part un peu après le précédent : c'est ce décalage qui
   dessine la traînée. */
.sp-logo__wake i:nth-child(1) {
	--sp-stretch: 1.22;
	opacity: .26;
	filter: blur(26px);
	animation-delay: .16s;
}

.sp-logo__wake i:nth-child(2) {
	--sp-stretch: 1.48;
	opacity: .16;
	filter: blur(38px);
	animation-delay: .34s;
}

.sp-logo__wake i:nth-child(3) {
	--sp-stretch: 1.75;
	opacity: .09;
	filter: blur(52px);
	animation-delay: .54s;
}

.sp-logo-text {
	font-size: clamp(2.2rem, 6vw, 4.2rem);
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1.1;
	background: linear-gradient(120deg, var(--sp-accent), var(--sp-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sp-baseline {
	margin: 18px auto 0;
	max-width: 34ch;
	color: var(--sp-muted);
	font-size: 1.02rem;
}

/* --- La carte ---------------------------------------------------------- */
.sp-card {
	display: flex;
	flex-direction: column;
	background: var(--sp-surface);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .35s ease, box-shadow .35s ease;
}

a.sp-card:hover,
a.sp-card:focus-visible {
	transform: translateY(-8px);
	box-shadow: var(--sp-shadow-hi);
}

.sp-card__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	background: color-mix(in srgb, var(--sp-ink) 5%, var(--sp-surface));
	border-bottom: 1px solid var(--sp-line);
}

.sp-card__dots {
	display: inline-flex;
	gap: 5px;
	flex: 0 0 auto;
}

.sp-card__dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ff5f57;
}

.sp-card__dots i:nth-child(2) {
	background: #febc2e;
}

.sp-card__dots i:nth-child(3) {
	background: #28c840;
}

.sp-card__addr {
	flex: 1 1 auto;
	text-align: center;
	font-size: .78rem;
	color: var(--sp-muted);
	background: color-mix(in srgb, var(--sp-ink) 4%, var(--sp-surface));
	border-radius: 999px;
	padding: 3px 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sp-card__shot {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--sp-surface);
	overflow: hidden;
}

/* Par défaut l'image est affichée en entier, jamais rognée : un logo reste
   lisible quelle que soit sa forme. */
.sp-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(12px, 2.2vw, 26px);
	transition: transform .6s ease;
}

/* Vignette cochée « remplir tout le cadre » : bon pour une capture de site. */
.sp-card--fill .sp-card__shot {
	background: color-mix(in srgb, var(--sp-ink) 6%, var(--sp-surface));
}

.sp-card--fill .sp-card__img {
	object-fit: cover;
	padding: 0;
}

a.sp-card:hover .sp-card__img {
	transform: scale(1.035);
}

.sp-card__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3.4rem;
	font-weight: 300;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
	opacity: .9;
}

.sp-card__body {
	display: block;
	padding: 16px 20px 20px;
	text-align: center;
}

.sp-card__title {
	display: block;
	font-size: 1.24rem;
	font-weight: 500;
	letter-spacing: -.01em;
}

.sp-card__sub {
	display: block;
	margin-top: 4px;
	font-size: .92rem;
	color: var(--sp-muted);
}

/* --- Aide administrateur & intro --------------------------------------- */
.sp-hint {
	max-width: 620px;
	margin: 40px auto 0;
	padding: 26px 30px;
	background: var(--sp-surface);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow);
	text-align: center;
}

.sp-hint__note {
	font-size: .85rem;
	color: var(--sp-muted);
	margin-bottom: 0;
}

.sp-intro {
	max-width: 720px;
	margin: clamp(40px, 6vw, 80px) auto 0;
	text-align: center;
	color: var(--sp-muted);
}

/* =========================================================================
   4. Pages & articles classiques
   ====================================================================== */
.sp-page {
	max-width: 780px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 50px) var(--sp-pad) clamp(50px, 8vw, 100px);
}

.sp-page__title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 400;
	letter-spacing: -.02em;
	margin: 0 0 24px;
}

.sp-page__content > * + * {
	margin-top: 1.1em;
}

.sp-page__content a {
	color: var(--sp-accent-2);
}

.sp-page__card {
	background: var(--sp-surface);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow);
	padding: clamp(22px, 4vw, 44px);
}

.sp-list {
	display: grid;
	gap: 20px;
	margin-top: 30px;
}

.sp-list__item {
	background: var(--sp-surface);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow);
	padding: 22px 26px;
}

.sp-list__item h2 {
	margin: 0 0 6px;
	font-size: 1.2rem;
	font-weight: 500;
}

.sp-list__item a {
	text-decoration: none;
}

/* =========================================================================
   5. Pied de page — dégradé doux, pas une bande
   ====================================================================== */
.sp-footer {
	margin-top: clamp(30px, 6vw, 80px);
	padding: clamp(40px, 6vw, 80px) var(--sp-pad) clamp(20px, 3vw, 34px);
	border-radius: clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px) 0 0;
	background:
		radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--sp-accent) 12%, transparent) 0%, transparent 60%),
		radial-gradient(120% 140% at 88% 10%, color-mix(in srgb, var(--sp-accent-2) 12%, transparent) 0%, transparent 62%),
		linear-gradient(180deg, color-mix(in srgb, var(--sp-surface) 82%, var(--sp-bg)) 0%, var(--sp-surface) 100%);
	box-shadow: 0 -20px 50px -40px rgba(16, 24, 40, .5);
}

.sp-footer__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: clamp(24px, 4vw, 60px);
}

.sp-footer__title {
	margin: 0 0 12px;
	font-size: clamp(1.3rem, 2.6vw, 1.75rem);
	font-weight: 400;
	letter-spacing: -.01em;
}

.sp-footer__sub {
	margin: 0 0 12px;
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--sp-muted);
}

.sp-footer__text {
	color: var(--sp-muted);
	max-width: 46ch;
}

.sp-footer__text p {
	margin: 0 0 .6em;
}

.sp-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.sp-footer__list a {
	color: var(--sp-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, color .25s ease;
}

.sp-footer__list a:hover,
.sp-footer__list a:focus {
	color: var(--sp-accent-2);
	border-bottom-color: currentColor;
}

.sp-footer__address {
	color: var(--sp-muted);
	line-height: 1.5;
}

.sp-footer__bottom {
	max-width: 1180px;
	margin: clamp(30px, 5vw, 60px) auto 0;
	padding-top: 18px;
	border-top: 1px solid var(--sp-line);
	font-size: .84rem;
	color: var(--sp-muted);
	text-align: center;
}

/* =========================================================================
   6. Adaptations écran
   ====================================================================== */

/* Tablette : le logo passe en pleine largeur, deux vignettes par ligne. */
@media (max-width: 1024px) {
	.sp-showcase {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-logo-cell {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.sp-footer__inner {
		grid-template-columns: 1fr 1fr;
	}

	.sp-footer__col--intro {
		grid-column: 1 / -1;
	}
}

/* Smartphone : logo pleine largeur, vignettes empilées dessous. */
@media (max-width: 700px) {
	body {
		font-size: 16px;
	}

	.sp-showcase {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-logo-img {
		max-width: 100%;
	}

	.sp-logo-cell {
		padding-bottom: 8px;
	}

	.sp-footer__inner {
		grid-template-columns: 1fr;
	}

	.sp-footer {
		text-align: center;
	}

	.sp-footer__text,
	.sp-footer__list {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}