/*
Theme Name: Blocksy Enfant
Description: Theme enfant de Blocksy. Vous pouvez maintenant effectuer vos modifications en toute sécurité.
Author: Kaellyana Web
Author URI: https://www.kaellyana.com
Template: blocksy
Version: 1.0
*/
/* Import du style du thème parent */
@import url("../blocksy/style.css");

/* Ajoutez vos styles personnalisés ici */
/* ------------------------------------------------------
    Bouton gutenberg personnalisé DEBUT
------------------------------------------------------- */

div.wp-block-button.bouton-personnalise .wp-block-button__link {
    background-color: #e5d2d4 !important; /* Couleur de fond */
    color: #333333 !important; /* Couleur du texte */
    border-radius: 50px !important; /* Coins arrondis */
    padding: 20px !important; /* Espacement interne */
    transition: all 0.3s ease !important; /* Transition */
}
/* ------------------------------------------------------
    Bouton gutenberg FIN
------------------------------------------------------- */


/* ------------------------------------------------------
    Centrer image article DEBUT
------------------------------------------------------- */

.single-post .ct-media-container {
    display: flex;
    justify-content: center; /* Centrer horizontalement l'image */
    max-width: 600px; /* Ajuster la largeur maximale du conteneur si nécessaire */
    margin: 0 auto; /* S'assurer que le conteneur est centré dans la page */
}
    
/* Assurer que l'image elle-même occupe toute la largeur du conteneur */
.single-post .ct-media-container img {
    width: 100%; /* L'image prend toute la largeur disponible dans le conteneur */
    height: auto; /* Conserver les proportions de l'image */
    object-fit: cover; /* Assurer un bon recadrage sans distorsion */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ajouter une ombre douce */
    border-radius: 10px; /* Bords arrondis */
    max-height: 450px; /* Ajuster la hauteur maximale de l'image */
}

/* ------------------------------------------------------
    Centrage image article FIN
------------------------------------------------------- */
/* Champs de texte (Nom, Email, Site Web) du formulaire de commentaire */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    background-color: #ffffff !important; /* Fond blanc propre et minimaliste */
    color: #6F6F6F !important; /* Texte avec la couleur définie pour le contenu */
    border: 1px solid #6F6F6F !important; /* Bordure en harmonie avec le reste du site */
    padding: 12px !important; /* Espacement interne pour le confort de saisie */
    border-radius: 6px !important; /* Bords arrondis pour une touche moderne */
    width: 100%; /* Assurer que le champ prenne toute la largeur du conteneur */
    box-sizing: border-box; /* Pour que le padding et la bordure soient inclus dans la largeur totale */
}

/* Cibler la case à cocher du formulaire de commentaire */
.comment-form input[type="checkbox"] {
    accent-color: #6F6F6F !important; /* Appliquer la couleur personnalisée */
    width: 20px; /* Ajuster la largeur si nécessaire */
    height: 20px; /* Ajuster la hauteur si nécessaire */
    margin-right: 5px; /* Ajouter un espace à droite pour éviter que la case soit collée à l'étiquette */
}

/* Style de l'étiquette associée à la case à cocher */
.comment-form label[for="wp-comment-cookies-consent"] {
    font-weight: 500; /* Rendre le texte de l'étiquette légèrement plus visible */
    color: #6F6F6F; /* Harmoniser la couleur du texte de l'étiquette avec le reste du site */
    margin-left: 5px; /* Ajouter un petit espace entre la case à cocher et l'étiquette */
    line-height: 1.5; /* Ajuster l'espacement vertical pour un meilleur alignement */
}



/* Style pour arrondir uniquement les angles supérieurs des onglets */
.elementor-tabs-wrapper .elementor-tab-title {
    border-top-left-radius: 10px; /* Arrondir l'angle supérieur gauche */
    border-top-right-radius: 10px; /* Arrondir l'angle supérieur droit */
    overflow: hidden; /* Empêche le contenu de déborder des coins arrondis */
}

