/* =========================================================================
 * Présentation : page de liens (/presentation/), autonome et mobile d'abord.
 * Reprend le design system du site : Instrument Sans, accent orange, radius 8px.
 * ====================================================================== */

@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/instrument-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--accent: #F4791F;
	--accent-deep: #D96410;
	--bg: #050506;
	--card: rgba(22, 22, 23, .72);
	--card-hover: rgba(31, 31, 33, .9);
	--line: rgba(245, 245, 247, .12);
	--text: #F5F5F7;
	--muted: #A1A1A6;
	--radius: 8px;
	--ease-out: cubic-bezier(.22, .8, .26, .99);
}

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

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

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--bg);
	color: var(--text);
	font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Fond : photo de carport voilée, fixe. */
.ljp-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.ljp-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .32;
	filter: saturate(.8);
	transform: scale(1.06);
	animation: ljp-zoom 2.4s var(--ease-out) both;
}
.ljp-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(5, 5, 6, .2), rgba(5, 5, 6, .85) 60%),
		linear-gradient(to bottom, rgba(5, 5, 6, .3), var(--bg) 85%);
}

.ljp {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: max(48px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
}

/* En-tête */
.ljp-head { text-align: center; margin-bottom: 36px; }
.ljp-logo { display: inline-block; margin-bottom: 28px; }
.ljp-logo img { width: 150px; height: auto; }
.ljp-title {
	margin: 0 0 10px;
	font-size: clamp(28px, 7.5vw, 38px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.025em;
}
.ljp-title span { color: var(--accent); }
.ljp-sub { margin: 0 auto; max-width: 30em; color: var(--muted); font-size: 15px; }

/* Groupes */
.ljp-group { margin-bottom: 34px; }
.ljp-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ljp-label::before { content: ''; width: 22px; height: 1px; background: currentColor; }

/* Cartes outils */
.ljp-card {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
	padding: 10px 16px 10px 10px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: background .3s, border-color .3s, transform .4s var(--ease-out);
}
.ljp-card-img {
	flex-shrink: 0;
	width: 76px;
	height: 76px;
	overflow: hidden;
	border-radius: 6px;
	background: #161617;
}
.ljp-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease-out);
}
.ljp-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ljp-card-txt em {
	color: var(--accent);
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.ljp-card-txt strong { font-size: 17px; font-weight: 600; line-height: 1.25; }
.ljp-card-txt span { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.ljp-card-go {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 50%;
	transition: background .3s, border-color .3s, color .3s;
}

/* CTA principal */
.ljp-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
	padding: 17px 24px;
	background: var(--accent);
	color: #0A0A0A;
	border-radius: 999px;
	font-weight: 600;
	font-size: 16px;
	transition: background .3s, transform .4s var(--ease-out);
}

/* Liens simples */
.ljp-links { display: flex; flex-direction: column; gap: 8px; }
.ljp-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 18px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-weight: 500;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: background .3s, border-color .3s, transform .4s var(--ease-out);
}
.ljp-link svg { color: var(--muted); transition: color .3s, transform .4s var(--ease-out); }

/* Contacts */
.ljp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ljp-pill {
	padding: 10px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	font-size: 14px;
	font-weight: 500;
	transition: background .3s, border-color .3s, color .3s;
}
.ljp-address { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.ljp-address a { color: var(--text); }

.ljp-foot {
	display: flex;
	justify-content: space-between;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
}

/* Survol (pointeurs fins uniquement) et focus clavier */
@media (hover: hover) {
	.ljp-card:hover,
	.ljp-link:hover { background: var(--card-hover); border-color: rgba(244, 121, 31, .45); transform: translateY(-2px); }
	.ljp-card:hover .ljp-card-img img { transform: scale(1.08); }
	.ljp-card:hover .ljp-card-go { background: var(--accent); border-color: var(--accent); color: #0A0A0A; }
	.ljp-link:hover svg { color: var(--accent); transform: translateX(3px); }
	.ljp-cta:hover { background: #FF8C42; transform: translateY(-2px); }
	.ljp-pill:hover { border-color: var(--accent); color: var(--accent); }
	.ljp-address a:hover,
	.ljp-foot a:hover { color: var(--accent); }
}
.ljp a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Entrée en cascade */
.ljp-head,
.ljp-group,
.ljp-foot { animation: ljp-in .9s var(--ease-out) both; }
.ljp-group:nth-of-type(1) { animation-delay: .12s; }
.ljp-group:nth-of-type(2) { animation-delay: .22s; }
.ljp-group:nth-of-type(3) { animation-delay: .32s; }
.ljp-foot { animation-delay: .4s; }

@keyframes ljp-in {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
@keyframes ljp-zoom {
	from { transform: scale(1.18); opacity: 0; }
}

@media (min-width: 640px) {
	.ljp { padding-top: 72px; }
	.ljp-card-img { width: 88px; height: 88px; }
}

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