/**
 * SecGram — components.css
 * Composants réutilisables. Toutes les classes sont préfixées .sg-
 * et s'appliquent dans Divi via Avancé → ID et classes CSS → Classe CSS
 * (sections, rangées ou modules). Catalogue complet : docs/DIVI.md.
 */

/* ---- Grille fluide --------------------------------------------------- */
/* Grille de cartes auto-adaptative : 1 → n colonnes sans media query.
   À poser sur une rangée Divi 1 colonne contenant plusieurs modules,
   ou sur un wrapper de module Code. */
.sg-grid {
	display: grid;
	gap: var(--sg-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* ---- Cartes ---------------------------------------------------------- */
.sg-card {
	background: var(--sg-color-surface);
	border: var(--sg-border);
	border-radius: var(--sg-radius-lg);
	padding: var(--sg-space-lg);
	box-shadow: var(--sg-shadow-sm);
	height: 100%;
	transition: box-shadow var(--sg-transition), border-color var(--sg-transition);
}

.sg-card:hover {
	box-shadow: var(--sg-shadow-md);
	border-color: var(--sg-color-primary);
}

/* Variante posée sur fond alterné. */
.sg-card--soft {
	background: var(--sg-color-surface-alt);
	border-color: transparent;
	box-shadow: none;
}

/* ---- Badges / étiquettes --------------------------------------------- */
/* Métadonnées de projet : « Site internet », « SEO local »,
   « Automatisation »… (étude de cas JProfi par exemple). */
.sg-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	background: var(--sg-color-primary-soft);
	color: var(--sg-color-primary-strong);
	border-radius: var(--sg-radius-full);
	padding: 0.35em 0.9em;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Rangée de badges. */
.sg-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sg-space-xs);
	margin-block: var(--sg-space-sm);
}

/* ---- Métadonnées d'étude de cas -------------------------------------- */
/* <ul class="sg-meta-list"><li><strong>Secteur</strong> Nettoyage</li>… */
.sg-meta-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sg-space-md) var(--sg-space-xl);
	padding: var(--sg-space-md) 0;
	margin: 0;
	border-block: var(--sg-border);
}

.sg-meta-list li {
	display: grid;
	gap: var(--sg-space-2xs);
	font-size: var(--sg-text-sm);
	color: var(--sg-color-body);
}

.sg-meta-list strong {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sg-color-muted);
}

/* ---- Bandeau d'appel à l'action -------------------------------------- */
.sg-cta-band {
	background: var(--sg-color-ink);
	color: #fff;
	border-radius: var(--sg-radius-lg);
	padding: var(--sg-space-xl);
}

.sg-cta-band :where(h2, h3) {
	color: #fff;
}

/* ---- Sections -------------------------------------------------------- */
/* Fond alterné léger pour rythmer la page. */
.sg-section-alt {
	background: var(--sg-color-surface-alt);
}

/* ---- Listes à puces « bénéfices » ------------------------------------ */
.sg-list-check {
	list-style: none;
	padding-inline-start: 0;
}

.sg-list-check li {
	position: relative;
	padding-inline-start: 1.75em;
	margin-block-end: var(--sg-space-xs);
}

.sg-list-check li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	font-weight: 700;
	color: var(--sg-color-success);
}

/* ---- Boutons hors Divi (404, formulaires du thème) ------------------- */
.sg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	background: var(--sg-color-accent);
	color: var(--sg-color-ink);
	padding: 0.8em 1.6em;
	border: 2px solid transparent;
	border-radius: var(--sg-radius-sm);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--sg-transition-fast), color var(--sg-transition-fast);
}

.sg-btn:hover {
	background: var(--sg-color-accent-hover);
	color: var(--sg-color-ink);
}

.sg-btn--ghost {
	background: transparent;
	color: var(--sg-color-accent-strong);
	border-color: currentColor;
}

.sg-btn--ghost:hover {
	background: var(--sg-color-accent-soft);
	color: var(--sg-color-accent-strong);
}

/* Variante fantôme sur fond sombre. */
:is(.sg-dark, .sg-cta-band) .sg-btn--ghost {
	color: var(--sg-color-on-dark);
}

/* ---- Fil d'Ariane ---------------------------------------------------- */
.sg-breadcrumb {
	font-size: var(--sg-text-sm);
	margin-block: var(--sg-space-sm);
}

