/* =====================================================================
   theme-dark.css — Surcouche « thème sombre » (rouge dominant / bleu accent)
   Portfolio BTS SIO option SISR.

   Chargé APRÈS css/styles.css dans chaque page : le fichier Bootstrap
   compilé n'est jamais modifié. Pour revenir au thème clair d'origine,
   il suffit de retirer la ligne <link ... theme-dark.css> des pages HTML.
   ===================================================================== */

:root {
	/* --- Couleurs de marque ------------------------------------------- */
	--rouge: #ff3b3b; /* couleur principale (boutons, liens actifs, titres) */
	--rouge-fonce: #e02d2d; /* survol / état actif */
	--bleu: #3d8bff; /* accent (survols, dégradés, sous-titres) */
	--bleu-clair: #6ba7ff;

	/* --- Fonds & surfaces ------------------------------------------------- */
	--fond: #0a0e15; /* fond de page */
	--surface: #141b26; /* cartes, navbar, pied de page (ex-blanc) */
	--surface-2: #11161f; /* panneaux internes (ex-bg-light) */
	--bordure: #243044;
	--texte: #e6edf3;
	--texte-doux: #9aa7b4; /* ex-.text-muted */

	/* --- Remap des variables Bootstrap --------------------------------- */
	--bs-primary: var(--rouge);
	--bs-primary-rgb: 255, 59, 59;
	--bs-secondary: var(--bleu);
	--bs-secondary-rgb: 61, 139, 255;
	--bs-body-bg: var(--fond);
	--bs-body-bg-rgb: 10, 14, 21;
	--bs-body-color: var(--texte);
	--bs-body-color-rgb: 230, 237, 243;
	--bs-border-color: var(--bordure);
	--bs-border-color-translucent: rgba(255, 255, 255, 0.11);
	--bs-link-color: var(--bleu);
	--bs-link-hover-color: var(--bleu-clair);
	--bs-code-color: var(--bleu);
}

/* ---------------------------------------------------------------------
   Fond de page : photo de baie de brassage + voile sombre.
   Pour changer la photo : remplace le fichier assets/fond-baie.jpg
   (ou modifie l'URL ci-dessous). Pour l'assombrir / l'éclaircir, joue
   sur les opacités du linear-gradient (0 = photo visible, 1 = noir).
   ------------------------------------------------------------------- */
html {
	background-color: var(--fond);
	scroll-padding-top: 5rem; /* décalage pour la navbar collante lors des sauts d'ancre */
}

body {
	color: var(--texte);
	background-color: var(--fond);
	background-image:
		linear-gradient(180deg, rgba(9, 13, 20, 0.82) 0%, rgba(9, 13, 20, 0.9) 45%, rgba(9, 13, 20, 0.95) 100%),
		url("../assets/fond-baie.jpg");
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center, center;
	background-attachment: fixed, fixed; /* mettre "scroll, scroll" si l'affichage saccade sur mobile */
}

