/*
 * pages/expertise.css — Styles archive /expertises/ + singles /expertises/{slug}/
 * Chargé via inc/enqueue.php (body.post-type-archive-expertise ou body.single-expertise).
 *
 * Sections archive :
 *   - .expertise-archive__intro-section  → signature Fraunces italic
 *   - .expertise-archive__grid-section   → 4 cards bw-reveal
 *   - .expertise-archive__qualifs        → bandeau section-dark
 *
 * Sections singles :
 *   - .expertise-single__intro    → kicker + Fraunces italic + paragraphes
 *   - .expertise-single__offers   → grid cards (portées/offres/services/catalogue)
 *   - .expertise-single__process  → méthodologie ordinale
 *   - .expertise-single__refs     → tag-cloud référentiels
 *   - .expertise-single__formats  → features (spécifique formation)
 */

/* ════════════════════════════════════════════════════════════════════
 * TITRE DE SECTION — signature Fraunces italic (pattern inter-sections)
 * ════════════════════════════════════════════════════════════════════ */

.expertise-archive__title,
.expertise-archive__qualifs-title,
.expertise-single__intro-title,
.expertise-single__offers-title,
.expertise-single__process-title,
.expertise-single__refs-title,
.expertise-single__formats-title {
	font-family:     var(--font-display);
	font-size:       clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight:     500;
	line-height:     var(--lh-tight);
	letter-spacing:  -0.015em;
	margin:          0 0 var(--space-6);
}

.expertise-archive__title em,
.expertise-archive__qualifs-title em,
.expertise-single__intro-title em,
.expertise-single__offers-title em,
.expertise-single__process-title em,
.expertise-single__refs-title em,
.expertise-single__formats-title em {
	font-style: italic;
	color:      var(--bw-red);
}

.expertise-archive__kicker,
.expertise-archive__qualifs-kicker,
.expertise-single__intro-kicker,
.expertise-single__offers-kicker,
.expertise-single__process-kicker,
.expertise-single__refs-kicker,
.expertise-single__formats-kicker {
	display:         inline-block;
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.18em;
	text-transform:  uppercase;
	color:           var(--bw-red);
	margin:          0 0 var(--space-4);
}

/* ════════════════════════════════════════════════════════════════════
 * ARCHIVE — #1 Intro éditoriale
 * ════════════════════════════════════════════════════════════════════ */

.expertise-archive__intro {
	max-width:  780px;
	margin:     0 auto;
	text-align: center;
}

.expertise-archive__title {
	color: var(--fg);
}

.expertise-archive__lead {
	font-size:   var(--text-md);
	color:       var(--fg-muted);
	line-height: var(--lh-relaxed);
	margin:      0;
}

/* ════════════════════════════════════════════════════════════════════
 * ARCHIVE — #2 Grid 4 cards expertise
 * ════════════════════════════════════════════════════════════════════ */

.expertise-archive__grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   var(--space-6);
}

@media (max-width: 720px) {
	.expertise-archive__grid {
		grid-template-columns: 1fr;
	}
}

.expertise-card {
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	gap:             var(--space-6);
	padding:         var(--space-8);
	border:          1px solid var(--border);
	border-radius:   var(--radius);
	background:      var(--bg);
	transition:      border-color var(--transition), transform var(--transition), box-shadow var(--transition);
	position:        relative;
	overflow:        hidden;
}

.expertise-card::before {
	content:        '';
	position:       absolute;
	top:            0;
	left:           0;
	width:          0;
	height:         2px;
	background:     var(--bw-red);
	transition:     width 400ms cubic-bezier(.22, .61, .36, 1);
}

.expertise-card:hover,
.expertise-card:focus-within {
	border-color: color-mix(in srgb, var(--bw-red) 40%, var(--border));
	transform:    translateY(-2px);
	box-shadow:   var(--shadow-2);
}

.expertise-card:hover::before,
.expertise-card:focus-within::before {
	width: 100%;
}

