/*
Theme Name: Coppelius chat
Template: astra
Version: 1.0.0
*/

/* --- Règles de Base --- */
body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(to top, #000018 0%, #001b33 60%, #023651 70%, #045b7a 80%, #09a4cc 90%) !important;
    background-attachment: fixed !important;
    overflow-x: hidden;
    color: #9EC9F5; /* Texte bleu clair */
    font-family: 'Cormorant Garamond', serif;
}

h1 {
    font-family: 'Cinzel Decorative', cursive;
    color: #DC7501; /* Titres cuivrés */
}
h2, h3, h4, h5, h6 {
    font-family: 'Cinzel Decorative', cursive;
	font-size:1rem;
    color: #DC7501; /* Titres cuivrés */
}
a:not(.main-navigation li a) {
    color: #DC7501!important;
}

/* --- Fond étoilé --- */
body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(1px 1px at 50% 80%, white, transparent),
        radial-gradient(1.5px 1.5px at 70% 20%, white, transparent),
        radial-gradient(1px 1px at 90% 60%, white, transparent),
        radial-gradient(2px 2px at 40% 50%, white, transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: twinkle 4s infinite alternate;
    pointer-events: none;
    z-index: -1;
}

@keyframes twinkle {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

/* --- Mise en page de l'en-tête --- */
.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

.header-top {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo-container img {
    height: 250px;
    width: auto;
}

.text-container {
    text-align: left;
}

.site-title {
    font-family: 'Cinzel Decorative', cursive !important;
    font-weight: 400;
    text-transform: capitalize;
    color: #DC7501;
    font-size: 3rem;
    margin: 0;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #a75200;
}

.site-description {
    font-family: 'Cormorant Garamond', serif !important;
    color: #DC7501;
    font-size: 2rem;
    margin: 0;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #a75200;
}

/* Anime le chat au survol */
.logo-image:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

/* --- Navigation principale --- */
.main-navigation {
    border-bottom: 2px solid #9EC9F5;
    margin-top: 20px;
    width: 100%;
    text-align: center;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-navigation li a {
    font-family: 'Cinzel Decorative', cursive !important;
    color: #9EC9F5;
    text-decoration: none;
    font-size: 1.2rem;
    padding: 10px 20px;
    display: block;
    transition: transform 0.3s ease-in-out;
}

/* Effet de survol sur les liens du menu */
.main-navigation li a:hover {
    transform: scale(1.1) translateY(-3px);
    color: #DC7501 !important;
}

/* --- Styles pour les images intégrées dans le texte --- */
.wp-block-image img,
.entry-content img {
    border: 2px solid #DC7501!important;
    padding: 5px!important;
    border-radius: 8px!important;
    display: block;
    height: auto;
    max-width: 100%;
}

/* Aligner à gauche */
.alignleft {
    float: left;
    margin: 0 15px 15px 0;
}

/* Aligner à droite */
.alignright {
    float: right;
    margin: 0 0 15px 15px;
}

/* Centrer l'image */
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* --- Contenu des pages/articles --- */
.content-area {
    padding: 40px;
}

.ornamented-frame {
    background-color: rgba(158, 201, 245, 0.1);
    border: 2px solid #DC7501;
    padding: 20px;
    position: relative;
    z-index: 5;
    word-wrap: break-word;
}

.ornamented-frame::before,
.ornamented-frame::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #DC7501;
}

.ornamented-frame::before {
    top: -10px;
    left: -10px;
    border-right: none;
    border-bottom: none;
}

.ornamented-frame::after {
    bottom: -10px;
    right: -10px;
    border-left: none;
    border-top: none;
}

/* Limiter la largeur du contenu pour une meilleure lisibilité */
.site-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/*
 * Ce code permet d'activer les options d'alignement dans Gutenberg
 * et assure un meilleur affichage des images dans le texte.
 */
.wp-block-image {
    display: inline-block;
}

/*
 * Ce code corrige les problèmes de couleurs et de contraste
 * et s'assure que le menu reste lisible.
 */
body.page,
body.single-post {
    background-color: #002943;
}

.site-header {
    /* Fond du header rendu transparent */
    background-color: transparent; 
    color: inherit;
}

.site-title a,
.main-navigation a {
    color: inherit;
}

/*
 * Rendre le texte des articles plus grand et plus lisible.
 * On augmente la taille de la police pour le contenu des articles et des pages.
 */
.entry-content,
.entry-content p {
    font-size: 1.3rem !important;
    line-height: 1.8 !important;
}
.entry-content a,
.entry-content a:link,
.entry-content a:visited,
.entry-content a:hover,
.entry-content a:active {
    color: #DC7501 !important;
}
/*
 * Règle plus forte pour forcer l'alignement des images
 * afin de surmonter les conflits de styles par défaut.
 */
.wp-block-image.alignright {
    float: right !important;
    margin: 0 0 1em 2em !important;
}

.wp-block-image.alignleft {
    float: left !important;
    margin: 0 2em 1em 0 !important;
}

/* ======================================= */
/* --- RESPONSIVE DESIGN (Media Queries) --- */
/* ======================================= */

/* Pour les écrans de 768px et moins (tablettes) */
@media (max-width: 768px) {
    .header-top {
        flex-direction: column; /* Empile le logo et le texte verticalement */
        text-align: center;
        gap: 10px;
    }

    .site-title {
        font-size: 2.5rem; /* Réduit la taille du titre */
    }

    .site-description {
        font-size: 1.5rem; /* Réduit la taille de la description */
    }

    .logo-container img {
        height: 200px; /* Réduit la taille du logo */
    }
    
    .entry-content,
    .entry-content p {
        font-size: 1.2rem !important;
        line-height: 1.7 !important;
    }
}
/* --- Style des icônes de réseaux sociaux (Font Awesome) --- */

.fa-instagram, .fa-facebook-f, .fab.fa-instagram, .fab.fa-facebook-f {
    font-size: 50px; /* Augmente la taille des icônes */
    color: #9EC9F5; /* Change la couleur de base */
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

.fa-instagram:hover, .fa-facebook-f:hover, .fab.fa-instagram:hover, .fab.fa-facebook-f:hover {
    transform: scale(1.2); /* Effet de zoom au survol */
    color: #DC7501; /* Change la couleur au survol */
}
/* Pour les écrans de 480px et moins (smartphones) */
@media (max-width: 480px) {
    .site-title {
        font-size: 2rem; /* Réduit encore la taille du titre */
        -webkit-text-stroke-width: 0.5px;
    }

    .site-description {
        font-size: 1.2rem; /* Réduit encore la taille de la description */
    }

    .logo-container img {
        height: 150px; /* Réduit encore la taille du logo */
    }

    .main-navigation ul {
        flex-direction: column; /* Empile les liens de navigation verticalement */
        align-items: center;
    }

    .main-navigation li a {
        font-size: 1rem; /* Réduit la taille des liens */
        padding: 5px 10px;
    }

    .content-area {
        padding: 20px; /* Réduit le rembourrage des pages */
    }

    .ornamented-frame {
        padding: 15px; /* Réduit le rembourrage du cadre */
    }

    .ornamented-frame::before,
    .ornamented-frame::after {
        width: 15px;
        height: 15px;
    }

    .ornamented-frame::before {
        top: -7px;
        left: -7px;
    }

    .ornamented-frame::after {
        bottom: -7px;
        right: -7px;
    }
    
    .entry-content,
    .entry-content p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
}
/* --- Correction du formulaire de contact pour mobile --- */
/* Permet d'éviter le débordement des champs de texte */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100% !important; /* Force les champs à prendre toute la largeur disponible */
    box-sizing: border-box !important; /* Inclut le padding et la bordure dans la largeur */
    max-width: 100% !important; /* S'assure qu'ils ne dépassent jamais la largeur du conteneur */
}

/* Ajustements pour les petits écrans */
@media (max-width: 768px) {
    .wpcf7-form-control-wrap {
        padding: 0 !important; /* Élimine les rembourrages superflus sur mobile */
    }
}