/*
Theme Name: Jérémy Gohin 2026
Description: Thème sur mesure de jeremygohin.fr (piste A « Bleu studio »). Léger, sans constructeur de page : le contenu se modifie dans l'éditeur de blocs.
Author: Jérémy Gohin
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: jeremygohin
*/

/* ---------- Jetons ---------- */
:root {
	--jg-bg: #F5F7FA;
	--jg-surface: #FFFFFF;
	--jg-ink: #0B1726;
	--jg-body: #3B4656;
	--jg-muted: #5B6675;
	--jg-line: #E2E7EE;
	--jg-line-strong: #C9D3DF;
	--jg-brand: #164B75;
	--jg-brand-text: #164B75;
	--jg-on-brand: #FFFFFF;
	--jg-accent: #FFB020;
	--jg-chip: #E8EEF5;
	--jg-dark: #0B1726;
	--jg-dark-body: #C9D3DF;
	--jg-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
	--jg-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
	--jg-gutter: clamp(20px, 4vw, 40px);
	--jg-section: clamp(56px, 8vw, 112px);
	--jg-max: 1200px;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--jg-bg: #0A1320;
		--jg-surface: #0F1B2B;
		--jg-ink: #EEF2F7;
		--jg-body: #B7C2D0;
		--jg-muted: #95A1B0;
		--jg-line: #1E2C3E;
		--jg-line-strong: #2C3D53;
		--jg-brand: #2F6EA5;
		--jg-brand-text: #8CBDEB;
		--jg-chip: #15263A;
		--jg-dark: #050B14;
	}
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--jg-bg);
	color: var(--jg-ink);
	font-family: var(--jg-sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--jg-brand-text); text-underline-offset: 3px; }
