/* Conteneur des contrôles Focus */
.ldfm-focus-controls {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px 0;
	padding: 0;
}

/* Bouton de contrôle Focus */
.ldfm-toggle-focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border: 2px solid #e74c3c;
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
	color: white;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border-radius: 25px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

/* Effet hover */
.ldfm-toggle-focus:hover {
	transform: translateY(-2px);
	background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
	color: white;
	text-decoration: none;
}

/* Icône avant le texte */
.ldfm-toggle-focus::before {
	content: "\f06e";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 16px;
	transition: transform 0.3s ease;
}

/* Animation de l'icône au hover */
.ldfm-toggle-focus:hover::before {
	transform: scale(1.1);
}

/* État actif (mode Focus activé) */
.ldfm-toggle-focus[data-action="disable"] {
	background: #00A79D;
	border-color: #A1CECC;
}

.ldfm-toggle-focus[data-action="disable"]:hover {
	background: #F7941D;
	border-color: #F7941D;
}

.ldfm-toggle-focus[data-action="disable"]::before {
	content: "\f070";
}

/* Bouton occupé */
.ldfm-toggle-focus.is-busy {
	opacity: 0.7;
	pointer-events: none;
	cursor: not-allowed;
}

.ldfm-toggle-focus.is-busy::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid transparent;
	border-top: 2px solid white;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
	.ldfm-toggle-focus {
		padding: 20px 20px;
		font-size: 13px;
	}
}

a.ldfm-focus-link {
	position: absolute;
	top: 34px;
	padding: 20px;
	z-index: 10;
	right: 49px;
	font-size: 24px !important;
	padding: 3px;
	border-radius: 35px;
}

/* Mode Focus - Masquage des éléments distractifs */
body.focus-mode-active {
	overflow: hidden;
}

body.focus-mode-active #lessonsContent,
body.focus-mode-active .course-nav-button,
body.focus-mode-active .site-header,
body.focus-mode-active .site-footer,
body.focus-mode-active .sidebar,
body.focus-mode-active .course-nav {
	display: none !important;
}

/* Bannière de mode focus */
.ldfm-focus-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #2c3e50;
	color: white;
	padding: 20px 20px !important;
	text-align: center;
	z-index: 9999;
	font-weight: bold;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Conteneur principal en mode focus */
body.focus-mode-active .site-content {
	margin-top: -40px !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 20px !important;
}

/* Bouton de sortie du mode plein écran */
.ldfm-exit-fullscreen {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #e74c3c;
	color: white;
	border: none;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	font-size: 20px;
	cursor: pointer;
	z-index: 10000;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Style pour le contenu en mode focus */
.ldfm-focus-content {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
}

/* Mode Focus - Masquage des éléments distractifs */
body.ldfm-fullscreen-mode {
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: white;
	z-index: 99999;
}

body.ldfm-fullscreen-mode #lessonsContent,
body.ldfm-fullscreen-mode .course-nav-button,
body.ldfm-fullscreen-mode .site-header,
body.ldfm-fullscreen-mode .site-footer,
body.ldfm-fullscreen-mode .sidebar,
body.ldfm-fullscreen-mode .bb-grid,
body.ldfm-fullscreen-mode .course-nav,
body.ldfm-fullscreen-mode .ld-lesson-navigation,
body.ldfm-fullscreen-mode .wpadminbar,
body.ldfm-fullscreen-mode admin-bar {
	display: none !important;
}

/* Conteneur principal en mode focus */
body.ldfm-fullscreen-mode .site-content {
	margin-top: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 50px 20px 20px 20px !important;
	height: calc(100vh - 70px);
	overflow-y: auto;
}

/* Statut focus avec alignement proper */
.ldfm-focus-status {
  display: inline-flex;
  align-items: center;
  gap: 140px;
  white-space: nowrap;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.24;
  gap: 8px;
  color: #e74c3c;
  font-weight: 600;
}

.ldfm-focus-status .bb-icon-l {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.ldfm-focus-status span {
  animation: fadeIn 1.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Icône œil barré - seulement si pas d'autre icône */
.bb-icon-eye-slash:not(.bb-icon-l)::after {
  content: "\f070";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

/* Icône pour bb-icon-l avec eye-slash */
.bb-icon-l.bb-icon-eye-slash::before {
  content: "\f070";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

/* Icône pour bb-icon-l avec eye */
.bb-icon-l.bb-icon-eye::before {
  content: "\f06e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

/* Texte focus mode activated */
.ldfm-focus-text {
  font-family: "Montserrat", sans-serif !important;
  color: #e74c3c !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  white-space: nowrap;
}

/* État actif du lien focus */
a.ldfm-focus-link.focus-active { color: #fff; }
a.ldfm-focus-link.is-active { color: #e74c3c; }



/* États ARIA pour l'accessibilité */
[aria-pressed="true"] {
    background-color: #e74c3c !important;
    color: white !important;
}

[aria-pressed="true"].ldfm-focus-link {
    background-color: transparent !important;
    color: #e74c3c !important;
}



/* Animations */
@keyframes focusShake { 0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-2px)} }
@keyframes focusBeat  { 0%,100%{transform:scale(1)}50%{transform:scale(1.2)} }
@keyframes focusSpin  { 0%{transform:rotate(0)}100%{transform:rotate(360deg)} }
@keyframes focusBlink { 0%,100%{opacity:1}50%{opacity:.4} }
@keyframes focusPulse { 0%,100%{opacity:0.3}50%{opacity:0.8} }

a.ldfm-focus-link.focus-active .bb-icon-eye-slash {
   animation: focusBlink 1s infinite; 
}

/* Classe body pour l'état focus global */
body.ldfm-focus-active {
    /* Indicateur global que le focus est actif */
}

body.ldfm-focus-active .ldfm-focus-link:not(.is-active):not(.focus-active) {
    opacity: 0.6;
}

/* Amélioration de l'accessibilité clavier */
.ldfm-focus-link:focus,
.ldfm-toggle-focus:focus,
.ldfm-admin-toggle:focus {
    outline-offset: 2px;
}

/* Transitions fluides pour la synchronisation */
.ldfm-focus-link,
.ldfm-toggle-focus,
.ldfm-admin-toggle {
    transition: all 0.3s ease;
}

.ldfm-focus-link .bb-icon-l,
.ldfm-focus-link span {
    transition: all 0.3s ease;
}