/* 	Complement de style */

/*- Message erreur/success/etc... ---------------------------
    Exemple d'utilisation 
        #1 - pour une erreur
            <div class="erreur">Ici le message d'erreur</div>
        #2 - pour une action réussi
            <div class="success">Ici le message d'erreur</div>
*/
    .espaceur{
        padding:5px;
    }
    .erreur {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
        background:#f8d7da;
        color:#ab313c;
        font-size: initial;
    }
    .erreur .titleMsg {
        padding:5px;
        font-style: normal;
        font-weight: bold;
        color:#ab313c;
    }    
    .success {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
        background:#def0d8;
        color:#3c7542;
        font-size: initial;
    } 
    .success .titleMsg {
        padding:5px;
        font-style: normal;
        font-weight: bold;
        color:#3c7542;
    }
    .information {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
        background:#cff4fc;
        color:#4545b1;
        font-size: initial;
        font-style: italic;
    } 
    .information .titleMsg {
        padding:5px;
        font-style: normal;
        font-weight: bold;
        color:#4545b1;
    }
    .attention {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
        background:#f9f3cf;
        color:#c36c47;
        font-size: initial;
    }
    .attention .titleMsg {
        padding:5px;
        font-style: normal;
        font-weight: bold;
        color:#c36c47;
    }
    

/*- Upload image--------------------------------------------
    A utiliser avec :
        <script> 
            function submitForm()...
            function handleFiles(files)...
    Exemple d'utilisation 
        <label for="upload"><span id="preview"><br><br>Zone de prévisualisation<br><br><br></span></label>
        <div class="input-file 12u">
            <button class="icon fa-download button small fit">Choisir un fichier image</button>
            <input type="file" onchange="handleFiles(files)" id="upload" multiple name="file">
        </div>

        <input type="submit" onclick="submitForm()" name="EnrImg" class="special small fit" value="Valider l'image">

++++++ ANCIEN (Ma version) +++++

    .input-file {
        display: inline-block;
        position: relative;
        overflow: hidden;
    }
    .input-file input[type=file] {
        left: 0;
        top: 0;
        opacity: 0;
        position: absolute;
        font-size: 90px;
    }
    #preview{
        border: solid 1px;
        border-color: rgba(144, 144, 144, 0.25);
        width: 100%;
        display: inline-block;
        text-align: center;
        color: #b7b7b7;
    }
    #preview img{
        width: 100%;
    }
    body, input, select, textarea{
        line-height:1.25;
    }

+++++ Ca version ++++++    */
.input-file {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.input-file input[type=file] {
    left: 0;
    top: 0;
    opacity: 0;
    position: absolute;
    font-size: 90px;
}

#preview {
    border: 1px solid rgba(144, 144, 144, 0.25);
    width: 100%;
    padding-top: 100%; /* 👈 carré parfait */
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #f9f9f9;
}

#preview span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #999;
    font-size: 0.9em;
    padding: 0.5em;
}

#preview img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* 🌐 Desktop – écran ≥ 768px */
@media screen and (min-width: 768px) {
    .photo-profil-actuelle {
        max-width: 80px; /* 👈 ici tu règles la taille desktop */
    }
}

/* 📱 Mobile – écran < 768px */
@media screen and (max-width: 767px) {
    .photo-profil-actuelle {
        max-width: 50px; /* 👈 taille mobile */
    }
}



