/*
 * Atelier — feuille principale.
 * Les couleurs, polices et espacements viennent de theme.json
 * (variables --wp--preset--*). Aucune valeur codée en dur ici.
 */

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.5em;
}

a { color: var(--wp--preset--color--bleu-profond); }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Utilitaires ---------- */
.section__inner,
.masthead__inner,
.hero__inner,
.site-footer__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 75rem);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.section { padding-block: var(--wp--preset--spacing--60); }
.section__title { font-size: var(--wp--preset--font-size--x-large); margin-bottom: var(--wp--preset--spacing--40); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 0; top: -3rem;
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--blanc);
	padding: 0.75rem 1.25rem; z-index: 100;
	transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* Focus clavier visible partout. */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--bleu-profond);
	outline-offset: 2px;
}

/* ---------- En-tête / navigation ---------- */
.masthead { position: relative; z-index: 20; }
.masthead__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding-block: 1.25rem;
}
.site-title { margin: 0; font-size: 1.25rem; }
.site-title a { color: inherit; text-decoration: none; }

.primary-nav { display: flex; align-items: center; }
.primary-nav__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: 1.75rem; align-items: center;
}
.primary-nav__list a { text-decoration: none; color: inherit; font-weight: 500; }
.primary-nav__list a:hover { text-decoration: underline; }

.primary-nav__toggle {
	display: none; width: 44px; height: 44px;
	background: none; border: 0; cursor: pointer; padding: 0;
	position: relative;
}
.primary-nav__burger,
.primary-nav__burger::before,
.primary-nav__burger::after {
	content: ""; position: absolute; left: 10px; right: 10px; height: 2px;
	background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease;
}
.primary-nav__burger { top: 21px; }
.primary-nav__burger::before { top: -7px; }
.primary-nav__burger::after { top: 7px; }

/* Page d'accueil : en-tête transparent posé sur le hero bleu. */
.home .masthead { position: absolute; inset-inline: 0; top: 0; color: var(--wp--preset--color--blanc); }
.home .primary-nav__list a { color: var(--wp--preset--color--blanc); }

/* ---------- Hero ---------- */
.hero {
	background: var(--wp--preset--color--bleu-canvas);
	color: var(--wp--preset--color--blanc);
	padding-block: clamp(7rem, 12vw, 10rem) var(--wp--preset--spacing--70);
	overflow: hidden;
}
.hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}
.hero__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--lavande);
	letter-spacing: 0.04em; margin: 0 0 1rem;
}
.hero__title {
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--preset--color--blanc);
	margin: 0 0 1rem; max-width: 14ch;
}
.hero__subtitle {
	font-size: var(--wp--preset--font-size--large);
	max-width: 42ch; margin: 0 0 2rem; color: #EEF1FF;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }

/* ---------- Scène 3D (mount réservé + poster) ---------- */
.hero__scene { position: relative; }
.scene {
	position: relative;
	aspect-ratio: 6 / 5;
	border-radius: 24px;
	overflow: hidden;
	background: var(--wp--preset--color--bleu-profond);
}
.scene__poster { width: 100%; height: 100%; object-fit: cover; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Calques de parallaxe : wrapper (parallaxe) > image (flottement au repos) */
.scene__layers {
	position: absolute; inset: 0;
	transform: scale(1.07); /* overscan : masque les bords lors des translations */
}
.scene__depth { position: absolute; inset: 0; will-change: transform; }
.scene__layer {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: contain; object-position: center;
}
.scene__layer--cover { object-fit: cover; }
/* Flottement au repos — phases décalées pour un ensemble vivant */
@keyframes atelier-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
/* Fond : dérive + légère respiration (hexagones) */
@keyframes atelier-drift {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-13px) scale(1.018); }
}
.scene__layer--float1 { animation: atelier-drift 9s ease-in-out infinite; }
.scene__layer--float2 { animation: atelier-float 5.6s ease-in-out 0.8s infinite; }
.scene__layer--float3 { animation: atelier-float 6.8s ease-in-out 1.6s infinite; }

/* Entrée animée à la prise en main du moteur (sur le groupe, sans conflit
   avec la parallaxe des wrappers ni le flottement des images) */
