/*
Theme Name: Saphir Services & Sécurité
Template: onepress
Description: Thème enfant de OnePress pour Saphir Services & Sécurité — fiches formation, rubriques et articles à la charte verte (signalétique de sécurité).
Version: 1.0.0
Text Domain: saphir-child
*/

/* ---------------------------------------------------------------
   Jetons
   nuit      #0B2A1C  fond des en-têtes (vert profond)
   signal    #1E7A45  vert signalétique de sécurité (RAL 6032)
   saphir    #18B017  vert vif de la charte existante
   phosphore #D4F7A1  lueur photoluminescente
   brume     #EEF4EF  fond clair
   encre     #13201A  texte
---------------------------------------------------------------- */
:root {
	--sp-nuit: #0B2A1C;
	--sp-signal: #1E7A45;
	--sp-saphir: #18B017;
	--sp-phosphore: #D4F7A1;
	--sp-brume: #EEF4EF;
	--sp-encre: #13201A;
	--sp-gris: #4F6157;
	--sp-ligne: #CFDDD3;
	--sp-alerte: #E0402B;
	--sp-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--sp-text: "Public Sans", "Segoe UI", Arial, sans-serif;
	--sp-mono: "IBM Plex Mono", ui-monospace, monospace;
	--plaque: var(--sp-signal);
}

.sp {
	font-family: var(--sp-text);
	color: var(--sp-encre);
	background: #fff;
	font-size: 17px;
	line-height: 1.65;
}
.sp *,
.sp *::before,
.sp *::after { box-sizing: border-box; }

