/* Style pour le plugin vt-music-training */
/* V 1.1 */   

/*-------------------------------------------------------------------------------------------------
Couleur de fond de la page d'entraînement
--------------------------------------------------------------------------------------------------*/
/*
#site-content {
	background-color: white !important;
}
*/

:root {
	--vtmt--hauteur-zone-externe-reservee: 0px;
	--vtmt--largeur-utile: 1280px;
}

/* Les règles ci-dessous se trouvaient dans le thème sous lequel a été développé le plugin */
*,
*::before,
*::after {
	box-sizing: inherit;
	-webkit-font-smoothing: antialiased;
	word-break: break-word;
	word-wrap: break-word;
}

/*-------------------------------------------------------------------------------------------------
Mise en page de blocs particuliers les blocs gutenberg personnalisés
--------------------------------------------------------------------------------------------------*/
.vt--btnLecteur {
/*	display: table; */
	background-color: white;
	line-height: 4rem;
	white-space: normal;
	text-align: center;
	border-radius: 8px;
	padding: 3px 10px 3px 10px;
	margin-left: 1rem;
	margin-right: 2rem;
}

.vt--play::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 2.5rem;
	content: "\f04b";
	color: var(--vtmt--bg-symbole-fichier-de-travail);
}
.vt--pause::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 3rem;
	content: "\f04c";
}
.vt--bouton-init {
	background-color: white; /* var(--vtmt--bg-symbole-fichier-de-travail);*/
	color: var(--vtmt--bg-symbole-fichier-de-travail);	
}
.vt--bouton-init-actif {
	background-color: var(--vtmt--bg-flash);
}

/*-------------------------------------------------------------------------------------------------
Règles générales
--------------------------------------------------------------------------------------------------*/
.vtmt--hidden {
	display: none !important;
}

.wp_block_file {
	background-color: antiquewhite;
}

.wp_block_file__embed {
	background-color: blue !important;
}

/* ---------------------------------------------------------------------------------------------------
   Bouton switch (responsive & color-flexible)
--------------------------------------------------------------------------------------------------- */

:root {
  /* Dimensions adaptatives (entre mobile et desktop) */
  --vtmt--switch-height: clamp(20px, 3vw, 34px);
  --vtmt--switch-width: calc(var(--vtmt--switch-height) * 1.8);
  --vtmt--switch-thumb-size: calc(var(--vtmt--switch-height) * 0.76);

  /* Couleurs par défaut (OFF / ON / focus) */
  --vtmt--switch-off: #afafaf;
  --vtmt--switch-on: var(--vtmt--switch-checked);
  --vtmt--switch-focus: var(--vtmt--switch-checked);
}

/* Conteneur principal */
.vtmt--bouton__switch {
  position: relative;
  display: inline-block;
  width: var(--vtmt--switch-width);
  height: var(--vtmt--switch-height);
  margin-left: 2%;
  vertical-align: middle;
}

/* Cacher le vrai input */
.vtmt--bouton__switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Le slider (fond ovale) */
.vtmt--bouton__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--vtmt--switch-off);
  transition: background-color 0.3s, box-shadow 0.3s;
  border-radius: var(--vtmt--switch-height);
}

/* Le loquet blanc */
.vtmt--bouton__slider::before {
  content: "";
  position: absolute;
  left: calc(var(--vtmt--switch-height) * 0.12);
  bottom: calc(var(--vtmt--switch-height) * 0.12);
  width: var(--vtmt--switch-thumb-size);
  height: var(--vtmt--switch-thumb-size);
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

/* État activé */
.vtmt--bouton__switch input:checked + .vtmt--bouton__slider {
  background-color: var(--vtmt--switch-on);
}

/* Focus (accessibilité clavier) */
.vtmt--bouton__switch input:focus + .vtmt--bouton__slider {
  box-shadow: 0 0 3px var(--vtmt--switch-focus);
}

/* Déplacement du loquet */
.vtmt--bouton__switch input:checked + .vtmt--bouton__slider::before {
  transform: translateX(calc(var(--vtmt--switch-width) - var(--vtmt--switch-height)));
}

/* ---------------------------------------------------------------------------------------------------
   Variantes de couleur (optionnelles)
--------------------------------------------------------------------------------------------------- */

/* switch oeuvre (actuellemnt : valeurs par défaut) */
.vtmt--bouton__switch.vtmt--bouton__switch-oeuvre {
  --vtmt--switch-on: var(--vtmt--switch-checked);
  --vtmt--switch-focus: var(--vtmt--switch-checked);
}

/* switch module */
.vtmt--bouton__switch.vtmt--bouton__switch-module {
  --vtmt--switch-on: var(--vtmt--bg-symbole-bouton-index);
  --vtmt--switch-focus: var(--vtmt--bg-symbole-bouton-index);
}

/* Danger (rouge) */
.vtmt--bouton__switch.danger {
  --vtmt--switch-on: #ef4444;
  --vtmt--switch-focus: #dc2626;
}

/* Avertissement (jaune) */
.vtmt--bouton__switch.warning {
  --vtmt--switch-on: #facc15;
  --vtmt--switch-focus: #ca8a04;
}

/* Info (bleu) */
.vtmt--bouton__switch.info {
  --vtmt--switch-on: #3b82f6;
  --vtmt--switch-focus: #2563eb;
}

/* Désactivé */
.vtmt--bouton__switch.disabled {
  pointer-events: none;
  opacity: 0.6;
}


.swal2-popup { font-family: 'InterVTMT', sans-serif; }

/**
 * Styles personnalisés pour la ToolBar de RichText
 */

 .vt--richtext-with-toolbar {
    border: 1px solid #ddd;
    border-radius: 4px;
}
.vt--inline-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.vt--inline-toolbar .components-toolbar {
    /* border-bottom: 1px solid #ddd; */
    padding: 0;
    background: #f0f0f0;
    display: flex;
    width: fit-content;
    min-height: 1.5rem;
    
}
.vt--inline-toolbar .components-toolbar {
    margin: 3px 0 3px 0;
}
.vt--inline-toolbar .components-toolbar:first-child {
    margin-left: 3px;
}
.vt--inline-toolbar .components-toolbar .components-button {
    margin: 0;
    padding: 4px 4px !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    border: none;
    background: transparent;
   /* color: #333;*/
    cursor: pointer;
}
.vt--inline-toolbar .components-toolbar .components-button:before {
  height: 24px;
}
.vt-richtext-area {
    min-height: 40px;
    resize: vertical;     /* poignée de redimensionnement en bas à droite */
    overflow: auto;       /* resize ne fonctionne qu'avec overflow différent de visible */

}

/* Tooltip */
.components-modal__content {
  max-width: min(750px,90vw);
}

.vt--attributes-form-popup-inner input {
  height: 1.9rem !important;
  min-height: 1rem !important;
}
.vt--richtext-area {
    min-height: 40px;
    resize: vertical;     /* poignée de redimensionnement en bas à droite */
    overflow: auto;       /* resize ne fonctionne qu'avec overflow différent de visible */

}