@keyframes atelier-scene-in {
	from { opacity: 0; transform: scale(1.13); }
	to   { opacity: 1; transform: scale(1.07); }
}
.scene--live .scene__layers { animation: atelier-scene-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* Quand le moteur prend la main, il ajoute .scene--live pour masquer le poster. */
.scene--live .scene__poster { opacity: 0; transition: opacity 0.5s ease; }

/* ---------- Boutons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600; font-size: 1rem; line-height: 1;
	padding: 0.85rem 1.75rem; border-radius: 40px;
	text-decoration: none; cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
	border: 1.5px solid transparent;
}
.btn:active { transform: scale(0.98); }
.btn--solid {
	background: var(--wp--preset--color--rose);
	color: #2A0A18;
}
.btn--solid:hover { background: var(--wp--preset--color--orange); color: #2A1602; }
.btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--blanc);
	border-color: rgba(255, 255, 255, 0.7);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* Hors hero (surface claire), le bouton fantôme s'adapte. */
.site-main:not(.home) .btn--ghost,
.error-404 .btn--ghost { color: var(--wp--preset--color--encre); border-color: var(--wp--preset--color--graphite); }

/* ---------- Réseaux ---------- */
.social { margin-top: 1.75rem; }
.social__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
}
.social__link {
	display: inline-block; text-decoration: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem; letter-spacing: 0.02em;
	padding: 0.4rem 0.9rem; border-radius: 40px;
	background: rgba(20, 22, 28, 0.06); color: var(--wp--preset--color--bleu-profond);
}
.social__link:hover { background: rgba(74, 100, 219, 0.12); }
/* Contexte foncé (hero, pied de page) */
.hero .social__link,
.site-footer .social__link { background: rgba(255, 255, 255, 0.14); color: #fff; }
.hero .social__link:hover,
.site-footer .social__link:hover { background: rgba(255, 255, 255, 0.26); }

/* ---------- Cartes ---------- */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--40);
}
.card {
	background: var(--wp--preset--color--blanc);
	border-radius: 16px; overflow: hidden;
	border: 1px solid rgba(20, 22, 28, 0.08);
	display: flex; flex-direction: column;
}
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { padding: 1.25rem 1.5rem 1.5rem; }
.card__title { font-size: var(--wp--preset--font-size--large); margin: 0.25rem 0 0.5rem; }
.card__title a { color: var(--wp--preset--color--encre); text-decoration: none; }
.card__title a:hover { color: var(--wp--preset--color--bleu-profond); }
.card__excerpt { color: var(--wp--preset--color--graphite); margin: 0; }
.entry__meta { font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; color: var(--wp--preset--color--graphite); margin: 0; }

/* ---------- Contenu ---------- */
.entry--single .entry__header,
.entry--page .entry__header { padding-top: var(--wp--preset--spacing--60); }
.entry__title { font-size: var(--wp--preset--font-size--xx-large); }
.entry__media { margin: var(--wp--preset--spacing--40) auto; max-width: var(--wp--style--global--wide-size); }
.entry__media img { width: 100%; border-radius: 16px; }
.entry__content { padding-bottom: var(--wp--preset--spacing--60); }
.entry__content > * { margin-block: 1.25rem; }
.entry__content blockquote {
	font-family: var(--wp--preset--font-family--editorial);
	font-style: italic; font-size: var(--wp--preset--font-size--large);
	border-inline-start: 3px solid var(--wp--preset--color--rose);
	padding-inline-start: 1.25rem; margin-inline: 0;
}
.entry__content code, .entry__content pre { font-family: var(--wp--preset--font-family--mono); }
.entry__content pre { background: var(--wp--preset--color--encre); color: #EDEDED; padding: 1.25rem; border-radius: 12px; overflow-x: auto; }

/* ---------- En-têtes de listes ---------- */
.page-header { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); }
.page-header__title { font-size: var(--wp--preset--font-size--x-large); }
.empty-state { padding-block: var(--wp--preset--spacing--60); }

/* ---------- Pagination ---------- */
.pagination { padding-block: var(--wp--preset--spacing--50); }
.pagination .page-numbers {
	display: inline-flex; min-width: 2.5rem; height: 2.5rem;
	align-items: center; justify-content: center; padding: 0 0.5rem;
	border-radius: 8px; text-decoration: none; color: var(--wp--preset--color--encre);
}
.pagination .page-numbers.current { background: var(--wp--preset--color--bleu-canvas); color: var(--wp--preset--color--blanc); }