.sp-wrap {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.sp a:focus-visible,
.sp button:focus-visible {
	outline: 3px solid var(--sp-saphir);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- En-tête de page ---------- */
.sp .sp-hero {
	position: relative;
	background-color: var(--sp-nuit);
	background-image:
		linear-gradient(rgba(212, 247, 161, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(212, 247, 161, .045) 1px, transparent 1px);
	background-size: 40px 40px;
	color: #fff;
	padding: 34px 0 44px;
	overflow: hidden;
}
.sp-hero__grid {
	display: grid;
	gap: 28px;
	align-items: center;
}
.sp-hero__narrow { max-width: 860px; }

.sp-plan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	font-family: var(--sp-mono);
	font-size: 12.5px;
	letter-spacing: .02em;
	color: #A9C7B4;
	margin: 0 0 26px;
}
.sp .sp-plan a { color: #E4F2E8; text-decoration: none; border-bottom: 1px solid rgba(212, 247, 161, .35); }
.sp .sp-plan a:hover { color: var(--sp-phosphore); border-color: var(--sp-phosphore); }
.sp-plan__dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--sp-alerte);
	box-shadow: 0 0 0 4px rgba(224, 64, 43, .25);
}
.sp-plan__label { text-transform: uppercase; color: #fff; font-weight: 500; }
.sp-plan__sep { color: #6F8F7B; }

.sp .sp-eyebrow {
	font-family: var(--sp-mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sp-phosphore);
	margin: 0 0 10px;
}
.sp .sp-title {
	font-family: var(--sp-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(2.5rem, 7vw, 4.9rem);
	line-height: .95;
	letter-spacing: .005em;
	color: #fff;
	margin: 0 0 18px;
}
.sp .sp-title--article {
	text-transform: none;
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	line-height: 1.02;
}
.sp .sp-lead {
	font-size: 1.12rem;
	line-height: 1.6;
	color: #CFE3D6;
	max-width: 62ch;
	margin: 0;
}
.sp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* La plaque : panneau de sécurité vert, halo photoluminescent */
.sp-plaque {
	--plaque: var(--sp-signal);
	justify-self: start;
	width: 92px;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	background: var(--sp-signal);
	border: 5px solid #fff;
	border-radius: 8px;
	color: #fff;
	box-shadow: 0 0 0 3px var(--sp-phosphore), 0 0 46px 6px rgba(212, 247, 161, .28);
	animation: sp-charge 2.4s ease-out both;
	order: -1;
}
.sp-plaque .sp-picto { width: 72%; height: 72%; }

@keyframes sp-charge {
	0%   { box-shadow: 0 0 0 3px rgba(212, 247, 161, 0), 0 0 0 0 rgba(212, 247, 161, 0); filter: brightness(.7); }
	35%  { box-shadow: 0 0 0 3px var(--sp-phosphore), 0 0 90px 22px rgba(212, 247, 161, .55); filter: brightness(1.12); }
	100% { box-shadow: 0 0 0 3px var(--sp-phosphore), 0 0 46px 6px rgba(212, 247, 161, .28); filter: none; }
}

/* ---------- Boutons ---------- */
.sp .sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 22px;
	font-family: var(--sp-display);
	font-weight: 600;
	font-size: 1.12rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color .2s, color .2s, box-shadow .2s, border-color .2s;
}
.sp .sp-btn--glow { background: var(--sp-phosphore); color: var(--sp-nuit); }
.sp .sp-btn--glow:hover { background: #fff; color: var(--sp-nuit); box-shadow: 0 0 28px rgba(212, 247, 161, .55); }
.sp .sp-btn--ghost { border: 1px solid rgba(255, 255, 255, .45); color: #fff; }
.sp .sp-btn--ghost:hover { border-color: var(--sp-phosphore); color: var(--sp-phosphore); }
.sp .sp-btn--solid { background: var(--sp-signal); color: #fff; width: 100%; }
.sp .sp-btn--solid:hover { background: var(--sp-nuit); color: #fff; }

/* ---------- Bandeau des chiffres clés ---------- */
.sp-facts-band { background: var(--sp-brume); border-bottom: 1px solid var(--sp-ligne); }
.sp .sp-facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 0 auto;
	padding-top: 0;
	padding-bottom: 0;
}
.sp-fact {
	padding: 16px 14px 16px 0;
	border-top: 1px solid var(--sp-ligne);
}
.sp-fact:nth-child(-n+2) { border-top: 0; }
.sp .sp-fact dt {
	font-family: var(--sp-mono);
	font-size: 11.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sp-gris);
	margin: 0 0 2px;
}
.sp .sp-fact dd {
	font-family: var(--sp-display);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.15;
	color: var(--sp-nuit);
	margin: 0;
}

/* ---------- Corps ---------- */
.sp-body {
	display: grid;
	gap: 40px;
	padding-top: 48px;
	padding-bottom: 64px;
}
.sp-content { min-width: 0; max-width: 780px; }
.sp--rubrique .sp-content,
.sp--info .sp-content { max-width: none; }
.sp--rubrique .sp-content > p,
.sp--rubrique .sp-content > ul,
.sp--info .sp-content > p,
.sp--info .sp-content > ul { max-width: 780px; }

.sp-content > *:first-child { margin-top: 0; }
.sp .sp-content h2,
.sp .sp-h2 {
	font-family: var(--sp-display);
	font-weight: 700;
	font-size: clamp(1.65rem, 3.4vw, 2.15rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--sp-nuit);
	margin: 2.4em 0 .6em;
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.sp .sp-content h2::before,
.sp .sp-h2::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background: var(--sp-signal);
	border-radius: 2px;
	transform: translateY(-2px);
}
.sp .sp-content h3 {
	font-family: var(--sp-display);
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1.15;
	color: var(--sp-signal);
	margin: 1.8em 0 .4em;
}
.sp .sp-content p { margin: 0 0 1.05em; }
.sp .sp-content a:not(.sp-card):not(.sp-btn) {
	color: var(--sp-signal);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.sp .sp-content a:not(.sp-card):not(.sp-btn):hover { color: var(--sp-nuit); text-decoration-thickness: 2px; }
.sp .sp-content ul { list-style: none; margin: 0 0 1.3em; padding: 0; }
.sp .sp-content ul li { position: relative; padding-left: 24px; margin: 0 0 .5em; }
.sp .sp-content ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .62em;
	width: 8px;
	height: 8px;
	background: var(--sp-saphir);
	border-radius: 1px;
}
.sp .sp-content ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.sp .sp-content ol li { margin: 0 0 .5em; padding-left: .2em; }
.sp .sp-content ol li::marker { font-family: var(--sp-mono); color: var(--sp-signal); font-weight: 500; }
.sp .sp-content strong { color: var(--sp-nuit); }

/* Tableau (programme, examens) */
.sp .sp-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.6em;
	font-size: .95rem;
	background: #fff;
}
.sp .sp-content th,
.sp .sp-content td {
	text-align: left;
	vertical-align: top;
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--sp-ligne);
}
.sp .sp-content thead th {
	font-family: var(--sp-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sp-gris);
	border-bottom: 2px solid var(--sp-nuit);
}
.sp .sp-content td:first-child { font-weight: 600; color: var(--sp-nuit); }
.sp-table { overflow-x: auto; }

/* Encadré réglementaire */
.sp .sp-note {
	background: var(--sp-brume);
	border-left: 4px solid var(--sp-signal);
	padding: 18px 20px;
	margin: 1.6em 0;
	border-radius: 0 4px 4px 0;
}
.sp .sp-note p:last-child { margin-bottom: 0; }
.sp .sp-note__title {
	font-family: var(--sp-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sp-signal);
	margin: 0 0 6px;
}

/* Photos */
.sp .sp-photo { margin: 0 0 1.6em; }
.sp .sp-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
	border-radius: 4px;
}
.sp .sp-photo figcaption {
	font-family: var(--sp-mono);
	font-size: 12px;
	color: var(--sp-gris);
	margin-top: 8px;
}

/* Colonnes et parcours */
.sp .sp-cols { display: grid; gap: 22px; margin: 0 0 1.6em; }
.sp .sp-col {
	background: var(--sp-brume);
	border-radius: 4px;
	padding: 20px 22px;
}
.sp .sp-col h3 { margin-top: 0; }
.sp .sp-col p:last-child,
.sp .sp-col ul:last-child { margin-bottom: 0; }

.sp .sp-parcours {
	list-style: none;
	counter-reset: etape;
	padding: 0;
	margin: 0 0 1.8em;
	display: grid;
	gap: 0;
}
.sp .sp-parcours > li {
	counter-increment: etape;
	position: relative;
	padding: 0 0 22px 58px;
	margin: 0;
}
.sp .sp-parcours > li::before {
	content: counter(etape);
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: var(--sp-signal);
	color: #fff;
	font-family: var(--sp-display);
	font-weight: 700;
	font-size: 1.3rem;
	border-radius: 4px;
}
.sp .sp-parcours > li::after {
	content: "";
	position: absolute;
	left: 19px;
	top: 44px;
	bottom: 4px;
	width: 2px;
	background: var(--sp-ligne);
}
.sp .sp-parcours > li:last-child::after { display: none; }
.sp .sp-parcours strong { display: block; font-family: var(--sp-display); font-size: 1.3rem; line-height: 1.2; margin-bottom: 2px; }

/* Chiffres */
.sp .sp-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--sp-ligne);
	border: 1px solid var(--sp-ligne);
	margin: 0 0 2em;
}
.sp .sp-stat { background: #fff; padding: 22px 18px; }
.sp .sp-stat__num {
	display: block;
	font-family: var(--sp-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 6vw, 3.8rem);
	line-height: 1;
	color: var(--sp-signal);
}
.sp .sp-stat__label { display: block; font-size: .95rem; color: var(--sp-gris); margin-top: 6px; }

/* Logos d'agréments */
.sp .sp-logos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 0 0 2em;
}
.sp .sp-logo {
	background: #fff;
	border: 1px solid var(--sp-ligne);
	border-radius: 4px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sp .sp-logo img { height: 74px; width: auto; max-width: 100%; object-fit: contain; align-self: flex-start; }
.sp .sp-logo p { font-size: .93rem; margin: 0; color: var(--sp-gris); }
.sp .sp-logo strong { display: block; color: var(--sp-nuit); font-size: 1rem; }

/* ---------- Encadré inscription ---------- */
.sp-aside { display: grid; gap: 18px; align-content: start; }
.sp-aside__card {
	background: var(--sp-nuit);
	color: #E4F2E8;
	border-radius: 6px;
	padding: 24px;
}
.sp .sp-aside__kicker {
	font-family: var(--sp-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sp-phosphore);
	margin: 0 0 12px;
}
.sp-aside__note .sp-aside__kicker { color: var(--sp-signal); margin-top: 4px; }
.sp .sp-steps { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: s; }
.sp .sp-steps li {
	counter-increment: s;
	position: relative;
	padding: 0 0 12px 34px;
	font-size: .95rem;
	line-height: 1.5;
}
.sp .sp-steps li::before {
	content: counter(s);
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border: 1px solid var(--sp-phosphore);
	color: var(--sp-phosphore);
	font-family: var(--sp-mono);
	font-size: 12px;
	border-radius: 50%;
}
.sp .sp-steps strong { color: #fff; }
.sp .sp-aside__card .sp-btn--solid { background: var(--sp-phosphore); color: var(--sp-nuit); }
.sp .sp-aside__card .sp-btn--solid:hover { background: #fff; }
.sp-aside__tel { display: flex; flex-direction: column; gap: 2px; margin: 16px 0 0; }
.sp-aside__tel a {
	color: #fff;
	text-decoration: none;
	font-family: var(--sp-display);
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: .02em;
}
.sp-aside__tel a:hover { color: var(--sp-phosphore); }
.sp-aside__note {
	border: 1px solid var(--sp-ligne);
	border-radius: 6px;
	padding: 20px 22px;
	font-size: .93rem;
	color: var(--sp-gris);
}
.sp-aside__note p { margin: 0 0 12px; }
.sp-aside__note p:last-child { margin: 0; }

/* ---------- Cartes formation ---------- */
.sp .sp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: 16px;
	margin: 0 0 2em;
}
.sp .sp-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--sp-ligne);
	border-radius: 6px;
	color: var(--sp-encre);
	text-decoration: none;
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.sp .sp-card:hover {
	border-color: var(--sp-signal);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -14px rgba(11, 42, 28, .45);
}
.sp-card__plaque {
	--plaque: var(--sp-signal);
	flex: 0 0 56px;
	height: 56px;
	display: grid;
	place-items: center;
	background: var(--sp-signal);
	border: 3px solid #fff;
	outline: 1px solid var(--sp-ligne);
	border-radius: 5px;
	color: #fff;
	transition: box-shadow .2s;
}
.sp-card:hover .sp-card__plaque { box-shadow: 0 0 0 3px var(--sp-phosphore), 0 0 18px rgba(30, 122, 69, .35); }
.sp-card__plaque .sp-picto { width: 70%; height: 70%; }
.sp-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-card__title {
	font-family: var(--sp-display);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--sp-nuit);
}
.sp-card__text { font-size: .93rem; line-height: 1.5; color: var(--sp-gris); }
.sp-card__meta {
	font-family: var(--sp-mono);
	font-size: 12px;
	color: var(--sp-signal);
	margin-top: 4px;
}