.elementor-tabs-wrapper .elementor-tab-title.active {
    border-top-left-radius: 10px; /* Arrondir l'angle supérieur gauche de l'onglet actif */
    border-top-right-radius: 10px; /* Arrondir l'angle supérieur droit de l'onglet actif */
}
/* ------------------------------------------------------
   Style du bouton "Lire la suite" DEBUT
------------------------------------------------------- */
/* Style par défaut pour les boutons "Lire la suite" */
.elementor-post__read-more {
    background-color: #E5D2D4 !important; /* Couleur rose clair */
    color: #333333 !important; /* Texte noir */
    border-radius: 30px !important; /* Coins arrondis */
    padding: 8px 20px !important; /* Espacement intérieur du bouton */
    transition: background-color 0.3s ease, color 0.3s ease !important; /* Animation douce */
    font-family: Arial, sans-serif !important; /* Typographie Arial */
    font-size: 18px !important; /* Taille du texte 18px */
    font-weight: normal !important; /* Pas de gras */
    text-transform: uppercase !important; /* Texte en majuscules */
    display: inline-flex; /* Alignement du texte et du SVG */
    align-items: center; /* Centrage vertical */
}

/* Style au survol du bouton */
.elementor-post__read-more:hover {
    background-color: #333333 !important; /* Fond noir */
    color: #FFFFFF !important; /* Texte blanc */
}

/* Ajout de la flèche SVG après le texte */
.elementor-post__read-more::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17px' height='17px' viewBox='0 0 32 32' fill='%23333333'%3E%3Cpath d='M21.1875 9.28125 L19.78125 10.71875 L24.0625 15 L4 15 L4 17 L24.0625 17 L19.78125 21.28125 L21.1875 22.71875 L27.90625 16 Z'/%3E%3C/svg%3E");
    display: inline-block;
    vertical-align: middle; /* Aligne verticalement avec le texte */
    margin-left: 8px; /* Espace entre le texte et la flèche */
    transition: all 0.3s ease !important; /* Transition douce */
}


/* Animation de la flèche au survol */
.elementor-post__read-more:hover::after {
    transform: translateX(5px); /* Légère translation de la flèche */
    filter: brightness(0) invert(1); /* Rend la flèche blanche */
}
/* ------------------------------------------------------
   Style du bouton "Lire la suite" FIN
------------------------------------------------------- */

/* Uniformiser la taille des cartes */
.carte2-animation {
    display: flex; /* Utilise Flexbox pour gérer la disposition interne */
    flex-direction: column; /* Empile les éléments verticalement */
    justify-content: space-between; /* Assure un espacement uniforme entre les éléments */
    align-items: center; /* Centre les éléments horizontalement */
    height: 200px; /* Définit une hauteur uniforme pour toutes les cartes (ajuste selon le design) */
    padding: 15px; /* Ajoute un espace intérieur pour un meilleur rendu */
    box-sizing: border-box; /* Inclut le padding dans la hauteur totale */
    background-color: #fefefe; /* Optionnel : personnalise le fond */
    border: 1px solid #e0e0e0; /* Optionnel : bordure fine pour une finition propre */
}

/* Forcer le bouton à rester en bas */
.carte2-animation .elementor-button {
    margin-top: auto; /* Pousse le bouton en bas de la carte */
    align-self: center; /* Centre horizontalement le bouton */
}

