:root {
    --rouge-fond: #db2319;
    --beige-clair: #f2e6d8;
    --brand-red: #db2319;/* --- PAGE QUIZ --- */
    --brand-yellow: #f8e71c;/* --- PAGE QUIZ --- */
    --brand-black: #000000;/* --- PAGE QUIZ --- */
}

body {
    background-color: var(--rouge-fond);
    overflow-x: hidden;
    color: var(--beige-clair);
}

.header-fullscreen {
    min-height: 100vh;
}

.site-title {
    font-family: 'Anton';
    font-size: 1.9rem;
    text-transform: uppercase;
    padding-left: 1rem;
}

#lien-titre-site {
    text-decoration: none!important;
    color: var(--beige-clair)!important;
}

.site-menu .nav-link {
    font-family: 'Anton';
    /* 1rem minimum, 2.2vw (variable), 1.5rem maximum */
    font-size: clamp(1rem, 2.2vw, 1.5rem); 
    text-transform: uppercase;
    color: var(--beige-clair);
    padding: 0.5rem 0.8rem; /* Réduction légère des marges internes */
    white-space: nowrap; /* Empêche un mot seul de passer à la ligne */
}

@media (max-width: 480px) {
    .site-menu {
        justify-content: center !important; /* Centre le menu sur mobile */
    }
}

.site-menu .nav-link.active {
    color: #000 !important;
}

.nav {
    margin-left: 0;
    padding-left: 0;
}

.nav > li > a:hover{
    color: black;
}

.nav-header {
    position: relative;
    z-index: 1000;
}

/* --- Titre : les dessous de la fiche de paie --- */
.titre-principal {
    font-size: clamp(6rem, 15vw, 15rem);
    font-family: 'Anton';
    line-height: 0.95;
    text-align: center;
    margin-top: 20px;
    color: var(--beige-clair);
}

/* --- Pas utilisé sur cette page mais laissé au cas où ... --- */
.quote {
    font-style: italic;
    font-size: 1.8rem;
    color: var(--beige-clair);
    font-family: 'Anton';
}

/* --- *** Début CSS PAGE ATTAQUES *** --- */

        /* --- HEADER --- */

        /* --- SECTION 1 : HERO --- */
#image-etoile-1 {
    position: absolute; 
    width: 100%; 
    left: 10%;
    top: -10%; 
    z-index: 1;
    padding: 5%;
}


#container-etoile-2 {
    width: 250px;
    right: 50%;
}

#container-etoile-3 {
    width: 350px;
}

#perso-dos {
    width: 100%;
    max-width: 180px;
    position: relative;
    z-index: 5;
}

@media (max-width: 768px) {
    #perso-dos {
    width: 75%!important;
    max-width: 100px!important;
    right: 15%;
    }

    #image-etoile-1 {
    position: absolute; 
    width: 75%; 
    left: 10%;
    top: -10%; 
    z-index: 1;
    padding: 5%;
}

    #container-etoile-2 {
        width: 250px;
        right: 15%;
    }

        #container-etoile-3 {
        left: 5%;
    }
}

@media (max-width: 1200px) {
    .perso-mini-burst {
    display: none;
}

}

#texte-exerge-1 {
    font-family: 'Anton';
    font-size: 1.5rem;
    color: var(--beige-clair)!important;
}

#texte-exerge-2 {
    font-family: 'Anton';
    font-size: 1.5rem;
    color: var(--beige-clair)!important;
}

        /* --- SECTION 2 : LE GRAND BURST CENTRAL --- */
.burst-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0; /* Réduit un peu pour éviter trop de vide */
    padding: 120px 20px; /* Augmente le padding vertical pour laisser l'étoile respirer */
    min-height: 800px; /* Force une hauteur pour que l'image absolue ait de la place */
    overflow: visible; /* Permet de voir si l'image dépasse pendant les tests */
}

.img-burst-fond {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrage mathématique parfait */
    width: 100%;
    max-width: 900px;
    height: auto;
    z-index: 1;
    pointer-events: none; /* Pour que l'image ne gêne pas la sélection du texte */
}

