/* Surfeurs Avertis — étude de cas */

.sa-case {
	--sa-bg: #0e0c18;
	--sa-bg-alt: #0d1410;
	--sa-card: rgba(255, 255, 255, 0.04);
	--sa-border: rgba(255, 255, 255, 0.08);
	--sa-accent: #4caf50;
	--sa-accent-dark: #2e7d32;
	--sa-accent-soft: rgba(76, 175, 80, 0.15);
	--sa-text: #f1f5f9;
	--sa-muted: #c9ceda;
	background: var(--sa-bg);
	color: var(--sa-text);
}

[data-theme="light"] .sa-case {
	--sa-bg: #f7fbf8;
	--sa-bg-alt: #eef5f0;
	--sa-card: #fff;
	--sa-border: rgba(76, 175, 80, 0.15);
	--sa-text: #1e293b;
	--sa-muted: #64748b;
}

.sa-container {
	max-width: var(--layout-max-width);
	margin: 0 auto;
	padding: 0 var(--layout-pad-x);
	box-sizing: border-box;
}

/* Hero */

.sa-hero {
	position: relative;
	overflow: hidden;
	padding: 3rem var(--layout-pad-x) 4rem;
	background:
		radial-gradient(ellipse 70% 60% at 80% 20%, rgba(76, 175, 80, 0.2) 0%, transparent 55%),
		radial-gradient(ellipse 50% 40% at 10% 80%, rgba(90, 95, 202, 0.12) 0%, transparent 50%),
		linear-gradient(160deg, #0e0c18 0%, #0d1a12 45%, #0a120e 100%);
}

.sa-hero-inner {
	max-width: var(--layout-max-width);
	margin: 0 auto;
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 960px) {
	.sa-hero-inner { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.sa-back-link {
	display: inline-block;
	margin-bottom: 1rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.sa-back-link:hover { color: #fff; text-decoration: underline; }

.sa-status-badge {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.3rem 0.85rem;
	border-radius: 9999px;
	background: rgba(76, 175, 80, 0.15);
	border: 1px solid rgba(76, 175, 80, 0.4);
	color: #a5d6a7;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.sa-kicker {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.65);
	margin: 0 0 0.75rem;
}

.sa-hero-title {
	font-size: clamp(2.25rem, 5vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 0 0.75rem;
	color: #fff;
}

.sa-hero-subtitle {
	font-size: 1.1rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	margin: 0 0 1.25rem;
	max-width: 34rem;
}

.sa-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.sa-pills li {
	padding: 0.35rem 0.8rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
}

.sa-hero-intro {
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 1rem;
	max-width: 36rem;
}

.sa-hero-intro--secondary {
	opacity: 0.88;
	margin-bottom: 1.5rem;
}

.sa-hero-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }

.sa-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.65rem 1.25rem;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background 0.2s, transform 0.15s;
	border: 1px solid transparent;
}

.sa-btn--primary { background: var(--sa-accent); color: #fff; }
.sa-btn--primary:hover { background: var(--sa-accent-dark); color: #fff; transform: translateY(-1px); }

.sa-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
}

.sa-btn--on-accent.sa-btn--primary { background: #fff; color: var(--sa-accent-dark); }
.sa-btn--on-accent.sa-btn--ghost { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.35); }

.sa-hero-visual { position: relative; min-height: 300px; }

.sa-mockup-desktop {
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
	position: relative;
	z-index: 2;
}

.sa-mockup-desktop img { display: block; width: 100%; height: auto; }

.sa-float-card {
	position: absolute;
	padding: 0.45rem 0.85rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--sa-accent-dark);
	font-size: 0.72rem;
	font-weight: 700;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	z-index: 3;
}

.sa-float-card--1 { top: 5%; right: 0; transform: rotate(3deg); }
.sa-float-card--2 { top: 35%; left: -5%; transform: rotate(-4deg); }
.sa-float-card--3 { bottom: 25%; right: -3%; transform: rotate(2deg); }
.sa-float-card--4 { bottom: 8%; left: 8%; transform: rotate(-2deg); }

/* Sections */

.sa-section { padding: 4rem 0; }
.sa-section:nth-child(even) { background: var(--sa-bg-alt); }

.sa-section-title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
	color: var(--sa-text);
}

.sa-section-lead {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--sa-muted);
	margin: 0 0 2rem;
	max-width: 42rem;
}

.sa-section-lead--center { margin-left: auto; margin-right: auto; text-align: center; }
.sa-section-lead--sub { margin-top: -1rem; margin-bottom: 2rem; font-size: 0.98rem; }

/* Summary */

.sa-summary-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sa-summary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sa-summary-grid { grid-template-columns: repeat(4, 1fr); } }

.sa-summary-item {
	padding: 1.25rem;
	border-radius: 0.85rem;
	background: var(--sa-card);
	border: 1px solid var(--sa-border);
}

.sa-summary-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sa-accent);
	margin-bottom: 0.4rem;
}