/* --- Typographie / titres ----------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	color: var(--texte);
}

.text-muted {
	color: var(--texte-doux) !important;
}
.text-dark {
	color: var(--texte) !important;
}
.lead {
	color: var(--texte-doux);
}

a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

::selection {
	background: rgba(255, 59, 59, 0.35);
	color: #fff;
}

/* --- Dégradés rouge -> bleu -------------------------------------- */
.bg-gradient-primary-to-secondary {
	background: var(--rouge);
	background: linear-gradient(135deg, var(--rouge) 0%, var(--bleu) 100%);
}
.text-gradient {
	background: -webkit-linear-gradient(315deg, #ff5252 0%, #4d8dff 100%);
	background: linear-gradient(45deg, #ff5252 0%, #4d8dff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* --- Surfaces (ex-blanc / ex-gris clair) ------------------------- */
.bg-white {
	background-color: var(--surface) !important;
}
.bg-light {
	background-color: var(--surface-2) !important;
}
section.bg-light {
	background-color: var(--surface-2) !important;
}

.card {
	--bs-card-bg: var(--surface);
	--bs-card-color: var(--texte);
	--bs-card-border-color: var(--bordure);
}
/* panneaux et « puces » à l'intérieur d'une carte : plus sombres que la carte */
.card .bg-light {
	background-color: var(--fond) !important;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.shadow,
.shadow-sm,
.shadow-lg {
	box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.55) !important;
}

/* --- Barre de navigation --------------------------------------------- */
.navbar.bg-white {
	border-bottom: 1px solid var(--bordure);
}
.navbar.sticky-top {
	/* navbar collante translucide sur le one-page */
	background-color: rgba(18, 24, 34, 0.9) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.navbar-light {
	--bs-navbar-color: rgba(255, 255, 255, 0.62);
	--bs-navbar-hover-color: #fff;
	--bs-navbar-active-color: #fff;
	--bs-navbar-brand-color: #fff;
	--bs-navbar-brand-hover-color: #fff;
	--bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.12);
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.65%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
	color: var(--bleu);
}

/* --- Boutons ---------------------------------------------------------- */
.btn-primary {
	--bs-btn-bg: var(--rouge);
	--bs-btn-border-color: var(--rouge);
	--bs-btn-hover-bg: var(--rouge-fonce);
	--bs-btn-hover-border-color: var(--rouge-fonce);
	--bs-btn-active-bg: var(--rouge-fonce);
	--bs-btn-active-border-color: var(--rouge-fonce);
	--bs-btn-disabled-bg: var(--rouge);
	--bs-btn-disabled-border-color: var(--rouge);
	--bs-btn-focus-shadow-rgb: 255, 59, 59;
}
.btn-outline-dark {
	--bs-btn-color: var(--texte);
	--bs-btn-border-color: #3a4a5f;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--bleu);
	--bs-btn-hover-border-color: var(--bleu);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--bleu);
	--bs-btn-active-border-color: var(--bleu);
	--bs-btn-focus-shadow-rgb: 61, 139, 255;
}
.btn-outline-primary {
	--bs-btn-color: var(--rouge);
	--bs-btn-border-color: var(--rouge);
	--bs-btn-hover-bg: var(--rouge);
	--bs-btn-hover-border-color: var(--rouge);
	--bs-btn-active-bg: var(--rouge);
	--bs-btn-active-border-color: var(--rouge);
}

/* --- Formulaire de contact --------------------------------------- */
.form-control {
	background-color: #0d131c;
	border-color: #2a3446;
	color: var(--texte);
}
.form-control:focus {
	background-color: #0d131c;
	color: var(--texte);
	border-color: var(--rouge);
	box-shadow: 0 0 0 0.25rem rgba(255, 59, 59, 0.25);
}
.form-control::placeholder {
	color: #5b6675;
}
.form-floating > label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
	color: var(--texte-doux);
}

/* messages de confirmation / erreur du formulaire */
.alert-success {
	background-color: #0f2e22;
	border-color: #1c5c44;
	color: #63e0b0;
}
.alert-danger {
	background-color: #3a1418;
	border-color: #7d2a30;
	color: #ff8f95;
}

/* --- Pied de page ----------------------------------------------------- */
footer.bg-white {
	border-top: 1px solid var(--bordure);
}
footer a {
	color: var(--texte-doux);
}
footer a:hover {
	color: var(--bleu);
}

/* Pied de page enrichi (colonnes navigation / ressources / réseaux) */
.site-footer .footer-brand {
	text-decoration: none;
	transition:
		filter 0.25s ease,
		transform 0.25s ease;
}
.site-footer .footer-brand:hover {
	transform: translateY(-1px);
	filter: drop-shadow(0 0 10px rgba(255, 59, 59, 0.45));
}
.site-footer .footer-title {
	letter-spacing: 0.08em;
}
.site-footer .footer-links li + li {
	margin-top: 0.55rem;
}
.site-footer .footer-links a {
	display: inline-block;
	text-decoration: none;
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}
.site-footer .footer-links a:hover {
	color: var(--bleu);
	transform: translateX(4px);
}
.site-footer .footer-hr {
	border: 0;
	border-top: 1px solid var(--bordure);
	opacity: 1;
}
.site-footer .footer-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	color: var(--texte-doux);
	text-decoration: none;
	border: 1px solid var(--bordure);
	transition:
		color 0.2s ease,
		border-color 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;
}
.site-footer .footer-social:hover {
	color: #fff;
	border-color: var(--rouge);
	background-color: rgba(255, 59, 59, 0.12);
	transform: translateY(-3px);
}