a:hover { color: var(--jg-ink); }
:focus-visible { outline: 3px solid var(--jg-accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { color: var(--jg-ink); font-weight: 600; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
[id] { scroll-margin-top: 24px; }

.jg-skip {
	position: absolute; left: 16px; top: -100px; z-index: 10;
	background: var(--jg-surface); color: var(--jg-ink); padding: 10px 16px; border-radius: 10px;
}
.jg-skip:focus { top: 16px; }

/* Les blocs WordPress ajoutent des marges entre enfants : on pilote tout au gap. */
.jg-page .wp-block-group > *,
.jg-page .wp-block-group > .wp-block-group > * { margin-block: 0; }

.jg-wrap { max-width: var(--jg-max); margin-inline: auto; padding-inline: var(--jg-gutter); }

/* ---------- En-tête ---------- */
.jg-header { border-bottom: 1px solid var(--jg-line); background: var(--jg-bg); }
.jg-header__in {
	max-width: var(--jg-max); margin: 0 auto; padding: 14px var(--jg-gutter);
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.jg-brand { display: flex; align-items: center; gap: 10px; color: var(--jg-ink); text-decoration: none; }
.jg-brand svg { width: 36px; height: 36px; flex: none; }
.jg-brand span { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.jg-nav { display: flex; align-items: center; gap: 24px; font-size: 15px; }
.jg-nav a { color: var(--jg-body); text-decoration: none; padding: 10px 0; }
.jg-nav a:hover { color: var(--jg-ink); }
.jg-nav .jg-nav__cta {
	background: var(--jg-brand); color: var(--jg-on-brand); font-weight: 600;
	padding: 10px 16px; border-radius: 10px;
}
.jg-nav .jg-nav__cta:hover { color: var(--jg-on-brand); background: var(--jg-ink); }
@media (prefers-color-scheme: dark) { .jg-nav .jg-nav__cta:hover { background: #3D80BB; } }
@media (max-width: 760px) { .jg-nav a:not(.jg-nav__cta) { display: none; } }

/* ---------- Éléments communs ---------- */
.jg-eyebrow { font-family: var(--jg-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jg-muted); }
.jg-h2, .jg-page h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; line-height: 1.08; }
.jg-page h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.3; }
.jg-section { padding-block: var(--jg-section); }
.jg-section--white { background: var(--jg-surface); border-block: 1px solid var(--jg-line); }
.jg-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }

.jg-split { display: flex; flex-wrap: wrap; gap: 48px; }
.jg-split > .jg-head { flex: 1 1 320px; min-width: 0; }
.jg-split > :not(.jg-head) { flex: 2 1 560px; min-width: 0; }

/* Boutons */
.jg-page .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.jg-page .wp-block-button__link {
	background: var(--jg-brand); color: var(--jg-on-brand); font-weight: 600; font-size: 16px;
	padding: 14px 22px; border-radius: 12px; text-decoration: none; border: 1px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.jg-page .wp-block-button__link:hover { background: var(--jg-ink); color: var(--jg-bg); }
.jg-page .is-style-outline .wp-block-button__link { background: transparent; color: var(--jg-brand-text); border-color: var(--jg-line-strong); }
.jg-page .is-style-outline .wp-block-button__link:hover { border-color: var(--jg-brand-text); color: var(--jg-ink); background: transparent; }

/* ---------- Hero ---------- */
.jg-hero { padding-block: clamp(40px, 7vw, 96px); }
.jg-hero > .jg-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.jg-hero__text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.jg-hero h1 { font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.035em; line-height: 1.02; }
.jg-lead { max-width: 560px; font-size: clamp(17px, 1.6vw, 20px); color: var(--jg-body); }
.jg-hero__media { flex: 1 1 340px; max-width: 480px; position: relative; }
.jg-hero__media .wp-block-image { margin: 0; }
.jg-hero__media img { width: 100%; border-radius: 24px; }
.jg-badge {
	position: absolute; left: -16px; bottom: 28px; background: var(--jg-surface); color: var(--jg-ink);
	border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; gap: 12px;
	font-family: var(--jg-mono); font-size: 14px; font-weight: 500;
	box-shadow: 0 10px 30px rgba(11, 23, 38, 0.14);
}
.jg-badge::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--jg-accent); flex: none; }
@media (max-width: 520px) { .jg-badge { left: 12px; bottom: 12px; } }

/* ---------- Chiffres ---------- */
.jg-stats { background: var(--jg-surface); border-block: 1px solid var(--jg-line); padding-block: 48px; }
.jg-stats > .jg-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.jg-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1140px) { .jg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .jg-stats > .jg-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .jg-cards { grid-template-columns: minmax(0, 1fr); } }
.jg-stat { display: flex; flex-direction: column; gap: 6px; }
.jg-stat__num {
	font-family: var(--jg-mono); font-size: clamp(34px, 3.4vw, 46px); font-weight: 600; white-space: nowrap;
	letter-spacing: -0.04em; line-height: 1; color: var(--jg-brand-text); font-variant-numeric: tabular-nums;
}
.jg-stat__label { font-size: 15px; color: var(--jg-body); }
.jg-stat--accent .jg-stat__num::after {
	content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px;
	background: var(--jg-accent); margin-left: 10px; vertical-align: middle;
}

/* ---------- Parcours ---------- */
.jg-timeline { display: flex; flex-direction: column; }
.jg-step { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-block: 28px; border-top: 1px solid var(--jg-line); }
.jg-step:last-child { border-bottom: 1px solid var(--jg-line); }
.jg-step__date { flex: 0 0 180px; font-family: var(--jg-mono); font-size: 14px; color: var(--jg-muted); }
.jg-step__body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.jg-step__body h3 { font-size: 22px; }
.jg-step__body p { color: var(--jg-body); }
.jg-page .jg-step__logo { margin: 0 0 8px; }
.jg-step__logo img { height: 28px; width: auto; }
.jg-step__logo img[src*="unicaen"] { height: 48px; }
.jg-step__logo--invert img { filter: invert(1); }
@media (prefers-color-scheme: dark) {
	.jg-step__logo img { filter: invert(1); }
	.jg-step__logo--invert img { filter: none; }
}
.jg-brands { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px !important; }
.jg-page .jg-brands__logo {
	margin: 0; background: #FFFFFF; border: 1px solid var(--jg-line); border-radius: 12px; padding: 10px 16px;
	display: flex; align-items: center;
}
.jg-brands__logo img { height: 26px; width: auto; }

/* ---------- Expertise ---------- */
#expertise > .jg-wrap { display: flex; flex-direction: column; gap: 40px; }
.jg-cards { gap: 20px; }
.jg-card { border: 1px solid var(--jg-line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.jg-card__num { font-family: var(--jg-mono); font-size: 13px; font-weight: 600; color: var(--jg-brand-text); }
.jg-card p:not(.jg-card__num) { font-size: 16px; color: var(--jg-body); }

/* Chaîne de valeur */
.jg-chain {
	display: flex; flex-wrap: wrap; align-items: center; gap: 32px 48px;
	background: var(--jg-bg); border: 1px solid var(--jg-line); border-radius: 20px; padding: clamp(24px, 4vw, 40px);
}
.jg-chain__text { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.jg-chain__text h3 { font-size: clamp(22px, 2.2vw, 28px); }
.jg-chain__text p:not(.jg-eyebrow) { color: var(--jg-body); font-size: 16px; }
.jg-chain__steps {
	flex: 1.4 1 480px; min-width: 0; list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
	font-family: var(--jg-mono); font-size: 13px; font-weight: 500;
}
.jg-chain__steps li {
	position: relative; white-space: nowrap; color: var(--jg-brand-text);
	background: var(--jg-surface); border: 1px solid var(--jg-line); border-radius: 999px; padding: 8px 14px;
}
.jg-chain__steps li:not(:last-child)::after {
	content: "→"; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: var(--jg-muted);
}
.jg-chain__steps li:last-child { background: var(--jg-brand); border-color: var(--jg-brand); color: var(--jg-on-brand); }

/* ---------- Leviers ---------- */
.jg-tools { display: flex; flex-direction: column; gap: 28px; }
.jg-tools__label { font-size: 14px; font-weight: 600; color: var(--jg-body); margin-bottom: 12px !important; }
.jg-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jg-chips li { background: var(--jg-surface); border: 1px solid var(--jg-line); border-radius: 999px; padding: 8px 16px; font-size: 15px; }
.jg-chips--mono li { background: var(--jg-chip); border-color: transparent; color: var(--jg-brand-text); font-family: var(--jg-mono); font-size: 14px; }

/* ---------- À côté (Erminig) ---------- */
.jg-dark { background: var(--jg-dark); color: #FFFFFF; padding-block: var(--jg-section); }
.jg-dark > .jg-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.jg-dark__text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.jg-dark h2 { color: #FFFFFF; }
.jg-dark .jg-eyebrow { color: var(--jg-accent); }
.jg-dark__text p:not(.jg-eyebrow) { color: var(--jg-dark-body); max-width: 540px; }
.jg-dark .wp-block-image { flex: 1 1 320px; max-width: 420px; margin: 0; }
.jg-dark .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; }

/* ---------- FAQ ---------- */
.jg-faq { display: flex; flex-direction: column; }
.jg-faq__item { border-top: 1px solid var(--jg-line); }
.jg-faq__item:last-child { border-bottom: 1px solid var(--jg-line); }
.jg-faq__item summary {
	cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
	font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--jg-ink);
}
.jg-faq__item summary::-webkit-details-marker { display: none; }
.jg-faq__item summary::after {
	content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	font-family: var(--jg-mono); font-size: 22px; color: var(--jg-brand-text); transition: transform .15s ease;
}
.jg-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.jg-faq__item p { margin: 0 0 22px; color: var(--jg-body); max-width: 760px; }

/* ---------- Contact ---------- */
#contact > .jg-wrap { display: flex; flex-direction: column; gap: 24px; }
.jg-display { font-size: clamp(36px, 5vw, 64px) !important; letter-spacing: -0.035em !important; line-height: 1.02 !important; }
#contact .jg-wrap > p:not(.jg-eyebrow):not(.jg-form__notice) { max-width: 620px; color: var(--jg-body); }
.jg-mail a {
	font-family: var(--jg-mono); font-size: clamp(20px, 2.6vw, 32px); font-weight: 500;
	color: var(--jg-brand-text); text-decoration: underline; text-decoration-color: var(--jg-accent);
	text-decoration-thickness: 3px; text-underline-offset: 8px; overflow-wrap: anywhere;
}
.jg-mail-alt { font-size: 15px; color: var(--jg-muted) !important; }

/* Formulaire */
.jg-form { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.jg-form p { margin: 0; }
.jg-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .jg-form__row { grid-template-columns: minmax(0, 1fr); } }
.jg-form__field { display: flex; flex-direction: column; gap: 6px; }
.jg-form label { font-size: 14px; font-weight: 600; color: var(--jg-ink); }
.jg-form input, .jg-form textarea {
	font: inherit; font-size: 16px; color: var(--jg-ink); background: var(--jg-surface);
	border: 1px solid var(--jg-line-strong); border-radius: 12px; padding: 12px 14px; width: 100%;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.jg-form textarea { resize: vertical; min-height: 150px; }
.jg-form input:focus-visible, .jg-form textarea:focus-visible {
	outline: none; border-color: var(--jg-brand-text); box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.55);
}
.jg-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jg-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.jg-form__submit {
	font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; touch-action: manipulation;
	background: var(--jg-brand); color: var(--jg-on-brand); border: 0; border-radius: 12px; padding: 14px 22px;
	transition: background-color .15s ease;
}
.jg-form__submit:hover { background: var(--jg-ink); color: var(--jg-bg); }
.jg-form__note { font-size: 14px; color: var(--jg-muted) !important; }
.jg-form__notice { max-width: 720px; border-radius: 12px; padding: 14px 18px; font-weight: 500; }
.jg-form__notice--ok { background: #E6F4EA; color: #14532D !important; }
.jg-form__notice--err { background: #FDECEA; color: #7F1D1D !important; }
.jg-form__notice a { color: inherit; }

.jg-socials { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jg-socials a {
	display: inline-block; color: var(--jg-ink); text-decoration: none; border: 1px solid var(--jg-line-strong);
	border-radius: 10px; padding: 10px 16px; font-size: 15px; transition: border-color .15s ease;
}
.jg-socials a:hover { border-color: var(--jg-brand-text); }

/* ---------- Pied de page ---------- */
.jg-footer { border-top: 1px solid var(--jg-line); }
.jg-footer__in {
	max-width: var(--jg-max); margin: 0 auto; padding: 24px var(--jg-gutter);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--jg-muted);
}
.jg-footer a { color: var(--jg-muted); }
.jg-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- Pages simples (mentions, confidentialité) ---------- */
.jg-prose { max-width: 760px; margin: 0 auto; padding: var(--jg-section) var(--jg-gutter); }
.jg-prose h1 { font-size: clamp(34px, 4.5vw, 52px); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 32px; }
.jg-prose h2 { font-size: 26px; letter-spacing: -0.02em; margin: 40px 0 12px; }
.jg-prose h3 { font-size: 20px; margin: 28px 0 8px; }
.jg-prose p, .jg-prose ul, .jg-prose ol { margin: 0 0 16px; color: var(--jg-body); }