/* État initial : masqué, petit et centré */
.img-burst-fond {
    position: absolute;
    top: 50%;
    left: 50%;
    /* On combine le centrage d'origine (-50%, -50%) avec un scale réduit */
    transform: translate(-50%, -50%) scale(0.3); 
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* État final : position centrale parfaite et taille normale */
.img-burst-fond.is-visible {
    opacity: 0.4; /* Ou votre opacité cible */
    /* On garde impérativement le translate(-50%, -50%) pour le centrage */
    transform: translate(-50%, -50%) scale(1);
}


.perso-mini-burst {
    position: absolute;
    left: 20%;
    top: 40%;
    width: 80px;
    z-index: 15;
}

.burst-content {
    position: relative;
    z-index: 10;
    /* On réduit la largeur pour qu'elle tienne dans le "cœur" de l'étoile */
    width: 90%; 
    max-width: 500px; 
    
    /* On s'assure que le contenu est bien centré en interne */
    text-align: center;
    margin: 0 auto; 
}

.burst-content h2 {
    font-family: 'Anton';
    color: var(--beige-clair)!important;
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align : left;
}

.burst-content p {
    font-family: "Barlow";
    color: var(--beige-clair)!important;
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: bold;
    text-align : left;
}


/* --- SECTION 3 : FICHE DE PAIE & ANALYSE --- */

.label-attaque {
    color: black;
    padding: 8px 12px;
    margin-left: 6rem;
    position: relative;
    font-family: 'barlow';
    font-size: 1rem;
    border-radius: 2px;
    
}

.label-attaque strong {
    color: white;
    background: black;
    display: inline;
    font-family: 'Barlow';
    font-size: 1.5rem;
    padding: 2px 8px;
    line-height: 2.2; /* Augmente l'espace vertical pour ne pas chevaucher la ligne du dessus */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.label-attaque b { /*textes des label-attaques */
    display: block; /* Force le descriptif à commencer sous le titre noir */
    margin-top: 3px; /* Espace entre le bandeau noir et le texte */
    font-weight: bold; /* Optionnel : pour un meilleur contraste avec le titre */
    font-family: 'barlow';
    font-size: 1.2rem;
}

.label-attaque b:hover {
    color: white;
}

.img-ihs-attaques {
    width: 100%;
    max-width: 650px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* --- *** CSS DE LA FICHE DE PAIE *** --- */
/* --- VARIABLES ET STRUCTURE DE BASE --- */
:root {
    --payslip-blue: #273582;
    --payslip-red: #b4294f;
    --payslip-red2: #783160;
    --payslip-purple: #62337e;
    --payslip-orange: #ec9b00;
    --payslip-bg: #f8f9fa;
    --payslip-marron: #b84044;
    --payslip-total-employeur: #302683;
}

/* --- CONTENEUR ET FICHE A4 UNIVERSELLE --- */

/* --- SECTION FRISE --- */
/* .img-frise {
    max-width: 900px;
    }
*/
.frise-wrapper {
    width: 100%;
    line-height: 0; 
    margin-bottom: -4px;
   
}

.frise-wrapper img {
    /* Si votre tableau a des ombres ou des bordures, 
       ajustez le padding ici pour que les bords s'alignent visuellement */
    /*padding: 0; 
    border-radius: 5px; /* Optionnel : pour suivre l'arrondi de votre carte 
    max-width: 900px; */
    width: 100%;
    height: auto;
    display: block;
}

.payslip-stack {
    width: 100%;
    max-width: 900px;   /* EXACTEMENT comme la fiche */
    margin: 0 auto;     /* centrage */
}


.ps-integration-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden; /* Empêche tout débordement accidentel */
}

.payslip-card-fixed {
   
    background: white;
    width: 100%; /* S'adapte à la largeur du parent */
    max-width: 900px; /* Taille maximale en desktop */
    
    /* Ratio A4 strict (Largeur 210 / Hauteur 297) */
    aspect-ratio: 21 / 29.7; 
    
    padding: 20px;
    font-size: 0.8rem;
    color: #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    
    /* Supprime les anciennes transformations */
    transform: none !important;
    height: auto;
    flex-shrink: 0;
    filter: brightness(85%);

}

/* Ajustement dynamique des textes pour le mobile */
@media (max-width: 991px) {
    .payslip-card-fixed {
        /* On réduit la taille de police proportionnellement à l'écran */
        font-size: clamp(0.35rem, 1.8vw, 0.8rem);
        padding: 10px;
    }
}
/* Correction globale pour supprimer le scroll horizontal parasite */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
/* --- STRUCTURE TABLEAUX --- */

.master-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Maintient le format A4 global */
}

.info-employer { 
    width: 55%; 
    vertical-align: top; 
    padding-bottom: 20px; 
    word-wrap: break-word;
}
.info-employee { 
    width: 45%; 
    vertical-align: top; 
    padding: 30px 0 0 20px; 
    word-wrap: break-word;
}

.table-payslip {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em; 
    table-layout: fixed; /* Indispensable pour respecter les % définis en HTML */
}

/* Augmenter l'espace pour les lignes contenant des icônes */
.table-payslip tr {
    height: 40px; /* Force une hauteur minimale pour chaque ligne */
}

.row-category td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Ajustement des cellules : on autorise le texte à respirer */
.table-payslip td {
    padding: 3px 5px;
    overflow: visible; /* modifié  hidden car icones tronquées */
    word-wrap: break-word; 
    white-space: normal;   /* Autorise le retour à la ligne pour les libellés longs */
    vertical-align: middle;
    border-left: 1px solid #dee2e6; 
    border-right: 1px solid #dee2e6;
    position: relative;
}

/* On force les chiffres à rester sur une seule ligne pour éviter les décalages */
.table-payslip td.text-end, 
.table-payslip td.col-salaries, 
.table-payslip td.col-employeur,
.table-payslip td.salaire-base {
    white-space: nowrap; 
}

/* Style des entêtes */
.header-box {
    background-color: var(--payslip-blue);
    color: white;
    padding: 15px;
}

.table-payslip thead th { 
    background-color: var(--payslip-blue); 
    color: white; 
    border: 1px solid #fff; 
    text-align: center;
    vertical-align: middle;
    font-size: 0.8em;
    padding: 4px 2px;
}

/* --- COULEURS SPÉCIFIQUES de la fiche de paie --- */
.col-salaries { background-color: var(--payslip-red); color: white; text-align: right; }
.col-employeur { background-color: var(--payslip-purple); color: white; text-align: right; }
.salaire-base { background-color: var(--payslip-red2); color: white; text-align: right; }
.row-category { font-weight: bold; background-color: #fff; }

.net-impot-value { 
    background-color: var(--payslip-marron); 
    color: white; 
    font-size: 1.4rem; 
    padding: 8px 20px; 
}

.border-blue { border: 2px solid var(--payslip-blue); }
.cell-tax-amount { background-color: var(--payslip-marron) !important; color: white !important; }
.cell-net-paid { background-color: var(--payslip-orange) !important; color: white !important; }
.cell-total-employer { background-color: var(--payslip-total-employeur) !important; color: white !important; }

/* --- Icones bootstrap --- */

/* 1. Style pour les icônes des LÉGENDES (à gauche) */
.label-attaque strong i.bi {
    font-size: 1.5rem !important; /* Taille ajustée pour ne pas déborder */
    margin-right: 0.8rem;
    vertical-align: baseline;
    display: inline-block;
}

/* 2. Style pour les icônes du TABLEAU (Fiche de paie) */
.ps-icon {
    position: relative;
    left: 25px; /* Ajusté pour être bien visible */
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem !important;
    line-height: 1;
    z-index: 2000 !important;
    overflow: visible;
    opacity: 0 !important; /* Force l'invisibilité avant l'animation */
    transform: scale(0) !important;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block !important; /* Permet les transformations */
    transition: transform 0.3s ease; /* Rend l'agrandissement fluide */
    vertical-align: middle;
    color: #273582 !important;
    align-items: center;
    justify-content: center;
}

.ps-integration-wrapper .ps-icon:hover {
    transform: scale(1.9) !important; 
    cursor: pointer;
    z-index: 100; /* Pour passer au-dessus des lignes du tableau */
}

/* Classe active qui sera ajoutée par le JavaScript pour popper */
.ps-icon.pop-active {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ps-icon-wrapper:nth-child(1) .ps-icon { transition-delay: 0.5s; }
.ps-icon-wrapper:nth-child(2) .ps-icon { transition-delay: 0.9s; }
.ps-icon-wrapper:nth-child(3) .ps-icon { transition-delay: 1.1s; }
.ps-icon-wrapper:nth-child(4) .ps-icon { transition-delay: 1.3s; }
.ps-icon-wrapper:nth-child(5) .ps-icon { transition-delay: 1.7s; }
.ps-icon-wrapper:nth-child(6) .ps-icon { transition-delay: 2.3s; }
.ps-icon-wrapper:nth-child(7) .ps-icon { transition-delay: 2.7s; }
.ps-icon-wrapper:nth-child(8) .ps-icon { transition-delay: 3s; }

/* 3. PALETTE DE COULEURS UNIQUE (S'applique aux deux grâce aux classes) */

/* Salaires */
.leg-salaires, .fdp-salaires { color: #e8be15 !important; } /* #f8e71c */
/* Exonérations */
.leg-cotisoc, .fdp-cotisoc { color: #ff9f43 !important; }
/* Santé */
.leg-sante, .fdp-sante { color: #55efc4 !important; }
/* Retraites */
.leg-retraites, .fdp-retraites { color: #a29bfe !important; }
/* Chômage */
.leg-chomage, .fdp-chomage { color: #74b9ff !important; }
/* Famille */
.leg-prestafam, .fdp-prestafam { color: #fab1a0 !important; }
/* Accidents du travail */
.leg-atmp, .fdp-atmp { color: #ff7675 !important; }
/* Services Publics */
.leg-spub, .fdp-spub { color: #31778c !important; } /* #81ecec */

/* 4. Ajustement final de la cellule pour éviter que l'icône soit tronquée */
.table-payslip td:nth-child(2) {
    padding-left: 38px !important; 
    position: relative;
    overflow: visible !important;
}

/* Fenetres modales */
.label-attaque {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.label-attaque:hover {
    transform: scale(1.04);; /* Petit décalage vers la droite au survol */
    opacity: 0.9;
}

/* Style optionnel pour le titre dans la modale */
.font-anton {
    font-family: 'Anton', sans-serif;
}

.font-barlow {
    font-family: 'barlow';
}

.texte-modale {
    font-family: 'Barlow',
}

.modale-icone {
    margin-right: 1.5rem;
}

/* centrage des textes en plein écran */
@media (max-width: 991px) {
    .label-attaque {
        /* 1. On annule la marge de 6rem et on centre le BLOC */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 1.5rem; /* Ajoute un peu d'espace entre les blocs */

        /* 2. On définit une largeur pour que le centrage soit visible */
        width: 100%;
        max-width: 350px; /* Ajuste cette valeur selon tes préférences */

        /* 3. On aligne le CONTENU à gauche */
        text-align: left !important;
    }
}


/* --- SECTION IMAGE IHS --- */
.img-ihs-container {
    margin-top: 6%;
    margin-bottom : 6%;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.img-ihs-accueil {
    max-width: 90%; /* Prend plus de place sur mobile */
    height: auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    margin: 0 auto;
}

@media (min-width: 992px) {
    .img-ihs-accueil {
        max-width: 50%;
        margin-bottom: 3%;
        margin-top: 5%;
    }
}

/* ************************ */
/* Vidéo Youtube + synopsis */
/* ************************ */

.video_yt {
    margin-left: 2%;
    margin-right: 2%;
}

.synopsis {
    margin-left: 5%;
    margin-right: 5%;
    padding: 1%;
    background-color: #000;
   /*  font-weight: bold;*/
    font-size: 1.1rem;
    text-align: left;

}

.texte-fin {
    margin-left: 10%;
    margin-right: 10%;
    font-size: 1.3rem;
}

@media (max-width: 767px) {
    .video_yt {
        margin-left: 0.5%;
        margin-right: 1%;
    }

    .synopsis {
        margin-left: 1%;
        margin-right: 1%;
        text-align: left;
        text-align: left;
    }

   .texte-fin {
        margin-left: 5%;
        margin-right: 5%;
        text-align: left;
    }
}

@media (max-width: 575px) {
    .video_yt {
        margin-left: 0%;
        margin-right: 1%;
    }

    .synopsis {
        margin-left: 0.5%;
        margin-right: 0.5%;
        text-align: left;
        font-size: 1rem;
    }

   .texte-fin {
        margin-left: 1%;
        margin-right: 1%;
        text-align: left;
        font-size: 1.1rem;
    }
}

/* ============================================================
   ANIMATIONS : ÉTATS INITIAUX (CACHÉS)
   ============================================================ */

/* 1. Éléments du haut (Apparition immédiate) */
#image-perso-dos, #image-etoile-1 {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. Éléments au scroll (Étoiles 2, 3 et Exergues) */
#container-etoile-2, #container-etoile-3, .exergue {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
#container-etoile-3 { transition-delay: 0.2s; } /* Petit décalage pour l'étoile 3 */

/* 3. Image IHS Finale (Effet Pince) */
.img-ihs-container {
    padding: 80px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; 
}
/* --- ANIMATIONS : ÉTATS INITIAUX --- */

/* Perso-dos et Étoile 1 (Haut de page) */
#image-perso-dos, #image-etoile-1 {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Étoiles 2, 3 et Blocs Exergue (Scroll) */
#container-etoile-2, #container-etoile-3, .exergue {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Section IHS (Effet) */

.wrapper-ihs { position: relative; display: inline-block; }

.anim-right {
    max-width: 600px;
    transform: translateX(100vw);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}

.anim-left {
    position: absolute;
    bottom: 20%;
    left: -15%;
    background-color: #000;
    color: #fff;
    padding: 15px 25px;
    z-index: 10;
    width: 300px;
    transform: translateX(-100vw);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, opacity 1s ease;
}

/* --- ÉTATS ACTIFS (QUAND IS-VISIBLE EST LÀ) --- */

.is-visible#image-perso-dos, 
.is-visible#image-etoile-1, 
.is-visible#container-etoile-2, 
.is-visible#container-etoile-3,
.is-visible.exergue {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Déclenchement de l'image IHS */
#scroll-trigger-ihs.is-visible .anim-right,
#scroll-trigger-ihs.is-visible .anim-left {
    transform: translateX(0);
    opacity: 1;
}

@media (max-width: 768px) {
    /* On cible le conteneur de l'image IHS */
    #scroll-trigger-ihs img {
        width: 85% !important; /* Réduit l'image pour laisser respirer les bords */
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}

/* Police Anton pour la légende */
.legende-texte {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    margin: 0;
}

.plus-loin {
    text-decoration: none;
    color: rgb(43, 43, 43);
}

.plus-loin:hover {
    text-decoration: none;
    color: rgb(107, 1, 1);
    font-weight: bolder;
}


@media (max-width: 768px) {
    /* On annule les décalages horizontaux qui font sortir le texte */
    #scroll-trigger-ihs .anim-right, 
    #scroll-trigger-ihs .anim-left {
        transform: translateX(0) !important; /* Force le retour au centre */
        transition: none !important;        /* Désactive l'animation si elle pose problème */
        text-align: center !important;      /* Centre le texte pour plus de sécurité */
        
    }

    .legende-texte {
        margin-left: 25% !important;
        margin-right: 0 !important;
        padding-left: 15px;  /* Petite marge de sécurité pour ne pas coller au bord */
        padding-right: 15px;
        white-space: normal; /* Autorise le texte à revenir à la ligne au lieu de déborder */
        display: block;
    }

    .legende-credit {
        margin: 0;
        margin-left: 25% !important;
}
}
/* -------- **************** ------- */
/* -------- BACK TO TOP ------- */
/* -------- **************** ------- */

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    /* Fond transparent */
    background-color: transparent; 
    /* Couleur de la flèche */
    color: #ffffff; 
    /* Bordure ronde blanche */
    border: 2px solid #ffffff; 
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    z-index: 1000;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Effet au survol pour qu'il reste visible sur fond rouge */
.back-to-top:hover {
    background-color: rgba(255, 255, 255, 0.2); /* voile blanc au survol */
    color: #ffffff;
    transform: translateY(-5px);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}