/* --- Page « Mentions légales » : sections en cartes (comme l'accueil) --- */
.legal-card {
	scroll-margin-top: 5.5rem;
}
.legal-card .card-body > :last-child {
	margin-bottom: 0;
}
.legal-card p,
.legal-card li {
	color: var(--texte-doux);
	line-height: 1.7;
}
.legal-card strong {
	color: var(--texte);
	font-weight: 600;
}
.legal-card a {
	color: var(--bleu);
}
.legal-toc {
	list-style-position: inside;
}
.legal-toc li {
	margin-bottom: 0.55rem;
	color: var(--texte-doux);
}
.legal-toc li::marker {
	color: var(--bleu);
	font-weight: 700;
}
.legal-toc a {
	display: inline-block;
	text-decoration: none;
	color: var(--texte-doux);
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}
.legal-toc a:hover {
	color: var(--bleu);
	transform: translateX(4px);
}

/* --- Section d'accueil (one-page) ------------------------------------ */
.hero {
	display: flex;
	align-items: center;
	min-height: min(88vh, 860px); /* occupe l'écran sous la navbar sans jamais devenir démesuré */
}
.hero > .container {
	width: 100%;
}

/* --- Vignettes des cartes Projets ---------------------------------- */
#projets .d-flex > img.img-fluid {
	width: 100%;
	max-height: 240px;
	object-fit: cover;
}
@media (min-width: 768px) {
	#projets .d-flex > img.img-fluid {
		align-self: stretch;
		width: 40%;
		max-height: none;
	}
}

/* --- Cartes Stage : image à droite, sans déformation --------------- */
/* L'image est en fond ABSOLU d'un conteneur .stage-media : c'est le
   conteneur (pas le ratio de l'image) qui fixe les dimensions, donc
   la carte ne gonfle jamais. object-fit: cover = recadrage sans étirement. */
#projets .stage-card .stage-media {
	position: relative;
	overflow: hidden;
	background: #0d1420;
}
#projets .stage-card .stage-media > img {
	display: block;
	width: 100%;
	height: 14rem; /* mobile : bandeau */
	object-fit: cover;
}
@media (min-width: 768px) {
	#projets .stage-card .p-5 {
		min-width: 0;
	}
	#projets .stage-card .stage-media {
		flex: 0 0 30%; /* largeur de l'image dans la carte (ajuste ici) */
		max-width: 30%;
		align-self: stretch; /* prend toute la hauteur de la carte = hauteur du texte */
	}
	#projets .stage-card .stage-media > img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
}

/* --- Certifications : cartes cliquables (popup détail + visuel) ---- */
.certif-card {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--bs-card-bg);
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.certif-card:focus-visible {
	outline: 2px solid var(--bleu);
	outline-offset: 2px;
}
.certif-more {
	transition: transform 0.2s ease;
}
.certif-card:hover .certif-more,
.certif-card:focus-visible .certif-more {
	transform: translateX(4px);
}

/* --- Modales (fond sombre cohérent avec le reste du site) ---------- */
.modal-content {
	--bs-modal-bg: var(--surface);
	--bs-modal-color: var(--texte);
	border: 1px solid var(--bordure);
}
.btn-close {
	filter: invert(1) grayscale(1) brightness(1.8);
}

/* Zone d'affichage du visuel du certificat dans la modale : cadre sombre,
   l'image entière est toujours visible (pas de recadrage). Si l'image
   indiquée par data-cert-img est absente, js/scripts.js affiche le
   placeholder ci-dessous à la place. */
.certif-modal-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	max-height: 55vh;
	overflow: hidden;
	background: var(--fond);
	border: 1px solid var(--bordure);
}
.certif-modal-media img {
	display: block;
	width: 100%;
	max-height: 55vh;
	object-fit: contain;
}
.certif-modal-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: var(--texte-doux);
	padding: 2.5rem 1rem;
	text-align: center;
}
.certif-modal-placeholder i {
	font-size: 2rem;
}

