/******************************************************     BALISES  GENERALES    ***********************/

body {
    font-family: "Poppins", "sans-serif" !important;
    font-size: 1.125rem;
    line-height: 1.75rem;
    /* pour footer */
    margin:0;
    display: flex;
    flex-direction: column;
}

footer{
    margin-top: auto;
    flex-shrink: 0;
}

header{
    height: 4rem;
    background-color: #000000;
    position: relative;
    flex-shrink: 0;
}

header::after{
    content: "";
    height: 1.5rem;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background-color: #000000;
    border-bottom-left-radius: 200%;
    border-bottom-right-radius: 200%;
    /*box-shadow: 1px 1px 9px 0px #9c195d;*/
}

[type="text"], [type="password"], [type="email"], [type="tel"], .champ{
    border: #AAAAAA solid 1px;
    border-radius: 0.25rem;
}

a{
    cursor:pointer;
}

span{
    display: inline-block;
}

html, body {
    height: 100%;
}

.content {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

/*  *********************************************           BOUTONS                 ********************************/

.bouton-rose{
    margin-top: 2.5rem;
    margin-inline: auto;
    display: block;
    padding: 0.75rem 1.25rem;
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-duration: 300ms;
    border-radius: 0.25rem;
    line-height: 1.375;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    --tw-border-opacity: 1;
    border-width: 1px;
    border-color: rgba(236, 72, 153, var(--tw-border-opacity));
    background-color: #E7087C;
}

.bouton-rose:hover{
    background-color: white;
    color: #E7087C;
}

/*  *********************************************           MODAL                  ********************************/


.modal-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.342);
    z-index: 99;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    background: white;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    border-radius: 0.5rem;
}

.modal-content {
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-inline: 2rem;
}
/*  *********************************************  CHARTE GRAPHIQUE (COULEURS) ********************************/

.bleu{
    color: royalblue;
}

.bleu-ciel{
    color: #13A5C9;
}

.bg-bleu-ciel{
    background-color: #13A5C9;
}

.rose{
    color: #E7087C;
}

.vert-pomme{
    color: #13C937;
}

.bg-vert-pomme{
    background-color: #13C937;
}

.border-vert-pomme{
    border-color: #13C937;
}

.bg-vert-clair{
    background-color: palegreen;
}


.bg-rose{
    background-color: #000000;
}

.bg-rose-interm{
    background-color: #FF85BC;
}

.bg-rose-pale{
   background-color: #F8E7E7;
}

.rouge-verbe{
    color: #FF0404;
}

.bg-rouge{
    background-color: #FF0404;
}

.orange-adverbe{
    color: #FF9200;
}

.bg-orange{
    background-color: #FF9200;
}

.violet-deter{
    color: #8716C9;
}

/* ********************************************** BOUTONS RADIO CUSTOM ******************************** */

/* Hide the browser's default radio button */
.container input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Create a custom radio button */
.checkmark {
    position: relative;
    height: 25px;
    width: 25px;
    background-color: white;
    border-radius: 50%;
    overflow: hidden;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #e65ea8;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 50%;
    left: 50%;
    transform: translate(-45%, -53%);
    height: 60%;
    width: 60%;
    border-radius: 50%;
    background: white;
}

.checkmark:before {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:before {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:before {
    left: 50%;
    top: 50%;
    transform: translate(-40%, -53%);
    height: 25%;
    width: 25%;
    border-radius: 50%;
    background: #e65ea8;
    z-index: 3;
}

/* ****************************************************   RONDS SECTIONS & MICRO   *****************************************/

.micro, .ecoute, .ecoute-cours {
    color: #E7087C;
    font-size: large;
    position: relative;
    display: block;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border-radius: 50%;
    border: 1px solid #E7087C;
    background: white;
    transition: background 0.2s ease-in;
    transition: box-shadow 0.2s ease-in-out;
}

.micro-cours, .ecoute-cours{
    width: 2.8rem;
    height: 2.8rem;
    min-width: 2.8rem;
}


.micro:hover, .ecoute:hover, .ecoute-cours:hover {
    color: white;
    background: #E7087C;
    cursor: pointer;
}

.micro.recording {
    background: white;
    color: #E7087C;
    box-shadow: 0 0 0 2px #E7087C, 0 0 0 4px #F5B7B1 ;
}

.micro i, .ecoute i, .ecoute-cours i{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.record-start, .record-end {
    display: none;
}

.rond-section{
    min-width: 3rem;
    min-height: 3rem;
    padding: 0.5rem;
    background-color: white;
    border: #E7087C solid 2px;
    border-radius: 50%;
    transition: background 0.2s ease-in;
    transition: box-shadow 0.2s ease-in-out;
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #E7087C;
}

.rond-section i{
    font-size: large;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.rond-section:hover{
    background-color: #E7087C;
    color: white
}

.valide{
    background-color: #E7087C;
    color: white;
}

/* Pour masquer la barre de scroll horizontale des sections sur la page "leçons" */
#sections-scroll::-webkit-scrollbar {
    display: none;
    width: 0 !important
}
#sections-scroll{
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}


/*  ******************************************************************  TEXTES ********************************/

.description{
    font-size: 0.95rem;
    line-height: 1.3rem;
    text-align: justify;
}
@media all and (max-width: 1024px){
    .description{
        font-size: 0.9rem;
        line-height: 1.2rem;
        text-align: justify;
    }
}

@media all and (max-width: 767px){
    .description{
        font-size: 0.8rem;
        line-height: 1rem;
        text-align: justify;
    }
}

.form-erreur{
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(220, 38, 38, var(--tw-text-opacity));
}

/*  ******************************************************************  IMAGES ********************************/

figure img, a img{
    width: 100%;
}

.profile-img-container {
    border-radius: 50%;
    width: 130px;
    height: 130px;
    overflow: hidden;
    display: block;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.582);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.582);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
    color: transparent;
    text-align: center;
    font-size: 0.9em;
    /*font-weight: bold;*/
    cursor: pointer;
}

