/* =========================================================
   Améliorations : mode sombre, impression, actions d'article,
   barre de progression, glossaire, boutons de partage/écoute.
   Chargé APRÈS style.css (surcharge volontaire).
   ========================================================= */

/* ===== MODE SOMBRE ===== */
html.dark {
    --paper: #17120E;
    --amber: #1E1712;
    --cream: #241A12;
    --ink: #F4EADD;
    --ink-2: #E6D8C8;
    --ink-soft: #B7A794;
    --line: rgba(255, 255, 255, .14);
    --surface: #211913;
    --shadow: 0 30px 60px -34px rgba(0, 0, 0, .75);
    --shadow-sm: 0 16px 34px -22px rgba(0, 0, 0, .6);
}

html.dark body {
    background: var(--paper);
    color: var(--ink);
}

html.dark .masthead {
    background: var(--paper);
    border-bottom-color: #3a2d22;
}

html.dark .catnav {
    background: rgba(23, 18, 14, .92);
}

html.dark .icon-btn {
    background: var(--surface);
    color: var(--ink);
}

html.dark .recipe-card,
html.dark .contact-form-wrap,
html.dark .toc,
html.dark .faq-item,
html.dark .filter-chip,
html.dark .res-card,
html.dark .a11y-panel,
html.dark .side-box {
    background: var(--surface);
    color: var(--ink-2);
    border-color: var(--line);
}

html.dark input,
html.dark textarea,
html.dark select {
    background: #120E0A;
    color: var(--ink);
    border-color: var(--line);
}

html.dark .art h3 a,
html.dark .post-body,
html.dark .side-story h3 {
    color: var(--ink);
}

html.dark .switch {
    background: #4a3b2d;
}

html.dark .mast-title h1 b {
    color: var(--orange-soft);
}

/* Éléments « sombres sur clair » : garder un fond foncé en mode sombre
   (ils utilisent var(--ink) en fond, qui devient clair sinon → illisible). */
html.dark .ribbon,
html.dark .site-footer,
html.dark .numbers,
html.dark .search-form button,
html.dark .subscribe button,
html.dark .skip-link {
    background: #0F0B08;
}

html.dark .icon-btn:hover {
    background: #0F0B08;
    color: #fff;
}

html.dark .numbers {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* Emoji des rubriques dans le menu : rendu net, non affecté par la couleur du texte */
.catnav .nav-emoji {
    font-style: normal;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ===== SYNAPTRICA — assistant d'aide ===== */
.syn-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 200;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: linear-gradient(135deg, var(--orange-soft), var(--orange-deep));
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 16px 34px -14px rgba(224, 103, 12, .7);
    transition: transform .2s
}

.syn-fab:hover {
    transform: translateY(-2px) scale(1.05)
}

/* Icone de chat animee (halo qui pulse pour attirer l'oeil) */
@keyframes synPulse {

    0%,
    100% {
        box-shadow: 0 16px 34px -14px rgba(224, 103, 12, .7), 0 0 0 0 rgba(224, 103, 12, .5)
    }

    50% {
        box-shadow: 0 16px 34px -14px rgba(224, 103, 12, .7), 0 0 0 13px rgba(224, 103, 12, 0)
    }
}

.syn-fab {
    animation: synPulse 2.6s ease-in-out infinite
}

.syn-fab:hover {
    animation-play-state: paused
}

html.reduce-motion .syn-fab {
    animation: none
}

@media (prefers-reduced-motion: reduce) {
    .syn-fab {
        animation: none
    }
}

.syn-panel {
    position: fixed;
    right: 22px;
    bottom: 92px;
    z-index: 201;
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: 74vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 40px 70px -30px rgba(20, 15, 9, .5);
    animation: synPop .18s ease-out
}

.syn-panel[hidden] {
    display: none !important
}

@keyframes synPop {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.syn-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    color: #fff
}

.syn-ava {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    font-size: 18px
}

.syn-id b {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    line-height: 1.1
}

.syn-id small {
    font-size: 11.5px;
    opacity: .9
}

.syn-close {
    margin-left: auto;
    background: rgba(255, 255, 255, .18);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px
}

.syn-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px
}

.syn-msg {
    max-width: 85%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5
}

.syn-msg.bot {
    background: var(--cream);
    color: var(--ink);
    border-bottom-left-radius: 4px;
    align-self: flex-start
}

.syn-msg.me {
    background: var(--orange);
    color: #fff;
    border-bottom-right-radius: 4px;
    align-self: flex-end
}

.syn-msg.typing {
    opacity: .6;
    letter-spacing: 3px
}

.syn-toolbar {
    padding: 0 16px 6px
}

.syn-linkbtn {
    background: none;
    border: none;
    color: var(--orange-deep);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0
}

.syn-form {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    align-items: flex-end
}

.syn-form textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 13px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    color: var(--ink);
    max-height: 120px
}

.syn-send {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--orange);
    color: #fff;
    font-size: 17px;
    cursor: pointer
}

.syn-send:hover {
    background: var(--orange-deep)
}

/* Respecter l'attribut hidden malgre display:flex (chat simple par defaut) */
.syn-form[hidden],
.syn-msgform[hidden] {
    display: none !important
}

.syn-msgform {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--line)
}

.syn-msgform input,
.syn-msgform textarea {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 13px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    color: var(--ink);
    resize: vertical
}