/* --- Veille : lien « lire l'article » avec flèche animée au survol - */
.link-more i {
	transition: transform 0.2s ease;
}
.link-more:hover i,
.link-more:focus-visible i {
	transform: translate(2px, -2px);
}

/* --- Barres de défilement (WebKit) ------------------------------- */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
::-webkit-scrollbar-track {
	background: var(--fond);
}
::-webkit-scrollbar-thumb {
	background: #253044;
	border-radius: 6px;
	border: 3px solid var(--fond);
}
::-webkit-scrollbar-thumb:hover {
	background: #33415a;
}

/* =====================================================================
   DYNAMISME / ANIMATIONS
   Tout ce qui suit ajoute du mouvement (survols, apparitions au défilement,
   bouton hamburger animé…). Aucune règle Bootstrap n'est modifiée.
   Les animations sont désactivées si l'utilisateur a demandé
   « réduire les animations » dans son système (prefers-reduced-motion).
   ===================================================================== */

/* Défilement fluide sur les ancres (#accueil, #projets, …) */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* --- Barre de navigation : se compacte et s'ombre au défilement ------ */
#mainNav {
	transition:
		background-color 0.3s ease,
		box-shadow 0.3s ease,
		padding 0.3s ease;
}
#mainNav.navbar-scrolled {
	padding-top: 0.6rem !important;
	padding-bottom: 0.6rem !important;
	background-color: rgba(10, 14, 21, 0.95) !important;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
}

.navbar-brand {
	transition:
		transform 0.25s ease,
		filter 0.25s ease;
}
.navbar-brand:hover {
	transform: translateY(-1px) scale(1.03);
	filter: drop-shadow(0 0 10px rgba(255, 59, 59, 0.45));
}

/* Pas de soulignement bleu natif : on garde uniquement la barre dégradée ci-dessous */
.navbar-nav .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
	text-decoration: none;
}

/* --- Liens de la navbar : souligné dégradé qui se déploie (desktop) -- */
@media (min-width: 992px) {
	.navbar-nav .nav-link {
		position: relative;
		transition: color 0.2s ease;
	}
	.navbar-nav .nav-link::after {
		content: "";
		position: absolute;
		left: 0.5rem;
		right: 0.5rem;
		bottom: 0.3rem;
		height: 2px;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--rouge), var(--bleu));
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.28s cubic-bezier(0.4, 0.01, 0.2, 1);
	}
	.navbar-nav .nav-link:hover::after,
	.navbar-nav .nav-link.active::after {
		transform: scaleX(1);
	}
}

/* --- Liens de la navbar : barre latérale animée (mobile) ------------- */
@media (max-width: 991.98px) {
	.navbar-nav .nav-link {
		border-left: 2px solid transparent;
		border-radius: 0.35rem;
		padding-left: 0.75rem;
		transition:
			border-color 0.2s ease,
			background-color 0.2s ease,
			color 0.2s ease,
			padding-left 0.2s ease;
	}
	.navbar-nav .nav-link:hover,
	.navbar-nav .nav-link.active {
		border-left-color: var(--rouge);
		background-color: rgba(255, 59, 59, 0.08);
		padding-left: 1rem;
	}

	/* Les liens entrent en cascade quand le menu s'ouvre */
	#navbarSupportedContent .nav-item {
		opacity: 0;
		transform: translateY(-8px);
		transition:
			opacity 0.35s ease,
			transform 0.35s ease;
	}
	#navbarSupportedContent.show .nav-item {
		opacity: 1;
		transform: none;
	}
	#navbarSupportedContent.show .nav-item:nth-child(1) {
		transition-delay: 0.04s;
	}
	#navbarSupportedContent.show .nav-item:nth-child(2) {
		transition-delay: 0.09s;
	}
	#navbarSupportedContent.show .nav-item:nth-child(3) {
		transition-delay: 0.14s;
	}
	#navbarSupportedContent.show .nav-item:nth-child(4) {
		transition-delay: 0.19s;
	}
	#navbarSupportedContent.show .nav-item:nth-child(5) {
		transition-delay: 0.24s;
	}
	#navbarSupportedContent.show .nav-item:nth-child(6) {
		transition-delay: 0.29s;
	}
}

