/* GENERAL STYLES & RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    /* Supprimez ou mettez en commentaire la ligne suivante */
    /* color: #333; */
    background: #f8f9fa;
    overflow-x: hidden;
}

.logo-img.pulse { animation: pulse 0.8s ease;}
@keyframes pulse { 0% {transform: scale(1);}50% {transform: scale(1.1);}100% {transform: scale(1);} }

.animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
/* Animation du logo */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.animate-pulse { animation: pulse 0.8s ease; }

/* Menu hamburger visible */
#mobile-menu-button {
    display: flex !important;
    z-index: 1000;
}

/* Drapeau Tunisien */


/* Animation des sections */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}
#mobile-menu.hidden { display: none; }

/* HEADER ELEMENTS */
.logo-img {
    height: 70px; /* Hauteur originale du logo */
    transition: transform 0.3s ease, height 0.3s ease; /* Transitions douces pour le hover et le défilement */
}

.logo-img:hover {
    transform: scale(1.05); /* Effet de zoom plus subtil au survol */
}

/* Styles pour le header lorsqu'il est défilé */
.header-scrolled {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header-scrolled .logo-img {
    height: 50px; /* Logo plus petit lorsque l'utilisateur fait défiler la page */
}

/* HERO SECTION STYLES */
/* Les classes Tailwind gèrent la plupart des tailles de texte et paddings. */
/* Ces règles sont des surcharges spécifiques si nécessaire. */

#hero h2 { /* Added this for the new H2 tag */
    color: #ffffff !important; /* Ensure consistent color for "Planif Pay" */
}

#hero h3 { /* Modified this to target the new H3 tag for the solution text */
    color: #acd6ff !important; /* Ensure consistent color for the solution text */
}
#hero h3 span,
#hero h3 p {
    color: #002244 !important; /* Couleur bleu foncé pour le texte principal de la Hero */
}

/* GRILLE ET CARTES */
.grid {
    display: grid;
    grid-template-columns: 1fr; /* Par défaut, une seule colonne sur mobile */
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem; /* Padding général du conteneur de la grille */
}

.card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center; /* Centre le contenu des cartes */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Effet de survol doux */
}

.card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.card p {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
    text-align: start; /* Alignement du texte des paragraphes des cartes */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* FORM STYLES */
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 500px; /* Limite la largeur du formulaire */
    margin: 2rem auto; /* Centre le formulaire horizontalement */
    padding: 1rem;
    text-align: center; /* Centre le contenu du formulaire */
}

form input,
form textarea {
    padding: 0.75rem;
    border-radius: 5px;
    border: 1px solid #00407b; /* Couleur de bordure plus spécifique */
    font-size: 1rem;
}

form button {
    background: #007bff; /* Couleur de fond pour les boutons de formulaire */
    color: #ffffff;
    padding: 0.75rem;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

form button:hover {
    background: #0056b3;
}

/* STYLES DE BOUTON GÉNÉRAUX (non-formulaire) */
/* C'est pour les boutons qui ne sont pas dans un formulaire et qui ont besoin d'un style de base */
/* Si vous utilisez des classes Tailwind comme bg-blue-600 sur vos boutons, cette règle pourrait être écrasée ou complémentaire. */
/* Le bouton 'Soutenir notre POC' utilise déjà des classes Tailwind spécifiques, donc cette règle n'aura pas d'impact direct dessus. */
button {
    background: #003366; /* Couleur de fond pour les boutons génériques */
    color: white;
    padding: 0.75rem;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

button:hover {
    background: #00509e;
}

/* FOOTER STYLES */
footer {
    text-align: center;
    padding: 1rem;
    background: #0062d0 !important; /* Utilisation de !important pour assurer la couleur de fond */
    color: white;
    font-size: 0.9rem;
}

.loader {
    display: inline-flex;
    align-items: center;
}
.loader svg {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* MESSAGE BOX STYLES (pour les notifications de formulaire ou autres) */
#messageBox {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-width: 90%;
    text-align: center;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

#messageBox.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#messageBox.success {
    background-color: #d1fae5;
    color: #065f46;
}

#messageBox.error {
    background-color: #fee2e2;
    color: #991b1b;
}

#messageBox.info {
    background-color: #e0f2fe;
    color: #0062d0;
}

/* MEDIA QUERIES POUR LA RESPONSIVITÉ */

/* Styles pour les écrans plus grands que 768px (Desktop et grandes tablettes) */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes pour la grille sur desktop */
    }
    /* Les autres éléments sont généralement gérés par les classes Tailwind sur ces breakpoints */
}

