/* --------------------------------------------
----                                       ----
----  EN MODE DE FONCTIONNEMENT TELEPHONE  ----
----                                       ----
-----------------------------------------------
*/

@media screen and (max-width:767.98px) {

    .content{
        margin-top: 30px;
    }

    /* Styles généraux pour le container */
    .details-container {
        background-color: #0e1c274d;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        padding: 30px;
        max-width: 100%;
        /* S'adapte mieux aux petits écrans */
        margin: 20px auto;
        /* Marge ajustée pour mobile */
        position: relative;
        box-sizing: border-box;
        text-align: center;
        width: 90%;
    }

    /* En-tête avec la croix de fermeture */
    .header-nouveau-site {
        position: absolute;
        top: 15px;
        right: 15px;

    }

    /* Conteneur de la ligne Logo (texte + upload) */
    .logo-site-row-new {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        padding-bottom: 5px;
        margin-top: 40px;
    }

    /* Style de l'étiquette "Logo du site" */
    .logo-label-new {
        color: black;
        /* Couleur de texte pour correspondre au design */
        font-size: 1rem;
        font-weight: bold;
        /* Optionnel : pour faire ressortir l'étiquette */
        flex-shrink: 0;
        /* Empêche le label de se réduire */
        padding-right: 15px;
        /* Espace entre le label et l'upload container */
    }

    /* Modification du conteneur d'upload existant pour qu'il ne soit pas centré */
    .logo-upload-container {

        justify-content: flex-end;
        margin-bottom: 0;
        /* On retire la marge basse car elle est sur le parent .logo-site-row-new */
    }




    /* Section pour le logo et le bouton d'upload */
    .logo-upload-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        position: relative;
    }

    .logo-placeholder {
        width: 100px;
        height: 100px;
        background-color: #ffffffa6;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

    }

    .logo-placeholder .placeholder-icon {
        width: 60px;
        height: 60px;
        opacity: 0.7;
    }

    .logo-placeholder img:not([src*="image-fill.svg"]) {
        /* Nous ciblons toutes les images dans le placeholder qui ne sont pas l'icône par défaut */
        width: 100%;
        /* Force l'image à prendre toute la largeur du conteneur */
        height: 100%;
        /* Force l'image à prendre toute la hauteur du conteneur */
        object-fit: contain;
        /* Redimensionne l'image pour qu'elle soit entièrement visible */
        opacity: 1;
        /* Supprime l'opacité appliquée par .placeholder-icon */
    }

    /* Ajustement de l'icône d'upload pour la placer à droite du logo */
    .upload-button {
        /* On retire la position: static; pour utiliser le flexbox */
        display: flex;
        align-items: center;
        padding-left: 20px;
        /* Espace entre le logo et l'icône d'upload */
        cursor: pointer;
    }

    .upload-button .upload-icon {
        width: 30px;
        height: 30px;
    }

    /* Lignes de détails (icône + champ) */
    .detail-row-new {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 1px solid #b0c4de;
        /* La ligne de séparation */
        padding-bottom: 5px;
        text-align: left;
        /* Assure que le texte/placeholder s'aligne à gauche */
    }

    .detail-icon-new {
        width: 25px;
        height: 25px;
        margin-right: 15px;
    }

    input[type="text"],
    input[type="tel"],
    input[type="email"] {
        flex-grow: 1;
        border: none;
        background-color: transparent;
        color: black;
        font-size: 1rem;
        outline: none;
        /* Règle pour mieux aligner le texte avec l'icône */
        padding: 5px 0;
    }

    /* Placeholder text color */
    input::placeholder {
        color: #212224;
        font-style: italic;
    }


    .action-button-modal {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        /* Espace entre l'icône et le texte */
        width: 100%;
        padding: 10px;
        margin-top: 20px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        background-color: transparent;
        color: white;
        /* Texte en blanc */
        font-size: 1.1em;
        /* Texte légèrement plus grand */
        font-weight: bold;
        transition: background-color 0.3s;
    }

    .action-button-modal img {
        width: 25px;
        height: 25px;
    }

    .save-button-modal {
        background-color: #478ac9;
    }

    .save-button-modal:hover {
        background-color: #2d6ca8;
    }


    .close-button {
        position: absolute;
        top: 0px;
        right: 5px;
        font-size: 3.5em;
        font-weight: bold;
        color: black;
        text-decoration: none;
        z-index: 100;

    }

    /* Styles pour les messages de succès et d'erreur (Style Utilisateur) */
    .alertSuccess {
        background-color: #d4edda;
        color: #155724;
        padding: 10px;
        margin: 50px 0 20px 0;
        border: 1px solid #c3e6cb;
        border-radius: 5px;
        text-align: center;
    }

    .alertError {
        background-color: #f8d7da;
        color: #721c24;
        padding: 10px;
        margin: 50px 0 20px 0;
        border: 1px solid #f5c6cb;
        border-radius: 5px;
        text-align: center;
    }

}