.sa-summary-value { font-size: 0.95rem; line-height: 1.5; font-weight: 600; margin: 0; color: var(--sa-text); }

/* Why */

.sa-why-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 768px) { .sa-why-grid { grid-template-columns: 1.2fr 0.8fr; gap: 3rem; } }

.sa-why-text h2 { font-size: 1.75rem; font-weight: 800; margin: 0 0 1rem; }
.sa-why-text p { font-size: 1rem; line-height: 1.75; color: var(--sa-muted); margin: 0; }

.sa-quote-card {
	margin: 0;
	padding: 1.75rem;
	border-radius: 1rem;
	background: linear-gradient(165deg, var(--sa-card) 0%, rgba(76, 175, 80, 0.08) 100%);
	border: 1px solid var(--sa-border);
}

.sa-quote-card p { font-size: 1.15rem; font-weight: 600; line-height: 1.55; margin: 0; color: var(--sa-text); }

.sa-why-text p { font-size: 1rem; line-height: 1.75; color: var(--sa-muted); margin: 0 0 1rem; }
.sa-why-text p:last-child { margin-bottom: 0; }

/* Objectives */

.sa-objectives-grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) { .sa-objectives-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sa-objectives-grid { grid-template-columns: repeat(3, 1fr); } }

.sa-objective-card {
	padding: 1.25rem;
	border-radius: 0.85rem;
	background: var(--sa-card);
	border: 1px solid var(--sa-border);
}

.sa-objective-card h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.35rem; color: var(--sa-accent); }
.sa-objective-card p { font-size: 0.88rem; line-height: 1.55; color: var(--sa-muted); margin: 0; }

/* Modules */

.sa-modules-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sa-modules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sa-modules-grid { grid-template-columns: repeat(3, 1fr); } }

.sa-module-card {
	padding: 1.5rem;
	border-radius: 1rem;
	background: var(--sa-card);
	border: 1px solid var(--sa-border);
	transition: border-color 0.2s, transform 0.2s;
}

.sa-module-card:hover { border-color: rgba(76, 175, 80, 0.35); transform: translateY(-2px); }
.sa-module-card h3 { font-size: 1rem; font-weight: 800; margin: 0 0 0.5rem; color: var(--sa-text); }
.sa-module-card p { font-size: 0.9rem; line-height: 1.65; color: var(--sa-muted); margin: 0; }

/* Focus sections */

.sa-focus--alt { background: var(--sa-bg-alt); }

.sa-focus-grid { display: grid; gap: 2.5rem; align-items: start; }

@media (min-width: 960px) {
	.sa-focus-grid { grid-template-columns: 1.1fr 0.9fr; }
	.sa-focus-grid--reverse { grid-template-columns: 0.9fr 1.1fr; }
	.sa-focus-grid--reverse .sa-focus-text { order: 1; }
	.sa-focus-grid--reverse .sa-focus-visual { order: 2; }
}

.sa-focus-visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.85rem;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
	border: 1px solid var(--sa-border);
}

.sa-focus-text h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.75rem; color: var(--sa-text); }
.sa-focus-text p { font-size: 0.95rem; line-height: 1.7; color: var(--sa-muted); margin: 0 0 1.25rem; }

.sa-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.sa-check-list li {
	position: relative;
	padding-left: 1.35rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--sa-text);
}

.sa-check-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--sa-accent);
	font-weight: 700;
}

/* Existing platform */

.sa-existing-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sa-existing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sa-existing-grid { grid-template-columns: repeat(4, 1fr); } }

.sa-existing-card {
	padding: 1.25rem;
	border-radius: 0.85rem;
	background: linear-gradient(165deg, var(--sa-card) 0%, rgba(76, 175, 80, 0.06) 100%);
	border: 1px solid var(--sa-border);
}

.sa-existing-card h3 { font-size: 0.92rem; font-weight: 800; margin: 0 0 0.35rem; color: var(--sa-accent); }
.sa-existing-card p { font-size: 0.82rem; line-height: 1.55; color: var(--sa-muted); margin: 0; }

