/* =========================================================
   ListoolAI — page détail comparatif
   Correctif CSS isolé : /compare/{outil-a}-vs-{outil-b}
   ========================================================= */

.compare-page{
    position:relative;
    overflow:hidden;
    padding:0 0 78px;
    background:
        radial-gradient(circle at 16% 5%,rgba(99,102,241,.17),transparent 28%),
        radial-gradient(circle at 86% 12%,rgba(59,130,246,.10),transparent 31%);
}

/* On neutralise les très grands espacements/typos génériques sur cette page. */
.compare-page .premium-section{
    margin-top:58px;
}

.compare-page .compare-detail-hero{
    margin-top:42px;
    padding-top:18px;
}

.compare-page .breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 18px;
    color:#aeb9cc;
    font-size:14px;
    line-height:1.45;
}

.compare-page .breadcrumb a{
    color:#dbeafe;
    text-decoration:none;
}

.compare-page .breadcrumb a:hover{
    color:#fff;
}

.compare-page .compare-detail-hero h1{
    max-width:1180px;
    margin:18px 0 14px;
    font-size:clamp(3rem,5.6vw,5.35rem);
    line-height:.96;
    letter-spacing:-.065em;
}

.compare-page .compare-detail-hero > p{
    max-width:980px;
    margin:0;
    color:#aeb9cc;
    font-size:clamp(16px,1.45vw,20px);
    line-height:1.65;
}

.compare-page .premium-section > h2{
    margin:12px 0 22px;
    font-size:clamp(2.2rem,3.6vw,3.55rem);
    line-height:1;
    letter-spacing:-.05em;
}

.compare-page .premium-section > p{
    max-width:920px;
    color:#9eacc2;
    line-height:1.65;
}

/* Cartes des deux outils : exactement 2 colonnes sur desktop. */
.compare-page .compare-tools-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.compare-page .glass-card{
    border-radius:26px;
}

.compare-page .compare-detail-tools .glass-card{
    min-height:100%;
}

.compare-page .compare-detail-tools .glass-card h2{
    margin:22px 0 10px;
    font-size:clamp(1.8rem,2.6vw,2.6rem);
    line-height:1.05;
    letter-spacing:-.04em;
}

.compare-page .compare-detail-tools .glass-card p{
    line-height:1.65;
}

/* Tableau comparatif : bordures, fond et scroll mobile propre. */
.compare-page .compare-table-shell{
    overflow-x:auto;
    border:1px solid rgba(255,255,255,.10);
    border-radius:24px;
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
    box-shadow:0 20px 60px rgba(0,0,0,.20);
}

.compare-page .compare-table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
    background:transparent !important;
}

.compare-page .compare-table th,
.compare-page .compare-table td{
    padding:18px 20px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.075);
    text-align:left;
    vertical-align:top;
    line-height:1.5;
}

.compare-page .compare-table tr:last-child td{
    border-bottom:0;
}

.compare-page .compare-table th{
    color:#f8fafc;
    background:rgba(15,23,42,.72);
    font-size:15px;
    font-weight:900;
}

.compare-page .compare-table td:first-child{
    width:190px;
    color:#f8fafc;
    font-weight:800;
    background:rgba(255,255,255,.018);
}

.compare-page .compare-table td{
    color:#d8e0ec;
}

.compare-page .compare-table a{
    color:#bfdbfe;
    font-weight:800;
    text-decoration:none;
}

.compare-page .compare-table a:hover{
    color:#fff;
}

/* Outils liés. */
.compare-page .compare-detail-related .grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.compare-page .compare-detail-related .glass-card{
    min-height:100%;
}

/* FAQ : évite les énormes blocs hérités de la CSS globale. */
.compare-page .faq-list{
    display:grid;
    gap:14px;
}

.compare-page .compare-detail-faq .glass-card h3{
    margin:0 0 10px;
    font-size:clamp(1.15rem,1.7vw,1.45rem);
    line-height:1.25;
    letter-spacing:-.025em;
}

.compare-page .compare-detail-faq .glass-card p{
    margin:0;
    color:#9eacc2;
    line-height:1.65;
}

/* Le bloc SEO final a sa propre CSS et ne doit pas hériter du H2 géant. */
.compare-page .compare-detail-sidebar{
    margin-top:64px;
}

.compare-page .compare-detail-sidebar .lt-seo-sidebar-card h2{
    margin:0 0 10px;
    font-size:22px;
    line-height:1.15;
    letter-spacing:-.04em;
}

@media (max-width: 980px){
    .compare-page{
        padding-bottom:58px;
    }

    .compare-page .premium-section{
        margin-top:46px;
    }

    .compare-page .compare-detail-hero{
        margin-top:28px;
    }

    .compare-page .compare-detail-hero h1{
        font-size:clamp(2.6rem,9vw,4.7rem);
    }

    .compare-page .compare-tools-grid,
    .compare-page .compare-detail-related .grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 640px){
    .compare-page .premium-section{
        margin-top:38px;
    }

    .compare-page .compare-detail-hero{
        margin-top:20px;
        padding-top:10px;
    }

    .compare-page .compare-detail-hero h1{
        margin-top:14px;
        font-size:clamp(2.25rem,12vw,3.45rem);
        letter-spacing:-.055em;
    }

    .compare-page .premium-section > h2{
        font-size:clamp(1.9rem,10vw,2.7rem);
    }

    .compare-page .compare-detail-hero > div,
    .compare-page .compare-detail-tools .glass-card > div,
    .compare-page .compare-detail-related .glass-card > div{
        gap:10px !important;
    }

    .compare-page .btn{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .compare-page .compare-table th,
    .compare-page .compare-table td{
        padding:15px 16px;
    }
}