/* -----------------------------------------
----                                    ----
----  EN MODE DE FONCTIONNEMENT PC      ----
----                                    ----
--------------------------------------------
*/

@media screen and (min-width:768px) {
    /* Mettez les styles pour les écrans plus larges ici */


    /* L'upload-button est décalé pour le grand écran */
    .upload-button {
        padding-left: 30px;
        /* Plus d'espace sur grand écran */
    }

    /* Styles généraux pour le container */
    .details-container {
        background-color: #0e1c274d;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        padding: 30px;
        max-width: 150%;
        /* S'adapte mieux aux petits écrans */
        margin: 20px auto;
        /* Marge ajustée pour mobile */
        position: relative;
        box-sizing: border-box;
        text-align: center;
        width: 150%;
    }

    /* En-tête avec la croix de fermeture */
    .header-nouveau-site {
        position: absolute;
        top: 15px;
        right: 15px;

    }

    /* Conteneur de la ligne Logo (texte + upload) */
    .logo-site-row-new {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 10px;
        padding-bottom: 5px;
        margin-top: 40px;
    }

    /* Style de l'étiquette "Logo du site" */
    .logo-label-new {
        color: black;
        /* Couleur de texte pour correspondre au design */
        font-size: 1rem;
        font-weight: bold;
        /* Optionnel : pour faire ressortir l'étiquette */
        flex-shrink: 0;
        /* Empêche le label de se réduire */
        padding-right: 15px;
        /* Espace entre le label et l'upload container */
    }

    /* Modification du conteneur d'upload existant pour qu'il ne soit pas centré */
    .logo-upload-container {

        justify-content: flex-end;
        margin-bottom: 0;
        /* On retire la marge basse car elle est sur le parent .logo-site-row-new */
    }




    /* Section pour le logo et le bouton d'upload */
    .logo-upload-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        position: relative;
    }

    .logo-placeholder {
        width: 100px;
        height: 100px;
        background-color: #ffffffa6;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

    }

    .logo-placeholder .placeholder-icon {
        width: 60px;
        height: 60px;
        opacity: 0.7;
    }

    .logo-placeholder img:not([src*="image-fill.svg"]) {
        /* Nous ciblons toutes les images dans le placeholder qui ne sont pas l'icône par défaut */
        width: 100%;
        /* Force l'image à prendre toute la largeur du conteneur */
        height: 100%;
        /* Force l'image à prendre toute la hauteur du conteneur */
        object-fit: contain;
        /* Redimensionne l'image pour qu'elle soit entièrement visible */
        opacity: 1;
        /* Supprime l'opacité appliquée par .placeholder-icon */
    }

    /* Ajustement de l'icône d'upload pour la placer à droite du logo */
    .upload-button {
        /* On retire la position: static; pour utiliser le flexbox */
        display: flex;
        align-items: center;
        padding-left: 20px;
        /* Espace entre le logo et l'icône d'upload */
        cursor: pointer;
    }

    .upload-button .upload-icon {
        width: 30px;
        height: 30px;
    }

    /* Lignes de détails (icône + champ) */
    .detail-row-new {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 1px solid #b0c4de;
        /* La ligne de séparation */
        padding-bottom: 5px;
        text-align: left;
        /* Assure que le texte/placeholder s'aligne à gauche */
    }

    .detail-icon-new {
        width: 25px;
        height: 25px;
        margin-right: 15px;
    }

    input[type="text"],
    input[type="tel"],
    input[type="email"] {
        flex-grow: 1;
        border: none;
        background-color: transparent;
        color: black;
        font-size: 1rem;
        outline: none;
        /* Règle pour mieux aligner le texte avec l'icône */
        padding: 5px 0;
    }

    /* Placeholder text color */
    input::placeholder {
        color: #212224;
        font-style: italic;
    }


    .action-button-modal {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        /* Espace entre l'icône et le texte */
        width: 100%;
        padding: 10px;
        margin-top: 20px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        background-color: transparent;
        color: white;
        /* Texte en blanc */
        font-size: 1.1em;
        /* Texte légèrement plus grand */
        font-weight: bold;
        transition: background-color 0.3s;
    }

    .action-button-modal img {
        width: 25px;
        height: 25px;
    }

    .save-button-modal {
        background-color: #478ac9;
    }

    .save-button-modal:hover {
        background-color: #2d6ca8;
    }



    .close-button {
        position: absolute;
        top: 0px;
        right: 5px;
        font-size: 3.5em;
        font-weight: bold;
        color: black;
        text-decoration: none;
        z-index: 100;

    }

    /* Styles pour les messages de succès et d'erreur (Style Utilisateur) */
    .alertSuccess {
        background-color: #d4edda;
        color: #155724;
        padding: 10px;
        margin: 50px 0 20px 0;
        border: 1px solid #c3e6cb;
        border-radius: 5px;
        text-align: center;
    }

    .alertError {
        background-color: #f8d7da;
        color: #721c24;
        padding: 10px;
        margin: 50px 0 20px 0;
        border: 1px solid #f5c6cb;
        border-radius: 5px;
        text-align: center;
    }
}