/* style.css - Styles personnalisés OneFiche */

/* Blob dégradé en arrière-plan */
.gradient-blob {
    position: absolute;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.4;
}

/* Carte active (BTP/Fab) */
.active-card {
    background-color: white !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
}

.dark .active-card {
    background-color: #2D3359 !important;
}

/* Gestion de l'affichage des sections */
.content-section {
    display: none;
    animation: fadeIn 0.5s ease-out;
}

.content-section.active {
    display: block;
}

/* Switch Toggle (Calculatrice) */
.toggle-checkbox:checked {
    right: 0;
    border-color: #FF5A00;
}

.toggle-checkbox:checked+.toggle-label {
    background-color: #FF5A00;
}

.toggle-checkbox {
    right: 0;
    transition: all 0.3s;
    right: auto;
    left: 0;
}

.toggle-checkbox:checked {
    right: auto;
    left: 50%;
}

/* Empêcher le scroll quand la modale est ouverte */
.modal-open {
    overflow: hidden;
}

/* Texture Grille (Papier millimétré) */
.bg-grid-pattern {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

.dark .bg-grid-pattern {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Sauvegarde de couleurs si Tailwind ne charge pas */
.text-primary {
    color: #CC3F02 !important;
}

.text-secondary {
    color: #22284A !important;
}

.bg-primary {
    background-color: #CC3F02 !important;
}

.bg-secondary {
    background-color: #22284A !important;
}

@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 10px 25px -5px rgba(255, 90, 0, 0.1);
    }
}

.animate-breathe {
    animation: breathe 3s ease-in-out infinite;
}

/* CSS Toggle (Rappel) */
.toggle-checkbox:checked {
    right: 0;
    border-color: #FF5A00;
}

.toggle-checkbox:checked+.toggle-label {
    background-color: #FF5A00;
}

.toggle-checkbox {
    right: 0;
    transition: all 0.3s;
}

#q3:checked {
    transform: translateX(100%);
    border-color: white;
}

/* ================================================================= */
/* AJUSTEMENT GLOBAL DES MARGES (AÉRATION)                           */
/* ================================================================= */

/* On force une marge intérieure plus grande sur tous les conteneurs */
.container {
    padding-left: 2rem !important;
    /* Environ 32px */
    padding-right: 2rem !important;
    /* Environ 32px */
}

/* Sur les grands écrans (Ordinateurs), on aère encore plus */
@media (min-width: 1024px) {
    .container {
        padding-left: 4rem !important;
        /* Environ 64px */
        padding-right: 4rem !important;
        /* Environ 64px */
        max-width: 1400px;
        /* On évite que le site ne s'étire trop sur les écrans géants */
    }
}

/* ================================================================= */
/* FIX FOOTER DYNAMIQUE                                              */
/* ================================================================= */

/* Force la grille du footer même si Tailwind se charge mal */
.footer-grid-fix {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* Mobile par défaut */
    gap: 3rem;
}

@media (min-width: 768px) {
    .footer-grid-fix {
        grid-template-columns: repeat(2, 1fr);
        /* Tablette */
    }
}

@media (min-width: 1024px) {
    .footer-grid-fix {
        grid-template-columns: repeat(4, 1fr);
        /* PC */
    }
}

/* Force la taille des icônes réseaux sociaux */
.social-icon-svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    /* Prend la couleur du texte parent */
    display: block;
}

/* ================================================================= */
/* RÉPARATION FOOTER (Force l'affichage Grille + Icônes)             */
/* ================================================================= */

/* 1. On force la grille manuellement (contourne le bug Tailwind) */
#footer-grid-force {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile: 1 colonne */
    gap: 2rem;
    margin-bottom: 4rem;
}

/* Tablette : 2 colonnes */
@media (min-width: 768px) {
    #footer-grid-force {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Ordinateur : 4 colonnes */
@media (min-width: 1024px) {
    #footer-grid-force {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 2. On force la taille des icônes réseaux sociaux */
.social-icon-fix svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    fill: currentColor;
    display: block;
}

/* Petit effet au survol des icônes */
.social-icon-fix:hover {
    transform: scale(1.1);
    transition: transform 0.2s;
}

/* Animation Défilement Infini (Ticker) */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* On déplace de 50% car la liste est doublée */
}

.animate-scroll {
    display: flex;
    animation: scroll 60s linear infinite;
    /* 60s pour un défilement lent et fluide */
}

/* Pause au survol de la souris */
.animate-scroll:hover {
    animation-play-state: paused;
}

/* Animation séquentielle des logos partenaires */
.partner-logo {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: scale(1);
}

.partner-logo.is-active,
.partner-logo:hover {
    transform: scale(1.25);
    z-index: 10;
}

/* Bouton BTP Rempli (Custom) */
.btn-blue-filled {
    background-color: #5765B0 !important;
    color: #F2F2F2 !important;
    border-width: 0 !important;
}

.btn-blue-filled:hover {
    background-color: #474C86 !important;
}

.btn-blue-filled:active {
    background-color: #282A43 !important;
}

/* Footer Accordion & Mobile Helpers */
.footer-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

.footer-accordion-content.active {
    max-height: 500px;
    opacity: 1;
}

.footer-chevron {
    transition: transform 0.3s ease;
}

.footer-chevron.rotate-180 {
    transform: rotate(180deg);
}

@media (max-width: 767px) {
    .mobile-center {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
}