/*
 * Vintage Audio Laser — Flarum
 * Thème VAL (light-val)
 *
 * Cette feuille ne s'applique QU'au mode "VAL".
 * Les thèmes natifs light / dark / light-hc / dark-hc restent intacts.
 */

html[data-theme="light-val"] {
    --primary-color:   #5f666a;
    --secondary-color: #5f666a;

    --val-page:        #f4f4f3;
    --val-surface:     #ffffff;
    --val-line:        #d3d5d6;
    --val-line-soft:   #e7e8e8;

    --val-text:        #25282a;
    --val-muted:       #666b6e;

    --val-accent:      #5f666a;
    --val-accent-dark: #3f4548;

    --val-quote:       #f2f3f3;
}


/* Page */
html[data-theme="light-val"] body {
    background: var(--val-surface);
}



/* =========================================================
   MESSAGES
   ========================================================= */

/*
 * On conserve intégralement la géométrie native Flarum :
 * aucune marge ni aucun padding imposé ici.
 */
html[data-theme="light-val"] .Post {
    background: var(--val-surface);

    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* simple séparation visuelle entre messages */
html[data-theme="light-val"] .PostStream-item + .PostStream-item .Post {
    border-top: 1px solid var(--val-line);
}


/* =========================================================
   AUTEUR
   ========================================================= */

html[data-theme="light-val"] .PostUser-name,
html[data-theme="light-val"] .PostUser-name a {
    color: var(--val-accent);
    font-weight: 650;
}

html[data-theme="light-val"] .PostUser-name a:hover {
    color: var(--val-accent-dark);
}

html[data-theme="light-val"] .Post-header {
    color: var(--val-muted);
}

html[data-theme="light-val"] .Post .Avatar {
    box-shadow: 0 0 0 1px var(--val-line);
}


/* =========================================================
   TEXTE
   ========================================================= */

html[data-theme="light-val"] .Post-body {
    color: var(--val-text);
    line-height: 1.58;
}

html[data-theme="light-val"] .Post-body p {
    margin-top: 0;
    margin-bottom: .9em;
}

html[data-theme="light-val"] .Post-body a:not(.FoFUpload--Upl-Image-Preview-Link) {
    color: var(--val-accent);
    text-decoration-color: rgba(95, 102, 106, .35);
    text-underline-offset: 2px;
}

html[data-theme="light-val"] .Post-body a:not(.FoFUpload--Upl-Image-Preview-Link):hover {
    color: var(--val-accent-dark);
    text-decoration-color: currentColor;
}


/* =========================================================
   CITATIONS
   ========================================================= */

html[data-theme="light-val"] .Post-body blockquote {
    margin: .9em 0;
    padding: .7em 1em;

    background: var(--val-quote);

    border: 0;
    border-left: 3px solid var(--val-accent);

    border-radius: 0;

    color: #383c3e;
    box-shadow: none;
}

html[data-theme="light-val"] .Post-body blockquote blockquote {
    background: rgba(255, 255, 255, .6);
    border-left-color: #b9bdc0;
}


/* =========================================================
   CODE
   ========================================================= */

html[data-theme="light-val"] .Post-body code {
    padding: .1em .3em;

    background: #f1f2f2;
    border: 1px solid var(--val-line-soft);
    border-radius: 3px;
}

html[data-theme="light-val"] .Post-body pre {
    padding: 13px 15px;

    background: #f1f2f2;
    border: 1px solid var(--val-line);
    border-radius: 4px;

    box-shadow: none;
}

html[data-theme="light-val"] .Post-body pre code {
    padding: 0;
    border: 0;
    background: transparent;
}


/* =========================================================
   IMAGES
   ========================================================= */

html[data-theme="light-val"] .Post-body img {
    max-width: 100%;
    height: auto;
}

html[data-theme="light-val"] .Post-body .FoFUpload--Upl-Image-Preview {
    border-radius: 3px;
    box-shadow: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
    html[data-theme="light-val"] body {
        background: var(--val-surface);
    }
}

/* =========================================================
   HERO / TITRE DE DISCUSSION
   ========================================================= */

html[data-theme="light-val"] .DiscussionHero {
    box-shadow: none;
}

html[data-theme="light-val"] .DiscussionHero--colored {
    /*
     * On conserve la couleur du tag, mais on la calme un peu
     * avec une légère transparence visuelle via le contenu.
     */
    border-bottom: 1px solid rgba(0, 0, 0, .10);
}

html[data-theme="light-val"] .DiscussionHero-title {
    font-weight: 600;
    letter-spacing: -.01em;
}


/* =========================================================
   COLONNE LATÉRALE
   ========================================================= */

html[data-theme="light-val"] .Page-sidebar {
    color: var(--val-muted);
}

/* liens de navigation */
html[data-theme="light-val"] .Page-sidebar a {
    color: #5d666b;
    text-decoration: none;
}

html[data-theme="light-val"] .Page-sidebar a:hover {
    color: var(--val-accent);
}

/* boutons / entrées */
html[data-theme="light-val"] .Page-sidebar .Button {
    border-radius: 5px;
    box-shadow: none;
}

html[data-theme="light-val"] .Page-sidebar .Button:hover {
    background: #f1f2f2;
    color: var(--val-accent);
}

/* entrée active */
html[data-theme="light-val"] .Page-sidebar .active > a,
html[data-theme="light-val"] .Page-sidebar .Button.active {
    color: var(--val-accent);
    font-weight: 600;
}


/* =========================================================
   LABELS / ÉTIQUETTES
   ========================================================= */

html[data-theme="light-val"] .TagLabel {
    border-radius: 4px;
    box-shadow: none;
}

html[data-theme="light-val"] .TagLabel-text {
    font-weight: 500;
}


/* =========================================================
   PETITES FINITIONS
   ========================================================= */

html[data-theme="light-val"] .App-content {
    background: #fff;
}

/* ---------------------------------------------------------
   Colonne de navigation
   --------------------------------------------------------- */

html[data-theme="light-val"] .Page-sidebar {
    background: #f5f5f4;
    border-right: 1px solid #dedfe0;
}

/* Entrées de navigation */
html[data-theme="light-val"] .Page-sidebar a,
html[data-theme="light-val"] .Page-sidebar .Button {
    transition:
        background-color .15s ease,
        color .15s ease;
}

/* Survol */
html[data-theme="light-val"] .Page-sidebar a:hover,
html[data-theme="light-val"] .Page-sidebar .Button:hover {
    background: #eceeef;
    color: var(--val-accent);
}

/* Entrée actuellement active */
html[data-theme="light-val"] .Page-sidebar .active > a,
html[data-theme="light-val"] .Page-sidebar .Button.active,
html[data-theme="light-val"] .Page-sidebar a.active {
    background: #e8e9ea;
    color: var(--val-accent-dark);
    font-weight: 600;
}


/* ---------------------------------------------------------
   Bouton Nouvelle discussion
   --------------------------------------------------------- */

html[data-theme="light-val"] .Page-sidebar .Button--primary {
    background: var(--val-accent);
    border-color: var(--val-accent);
    color: #fff;

    box-shadow: none;
}

html[data-theme="light-val"] .Page-sidebar .Button--primary:hover,
html[data-theme="light-val"] .Page-sidebar .Button--primary:focus {
    background: var(--val-accent-dark);
    border-color: var(--val-accent-dark);
    color: #fff;
}


/* ---------------------------------------------------------
   Icônes de navigation
   --------------------------------------------------------- */

html[data-theme="light-val"] .Page-sidebar .Button-icon,
html[data-theme="light-val"] .Page-sidebar i {
    color: #6a7378;
}

html[data-theme="light-val"] .Page-sidebar a:hover .Button-icon,
html[data-theme="light-val"] .Page-sidebar a:hover i,
html[data-theme="light-val"] .Page-sidebar .active .Button-icon,
html[data-theme="light-val"] .Page-sidebar .active i {
    color: var(--val-accent);
}


/* ---------------------------------------------------------
   Zone principale
   --------------------------------------------------------- */

html[data-theme="light-val"] .Page-main {
    background: #fff;
}


/* =========================================================
   CORRECTION SIDEBAR — VERSION PLUS LÉGÈRE
   ========================================================= */

html[data-theme="light-val"] .Page-sidebar {
    background: transparent;
    border-right: 0;
}

/* Navigation : pas de gros aplats */
html[data-theme="light-val"] .Page-sidebar a,
html[data-theme="light-val"] .Page-sidebar .Button {
    background: transparent;
}

/* Survol très discret */
html[data-theme="light-val"] .Page-sidebar a:hover,
html[data-theme="light-val"] .Page-sidebar .Button:hover {
    background: rgba(90, 95, 98, .06);
    color: var(--val-accent);
}

/* Élément actif : simple accent, pas de pavé */
html[data-theme="light-val"] .Page-sidebar .active > a,
html[data-theme="light-val"] .Page-sidebar .Button.active,
html[data-theme="light-val"] .Page-sidebar a.active {
    background: transparent;
    color: var(--val-accent-dark);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--val-accent);
}