/* ---------- 404 ---------- */
.error-404 { text-align: center; padding-block: var(--wp--preset--spacing--70); }
.error-404__code {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(4rem, 18vw, 9rem); font-weight: 700;
	color: var(--wp--preset--color--bleu-canvas); margin: 0; line-height: 1;
}

/* ---------- Pied de page ---------- */
.site-footer {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--creme);
	padding-block: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--60);
}
.site-footer a { color: var(--wp--preset--color--creme); }
.site-footer__bottom {
	display: flex; flex-wrap: wrap; gap: 1rem;
	align-items: center; justify-content: space-between;
	margin-top: var(--wp--preset--spacing--40);
}
.site-footer__copy { margin: 0; font-size: 0.9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__scene { order: -1; }

	.primary-nav__toggle { display: block; }
	.primary-nav__list {
		position: absolute; inset-inline: 0; top: 100%;
		flex-direction: column; gap: 0; align-items: stretch;
		background: var(--wp--preset--color--blanc);
		color: var(--wp--preset--color--encre);
		padding: 0.5rem 0; border-radius: 0 0 16px 16px;
		box-shadow: 0 12px 32px rgba(20, 22, 28, 0.12);
		display: none;
	}
	.primary-nav__list a { padding: 0.85rem var(--wp--preset--spacing--40); }
	.home .primary-nav__list a { color: var(--wp--preset--color--encre); }
	.primary-nav[data-open="true"] .primary-nav__list { display: flex; }
	.primary-nav { position: static; }
	.masthead__inner { position: relative; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ============================================================
   Phase 2 — Pages Parcours / Contact & sections d'accueil
   ============================================================ */

/* Alternance de fonds de section */
.section--alt { background: var(--wp--preset--color--blanc); }

/* En-tête de page (Parcours, Contact) */
.page-hero { padding-block: clamp(3rem, 7vw, 5rem) var(--wp--preset--spacing--40); }
.page-hero__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--bleu-profond);
	letter-spacing: 0.04em; margin: 0 0 0.75rem;
}
.page-hero__title { font-size: var(--wp--preset--font-size--xx-large); margin: 0 0 1rem; }
.page-hero__intro { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--graphite); max-width: 52ch; }

/* Grille en deux colonnes pour certaines sections */
.section__inner--split {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--60);
}

/* --- Compétences --- */
.skills {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--30);
}
.skill {
	background: var(--wp--preset--color--surface);
	border-radius: 14px; padding: 1.1rem 1.25rem;
	border-top: 4px solid var(--wp--preset--color--bleu-canvas);
	box-shadow: 0 1px 2px rgba(20,22,28,0.05);
}
.skill--rose    { border-top-color: var(--wp--preset--color--rose); }
.skill--orange  { border-top-color: var(--wp--preset--color--orange); }
.skill--vert    { border-top-color: var(--wp--preset--color--vert); }
.skill--lavande { border-top-color: var(--wp--preset--color--lavande); }
.skill__label {
	display: block; font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem; letter-spacing: 0.03em; color: var(--wp--preset--color--bleu-profond);
	margin-bottom: 0.35rem;
}
.skill__items { color: var(--wp--preset--color--encre); font-size: 0.95rem; }
.skills--teaser { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* --- Frise du parcours --- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
	display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem;
	padding-bottom: var(--wp--preset--spacing--40);
}
.timeline__period {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem; color: var(--wp--preset--color--bleu-profond); margin: 0.2rem 0 0;
}
.timeline__body {
	border-left: 2px solid rgba(58,77,216,0.18);
	padding-left: 1.25rem; position: relative;
}
.timeline__body::before {
	content: ""; position: absolute; left: -6px; top: 0.45rem;
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--wp--preset--color--bleu-canvas);
}
.timeline__role { font-size: var(--wp--preset--font-size--large); margin: 0 0 0.15rem; }
.timeline__company { font-weight: 600; color: var(--wp--preset--color--bleu-profond); margin: 0 0 0.15rem; }
.timeline__place { color: var(--wp--preset--color--graphite); font-weight: 400; }
.timeline__stack {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem; color: var(--wp--preset--color--lavande); margin: 0 0 0.6rem;
}
.timeline__list { margin: 0; padding-left: 1.1rem; color: var(--wp--preset--color--graphite); }
.timeline__list li { margin-bottom: 0.35rem; }

