/* Ajouts minimes par-dessus le thème Kards original — uniquement pour les
   éléments qui n'existaient pas dans le template statique d'origine
   (liste à puces des expériences, désormais dynamique). Hérite de la
   typo/couleur ambiante de .timeline-content au lieu de la redéfinir. */

/* Couleurs personnalisables depuis le bo (Apparence > Couleurs) : valeurs
   par défaut = couleurs d'origine du thème. main.css et custom.css ont été
   passés en var(--x, valeur-d-origine) partout où ces couleurs étaient
   codées en dur -> le fallback préserve exactement le rendu actuel tant
   que rien n'est personnalisé. header.php surcharge ces variables avec
   les valeurs enregistrées en base (voir get_site_colors()).
   Palette à 8 rôles plutôt que les ~35 valeurs littérales du thème : les
   couleurs de composants secondaires (alertes, placeholder...) restent
   fixes, seule l'identité visuelle globale est exposée. Certaines valeurs
   d'origine légèrement différentes (#888888/#999/#666, #FFFFFF/#fff...)
   partagent désormais une même variable -> reste identique par défaut
   (chaque occurrence garde son propre fallback), mais converge vers une
   seule teinte si on personnalise ce rôle. */
:root {
	--accent-color: #FF0077;
	--accent-hover-color: #cc005f;
	--dark-color: #313131;
	--bg-color: #151515;
	--bg-light-color: #ebebeb;
	--muted-color: #888888;
	--light-color: #FFFFFF;
	--border-color: #d8d8d8;
}

/* Photo + intro (#about) : le thème d'origine positionne l'image en
   float:left avec un padding-left fixe sur le texte pour compenser —
   fragile (dépend exactement de la largeur de l'image, cassait déjà un
   peu à 768px). Remplacé par flexbox : même taille de photo, même
   typo/couleurs, juste un alignement qui reste correct à toutes les
   tailles. Ce bloc charge après main.css donc prend le dessus sans hack
   de spécificité. */
.intro-info {
	display: flex;
	align-items: flex-start;
	gap: 4rem;
	margin: 4.2rem 0 0;
}
.intro-info img {
	float: none;
	flex-shrink: 0;
	margin-top: 0;
}
.intro-info .lead {
	flex: 1;
	padding-left: 0;
	min-width: 0;
}
@media only screen and (max-width: 768px) {
	.intro-info { gap: 3rem; }
}
@media only screen and (max-width: 600px) {
	.intro-info {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.8rem;
	}
	.intro-info .lead { text-align: center; }
}

/* Bloc "Profile" (#about) : même typo que le thème (labels gras
   majuscules, valeurs grises en dessous — voir .about-content .info-list
   dans main.css), juste en grille 2 colonnes au lieu d'une liste empilée
   verticalement, pour rester scannable d'un coup d'œil plutôt qu'en
   défilement. Empilé sur mobile comme avant. */
.about-content .info-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 3rem;
}
@media only screen and (max-width: 600px) {
	.about-content .info-list { grid-template-columns: 1fr; }
}
.about-content .info-list li.info-job {
	grid-column: 1 / -1;
	text-align: center;
}

/* Skills (#skill) : d'abord des barres de % (peu crédible en
   auto-évaluation), puis des tags/boîtes (jugés trop chargés) -> reparti
   sur une liste typographique sobre. #skill n'a pas de fond propre (voir
   main.css, background commenté) -> hérite du fond sombre du body
   (var(--bg-color, #151515), cf. .section-intro h1/p déjà en blanc pour ce même section) ;
   contrairement à #about qui est sur fond blanc, donc PAS le même
   traitement gris foncé que .about-content .info-list malgré la
   ressemblance de mise en page. Les compétences restent triées par niveau
   décroissant côté requête, sans afficher de chiffre. */
/* Grille en colonnes flottées à hauteur fixe (.row/.col-four du thème) ->
   avec des catégories dont le contenu varie beaucoup (certaines n'ont
   qu'une poignée de skills à plat, d'autres 3-4 sous-catégories), les
   cartes de hauteurs très inégales cassaient l'alignement en escalier.
   Remplacé par des colonnes façon "masonry" (column-count) : chaque carte
   s'empile dans la colonne la plus courte au lieu d'un quadrillage rigide
   -> reste net quel que soit le nombre de sous-catégories. */