/* Bouton Nouvelle discussion : moins lourd */
html[data-theme="light-val"] .Page-sidebar .Button--primary {
    background: #62696d;
    border-color: #62696d;
    color: #fff;
    box-shadow: none;
}

html[data-theme="light-val"] .Page-sidebar .Button--primary:hover,
html[data-theme="light-val"] .Page-sidebar .Button--primary:focus {
    background: #494f52;
    border-color: #494f52;
}

/* Repère actif : laisser de l'air avant l'icône */
html[data-theme="light-val"] .Page-sidebar .active > a,
html[data-theme="light-val"] .Page-sidebar .Button.active,
html[data-theme="light-val"] .Page-sidebar a.active {
    position: relative;
    box-shadow: none;
}

html[data-theme="light-val"] .Page-sidebar .active > a::before,
html[data-theme="light-val"] .Page-sidebar .Button.active::before,
html[data-theme="light-val"] .Page-sidebar a.active::before {
    content: "";
    position: absolute;

    left: -10px;
    top: 4px;
    bottom: 4px;

    width: 2px;
    border-radius: 2px;

    background: var(--val-accent);
}

/* Actif : couleur uniquement, aucun repère vertical */
html[data-theme="light-val"] .Page-sidebar .active > a::before,
html[data-theme="light-val"] .Page-sidebar .Button.active::before,
html[data-theme="light-val"] .Page-sidebar a.active::before {
    content: none;
}


/* =========================================================
   ACCUEIL — LISTE DES DISCUSSIONS
   ========================================================= */

/* Une séparation légère suffit : pas de cartes */
html[data-theme="light-val"] .DiscussionListItem {
    border-bottom: 1px solid #e7e8e8;
}

/* Survol très léger */
html[data-theme="light-val"] .DiscussionListItem-content {
    transition: background-color .12s ease;
}

html[data-theme="light-val"] .DiscussionListItem:hover .DiscussionListItem-content {
    background: #fafafa;
}


/* ---------------------------------------------------------
   Titre
   --------------------------------------------------------- */

html[data-theme="light-val"] .DiscussionListItem-title {
    color: #242729;
    font-weight: 600;
    line-height: 1.25;
}

html[data-theme="light-val"] .DiscussionListItem-main:hover .DiscussionListItem-title {
    color: var(--val-accent);
}


/* ---------------------------------------------------------
   Informations secondaires
   --------------------------------------------------------- */

html[data-theme="light-val"] .DiscussionListItem-info {
    color: #7a7f82;
}

html[data-theme="light-val"] .DiscussionListItem-info a {
    color: #666c70;
}

html[data-theme="light-val"] .DiscussionListItem-info a:hover {
    color: var(--val-accent);
}

/* Extrait du dernier message */
html[data-theme="light-val"] .DiscussionListItem-info .item-excerpt {
    color: #92979a;
}


/* ---------------------------------------------------------
   Compteurs
   --------------------------------------------------------- */

html[data-theme="light-val"] .DiscussionListItem-stats {
    color: #707578;
}

html[data-theme="light-val"] .DiscussionListItem-stats-item {
    color: #5f6568;
    font-weight: 500;
}

html[data-theme="light-val"] .DiscussionListItem-stats-item-icon {
    opacity: .65;
}


/* ---------------------------------------------------------
   Tags
   --------------------------------------------------------- */

html[data-theme="light-val"] .DiscussionListItem .TagLabel {
    border-radius: 4px;
    box-shadow: none;
    filter: saturate(.78);
}

html[data-theme="light-val"] .DiscussionListItem .TagLabel-text {
    font-size: 11px;
    font-weight: 500;
}


/* ---------------------------------------------------------
   Discussions épinglées
   --------------------------------------------------------- */

html[data-theme="light-val"] .DiscussionListItem--sticky .DiscussionListItem-title {
    font-weight: 650;
}

/* On conserve le badge d'épinglage,
   mais sans lui ajouter d'autre décoration */


/* =========================================================
   BARRE D'OUTILS DE L'ACCUEIL
   ========================================================= */

html[data-theme="light-val"] .IndexPage-toolbar .Button {
    box-shadow: none;
    border-radius: 5px;
}

