/* --- Mise en page Colonnes --- */

.main-content-area {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-column {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Mode Sticky */
    position: sticky;
    top: 20px;
    align-self: start;
    height: fit-content;
}

/* --- Article Header & Mention Auteur --- */

.article-header{
    padding-top: 0;
}

.article-header h1 {
    font-size: 2.8rem;
    margin: 15px 0;
    line-height: 1.1;
    color: var(--bleu-lagon-sombre);
}

.article-content h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 20px 0;
    line-height: 1.2;
    color: var(--bleu-lagon-sombre);
}

.article-content p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
    color: var(--gris-texte);
}

.tag-lagoon, .tag-coral, .tag-dark-lagoon{
    margin: 0 15px 0 0;
}

/* --- Style des listes à puces (Custom) --- */

.article-content ul {
    list-style: none;
    margin: 25px 0 30px 20px;
}

.article-content li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    line-height: 1.6;
    color: var(--gris-texte);
}

.article-content li::before {
    content: "•";
    color: var(--bleu-lagon-moyen);
    font-weight: bold;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -4px;
    line-height: 1.2;
}

.article-content li strong {
    color: var(--bleu-lagon-sombre);
    font-weight: 700;
}

/* --- Style des listes ordonnées (OL) --- */

.article-content ol {
    list-style: none; /* On enlève la numérotation par défaut du navigateur */
    counter-reset: article-counter; /* On initialise un compteur personnalisé */
    margin: 25px 0 30px 20px;
}

.article-content ol li {
    position: relative;
    padding-left: 35px; /* Un peu plus d'espace pour le chiffre */
    margin-bottom: 15px;
    line-height: 1.6;
    counter-increment: article-counter; /* On incrémente le compteur */
}

/* Création du numéro stylisé à la place de la puce */
.article-content ol li::before {
    content: counter(article-counter) "."; /* Affiche le chiffre suivi d'un point */
    color: var(--bleu-lagon-moyen);
    font-weight: 800;
    font-size: 1.1rem;
    font-family: 'Outfit', sans-serif;
    position: absolute;
    left: 0;
    top: -2px; /* Ajustement vertical pour l'aligner au texte */
}

/* Alignement des paragraphes qui suivent immédiatement une liste dans le même bloc */
.article-content ol + p {
    margin-top: 20px;
}

.author-mention {
    font-size: 0.9rem;
    margin-bottom: 25px;
    color: var(--gris-texte);
}

.author-link {
    color: var(--bleu-lagon-moyen);
    text-decoration: none;
    font-weight: bold;
}

/* Sommaire */

.toc-card {
    background: var(--bleu-lagon-pale);
    border: none;
    padding: 35px;
}

.toc-card .summary {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: var(--bleu-lagon-sombre);
}

.partner-sidebar .partner {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--bleu-lagon-sombre);
}

.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
    border-left: 2px solid rgba(26, 95, 122, 0.1); 
}

