/**
 * outils.css — Section Outils
 * Accordéon mobile-first / tabs 2 colonnes desktop via CSS Grid.
 */

/* -------------------------
   Section
------------------------- */
.section-outils {
    position: relative;
    /* pas d'overflow: hidden — la shape déborde dans besoins (dessus) */
    background-color: var(--color-bg);
    padding-block: var(--section-padding-y);
}

.section-outils .shapes {
    top: -150px;
    height: calc(100% + 300px); /* 150px au-dessus + 150px en-dessous */
    overflow: visible;
    z-index: var(--z-base);     /* au-dessus des fonds des sections adjacentes */
}

/* -------------------------
   Inner layout — mobile : colonne
------------------------- */
.section-outils__inner {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: var(--container-max-width-xl);
    margin: auto;
    padding-inline: var(--section-padding-x);
}



/* -------------------------
   Titre
------------------------- */
.section-outils__title {
    font-family: var(--font-primary);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    color: var(--color-black);
    text-transform: uppercase;
}

/* -------------------------
   Card — mobile : 1 colonne (accordéon)
------------------------- */
.section-outils__card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* -------------------------
   Tab
------------------------- */
.section-outils__tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--color-bg);
    border: 1px solid var(--color-black);
    border-radius: var(--radius-md);
    color: var(--color-blue);
    font-family: var(--font-secondary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    cursor: pointer;
    transition: none;
    margin-bottom: var(--space-xs);
}

/* Neutraliser les surcharges GeneratePress */
.section-outils__tab:hover,
.section-outils__tab:focus {
    background-color: var(--color-bg);
    color: var(--color-blue);
    border-color: var(--color-black);
    outline: none;
}

.section-outils__tab.is-active {
    background-color: var(--color-lime);
    color: var(--color-black);
    border-color: var(--color-black);
}

.section-outils__tab.is-active:hover,
.section-outils__tab.is-active:focus {
    background-color: var(--color-lime);
    color: var(--color-black);
    border-color: var(--color-black);
}

.section-outils__tab-arrow {
    font-size: 2rem;
    line-height: 0;
    flex-shrink: 0;
}

/* -------------------------
   Panel — mobile : caché par défaut
------------------------- */
.section-outils__panel {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding-block: var(--space-md);
    margin-bottom: var(--space-xs);
}

.section-outils__panel.is-active {
    display: flex;
}

/* -------------------------
   Contenu du panel
------------------------- */
.section-outils__panel-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    color: var(--color-black);
    text-transform: uppercase;
    margin-bottom: 0px;
}

.section-outils__panel-accroche {
    display: inline;
    font-family: var(--font-primary);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-black);
    line-height: 1.2;
    margin-bottom: 0px;
}

/* -------------------------
   Détail prestations (WYSIWYG)
------------------------- */
.section-outils__panel-detail {
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    color: var(--color-black);
}
.section-outils__panel-detail ul {
    margin: 10 0 0em 3em;
}


/* -------------------------
   CTA
------------------------- */

.section-outils__cta:hover {
    background-color: var(--color-silver);
}

/* -------------------------
   Tablette 768px
------------------------- */
@media (min-width: 768px) {
    .section-outils__title {
        font-size: var(--font-size-6xl);
    }

    .section-outils__panel-title {
        font-size: var(--font-size-5xl);
    }
}

/* -------------------------
   Desktop 1024px — Grid 2 colonnes
------------------------- */
@media (min-width: 1024px) {

    /*
     * Grid : tabs + CTA → colonne 1 (55%)
     *        panels      → colonne 2 (1fr), tous superposés sur grid-row 1/-1
     * 9 lignes explicites = 8 services max + 1 CTA → -1 fonctionne correctement
     */
    .section-outils__card {
        grid-template-columns: 55% 1fr;
        grid-template-rows: repeat(9, auto);
        column-gap: var(--space-lg);
        row-gap: 0;
        align-items: start;
        box-shadow: var(--shadow-md);
        border: 1px solid var(--color-gray-light);
        border-radius: var(--radius-xl);
        padding: var(--space-xl);
        background-color: var(--color-bg);
    }

    .section-outils__tab,
    .section-outils__cta {
        grid-column: 1;
    }

    .section-outils__tab {
        margin-bottom: var(--space-xs);
    }

    /* Tous les panels en colonne 2, superposés sur toutes les lignes */
    .section-outils__panel {
        grid-column: 2;
        grid-row: 1 / -1;
        padding: 0;
        margin-bottom: 0;
    }

    /* CTA sous les tabs, hors des panels */
    .section-outils__cta {
        align-self: end;
        margin-top: var(--space-md);
    }
}