/* Ajouter un effet hover sur les cartes */
.carte2-animation:hover {
    transform: translateY(-5px); /* Légère élévation au survol */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Ombre douce au survol */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation fluide */
}
/* Taille des titres produits uniquement dans le récapitulatif de commande */
.wc-block-components-order-summary .wc-block-components-product-name {
    font-size: 18px !important;
    font-weight: 600; 
    line-height: 1.4em;
}
/* ------------------------------------------------------
   Style du bouton "Lire la suite" DEBUT
------------------------------------------------------- */
.elementor-widget-pp-posts .pp-posts-button {
    background-color: #333333; /* Fond rose clair */
    color: #ffffff; /* Texte */
    border-radius: 30px; /* Coins arrondis */
    padding: 8px 20px; /* Espacement intérieur */
    font-family: Arial, sans-serif; /* Typo */
    font-size: 18px; /* Taille */
    font-weight: normal;
    text-transform: uppercase;
    display: inline-flex; /* texte + flèche alignés */
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* Hover */
.elementor-widget-pp-posts .pp-posts-button:hover {
    background-color: #333333 !important; /* Fond noir */
    color: #FFFFFF !important; /* Texte blanc */
}

/* Flèche intégrée (si activée dans Elementor/PowerPack) */
.elementor-widget-pp-posts .pp-posts-button::after {
    transition: transform 0.3s ease;
}

.elementor-widget-pp-posts:hover::after {
    transform: translateX(5px); /* Flèche glisse à droite */
}
/* ------------------------------------------------------
   Style du bouton "Lire la suite" FIN
------------------------------------------------------- */

/* -------------------------------
    LISTE DE PRIX - DEBUT
--------------------------------- */
.custom-price-list {
    list-style: none; /* Supprime les puces de liste */
    margin: 0;
    padding: 0;
}

.custom-price-list li {
    display: flex; /* Label + pointillés + prix en ligne */
    align-items: center; /* Aligne verticalement */
    margin: 10px 0;
}

/* Colonne gauche = intitulés (Durée, Zone 1, etc.) */
.custom-price-list .label {
    font-family: 'Oswald', sans-serif;
    font-size: 25px; /* Taille de police */
    font-weight: 500; /* Poids de la police */
    line-height: 1.2em;
    flex: 0 1 auto;
    text-align: left;
    color: #333333; /* Couleur du texte */
}

/* Colonne droite = prix */
.custom-price-list .value {
    font-family: 'Lato', sans-serif; /* Typographie */
    font-size: 22px; /* Taille de police */
    font-weight: 600; /* Poids de la police */
    line-height: 1.2em;
    flex: 0 0 auto;
    text-align: right; /* Aligné à droite */
    color: #333333; 
}

/* Pointillés entre label et prix */
.custom-price-list .dots {
    flex: 1;
    border-bottom: 1px dashed #D3C3AF; /* couleur */
    margin: 0 8px;
    position: relative;
    top: -2px; /* Ajustement vertical */
}

/* Sous-texte = zones géographiques */
.custom-price-list .subtext {
    font-family: Arial, sans-serif; /* Typographie */
    font-size: 18px; /* Taille de police */
    font-weight: 400; /* Poids de la police */
    line-height: 1.2em;
    color: #6F6F6F; /* Couleur du texte */
    margin: -4px 0 12px 0;
    display: block;
}

/* Version mobile (petits écrans) */
@media (max-width: 380px) {
  .custom-price-list li {
    flex-wrap: wrap; /* permet de passer sur 2 lignes */
  }

  .custom-price-list .value {
    width: 100%;       /* prix toute la largeur */
    text-align: left;  /* aligné à gauche */
    margin-top: 4px;
  }

  .custom-price-list .dots {
    display: none; /* Supprimer pointillés en mobile */
  }
}
/* -------------------------------
    LISTE DE PRIX - FIN
--------------------------------- */

/* -------------------------------
    PAGE 404 - DEBUT
--------------------------------- */
/* Fond rose sur page 404 */
body.error404 {
    background-color: #F8EDEE !important;
}

/* Mise en page 404 */
.custom-404 {
    text-align: center;
    padding: 50px 20px;
}

.custom-404 .error-title {
    font-family: 'Oswald', sans-serif;
    font-size: 200px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
    margin: 0.5em 0;
}

.custom-404 .error-text {
    font-family: Arial, sans-serif;
    font-size: 22px;
    color: #333;
    margin: 20px auto;
    max-width: 700px;
    line-height: 1.4em;
}

.custom-404 .error-btn {
    display: inline-block;
    background: #333;
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    font-family: Arial, sans-serif;
    font-size: 22px;
    text-decoration: none;
    margin: 30px 0;
    transition: all 0.3s ease;
}

.custom-404 .error-btn:hover {
    background: #555;
}

.custom-404 .error-subtitle {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #333;
    margin: 20px 0 10px;
}

.custom-404 .error-image img {
    max-width: 60%;
    height: auto;
    margin: 40px auto;
    display: block;
}

.custom-404 .error-footer {
    font-family: Arial, sans-serif;
    font-size: 21px;
    color: #333;
    margin: 30px 0;
}
/* Style du champ de recherche uniquement sur la page 404 */
body.error404 .search-form {
    max-width: 400px;   /* largeur max */
    margin: 20px auto;  /* centré */
    display: flex;
}

body.error404 .search-form input[type="search"] {
    flex: 1;
    padding: 10px 15px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 30px 0 0 30px;
    outline: none;
}

body.error404 .search-form input[type="search"]::placeholder {
    color: #999;
    font-style: italic;
}

body.error404 .search-form button,
body.error404 .search-form input[type="submit"] {
    background: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 0 30px 30px 0;
    cursor: pointer;
    transition: background 0.3s ease;
}

body.error404 .search-form button:hover,
body.error404 .search-form input[type="submit"]:hover {
    background: #555;
}

/* Responsive : réduire le "404" sur mobile */
@media (max-width: 600px) {
  .custom-404 .error-title {
    font-size: 120px;
  }
}
/* -------------------------------
    PAGE 404 - FIN
--------------------------------- */