/* =========================================================================
   Intranet Explorer — styles du contenu principal
   Palette conservée, la navbar (navbar.css) n'est pas touchée.
   Tout est scopé sous #main-content pour ne jamais entrer en conflit
   avec les règles de la navbar (background, padding-top, etc.).
   ========================================================================= */

@font-face {
    font-family: "Marianne";
    src: url("fonts/marianne/Marianne-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Marianne";
    src: url("fonts/marianne/Marianne-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Marianne";
    src: url("fonts/marianne/Marianne-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Marianne";
    src: url("fonts/marianne/Marianne-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy: #001b39;
    --navy-soft: #0b2d54;
    --blue: #1c5597;
    --blue-dark: #2980b9;
    --surface: #ffffff;
    --surface-alt: #f4f6f8;
    --border: #e1e6ea;
    --muted: #64748b;
    --success: #2a9d8f;
    --danger: #d60725;
    --urgence: rgb(109, 21, 28);
    --danger-bg: #fdecea;
    --radius: 10px;
    --shadow: 0 2px 10px rgba(3, 34, 76, 0.08);
    /* Identification média des posts sources : bleu foncé, réutilisé côté
       docx (json_to_docx.py) pour rester cohérent entre les deux rendus. */
    --media-video: #34444f;
}

body {
    font-family: "Marianne", Arial, Helvetica, sans-serif;
    color: var(--navy);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#main-content {
    display: block;
    max-width: 880px;
    margin: 0 auto;
    padding: 32px 24px 72px;
    /* Occupe tout l'espace disponible : si le contenu est plus court
       que l'écran, #main-content s'étire et repousse le footer (donc
       le logo) tout en bas de l'écran. S'il dépasse l'écran, il
       garde sa hauteur naturelle et le logo se cale juste après la
       fin réelle du contenu. */
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
}

#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4 {
    font-family: "Marianne", Arial, sans-serif;
    color: var(--navy);
    letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
   En-tête de page
   ------------------------------------------------------------------------- */
.page-header {
    margin-bottom: 24px;
}

.page-header h1,
.page-header h2 {
    font-size: 26px;
    margin-bottom: 6px;
}

.page-subtitle {
    color: var(--muted);
    font-size: 14.5px;
    margin: 0;
}

/* -------------------------------------------------------------------------
   Cartes génériques
   ------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--blue);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    margin-bottom: 28px;
}

.card h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.helper-text {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 18px;
}

/* -------------------------------------------------------------------------
   Champs de formulaire
   ------------------------------------------------------------------------- */
.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-soft);
    margin-bottom: 6px;
}

#main-content input[type="text"],
#main-content input[type="date"],
#main-content select,
#main-content textarea {
    width: 100%;
    padding: 10px 13px;
    font-size: 15px;
    font-family: inherit;
    color: var(--navy);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#main-content textarea {
    resize: vertical;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

#main-content input[type="text"]:focus,
#main-content input[type="date"]:focus,
#main-content select:focus,
#main-content textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

/* Cases à cocher : natives, simplement teintées + libellé cliquable */
#main-content input[type="checkbox"] {
    accent-color: var(--danger);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox_container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-bottom: 16px;
}

.checkbox_container label.settings,
.date_container label.settings {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy-soft);
    cursor: pointer;
}

.date_container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.date_container input[type="date"] {
    width: auto;
}

/* -------------------------------------------------------------------------
   Boutons
   ------------------------------------------------------------------------- */
#main-content button,
#main-content input[type="submit"] {
    padding: 11px 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    background-color: var(--blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

#main-content button:hover,
#main-content input[type="submit"]:hover {
    background-color: var(--blue-dark);
}

#main-content button:active,
#main-content input[type="submit"]:active {
    transform: translateY(1px);
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#main-content #delete-words-btn {
    margin-bottom: 32px;
    background-color: var(--danger);
}

#main-content #delete-words-btn:hover {
    background-color: var(--urgence);
}

#main-content #delete-medias-btn {
    margin-bottom: 32px;
    margin-top: 16px;
    background-color: var(--danger);
}

#main-content #delete-medias-btn:hover {
    background-color: var(--urgence);
}