.skill-groups {
	width: 94%;
	max-width: 1140px;
	margin: 2rem auto 0;
	column-count: 3;
	column-gap: 4rem;
}
.skill-group {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 2.8rem;
}
@media only screen and (max-width: 900px) {
	.skill-groups { column-count: 2; }
}
@media only screen and (max-width: 600px) {
	.skill-groups { column-count: 1; }
}
.skill-group h5 {
	font-family: "poppins-bold", sans-serif;
	color: var(--light-color, #FFFFFF);
	text-transform: uppercase;
	letter-spacing: .2rem;
	font-size: 1.5rem;
	margin-bottom: .8rem;
}
.skill-list {
	font-family: "poppins-regular", sans-serif;
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.5rem;
	line-height: 1.7;
	margin: 0 0 .8rem;
}
.skill-list:last-child {
	margin-bottom: 0;
}
/* Sous-catégorie (skills.subcategory) : légère indentation + liseré
   magenta pour bien la rattacher visuellement à sa catégorie parente sans
   se confondre avec elle (h5) ni avec une liste de skills à plat, et un
   espacement plus marqué entre sous-groupes successifs qu'entre catégorie
   et sa première liste. */
.skill-subgroup {
	padding-left: 1rem;
	border-left: 2px solid rgba(255, 255, 255, 0.2);
	margin-top: 1.4rem;
}
.skill-subcategory {
	font-family: "poppins-bold", sans-serif;
	color: var(--accent-color, #FF0077);
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: .1rem;
	margin: 0 0 .4rem;
}

/* Changelog (#resume) : Experience + Education (côté "pro", droite) et
   life_events (voyages/loisirs/certifs, côté "perso", gauche) fusionnées
   en une seule chronologie (build_career_timeline()) sur une ligne
   centrale unique — mécanique reprise de fourel.eu/css/timeline.css
   (ligne + icône ronde centrées, boîtes à 45% flottées gauche/droite avec
   flèche de connexion), adaptée à la palette du site (var(--dark-color, #313131) / var(--accent-color, #FF0077))
   à la place du bleu d'origine. Classes propres (changelog-*), aucun
   conflit avec les anciennes .timeline-wrap/.timeline-header du thème
   (main.css, #resume) qui ne sont plus utilisées par ce markup. */
/* Filtres + recherche du Changelog : sobres, dans la même palette que le
   reste (accent au survol/actif), pour rester discrets au-dessus d'une
   section déjà dense. */
#changelog-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	margin-top: 3rem;
	padding: 0 1rem;
}
.changelog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
}
.changelog-filter {
	background: none;
	border: 2px solid var(--border-color, #d8d8d8);
	border-radius: 3px;
	padding: .6rem 1.4rem;
	font-family: "poppins-bold", sans-serif;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: .05rem;
	color: var(--dark-color, #313131);
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}
.changelog-filter:hover {
	border-color: var(--accent-color, #FF0077);
	color: var(--accent-color, #FF0077);
}
.changelog-filter.active {
	background: var(--dark-color, #313131);
	border-color: var(--dark-color, #313131);
	color: var(--light-color, #FFFFFF);
}
.changelog-search {
	border: 2px solid var(--border-color, #d8d8d8);
	border-radius: 3px;
	padding: .8rem 1.4rem;
	font-size: 1.4rem;
	min-width: 260px;
	flex: 1;
	max-width: 360px;
	background: var(--light-color, #FFFFFF);
	color: var(--dark-color, #313131);
}
.changelog-search:focus {
	outline: none;
	border-color: var(--accent-color, #FF0077);
}
.changelog-empty {
	text-align: center;
	color: var(--muted-color, #888888);
	margin-top: 3rem;
}
#changelog-more {
	display: block;
	margin: 1rem auto 0;
}
@media only screen and (max-width: 600px) {
	#changelog-controls {
		flex-direction: column;
		align-items: stretch;
	}
	.changelog-search {
		max-width: none;
	}
}

#changelog-timeline {
	position: relative;
	margin-top: 3rem;
	padding: 0 1rem;
}
.changelog-item.is-hidden {
	display: none;
}
#changelog-timeline::before {
	content: "";
	width: 3px;
	height: 100%;
	background: var(--dark-color, #313131);
	left: 50%;
	top: 0;
	position: absolute;
}
.changelog-item {
	position: relative;
	margin-bottom: 3.6rem;
}
.changelog-item::before, .changelog-item::after {
	content: "";
	display: block;
	width: 100%;
	clear: both;
}
.changelog-ico {
	background: var(--dark-color, #313131);
	color: var(--light-color, #FFFFFF);
	width: 4.6rem;
	height: 4.6rem;
	line-height: 4.6rem;
	text-align: center;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -2.3rem;
	border-radius: 50%;
	z-index: 2;
}
.changelog-box {
	width: 44%;
	background: var(--light-color, #FFFFFF);
	padding: 2rem;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	position: relative;
}
/* Education : plus rien sous le ruban depuis que l'école a rejoint le
   titre dans le ruban -> sans ça il reste une bande blanche vide en bas
   de la boîte (le padding-bottom de .changelog-box, jamais compensé faute
   de .changelog-details pour Education). */
.changelog-box--ribbon-only {
	padding-bottom: 0;
}
.changelog-box--ribbon-only .changelog-ribbon {
	border-radius: 5px;
}
.changelog-box.side-right {
	float: right;
}
.changelog-box::before {
	content: "";
	position: absolute;
	top: 2rem;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}
.changelog-box.side-left::before {
	right: -7px;
	border-left: 7px solid var(--dark-color, #313131);
}
.changelog-box.side-right::before {
	left: -7px;
	border-right: 7px solid var(--dark-color, #313131);
}
.changelog-ribbon {
	background: var(--dark-color, #313131);
	color: var(--light-color, #FFFFFF);
	margin: -2rem -2rem 0;
	padding: 1.4rem 2rem;
	border-radius: 5px 5px 0 0;
}
.changelog-ribbon h4 {
	color: var(--light-color, #FFFFFF);
	font-size: 1.7rem;
	margin: .2rem 0;
}
/* Expérience : plus de petite étiquette "Expérience" séparée -> c'est le
   titre du poste lui-même qui porte l'accent rose, avec l'entreprise
   juste en dessous (plus petit, blanc) à l'intérieur du même ruban. */
.changelog-ribbon .changelog-job-title {
	color: var(--accent-color, #FF0077);
}
.changelog-company {
	font-family: "poppins-regular", sans-serif;
	color: var(--light-color, #FFFFFF);
	font-size: 1.3rem;
	margin: 0 0 .4rem;
}
.changelog-dates {
	font-family: "poppins-regular", sans-serif;
	color: var(--muted-color, #cccccc);
	font-size: 1.3rem;
	margin: 0;
}
.changelog-details {
	padding-top: 1.5rem;
}
.changelog-details p {
	color: var(--muted-color, #666);
	font-size: 1.5rem;
}
@media only screen and (max-width: 768px) {
	#changelog-timeline {
		padding: 0;
	}
	#changelog-timeline::before {
		left: 2.3rem;
	}
	.changelog-ico {
		left: 2.3rem;
	}
	.changelog-box {
		width: 100%;
		float: none !important;
		padding-left: 6rem;
	}
	.changelog-box::before {
		display: none;
	}
	.changelog-ribbon {
		margin-left: -6rem;
		padding-left: 6rem;
	}
}

/* Skills taguées par poste (#resume), sous la liste d'achievements —
   même traitement discret que .skill-list (#skill) : label gras, valeur
   en gris, pas de boîte/tag. */
/* Stack groupée par catégorie (#resume), triée du plus technique au
   moins technique via skill_group.order_group (voir get_experience_skills()) ;
   une ligne compacte par catégorie plutôt qu'un seul gros bloc de texte à
   plat, pour rester lisible sans occuper trop de place dans une carte
   déjà dense. */
.timeline-skills {
	margin-top: 1.2rem;
	font-size: 1.4rem;
}
.timeline-skills-label {
	display: block;
	font-family: "poppins-bold", sans-serif;
	color: var(--dark-color, #313131);
	text-transform: uppercase;
	letter-spacing: .1rem;
	font-size: 1.1rem;
	margin-bottom: .4rem;
}
.timeline-skills-group {
	color: var(--muted-color, #888888);
	line-height: 1.5;
	margin: 0 0 .2rem;
}
.timeline-skills-group:last-child {
	margin-bottom: 0;
}
.timeline-skills-group span {
	color: var(--dark-color, #313131);
	font-weight: 600;
}

/* .timeline-bullets vit désormais dans .changelog-details (plus dans
   .timeline-content, disparu avec la refonte Changelog) -> règle
   recadrée en conséquence, sinon plus aucun style ne s'applique. */
.timeline-bullets {
	margin: 10px 0 0;
	padding-left: 18px;
	list-style: disc;
	color: var(--muted-color, #666);
	font-size: 1.5rem;
	line-height: inherit;
}
.timeline-bullets li {
	margin-bottom: 4px;
}
/* Catégorie d'achievements (admin > Experience) : <li class="achv-group">
   contenant son propre <h5> + <ul> imbriqué -> pas de puce sur la
   catégorie elle-même (le <h5> suffit), tâches en liste à puces classique
   en dessous. */
.timeline-bullets li.achv-group {
	list-style: none;
	margin: 12px 0 4px -18px;
}
.timeline-bullets li.achv-group:first-child {
	margin-top: 0;
}
.timeline-bullets li.achv-group h5 {
	font-family: "poppins-bold", sans-serif;
	color: var(--dark-color, #313131);
	font-size: 1.4rem;
	margin-bottom: 4px;
}
.timeline-bullets li.achv-group ul {
	margin: 0;
	padding-left: 18px;
	list-style: disc;
}
.timeline-bullets li.achv-group ul li {
	margin-bottom: 4px;
}

/* Page article (article.php) — le template Kards original n'a pas de
   page de détail dédiée, on réutilise sa typo/rythme (.section-intro)
   et on ajoute juste le nécessaire. */
#article { padding-top: 160px; padding-bottom: 80px; }
#article .article-back {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
#article .article-meta { color: var(--muted-color, #999); margin-top: -10px; }
#article .article-cover {
	width: 100%;
	border-radius: 4px;
	margin-bottom: 30px;
}
#article .article-body {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.8em;
	color: var(--muted-color, #666);
}

/* Modal détail projet (#portfolio), ouvert via Magnific Popup (déjà chargé
   par le thème -> voir main.js, .item-wrap a). showCloseBtn:false côté JS,
   donc fermeture via notre propre bouton .popup-modal-dismiss (le handler
   de clic existe déjà lui aussi dans main.js). */
.project-modal {
	position: relative;
	max-width: 720px;
	margin: 40px auto;
	padding: 3.6rem;
	background: var(--light-color, #FFFFFF);
	border-radius: 6px;
	text-align: left;
}
.project-modal-close {
	position: absolute;
	top: 1.6rem;
	right: 2rem;
	font-size: 2.4rem;
	line-height: 1;
	color: var(--muted-color, #999);
}
.project-modal-close:hover {
	color: var(--accent-color, #FF0077);
}
.project-modal-category {
	display: inline-block;
	font-family: "poppins-bold", sans-serif;
	text-transform: uppercase;
	letter-spacing: .15rem;
	font-size: 1.1rem;
	color: var(--accent-color, #FF0077);
	margin-bottom: .6rem;
}
.project-modal h2 {
	margin-bottom: .4rem;
}
.project-modal-meta {
	color: var(--muted-color, #999);
	font-size: 1.4rem;
	margin-bottom: 2rem;
}
.project-modal-meta a {
	color: var(--accent-color, #FF0077);
}
.project-modal-cover {
	width: 100%;
	border-radius: 4px;
	margin-bottom: 2rem;
}
@media only screen and (max-width: 600px) {
	.project-modal {
		margin: 15px auto;
		padding: 2.4rem 1.8rem;
	}
}

/* Rendu Markdown (project.content, article.content) -> même typo/rythme
   que #article .article-body, avec les éléments propres au Markdown
   (titres, code, citations) habillés dans le même esprit sobre. */
.markdown-rendered {
	font-size: 1.6rem;
	line-height: 1.8em;
	color: var(--muted-color, #666);
}
.markdown-rendered h1, .markdown-rendered h2, .markdown-rendered h3,
.markdown-rendered h4, .markdown-rendered h5, .markdown-rendered h6 {
	color: var(--dark-color, #313131);
	margin: 2.4rem 0 1rem;
}
.markdown-rendered p { margin: 0 0 1.6rem; }
.markdown-rendered ul, .markdown-rendered ol { margin: 0 0 1.6rem; padding-left: 2rem; }
.markdown-rendered li { margin-bottom: .4rem; }
.markdown-rendered a { color: var(--accent-color, #FF0077); }
.markdown-rendered code {
	background: #f2f2f2;
	padding: .2em .4em;
	border-radius: 3px;
	font-size: .9em;
}
.markdown-rendered pre {
	background: #1e1e1e;
	color: #eee;
	padding: 1.6rem;
	border-radius: 4px;
	overflow-x: auto;
	margin: 0 0 1.6rem;
}
.markdown-rendered pre code {
	background: none;
	padding: 0;
	color: inherit;
}
.markdown-rendered blockquote {
	border-left: 3px solid var(--accent-color, #FF0077);
	margin: 0 0 1.6rem;
	padding-left: 1.6rem;
	color: var(--muted-color, #888);
}
.markdown-rendered img { max-width: 100%; border-radius: 4px; }

/* Logo texte "FC" (header .top-bar) : le thème d'origine attend un logo
   image via .logo (float + dimensions fixes) ; remplacé ici par du texte
   sans la classe correspondante, donc sans aucun positionnement -> un
   <h1> nu hérite des marges/tailles génériques du thème et n'est pas
   aligné avec le rond du menu-toggle (40px de haut, margin-top:13px dans
   les 66px du bandeau). Même boîte que le menu-toggle pour un centrage
   vertical identique. */
.top-bar .brand {
	float: left;
	height: 40px;
	line-height: 40px;
	margin: 13px 0 0 12px;
}
.top-bar .brand h1 {
	margin: 0;
	line-height: inherit;
}
.top-bar .brand h1 a {
	color: var(--light-color, #FFFFFF);
	font-weight: bold;
}

/* Sélecteur de profil CV (?profile=...) — pas de composant équivalent
   dans le template Kards d'origine. */
.cv-profile-select {
	position: fixed;
	top: 18px;
	right: 20px;
	z-index: 601;
	background: rgba(255, 255, 255, 0.08);
	color: var(--light-color, #fff);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 3px;
	padding: 6px 10px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.cv-profile-select option {
	color: #333;
}

/* Photo de fond personnalisée (bo > Profile > hero_photo) : le "contain"
   testé ici affichait la photo entière mais, vérifié avec Playwright,
   devenait un mince filet quasi invisible sur mobile (bandeau étroit/haut,
   ratio très différent d'une photo large) -> revenu à "cover" comme le
   thème d'origine, qui reste correct sur desktop ET mobile pour une photo
   cadrée normalement. position "center center" (thème d'origine : "center
   bottom") pour mieux cadrer un sujet ni positionné en haut ni en bas. */
#intro.has-hero-photo {
	background-size: cover;
	background-position: center center;
	/* main.css met #intro en "height:100%" (se comporte comme 100vh, suit
	   la hauteur de la fenetre) + min-height:720px comme simple plancher.
	   Sur une fenetre desktop haute (non maximisee, ecran non-16:9...), le
	   bandeau devient bien plus haut que large par rapport a la photo (16:9
	   fixe) -> "cover" rogne alors ENORMEMENT la largeur pour compenser,
	   zoom horizontal severe meme si le zoom vertical/mobile est correct
	   (confirme : correct sur mobile, "ultra zoome" sur desktop). Hauteur
	   figee a min-height (720/660/600px selon les breakpoints de main.css)
	   plutot que de suivre la fenetre -> le bandeau ne s'agrandit jamais,
	   mais ne se resserre plus jamais non plus au point de rogner la
	   photo au-dela du raisonnable. */
	height: auto;
}
/* .intro-overlay (main.css) est un scrim noir a 85% d'opacite, regle pour
   la photo sombre livree avec le theme -> sur une photo perso (souvent
   plus claire), a 85% elle devenait quasi invisible ("disparue"). On
   l'allege nettement pour une photo perso, et on compense par une ombre
   portee sur le texte pour rester lisible quel que soit le contenu/la
   luminosite de la photo. */
#intro.has-hero-photo .intro-overlay {
	opacity: .45;
}
#intro.has-hero-photo .intro-content h5,
#intro.has-hero-photo .intro-content h1,
#intro.has-hero-photo .intro-position {
	text-shadow: 0 2px 16px rgba(0, 0, 0, .9), 0 1px 4px rgba(0, 0, 0, .9);
}
/* main.css met #intro en "background-attachment: fixed" (effet parallax
   au scroll). Bug connu de Safari/WebKit (iOS ET iPadOS, y compris iPad
   Pro en paysage a 1024-1366px de large -> largement au-dessus d'un seuil
   "mobile" classique type max-width:768px) : avec "fixed", il cadre le
   fond par rapport a la hauteur totale de la PAGE au lieu de l'ecran
   visible, ce qui zoome enormement l'image tout en la laissant visible.
   Plutot que de deviner tous les seuils de largeur des tablettes, on
   desactive simplement l'effet parallax des qu'une photo perso est
   active, sur tous les ecrans -> aucun risque de retomber sur ce bug
   WebKit, quelle que soit la taille de l'appareil. Le theme garde son
   parallax d'origine sur le fond par defaut (images/intro-bg.jpg, testee
   avec ce comportement par l'auteur du theme). */
#intro.has-hero-photo {
	background-attachment: scroll;
}
/* Reste en haut à droite sur mobile aussi : #go-top (bouton retour en
   haut du template Kards) occupe tout le coin bas-droit sur cette
   largeur (~96x106px, bottom:0/right:0) -> un positionnement en bas
   aurait chevauché ce bouton existant. */