/* ==========================================================================
   Dark mode
   Approche ciblée : on ne touche qu'aux couleurs d'interface (fonds de
   section, textes de contenu, formulaires, boutons). Les photos et les
   textes qui apparaissent en surimpression dessus (légendes du portfolio,
   qui utilisent déjà des classes claires comme .text-gray-light / .text-white
   sur un fond sombre .bg-gradende) ne sont jamais modifiés.
   ========================================================================== */

html.dark-mode,
html.dark-mode body {
	background-color: #121212;
}

html.dark-mode body {
	color: #d6d6d6;
	transition: background-color 0.25s ease, color 0.25s ease;
}

html.dark-mode a,
html.dark-mode a:active,
html.dark-mode a:focus {
	color: #e6e6e6;
}

/* ---------------------------------------------------------------------
   Textes de contenu (titres, paragraphes) — pas les textes sur photos
   --------------------------------------------------------------------- */

html.dark-mode .text-black {
	color: #f5f5f5;
}

html.dark-mode .text-gray-extra-dark {
	color: #e2e2e2;
}

html.dark-mode .text-gray-dark {
	color: #cfcfcf;
}

html.dark-mode .text-gray-regular {
	color: #b8b8b8;
}

/* ---------------------------------------------------------------------
   Fonds de section clairs (hors photos)
   --------------------------------------------------------------------- */

html.dark-mode .bg-white {
	/* Bootstrap définit .bg-white avec !important : on doit faire pareil,
	   sinon la règle de Bootstrap gagne et le fond reste blanc (c'était le
	   bug sur le footer de la page d'accueil, en bas de page). */
	background-color: #121212 !important;
}

html.dark-mode .bg-gray-extra-light,
html.dark-mode .bg-gray-light {
	background-color: #1c1c1c !important;
}

/* ---------------------------------------------------------------------
   Filtre du portfolio (liste "All. / Advertising. / ...")
   --------------------------------------------------------------------- */

html.dark-mode .filter-style-1 li a {
	color: #9a9a9a !important;
}

html.dark-mode .filter-style-1 li a:hover,
html.dark-mode .filter-style-1 li a:focus,
html.dark-mode .filter-style-1 li a:active {
	color: #f5f5f5 !important;
}

/* ---------------------------------------------------------------------
   Boutons
   --------------------------------------------------------------------- */

html.dark-mode .btn-black:hover,
html.dark-mode .btn-black:focus {
	color: #f5f5f5 !important;
}

html.dark-mode .btn-transparent-black {
	border-color: #e6e6e6 !important;
	color: #e6e6e6;
}

html.dark-mode .btn-transparent-black:hover,
html.dark-mode .btn-transparent-black:focus {
	background: #e6e6e6 !important;
	border-color: #e6e6e6 !important;
	color: #121212;
}

/* ---------------------------------------------------------------------
   Formulaires (hors formulaire de contact, déjà sombre par défaut)
   --------------------------------------------------------------------- */

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
	border-color: #444;
	color: #f0f0f0;
	background-color: transparent;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
	color: #8a8a8a;
}

html.dark-mode .form-control {
	background-color: #1c1c1c;
	color: #f0f0f0;
}

/* ---------------------------------------------------------------------
   Boutons flottants : "retour en haut" et bascule clair/sombre.
   Même style rond pour les deux (icône Font Awesome centrée).
   Retour en haut : centré en bas. Clair/sombre : en bas à droite.
   (Avant, les deux étaient en bas à droite avec un z-index plus élevé
   pour le retour en haut, qui bloquait donc les clics sur le toggle.)
   --------------------------------------------------------------------- */

#dark-mode-toggle,
#return-to-top,
#return-to-top-2 {
	position: fixed;
	bottom: 25px;
	z-index: 9999;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #fff;
	color: #222;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	font-size: 16px;
	line-height: 1;
	transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

#dark-mode-toggle {
	right: 25px;
}

#return-to-top,
#return-to-top-2 {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

#dark-mode-toggle:hover {
	transform: scale(1.08);
}

#return-to-top:hover,
#return-to-top-2:hover {
	transform: translateX(-50%) translateY(-4px);
}

html.dark-mode #dark-mode-toggle,
html.dark-mode #return-to-top,
html.dark-mode #return-to-top-2 {
	background: #232323;
	color: #f5f5f5;
	border-color: rgba(255, 255, 255, 0.2);
}

#dark-mode-toggle .fa-sun {
	display: none;
}

html.dark-mode #dark-mode-toggle .fa-moon {
	display: none;
}

html.dark-mode #dark-mode-toggle .fa-sun {
	display: inline-block;
}