/* Styles pour les écrans jusqu'à 767px (Smartphones et petites tablettes) */
@media (max-width: 767px) {
    /* HEADER */
    .logo-img {
        height: 60px; /* Taille du logo légèrement réduite sur mobile */
    }
    .header-scrolled .logo-img {
        height: 40px; /* Taille du logo réduit en défilement sur mobile */
    }

    /* HERO SECTION */

    #hero h2 { /* Targeting the new h2 for mobile */
        font-size: 2.25rem; /* Adjust title size for mobile (e.g., text-3xl from Tailwind) */
        line-height: 1.2;
        margin-bottom: 0.5rem; /* mb-2 equivalent on mobile */
    }

    #hero h2 sup {
        font-size: 0.75rem; /* Size of ™ */
    }
    #hero h3 { /* Targeting the new h3 for mobile */
        font-size: 1.75rem; /* Adjust subtitle size for mobile (e.g., text-2xl from Tailwind) */
        line-height: 1.2;
        margin-bottom: 1rem; /* mb-4 equivalent on mobile */
    }
    #hero h3 sup {
        font-size: 0.75rem; /* Taille du ™ */
    }
    #hero h3 span.block {
        font-size: 1.5rem; /* Taille du sous-titre principal */
    }
    #hero p.text-lg {
        font-size: 1.1rem; /* Texte descriptif */
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #hero p.text-sm {
        font-size: 0.8rem; /* Texte de la marque déposée */
    }
    #hero .inline-flex {
        font-size: 1rem; /* Texte du bouton CTA */
        padding: 0.75rem 1.5rem; /* Padding du bouton CTA */
    }

    /* GRILLE ET CARTES */
    .grid {
        padding: 1rem; /* Padding réduit pour le conteneur de la grille */
    }
    .card {
        padding: 1rem; /* Padding réduit pour les cartes individuelles */
    }
    .card h3 {
        font-size: 1.1rem; /* Titres des cartes */
    }
    .card p {
        font-size: 0.9rem; /* Texte des cartes */
    }

    /* FORMULAIRE */
    form {
        padding: 1rem; /* Padding réduit pour le formulaire */
        margin: 1rem auto;
    }
    form input,
    form textarea,
    form button {
        font-size: 0.95rem; /* Taille de police pour les champs de formulaire */
    }

    /* FOOTER */
    footer {
        font-size: 0.8rem; /* Texte du footer */
        padding: 0.75rem; /* Padding du footer */
    }

    /* MESSAGE BOX */
    #messageBox {
        padding: 0.75rem 1rem; /* Padding réduit pour la boîte de message */
        max-width: 95%; /* Légèrement plus large sur mobile */
        font-size: 0.9rem; /* Texte plus petit */
    }
}
/* Styles pour le bouton Hamburger / icône en forme de X */

/* Style de base pour chaque ligne du hamburger */
/* Menu hamburger visible UNIQUEMENT sur mobile */
#mobile-menu-button {
    display: flex; /* Remove !important */
    z-index: 1000;
}
/* Styles pour le bouton Hamburger / icône en forme de X */

/* Style de base pour chaque ligne du hamburger */
.hamburger-line {
    display: block;
    width: 24px; /* Largeur des barres */
    height: 2.5px; /* Épaisseur des barres */
    background-color: currentColor; /* Hérite de la couleur du texte du bouton parent */
    position: absolute; /* Positionnement absolu par rapport au bouton */
    left: 50%; /* Centre horizontalement */
    transform: translateX(-50%); /* Ajuste pour un centrage parfait */
    transition: all 0.3s ease-in-out; /* Transition pour l'animation */
}

/* Positionnement initial des barres (état hamburger) */
#mobile-menu-button .hamburger-line:nth-child(1) { /* Première barre (en haut) */
    top: 6px; /* Positionne la barre du haut */
}

#mobile-menu-button .hamburger-line:nth-child(2) { /* Deuxième barre (milieu) */
    top: 50%; /* Centre la barre du milieu */
    transform: translateX(-50%) translateY(-50%); /* Ajuste pour centrer parfaitement */
}

#mobile-menu-button .hamburger-line:nth-child(3) { /* Troisième barre (en bas) */
    top: auto; /* Supprime le top par défaut */
    bottom: 6px; /* Positionne la barre du bas */
}


/* Styles pour l'état actif (quand le menu est ouvert et le bouton est un "X") */
#mobile-menu-button.is-active .hamburger-line:nth-child(1) { /* Première barre -> première diagonale du X */
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

#mobile-menu-button.is-active .hamburger-line:nth-child(2) { /* Deuxième barre -> disparaît */
    opacity: 0;
}

#mobile-menu-button.is-active .hamburger-line:nth-child(3) { /* Troisième barre -> deuxième diagonale du X */
    bottom: 50%;
    transform: translateX(-50%) translateY(50%) rotate(-45deg);
}

/* Dans public/style.css ou la balise <style> de index.html */
.pulse {
  animation: pulse 0.8s ease-in-out;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Styles pour les animations au scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}