#main-content .remove-word-btn {
    background-color: var(--danger);
    padding: 0px 5px;
    margin-left: 2px;
    border-radius: 15px;
}

#main-content .remove-word-btn:hover {
    background-color: var(--urgence);

}

.word-chip {
    margin-left: 2px;
}

/* -------------------------------------------------------------------------
   Barre de recherche (page Keyword)
   ------------------------------------------------------------------------- */
.search-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--blue);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    margin-bottom: 24px;
}

.search-main {
    display: flex;
    gap: 10px;
}

.search-main input[type="text"] {
    flex: 1;
}

.search-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.search-filters .checkbox_container,
.search-filters .date_container {
    margin-bottom: 0;
}

@media (max-width: 560px) {
    .search-main {
        flex-direction: column;
    }
}

/* -------------------------------------------------------------------------
   Statuts / messages
   ------------------------------------------------------------------------- */
#status {
    font-weight: 600;
    font-size: 14.5px;
    margin-bottom: 18px;
    color: var(--navy-soft);
}

#status:empty {
    display: none;
}

.error {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--danger);
    background: var(--danger-bg);
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
}

#import-status {
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 10px;
    min-height: 1em;
}

/* -------------------------------------------------------------------------
   Résultats de recherche
   ------------------------------------------------------------------------- */
.result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    padding: 18px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.result-card a {
    color: var(--navy);
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
}

.result-card a:hover {
    color: var(--blue);
    text-decoration: underline;
}

.result-meta {
    color: var(--muted);
    font-size: 12.5px;
    margin: 4px 0 14px;
}

.result-url {
    color: var(--success);
    font-size: 13px;
    margin-bottom: 8px;
    word-break: break-all;
}

.result-content {
    color: var(--navy-soft);
    font-size: 14px;
    line-height: 1.5;
}

/* Groupes thématiques dans un résultat */
.theme-group {
    padding: 12px 0;
    border-top: 1px dashed var(--border);
}

.theme-group:first-of-type {
    border-top: none;
    padding-top: 6px;
}

.theme-group h4 {
    font-size: 14.5px;
    color: var(--navy-soft);
    margin-bottom: 4px;
}

.theme-group p {
    font-size: 14px;
    line-height: 1.55;
    color: #3c4a5c;
    margin-bottom: 10px;
}

.theme-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.theme-sources a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--blue-dark);
    background: rgba(52, 152, 219, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    text-decoration: none;
}

.theme-sources a:hover {
    background: rgba(52, 152, 219, 0.2);
}

/* Un post source contenant un média (photo et/ou vidéo) change de
   couleur de fond, en bleu foncé — même code couleur que l'emoji média
   du docx et le badge "Contient un média" ci-dessous. Plus de
   distinction photo/vidéo à l'affichage. */
.theme-sources a.has-media {
    background: rgba(149, 189, 215, 0.4);
    color: var(--media-video);
}

.theme-sources a.has-media:hover {
    background: rgba(149, 189, 215, 0.8);
}

/* Badge "Contient un média", accolé juste après le badge d'intérêt sur
   la même ligne (dans le titre du groupe, via script.js). Un seul badge
   générique dès qu'au moins un tweet source a une photo et/ou une
   vidéo. Même code couleur bleu foncé que les liens sources. */
.media-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 700;
    vertical-align: middle;
    background: rgba(149, 189, 215, 0.4);
    color: var(--media-video);
}

/* -------------------------------------------------------------------------
   Recherche par wordlist — bloc dépliant par mot
   ------------------------------------------------------------------------- */
.word-result-block {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px 16px;
    background: var(--surface);
}

.word-result-block summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--navy);
    font-size: 14.5px;
}

.word-result-block summary::marker {
    color: var(--blue);
}

.word-result-content {
    margin-top: 12px;
}

/* -------------------------------------------------------------------------
   Page Changes — onglets verticaux (Thèmes / Médias bannis) à gauche
   Même principe que .tabs / .slider de navbar.css, mais empilé
   verticalement et scopé à #main-content pour ne pas entrer en conflit
   avec la navbar du haut.
   ------------------------------------------------------------------------- */
.changes-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.changes-side-tabs {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    padding: 6px;
    border-radius: 35px;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 10;
}

