html { scroll-behavior: smooth }

h1{
    font-size: 36px;
    font-weight: 700;
    color: #A060D0; /* Violet principal */ 
}
h2{
    font-size: 30px;
    font-weight: 700;
    color: #1e0432; /* Violet principal */ 
}
h3{
    font-size: 26px;
    font-weight: 700;
    color: #A060D0; /* Violet principal */ 
}
.site-header {
    background-color: #A060D0; /* Violet plus foncé pour un bon contraste avec le texte blanc */
    color: #FFFFFF; /* Texte blanc par défaut pour le header */
    padding: 20px 0; /* Espace vertical à l'intérieur du header */
    font-family: 'Arial', sans-serif; /* Ou une autre police sans-serif de votre choix */
}
.service-image{
    max-width: 90%; /* S'assurer que l'image ne dépasse pas la largeur de son conteneur */
    height: auto; /* Garder les proportions de l'image */
    border-radius: 8px; /* Coins arrondis pour un look moderne */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre subtile pour donner de la profondeur */
    margin: 0 auto;
    display: block;
}
.wp-block-video video {
    max-width: 220px; /* S'assurer que la vidéo ne dépasse pas la largeur de son conteneur */
    height: auto; /* Garder les proportions de la vidéo */
    border-radius: 8px; /* Coins arrondis pour un look moderne */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre subtile pour donner de la profondeur */
}

.header-container {
    max-width: 1200px; /* Ou la largeur que vous souhaitez pour votre contenu */
    margin: 0 auto; /* Centrer le conteneur */
    padding: 0 20px; /* Espace horizontal à l'intérieur du conteneur */
    display: flex;
    justify-content: space-between; /* Espace entre la partie gauche et droite */
    align-items: center; /* Aligner verticalement les éléments */
}
header a {
    text-decoration: none; /* Enlever le soulignement par défaut des liens */
    color: #FFFFFF; /* Couleur blanche pour les liens */
}

.header-branding .main-title {
    font-size: 2.2em; /* Taille du titre principal */
    font-weight: bold;
    margin: 0;
    line-height: 1.1; /* Ajuster si nécessaire */
    color: #FFFFFF; /* Assurer que le titre est blanc */
}

.header-branding .subtitle {
    font-size: 0.95em;
    margin: 5px 0 0 0;
    color: #E0C8F5; /* Violet très clair, mais toujours lisible sur le fond plus foncé */
    opacity: 0.9; /* Peut rendre un peu plus subtil */
}

.header-action {
    display: flex;
    align-items: center; /* Aligner le texte et le bouton */
    gap: 15px; /* Espace entre le texte et le bouton */
}

.header-action .action-text {
    font-size: 0.9em;
    color: #E0C8F5; /* Même couleur que le sous-titre pour la cohérence */
}

.header-action .action-button {
    background-color: #B070E0; /* Un violet un peu plus clair que le fond du header mais pas trop */
    color: #FFFFFF; /* Texte du bouton blanc */
    border: 2px solid #8040C0; /* Bordure violet plus foncé pour définir le bouton */
    padding: 10px 25px;
    border-radius: 25px; /* Coins très arrondis */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre subtile */
}

.header-action .action-button:hover,
.header-action .action-button:focus {
    background-color: #A060D0; /* Même couleur que le header au survol */
    border-color: #602090; /* Bordure encore plus foncée au survol */
    transform: translateY(-1px); /* Léger effet de soulèvement */
    outline: none; /* Enlever l'outline par défaut au focus si le style est suffisant */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
}

.page-header {
    background-color: #4a41d4;
    color: white;
    padding: 15px 20px;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
}