html[data-theme="light-val"] .IndexPage-toolbar .Button:not(.Button--primary) {
    background: #f0f1f1;
    color: #626b70;
}

html[data-theme="light-val"] .IndexPage-toolbar .Button:not(.Button--primary):hover {
    background: #e6e8e9;
    color: #4e575b;
}

/* Accueil : survol sans aplat latéral */
html[data-theme="light-val"] .DiscussionListItem:hover,
html[data-theme="light-val"] .DiscussionListItem:hover .DiscussionListItem-content,
html[data-theme="light-val"] .DiscussionListItem-content:hover {
    background: transparent;
}


/* =========================================================
   ACCUEIL — COLONNE DE GAUCHE
   ========================================================= */

/* ---------------------------------------------------------
   Commandes principales
   --------------------------------------------------------- */

html[data-theme="light-val"] .IndexPage-nav .item-allDiscussions > a,
html[data-theme="light-val"] .IndexPage-nav .item-messages > a,
html[data-theme="light-val"] .IndexPage-nav .item-privateDiscussions > a,
html[data-theme="light-val"] .IndexPage-nav .item-following > a,
html[data-theme="light-val"] .IndexPage-nav .item-tags > a {
    color: #626b70;
    font-weight: 400;

    background: transparent;
    box-shadow: none;
}

/* Icônes légèrement plus présentes que le texte */
html[data-theme="light-val"] .IndexPage-nav .item-allDiscussions > a .Button-icon,
html[data-theme="light-val"] .IndexPage-nav .item-messages > a .Button-icon,
html[data-theme="light-val"] .IndexPage-nav .item-privateDiscussions > a .Button-icon,
html[data-theme="light-val"] .IndexPage-nav .item-following > a .Button-icon,
html[data-theme="light-val"] .IndexPage-nav .item-tags > a .Button-icon {
    color: #6b7479;
    opacity: .95;
}

/* Survol */
html[data-theme="light-val"] .IndexPage-nav .item-allDiscussions > a:hover,
html[data-theme="light-val"] .IndexPage-nav .item-messages > a:hover,
html[data-theme="light-val"] .IndexPage-nav .item-privateDiscussions > a:hover,
html[data-theme="light-val"] .IndexPage-nav .item-following > a:hover,
html[data-theme="light-val"] .IndexPage-nav .item-tags > a:hover {
    color: var(--val-accent);
    background: transparent;
}

/* Élément actif */
html[data-theme="light-val"] .IndexPage-nav .item-allDiscussions.active > a,
html[data-theme="light-val"] .IndexPage-nav .item-messages.active > a,
html[data-theme="light-val"] .IndexPage-nav .item-privateDiscussions.active > a,
html[data-theme="light-val"] .IndexPage-nav .item-following.active > a,
html[data-theme="light-val"] .IndexPage-nav .item-tags.active > a {
    color: var(--val-accent);
    font-weight: 600;
    background: transparent;
}

html[data-theme="light-val"] .IndexPage-nav .active > a .Button-icon {
    color: var(--val-accent);
}


/* ---------------------------------------------------------
   Séparateur commandes / rubriques
   --------------------------------------------------------- */

html[data-theme="light-val"] .IndexPage-nav .Dropdown-separator {
    border-top: 1px solid #e3e4e5;
}


/* ---------------------------------------------------------
   Rubriques / tags
   --------------------------------------------------------- */

html[data-theme="light-val"] .IndexPage-nav .TagLinkButton {
    color: #626b70;
    background: transparent;

    transition:
        color .12s ease,
        background-color .12s ease;
}

html[data-theme="light-val"] .IndexPage-nav .TagLinkButton:hover {
    color: var(--val-accent);
    background: transparent;
}

/*
 * Les gros carrés violets attirent actuellement beaucoup
 * l'œil. On conserve la couleur du tag mais on les calme.
 */
html[data-theme="light-val"] .IndexPage-nav .TagIcon {
    transform: scale(.72);
    opacity: .62;

    filter:
        saturate(.65)
        brightness(1.05);
}

html[data-theme="light-val"] .IndexPage-nav .TagLinkButton:hover .TagIcon {
    opacity: .9;
    filter:
        saturate(.8)
        brightness(1);
}


/* Label actif d'une rubrique */
html[data-theme="light-val"] .IndexPage-nav li.active > .TagLinkButton {
    color: var(--val-accent);
    font-weight: 600;
}


/* ---------------------------------------------------------
   Bouton Nouvelle discussion
   --------------------------------------------------------- */

html[data-theme="light-val"] .IndexPage-newDiscussion.Button--primary {
    background: #62696d;
    border-color: #62696d;
    color: #fff;

    box-shadow: none;
}

html[data-theme="light-val"] .IndexPage-newDiscussion.Button--primary:hover,
html[data-theme="light-val"] .IndexPage-newDiscussion.Button--primary:focus {
    background: #494f52;
    border-color: #494f52;
    color: #fff;
}

/* Tags de la colonne gauche : petit repère discret */
html[data-theme="light-val"] .IndexPage-nav .TagIcon {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: var(--color);

    transform: none;
    opacity: .55;
    filter: none;

    margin-left: 4px;
    margin-right: 5px;
}

html[data-theme="light-val"] .IndexPage-nav .TagLinkButton:hover .TagIcon,
html[data-theme="light-val"] .IndexPage-nav li.active > .TagLinkButton .TagIcon {
    opacity: .9;
}

/* Repères des rubriques : plus de violet Flarum */
html[data-theme="light-val"] .IndexPage-nav .TagIcon {
    background: #9b9fa2 !important;
    opacity: .55;
}

html[data-theme="light-val"] .IndexPage-nav .TagLinkButton:hover .TagIcon,
html[data-theme="light-val"] .IndexPage-nav li.active > .TagLinkButton .TagIcon {
    background: var(--val-accent) !important;
    opacity: .9;
}

/* Rubriques de la colonne gauche : autoriser le retour à la ligne */
html[data-theme="light-val"] .IndexPage-nav .TagLinkButton {
    height: auto;
    min-height: 36px;
}

html[data-theme="light-val"] .IndexPage-nav .TagLinkButton .Button-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;

    line-height: 1.25;
}


/* =========================================================
   PAGE ÉTIQUETTES
   ========================================================= */

/* Plus aucun gros aplat de couleur */
html[data-theme="light-val"] .TagsPage .TagTile {
    background: #fff !important;
    color: var(--val-text) !important;

    border: 1px solid #dedfe0;
    border-radius: 6px;

    box-shadow: none;
}