.syn-msgrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

/* Bouton contextuel « laisser un message » dans une bulle */
.syn-inline-msgbtn {
    display: inline-block;
    margin-top: 8px;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer
}

.syn-inline-msgbtn:hover {
    background: var(--orange-deep)
}

/* Chat Synaptrica intégré dans une page (ex. /contact) */
.syn-panel.inline {
    position: static;
    width: 100%;
    max-width: 100%;
    max-height: none;
    box-shadow: var(--shadow-sm);
    animation: none
}

.syn-panel.inline .syn-body {
    min-height: 260px;
    max-height: 46vh
}

html.dark .syn-panel {
    background: var(--surface);
}

html.dark .syn-form textarea,
html.dark .syn-msgform input,
html.dark .syn-msgform textarea {
    background: #120E0A;
    color: var(--ink);
    border-color: var(--line)
}

html.dark .syn-msg.bot {
    background: #2a2019;
    color: var(--ink-2)
}

@media (max-width: 560px) {
    .syn-panel {
        right: 8px;
        bottom: 84px;
        width: calc(100vw - 16px)
    }

    .syn-fab {
        right: 14px;
        bottom: 14px
    }
}

/* ===== BARRE DE PROGRESSION DE LECTURE ===== */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0;
    background: linear-gradient(90deg, var(--orange), var(--orange-deep));
    z-index: 300;
    transition: width .12s ease-out
}

/* ===== ACTIONS D'ARTICLE (écouter / partager / imprimer) ===== */
.article-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 6px
}

.act-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cream);
    border: 1px solid var(--line);
    color: var(--ink-2);
    padding: 9px 16px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    font-family: inherit;
    transition: .2s;
    text-decoration: none
}

.act-btn:hover {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange)
}

.act-btn.speaking {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange)
}

.share-pop {
    display: none;
    gap: 8px;
    margin-top: 8px
}

.share-pop.open {
    display: flex;
    flex-wrap: wrap
}

/* ===== GLOSSAIRE ===== */
.glossary {
    display: grid;
    gap: 14px
}

.glossary-item {
    background: var(--surface, #fff);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 22px
}

.glossary-item dt {
    font-family: 'Fraunces', serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--orange-deep);
    margin-bottom: 6px
}

.glossary-item dd {
    color: var(--ink-soft)
}

.glossary-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px
}

.glossary-nav a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-weight: 700;
    color: var(--ink-2)
}

.glossary-nav a:hover {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange)
}

/* ===== MENU : masquer la barre de défilement (garde le scroll tactile) ===== */
.catnav .wrap {
    scrollbar-width: none;
    -ms-overflow-style: none
}

.catnav .wrap::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
}

/* Sur grand écran, on laisse les rubriques passer à la ligne plutôt que défiler */
@media(min-width:1100px) {
    .catnav .wrap {
        flex-wrap: wrap;
        overflow: visible;
        row-gap: 0
    }
}

/* ===== ANNUAIRE (directory) ===== */
.dir-group {
    margin-bottom: 34px
}

.dir-title {
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 16px;
    color: var(--ink);
    border-bottom: 2px solid var(--orange);
    display: inline-block;
    padding-bottom: 4px
}

.dir-note {
    margin-top: 20px;
    font-size: 13px;
    color: var(--ink-soft);
    background: var(--cream);
    border-radius: 12px;
    padding: 12px 16px
}

/* ===== MUR DE TÉMOIGNAGES ===== */
.testi-wall {
    columns: 3;
    column-gap: 22px
}

.testi-card {
    break-inside: avoid;
    background: var(--surface, #fff);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px 24px;
    margin: 0 0 22px;
    box-shadow: var(--shadow-sm)
}

.testi-card blockquote {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-2);
    font-style: italic;
    margin-bottom: 14px
}

.testi-card blockquote::before {
    content: '“';
    color: var(--orange);
    font-size: 34px;
    line-height: 0;
    vertical-align: -10px;
    margin-right: 4px
}

.testi-card figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--ink-soft)
}

.testi-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange-soft), var(--orange-deep));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    text-transform: uppercase
}

@media(max-width:900px) {
    .testi-wall {
        columns: 2
    }
}

@media(max-width:560px) {
    .testi-wall {
        columns: 1
    }
}

/* ===== VERSION FALC ===== */
#falcBtn[aria-pressed="true"] {
    background: #2f9e56;
    color: #fff;
    border-color: #2f9e56
}

.falc-body {
    background: #F2FBF5;
    border: 1px solid #bfe6cd;
    border-radius: 14px;
    padding: 18px 22px
}

html.dark .falc-body {
    background: #16241b;
    border-color: #2c4a38
}

/* ===== IMPRESSION (fiche recette / article) ===== */
@media print {

    .ribbon,
    .catnav,
    .breadcrumb,
    .a11y-fab,
    .a11y-panel,
    .site-footer,
    #newsletter,
    .article-actions,
    .share-pop,
    .comments,
    .read-progress,
    .mast-left,
    .mast-right,
    .related-section {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .wrap,
    .wrap-narrow {
        max-width: 100%;
    }

    .post-body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }

    .post-cover img {
        max-height: 240px;
    }

    a {
        color: #000;
        text-decoration: none;
    }

    .recipe-facts {
        border: 1px solid #ccc;
    }
}