.profile-img-container:after {
    background: rgba(59, 49, 49, 0.712);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    visibility: hidden;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    opacity: 0;
}

.profile-img-container:hover {
    color: whitesmoke;
}

.profile-img-container:hover:after {
    opacity: 1;
    visibility: visible;
}

.profile-img-container img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.profile-img-container span {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 5;
}

.img-preview-container {
    width: 150px;
    height: 150px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.582);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.582);
}

.miniature-preview-container {
    min-width: 320px;
    height: 213px;
    display: block;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-right: 5rem;
    margin-top: 1rem;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.582);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.582);
}

.img-preview-container .img-preview , .miniature-preview-container .img-preview {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.file-select {
    width: 100%;
    display: inline-block;
    border: 1px solid rgb(70, 70, 70);
    cursor: pointer;
    border-radius: 0.25rem;
}

.certif{
    width: 6rem;
}

.miniature-formation, .miniature-lecon{
    border-radius: 0.5rem;
    min-width: 15rem;
    max-width: 15rem;
    min-height: 10rem;
    margin-right: 1.25rem;
    overflow: hidden;
}

@media all and (max-width: 767px){
    .miniature-formation, .miniature-lecon{
        min-width: 100%;
        min-height: 10rem;
        margin: 0 0 1.25rem 0;
        overflow: hidden;
    }
}

.miniature-formation img, .miniature-lecon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.miniature{
    position: relative;
}

.miniature.disabled::after{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 50;
    border-radius: 0.5rem;
}

.cadenas{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

/*  ************************************************  LECONS  ********************************/


.vocabulaire
{
    color: #E7087C;
}
.vocabulaire:hover
{
    border-color: #13C937;
    color: #13C937;
}

.titre-lecon-section{
    color: #E7087C;
}

/*  ************************************************  EXERCICES  ********************************/

/*.question-relier, .proposition-relier{
    cursor: pointer;
}*/

.cache{
    display: none;
}

/*.fleche-haut, .fleche-bas{
    color: #707070;
    cursor: pointer;
}

.fleche-haut:hover{
    color: #13C937;
}

.fleche-bas:hover{
    color: #E7087C;
}*/

.bloc-reperer{
    cursor: pointer;
}

.bloc-reperer:hover{
    background-color: #F8E7E7;
}

.selectionne {
    background-color: #FF85BC;
}

.hold{
    border: #E7087C dashed 2px;
}

.hovered{
    background-color: #FF85BC;
}

/*  ************************************************  DIALOGUE  ********************************/

/*.replique-gauche img, .replique-droite img {
    min-width: 2rem;
    min-height: 2rem;
    border: #707070 solid 2px;
    border-radius: 50%;
    display: block;
}*/

.replique-gauche
{
    background-color: palegreen;
    width: 100%;
    padding: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    transition: all 1s ease-in;
}

.replique-droite{
    background-color: plum;
    width: 100%;
    padding: 0.5rem;
    border-top-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    transition: all 0.5s ease-in;
}

@media all and (min-width: 640px){ /*sm*/
    .replique-gauche, .replique-droite{
        width: 60%;
        padding: 1rem;
    }
}

@media all and (min-width: 1280px){ /*xl*/
    .replique-gauche, .replique-droite{
        width: 55%;
    }
}

@media all and (min-width: 1536px){ /*2xl*/
    .replique-gauche, .replique-droite{
        width: 50%;
    }
}