/* Survol très léger */
html[data-theme="light-val"] .TagsPage .TagTile:hover {
    background: #fafafa !important;
    border-color: #d8d1cb;
}


/* ---------------------------------------------------------
   Titres
   --------------------------------------------------------- */

html[data-theme="light-val"] .TagsPage .TagTile-name,
html[data-theme="light-val"] .TagsPage .TagTile-name a,
html[data-theme="light-val"] .TagsPage .TagTile-heading,
html[data-theme="light-val"] .TagsPage .TagTile-heading a {
    color: #2b2e30 !important;
    font-weight: 600;
}

html[data-theme="light-val"] .TagsPage .TagTile:hover .TagTile-name,
html[data-theme="light-val"] .TagsPage .TagTile:hover .TagTile-name a {
    color: var(--val-accent) !important;
}


/* ---------------------------------------------------------
   Description
   --------------------------------------------------------- */

html[data-theme="light-val"] .TagsPage .TagTile-description {
    color: #6f7477 !important;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   Sous-rubriques
   --------------------------------------------------------- */

html[data-theme="light-val"] .TagsPage .TagTile-children {
    border-top: 1px solid #eceeef;
}

html[data-theme="light-val"] .TagsPage .TagTile-children a {
    color: #626b70 !important;
    font-weight: 500;
}

html[data-theme="light-val"] .TagsPage .TagTile-children a:hover {
    color: var(--val-accent) !important;
}


/* ---------------------------------------------------------
   Informations secondaires
   --------------------------------------------------------- */

html[data-theme="light-val"] .TagsPage .TagTile-info,
html[data-theme="light-val"] .TagsPage .TagTile-info * {
    color: #7d8285 !important;
}

html[data-theme="light-val"] .TagsPage .TagTile-lastPostedDiscussion {
    color: #747a7d !important;
}


/* ---------------------------------------------------------
   Neutraliser les styles "texte clair sur fond coloré"
   imposés par Flarum
   --------------------------------------------------------- */

html[data-theme="light-val"] .TagsPage .text-contrast--light,
html[data-theme="light-val"] .TagsPage .text-contrast--light a {
    color: inherit;
}


/* ---------------------------------------------------------
   Petit accent, sans reprendre le violet des tags
   --------------------------------------------------------- */

html[data-theme="light-val"] .TagsPage .TagTile-name::before {
    content: "";
    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 8px;
    margin-bottom: 2px;

    border-radius: 50%;
    background: var(--val-accent);

    opacity: .65;
}


/* Géométrie /tags commune : voir val-layout.css */

/* =========================================================
   PAGE ÉTIQUETTES — FINITIONS V2
   ========================================================= */

/* Cartes */
html[data-theme="light-val"] .TagsPage .TagTile {
    border-color: #dadcdd;
    border-radius: 7px;

    transition:
        border-color .15s ease,
        background-color .15s ease;
}

html[data-theme="light-val"] .TagsPage .TagTile:hover {
    background: #fff !important;
    border-color: #c8cbcd;
}


/* Titres */
html[data-theme="light-val"] .TagsPage .TagTile-name {
    margin-bottom: 8px;

    font-size: 17px;
    line-height: 1.25;
}

/* Petit point : encore plus discret */
html[data-theme="light-val"] .TagsPage .TagTile-name::before {
    width: 5px;
    height: 5px;

    margin-right: 8px;
    margin-bottom: 3px;

    opacity: .55;
}


/* Descriptions */
html[data-theme="light-val"] .TagsPage .TagTile-description {
    margin-bottom: 12px;

    color: #787d80 !important;
    font-size: 13px;
    line-height: 1.45;
}


/* Sous-rubriques */
html[data-theme="light-val"] .TagsPage .TagTile-children {
    margin-top: 10px;

    line-height: 1.55;
}

html[data-theme="light-val"] .TagsPage .TagTile-children a {
    color: #626b70 !important;
    font-size: 12px;
    font-weight: 500;

    text-decoration: none;
}

html[data-theme="light-val"] .TagsPage .TagTile-children a:hover {
    color: var(--val-accent) !important;
}


/* Espacement entre les liens enfants */
html[data-theme="light-val"] .TagsPage .TagTile-children > * {
    margin-right: 10px;
}


/* Dernière discussion / infos secondaires */
html[data-theme="light-val"] .TagsPage .TagTile-lastPostedDiscussion,
html[data-theme="light-val"] .TagsPage .TagTile-info {
    color: #9b9fa2 !important;
}


/* Un peu plus d'air entre les cartes */
html[data-theme="light-val"] .TagsPage .TagTiles {
    gap: 18px;
}

/* =========================================================
   PAGE ÉTIQUETTES — AJUSTEMENTS LISIBILITÉ
   ========================================================= */

/* Survol : quasiment aucune variation de fond */
html[data-theme="light-val"] .TagsPage .TagTile:hover {
    background: #fff !important;
    border-color: #d8d1cb;
}

/* Description : contraste nettement renforcé */
html[data-theme="light-val"] .TagsPage .TagTile-description {
    color: #555b5e !important;
    font-size: 13px;
    line-height: 1.5;
}

/* Sous-rubriques : un peu plus lisibles aussi */
html[data-theme="light-val"] .TagsPage .TagTile-children a {
    color: #5a6469 !important;
}

html[data-theme="light-val"] .TagsPage .TagTile-children a:hover {
    color: var(--val-accent) !important;
}

/* Hover uniforme sur toute la carte */
html[data-theme="light-val"] .TagsPage .TagTile-info,
html[data-theme="light-val"] .TagsPage .TagTile-children {
    background: transparent !important;
}

html[data-theme="light-val"] .TagsPage .TagTile:hover {
    background: #fbfbfb !important;
}

html[data-theme="light-val"] .TagsPage .TagTile:hover .TagTile-info,
html[data-theme="light-val"] .TagsPage .TagTile:hover .TagTile-children {
    background: transparent !important;
}


/* =========================================================
   HERO DES RUBRIQUES — TEINTE DU TAG ATTÉNUÉE
   ========================================================= */

/*
 * Flarum conserve background-color = couleur du tag.
 * Le voile blanc permet donc de garder cette identité,
 * sans le gros aplat saturé.
 */
html[data-theme="light-val"] .DiscussionHero--colored {
    background-image:
        linear-gradient(
            rgba(255,255,255,.82),
            rgba(255,255,255,.82)
        ) !important;

    border-bottom: 1px solid rgba(60,65,68,.10);
}

/* Texte sombre sur la teinte devenue claire */
html[data-theme="light-val"] .DiscussionHero--colored .DiscussionHero-title,
html[data-theme="light-val"] .DiscussionHero--colored .DiscussionHero-items {
    color: #34383a !important;
}


/* =========================================================
   VAL V0.2 — IDENTITÉ RÉELLEMENT VAL
   ========================================================= */

/* Boutons principaux */
html[data-theme="light-val"] .Page-sidebar .Button--primary,
html[data-theme="light-val"] .IndexPage-newDiscussion.Button--primary {
    background: #62696d !important;
    border-color: #62696d !important;
    color: #fff !important;
}

html[data-theme="light-val"] .Page-sidebar .Button--primary:hover,
html[data-theme="light-val"] .IndexPage-newDiscussion.Button--primary:hover {
    background: #484f53 !important;
    border-color: #484f53 !important;
}

html[data-theme="light-val"] .Page-sidebar .Button--primary .Button-icon,
html[data-theme="light-val"] .IndexPage-newDiscussion.Button--primary .Button-icon {
    color: #fff !important;
}


/* Bandeau supérieur : identité grise VAL */
html[data-theme="light-val"][data-colored-header="true"] .App-header {
    background: #62696d !important;
}

html[data-theme="light-val"][data-colored-header="true"] .App-header,
html[data-theme="light-val"][data-colored-header="true"] .App-header a,
html[data-theme="light-val"][data-colored-header="true"] .App-header .Button,
html[data-theme="light-val"][data-colored-header="true"] .App-header .Button-icon {
    color: #fff !important;
}


/* Tags : volontairement monochromes */
html[data-theme="light-val"] .TagLabel {
    --color: #737a7e !important;
    background-color: #737a7e !important;
    color: #fff !important;
    filter: none !important;
}

html[data-theme="light-val"] .TagLabel *,
html[data-theme="light-val"] .TagLabel-text {
    color: #fff !important;
}


/* Hero : on ne reprend plus la couleur du tag */
html[data-theme="light-val"] .DiscussionHero--colored {
    background-color: #eceeef !important;
    background-image: none !important;
    border-bottom: 1px solid #d5d8da !important;
}

html[data-theme="light-val"] .DiscussionHero--colored .DiscussionHero-title,
html[data-theme="light-val"] .DiscussionHero--colored .DiscussionHero-items {
    color: #303437 !important;
}


/* Accents et navigation */
html[data-theme="light-val"] .IndexPage-nav .TagIcon {
    background: #969da1 !important;
}

html[data-theme="light-val"] .IndexPage-nav .TagLinkButton:hover .TagIcon,
html[data-theme="light-val"] .IndexPage-nav li.active > .TagLinkButton .TagIcon {
    background: #596166 !important;
}

html[data-theme="light-val"] .PostUser-name,
html[data-theme="light-val"] .PostUser-name a,
html[data-theme="light-val"] .DiscussionListItem-main:hover .DiscussionListItem-title,
html[data-theme="light-val"] .Page-sidebar a:hover,
html[data-theme="light-val"] .Page-sidebar .active > a {
    color: #50585c !important;
}


/* =========================================================
   VAL — NE PLUS HÉRITER DES COULEURS D'ACCENT DE L'ADMIN
   ========================================================= */

html[data-theme="light-val"] {
    --primary-color:   #5f666a !important;
    --secondary-color: #5f666a !important;

    --control-color:   #62696d !important;
    --control-bg:      #eef0f1 !important;

    --link-color:      #50595e !important;
    --text-color:      #25282a !important;
}

/* liens et contrôles qui utilisent encore directement l'accent Flarum */
html[data-theme="light-val"] a:not(.Button):not(.TagLabel),
html[data-theme="light-val"] .Button--link,
html[data-theme="light-val"] .DiscussionPage-list .item-scrubber,
html[data-theme="light-val"] .Post-controls .Button {
    --color: #50595e;
}

/* menu utilisateur / menus déroulants */
html[data-theme="light-val"] .Dropdown-menu .Button:hover,
html[data-theme="light-val"] .Dropdown-menu a:hover {
    background: #eef0f1 !important;
    color: #3f474b !important;
}

/* éléments actifs / repères */
html[data-theme="light-val"] .active > .Button,
html[data-theme="light-val"] .active > a {
    color: #444c50;
}


/* =========================================================
   VAL — DERNIERS ACCENTS HÉRITÉS DE L'ADMIN
   ========================================================= */

/* Retour mobile */
html[data-theme="light-val"] .Navigation-back {
    color: #5f666a !important;
    background: #eef0f1 !important;
    border-color: #d7dadc !important;
}

/* Abonnement */
html[data-theme="light-val"] .SubscriptionMenu-button,
html[data-theme="light-val"] .SubscriptionMenu-button--null {
    color: #5f666a !important;
    border-color: #5f666a !important;
}

/* Scrubber */
html[data-theme="light-val"] .Scrubber-first,
html[data-theme="light-val"] .Scrubber-last,
html[data-theme="light-val"] .Scrubber-description {
    color: #5f666a !important;
    border-color: #5f666a !important;
}

/* Date / métadonnées des messages */
html[data-theme="light-val"] .PostMeta .Button--link,
html[data-theme="light-val"] .PostMeta .Button--text {
    color: #5f666a !important;
    border-color: #5f666a !important;
}


/* =========================================================
   VAL — BADGES DE GROUPES + ICÔNES DES MENUS
   ========================================================= */

/* Groupes secondaires : neutraliser les anciennes couleurs */
html[data-theme="light-val"] .Badge--group--6,
html[data-theme="light-val"] .Badge--group--10 {
    background: #7a8185 !important;
    color: #fff !important;
}

/* On conserve volontairement le groupe 1 en rouge */

/* Les icônes à l'intérieur des menus déroulants du header
   ne doivent pas hériter du blanc du bandeau */
html[data-theme="light-val"] .App-header .Dropdown-menu .Button-icon,
html[data-theme="light-val"] .SessionDropdown .Dropdown-menu .Button-icon {
    color: #5f666a !important;
}


/* =========================================================
   VAL — NAVIGATION MOBILE
   ========================================================= */

/* Retour : intégré au bandeau, sans pavé gris clair */
html[data-theme="light-val"] .App-header .Navigation-back {
    background: transparent !important;
    border-color: transparent !important;
    color: #fff !important;
}

html[data-theme="light-val"] .App-header .Navigation-back .Button-icon {
    color: #fff !important;
}


/* =========================================================
   VAL — COMPOSER / RÉDACTION
   ========================================================= */

/* Bouton Publier */
html[data-theme="light-val"] .Composer .Button--primary,
html[data-theme="light-val"] .Composer .TextEditor-controls .Button--primary {
    background: #62696d !important;
    border-color: #62696d !important;
    color: #fff !important;
}

html[data-theme="light-val"] .Composer .Button--primary:hover,
html[data-theme="light-val"] .Composer .TextEditor-controls .Button--primary:hover {
    background: #484f53 !important;
    border-color: #484f53 !important;
}

/* Icône du bouton Publier */
html[data-theme="light-val"] .Composer .Button--primary .Button-icon {
    color: #fff !important;
}


/* Barre d'outils de rédaction */
html[data-theme="light-val"] .TextEditor-controls .Button:not(.Button--primary),
html[data-theme="light-val"] .TextEditor-toolbar .Button,
html[data-theme="light-val"] .TextEditor-controls .Button-icon {
    color: #687176 !important;
}

html[data-theme="light-val"] .TextEditor-controls .Button:not(.Button--primary):hover,
html[data-theme="light-val"] .TextEditor-toolbar .Button:hover {
    color: #343a3d !important;
    background: #eef0f1 !important;
}


/* Commandes réduire / agrandir / fermer */
html[data-theme="light-val"] .Composer-controls .Button,
html[data-theme="light-val"] .Composer-controls .Button-icon {
    color: #687176 !important;
}

html[data-theme="light-val"] .Composer-controls .Button:hover,
html[data-theme="light-val"] .Composer-controls .Button:hover .Button-icon {
    color: #343a3d !important;
    background: #eef0f1 !important;
}


/* Liens / icônes diverses du composer */
html[data-theme="light-val"] .Composer a,
html[data-theme="light-val"] .Composer .Button--link {
    color: #687176 !important;
}

html[data-theme="light-val"] .Composer a:hover,
html[data-theme="light-val"] .Composer .Button--link:hover {
    color: #343a3d !important;
}


/* =========================================================
   VAL — MENU UTILISATEUR
   ========================================================= */

/* Avatar + pseudo : hover discret, sans retour de l'accent admin */
html[data-theme="light-val"] .App-header .SessionDropdown > .Dropdown-toggle:hover,
html[data-theme="light-val"] .App-header .SessionDropdown > .Dropdown-toggle:focus,
html[data-theme="light-val"] .App-header .SessionDropdown.open > .Dropdown-toggle {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
}


/* Contenu du menu : texte sombre sur fond blanc */
html[data-theme="light-val"] .App-header .SessionDropdown .Dropdown-menu,
html[data-theme="light-val"] .App-header .SessionDropdown .Dropdown-menu a,
html[data-theme="light-val"] .App-header .SessionDropdown .Dropdown-menu button,
html[data-theme="light-val"] .App-header .SessionDropdown .Dropdown-menu .Button,
html[data-theme="light-val"] .App-header .SessionDropdown .Dropdown-menu .Button-label,
html[data-theme="light-val"] .App-header .SessionDropdown .Dropdown-menu .Button-labelText,
html[data-theme="light-val"] .App-header .SessionDropdown .Dropdown-menu .username {
    color: #25282a !important;
}


/* Hover des entrées du menu */
html[data-theme="light-val"] .App-header .SessionDropdown .Dropdown-menu a:hover,
html[data-theme="light-val"] .App-header .SessionDropdown .Dropdown-menu button:hover,
html[data-theme="light-val"] .App-header .SessionDropdown .Dropdown-menu .Button:hover {
    background: #eef0f1 !important;
    color: #25282a !important;
}

/* =========================================================
   VAL — MESSAGES PRIVÉS (flarum/messages)
   ========================================================= */

/*
 * L'extension Messages de Flarum 2 utilise ses propres composants
 * (MessagesPage, DialogList, DialogSection, MessageStream, Message...)
 * et n'hérite donc pas de plusieurs règles appliquées aux discussions.
 */

html[data-theme="light-val"] .MessagesPage {
    --primary-color:   #5f666a !important;
    --secondary-color: #5f666a !important;
    --control-color:   #62696d !important;
    --control-bg:      #eef0f1 !important;
    --link-color:      #50595e !important;
    --text-color:      #25282a !important;

    color: #25282a;
    background: #fff;
}


/* ---------------------------------------------------------
   Hero / titre de la messagerie
   --------------------------------------------------------- */

html[data-theme="light-val"] .MessagesPageHero {
    background: #f4f4f3 !important;
    color: #303437 !important;
    border-bottom: 1px solid #d5d8da;
    box-shadow: none !important;
}

html[data-theme="light-val"] .MessagesPageHero h1,
html[data-theme="light-val"] .MessagesPageHero h2,
html[data-theme="light-val"] .MessagesPageHero .Hero-title,
html[data-theme="light-val"] .MessagesPageHero .Hero-subtitle {
    color: #303437 !important;
}


/* ---------------------------------------------------------
   Structure générale
   --------------------------------------------------------- */

html[data-theme="light-val"] .MessagesPage-content,
html[data-theme="light-val"] .DialogSection,
html[data-theme="light-val"] .MessageStream {
    background: #fff !important;
    color: #25282a !important;
}

html[data-theme="light-val"] .MessagesPage-content {
    border-color: #d3d5d6 !important;
}


/* ---------------------------------------------------------
   Colonne / commandes de messagerie
   --------------------------------------------------------- */

html[data-theme="light-val"] .MessagesSidebar,
html[data-theme="light-val"] .MessagesSidebar .Button,
html[data-theme="light-val"] .MessagesSidebar a {
    color: #5f666a;
}

html[data-theme="light-val"] .MessagesSidebar .Button:not(.Button--primary) {
    background: transparent !important;
    color: #626b70 !important;
    box-shadow: none !important;
}

html[data-theme="light-val"] .MessagesSidebar .Button:not(.Button--primary):hover,
html[data-theme="light-val"] .MessagesSidebar a:hover {
    background: rgba(90, 95, 98, .06) !important;
    color: #3f474b !important;
}

html[data-theme="light-val"] .MessagesSidebar .Button--primary {
    background: #62696d !important;
    border-color: #62696d !important;
    color: #fff !important;
    box-shadow: none !important;
}

html[data-theme="light-val"] .MessagesSidebar .Button--primary:hover,
html[data-theme="light-val"] .MessagesSidebar .Button--primary:focus {
    background: #484f53 !important;
    border-color: #484f53 !important;
    color: #fff !important;
}


/* ---------------------------------------------------------
   Liste des conversations
   --------------------------------------------------------- */

html[data-theme="light-val"] .DialogList {
    background: #fff !important;
    color: #25282a !important;
    border-color: #d3d5d6 !important;
    box-shadow: none !important;
}

html[data-theme="light-val"] .DialogListItem,
html[data-theme="light-val"] .DialogListItem-content {
    background: #fff !important;
    color: #25282a !important;
    border-color: #e7e8e8 !important;
    box-shadow: none !important;
}

html[data-theme="light-val"] .DialogListItem:hover,
html[data-theme="light-val"] .DialogListItem:hover .DialogListItem-content {
    background: #f7f8f8 !important;
}

html[data-theme="light-val"] .DialogListItem.active,
html[data-theme="light-val"] .DialogListItem--active,
html[data-theme="light-val"] .DialogListItem.is-active,
html[data-theme="light-val"] .DialogListItem[aria-selected="true"],
html[data-theme="light-val"] .DialogListItem.active .DialogListItem-content,
html[data-theme="light-val"] .DialogListItem--active .DialogListItem-content,
html[data-theme="light-val"] .DialogListItem.is-active .DialogListItem-content,
html[data-theme="light-val"] .DialogListItem[aria-selected="true"] .DialogListItem-content {
    background: #eef0f1 !important;
    color: #25282a !important;
}

html[data-theme="light-val"] .DialogListItem a,
html[data-theme="light-val"] .DialogListItem .username,
html[data-theme="light-val"] .DialogListItem-title {
    color: #303437 !important;
}

html[data-theme="light-val"] .DialogListItem time,
html[data-theme="light-val"] .DialogListItem-lastMessage,
html[data-theme="light-val"] .DialogListItem-subtitle,
html[data-theme="light-val"] .DialogListItem-excerpt {
    color: #777d80 !important;
}

html[data-theme="light-val"] .DialogListItem .Badge,
html[data-theme="light-val"] .DialogListItem-unread,
html[data-theme="light-val"] .DialogListItem-unreadCount {
    background: #62696d !important;
    color: #fff !important;
}


/* ---------------------------------------------------------
   Conversation ouverte
   --------------------------------------------------------- */

html[data-theme="light-val"] .DialogSection {
    border-color: #d3d5d6 !important;
    box-shadow: none !important;
}

html[data-theme="light-val"] .DialogSection-header {
    background: #f7f8f8 !important;
    color: #303437 !important;
    border-bottom-color: #dfe1e2 !important;
}

html[data-theme="light-val"] .DialogSection-header a,
html[data-theme="light-val"] .DialogSection-header .Button,
html[data-theme="light-val"] .DialogSection-header .Button-icon {
    color: #5f666a !important;
}


/* ---------------------------------------------------------
   Messages
   --------------------------------------------------------- */

html[data-theme="light-val"] .MessageStream {
    border-color: #d3d5d6 !important;
}

html[data-theme="light-val"] .MessageStream-item {
    border-color: #e7e8e8 !important;
}

html[data-theme="light-val"] .Message,
html[data-theme="light-val"] .Message-content,
html[data-theme="light-val"] .Message-body {
    color: #25282a !important;
    box-shadow: none !important;
}

html[data-theme="light-val"] .Message-header,
html[data-theme="light-val"] .Message-meta,
html[data-theme="light-val"] .Message time {
    color: #777d80 !important;
}

html[data-theme="light-val"] .Message a:not(.Button) {
    color: #50595e !important;
}

html[data-theme="light-val"] .Message a:not(.Button):hover {
    color: #343a3d !important;
}


/* ---------------------------------------------------------
   Composer des messages privés
   --------------------------------------------------------- */

html[data-theme="light-val"] .MessagesPage .Composer,
html[data-theme="light-val"] .MessagesPage .MessageComposer,
html[data-theme="light-val"] .MessageStream .MessageComposer {
    background: #fff !important;
    color: #25282a !important;
    border-color: #d3d5d6 !important;
    box-shadow: none !important;
}

html[data-theme="light-val"] .MessagesPage .Composer .Button--primary,
html[data-theme="light-val"] .MessagesPage .MessageComposer .Button--primary,
html[data-theme="light-val"] .MessageStream .MessageComposer .Button--primary {
    background: #62696d !important;
    border-color: #62696d !important;
    color: #fff !important;
}

html[data-theme="light-val"] .MessagesPage .Composer .Button--primary:hover,
html[data-theme="light-val"] .MessagesPage .MessageComposer .Button--primary:hover,
html[data-theme="light-val"] .MessageStream .MessageComposer .Button--primary:hover {
    background: #484f53 !important;
    border-color: #484f53 !important;
}

html[data-theme="light-val"] .MessagesPage textarea,
html[data-theme="light-val"] .MessagesPage input,
html[data-theme="light-val"] .MessageComposer textarea,
html[data-theme="light-val"] .MessageComposer input {
    color: #25282a !important;
    background: #fff !important;
    border-color: #d3d5d6 !important;
}

html[data-theme="light-val"] .MessagesPage textarea::placeholder,
html[data-theme="light-val"] .MessagesPage input::placeholder,
html[data-theme="light-val"] .MessageComposer textarea::placeholder,
html[data-theme="light-val"] .MessageComposer input::placeholder {
    color: #92979a !important;
}


/* ---------------------------------------------------------
   Menus / contrôles internes à la messagerie
   --------------------------------------------------------- */

html[data-theme="light-val"] .MessagesPage .Dropdown-menu,
html[data-theme="light-val"] .MessagesPage .SelectDropdown-menu {
    background: #fff !important;
    color: #25282a !important;
    border-color: #d3d5d6 !important;
}

html[data-theme="light-val"] .MessagesPage .Dropdown-menu a:hover,
html[data-theme="light-val"] .MessagesPage .Dropdown-menu .Button:hover,
html[data-theme="light-val"] .MessagesPage .SelectDropdown-menu a:hover,
html[data-theme="light-val"] .MessagesPage .SelectDropdown-menu .Button:hover {
    background: #eef0f1 !important;
    color: #3f474b !important;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {
    html[data-theme="light-val"] .MessagesPage,
    html[data-theme="light-val"] .MessagesPage-content,
    html[data-theme="light-val"] .DialogSection,
    html[data-theme="light-val"] .MessageStream {
        background: #fff !important;
    }
}

/* =========================================================
   VAL — VARIABLES FLARUM GLOBALES
   Empêche tout héritage de la couleur d'accentuation admin
   ========================================================= */

html[data-theme="light-val"] {
    /* Header + tiroir mobile */
    --header-bg: #62696d !important;
    --header-color: #ffffff !important;
    --header-control-bg: rgba(255, 255, 255, .12) !important;
    --header-control-color: #ffffff !important;

    /* Voiles / arrière-plans modaux et drawer */
    --overlay-bg: #25282a !important;

    /* Boutons primaires : variables pré-calculées par Flarum */
    --button-primary-color: #ffffff !important;
    --button-primary-bg: #62696d !important;
    --button-primary-bg-hover: #484f53 !important;
    --button-primary-bg-active: #343a3d !important;
    --button-primary-bg-disabled: #7d8285 !important;
}


/* =========================================================
   VAL — BOUTONS STANDARD
   Neutralise les variables pré-calculées par Flarum
   ========================================================= */

html[data-theme="light-val"] {
    --button-color: #62696d !important;
    --button-bg: #eef0f1 !important;
    --button-bg-hover: #e3e4e5 !important;
    --button-bg-active: #d7dadc !important;
    --button-bg-disabled: #eef0f1 !important;
}


/* =========================================================
   VAL — ACTIONS DES MESSAGES
   Toujours repérables, plus nettes au survol
   ========================================================= */

@media (min-width: 768px) {
    html[data-theme="light-val"] .no-touch .Post-actions {
        opacity: .58;
    }

    html[data-theme="light-val"] .no-touch .Post:hover .Post-actions,
    html[data-theme="light-val"] .no-touch .Post-actions:hover {
        opacity: 1;
    }
}


/* =========================================================
   VAL — CONTRÔLES DU HEADER COLORÉ
   Notifications / thème / messages : aucun retour de l'ocre
   ========================================================= */

html[data-theme="light-val"] {
    --header-colored-color: #ffffff !important;
    --header-colored-control-color: #ffffff !important;

    --header-colored-control-bg: rgba(255, 255, 255, .12) !important;
    --header-colored-control-bg-shaded: rgba(255, 255, 255, .18) !important;
    --header-colored-control-bg-fadedin: rgba(255, 255, 255, .18) !important;
}


/* VAL — icône/caret visible sur les boutons split primaires */
html[data-theme="light-val"] .Dropdown--split .Button--primary,
html[data-theme="light-val"] .Dropdown--split .Button--primary .Button-icon,
html[data-theme="light-val"] .Dropdown--split .Button--primary .Button-caret,
html[data-theme="light-val"] .Dropdown--split .Dropdown-toggle,
html[data-theme="light-val"] .Dropdown--split .Dropdown-toggle .Button-icon,
html[data-theme="light-val"] .Dropdown--split .Dropdown-toggle .Button-caret {
    color: #fff !important;
    opacity: 1 !important;
}


/* =========================================================
   VAL — NOTIFICATIONS DU HEADER
   ========================================================= */

html[data-theme="light-val"] .App-header .NotificationsDropdown .Notification,
html[data-theme="light-val"] .App-header .NotificationsDropdown .Notification-content,
html[data-theme="light-val"] .App-header .NotificationsDropdown .Notification-title,
html[data-theme="light-val"] .App-header .NotificationsDropdown .Notification-excerpt {
    color: #25282a !important;
}

html[data-theme="light-val"] .App-header .NotificationsDropdown .Notification-time {
    color: #747a7d !important;
}


/* =========================================================
   VAL — PAGE ÉTIQUETTES : CARTES APAISÉES
   ========================================================= */

@media (min-width: 768px) {

    html[data-theme="light-val"] .TagTiles {
        gap: 14px !important;
    }

    html[data-theme="light-val"] .TagTiles > li {
        background: #d9dddf !important;
        border: 1px solid #c9ced0 !important;
        border-radius: 8px !important;
        overflow: hidden;
    }

    html[data-theme="light-val"] .TagTile-name,
    html[data-theme="light-val"] .TagTile-name a,
    html[data-theme="light-val"] .TagTile-description,
    html[data-theme="light-val"] .TagTile-children,
    html[data-theme="light-val"] .TagTile-children a,
    html[data-theme="light-val"] .TagTile-lastPostedDiscussion,
    html[data-theme="light-val"] .TagTile-lastPostedDiscussion a {
        color: #303638 !important;
    }

    html[data-theme="light-val"] .TagTile-children a {
        background: rgba(255, 255, 255, .48) !important;
    }

    html[data-theme="light-val"] .TagTile-children a:hover {
        background: rgba(255, 255, 255, .72) !important;
    }

    html[data-theme="light-val"] .TagTile-lastPostedDiscussion {
        border-top-color: rgba(48, 54, 56, .16) !important;
    }
}


/* =========================================================
   VAL — LIENS ET ACCENTS INDÉPENDANTS DE LA COULEUR ADMIN
   ========================================================= */

html[data-theme="light-val"] {
    --primary-color:   #5f666a !important;
    --secondary-color: #5f666a !important;
    --link-color:      #50595e !important;
    --muted-color:     #697176 !important;
    --heading-color:   #303437 !important;
}

html[data-theme="light-val"] .IndexPage-nav .TagLinkButton {
    color: #626b70 !important;
}

html[data-theme="light-val"] .IndexPage-nav .TagLinkButton:hover,
html[data-theme="light-val"] .IndexPage-nav li.active > .TagLinkButton {
    color: #444c50 !important;
}

html[data-theme="light-val"] .val-child-forum-description,
html[data-theme="light-val"] .val-child-forum-arrow {
    color: #697176 !important;
}

/* VAL — mobile : bouton retour réduit au chevron */
@media (max-width: 767px) {
    html[data-theme="light-val"] .App-backControl .Navigation-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 46px;

        margin: 0 4px !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        color: #fff !important;
    }

    html[data-theme="light-val"] .App-backControl .Navigation-back .Button-icon {
        color: #fff !important;
        opacity: .9;
    }

    html[data-theme="light-val"] .App-backControl .Navigation-back:hover,
    html[data-theme="light-val"] .App-backControl .Navigation-back:focus {
        background: rgba(255,255,255,.10) !important;
    }
}


/* VAL — mobile : bouton Réduire du composeur bien visible */
@media (max-width: 767px) {
    html[data-theme="light-val"] .item-minimize.App-backControl > .Button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        color: #fff !important;
        opacity: 1 !important;
    }

    html[data-theme="light-val"] .item-minimize.App-backControl > .Button .Button-icon {
        color: #fff !important;
        opacity: .95 !important;
    }

    html[data-theme="light-val"] .item-minimize.App-backControl > .Button:hover,
    html[data-theme="light-val"] .item-minimize.App-backControl > .Button:focus {
        background: rgba(255,255,255,.10) !important;
    }
}


/* Mobile : compteur de messages non lus */
@media (max-width: 767.98px) {
    html[data-theme="light-val"] .unread .DiscussionListItem-count {
        color: #fff;
    }
}