.wp-block-video {
    margin: 0 auto; /* Centrer la vidéo */
    max-width: 90%; /* S'assurer qu'elle ne dépasse pas la largeur de l'écran */
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.service-card {
    position: relative;
    background-color: white;
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column; /* Correct pour la base mobile */
    align-items: stretch;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-radius: 4px;
    cursor: pointer; /* Pour indiquer visuellement que la carte est cliquable */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.service-identity {
    display: flex;
    align-items: center; /* Important pour aligner verticalement numéro et logo sur mobile aussi */
    margin-bottom: 15px;
	margin: 15px auto;
}

.service-number {
    background-color: #28a745;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.service-logo {
    padding: 8px 15px;
    font-weight: bold;
    border-radius: 4px;
    text-align: center;
}

.logo-candy {
    font-family: 'Arial Black', Gadget, sans-serif;
    font-size: 1.8em;
    color: #e83e8c;
}

.logo-seduced,
.logo-promptchan {
    background-color: #212529;
    color: white;
    font-size: 1.2em;
}

.service-details {
    margin-bottom: 15px;
}

.service-details .service-name {
    color: #dc3545;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
    font-weight: bold;
    display: block;
}

.features-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.features-list li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    color: #555;
}

.checkmark {
    color: #28a745;
    margin-right: 8px;
    font-weight: bold;
}

.service-action {
    margin-top: auto;
}

.trial-button {
    display: block;
    background-color: #dc3545;
    color: white;
    text-align: center;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    position: relative; /* Important pour que le contenu du bouton soit au-dessus de son ::after */
    z-index: 2; /* Assure que le bouton visuel est au-dessus de la zone cliquable étendue */
}

.trial-button:hover {
    background-color: #c82333;
}

/* Styles pour la section Pros & Cons */
.pros-cons-widget {
    max-width: 1000px; /* Ou la largeur que vous souhaitez */
    margin: 30px auto; /* Centrer et espacer */
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 20px;
}

.pros-cons-layout {
    display: flex;
    flex-direction: column; /* Par défaut pour mobile, les colonnes s'empilent */
    gap: 20px; /* Espace entre les colonnes sur mobile si elles s'empilent */
}

.column {
    flex: 1; /* Permet aux colonnes de partager l'espace sur desktop */
}

.column-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

.title-icon-box {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    position: relative;
    border-radius: 3px;
    vertical-align: middle; /* Meilleur alignement vertical avec le texte */
}

.pros-title-icon-box {
    background-color: #28a745; /* Vert */
}
.pros-title-icon-box::before { /* Dessin du checkmark */
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: 6px;
    top: 4px; /* Ajusté pour centrer un peu mieux */
    width: 5px; /* Largeur de la coche */
    height: 10px; /* Hauteur de la coche */
    border: solid white;
    border-width: 0 2px 2px 0; /* Épaisseur de la coche */
    transform: rotate(45deg);
}

.cons-title-icon-box {
    background-color: #dc3545; /* Rouge */
}
.cons-title-icon-box::before, .cons-title-icon-box::after { /* Dessin de la croix */
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: 8px; /* (18px - 2px) / 2 */
    top: 3px;  /* (18px - 12px) / 2 */
    width: 2px;  /* Épaisseur de la croix */
    height: 12px; /* Longueur des barres de la croix */
    background-color: white;
}
.cons-title-icon-box::before {
    transform: rotate(45deg);
}
.cons-title-icon-box::after {
    transform: rotate(-45deg);
}

.item-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.item-list li {
    background-color: #f8f9fa; /* Gris clair pour le fond des items */
    padding: 12px 15px;
    margin-bottom: 1px; /* Crée une fine séparation si les bordures sont de la même couleur que le fond du widget */
    /* border-bottom: 1px solid #e9ecef; */ /* Alternative pour séparateur */
    display: flex;
    align-items: center;
    font-size: 0.95em;
    color: #333;
    border-radius: 3px; /* Coins légèrement arrondis pour chaque item */
}
.item-list li:not(:last-child) {
    margin-bottom: 6px; /* Espace entre les items */
}


.list-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
    border: 1.5px solid #333; /* Bordure noire pour l'icône circulaire */
    box-sizing: border-box; /* La bordure est incluse dans la taille */
}

.pro-icon {
    background-color: #28a745; /* Vert */
}

.con-icon {
    background-color: #dc3545; /* Rouge */
}

/* Pour cacher le dernier li vide s'il est utilisé pour équilibrer */
.item-list li.empty-item {
    background-color: transparent;
    border: none;
}
.item-list li.empty-item .list-icon {
    visibility: hidden;
}

