:root {
    /* Rouges */
    --color-red: #e63447;
    --color-red-dark: #8E0D17;
    --color-red-light: #E63946;
    /* Neutres */
    --color-white: #FFFFFF;
    --color-black: #000000;
    /* Gris */
    --color-grey-light: #F4F4F4; /* Fond général */
    --color-grey-medium: #3c4149;
    --color-grey-text: #4A4A4A; /* Texte secondaire */
    /* Beige */
    --color-cream: #F9EEDB;
    /* Typo */
    --font-main: "Helvetica Neue", Arial, sans-serif;
    --font-alt: "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --font-main: "Helvetica Neue", Arial, sans-serif;
    --font-alt: "Arial Black", "Helvetica Neue", Arial, sans-serif;
}
body {
    font-family: var(--font-main);
    color: var(--color-black);
    background: var(--color-red);
}


/* Conteneur global (marges latérales comme sur le PDF) */
.page2-container {
    max-width: 900px; /* largeur réaliste du PDF */
    margin: 0 auto; /* centre le contenu */
    padding: 20px; /* marge interne */
    background: var(--color-red);
   /* fond général du PDF */
}

.photo-container {
   
    width: 900px;
    margin: 0 auto;
    
}

.bg-photo {
    background-image: url('/cover.png');
    background-size: cover;
    background-position: top center; 
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1/ 1 
}

/* Tablette / Mobile */
@media (max-width: 1200px) {
    .photo-container {
        width: 100%;
        margin: 0;
    }
    .bg-photo {
        background-size: cover;
        background-position: center;
        aspect-ratio: 1/ 1
    }
}

@media (max-width: 2000px) {
    .bloc-principal {
        flex-direction: column;
        gap: 30px; /* optionnel : espace entre les colonnes */
    }

        .bloc-principal .col {
            width: 100%; /* chaque colonne prend toute la largeur */
        }
}
@media (max-width: 2000px) {
    .bloc-secondaire {
        flex-direction: column;
    }

        .bloc-secondaire > * {
            width: 100%;
        }
}

.ligne-secondaire {
    font-size: 0.9rem; 
    margin-left: 12px; 
}