.sg-breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sg-space-2xs);
	padding: 0;
	margin: 0;
}

.sg-breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: var(--sg-space-2xs);
	color: var(--sg-color-muted);
}

/* Séparateur décoratif. La seconde déclaration (syntaxe avec texte
   alternatif vide) masque le séparateur aux lecteurs d'écran sur les
   navigateurs qui la supportent ; la première sert de repli. */
.sg-breadcrumb li + li::before {
	content: "›";
	content: "›" / "";
	color: var(--sg-color-muted);
}

.sg-breadcrumb a {
	color: var(--sg-color-body);
	text-decoration: none;
}

.sg-breadcrumb a:hover {
	color: var(--sg-color-primary-strong);
	text-decoration: underline;
}

.sg-breadcrumb [aria-current="page"] {
	color: var(--sg-color-ink);
	font-weight: 600;
}

/* Fil d'Ariane posé sur une section sombre : liens et page courante
   doivent rester lisibles (constaté sur les héros de pages service). */
.sg-dark .sg-breadcrumb a,
.sg-dark .sg-breadcrumb li,
.sg-dark .sg-breadcrumb li + li::before {
	color: var(--sg-color-on-dark-muted);
}

.sg-dark .sg-breadcrumb [aria-current="page"] {
	color: var(--sg-color-on-dark);
}

/* ---- Page 404 -------------------------------------------------------- */
.sg-404 {
	margin-inline: auto;
	padding-block: var(--sg-space-3xl);
	text-align: center;
}

.sg-404__code {
	font-size: clamp(4rem, 3rem + 6vw, 7rem);
	font-weight: 800;
	line-height: 1;
	color: var(--sg-color-primary-soft);
	-webkit-text-stroke: 2px var(--sg-color-primary);
	margin-block-end: var(--sg-space-sm);
}

.sg-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sg-space-sm);
	justify-content: center;
	margin-block: var(--sg-space-lg);
}

.sg-404__search {
	max-width: 32rem;
	margin-inline: auto;
	margin-block-start: var(--sg-space-xl);
}

.sg-404__search h2 {
	font-size: var(--sg-text-lg);
	margin-block-end: var(--sg-space-sm);
}

.sg-404__contact {
	margin-block-start: var(--sg-space-xl);
	color: var(--sg-color-muted);
}

/* ---- Formulaire de recherche du thème -------------------------------- */
.sg-search-form {
	display: flex;
	gap: var(--sg-space-xs);
}

.sg-search-form__input {
	flex: 1;
	min-width: 0;
}

/* ======================================================================
   Composants de l'identité sombre/or (design SecGram)
   ==================================================================== */

/* ---- Section sombre --------------------------------------------------- */
/* À poser sur une section Divi (module_class="sg-dark"). Gère la
   lisibilité de tout le contenu courant sur fond noir. */
.sg-dark {
	background-color: var(--sg-color-dark);
	color: var(--sg-color-on-dark-muted);
}

.sg-dark :where(h1, h2, h3, h4, h5, h6, .sg-h1, .sg-h2, .sg-h3, .sg-h4) {
	color: var(--sg-color-on-dark);
}

.sg-dark :where(.sg-eyebrow) {
	color: var(--sg-color-accent);
}

.sg-dark :where(.sg-lead) {
	color: var(--sg-color-on-dark-muted);
}

.sg-dark :where(p a:not(.sg-btn):not(.et_pb_button)) {
	color: var(--sg-color-on-dark);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Cartes posées sur fond sombre. */
.sg-dark .sg-card,
.sg-quote-card {
	background: var(--sg-color-dark-panel);
	border: 1px solid var(--sg-color-dark-border);
	box-shadow: none;
	color: var(--sg-color-on-dark-muted);
}

.sg-dark .sg-card:hover {
	border-color: var(--sg-color-accent);
	box-shadow: none;
}

/* ---- Bandeau CTA doré ------------------------------------------------- */
/* Variante or du bandeau CTA : fond accent, texte noir. */
.sg-cta-band--accent {
	background: var(--sg-color-accent);
	color: var(--sg-color-ink);
}

.sg-cta-band--accent :where(h2, h3) {
	color: var(--sg-color-ink);
}

.sg-cta-band--accent .sg-btn {
	background: var(--sg-color-ink);
	color: #fff;
}

.sg-cta-band--accent .sg-btn:hover {
	background: #000;
	color: #fff;
}

/* Liens texte dans le bandeau or : noir souligné (contraste AA sur or). */
.sg-cta-band--accent a:not(.sg-btn):not(.et_pb_button) {
	color: var(--sg-color-ink);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	font-weight: 600;
}

/* ---- Tuile d'icône ---------------------------------------------------- */
/* Carré sombre arrondi contenant une icône or (cartes d'expertise). */
.sg-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--sg-color-dark);
	border-radius: var(--sg-radius-md);
	margin-block-end: var(--sg-space-sm);
}