.changes-side-tabs input[type="radio"] {
    display: none;
}

.changes-tab {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 35px;
    padding: 0 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy-soft);
    border-radius: 12px;
    cursor: pointer;
    transition: color 0.15s ease-in;
}

.changes-side-tabs input[type="radio"]:checked+label {
    color: #fff;
}

.changes-tab-slider {
    position: absolute;
    z-index: 1;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: calc(50% - 9px);
    background: var(--navy);
    border-radius: 35px;
    transition: transform 0.25s ease-out;
}

#changes-tab-wordlist:checked~.changes-tab-slider {
    transform: translateX(0);
}

#changes-tab-medias:checked~.changes-tab-slider {
    transform: translateX(calc(100% + 6px));
}

.changes-panels {
    flex: 1;
    min-width: 0;
}

.changes-panel[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .changes-side-tabs {
        max-width: 100%;
    }

    .changes-tab {
        height: 40px;
        font-size: 13px;
        padding: 0 8px;
    }
}

/* -------------------------------------------------------------------------
   Page Changes — catégories / mots de la wordlist
   ------------------------------------------------------------------------- */
.category-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 12px;
}

.category-block>summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--navy);
    font-size: 15px;
}

.category-block>summary::marker {
    color: var(--blue);
}

.category-words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.word-entry {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    border-radius: 20px;
    font-size: 13px;
}

.word-entry label {
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   Colonnes d'actualités (news)
   ------------------------------------------------------------------------- */
.news-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: start;
}

.news-column h3 {
    margin-top: 0;
    font-size: 15px;
}

.news-column-content .result-card {
    margin-bottom: 0.75rem;
}

.result-word {
    font-weight: 700;
    font-size: 0.85rem;
    opacity: 0.7;
}

@media (max-width: 760px) {
    .news-columns {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   Page Home — import de cookies + statut
   ------------------------------------------------------------------------- */
.cookies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.cookie-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
}

.cookie-card--expired {
    border-top: 3px solid var(--danger);
}

.cookie-card--valid {
    border-top: 3px solid var(--success);
}

.cookie-card h3 {
    font-size: 15px;
    margin-bottom: 8px;
}

.cookie-card p {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 10px;
    line-height: 1.4;
}

.cookie-card__badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--surface-alt);
    color: var(--navy-soft);
    margin-bottom: 8px;
}

.cookie-card--expired .cookie-card__badge {
    background: var(--danger-bg);
    color: var(--danger);
}

.cookie-card--valid .cookie-card__badge {
    background: rgba(42, 157, 143, 0.12);
    color: var(--success);
}

.cookie-card__reset-btn {
    margin-top: 4px;
    padding: 7px 14px !important;
    font-size: 13px !important;
}

.interest-badge {
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.9em;
}

.interest-urgent {
    background: #ffebee;
    color: #c62828;
    font-weight: 700;
}

.interest-eleve {
    background: #fdecea;
    color: #b71c1c;
}

.interest-moyen {
    background: #fff4e5;
    color: #9a6700;
}

.interest-faible {
    background: #eceff1;
    color: #607d8b;
}

.theme-reason {
    font-style: italic;
    font-size: 0.85em;
}

.theme-reason.reason-urgent {
    color: #c62828;
    font-weight: 600;
}

.theme-reason.reason-eleve {
    color: #b71c1c;
}

.theme-reason.reason-moyen {
    color: #9a6700;
}

.theme-reason.reason-faible {
    color: #607d8b;
}


/* -------------------------------------------------------------------------
   Footer — logos
   ------------------------------------------------------------------------- */

footer {
    position: absolute;
    bottom: 0;
    overflow: visible;
}

.image_premar {
    display: inline;
    position: fixed;
    left: 20PX;
    bottom: 20px;
    height: 120px;
    width: auto;
}

.image_icon {
    position: fixed;
    display: inline;
    right: 20PX;
    bottom: 15px;
    height: 100px;
    width: auto;
}

@media (max-width: 1100px) {
    .image_premar {
        display: none;
    }

    .image_icon {
        display: none;
    }
}

@media (max-width: 1500px) {
    .image_premar {
        height: 60px;
    }

    .image_icon {
        height: 50px;
    }
}