/**
 * Simple TOC - Styles
 *
 * Structure HTML attendue :
 * <div class="simple-toc simple-toc--light [simple-toc--dark] [simple-toc--collapsed]
 *             [simple-toc--align-left|center|right] [simple-toc--counter-decimal]"
 *      style="width: 50%;">
 *   <div class="simple-toc__title">
 *     Table des matières <span class="simple-toc__toggle">[−]</span>
 *   </div>
 *   <div class="simple-toc__content">
 *     <ul>
 *       <li><a href="#heading-1">Titre 1</a>
 *         <ul>
 *           <li><a href="#heading-1-1">Sous-titre 1.1</a></li>
 *         </ul>
 *       </li>
 *     </ul>
 *   </div>
 * </div>
 */

/* =============================================================================
   1. WIDGET — STRUCTURE DE BASE ET THÈME LIGHT (défaut)
   ============================================================================= */

.simple-toc {
    /* Variables du thème Light */
    --stoc-bg: #f9f9f9;
    --stoc-border: #e0e0e0;
    --stoc-title-color: #333333;
    --stoc-link-color: #0066cc;
    --stoc-link-hover: #004499;
    --stoc-font-size: 0.9em;
    --stoc-padding: 1em 1.2em;
    --stoc-radius: 4px;

    /* Mise en page */
    background: var(--stoc-bg);
    border: 1px solid var(--stoc-border);
    border-radius: var(--stoc-radius);
    padding: var(--stoc-padding);
    margin: 0 auto 1.5em;
    display: block;
    width: 100%;
    max-width: var(--wp--style--global--content-size, 100%);
    box-sizing: border-box;
    font-size: var(--stoc-font-size);
    line-height: 1.6;
}

/* =============================================================================
   2. THÈME AUTO (suit les variables CSS du thème WordPress actif)
   Utilise les variables standard des block themes (TT1, TT2, TT3, TT4, TT5…).
   Les valeurs après la virgule sont des fallbacks pour les thèmes classiques.
   ============================================================================= */

