/* ============================================================================
 * IndicesPro — Layout v2 (single-indice) — minimal
 * ============================================================================
 *
 * Ce fichier ne contient PLUS le styling des composants — tout est dans
 * public.css. Il ne reste que :
 *
 *   1. Les tokens de page (largeur cible avec fallback sur le thème)
 *   2. Le wrapper .ipv2-page (auto-contraint en FSE pour éviter le débordement)
 *   3. Le toast (notification "Valeur copiée")
 *
 * Préfixe CSS : .ipv2-*
 *
 * @package IndicesPro
 * @since   1.0.1 (réécrit en v1.4.4 : auto-contrainte FSE avec fallback thème)
 * ============================================================================ */

/* ============================================================================
 * Stratégie de largeur (v1.4.4)
 *
 * Le mode FSE pose un problème : `wp-block-post-title` est contraint par
 * `theme.json/layout.contentSize`, mais `wp-block-post-content` ne contraint
 * pas son contenu enfant à la même largeur (sauf si on ajoute explicitement
 * `is-layout-constrained` ou un `wp-block-group` parent).
 *
 * Résultat sans contrainte : le contenu du plugin déborde au-delà du titre.
 *
 * Solution : le wrapper `.ipv2-page--fse` se contraint lui-même à une largeur
 * qui hérite des variables WP du thème quand elles existent (alignement
 * parfait avec le titre), sinon retombe sur un défaut raisonnable (1140px).
 *
 * Surcharge possible dans le child theme :
 *   :root { --ipv2-page-max: 1280px; }
 * ============================================================================ */

:root {
    --ipv2-page-max: 1140px;  /* défaut si theme.json ne définit rien d'utilisable */
    --ipv2-page-pad: clamp(16px, 4vw, 32px);
}

/* ============================================================================
 * Wrapper .ipv2-page
 *
 * Cas 1 — thème classique :
 *   <main class="ip-main"><article class="ipv2-page">
 *   .ip-main impose déjà max-width + margin auto (public.css)
 *   → .ipv2-page hérite, pas de padding propre
 *
 * Cas 2 — block theme FSE :
 *   <article class="ipv2-page ipv2-page--fse"> dans the_content
 *   → auto-contraint pour s'aligner sur le titre WP natif
 * ============================================================================ */

.ipv2-page {
    box-sizing: border-box;
}
.ipv2-page * { box-sizing: border-box; }

/* Mode FSE : auto-contrainte.
 *
 * Largeur cible : `wide-size` du thème en priorité (généralement 1140px ou
 * la valeur du child theme), sinon `content-size`, sinon notre fallback.
 * Cela aligne automatiquement le wrapper plugin sur le bloc post-title WP
 * (qui utilise contentSize) ou sur un alignwide explicite.
 *
 * Padding latéral : on respecte le `rootPadding` du thème quand il existe
 * (TT5 + child v1.1.1 utilisent `useRootPaddingAwareAlignments: true`), avec
 * fallback responsive. Centrage via margin auto. */
.ipv2-page--fse {
    max-width: var(
        --wp--style--global--wide-size,
        var(--wp--style--global--content-size, var(--ipv2-page-max))
    );
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wp--preset--spacing--40, var(--ipv2-page-pad));
    padding-right: var(--wp--preset--spacing--40, var(--ipv2-page-pad));
}

/* Si .ipv2-page--fse est déjà à l'intérieur d'un wrapper du thème qui applique
 * son propre padding (rootPadding-aware), éviter le double padding. Les
 * sélecteurs ciblent les parents typiques de TT5/FSE qui portent rootPadding. */
.has-global-padding > .ipv2-page--fse,
.wp-block-post-content > .ipv2-page--fse {
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================================
 * Toast (notification "Valeur copiée")
 * Utilisé par chart-init.js (showToast)
 * ============================================================================ */

.ip-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    padding: 12px 18px;
    background: var(--ip-text-primary, #18181b);
    color: var(--ip-bg-primary, #ffffff);
    border-radius: var(--ip-radius-md, 8px);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--ip-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    pointer-events: none;
    max-width: calc(100vw - 48px);
}
.ip-toast.ip-toast--show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 640px) {
    .ip-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        text-align: center;
    }
}

/* ============================================================================
 * v1.4.97 — Composant `paragraph` : option Libellé + Accordéon
 *
 * Étend le composant paragraph existant avec :
 *   - Un nouveau "niveau de titre" : Libellé (texte en gras, non-Hn).
 *     Sémantiquement différent d'un Hn — n'entre pas dans la hiérarchie
 *     des titres de la page (pas d'impact sur l'outline SEO).
 *
 *   - Un mode accordéon basé sur <details>/<summary> natif HTML5.
 *     Zéro JS, accessible (rôle button + état aria-expanded gérés par le
 *     navigateur), SEO-friendly (Google indexe le contenu replié comme
 *     visible).
 *
 *   - Labels personnalisables pour le summary (ex: "Lire plus" / "Lire moins").
 *     Visibilité conditionnelle gérée en CSS pur via :not([open]) et [open].
 * ============================================================================ */

/* Libellé : texte en gras non-Hn (alternative à H1-H6 pour précéder un paragraphe) */
.ip-paragraph .ip-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 0.4em 0;
    line-height: 1.4;
}

/* Accordéon : <details>/<summary> stylés */
.ip-paragraph-accordion {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fafafa;
    margin: 16px 0;
    overflow: hidden;
}
.ip-paragraph-accordion-summary {
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 600;
    color: #1d2327;
    background: #f6f7f7;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease;
    /* Désactiver le marker natif (triangle ▶) — on rend notre propre chevron */
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.ip-paragraph-accordion-summary::-webkit-details-marker {
    display: none;
}
.ip-paragraph-accordion-summary::marker {
    display: none;
    content: '';
}
.ip-paragraph-accordion-summary:hover {
    background: #eef1f3;
}
.ip-paragraph-accordion-summary:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: -2px;
}

/* Chevron à droite, rotation au déploiement */
.ip-paragraph-accordion .ip-accordion-chevron {
    margin-left: auto;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23475569' d='M3 4l3 3 3-3z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    transition: transform 0.2s ease;
}
.ip-paragraph-accordion[open] .ip-accordion-chevron {
    transform: rotate(180deg);
}

/* Visibilité conditionnelle des 2 labels (pas de JS) */
.ip-paragraph-accordion:not([open]) .ip-accordion-label-expanded {
    display: none;
}
.ip-paragraph-accordion[open] .ip-accordion-label-collapsed {
    display: none;
}

/* Contenu de l'accordéon : padding cohérent avec l'en-tête */
.ip-paragraph-accordion .ip-paragraph-content {
    padding: 12px 16px 16px 16px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}