/* Lab */

.sa-lab-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sa-lab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sa-lab-grid { grid-template-columns: repeat(3, 1fr); } }

.sa-lab-card {
	padding: 1.5rem;
	border-radius: 1rem;
	background: var(--sa-card);
	border: 1px solid var(--sa-border);
}

.sa-lab-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--sa-text); }
.sa-lab-card p { font-size: 0.9rem; line-height: 1.6; color: var(--sa-muted); margin: 0; }

/* Stack */

.sa-stack-grid {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 768px) { .sa-stack-grid { grid-template-columns: 1.2fr 0.8fr; } }

.sa-stack-text h2 { font-size: 1.75rem; font-weight: 800; margin: 0 0 1rem; color: var(--sa-text); }
.sa-stack-text > p { font-size: 1rem; line-height: 1.75; color: var(--sa-muted); margin: 0 0 1.5rem; }

.sa-stack-subtitle {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sa-accent);
	margin: 0 0 0.75rem;
}

.sa-stack-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.sa-stack-features li {
	font-size: 0.88rem;
	color: var(--sa-muted);
	padding-left: 1.1rem;
	position: relative;
}

.sa-stack-features li::before {
	content: '·';
	position: absolute;
	left: 0;
	color: var(--sa-accent);
	font-weight: 700;
}

.sa-stack-list {
	list-style: none;
	margin: 0;
	padding: 1.5rem;
	border-radius: 1rem;
	background: var(--sa-card);
	border: 1px solid var(--sa-border);
	display: grid;
	gap: 0.5rem;
}

.sa-stack-list li {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--sa-text);
	padding-left: 1.25rem;
	position: relative;
}

.sa-stack-list li::before {
	content: '▸';
	position: absolute;
	left: 0;
	color: var(--sa-accent);
}

/* Legacy sections (unused) */

.sa-concept-grid {
	display: grid;
	gap: 1rem;
	margin-bottom: 2rem;
}

@media (min-width: 640px) { .sa-concept-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sa-concept-grid { grid-template-columns: repeat(3, 1fr); } }

.sa-concept-card {
	padding: 1.25rem;
	border-radius: 0.85rem;
	background: var(--sa-card);
	border: 1px solid var(--sa-border);
}

.sa-concept-card h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.35rem; color: var(--sa-accent); }
.sa-concept-card p { font-size: 0.88rem; line-height: 1.55; color: var(--sa-muted); margin: 0; }

.sa-learning-flow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	justify-content: center;
}

.sa-learning-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0.85rem 1rem;
	border-radius: 0.75rem;
	background: var(--sa-accent-soft);
	border: 1px solid rgba(76, 175, 80, 0.25);
	min-width: 120px;
	flex: 1 1 120px;
	max-width: 160px;
}

.sa-learning-step strong { font-size: 0.85rem; color: var(--sa-accent); margin-bottom: 0.2rem; }
.sa-learning-step span { font-size: 0.78rem; color: var(--sa-muted); line-height: 1.4; }

/* Sandbox */

.sa-sandbox-grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) { .sa-sandbox-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sa-sandbox-grid { grid-template-columns: repeat(3, 1fr); } }

.sa-sandbox-card {
	padding: 1.5rem;
	border-radius: 1rem;
	background: var(--sa-card);
	border: 1px solid var(--sa-border);
}

.sa-sandbox-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--sa-text); }
.sa-sandbox-card p { font-size: 0.9rem; line-height: 1.6; color: var(--sa-muted); margin: 0; }

/* Architecture tree */

.sa-architecture-grid {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 768px) { .sa-architecture-grid { grid-template-columns: 1fr 1fr; } }

.sa-architecture-text h2 { font-size: 1.75rem; font-weight: 800; margin: 0 0 1rem; }
.sa-architecture-text p { font-size: 1rem; line-height: 1.75; color: var(--sa-muted); margin: 0; }

.sa-tree {
	padding: 1.5rem;
	border-radius: 1rem;
	background: var(--sa-card);
	border: 1px solid var(--sa-border);
	font-family: ui-monospace, monospace;
	font-size: 0.85rem;
}

.sa-tree-root {
	font-weight: 700;
	color: var(--sa-accent);
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px dashed var(--sa-border);
}