/* Styles pour le Footer Spécifique avec haut ondulé */
.site-footer-wavy {
    background-color: #A060D0; /* Violet principal (même que header) */
    color: #FFFFFF; /* Texte blanc par défaut */
    padding-top: 100px; /* Espace pour l'ondulation ET le contenu en dessous */
    padding-bottom: 30px;
    position: relative; /* Nécessaire pour clip-path ou pour des éléments positionnés absolument à l'intérieur */
    font-family: 'Arial', sans-serif;

    /* La magie du clip-path pour la forme ondulée/en dents de scie */
    /* Les pourcentages sont (X Y). 0% 0% est le coin supérieur gauche. */
    /* Ajustez ces points pour obtenir la forme exacte désirée. */
    clip-path: polygon(
        0% 15%,      /* Point 1: Départ gauche, un peu en bas */
        20% 5%,      /* Point 2: Premier sommet */
        40% 12%,     /* Point 3: Premier creux */
        60% 2%,      /* Point 4: Deuxième sommet (plus haut) */
        80% 10%,     /* Point 5: Deuxième creux */
        100% 3%,     /* Point 6: Arrivée droite, un peu en bas */
        100% 100%,   /* Point 7: Coin inférieur droit */
        0% 100%      /* Point 8: Coin inférieur gauche */
    );
    /* S'il y a un problème avec clip-path sur certains navigateurs anciens,
       on pourrait utiliser une image SVG en background ou un pseudo-élément. */
}

.site-footer-wavy .footer-container {
    max-width: 1100px; /* Légèrement moins large pour que le bouton scroll-top ne soit pas trop excentré */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrer le CTA */
}

.site-footer-wavy .footer-cta-text {
    font-size: 2.8em; /* Taille du texte principal du footer */
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 50px; /* Espace avant les liens du bas */
    color: #fff; /* Texte foncé pour un bon contraste sur le violet clair/moyen */
    text-transform: uppercase; /* Basé sur l'image */
}

.site-footer-wavy .footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 20px; /* Espace au-dessus des liens/copyright */
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Ligne de séparation subtile */
    gap: 20px; /* Espace si les éléments s'empilent */
}

.site-footer-wavy .footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 25px; /* Espace entre les liens */
}

.site-footer-wavy .footer-nav a {
    color: #E0C8F5; /* Violet très clair (comme le sous-titre du header) */
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 500;
    text-transform: uppercase; /* Basé sur l'image */
    transition: color 0.3s ease;
}

.site-footer-wavy .footer-nav a:hover {
    color: #FFFFFF; /* Blanc au survol */
}

.site-footer-wavy .footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-footer-wavy .footer-copyright {
    font-size: 0.8em;
    color: #E0C8F5; /* Violet très clair */
    text-align: right;
}

.site-footer-wavy .scroll-top-btn {
    background-color: #8040C0; /* Violet plus foncé (comme la bordure du bouton du header) */
    color: #FFFFFF;
    width: 36px;
    height: 36px;
    border-radius: 4px; /* Coins légèrement arrondis comme sur l'image */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.site-footer-wavy .scroll-top-btn:hover {
    background-color: #602090; /* Encore plus foncé au survol */
}

.site-footer-wavy .arrow-up-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 7px solid #FFFFFF; /* Crée une flèche vers le haut */
    position: relative;
    top: -1px; /* Ajustement fin vertical */
}


/* Responsive pour le footer */
@media (max-width: 992px) { /* Ajustement pour tablettes */
    .site-footer-wavy .footer-cta-text {
        font-size: 2.2em;
        margin-bottom: 40px;
    }
     .site-footer-wavy {
        /* Réduire la "hauteur" de l'ondulation pour les écrans plus petits si nécessaire */
        clip-path: polygon(0% 10%, 20% 3%, 40% 8%, 60% 1%, 80% 7%, 100% 2%, 100% 100%, 0% 100%);
        padding-top: 70px;
    }
}

