/* ============================================================
   PAGES CONTENT — About / Applications / Case / Contact
   Styles partagés par les templates :
     template-about.php, template-applications.php,
     template-case-rdv.php, template-contact.php
   ============================================================ */

/* ===== About — Hero (mêmes bg que service-hero) ===== */
.ss-about-hero{
	position:relative;
	padding:96px 0 56px;
	overflow:hidden;
	isolation:isolate;
}
.ss-about-hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:-1; }
.ss-about-hero__inner{
	max-width:880px; margin:0 auto; text-align:center;
}
.ss-about-hero__title{
	font-family:var(--ss-font-display, "Geist", sans-serif);
	font-size:clamp(2.4rem, 4.5vw, 4.2rem);
	line-height:1.04; letter-spacing:-.025em;
	margin:.6em 0 .35em; font-weight:800;
	color:var(--ss-text,#E5E7EB);
}
.ss-about-hero__sub{
	font-size:clamp(1.05rem, 1.4vw, 1.25rem);
	line-height:1.55;
	color:var(--ss-text-mute, rgba(229,231,235,.72));
	max-width:680px; margin:0 auto;
}

/* ===== Manifesto ===== */
.ss-manifesto{ padding:64px 0; }
.ss-manifesto__inner{
	text-align:center;
	max-width:760px; margin:0 auto;
}
.ss-manifesto .ss-prose{
	margin-top:28px; font-size:1.08rem; line-height:1.75;
	color:var(--ss-text-mute, rgba(229,231,235,.82));
}
.ss-manifesto .ss-prose p{ margin:0 0 1.2em; }

/* ===== Timeline (about — histoire) ===== */
.ss-timeline{
	list-style:none; padding:0; margin:40px 0 0;
	position:relative;
	max-width:780px; margin-left:auto; margin-right:auto;
}
.ss-timeline::before{
	content:''; position:absolute;
	left:90px; top:8px; bottom:8px; width:1px;
	background:linear-gradient(180deg, rgba(167,139,250,.45), rgba(34,211,238,.25) 50%, transparent);
}
.ss-timeline__item{
	position:relative;
	display:grid;
	grid-template-columns:90px 1fr;
	gap:32px;
	padding:18px 0 26px 0;
}
.ss-timeline__item::before{
	content:''; position:absolute;
	left:84px; top:26px; width:13px; height:13px; border-radius:50%;
	background:var(--ss-bg,#0a0a0f);
	box-shadow:0 0 0 2px var(--ss-grad-2,#A78BFA), 0 0 24px rgba(167,139,250,.4);
}
.ss-timeline__year{
	font-family:var(--ss-font-mono, "JetBrains Mono", monospace);
	font-size:.95rem; font-weight:500; letter-spacing:.05em;
	color:var(--ss-grad-1,#22D3EE);
	padding-top:14px;
}
.ss-timeline__title{
	font-size:1.15rem; font-weight:700; margin:0 0 6px;
	color:var(--ss-text,#E5E7EB);
}
.ss-timeline__desc{
	margin:0; font-size:.98rem; line-height:1.6;
	color:var(--ss-text-mute, rgba(229,231,235,.72));
}

/* ===== Stats strip (about — chiffres clés) ===== */
.ss-stats-strip{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
	gap:24px;
	padding:36px 32px;
	margin:0;
	background:rgba(255,255,255,.03);
	border:1px solid rgba(255,255,255,.08);
	border-radius:20px;
	backdrop-filter:blur(8px);
}
.ss-stats-strip__item{ text-align:center; }
.ss-stats-strip__value{
	font-family:var(--ss-font-display, "Geist", sans-serif);
	font-size:clamp(1.8rem, 2.6vw, 2.4rem);
	font-weight:800; letter-spacing:-.02em;
	background:linear-gradient(135deg, var(--ss-grad-1,#22D3EE), var(--ss-grad-2,#A78BFA));
	-webkit-background-clip:text; background-clip:text;
	-webkit-text-fill-color:transparent;
	display:block;
}
.ss-stats-strip__label{
	margin:.5em 0 0; font-size:.88rem; line-height:1.4;
	color:var(--ss-text-mute, rgba(229,231,235,.65));
}

/* ===== Quote ===== */
.ss-quote{
	position:relative;
	max-width:780px; margin:0 auto;
	padding:48px 32px 40px;
	background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
	border:1px solid rgba(255,255,255,.08);
	border-radius:24px;
	text-align:center;
}
.ss-quote__mark{
	position:absolute; top:-10px; left:50%; transform:translateX(-50%);
	font-family:var(--ss-font-display, "Geist", sans-serif);
	font-size:5rem; line-height:1; color:rgba(167,139,250,.35);
	pointer-events:none;
}
.ss-quote__text{
	font-size:clamp(1.15rem, 1.6vw, 1.4rem); line-height:1.55; font-weight:500;
	color:var(--ss-text,#E5E7EB);
	margin:0 0 18px;
}
.ss-quote__author{
	font-size:.92rem; color:var(--ss-text-mute, rgba(229,231,235,.6));
	letter-spacing:.02em;
}

/* ===== Apps grid (template-applications.php) ===== */
.ss-apps__grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
	gap:24px;
}
.ss-app{
	display:flex; flex-direction:column;
	padding:32px 28px;
	background:rgba(255,255,255,.03);
	border:1px solid rgba(255,255,255,.08);
	border-radius:20px;
	text-decoration:none;
	color:inherit;
	transition:transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
	position:relative; isolation:isolate; overflow:hidden;
}
.ss-app::before{
	content:''; position:absolute; inset:0; z-index:-1;
	background:radial-gradient(600px circle at 100% 0%, rgba(34,211,238,.08), transparent 50%);
	opacity:0; transition:opacity .35s ease;
}
.ss-app:hover{
	transform:translateY(-4px);
	border-color:rgba(167,139,250,.3);
	background:rgba(255,255,255,.045);
	box-shadow:0 24px 48px -24px rgba(0,0,0,.5);
}
.ss-app:hover::before{ opacity:1; }
.ss-app--featured{
	border-color:rgba(167,139,250,.25);
	background:linear-gradient(180deg, rgba(167,139,250,.07), rgba(255,255,255,.025));
}
.ss-app__icon{
	width:46px; height:46px; border-radius:12px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(167,139,250,.12);
	color:var(--ss-grad-2,#A78BFA);
	margin-bottom:20px;
}
.ss-app__icon svg{ width:24px; height:24px; }
.ss-app__body{ flex:1; display:flex; flex-direction:column; }
.ss-app__name{
	font-size:1.25rem; font-weight:700; line-height:1.3;
	margin:8px 0 12px; color:var(--ss-text,#E5E7EB);
}
.ss-app__desc{
	font-size:.96rem; line-height:1.55;
	color:var(--ss-text-mute, rgba(229,231,235,.72));
	margin:0 0 18px;
}
.ss-app__tags{
	list-style:none; padding:0; margin:0 0 22px;
	display:flex; flex-wrap:wrap; gap:6px;
}
.ss-app__tags li{
	font-size:.78rem; padding:4px 10px; border-radius:999px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.08);
	color:var(--ss-text-mute, rgba(229,231,235,.7));
	font-family:var(--ss-font-mono, "JetBrains Mono", monospace);
}
.ss-app__link{
	margin-top:auto; display:inline-flex; align-items:center; gap:8px;
	font-weight:600; color:var(--ss-grad-1,#22D3EE);
	font-size:.95rem;
}
.ss-app:hover .ss-app__link .ss-btn-arrow{ transform:translate(2px,-2px); }
.ss-app .ss-btn-arrow{ transition:transform .35s ease; }

/* ===== Contact ===== */
.ss-contact-hero{ padding:96px 0 32px; position:relative; isolation:isolate; }
.ss-contact__grid{
	display:grid;
	grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
	gap:48px;
	align-items:start;
}
.ss-contact__form-wrap{
	padding:40px 36px;
	background:rgba(255,255,255,.03);
	border:1px solid rgba(255,255,255,.08);
	border-radius:24px;
	backdrop-filter:blur(8px);
}
.ss-contact__form{ display:flex; flex-direction:column; gap:20px; }
.ss-field-row{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
	gap:20px;
}
.ss-field{ display:flex; flex-direction:column; gap:8px; }
.ss-field__label{
	font-size:.88rem; font-weight:500;
	color:var(--ss-text-mute, rgba(229,231,235,.78));
}
.ss-field__req{ color:#F87171; }
.ss-field input,
.ss-field select,
.ss-field textarea{
	width:100%;
	padding:12px 14px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.1);
	border-radius:10px;
	color:var(--ss-text,#E5E7EB);
	font-family:inherit; font-size:.98rem;
	transition:border-color .25s ease, background .25s ease;
}
.ss-field input:focus,
.ss-field select:focus,
.ss-field textarea:focus{
	outline:none;
	border-color:var(--ss-grad-2,#A78BFA);
	background:rgba(255,255,255,.06);
}
.ss-field textarea{ min-height:140px; resize:vertical; }
.ss-field option{ background:#1a1a24; color:#E5E7EB; }
.ss-field--check{ flex-direction:row; align-items:flex-start; gap:10px; font-size:.85rem; line-height:1.5; }
.ss-field--check input[type="checkbox"]{ width:auto; margin-top:3px; accent-color:var(--ss-grad-2,#A78BFA); }
.ss-field--check .ss-field__label{ font-size:.85rem; flex:1; }

.ss-contact__submit{ align-self:flex-start; margin-top:8px; }

.ss-contact__alert{
	padding:14px 18px; border-radius:12px; margin-bottom:20px; font-size:.94rem;
	border:1px solid;
}
.ss-contact__alert--ok{
	background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.3); color:#86efac;
}
.ss-contact__alert--ko{
	background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.3); color:#fca5a5;
}

.ss-contact__aside{ display:flex; flex-direction:column; gap:20px; }
.ss-contact__card{
	padding:32px 28px;
	background:rgba(255,255,255,.03);
	border:1px solid rgba(255,255,255,.08);
	border-radius:20px;
}
.ss-contact__card-title{
	font-size:1.4rem; font-weight:700; margin:0 0 22px;
	color:var(--ss-text,#E5E7EB);
}
.ss-contact__list{
	list-style:none; padding:0; margin:0;
	display:flex; flex-direction:column; gap:18px;
}
.ss-contact__list li{ display:flex; flex-direction:row; align-items:flex-start; gap:14px; font-size:.95rem; }
.ss-contact__list li > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ss-contact__list li > svg{
	flex:0 0 auto;
	width:22px; height:22px;
	color:var(--ss-grad-1,#22D3EE);
	margin-top:2px;
}
.ss-contact__list address{ font-style:normal; }
.ss-contact__list p{ margin:0; }
.ss-contact__list a{ color:var(--ss-text,#E5E7EB); text-decoration:none; }
.ss-contact__list a:hover{ color:var(--ss-grad-1,#22D3EE); }
.ss-contact__lbl{
	font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
	color:var(--ss-text-mute, rgba(229,231,235,.55));
	font-family:var(--ss-font-mono, "JetBrains Mono", monospace);
}
.ss-contact__sla{
	display:flex; align-items:center; gap:10px;
	margin:24px 0 0; padding-top:20px;
	border-top:1px solid rgba(255,255,255,.06);
	font-size:.88rem; color:var(--ss-text-mute, rgba(229,231,235,.65));
}
.ss-contact__sla-dot{
	width:8px; height:8px; border-radius:50%; background:#22c55e;
	box-shadow:0 0 12px rgba(34,197,94,.6);
	animation:ss-pulse 2s ease-in-out infinite;
}
@keyframes ss-pulse{
	0%, 100%{ opacity:.5; transform:scale(.9); }
	50%{ opacity:1; transform:scale(1.1); }
}

/* ===== Responsive ===== */
@media (max-width: 900px){
	.ss-contact__grid{ grid-template-columns:1fr; gap:32px; }
	.ss-contact__form-wrap{ padding:32px 24px; }
	.ss-timeline::before{ left:30px; }
	.ss-timeline__item{ grid-template-columns:60px 1fr; gap:16px; }
	.ss-timeline__item::before{ left:24px; }
}
@media (max-width: 600px){
	.ss-about-hero, .ss-contact-hero{ padding-top:64px; }
	.ss-stats-strip{ padding:28px 20px; }
	.ss-quote{ padding:36px 22px 28px; }
	.ss-app{ padding:26px 22px; }
	.ss-contact__form-wrap{ padding:26px 20px; }
}