.sa-tree-branches {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sa-tree-branches li {
	position: relative;
	padding: 0.35rem 0 0.35rem 1.25rem;
	color: var(--sa-muted);
}

.sa-tree-branches li::before {
	content: '├──';
	position: absolute;
	left: 0;
	color: var(--sa-accent);
	opacity: 0.6;
}

.sa-tree-branches li:last-child::before { content: '└──'; }

/* UX */

.sa-ux-grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 768px) { .sa-ux-grid { grid-template-columns: repeat(3, 1fr); } }

.sa-ux-card {
	padding: 1.5rem;
	border-radius: 1rem;
	background: var(--sa-card);
	border: 1px solid var(--sa-border);
	text-align: center;
}

.sa-ux-card h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.5rem; color: var(--sa-accent); }
.sa-ux-card p { font-size: 0.9rem; line-height: 1.6; color: var(--sa-muted); margin: 0; }

/* Formats */

.sa-formats-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) { .sa-formats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .sa-formats-grid { grid-template-columns: repeat(4, 1fr); } }

.sa-format-card {
	padding: 1rem;
	border-radius: 0.75rem;
	background: var(--sa-card);
	border: 1px solid var(--sa-border);
	text-align: center;
	transition: border-color 0.2s;
}

.sa-format-card:hover { border-color: rgba(76, 175, 80, 0.4); }
.sa-format-card h3 { font-size: 0.88rem; font-weight: 700; margin: 0; color: var(--sa-text); }

/* Challenge */

.sa-challenge {
	background:
		radial-gradient(ellipse 60% 50% at 50% 0%, rgba(76, 175, 80, 0.1) 0%, transparent 60%),
		var(--sa-bg-alt);
}

.sa-challenge-grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 768px) { .sa-challenge-grid { grid-template-columns: repeat(3, 1fr); } }

.sa-challenge-card {
	padding: 1.5rem;
	border-radius: 1rem;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid var(--sa-border);
}

[data-theme="light"] .sa-challenge-card { background: var(--sa-card); }

.sa-challenge-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--sa-accent); }
.sa-challenge-card p { font-size: 0.9rem; line-height: 1.6; color: var(--sa-muted); margin: 0; }

/* Skills */

.sa-skills-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sa-skills-list li {
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	background: var(--sa-accent-soft);
	border: 1px solid rgba(76, 175, 80, 0.25);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--sa-text);
}

/* Gallery */

.sa-gallery-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.sa-gallery-grid { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; }
	.sa-gallery-item--large:first-of-type { grid-row: span 2; }
}

.sa-gallery-frame {
	border-radius: 0.85rem;
	overflow: hidden;
	background: var(--sa-card);
	border: 1px solid var(--sa-border);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.sa-gallery-frame img { display: block; width: 100%; height: auto; }
.sa-gallery-item figcaption { margin-top: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--sa-muted); }

/* Galerie — masquée temporairement (retirer cette règle pour réafficher) */
.sa-gallery { display: none; }

/* Results */

.sa-results-grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 640px) { .sa-results-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sa-results-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .sa-results-grid { grid-template-columns: repeat(5, 1fr); } }

.sa-result-item {
	padding: 1.5rem;
	border-radius: 1rem;
	background: var(--sa-card);
	border: 1px solid var(--sa-border);
	text-align: center;
}

.sa-result-item h3 { font-size: 1rem; font-weight: 800; margin: 0 0 0.5rem; color: var(--sa-accent); }
.sa-result-item p { font-size: 0.88rem; line-height: 1.6; color: var(--sa-muted); margin: 0; }

/* Quote band */

.sa-quote-band {
	padding: 3.5rem var(--layout-pad-x);
	background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, rgba(90, 95, 202, 0.08) 100%);
	border-top: 1px solid var(--sa-border);
	border-bottom: 1px solid var(--sa-border);
}

.sa-quote-band blockquote { margin: 0; max-width: 48rem; }
.sa-quote-band p {
	font-size: clamp(1.15rem, 2.5vw, 1.45rem);
	font-weight: 700;
	line-height: 1.55;
	color: var(--sa-text);
	margin: 0;
}

/* CTA */

.sa-cta {
	padding: 4rem var(--layout-pad-x) 5rem;
	background: linear-gradient(135deg, #4caf50 0%, #2e7d32 50%, #1b5e20 100%);
	color: #fff;
	text-align: center;
}

.sa-cta-inner h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	margin: 0 0 0.75rem;
	color: #fff;
}

.sa-cta-inner p {
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 auto 1.75rem;
	max-width: 38rem;
}

.sa-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}