.expertise-card__body {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
	flex:           1;
}

.expertise-card__icon {
	width:        44px;
	height:       44px;
	display:      flex;
	align-items:  center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background:   color-mix(in srgb, var(--bw-red) 8%, transparent);
	color:        var(--bw-red);
	margin-bottom: var(--space-2);
}

.expertise-card__badge {
	display:         inline-block;
	align-self:      flex-start;
	padding:         var(--space-1) var(--space-3);
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.12em;
	text-transform:  uppercase;
	color:           var(--bw-red);
	border:          1px solid color-mix(in srgb, var(--bw-red) 35%, transparent);
	border-radius:   999px;
	background:      color-mix(in srgb, var(--bw-red) 5%, transparent);
}

.expertise-card__title {
	font-family:    var(--font-display);
	font-size:      var(--text-2xl);
	font-weight:    500;
	line-height:    1.2;
	color:          var(--fg);
	margin:         var(--space-1) 0 0;
	letter-spacing: -0.015em;
}

.expertise-card__title a {
	color:           inherit;
	text-decoration: none;
	transition:      color var(--transition);
}

.expertise-card__title a::after {
	content:  '';
	position: absolute;
	inset:    0;
	z-index:  1;
}

.expertise-card:hover .expertise-card__title a,
.expertise-card:focus-within .expertise-card__title a {
	color: var(--bw-red);
}

.expertise-card__excerpt {
	font-size:   var(--text-sm);
	color:       var(--fg-muted);
	line-height: var(--lh-relaxed);
	margin:      0;
}

.expertise-card__footer {
	position: relative;
	z-index:  2;
}

.expertise-card__cta {
	display:         inline-flex;
	align-items:     center;
	gap:             var(--space-2);
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.12em;
	text-transform:  uppercase;
	color:           var(--bw-red);
	text-decoration: none;
	transition:      gap var(--transition);
}

.expertise-card:hover .expertise-card__cta,
.expertise-card:focus-within .expertise-card__cta {
	gap: var(--space-3);
}

/* Stagger 0/80/160/240 ms sur les 4 cards archive */
.expertise-archive__grid > .bw-reveal:nth-child(1) { --bw-reveal-delay:   0ms; }
.expertise-archive__grid > .bw-reveal:nth-child(2) { --bw-reveal-delay:  80ms; }
.expertise-archive__grid > .bw-reveal:nth-child(3) { --bw-reveal-delay: 160ms; }
.expertise-archive__grid > .bw-reveal:nth-child(4) { --bw-reveal-delay: 240ms; }

/* ════════════════════════════════════════════════════════════════════
 * ARCHIVE — #3 Bandeau qualifs section-dark
 * ════════════════════════════════════════════════════════════════════ */

html.js-reveals-ready .expertise-archive__qualifs::before {
	content:    '';
	position:   absolute;
	top:        0;
	left:       0;
	height:     1px;
	width:      0;
	background: var(--bw-red);
	transition: width 700ms cubic-bezier(.22, .61, .36, 1);
	z-index:    2;
}

html.js-reveals-ready .expertise-archive__qualifs.is-visible::before {
	width: 100%;
}

.expertise-archive__qualifs-header {
	text-align:    center;
	margin-bottom: var(--space-12);
}

.expertise-archive__qualifs-title {
	color: #e8eaed;
}

.expertise-archive__qualifs-list {
	display:         grid;
	grid-template-columns: repeat(4, 1fr);
	gap:             0;
	list-style:      none;
	margin:          0;
	padding:         0;
}

@media (max-width: 860px) {
	.expertise-archive__qualifs-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.expertise-archive__qualifs-list {
		grid-template-columns: 1fr;
	}
}

.expertise-archive__qualifs-item {
	display:         flex;
	flex-direction:  column;
	gap:             var(--space-2);
	align-items:     center;
	justify-content: center;
	padding:         var(--space-6) var(--space-4);
	text-align:      center;
	position:        relative;
}