/* --- Projets --- */
.projects {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--wp--preset--spacing--40);
}
.project {
	background: var(--wp--preset--color--blanc); border-radius: 16px;
	padding: 1.5rem; border: 1px solid rgba(20,22,28,0.08);
	border-left: 5px solid var(--wp--preset--color--bleu-canvas);
}
.project--rose    { border-left-color: var(--wp--preset--color--rose); }
.project--orange  { border-left-color: var(--wp--preset--color--orange); }
.project--vert    { border-left-color: var(--wp--preset--color--vert); }
.project--lavande { border-left-color: var(--wp--preset--color--lavande); }
.project__name { font-size: var(--wp--preset--font-size--large); margin: 0 0 0.4rem; }
.project__desc { color: var(--wp--preset--color--graphite); margin: 0; }
.section__more { margin-top: var(--wp--preset--spacing--40); }

/* --- Formation / Certifications --- */
.edu, .certs { list-style: none; margin: 0; padding: 0; }
.edu__item { padding-bottom: 1rem; }
.edu__degree { font-weight: 600; margin: 0 0 0.15rem; }
.edu__meta { color: var(--wp--preset--color--graphite); font-size: 0.9rem; margin: 0; }
.certs__item {
	position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem;
	color: var(--wp--preset--color--graphite);
}
.certs__item::before {
	content: ""; position: absolute; left: 0; top: 0.5rem;
	width: 8px; height: 8px; border-radius: 2px;
	background: var(--wp--preset--color--orange);
}