/* Bloc principal : fond blanc */
.bloc-principal {
    background: var(--color-white);
    display: flex;
    gap: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.titre-secondaire {
    background: var(--color-grey-medium);
    color: var(--color-white);
    font-weight: bold;
}


.footer {
    background: var(--color-white); /* footer blanc */
    display: flex;
    justify-content: space-between;
    padding: 25px;
    margin-top: 40px;
}

.footer-col {
    flex: 1;
    text-align: center;
    color: var(--color-grey-dark);
    font-weight: bold;
}

@media (max-width: 550px) {
    .footer {
        flex-direction: column;
        gap: 20px;
    }

    .footer-col {
        width: 100%;
    }
}


/* Pastilles icônes */
.social-pill {
    background: var(--color-grey-medium); /* ton gris secondaire */
    color: var(--color-white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
    font-size: 18px;
    text-decoration: none;
    transition: opacity .2s;
}

    .social-pill:hover {
        opacity: 0.75;
    }


.footer-img {
    background-image: url('/la.png');
    background-size: contain; /* <-- pour voir toute l’image */
    background-position: center;
    background-repeat: no-repeat;
    height: 160px; /* <-- hauteur fixe pour écrans moyens/grands */
}

.footer-img-metro {
    background-image: url('/metro.png');
    background-size: contain; /* image entière visible */
    background-position: center;
    background-repeat: no-repeat;
    height: 160px; /* même hauteur pour cohérence */
}


.footer-social {
    display: flex;
    flex-direction: row; /* groupe vertical */
    justify-content: center; /* centrage vertical */
    align-items: center; /* centrage horizontal */
    height: 160px; /* même hauteur que les blocs image */
}

/* Bloc secondaire : fond gris moyen */
.bloc-secondaire {
    background: var(--color-grey-medium);
    display: flex;
    gap: 20px;
    padding: 20px;
    border: solid;
    border-color: var(--color-white);
    border-width: 1px;
    color: var(--color-white);
}

.bg-auto {
    display: inline-block;
    background: var(--color-white);
    padding: 4px 8px;
}

.bg-auto-grey {
    display: inline-block;
    background: var(--color-grey-medium);
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}


.div-gratuite {
    
    display: flex;
    gap: 20px;
    padding: 20px;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Colonnes */
.col {
    flex: 1;
    padding: 10px;
}

.titre-rouge {
    color: var(--color-red);
    font-family: var(--font-alt);
    font-size: 17px;
    font-weight: bold;
    
    text-transform: uppercase;
    line-height: 1.2;
}

.titre-xl-rouge {
    color: var(--color-red);
    font-family: var(--font-alt);
    font-weight: bold;
    font-size: 22px;
    text-transform: uppercase;
    line-height: 1.2;
}

.titre-xl-blanc {
    color: var(--color-white);
    font-family: var(--font-alt);
    font-weight: bold;
    font-size: 22px;
    line-height: 1.2;
}

.sous-titre {
    color: var(--color-grey-text);
    font-family: var(--font-main);
    font-size: 14px; 
    font-weight: 970; 
    text-transform: uppercase;
    line-height: 1.1;
}

.sous-titre-evidence {
    color: var(--color-grey-medium);
    
    font-family: var(--font-main);
   
    padding-right: 10px;
    display: inline-block;
    font-size: 14px;
    font-weight: 970;
    text-transform: uppercase;
    line-height: 1.1;
}

.lien-texte-rouge,
.lien-texte-rouge:visited,
.lien-texte-rouge:active {
    color: var(--color-red);
    font-weight: 600;
}

    .lien-texte-rouge:hover {
        color: var(--color-red-dark);
        text-decoration: underline;
    }


    .lien-texte-rouge:hover {
        text-decoration: underline;
    }


.agence-item {
    border-left: 4px solid #d32f2f; /* rouge Lignes d’Azur */
    border-radius: 4px;
}


.b-top-red {
    border-top: 1px dotted var(--color-red);
}

.b-bottom-red {
    border-bottom: 1px dotted var(--color-red);
}

.b-left-red {
    border-left: 1px dotted var(--color-red);
}

.b-right-red {
    border-right: 1px dotted var(--color-red);
}


.texte-rouge {
    color: var(--color-red);
    font-family: var(--font-main);
    font-weight: 700;
}

.texte-gris {
    color: var(--color-grey-text);
    font-family: var(--font-main);
    font-weight: 700;
}


.cartobody {
    background: var(--color-white) !important;
}

.pastille {
    background: var(--color-red);
    color: var(--color-white);
    font-family: var(--font-alt);
    font-size: 16px; /* réduit */
    font-weight: bold;
    width: 26px; /* réduit */
    height: 26px; /* réduit */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.pastille-grise {
    background: var(--color-grey-medium);
    color: var(--color-white) !important;
    font-family: var(--font-alt);
    font-size: 19px;
    font-weight: bold;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.pastille-blanche-xl {
    background: var(--color-white);
    color: var(--color-red) !important;
    font-family: var(--font-alt);
    font-size: 35px;
    font-weight: bold;
    width: 69px;
    height: 69px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.pastille-blanche {
    background: var(--color-white);
    color: var(--color-red) !important;
    font-family: var(--font-alt);
    font-size: 19px;
    font-weight: bold;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}



.banniere-top {
    border: 1px solid var(--color-white);
    padding: 15px 20px;
    text-align: center;
    color: var(--color-white);
    font-family: var(--font-alt);
    font-size: 22px;
    font-weight: bold;
    background: transparent;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.banniere-blanche {
    
    
    font-family: var(--font-alt);
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-grey-text);
    margin-bottom: 25px;
    
}

.onglets-container {
    display: flex;
    
}

.onglet {
    padding: 10px 16px; 
    cursor: pointer;
    font-weight: 600; 
    font-size: 0.9rem; 
    background: #ececec; 
    color: #7a0000; 
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-right: -2px;
    transition: background .25s, color .25s, transform .25s, box-shadow .25s;
    position: relative;
    top: 3px; 
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.12); /* effet classeur très marqué */
    opacity: 0.85; /* terni global */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; /* indispensable pour les <br> */
}

    .onglet:hover {
        transform: translateX(+2px);
        background: #f2f2f2; /* léger éclaircissement */
    }

    .onglet.actif {
        background: #fff;
        color: #c00;
        font-size: 1rem; /* actif = plus lisible */
        font-weight: 700;
        z-index: 20;
        top: 0;
        opacity: 1; /* actif = net */
        box-shadow: 0 -2px 6px rgba(0,0,0,0.15); /* l’onglet actif passe devant */
    }
.bloc-secondaire-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

    .bloc-secondaire-link:hover .bloc-secondaire {
        cursor: pointer;
        opacity: 0.92; /* petit effet visuel propre */
    }