.expertise-archive__qualifs-item + .expertise-archive__qualifs-item {
	border-left: 1px solid color-mix(in srgb, #e8eaed 12%, transparent);
}

@media (max-width: 860px) {
	.expertise-archive__qualifs-item:nth-child(3) {
		border-top:  1px solid color-mix(in srgb, #e8eaed 12%, transparent);
		border-left: 0;
	}
	.expertise-archive__qualifs-item:nth-child(4) {
		border-top:  1px solid color-mix(in srgb, #e8eaed 12%, transparent);
	}
}

@media (max-width: 480px) {
	.expertise-archive__qualifs-item + .expertise-archive__qualifs-item {
		border-top:  1px solid color-mix(in srgb, #e8eaed 12%, transparent);
		border-left: 0;
	}
}

.expertise-archive__qualifs-type {
	font-family:    var(--font-mono);
	font-size:      var(--text-xs);
	font-weight:    var(--fw-semi);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color:          var(--bw-red);
}

.expertise-archive__qualifs-name {
	font-family:    var(--font-display);
	font-size:      var(--text-lg);
	font-weight:    500;
	color:          #f3f5f7;
	letter-spacing: -0.01em;
}

/* ════════════════════════════════════════════════════════════════════
 * SINGLE — #1 Intro éditoriale centrée
 * ════════════════════════════════════════════════════════════════════ */

.expertise-single__intro-inner {
	max-width:  780px;
	margin:     0 auto;
	text-align: center;
}

.expertise-single__intro-title {
	color: var(--fg);
}

.expertise-single__intro-lead {
	font-size:   var(--text-md);
	color:       var(--fg-muted);
	line-height: var(--lh-relaxed);
	margin:      0;
}

/* ════════════════════════════════════════════════════════════════════
 * SINGLE — #2 Offres/services/portées — grid de cards
 * ════════════════════════════════════════════════════════════════════ */

.expertise-single__offers-header {
	text-align:    center;
	margin-bottom: var(--space-12);
}

.expertise-single__offers-title {
	color: var(--fg);
}

.expertise-single__offers-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   var(--space-6);
}

.expertise-single__offers-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 960px) {
	.expertise-single__offers-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.expertise-single__offers-grid,
	.expertise-single__offers-grid--3 {
		grid-template-columns: 1fr;
	}
}

.expertise-offer {
	display:         flex;
	flex-direction:  column;
	gap:             var(--space-3);
	padding:         var(--space-6);
	border:          1px solid var(--border);
	border-radius:   var(--radius);
	background:      var(--bg);
	transition:      border-color var(--transition), transform var(--transition);
}

.expertise-offer:hover {
	border-color: color-mix(in srgb, var(--bw-red) 35%, var(--border));
	transform:    translateY(-2px);
}

.expertise-offer__icon {
	width:           40px;
	height:          40px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border-radius:   var(--radius-sm);
	background:      color-mix(in srgb, var(--bw-red) 8%, transparent);
	color:           var(--bw-red);
	margin-bottom:   var(--space-1);
}

.expertise-offer__title {
	font-family:    var(--font-display);
	font-size:      var(--text-lg);
	font-weight:    500;
	line-height:    1.3;
	color:          var(--fg);
	margin:         0;
	letter-spacing: -0.01em;
}

.expertise-offer__title a {
	color:           inherit;
	text-decoration: none;
	transition:      color var(--transition);
}

.expertise-offer__title a:hover {
	color: var(--bw-red);
}

.expertise-offer__desc {
	font-size:   var(--text-sm);
	color:       var(--fg-muted);
	line-height: var(--lh-relaxed);
	margin:      0;
}

.expertise-offer__extra {
	font-size:   var(--text-sm);
	color:       var(--fg-muted);
	line-height: var(--lh-relaxed);
	margin:      var(--space-2) 0 0;
}

.expertise-offer__extra a {
	color:                 var(--bw-red);
	text-decoration:       underline;
	text-underline-offset: 0.2em;
}

.expertise-offer__extra a:hover,
.expertise-offer__extra a:focus-visible {
	color: var(--bw-red-hover);
}

.expertise-offer__link {
	display:         inline-flex;
	align-items:     center;
	gap:             var(--space-2);
	margin-top:      var(--space-2);
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.12em;
	text-transform:  uppercase;
	color:           var(--bw-red);
	text-decoration: none;
	transition:      gap var(--transition);
}

.expertise-offer__link:hover {
	gap: var(--space-3);
}

/* Variante formation — niveau + durée en meta */

.expertise-offer--formation {
	justify-content: space-between;
}

.expertise-offer__level {
	align-self:      flex-start;
	padding:         var(--space-1) var(--space-3);
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.12em;
	text-transform:  uppercase;
	color:           var(--fg-muted);
	border:          1px solid var(--border);
	border-radius:   999px;
	background:      var(--surface);
}

.expertise-offer__meta {
	display:         inline-flex;
	align-items:     center;
	gap:             var(--space-1);
	margin-top:      var(--space-2);
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	letter-spacing:  0.1em;
	text-transform:  uppercase;
	color:           var(--fg-muted);
}

.expertise-single__offers-more {
	text-align:  center;
	margin-top:  var(--space-10);
}

.expertise-single__offers-more .btn svg {
	margin-left: var(--space-2);
}

/* Stagger reveal — jusqu'à 6 items (conseil 6, formation 6, audit 4, soc 4) */
.expertise-single__offers-grid > .bw-reveal:nth-child(1) { --bw-reveal-delay:   0ms; }
.expertise-single__offers-grid > .bw-reveal:nth-child(2) { --bw-reveal-delay:  60ms; }
.expertise-single__offers-grid > .bw-reveal:nth-child(3) { --bw-reveal-delay: 120ms; }
.expertise-single__offers-grid > .bw-reveal:nth-child(4) { --bw-reveal-delay: 180ms; }
.expertise-single__offers-grid > .bw-reveal:nth-child(5) { --bw-reveal-delay: 240ms; }
.expertise-single__offers-grid > .bw-reveal:nth-child(6) { --bw-reveal-delay: 300ms; }

/* ════════════════════════════════════════════════════════════════════
 * SINGLE — #3 Méthodologie (process list numérotée)
 * ════════════════════════════════════════════════════════════════════ */

.expertise-single__process-header {
	text-align:    center;
	margin-bottom: var(--space-12);
}

.expertise-single__process-title {
	color: var(--fg);
}

.expertise-process-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        var(--space-8);
	counter-reset: none;
}

.expertise-process-item {
	display:     grid;
	grid-template-columns: auto 1fr;
	gap:         var(--space-6);
	align-items: start;
	position:    relative;
}

.expertise-process-item + .expertise-process-item {
	padding-top:   var(--space-8);
	border-top:    1px solid var(--border);
}

.expertise-process-item__step {
	font-family:     var(--font-display);
	font-style:      italic;
	font-weight:     500;
	font-size:       clamp(2rem, 4vw, 3rem);
	line-height:     1;
	color:           var(--bw-red);
	letter-spacing:  -0.02em;
	font-variant-numeric: tabular-nums;
	min-width:       3ch;
}

.expertise-process-item__body {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-2);
	padding-top:    var(--space-1);
}