/* --- Coordonnées --- */
.contact-info { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.contact-info li { display: flex; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(20,22,28,0.08); }
.contact-info__k {
	font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem;
	color: var(--wp--preset--color--graphite); min-width: 6.5rem; padding-top: 0.1rem;
}
.contact-info a { color: var(--wp--preset--color--bleu-profond); text-decoration: none; }
.contact-info a:hover { text-decoration: underline; }

/* --- Formulaire de contact --- */
.contact-form .field { margin-bottom: 1.1rem; }
.contact-form label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.contact-form input,
.contact-form textarea {
	width: 100%; padding: 0.75rem 0.9rem; border-radius: 10px;
	border: 1.5px solid rgba(20,22,28,0.18); background: var(--wp--preset--color--blanc);
	font-family: inherit; font-size: 1rem; color: var(--wp--preset--color--encre);
}
.contact-form input:focus,
.contact-form textarea:focus {
	outline: none; border-color: var(--wp--preset--color--bleu-canvas);
	box-shadow: 0 0 0 3px rgba(74,100,219,0.18);
}
.contact-form .btn { border: 0; }
.field--hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* Notices de formulaire */
.form-notice { padding: 0.85rem 1rem; border-radius: 10px; margin-bottom: 1.25rem; font-size: 0.95rem; }
.form-notice--ok  { background: rgba(36,197,124,0.14); color: #0b5b34; }
.form-notice--err { background: rgba(234,82,144,0.12); color: #8a1c47; }

/* --- Bande d'appel à l'action --- */
.cta-band { background: var(--wp--preset--color--bleu-canvas); color: var(--wp--preset--color--blanc); }
.cta-band .section__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; flex-wrap: wrap;
}
.cta-band p { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); font-weight: 700; margin: 0; }

/* --- Responsive Phase 2 --- */
@media (max-width: 760px) {
	.section__inner--split { grid-template-columns: 1fr; }
	.timeline__item { grid-template-columns: 1fr; gap: 0.35rem; }
	.timeline__body { border-left: 0; padding-left: 0; }
	.timeline__body::before { display: none; }
	.contact-info li { flex-direction: column; gap: 0.15rem; }
}

/* ============================================================
   Phase 4 — Blog (single / archive / recherche)
   ============================================================ */

.section__inner--narrow { max-width: 46rem; }
.section__inner--split { /* garde-fou si utilisé large */ }

/* Pastilles (catégories / tags) */
.pills { list-style: none; margin: 0 0 0.85rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill, .pills--tags a {
	display: inline-block; text-decoration: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem; letter-spacing: 0.03em;
	padding: 0.3rem 0.75rem; border-radius: 40px;
	background: rgba(74,100,219,0.12); color: var(--wp--preset--color--bleu-profond);
}
.pill--rose    { background: rgba(234,82,144,0.14); color: #8a1c47; }
.pill--orange  { background: rgba(245,166,35,0.18); color: #7a4d05; }
.pill--vert    { background: rgba(36,197,124,0.16); color: #0b5b34; }
.pill--lavande { background: rgba(171,143,221,0.22); color: #4a3a73; }
.pill:hover, .pills--tags a:hover { filter: brightness(0.97); }
.pills--tags { margin-top: 1rem; }

/* Méta d'article */
.post-meta { font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; color: var(--wp--preset--color--graphite); margin: 0.6rem 0 0; }
.post-meta__sep { margin: 0 0.4rem; }

/* Carte à la une */
.card--feature { grid-column: 1 / -1; }
@media (min-width: 720px) {
	.card--feature { display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; }
	.card--feature .card__media { height: 100%; }
	.card--feature .card__media img { height: 100%; aspect-ratio: auto; }
	.card--feature .card__body { padding: 2rem 2.25rem; align-self: center; }
	.card--feature .card__title { font-size: var(--wp--preset--font-size--x-large); }
}

/* En-tête d'article */
.article__header { padding-block: clamp(2.5rem, 6vw, 4rem) 1.25rem; }
.article__title { font-size: var(--wp--preset--font-size--xx-large); margin: 0.25rem 0 0.75rem; }

/* Image à la une large */
.article__media { margin: 0 auto var(--wp--preset--spacing--50); max-width: var(--wp--style--global--wide-size, 75rem); }
.article__media img { width: 100%; border-radius: 18px; }

/* Corps de l'article — typographie éditoriale */
.article__content { font-size: 1.08rem; line-height: 1.78; color: var(--wp--preset--color--encre); }
.article__content > * { margin-block: 1.35rem; }
.article__content h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.5rem; }
.article__content h3 { font-size: var(--wp--preset--font-size--large); margin-top: 2rem; }
.article__content a { color: var(--wp--preset--color--bleu-profond); text-underline-offset: 2px; }
.article__content img, .article__content figure img { border-radius: 14px; }
.article__content figcaption { font-size: 0.85rem; color: var(--wp--preset--color--graphite); text-align: center; margin-top: 0.5rem; }
.article__content blockquote {
	font-family: var(--wp--preset--font-family--editorial); font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	border-inline-start: 3px solid var(--wp--preset--color--rose);
	padding-inline-start: 1.25rem; margin-inline: 0;
}
.article__content ul, .article__content ol { padding-left: 1.4rem; }
.article__content li { margin-block: 0.4rem; }
.article__content pre {
	background: var(--wp--preset--color--encre); color: #EDEDED;
	padding: 1.25rem; border-radius: 12px; overflow-x: auto;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.9rem; line-height: 1.6;
}
.article__content code { font-family: var(--wp--preset--font-family--mono); font-size: 0.9em; }
.article__content :not(pre) > code { background: rgba(74,100,219,0.10); padding: 0.12em 0.4em; border-radius: 6px; }

.article__footer { padding-bottom: var(--wp--preset--spacing--40); }

/* Encadré auteur */
.author-card {
	display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.5rem;
	padding: 1.5rem; background: var(--wp--preset--color--blanc);
	border: 1px solid rgba(20,22,28,0.08); border-radius: 16px;
}
.author-card__avatar { border-radius: 50%; flex-shrink: 0; }
.author-card__k { font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--graphite); margin: 0; }
.author-card__name { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.15rem; margin: 0.1rem 0 0.35rem; }
.author-card__bio { color: var(--wp--preset--color--graphite); margin: 0; }

/* Navigation entre articles */
.post-navigation { margin-block: var(--wp--preset--spacing--50); border-block: 1px solid rgba(20,22,28,0.1); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 1.25rem; }
.post-navigation .nav-next { text-align: right; margin-left: auto; }
.post-navigation a { text-decoration: none; display: inline-flex; flex-direction: column; gap: 0.2rem; }
.post-nav__k { font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; color: var(--wp--preset--color--graphite); }
.post-nav__title { color: var(--wp--preset--color--encre); font-weight: 600; }
.post-navigation a:hover .post-nav__title { color: var(--wp--preset--color--bleu-profond); }

/* Commentaires */
.comments { margin-block: var(--wp--preset--spacing--50); }
.comments__title { font-size: var(--wp--preset--font-size--large); margin-bottom: 1.25rem; }
.comments__list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comments__list .comment { padding: 1.25rem 0; border-bottom: 1px solid rgba(20,22,28,0.08); }
.comments__list .children { list-style: none; margin: 1rem 0 0 1.25rem; padding-left: 1rem; border-left: 2px solid rgba(74,100,219,0.15); }
.comment-author { font-weight: 600; }
.comment-metadata, .comment-metadata a { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; color: var(--wp--preset--color--graphite); text-decoration: none; }
.comment-respond { margin-top: 1.5rem; }
.comment-respond label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3rem; }
.comment-respond input[type="text"], .comment-respond input[type="email"],
.comment-respond input[type="url"], .comment-respond textarea {
	width: 100%; padding: 0.75rem 0.9rem; border-radius: 10px;
	border: 1.5px solid rgba(20,22,28,0.18); background: var(--wp--preset--color--blanc);
	font-family: inherit; font-size: 1rem; color: var(--wp--preset--color--encre);
}
.comment-respond input:focus, .comment-respond textarea:focus {
	outline: none; border-color: var(--wp--preset--color--bleu-canvas);
	box-shadow: 0 0 0 3px rgba(74,100,219,0.18);
}
.comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-url { margin-bottom: 1rem; }

/* ============================================================
   Phase 5 — Contenu géré depuis l'admin & responsive
   ============================================================ */


/* Cartes projet avec image à la une (CPT Réalisations) */
.project { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.project__media { display: block; }
.project__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.project__body { padding: 1.5rem; }
.project__stack {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem; color: var(--wp--preset--color--lavande);
	margin: 0.65rem 0 0;
}
.project__name a { color: inherit; text-decoration: none; }
.project__name a:hover { color: var(--wp--preset--color--bleu-profond); }

/* --- Passe responsive fine --- */
@media (max-width: 600px) {
	.section { padding-block: var(--wp--preset--spacing--50); }
	.masthead__inner { padding-block: 1rem; }
	.hero { padding-block: 5.5rem var(--wp--preset--spacing--50); }
	.hero__actions { width: 100%; }
	.hero__actions .btn { flex: 1 1 auto; justify-content: center; }
	.cta-band .section__inner { flex-direction: column; align-items: flex-start; }
	.section__title { font-size: var(--wp--preset--font-size--large); }
	.projects, .cards, .skills { gap: var(--wp--preset--spacing--30); }
	.author-card { flex-direction: column; }
	.post-navigation .nav-links { flex-direction: column; }
	.post-navigation .nav-next { text-align: left; margin-left: 0; }
}

/* ============================================================
   Phase 6 — Revue responsive
   ============================================================ */

/* Garde-fou : aucune translation ne doit créer de défilement latéral */
html, body { overflow-x: clip; }

/* Tableaux dans le contenu : défilement horizontal propre sur mobile */
.article__content table, .entry__content table {
	display: block; width: 100%; overflow-x: auto;
	border-collapse: collapse;
}
.article__content th, .article__content td,
.entry__content th, .entry__content td {
	border: 1px solid rgba(20,22,28,0.12); padding: 0.6rem 0.8rem; text-align: left;
}

/* Tablette / mobile : hero en colonne, scène contenue */
@media (max-width: 860px) {
	.hero__inner { gap: var(--wp--preset--spacing--40); }
	.hero__scene { max-width: 30rem; width: 100%; margin-inline: auto; }
	.scene { aspect-ratio: 5 / 4; }
}
@media (max-width: 600px) {
	.scene { aspect-ratio: 4 / 3; border-radius: 18px; }
	.hero__title { max-width: none; }
	.timeline__list { padding-left: 1rem; }
	.skills, .skills--teaser { grid-template-columns: 1fr; }
}
/* Très petits écrans */
@media (max-width: 380px) {
	.section__inner, .masthead__inner, .hero__inner, .site-footer__inner { padding-inline: 1rem; }
	.btn { padding-inline: 1.25rem; }
}

/* ============================================================
   Identité visuelle — signe & titre du site
   ============================================================ */

.site-title__link {
	display: inline-flex; align-items: center; gap: 0.7rem;
	text-decoration: none; color: inherit;
}
.site-title__text {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800; font-size: 1.2rem; line-height: 1;
}

/* Signe : hexagone bi-ton + monogramme + chevron d'accent */
.brand-mark { display: block; flex-shrink: 0; }
.brand-mark__face    { fill: var(--wp--preset--color--bleu-canvas); }
.brand-mark__facet   { fill: #6478E0; }
.brand-mark__mono {
	fill: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800; font-size: 24px;
}
.brand-mark__chevron { stroke: var(--wp--preset--color--orange); }

/* Sur fond bleu (accueil) : signe inversé pour rester lisible */
.home .brand-mark__face  { fill: var(--wp--preset--color--blanc); }
.home .brand-mark__facet { fill: #EEF1FF; }
.home .brand-mark__mono  { fill: var(--wp--preset--color--bleu-canvas); }

/* Pied de page (fond encre) : même traitement inversé */
.site-footer .brand-mark__face  { fill: var(--wp--preset--color--blanc); }
.site-footer .brand-mark__facet { fill: #EEF1FF; }
.site-footer .brand-mark__mono  { fill: var(--wp--preset--color--encre); }

@media (max-width: 600px) {
	.site-title__text { font-size: 1.05rem; }
	.brand-mark { width: 34px; height: 34px; }
}

/* Certifications : année et lien de vérification */
.certs__item a { color: var(--wp--preset--color--bleu-profond); text-decoration: none; }
.certs__item a:hover { text-decoration: underline; }
.certs__year {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem; color: var(--wp--preset--color--graphite);
	margin-left: 0.35rem;
}

/* Scène en image unique (rendu 3D) : profondeur et lisibilité */
.scene__layers { transform-style: preserve-3d; }
.scene__depth { backface-visibility: hidden; }
.scene__layer--cover { object-fit: cover; border-radius: inherit; }
/* Ombre interne discrète : ancre l'image dans la page sans l'assombrir */
.scene::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
	pointer-events: none;
}

/* ============================================================
   SEO — fil d'Ariane & page de réalisation
   ============================================================ */
.breadcrumb { padding-top: var(--wp--preset--spacing--40); }
.breadcrumb__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem;
	color: var(--wp--preset--color--graphite);
}
.breadcrumb__item + .breadcrumb__item::before {
	content: "›"; margin-right: 0.4rem; color: var(--wp--preset--color--lavande);
}
.breadcrumb__item a { color: var(--wp--preset--color--bleu-profond); text-decoration: none; }
.breadcrumb__item a:hover { text-decoration: underline; }
.breadcrumb__item [aria-current="page"] { color: var(--wp--preset--color--encre); }

.realisation__stack {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem; color: var(--wp--preset--color--lavande);
	margin-top: 0.75rem;
}
.realisation__stack::before { content: "// stack — "; opacity: 0.7; }

/* ============================================================
   Phase 7 — Attractivité : chiffres, témoignages, étude de cas,
   badge de disponibilité, grain, révélation au scroll
   ============================================================ */

/* --- Badge de disponibilité --- */
.badge {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem; letter-spacing: 0.02em;
	padding: 0.4rem 0.9rem; border-radius: 40px;
	background: rgba(36, 197, 124, 0.16);
	color: #0B5B34;
	margin: 0 0 1rem;
}
.hero .badge { background: rgba(255, 255, 255, 0.16); color: #fff; }
.badge__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--wp--preset--color--vert);
	box-shadow: 0 0 0 0 rgba(36, 197, 124, 0.7);
	animation: atelier-pulse 2.4s ease-out infinite;
}
@keyframes atelier-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(36, 197, 124, 0.65); }
	70%  { box-shadow: 0 0 0 9px rgba(36, 197, 124, 0); }
	100% { box-shadow: 0 0 0 0 rgba(36, 197, 124, 0); }
}

/* --- Grain : voile de bruit très discret (SVG inline, zéro requête) --- */
.has-grain::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
	background-size: 140px 140px;
}
.has-grain > * { position: relative; z-index: 1; }

/* --- Chiffres clés --- */
.section--stats { padding-block: var(--wp--preset--spacing--40); }
.stats {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat {
	display: flex; flex-direction: column; gap: 0.3rem;
	padding: 1.25rem 1.35rem; border-radius: 16px;
	background: var(--wp--preset--color--blanc);
	border: 1px solid rgba(20, 22, 28, 0.07);
	border-top: 3px solid var(--wp--preset--color--bleu-canvas);
}
.stat--rose    { border-top-color: var(--wp--preset--color--rose); }
.stat--orange  { border-top-color: var(--wp--preset--color--orange); }
.stat--vert    { border-top-color: var(--wp--preset--color--vert); }
.stat--lavande { border-top-color: var(--wp--preset--color--lavande); }
.stat__value {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.5rem);
	line-height: 1; color: var(--wp--preset--color--encre);
}
.stat__label {
	font-size: 0.88rem; color: var(--wp--preset--color--graphite);
}

/* --- Témoignages --- */
.quotes {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.quote {
	display: flex; flex-direction: column; gap: 1.15rem;
	padding: 1.75rem; border-radius: 18px;
	background: var(--wp--preset--color--blanc);
	border: 1px solid rgba(20, 22, 28, 0.07);
}
.quote__text {
	margin: 0; border: 0; padding: 0;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 1.05rem; line-height: 1.6; color: var(--wp--preset--color--encre);
}
.quote__text p { margin: 0; }
.quote__text::before {
	content: "\201C"; display: block;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 2.6rem; line-height: 0.6; color: var(--wp--preset--color--rose);
	margin-bottom: 0.45rem;
}
.quote__author { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.quote__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.quote__meta { display: flex; flex-direction: column; }
.quote__name { font-weight: 700; font-size: 0.95rem; }
.quote__name a { color: inherit; text-decoration: none; }
.quote__name a:hover { color: var(--wp--preset--color--bleu-profond); text-decoration: underline; }
.quote__role {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem; color: var(--wp--preset--color--graphite);
}

/* --- Étude de cas --- */
.case-meta {
	display: flex; flex-wrap: wrap; gap: 2rem; margin: 0 0 var(--wp--preset--spacing--40);
	padding-bottom: 1.25rem; border-bottom: 1px solid rgba(20, 22, 28, 0.1);
}
.case-meta__item dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--wp--preset--color--graphite); margin-bottom: 0.25rem;
}
.case-meta__item dd { margin: 0; font-weight: 600; }
.case__block { margin-bottom: var(--wp--preset--spacing--40); }
.case__title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.75rem; padding-left: 0.85rem;
	border-left: 3px solid var(--wp--preset--color--bleu-canvas);
}
.case__block--results .case__title { border-left-color: var(--wp--preset--color--vert); }
.case__results { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.case__results li {
	position: relative; padding-left: 1.75rem;
	color: var(--wp--preset--color--encre);
}
.case__results li::before {
	content: "→"; position: absolute; left: 0;
	color: var(--wp--preset--color--vert); font-weight: 700;
}

/* --- Révélation douce au défilement --- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-visible {
	opacity: 1; transform: none;
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
	.badge__dot { animation: none; }
}

@media (max-width: 600px) {
	.stats { grid-template-columns: repeat(2, 1fr); }
	.case-meta { gap: 1.25rem; }
}

/* ============================================================
   Bandeau défilant — partenaires & technologies
   ============================================================ */

.section--partners {
	padding-block: var(--wp--preset--spacing--40);
	overflow: hidden; /* le rail dépasse volontairement */
}
.partners__title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
	text-align: center; margin: 0 0 1.75rem;
}