.toc li {
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.toc a {
    text-decoration: none;
    color: var(--bleu-lagon-sombre);
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    padding: 8px 0 8px 15px;
    margin-left: -2px;
    border-left: 2px solid transparent; 
    transition: all 0.2s ease;
    line-height: 1.4;
}

.toc-number {
    font-weight: 800;
    color: var(--bleu-lagon-moyen);
    opacity: 0.7;
    margin-right: 8px;
    display: inline-block;
    min-width: 18px;
}

.toc a:hover {
    color: var(--bleu-lagon-moyen);
    background: rgba(255, 255, 255, 0.5);
    border-left: 2px solid var(--bleu-lagon-moyen); 
    padding-left: 20px;
}

/* Bloc sidebar */

.cta-sidebar {
    text-align: center;
    border: none;
}

.cta-sidebar h3 {
    color: var(--blanc);
    margin: 15px 0;
}
.cta-sidebar p {
    opacity: 0.9;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* FAQ */

.faq-section {
    background-color: var(--bleu-lagon-clair); /* Rappel visuel doux */
    border: 1.5px solid var(--bordure);
}

.faq-container details {
    border-bottom: 1px solid rgba(26, 95, 122, 0.1);
    padding: 15px 0;
}

.faq-container summary {
    font-weight: 700;
    color: var(--bleu-lagon-sombre);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.faq-container summary::after { 
    content: "↓"; 
    color: var(--bleu-lagon-moyen); 
}

.faq-section h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 20px 0;
    line-height: 1.2;
    color: var(--bleu-lagon-sombre);
}

.faq-container p {
    color: var(--gris-texte);
    margin-top: 10px;
}

.faq-container details, .faq-container summary {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.card.faq-section:focus-within {
    outline: none !important;
}

/* Bloc auteur */

.author-card {
    background: var(--bleu-lagon-clair);
    border: 1.5px solid var(--corail);
}

.author-flex {
    display: flex;
    gap: 20px;
    align-items: center;
}

.author-avatar {
    min-width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bleu-lagon-moyen);
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.author-info p { 
    font-size: 0.9rem; 
    color: var(--gris-texte); 
    line-height: 1.5; 
}

.author-info svg{
    margin-left: 10px;
    margin-top: -5px;
}

/* Container pour aligner le nom l'icône LinkedIn */

.author-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
}

.author-linkedin {
    color: var(--bleu-lagon-sombre);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.author-linkedin .author-name { 
    color: var(--bleu-lagon-sombre) !important; 
    font-size: 1.17rem !important;
    font-weight: 800;
    margin-bottom: 5px;
}

.author-card:hover {
    border: 1.5px solid var(--bleu-lagon-moyen);
    .author-linkedin, .author-name {
        color: var(--corail) !important;
    }
}

/* Bloc de mise en avant dans l'article */

.highlight-box {
    background-color: var(--bleu-lagon-pale);
    border: none;
    border-left: 6px solid var(--bleu-lagon-moyen);
    padding: 30px;
    border-radius: 0 20px 20px 0;
    margin: 35px 0;
    font-size: 1.1rem;

}

.highlight-box strong {
    color: var(--bleu-lagon-sombre);
}

/* Bloc partenaire (sidebar) */

.cta-sidebar.partner-sidebar {
    background-color: #FFF5F5;
    border: 2px dashed var(--corail);
    color: var(--bleu-lagon-sombre);
    text-align: center;
}

.partner-sidebar .partner-badge {
    background: rgba(255, 135, 135, 0.1);
    color: var(--corail);
    display: inline-block;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.partner-sidebar h3 {
    color: var(--bleu-lagon-sombre) !important;
    font-size: 1.1rem;
    margin-top: 5px;
}

.partner-sidebar p {
    color: var(--gris-texte);
    opacity: 1;
}

.btn-add-company-sidebar {
    display: block;
    background-color: var(--corail);
    color: white !important;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.btn-add-company-sidebar:hover {
    background-color: var(--corail-intense);
}

/* Responsive */
@media (max-width: 900px) {
    .main-content-area, .sidebar-column {
        grid-column: span 1;
    }
    .article-header h1 {
        font-size: 2rem;
    }
}


/*TEST*/



/* --- comparison COMPARISON CARDS --- */

.comparison-card {
    background: var(--blanc);
    border: 2px solid var(--bordure);
    border-radius: 20px;
    padding: 25px;
    margin: 30px 0;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.comparison-card .btn-primary{
    width: 100%;
    text-align: center;
    margin-top: 15px;
}

.comparison-card:hover {
    border-color: var(--bleu-lagon-moyen);
}


.comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--bordure);
    padding-bottom: 15px;
}

.comparison-info h3 {
    font-size: 1.6rem;
    color: var(--bleu-lagon-sombre);
    margin-top: -6px;
}

.comparison-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--bleu-lagon-sombre);
    text-align: right;
}

.comparison-price span {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--gris-texte);
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.comparison-grid .pros, .comparison-grid .cons {
    background: var(--bleu-lagon-clair);
    padding: 15px;
    border-radius: 12px;
}

.comparison-grid .cons {
    background: #fdf2f2; /* Rouge très léger pour les points négatifs */
}

/* On réinitialise les marges des listes à l'intérieur des cartes banques */
.comparison-grid ul {
    margin: 10px 0 0 0 !important;
}

.comparison-grid li {
    font-size: 0.85rem !important;
    margin-bottom: 8px !important;
    padding-left: 20px !important;
}

.comparison-grid li::before {
    display: none; /* On enlève la puce par défaut de l'article pour ces cartes */
}

/* Mobile Fix pour la grille de banque */
@media (max-width: 600px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    .comparison-header {
        flex-direction: column;
        gap: 10px;
    }
    .comparison-price {
        text-align: left;
    }
}