.expertise-process-item__label {
	font-family:    var(--font-body);
	font-size:      var(--text-lg);
	font-weight:    var(--fw-semi);
	color:          var(--fg);
	letter-spacing: -0.005em;
}

.expertise-process-item__desc {
	font-size:   var(--text-base);
	color:       var(--fg-muted);
	line-height: var(--lh-relaxed);
	margin:      0;
}

.expertise-process-list > .bw-reveal:nth-child(1) { --bw-reveal-delay:   0ms; }
.expertise-process-list > .bw-reveal:nth-child(2) { --bw-reveal-delay:  80ms; }
.expertise-process-list > .bw-reveal:nth-child(3) { --bw-reveal-delay: 160ms; }
.expertise-process-list > .bw-reveal:nth-child(4) { --bw-reveal-delay: 240ms; }

/* ════════════════════════════════════════════════════════════════════
 * SINGLE — #4 Référentiels (tag cloud) / SOC technos
 * ════════════════════════════════════════════════════════════════════ */

.expertise-single__refs-header {
	text-align:    center;
	margin-bottom: var(--space-8);
}

.expertise-single__refs-title {
	color: var(--fg);
}

.expertise-single__refs-lead {
	max-width:   640px;
	margin:      0 auto;
	font-size:   var(--text-md);
	color:       var(--fg-muted);
	line-height: var(--lh-relaxed);
}

