/* ==========================================================================
   WAF Social — harmonisation des pages + adaptation iPhone
   (charge APRES les styles propres a chaque page)
   ========================================================================== */

/* ---------- En-tetes de page ---------- */
.an-head, .db-hero, .id-head { margin-bottom: 1.35rem !important; }
.an-head h2, .id-head h2 { font-size: 1.35rem !important; font-weight: 700 !important; letter-spacing: -.015em; }
.db-hero h2 { font-size: 1.6rem !important; font-weight: 700 !important; }
.an-head p, .id-head p, .db-hero p { color: var(--muted) !important; font-size: .84rem; }

/* ---------- Controles segmentes (periodes, vues) ---------- */
.an-pills, .id-pills, .pl-seg {
    display: inline-flex !important; align-items: center; gap: 2px; background: var(--cream-2) !important; border: 0 !important;
    border-radius: 10px !important; padding: 3px !important; box-shadow: inset 0 1px 2px rgba(20,17,17,.05);
}
.an-pills a, .id-pills a, .pl-seg a {
    font-size: .78rem !important; font-weight: 500 !important; color: var(--ink-2) !important; padding: .32rem .8rem !important;
    border-radius: 8px !important; white-space: nowrap; text-decoration: none;
}
.an-pills a.on, .id-pills a.on, .pl-seg a.on {
    background: var(--surface) !important; color: var(--ink) !important; font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(20,17,17,.1), 0 1px 1px rgba(20,17,17,.04);
}
.fm-seg { background: var(--cream-2) !important; border-radius: 10px !important; }
.fm-seg span { border-radius: 8px !important; font-weight: 500; color: var(--ink-2) !important; }
.fm-seg input:checked + span { background: var(--surface) !important; color: var(--ink) !important; font-weight: 600; box-shadow: 0 1px 2px rgba(20,17,17,.12); }

/* ---------- Tuiles de chiffres cles ---------- */
.db-kpi, .an-tile {
    position: relative; background: var(--surface) !important; color: var(--ink) !important;
    border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm);
    padding: 1rem 1.1rem !important;
}
.db-kpi .v, .an-tile .v { font-family: var(--font-display); font-weight: 700 !important; font-size: 1.75rem !important; line-height: 1.05; letter-spacing: -.02em; color: var(--ink) !important; }
.db-kpi .l, .an-tile .l { font-size: .68rem !important; font-weight: 500; letter-spacing: .07em !important; color: var(--muted) !important; text-transform: uppercase; }
.db-kpi small { color: var(--muted) !important; }
/* tuile vedette : noire, sobre */
.db-kpi.dark, .an-tile.accent { background: var(--noir) !important; border-color: var(--noir) !important; color: #fff !important; }
.db-kpi.dark .v, .an-tile.accent .v { color: #fff !important; }
.db-kpi.dark .l, .an-tile.accent .l, .db-kpi.dark small { color: #a99d96 !important; }
/* tuile rose : blanche avec liseré rose (moins criard) */
.db-kpi.rose, .an-tile[style*="--rose"] { background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink) !important; }
.db-kpi.rose::before, .an-tile[style*="--rose"]::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rose); }
.db-kpi.rose .v, .an-tile[style*="--rose"] .v { color: var(--rose-dark) !important; }
.db-kpi.rose .l, .an-tile[style*="--rose"] .l { color: var(--muted) !important; }
.an-delta, .db-delta { font-size: .68rem !important; font-weight: 600 !important; border-radius: 6px !important; padding: .08rem .4rem !important; }
.an-delta.up, .db-delta.up { background: var(--ok-soft) !important; color: var(--ok) !important; }
.an-delta.down, .db-delta.down { background: var(--err-soft) !important; color: var(--err) !important; }

/* ---------- Cartes de contenu ---------- */
.an-card, .db-card { border-color: var(--line) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm); }
.an-card h2, .db-card .card-title, .card-title { font-size: .98rem !important; font-weight: 700 !important; }
.db-more { font-size: .78rem; font-weight: 600; color: var(--rose-dark) !important; }

/* ---------- Tableau de bord ---------- */
.db-post { border-radius: 10px !important; }
.db-empty { border-radius: 10px !important; color: var(--faint) !important; }
.db-empty:hover { color: var(--rose-dark) !important; border-color: var(--rose) !important; }
.db-alert { border-radius: 10px !important; }