.simple-toc--auto {
    /* color-mix() calcule automatiquement un décalé entre base et contrast :
       - thème sombre (base #0C0C0C, contrast #FFF) → bg ≈ #1c1c1c, border ≈ #3c3c3c
       - thème clair  (base #FFF, contrast #000)    → bg ≈ #f0f0f0, border ≈ #cccccc
       Fonctionne sans que le thème déclare base-2 ou contrast-3. */
    --stoc-bg:           color-mix(in srgb, var(--wp--preset--color--contrast, #333) 6%,  var(--wp--preset--color--base, #fff));
    --stoc-border:       color-mix(in srgb, var(--wp--preset--color--contrast, #333) 20%, var(--wp--preset--color--base, #fff));
    --stoc-title-color:  var(--wp--preset--color--contrast,  #333333);
    --stoc-link-color:   var(--wp--preset--color--accent-1,  var(--wp--preset--color--accent, #0066cc));
    --stoc-link-hover:   var(--wp--preset--color--accent-2,  var(--wp--preset--color--accent, #004499));
}

/* =============================================================================
   3. THÈME DARK
   ============================================================================= */

.simple-toc--dark {
    --stoc-bg: #1e1e1e;
    --stoc-border: #444444;
    --stoc-title-color: #e0e0e0;
    --stoc-link-color: #7ab3ef;
    --stoc-link-hover: #aed0f5;
}

/* =============================================================================
   4. THÈME CUSTOM
   Les variables CSS sont passées via l'attribut style="" sur l'élément :
     style="--stoc-bg:#fff; --stoc-border:#ccc; --stoc-title-color:#111;
            --stoc-link-color:#e00; --stoc-link-hover:#900;"
   Aucune règle CSS supplémentaire n'est nécessaire ici : les variables inline
   sont héritées par tous les sélecteurs enfants via la cascade CSS.
   ============================================================================= */

/* =============================================================================
   5. BOUTON TOGGLE (conteneur principal du titre)
   ============================================================================= */

/* Reset complet des styles navigateur du <button> */
.simple-toc__toggle {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--stoc-title-color);
    cursor: pointer;
    /* Layout flex : aligne titre + icône */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    margin-bottom: 0.6em;
    font-weight: bold;
    user-select: none;
    text-align: left;
    transition: opacity 0.2s ease;
}

.simple-toc__toggle:hover {
    opacity: 0.8;
}

/* Titre non-toggle (<p> quand le bouton est désactivé) */
.simple-toc__title {
    font-weight: bold;
    color: var(--stoc-title-color);
    margin-bottom: 0.6em;
}

/* =============================================================================
   6. CONTENU — ANIMATION D'OUVERTURE / FERMETURE
   ============================================================================= */

.simple-toc__content {
    overflow: hidden;
    max-height: 9999px;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 1;
}

/* État replié */
.simple-toc--collapsed .simple-toc__content {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Quand le widget est replié, supprimer la marge basse du titre */
.simple-toc--collapsed .simple-toc__title {
    margin-bottom: 0;
}

/* =============================================================================
   7. LISTES
   ============================================================================= */

.simple-toc__content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Indentation progressive des niveaux imbriqués */
.simple-toc__content ul ul {
    padding-left: 1.2em;
    margin-top: 0.2em;
}

.simple-toc__content li {
    margin: 0.25em 0;
    padding: 0;
}

/* =============================================================================
   8. LIENS
   ============================================================================= */

.simple-toc__content a {
    color: var(--stoc-link-color);
    text-decoration: none;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.simple-toc__content a:hover,
.simple-toc__content a:focus {
    color: var(--stoc-link-hover);
    text-decoration: underline;
    outline: none;
}

.simple-toc__content a:focus-visible {
    outline: 2px solid var(--stoc-link-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* =============================================================================
   9. ALIGNEMENT
   ============================================================================= */

/* Aligné à gauche : le texte du contenu entoure le widget */
.simple-toc--align-left {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

/* Centré : pas de float, auto-centrage via margin */
.simple-toc--align-center {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* Aligné à droite : le texte du contenu entoure le widget à gauche */
.simple-toc--align-right {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

/* =============================================================================
   10. COMPTEUR DÉCIMAL (CSS counters)
   ============================================================================= */

/* Niveau 1 */
.simple-toc--counter-decimal .simple-toc__content > ul {
    counter-reset: toc-l1;
}

.simple-toc--counter-decimal .simple-toc__content > ul > li {
    counter-increment: toc-l1;
}

.simple-toc--counter-decimal .simple-toc__content > ul > li::before {
    content: counter(toc-l1) ". ";
    font-weight: bold;
    color: var(--stoc-title-color);
}

/* Niveau 2 */
.simple-toc--counter-decimal .simple-toc__content ul ul {
    counter-reset: toc-l2;
}

.simple-toc--counter-decimal .simple-toc__content ul ul li {
    counter-increment: toc-l2;
}

.simple-toc--counter-decimal .simple-toc__content ul ul li::before {
    content: counter(toc-l1) "." counter(toc-l2) " ";
    font-weight: normal;
    color: var(--stoc-title-color);
}

/* Niveau 3 */
.simple-toc--counter-decimal .simple-toc__content ul ul ul {
    counter-reset: toc-l3;
}

.simple-toc--counter-decimal .simple-toc__content ul ul ul li {
    counter-increment: toc-l3;
}

.simple-toc--counter-decimal .simple-toc__content ul ul ul li::before {
    content: counter(toc-l1) "." counter(toc-l2) "." counter(toc-l3) " ";
    font-weight: normal;
    color: var(--stoc-title-color);
    opacity: 0.85;
}

/* =============================================================================
   11. RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
    .simple-toc {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block;
    }
}

/* =============================================================================
   12. SMOOTH SCROLL NATIF
   ============================================================================= */

/* Smooth scroll CSS natif — plus fiable que window.scrollTo() en JS */
html {
    scroll-behavior: smooth;
}

/* Offset pour tenir compte d'un éventuel header fixe.
   Surcharge via --simple-toc-scroll-offset si besoin. */
h1, h2, h3, h4, h5, h6 {
    scroll-margin-top: var(--simple-toc-scroll-offset, 30px);
}