/* Rail : deux listes identiques côte à côte, translation de -50 %
   → la boucle est continue, sans saut ni JavaScript. */
.marquee {
	position: relative;
	--marquee-duration: 34s;
	/* Fondu sur les bords : les logos apparaissent et disparaissent en douceur */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
	display: flex; width: max-content;
	animation: atelier-marquee var(--marquee-duration) linear infinite;
	will-change: transform;
}
.marquee__list {
	display: flex; align-items: center;
	list-style: none; margin: 0; padding: 0;
	gap: clamp(2.5rem, 6vw, 4.5rem);
	padding-inline: clamp(1.25rem, 3vw, 2.25rem);
}
.marquee__item { flex: 0 0 auto; display: flex; align-items: center; }
.marquee__item a { display: block; line-height: 0; }

.marquee__logo {
	display: block;
	height: clamp(24px, 3.4vw, 34px);
	width: auto; max-width: 190px;
	object-fit: contain;
	opacity: 0.72;
	transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.marquee--mono .marquee__logo { filter: grayscale(1); }
.marquee__item:hover .marquee__logo {
	opacity: 1; filter: grayscale(0); transform: translateY(-2px);
}

@keyframes atelier-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause au survol et au focus clavier : on peut lire et cliquer un logo */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

/* Accessibilité : aucun mouvement automatique si l'utilisateur le refuse.
   Le rail devient alors une bande défilable manuellement. */
@media (prefers-reduced-motion: reduce) {
	.marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.marquee__track { animation: none; }
	.marquee__list[aria-hidden="true"] { display: none; }
}

@media (max-width: 600px) {
	.marquee__logo { height: 24px; max-width: 140px; }
	.partners__title { margin-bottom: 1.25rem; }
}