/* ---------- Planning ---------- */
.pl-acc { border-radius: 999px !important; }
.pl-acc.on { background: var(--noir) !important; color: #fff !important; border-color: var(--noir) !important; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 960px) {
    /* grilles : jamais plus larges que l'ecran */
    .content-inner [class*="-grid"] > *, .content-inner [class*="-two"] > *, .content-inner [class*="-wrap"] > * { min-width: 0; }
    .db-grid, .fm-grid, .an-two, .hp-wrap, .two { grid-template-columns: minmax(0, 1fr) !important; }
    .an-card { padding: 1rem !important; margin-bottom: 1rem !important; }
    .an-card h2 { white-space: normal; }

    /* en-tetes : titre puis controles, pleine largeur */
    .an-head, .db-hero, .id-head { flex-direction: column; align-items: stretch !important; gap: .75rem !important; }
    .an-head > div:last-child, .id-head > div:last-child, .db-hero > div:last-child { flex-wrap: wrap; justify-content: flex-start; }
    .db-hero h2 { font-size: 1.35rem !important; }
    .db-hero > div:last-child { display: none !important; } /* doublons des onglets du bas */

    /* tuiles : 2 colonnes compactes */
    .db-kpis, .an-tiles, .cv-tiles, .st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
    .db-kpi, .an-tile { padding: .8rem .85rem !important; }
    .db-kpi .v, .an-tile .v { font-size: 1.35rem !important; }
    .db-kpi .l, .an-tile .l { font-size: .62rem !important; }

    /* tableau de bord */
    .db-card { padding: 1rem !important; }
    .db-day { gap: .6rem !important; }
    .db-post { flex-wrap: wrap; row-gap: .25rem; }
    .db-post .c { flex: 1 1 140px; min-width: 0; }
    .db-top { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
    .db-alert { flex-direction: column; align-items: stretch !important; gap: .5rem; }
    .db-alert .btn { align-self: flex-start; }

    /* planning : barre d'outils sur deux lignes, segments defilables */
    .pl-toolbar { flex-direction: column; align-items: stretch !important; gap: .6rem !important; }
    .pl-toolbar > div { flex-wrap: wrap; }
    .pl-toolbar h2 { font-size: 1.05rem !important; margin-left: 0 !important; flex-basis: 100%; order: -1; }
    .pl-toolbar .btn-outline[href*="idees"] { order: 3; }
    .pl-filters { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding: 0 var(--pad) .2rem; }
    .pl-filters::-webkit-scrollbar { display: none; }
    .pl-acc { flex-shrink: 0; }
    .pl-summary { flex-direction: column; align-items: flex-start !important; gap: .6rem; }

    /* composer */
    .fm-card { padding: 1rem !important; }
    .fm-utm { grid-template-columns: minmax(0, 1fr) !important; }
    .fm-side { max-width: none !important; }
    .fm-bar { margin: 1.25rem calc(-1 * var(--pad)) calc(-1.5rem - var(--safe-bottom)) !important; padding: .7rem var(--pad) calc(.7rem + var(--safe-bottom)) !important; flex-wrap: wrap; gap: .5rem !important; background: color-mix(in srgb, var(--surface) 94%, transparent) !important; }
    .fm-bar > div { margin-left: 0 !important; width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: .5rem; }
    .fm-bar > div .btn { width: 100%; }
    .fm-bar > div .btn-primary { grid-column: 1 / -1; order: -1; }
    .fm-bar > .btn-ghost { order: 2; min-height: 34px; padding: 0 .4rem; }

    /* idees, concurrents, aide */
    .id-bar { position: static !important; }
    .id-bar .btn { margin-left: 0 !important; width: 100%; }
    .cp-add .btn { width: 100%; }
    .hp-toc { position: static !important; display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: .4rem; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) .3rem; scrollbar-width: none; }
    .hp-toc::-webkit-scrollbar { display: none; }
    .hp-toc > * { flex-shrink: 0; white-space: nowrap; }
    .hp-toc .hp-toc-t { display: none; }

    /* planning en liste : actions sous le texte */
    .pl-row { flex-wrap: wrap; gap: .7rem !important; padding: .85rem !important; }
    .pl-row-main { flex: 1 1 0; min-width: 0; }
    .pl-row-actions { flex-basis: 100%; display: flex !important; flex-direction: row !important; gap: .4rem; padding-left: calc(44px + .7rem); }

    /* tuiles d'accueil de l'aide */
    .hp-overview { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 420px) {
    .db-top { grid-template-columns: minmax(0, 1fr) !important; }
}