/* ---------- Articles ---------- */
.sp .sp-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 22px;
	margin: 0 0 2em;
}
.sp .sp-post a {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--sp-encre);
	text-decoration: none;
	border-bottom: 2px solid var(--sp-ligne);
	padding-bottom: 18px;
	transition: border-color .2s;
}
.sp .sp-post a:hover { border-color: var(--sp-signal); }
.sp .sp-post__img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 14px;
}
.sp-post__date { font-family: var(--sp-mono); font-size: 12px; color: var(--sp-gris); }
.sp .sp-post__title {
	font-family: var(--sp-display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--sp-nuit);
	margin: 6px 0 8px;
}
.sp .sp-post__excerpt { font-size: .95rem; color: var(--sp-gris); margin: 0 0 12px; }
.sp-post__more {
	margin-top: auto;
	font-family: var(--sp-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--sp-signal);
}
.sp-post__more::after { content: " →"; }

.sp-hero--article { padding-bottom: 120px; }
.sp .sp-cover { margin: -96px auto 0; position: relative; }
.sp .sp-cover img {
	display: block;
	width: 100%;
	max-width: 1140px;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 24px 50px -30px rgba(11, 42, 28, .6);
}
.sp-body--article { max-width: 820px; }
.sp-prose { font-size: 1.06rem; }
.sp .sp-prose > p:first-child { font-size: 1.15rem; color: var(--sp-nuit); }
.sp .sp-prose figure { margin: 1.6em 0; }
.sp .sp-prose figure img { width: 100%; height: auto; border-radius: 4px; }
.sp-related { padding-bottom: 56px; }
.sp-related .sp-h2 { margin-top: 0; }