/*- Balise de couleur pour text------------------------------ */
    txtred 		    { color: #FF0000; }
    txtredbold 	    { color: #FF0000; font-weight: bold; }
    txtgris		    { color: #bbbbbb; }
    txtgrisbold	    { color: #bbbbbb; font-weight: bold; }
    txtgrey		    { color: #b3b2b2; }
    txtgreybold	    { color: #b3b2b2; font-weight: bold; }
    txtnoir		    { color: #000000; }
    txtnoirbold	    { color: #000000; font-weight: bold; }
    txtgreen	    { color: #1abc9c; }
    txtgreenbold    { color: #1abc9c; font-weight: bold; }
    txtblue	        { color: #3498db; }
    txtbluebold     { color: #3498db; font-weight: bold; }
    txtviolet       { color: #9b59b6; }
    txtvioletbold   { color: #9b59b6; font-weight: bold; }
    txtjaune        { color: #ffe600; }
    txtjaunebold    { color: #ffe600; font-weight: bold; }
    txtorange       { color: #ff8800; }
    txtorangebold   { color: #ff8800; font-weight: bold; }
    txtbeige        { color: #FFE3BB; }
    txtbeigebold    { color: #FFE3BB; font-weight: bold; }
    txtsaumon       { color: #FFA673; }
    txtsaumonbold   { color: #FFA673; font-weight: bold; }
    txtbordeau      { color: #A02334; }
    txtbordeaubold  { color: #A02334; font-weight: bold; }
    txtnavy         { color: #27548A; }
    txtnavybold     { color: #27548A; font-weight: bold; }
    
    .txtred 		{ color: #FF0000; }
    .txtredbold 	{ color: #FF0000; font-weight: bold; }
    .txtgris		{ color: #bbbbbb; }
    .txtgrisbold	{ color: #bbbbbb; font-weight: bold; }
    .txtgrey		{ color: #b3b2b2; }
    .txtgreybold	{ color: #b3b2b2; font-weight: bold; }
    .txtnoir		{ color: #000000; }
    .txtnoirbold	{ color: #000000; font-weight: bold; }
    .txtgreen	    { color: #1abc9c; }
    .txtgreenbold   { color: #1abc9c; font-weight: bold; }
    .txtblue	    { color: #3498db; }
    .txtbluebold    { color: #3498db; font-weight: bold; }
    .txtviolet      { color: #9b59b6; }
    .txtvioletbold  { color: #9b59b6; font-weight: bold; }
    .txtjaune       { color: #ffe600; }
    .txtjaunebold   { color: #ffe600; font-weight: bold; }
    .txtorange      { color: #ff8800; }
    .txtorangebold  { color: #ff8800; font-weight: bold; }
    .txtbeige       { color: #FFE3BB; }
    .txtbeigebold   { color: #FFE3BB; font-weight: bold; }
    .txtsaumon      { color: #FFA673; }
    .txtsaumonbold  { color: #FFA673; font-weight: bold; }
    .txtbordeau     { color: #A02334; }
    .txtbordeaubold { color: #A02334; font-weight: bold; }
    .txtnavy        { color: #27548A; }
    .txtnavybold    { color: #27548A; font-weight: bold; }

/*- Contour avatar ------------------------------------------- */
    .align_image{ float:left; }
    .stop_align	{ clear:both; }


/*- Boite d'alerte pour :-------------------------------------
        Pour les actions suivanta
            - Separation de couple
            - Suppression d'élève
            - Suppression de mouvement
*/
    #SepareCpl, #SupEleve, #SupMVT {
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width:100%;
        height:100%;
        text-align:center;
        z-index: 1000;
    }
    #SepareCpl div, #SupEleve div, #SupMVT div {
        width:350px;
        height: 180px;
        margin: 100px auto;
        background-color: #FFF5EE;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius:  10px;
        border:1px solid black;
        padding:15px;
        text-align:center;
        font-weight: bold;
        font-size: 15px;
        border: 3px solid black;
        position: absolute;
        left: 50%;
        top: 100px;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }		


/*- Div accordeon--------------------------------------------- 
    Fonctionnement exemple
        <label for="checkBtn2">Afficher/masquer la div</label>
        <input type="checkbox" id="checkBtn2">
        <div id="listing2">texte a afficher ou a masquer</div>

        <label for="checkBtn4">Afficher/masquer la div</label>
        <input type="checkbox" id="checkBtn4">
        <div id="listing4">texte a afficher ou a masquer</div>

    Routine pour 9 div 
*/
    #checkBtn1, #checkBtn2, #checkBtn3, #checkBtn4, #checkBtn5, #checkBtn6, #checkBtn7, #checkBtn8, #checkBtn9{display:none;}
    #listing1, #listing2, #listing3, #listing4, #listing5, #listing6, #listing7, #listing8, #listing9{display:none;}
    #checkBtn1:checked ~ #listing1{display:block;}
    #checkBtn2:checked ~ #listing2{display:block;}
    #checkBtn3:checked ~ #listing3{display:block;}
    #checkBtn4:checked ~ #listing4{display:block;}
    #checkBtn5:checked ~ #listing5{display:block;}
    #checkBtn6:checked ~ #listing6{display:block;}
    #checkBtn7:checked ~ #listing7{display:block;}
    #checkBtn8:checked ~ #listing8{display:block;}
    #checkBtn9:checked ~ #listing9{display:block;}