/* ---------------------------------------------------------------------------*/
/*                                 Animations                                 */
/* ---------------------------------------------------------------------------*/

body.animations h1, .animations h1 {
	background: #0D9B7A;
	background: -moz-linear-gradient(top, #169880 0%, #0D9B7A 49%, #017557 100%); 
	background: linear-gradient(to bottom, #169880 0%,#0D9B7A 49%,#017557 100%); 
	color: #FFFFFF;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-bottom: 15px;
}

body.catalog .loader-container {
	color: #0D9B7A;
}

body.animations h2,
body.animations h3,
.animations h2,
.animations h3 {
	color: #0D9B7A;
}

body.animations #conteneur #menu li a:hover, .animations #conteneur #menu li a:hover  {
	background: -moz-linear-gradient(top, #169880 0%, #0D9B7A 49%, #017557 100%); 
	background: linear-gradient(to bottom, #169880 0%,#0D9B7A 49%,#017557 100%); 
	background-repeat: repeat-x;
	background-position: left top;
	background-color: #0D9B7A;
	color: #FFFFFF;
}

body.animations .hmenu span.selected a, .animations .hmenu span.selected a{
	background: -moz-linear-gradient(top, #169880 0%, #0D9B7A 49%, #017557 100%); 
	background: linear-gradient(to bottom, #169880 0%,#0D9B7A 49%,#017557 100%); 
	background-color: #0D9B7A;
	color: #FFFFFF;
}

body.animations table th, .animations table th{
	background: -moz-linear-gradient(top, #169880 0%, #0D9B7A 49%, #017557 100%); 
	background: linear-gradient(to bottom, #169880 0%,#0D9B7A 49%,#017557 100%); 
	background-position: left bottom;
	background-color: #0D9B7A;
	color: #FFFFFF;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-bottom: 15px;
}

body.animations table th h3, .animations table th h3  {
	color: #FFFFFF;
}

body.animations table tr.surbrillance, .animations .sortable tr:hover, .animations table tr.surbrillance, .animations .sortable tr:hover{
	background: -moz-linear-gradient(top, #169880 0%, #0D9B7A 49%, #017557 100%); 
	background: linear-gradient(to bottom, #169880 0%,#0D9B7A 49%,#017557 100%); 
	background-position: left top;
	background-color: #017557;
	color: #FFFFFF;
}

body.animations input, body.animations select, body.animations textarea, .animations input, .animations select, .animations textarea {
	-moz-box-shadow: 1px 1px 1px #017557 inset;
	-o-box-shadow: 1px 1px 1px #017557 inset;
	-webkit-box-shadow: 1px 1px 1px #017557 inset;
	box-shadow: 1px 1px 1px #017557 inset;
}

body.animations .saisie-contenu, body.animations .astuce,  .animations .saisie-contenu, .animations .astuce{
	background: -moz-linear-gradient(top, #169880 0%, #0D9B7A 49%, #017557 100%); 
	background: linear-gradient(to bottom, #169880 0%,#0D9B7A 49%,#017557 100%); 
	background-position: left bottom;
	background-color: #0D9B7A;
}

body.animations #content_onglet_perio span.onglet-perio-selected a, .animations #content_onglet_perio span.onglet-perio-selected a{
	background: -moz-linear-gradient(top, #169880 0%, #0D9B7A 49%, #017557 100%); 
	background: linear-gradient(to bottom, #169880 0%,#0D9B7A 49%,#017557 100%); 
	background-position: left bottom;
	background-color: #0D9B7A;
	color: #FFFFFF;
}

.animations .saisie-5emr, .animations .saisie-10emr, .animations .saisie-15emr, .animations .saisie-20emr, .animations .saisie-30emr, .animations .saisie-50emr, .animations .saisie-80emr {
	background-color: #0D9B7A;
	color: #FFFFFF;
	-moz-box-shadow: 1px 1px 10px #0D9B7A inset;
	-o-box-shadow: 1px 1px 10px #0D9B7A inset;
	-webkit-box-shadow: 1px 1px 10px #0D9B7A inset;
	box-shadow: 1px 1px 10px #0D9B7A inset;
}

#navbar ul li#navbar-animations a {
    background: #0D9B7A;
    background: -moz-linear-gradient(top, #169880 0%, #0D9B7A 49%, #017557 100%); 
	background: linear-gradient(to bottom, #169880 0%,#0D9B7A 49%,#017557 100%); 
}

#navbar ul li#navbar-animations a.current {
    background: #FFF;
    color: #0D9B7A;
    box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.0);
}

#conteneur.animations #menu h3 {
	background-image: url(./images/themes/h3_menu_animations.png);
}

.animations-perio {
	border: 1px solid #DDD;
	padding: 1em;
	margin-bottom: 1em;
	margin-top: 1em;
}

body.animations .navbar .pagination button.bouton-page.active {
	background-color: #0D9B7A;
	color: #FFFFFF;
}

body.animations .loader-container {
	color: #0D9B7A;
}

/* ---------------------------------------------------------------------------*/
/*                    Grille configurable du formulaire (drag & drop)         */
/* ---------------------------------------------------------------------------*/

.animations .grid-layout__toolbar {
	margin-bottom: 12px;
}

/* Poignees de deplacement (zone + champ) : curseur grab, pas de selection texte */
.animations .grid-zone__handle,
.animations .grid-item__handle {
	cursor: grab;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 8px;
	border-radius: 4px;
	color: #FFFFFF;
	background-color: #0D9B7A;
	font-size: 13px;
	line-height: 1;
	vertical-align: middle;
	transition: background-color .15s ease, transform .15s ease;
}

.animations .grid-zone__handle:hover,
.animations .grid-item__handle:hover {
	background-color: #017557;
	transform: scale(1.08);
}

.animations .grid-zone__handle:active,
.animations .grid-item__handle:active {
	cursor: grabbing;
	background-color: #017557;
}

/* Champ en mode edition : carte deplacable mise en evidence */
.animations .grid-item--editing {
	border: 1px dashed #8A94A6;
	border-radius: 4px;
	padding: 4px 8px;
	margin: 5px 0;
	/* Fond blanc + bordure neutre : le champ ressort sur le fond vert de la zone
	   (evite le ton-sur-ton vert/vert). */
	background-color: #FFFFFF;
}

.animations .grid-item__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

/* Elements masques (visibilite decochee) : grises mais visibles en edition */
.animations .grid-item--hidden.grid-item--editing,
.animations .grid-zone--hidden {
	opacity: 0.5;
}

/* Retour visuel vuedraggable pendant le glisser-deposer */
.animations .grid-item.sortable-ghost,
.animations .grid-zone.sortable-ghost {
	opacity: 0.4;
	background-color: rgba(13, 155, 122, 0.12);
}

.animations .grid-item.sortable-chosen,
.animations .grid-zone.sortable-chosen {
	box-shadow: 0 0 0 2px #0D9B7A;
}

/* Bascule de visibilite (oeil) a la place de la case a cocher */
.animations .grid-eye {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 4px;
	color: #0D9B7A;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	vertical-align: middle;
	transition: color .15s ease, background-color .15s ease;
}

.animations .grid-eye:hover {
	background-color: rgba(13, 155, 122, 0.12);
}

.animations .grid-eye:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(13, 155, 122, 0.4);
}

.animations .grid-eye--off {
	color: #9AA0A6;
}

/* Champ de renommage de zone (mode edition) */
.animations .grid-zone__name-input {
	margin: 0 6px;
	padding: 3px 8px;
	border: 1px solid #0D9B7A;
	border-radius: 4px;
	font-size: 15px;
	font-weight: bold;
	color: #017557;
	vertical-align: middle;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.animations .grid-zone__name-input:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(13, 155, 122, 0.4);
}

/* Bouton supprimer une zone custom (mode edition) */
.animations .grid-zone__delete {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 4px;
	color: #C0392B;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	vertical-align: middle;
	transition: color .15s ease, background-color .15s ease;
}

.animations .grid-zone__delete:hover {
	background-color: rgba(192, 57, 43, 0.12);
}

.animations .grid-zone__delete:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.4);
}

/* Mode edition : delimiter chaque zone par une boite, pour distinguer d'un coup
   d'oeil les champs GROUPES (dans la boite) des champs HORS ZONE (bloc nu, sans
   boite). Hors edition, aucune boite : le formulaire garde son rendu normal. */
.animations .grid-zone--editing:not(.grid-zone--bare) {
	border: 1px solid #0D9B7A;
	border-radius: 6px;
	background-color: #E2F1EB;
	padding: 8px 12px 10px;
	margin-bottom: 14px;
}

/* Champ "hors zone" (zone nue) : champ aligne, SANS boite (contraste avec les
   zones). Un filet pointille neutre a gauche signale un element libre. */
.animations .grid-zone--bare {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.animations .grid-zone--editing.grid-zone--bare {
	border-left: 3px dashed #B7C2C0;
	padding-left: 9px;
	margin-bottom: 14px;
}

.animations .grid-zone--bare .grid-zone__items {
	flex: 1 1 auto;
	min-width: 0;
}

/* Bouton sortir un champ de sa zone (mode edition) */
.animations .grid-item__extract {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	color: #0D9B7A;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	transition: color .15s ease, background-color .15s ease;
}

.animations .grid-item__extract:hover {
	background-color: rgba(13, 155, 122, 0.12);
}

.animations .grid-item__extract:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(13, 155, 122, 0.4);
}

/* Zone custom vide en edition : encart de depot visible */
.animations .grid-zone__items--empty {
	min-height: 48px;
	border: 2px dashed #B7C2C0;
	border-radius: 4px;
}

/* Menu de comportement de la zone (mode edition) : pliable + etat par defaut */
.animations .grid-fold-select {
	margin: 0 6px;
	padding: 3px 8px;
	border: 1px solid #0D9B7A;
	border-radius: 4px;
	background-color: #FFFFFF;
	color: #017557;
	font-size: 12px;
	line-height: 1.3;
	vertical-align: middle;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.animations .grid-fold-select:hover {
	border-color: #017557;
}

.animations .grid-fold-select:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(13, 155, 122, 0.4);
}

/* Marqueur champ/zone obligatoire (remplace l'oeil, non masquable) */
.animations .grid-item__required {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: #C0392B;
	font-size: 13px;
	line-height: 1;
	vertical-align: middle;
	cursor: help;
}

/* Rangee de champs : 1 champ (pleine largeur) ou 2 champs cote a cote */
.animations .grid-row {
	display: flex;
	gap: 12px;
	/* Champs cote a cote egalises en hauteur : le plus court s'etire a la hauteur
	   du plus grand, le vide passe a l'interieur de la carte au lieu de laisser
	   un trou ragged a cote (le fond de zone ne transparait plus). */
	align-items: stretch;
}

.animations .grid-row > .grid-item {
	flex: 1 1 0;
	min-width: 0;
}

/* Champ masque hors mode edition : ne reserve pas d'espace dans la rangee */
.animations .grid-item--hidden:not(.grid-item--editing) {
	display: none;
}

/* Empecher les saisies larges (saisie-40em, ...) de deborder d'une demi-rangee */
.animations .grid-row .grid-item input,
.animations .grid-row .grid-item select,
.animations .grid-row .grid-item textarea {
	max-width: 100%;
	box-sizing: border-box;
}

/* Emplacement de depot a droite d'un champ seul : mettre cote a cote */
.animations .grid-row__slot {
	flex: 1 1 0;
	align-self: stretch;
	min-height: 38px;
	margin: 5px 0;
	border: 2px dashed rgba(13, 155, 122, 0.45);
	border-radius: 4px;
}

.animations .grid-row__slot:hover {
	background-color: rgba(13, 155, 122, 0.08);
}

/* Interstice entre rangees : depose un champ seul sur une nouvelle rangee.
   Le :hover s'applique aussi pendant un glisser (SortableJS n'utilise pas
   le drag & drop natif, le pointeur reste actif). */
.animations .grid-row-gap {
	min-height: 12px;
	border-radius: 4px;
	border: 1px dashed transparent;
	transition: background-color .15s ease, border-color .15s ease;
}

.animations .grid-row-gap:hover {
	background-color: rgba(13, 155, 122, 0.08);
	border-color: rgba(13, 155, 122, 0.35);
}