@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {}

/*iPhone 7 in landscape*/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
    .conteneurChamps > input {
        border-radius: 0!important;
        border-width: 1px;
        -webkit-appearance: none;
        box-sizing: content-box;
        -webkit-text-size-adjust: none;
    }
}

/*iPhone 7 in portrait*/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
    .image-terme .img-fluid {
       /* height: 16.3vh;*/
		height: auto;
    }
    .conteneurChamps > input {
        border-radius: 0!important;
        border-width: 1px;
        -webkit-appearance: none;
        box-sizing: content-box;
        -webkit-text-size-adjust: none;
    }
}

@media screen and (max-width: 550px) {
    .conteneurChamps > input {
        width: 1.3rem!important;
        height: 1.3rem!important;
    }
    .panneau {
        width: 100%!important;
    }
    body {
        height: 100%;
    }

}
@media screen and (min-width: 768px) {
    .image-terme {
        max-width: 20%!important;
    }
}
@media screen and (min-width: 992px) {
.modal-lg, .modal-xl {
    max-width: 830px;
}
}
#intro{
     border: 1px solid #000;
     padding: 10px 25px !important;
}
/* fil d'ariane */
.contenu-fixe ol.breadcrumb {
    padding: 40px 0 .75rem;
}
ul.actions {
    min-width: 50%;
    flex: 1 1;
}
.image-terme {
    cursor: pointer;
    max-width: 50%;
}
.conteneurAide {
    font-size: 1rem;
    font-weight: bold;
    display: inline-block;
    height: 2rem; 
}
.conteneurChamps > input {
    width: 1.5rem;
    height: 1.5rem;
}
.conteneurChamps > input[data-value=" "] {
    height: 0;
    border: 0;
}
body {
    background-image: none !important;
    background-color: #ffffff !important;
}
button.ecouter .enCours {
    visibility: hidden;
}

button.ecouter.active .enCours {
    visibility: visible;
}
.valide {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40,167,69,.25);
}
.invalide {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(226, 40, 40, 0.25);
}
[name=terme] {
    border: 0;
    background-color: transparent;
    font-size: .8rem;
    resize: none;
    white-space: pre-wrap
}
.img-figure {
    max-width: 30px;
} 
.img-figure-fleche {
    max-width: 50px;
}
a[role=button] {
    text-decoration: none;
}
.btn-outline-secondary[aria-expanded=true] {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/*animer bordure lors du clic sur écrivez*/
@keyframes bordure {
    from {
        background-color: #d4d6d5;
        border: 1px solid black;
    }
    to {
        background-color: transparent;
        border: 1px solid #333;
    }
}
.animer-bordure {
    background-color: transparent;
    border: 1px solid #333;
    animation-name: bordure;
    animation-duration: 1s;
}
a.media {
    text-decoration: none;
    color: inherit!important;
}


/*fleches*/
.panneau button {
    position: relative;
    color: #666 !important;
    position: relative;
    padding: 0;
    margin: 0;
    padding-top: 0.6em;
    font-weight: bold;
    font-size: 21px;
    font-size: 1.3rem !important;
}
.panneau section button {
    color: #006FA9 !important;
    font-size: 17px !important;
    line-height: 26px !important;
    letter-spacing: 1px;
    font-weight: normal;
}
.panneau button i {
    position: absolute;
    transform: translate(-6px, 0);
    margin-top: 0.5rem;
    right: 0.5rem;
}
.panneau button i:before, 
.panneau button i:after {
    content: "";
    position: absolute;
    background-color: #ff6873;
    width: 3px;
    height: 9px;
}
.panneau button i:before {
    transform: translate(2px, 0) rotate(45deg);
}
.panneau button i:after {
    transform: translate(-2px, 0) rotate(-45deg);
}
.panneau button[aria-expanded=true] i:before {
    transform: translate(-2px, 0) rotate(45deg);
}
.panneau button[aria-expanded=true] i:after {
    transform: translate(2px, 0) rotate(-45deg);
}
/*Bogue hérité du vocabulaire-2.css*/
.panneau a:visited {
    color :white!important;
}

/* boutons */


/* bouton rejouer  */

	.btn-secondary {
				background: #095797;
			}
			.btn-secondary:hover{
				background: #0889f3;
			}
			
			.btn-secondary.focus, .btn-secondary:focus {
      			 color: #fff;
  			     background: #0889f3;
  			     background: #0889f3;
  			     box-shadow: none;
				}