/* ---------- Bandeau contact ---------- */
.sp .sp-cta {
	background: var(--sp-signal);
	color: #fff;
	padding: 44px 0;
}
.sp-cta__grid { display: grid; gap: 24px; align-items: center; }
.sp .sp-cta .sp-eyebrow { color: var(--sp-phosphore); }
.sp .sp-cta__title {
	font-family: var(--sp-display);
	font-weight: 700;
	font-size: clamp(1.7rem, 3.6vw, 2.5rem);
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 10px;
	max-width: 24ch;
}
.sp .sp-cta__addr { margin: 0; color: #DDF0E3; font-size: .95rem; }
.sp-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Grands écrans ---------- */
@media (min-width: 720px) {
	.sp .sp-facts { grid-template-columns: repeat(4, 1fr); }
	.sp-fact { border-top: 0; border-left: 1px solid var(--sp-ligne); padding: 20px 20px; }
	.sp-fact:first-child { border-left: 0; padding-left: 0; }
	.sp .sp-cols { grid-template-columns: repeat(2, 1fr); }
	.sp .sp-stats { grid-template-columns: repeat(3, 1fr); }
	.sp .sp-logos { grid-template-columns: repeat(3, 1fr); }
	.sp .sp-photo--side { float: right; width: 260px; margin: 6px 0 20px 28px; }
	.sp .sp-photo--side img { max-height: none; aspect-ratio: 3 / 5; }
	.sp-plaque { width: 168px; }
}
@media (min-width: 1000px) {
	.sp .sp-hero { padding: 40px 0 64px; }
	.sp-hero__grid { grid-template-columns: 1fr auto; gap: 56px; }
	.sp-plaque { width: 236px; justify-self: end; margin-top: 30px; order: 0; }
	.sp-hero--article { padding-bottom: 150px; }
	.sp .sp-cover { margin-top: -120px; }
	.sp-body--aside { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; }
	.sp-aside { position: sticky; top: 24px; }
	.sp-cta__grid { grid-template-columns: 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
	.sp-plaque { animation: none; }
	.sp .sp-card,
	.sp .sp-btn { transition: none; }
	.sp .sp-card:hover { transform: none; }
}