/* ===================================================================
   Page Présentation (about.php)
   Feuille de style dédiée — s'appuie sur les tokens définis dans
   assets/css/style.css (couleurs, typographies, container, radius).
   =================================================================== */

/* -------------------------------------------------------------------
   Hero — bandeau d'intro façon "scène", deux halos de projecteur en
   dégradé quand aucune photo n'est renseignée en base.
   ------------------------------------------------------------------- */

.about-hero{
	position: relative;
	min-height: 42vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding-bottom: 56px;
	background-color: var(--bg);
	background-image:
		radial-gradient(560px 280px at 12% 15%, rgba(255,176,32,.20), transparent 60%),
		radial-gradient(560px 300px at 88% 25%, rgba(47,217,198,.18), transparent 60%);
	background-size: cover;
	background-position: center;
}

.about-hero::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,11,.25) 0%, rgba(10,10,11,.92) 100%);
	z-index: 1;
}

.about-hero-content{
	position: relative;
	z-index: 2;
	animation: aboutHeroFadeUp .8s ease both;
}

.about-hero-content h1{
	font-size: clamp(2rem, 5vw, 3.2rem);
	color: #fff;
}

.about-hero-tagline{
	margin: 12px 0 0;
	color: rgba(255,255,255,.75);
	max-width: 560px;
	font-size: 1.05rem;
}

.breadcrumb{
	margin: 0 0 16px;
	font-size: .85rem;
	color: rgba(255,255,255,.55);
}
.breadcrumb a{ color: rgba(255,255,255,.75); transition: color .15s ease; }
.breadcrumb a:hover{ color: var(--accent-2); }
.breadcrumb span{ margin: 0 6px; }

@keyframes aboutHeroFadeUp{
	from{ opacity: 0; transform: translateY(18px); }
	to{ opacity: 1; transform: translateY(0); }
}

/* Petit égaliseur animé, clin d'œil sonorisation, ancré en bas du hero */
.about-hero-waves{
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 34px;
	opacity: .55;
}
.about-hero-waves span{
	width: 4px;
	border-radius: 2px;
	background: var(--accent-2);
	animation: aboutEqBounce 1.1s ease-in-out infinite;
}
.about-hero-waves span:nth-child(1){ animation-delay: .0s; }
.about-hero-waves span:nth-child(2){ animation-delay: .1s; background: var(--accent); }
.about-hero-waves span:nth-child(3){ animation-delay: .2s; }
.about-hero-waves span:nth-child(4){ animation-delay: .3s; background: var(--accent); }
.about-hero-waves span:nth-child(5){ animation-delay: .15s; }
.about-hero-waves span:nth-child(6){ animation-delay: .25s; background: var(--accent); }
.about-hero-waves span:nth-child(7){ animation-delay: .05s; }
.about-hero-waves span:nth-child(8){ animation-delay: .35s; background: var(--accent); }

@keyframes aboutEqBounce{
	0%, 100%{ height: 6px; }
	50%{ height: 34px; }
}

@media (prefers-reduced-motion: reduce){
	.about-hero-content{ animation: none; }
	.about-hero-waves span{ animation: none; height: 16px; }
}

/* -------------------------------------------------------------------
   Contenu — présentation complète injectée depuis l'administration.
   Le HTML stocké en base embarque ses propres styles inline (police,
   largeurs fixes, couleurs) : on neutralise tout ça pour retomber sur
   la charte du site.
   ------------------------------------------------------------------- */

.about-content-section{
	padding: 80px 0;
	background: var(--bg);
}

.about-content-inner{
	max-width: 820px;
	margin: 0 auto;
}

.about-content{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: clamp(28px, 5vw, 56px);
}

/* Neutralisation générale des styles inline injectés */
.about-content,
.about-content *{
	font-family: var(--font-body) !important;
	color: var(--text) !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.about-content div{
	width: auto !important;
	float: none !important;
	padding: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	animation: none !important;
}

.about-content .sub-title h3{
	font-family: var(--font-head) !important;
	font-size: .85rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: .16em !important;
	color: var(--accent-2) !important;
	margin: 0 0 14px !important;
}

/* Premier paragraphe (l'accroche, en gras dans le contenu source) */
.about-content .sub-title > p:first-of-type{
	font-family: var(--font-head) !important;
	font-weight: 600 !important;
	font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important;
	line-height: 1.35 !important;
	color: var(--text) !important;
	margin: 0 0 24px !important;
}

.about-content p{
	font-size: 1rem !important;
	line-height: 1.85 !important;
	color: var(--muted) !important;
	margin: 0 0 18px !important;
}

.about-content strong{ color: var(--text) !important; }

/* Dernier paragraphe (signature / accroche de conclusion) mis en avant */
.about-content .sub-title > p:last-of-type{
	margin-top: 8px !important;
	padding: 20px 24px !important;
	border-left: 3px solid var(--accent) !important;
	background: rgba(255,176,32,.07) !important;
	color: var(--text) !important;
}
.about-content .sub-title > p:last-of-type strong{ color: var(--accent) !important; }

/* Liste des marques partenaires -> grille de cartes avec effet "spot" */
.about-content ul{
	list-style: none !important;
	margin: 28px 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 16px !important;
}

.about-content li{
	position: relative !important;
	overflow: hidden !important;
	background: var(--surface-2) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	padding: 18px 20px !important;
	margin: 0 !important;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.about-content li:hover{
	border-color: var(--accent-2) !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 26px rgba(47,217,198,.16) !important;
}
.about-content li p{
	margin: 0 !important;
	font-size: .92rem !important;
	line-height: 1.6 !important;
	color: var(--muted) !important;
}
.about-content li strong{ color: var(--accent-2) !important; }

/* Effet "balayage de projecteur" au survol de chaque carte marque */
.about-content li::before{
	content: "";
	position: absolute;
	top: -60%;
	left: -60%;
	width: 40%;
	height: 220%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,.14), transparent);
	transform: rotate(20deg);
	transition: left .6s ease;
	pointer-events: none;
}
.about-content li:hover::before{ left: 140%; }

@media (prefers-reduced-motion: reduce){
	.about-content li,
	.about-content li::before{ transition: none; }
}

/* -------------------------------------------------------------------
   Apparition au scroll (appliquée via assets/js/about.js)
   ------------------------------------------------------------------- */

.reveal{
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view{
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
	.reveal{ opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */

@media (max-width: 780px){
	.about-hero{ min-height: 36vh; padding-bottom: 44px; }
	.about-content{ padding: 28px 22px; }
	.about-content ul{ grid-template-columns: 1fr !important; }
}