.expertise-tag-cloud {
	list-style:     none;
	margin:         0 auto;
	padding:        0;
	display:        flex;
	flex-wrap:      wrap;
	justify-content: center;
	gap:            var(--space-2) var(--space-3);
	max-width:      900px;
}

.expertise-tag {
	padding:         var(--space-2) var(--space-4);
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.08em;
	text-transform:  uppercase;
	color:           var(--fg);
	border:          1px solid var(--border);
	border-radius:   999px;
	background:      var(--bg);
	transition:      border-color var(--transition), color var(--transition), background-color var(--transition);
}

.expertise-tag:hover {
	border-color: color-mix(in srgb, var(--bw-red) 40%, var(--border));
	color:        var(--bw-red);
	background:   color-mix(in srgb, var(--bw-red) 4%, var(--bg));
}

/* ════════════════════════════════════════════════════════════════════
 * SINGLE — #5 Formats (spécifique formation)
 * ════════════════════════════════════════════════════════════════════ */

.expertise-single__formats-header {
	text-align:    center;
	margin-bottom: var(--space-12);
}

.expertise-single__formats-title {
	color: var(--fg);
}

.expertise-formats-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   var(--space-8);
}

@media (max-width: 640px) {
	.expertise-formats-grid {
		grid-template-columns: 1fr;
	}
}

.expertise-format {
	display:        grid;
	grid-template-columns: auto 1fr;
	gap:            var(--space-4);
	align-items:    start;
}

.expertise-format__icon {
	width:           44px;
	height:          44px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border-radius:   var(--radius-sm);
	background:      color-mix(in srgb, var(--bw-red) 8%, transparent);
	color:           var(--bw-red);
	flex-shrink:     0;
}

.expertise-format__body {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-2);
}

.expertise-format__title {
	font-family:    var(--font-body);
	font-size:      var(--text-lg);
	font-weight:    var(--fw-semi);
	color:          var(--fg);
	margin:         0;
	letter-spacing: -0.005em;
}

.expertise-format__desc {
	font-size:   var(--text-sm);
	color:       var(--fg-muted);
	line-height: var(--lh-relaxed);
	margin:      0;
}

.expertise-formats-grid > .bw-reveal:nth-child(1) { --bw-reveal-delay:   0ms; }
.expertise-formats-grid > .bw-reveal:nth-child(2) { --bw-reveal-delay:  80ms; }
.expertise-formats-grid > .bw-reveal:nth-child(3) { --bw-reveal-delay: 160ms; }
.expertise-formats-grid > .bw-reveal:nth-child(4) { --bw-reveal-delay: 240ms; }

/* ════════════════════════════════════════════════════════════════════
 * REDUCED MOTION
 * ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.expertise-card,
	.expertise-card::before,
	.expertise-card__cta,
	.expertise-offer,
	.expertise-offer__link,
	.expertise-tag {
		transition: none;
	}
	.expertise-card:hover,
	.expertise-card:focus-within,
	.expertise-offer:hover {
		transform: none;
	}
	html.js-reveals-ready .expertise-archive__qualifs::before {
		width:      100%;
		transition: none;
	}
}