.sg-icon-tile img,
.sg-icon {
	width: 24px;
	height: 24px;
}

/* ---- Lien « En savoir plus → » ---------------------------------------- */
.sg-more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	font-size: var(--sg-text-sm);
	color: var(--sg-color-accent-strong);
	text-decoration: none;
}

.sg-more-link::after {
	content: "\2192";
	transition: transform var(--sg-transition-fast);
}

.sg-more-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sg-more-link:hover::after {
	transform: translateX(3px);
}

.sg-dark .sg-more-link {
	color: var(--sg-color-accent);
}

/* ---- Bandeau de chiffres clés ----------------------------------------- */
/* IMPORTANT : n'y placer QUE des chiffres réels et vérifiables
   (voir docs/CONFIGURATION.md — aucune donnée inventée). */
.sg-stats {
	display: grid;
	gap: var(--sg-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	align-items: center;
}

.sg-stat {
	display: flex;
	align-items: center;
	gap: var(--sg-space-sm);
}

.sg-stat + .sg-stat {
	border-inline-start: 1px solid var(--sg-color-dark-border);
	padding-inline-start: var(--sg-space-lg);
}

.sg-stat__value {
	display: block;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--sg-color-on-dark);
}

.sg-stat__label {
	display: block;
	font-size: var(--sg-text-sm);
	color: var(--sg-color-on-dark-muted);
}

/* ---- Étapes de méthode ------------------------------------------------ */
.sg-process {
	display: grid;
	gap: var(--sg-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.sg-step {
	position: relative;
}

.sg-step + .sg-step {
	border-inline-start: 1px solid var(--sg-color-border);
	padding-inline-start: var(--sg-space-lg);
}

.sg-dark .sg-step + .sg-step {
	border-inline-start-color: var(--sg-color-dark-border);
}

.sg-step__num {
	display: block;
	font-size: var(--sg-text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--sg-color-accent-strong);
	margin-block-end: var(--sg-space-2xs);
}

.sg-dark .sg-step__num {
	color: var(--sg-color-accent);
}

.sg-step :where(h3, h4) {
	font-size: 1.05rem;
	margin-block-end: var(--sg-space-2xs);
}

.sg-step p {
	font-size: var(--sg-text-sm);
	margin: 0;
}

/* ---- Carte témoignage ------------------------------------------------- */
/* IMPORTANT : uniquement des témoignages réels, avec accord de la
   personne citée. Le style est prêt ; le contenu est éditorial. */
.sg-quote-card {
	border-radius: var(--sg-radius-lg);
	padding: var(--sg-space-lg);
	height: 100%;
}

.sg-quote-card::before {
	content: "\201C";
	display: block;
	font-size: 3rem;
	line-height: 0.6;
	font-weight: 800;
	color: var(--sg-color-accent);
	margin-block-end: var(--sg-space-sm);
}

.sg-quote-card figcaption,
.sg-quote-card .sg-quote-author {
	display: flex;
	align-items: center;
	gap: var(--sg-space-xs);
	margin-block-start: var(--sg-space-sm);
	font-size: var(--sg-text-sm);
	color: var(--sg-color-on-dark);
	font-weight: 600;
}

/* ---- Bandeau de logos clients ----------------------------------------- */
/* N'afficher que des logos de clients réels (voir docs/DIVI.md). */
.sg-logo-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sg-space-lg) var(--sg-space-xl);
	opacity: 0.85;
}

.sg-logo-strip img {
	height: 28px;
	width: auto;
}