/* --- Bouton hamburger : 3 barres -> croix ---------------------------- */
.navbar-toggler {
	border: 1px solid var(--bordure);
	border-radius: 0.55rem;
	padding: 0.5rem 0.6rem;
	transition:
		border-color 0.25s ease,
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}
.navbar-toggler:hover {
	border-color: var(--rouge);
	background-color: rgba(255, 59, 59, 0.08);
}
.navbar-toggler:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 59, 59, 0.25);
}
.navbar-toggler-box {
	display: block;
	position: relative;
	width: 26px;
	height: 18px;
}
.navbar-toggler-bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2.5px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--rouge), var(--bleu));
	transition:
		transform 0.3s cubic-bezier(0.4, 0.01, 0.2, 1),
		opacity 0.2s ease,
		top 0.3s cubic-bezier(0.4, 0.01, 0.2, 1);
}
.navbar-toggler-bar:nth-child(1) {
	top: 0;
}
.navbar-toggler-bar:nth-child(2) {
	top: 8px;
}
.navbar-toggler-bar:nth-child(3) {
	top: 16px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(1) {
	top: 8px;
	transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(2) {
	opacity: 0;
	transform: translateX(-10px);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(3) {
	top: 8px;
	transform: rotate(-45deg);
}

/* --- Boutons : légère élévation au survol --------------------------- */
.btn {
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease,
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}
.btn:hover {
	transform: translateY(-2px);
}
.btn-primary:hover {
	box-shadow: 0 0.6rem 1.4rem rgba(255, 59, 59, 0.3);
}
.btn-outline-dark:hover {
	box-shadow: 0 0.6rem 1.4rem rgba(61, 139, 255, 0.28);
}
.btn:active {
	transform: translateY(0);
}

/* --- Icônes réseaux (Présentation) --------------------------------- */
#presentation a.text-gradient {
	display: inline-block;
	transition: transform 0.2s ease;
}
#presentation a.text-gradient:hover {
	transform: translateY(-4px) scale(1.15);
}

/* --- Cartes : elles se soulèvent et s'illuminent au survol --------- */
.card {
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}
main .card:hover {
	transform: translateY(-5px) scale(1.02);
	border-color: rgba(255, 59, 59, 0.35);
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.6);
}

/* Le petit carré d'icône dégradé pivote quand on survole sa carte */
.feature {
	transition: transform 0.3s ease;
}
.card:hover .feature {
	transform: rotate(-6deg) scale(1.08);
}

/* --- « Puces » de compétences / outils : décalage + barre rouge ---- */
.card .row .bg-light.rounded-4,
.card .row-cols-1 .bg-light {
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}
.card .row .bg-light.rounded-4:hover,
.card .row-cols-1 .bg-light:hover {
	transform: translateY(-3px);
	box-shadow:
		inset 3px 0 0 var(--rouge),
		0 0.5rem 1rem rgba(0, 0, 0, 0.45);
}

/* --- Titre d'accueil : dégradé qui ondule lentement ---------------- */
@media (prefers-reduced-motion: no-preference) {
	.hero .text-gradient {
		background-size: 220% auto;
		animation: degrade-ondule 6s ease-in-out infinite alternate;
	}
}
@keyframes degrade-ondule {
	to {
		background-position: 100% center;
	}
}

/* --- Apparition progressive des éléments au défilement ------------- */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}
.reveal.reveal-in {
	opacity: 1;
	transform: none;
}

/* --- Bouton « remonter en haut » --------------------------------- */
.scroll-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 1030;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	color: #fff;
	font-size: 1.15rem;
	background: linear-gradient(135deg, var(--rouge), var(--bleu));
	box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0.3s ease;
}
.scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.scroll-top:hover {
	color: #fff;
	text-decoration: none;
	transform: translateY(-3px) scale(1.08);
	box-shadow: 0 0.75rem 1.6rem rgba(255, 59, 59, 0.4);
}

/* --- Respect du réglage système « réduire les animations » -------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.reveal {
		opacity: 1;
		transform: none;
	}
}