/* Styles pour écran de bureau (responsive) */
@media (min-width: 768px) {
    .service-card {
        flex-direction: row;
        align-items: center; /* Changez de flex-start à center pour un meilleur alignement vertical global de la carte */
        justify-content: space-between;
    }

    .service-identity {
        /* flex: 0 0 200px; /* Ajustez cette largeur si nécessaire ou utilisez auto */
        flex-basis: auto; /* Permet à la section de prendre la largeur de son contenu */
        min-width: 300px; /* Optionnel: pour s'assurer qu'il y a assez de place pour le logo le plus long */
        max-width: 350px; /* Optionnel: pour éviter qu'il ne devienne trop large */
        margin-right: 20px;
        margin-bottom: 0;
        flex-direction: row; /* <<< MODIFICATION CLÉ: Alignement horizontal */
        align-items: center;   /* <<< MODIFICATION CLÉ: Centrer verticalement le numéro et le logo */
    }

    .service-logo {
        margin-top: 0; /* <<< Enlever la marge du haut qui était pour la disposition verticale */
        /* margin-left: 10px; /* Optionnel: si vous voulez plus d'espace entre le numéro et le logo */
        padding: 8px 0px 8px 0px; /* Ajuster le padding pour qu'il ne soit pas trop à droite */
        /* Si le logo-candy est trop décalé, on peut lui enlever son padding-left spécifique ici */
    }
    .logo-candy {
        padding-left: 0; /* Pour un alignement plus proche du numéro */
    }


    .service-details {
        flex-grow: 1;
        margin-right: 20px;
        margin-bottom: 0;
    }

    .service-action {
        flex: 0 0 150px;
        align-self: center;
        margin-top: 0;
    }

    .trial-button {
        display: inline-block;
        width: auto;
    }
	
	.pros-cons-layout {
        flex-direction: row; /* Mettre les colonnes côte à côte */
        gap: 30px; /* Espace entre les colonnes */
    }

    .pros-column, .cons-column {
        /* flex: 1; déjà défini, assure une répartition égale */
    }
}

/* Ajustements fins pour les logos sur desktop si nécessaire */
@media (min-width: 992px) {
    .service-identity {
        /* flex: 0 0 220px; /* Ajustez si vous revenez à une largeur fixe */
        min-width: 300px;
        max-width: 350px;
    }
    .service-action {
        flex: 0 0 180px;
    }
}

/* Responsive pour les petits écrans */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column; /* Empiler les éléments */
        text-align: center; /* Centrer le texte quand empilé */
        gap: 15px; /* Espace entre les sections empilées */
    }

    .header-branding .main-title {
        font-size: 1.8em; /* Réduire un peu la taille sur mobile */
    }

    .header-branding .subtitle {
        font-size: 0.9em;
    }

    .header-action {
        flex-direction: column; /* Empiler aussi le texte et le bouton dans la section action */
        gap: 10px;
    }
    .header-action .action-button {
        padding: 12px 30px; /* Rendre le bouton un peu plus grand/facile à taper */
    }

    .site-footer-wavy {
        padding-top: 60px; /* Moins de padding car l'ondulation peut être moins haute */
        /* Simplifier ou ajuster le clip-path pour mobile si besoin */
        clip-path: polygon(0% 8%, 25% 2%, 50% 6%, 75% 0%, 100% 4%, 100% 100%, 0% 100%);
    }

    .site-footer-wavy .footer-cta-text {
        font-size: 1.8em; /* Taille du texte principal réduite */
        margin-bottom: 30px;
    }

    .site-footer-wavy .footer-bottom-content {
        flex-direction: column; /* Empiler les éléments */
        align-items: center;
        text-align: center;
        gap: 15px; /* Espace entre les sections empilées */
        border-top: none; /* Optionnel : enlever la bordure sur mobile si on préfère */
    }

    .site-footer-wavy .footer-nav ul {
        flex-direction: column; /* Empiler les liens de navigation */
        gap: 10px;
        margin-bottom: 15px; /* Espace avant le copyright */
    }
     .site-footer-wavy .footer-bottom-right {
        flex-direction: column; /* Empiler copyright et bouton scroll top */
        gap: 15px;
    }

    .site-footer-wavy .footer-copyright {
        text-align: center;
    }
}