/* ══ Charte de Kadofy (docs/design-standard.md) ══════════════════════════════════════════════════════════════
   Toutes les feuilles du site s'y réfèrent : pas de couleur, de taille de texte ni d'arrondi en dur (sauf couleurs
   des marques tierces : Google, Apple, WhatsApp…). Points de bascule (les media queries n'acceptent pas de
   variables) : 480 (petit téléphone), 640 (téléphone), 768 (grand téléphone, petite tablette), 1024 (tablette :
   barre du bas), 1280 (petit ordinateur) — en max-width ; les min-width sont le pixel d'après (641, 769, 1025, 1281). */
:root {
    color-scheme: light;

    /* Marque : un vert et un or. Deux verts pour deux rôles, identiques en clair mais pas en sombre :
       --c-green = texte, icônes, contours, traits ; --c-green-fill = fond vert sous un texte blanc (boutons, bandeaux,
       pastilles, avatars), qui reste foncé en mode sombre */
    --c-green:          #024735;
    --c-green-fill:     #024735;
    --c-green-dark:     #013628;   /* survol et appui des fonds verts, texte sur fond or, pied de page : foncé dans les deux thèmes */
    --c-green-light:    #e8f5ee;   /* fond d'un élément sélectionné ou survolé, bordure verte légère */
    --c-green-tint:     #f3faf6;   /* fond vert très léger : encadrés, messages de réussite */
    --c-gold:           #e1b93b;   /* mise en avant, alerte */
    --c-gold-hover:     #c9a52e;
    --c-gold-light:     #fbf3d9;   /* fond d'une alerte ou d'une étiquette dorée */

    /* Neutres */
    --c-text:           #1a1a1a;   /* titres et texte */
    --c-muted:          #6b7280;   /* texte secondaire, légendes */
    --c-subtle:         #9ca3af;   /* indications discrètes, icônes inactives, désactivé */
    --c-border:         #e5e5e3;   /* bordures, séparations, champs */
    --c-bg:             #faf9f6;   /* fond des pages */
    --c-surface:        #ffffff;   /* cartes, fenêtres, en-tête, menus */
    --c-surface-alt:    #f5f5f3;   /* fond léger : survol, zone secondaire */
    --c-surface-glass:  rgba(255, 255, 255, 0.95);   /* en-tête translucide pendant le défilement */

    /* Erreur et suppression : la seule couleur hors de la marque */
    --c-danger:         #dc2626;
    --c-danger-dark:    #b91c1c;   /* texte sur fond rouge pâle */
    --c-danger-hover:   #b91c1c;   /* survol d'un fond rouge (btn-danger) */
    --c-danger-bg:      #fef2f2;
    --c-danger-border:  #fecaca;

    /* Sur fond vert (bandeaux, pied de page), pas de variable : blanc à 0.8 (texte secondaire) ou 0.6 (texte
       discret), à 0.15 ou 0.3 (traits), à 0.1, 0.2 ou 0.3 (fonds). Voile derrière une fenêtre : noir à 0.5.
       Texte posé sur --c-text, --c-muted (fonds neutres) : var(--c-surface), qui s'inverse avec le thème. */

    /* Arrondis (et 50 % pour un rond) */
    --radius-sm:   6px;     /* pastilles, petits éléments */
    --radius-md:   10px;    /* champs, petites cartes, boutons carrés */
    --radius-lg:   16px;    /* cartes, encadrés, fenêtres, panneaux */
    --radius-pill: 50px;    /* boutons, onglets, étiquettes */

    /* Ombres et anneaux de focus */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.07);      /* carte au repos */
    --shadow-md:   0 4px 16px rgba(0,0,0,0.09);     /* carte survolée, menu */
    --shadow-lg:   0 12px 40px rgba(0,0,0,0.13);    /* menu ouvert, message */
    --shadow-xl:   0 20px 60px rgba(0,0,0,0.18);    /* fenêtre, tiroir */
    --shadow-up:   0 -4px 24px rgba(0,0,0,0.08);    /* barre collée en bas de l'écran */
    --ring:        0 0 0 3px rgba(2,71,53,0.15);    /* focus d'un champ */
    --ring-danger: 0 0 0 3px rgba(220,38,38,0.15);  /* champ en erreur */
    --ring-gold:   0 0 0 3px rgba(225,185,59,0.3);  /* focus sur fond vert */

    /* Tailles de texte */
    --text-3xs:  10px;      /* barre du bas et pastilles de compteur, rien d'autre */
    --text-2xs:  11px;      /* étiquettes en capitales, mini-badges */
    --text-xs:   12px;      /* légendes */
    --text-sm:   13px;      /* petits textes d'interface */
    --text-md:   14px;      /* texte de l'interface */
    --text-lg:   16px;      /* texte de lecture, champs sur téléphone */
    --text-xl:   18px;
    --text-2xl:  20px;      /* titres de section */
    --text-3xl:  24px;      /* titres de page sur téléphone */
    --text-4xl:  28px;      /* titres de page */
    --text-5xl:  32px;      /* grands chiffres, grandes icônes */
    --text-title:   clamp(1.6rem, 3vw, 2.2rem);     /* grands titres de section, nom d'une idée */
    --text-hero:    clamp(2rem, 4.5vw, 2.8rem);     /* titre d'un bandeau de page, prix d'une idée */
    --text-display: clamp(2.1rem, 4.8vw, 3.6rem);   /* titre de l'accueil */

    /* Largeurs de page */
    --page-width:      1280px;   /* pages larges : accueil, Explorer, blog, listes, réservations, idées… */
    --page-width-text: 760px;    /* une colonne de lecture : article, support, notifications, recherche */
    --page-gutter:     clamp(16px, 4vw, 48px);   /* marge sur les côtés : la même que l'en-tête */
    /* Conteneur d'une page : width: min(var(--page-width), 100% - 2 * var(--page-gutter)); margin: 0 auto; */

    --font-body:    'DM Sans', 'Segoe UI', sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    --transition: 0.2s ease;
}

/* ══ Mode sombre ══════════════════════════════════════════════════════════════════════════════════════════════
   html[data-theme="dark"], posé avant l'affichage par le script du <head> (Header.php) : choix du visiteur
   (Clair / Sombre / Automatique, Components/ThemeSwitch.php, assets/js/theme.js), réglage de l'appareil par défaut.
   Administration comprise (ses couleurs d'état : --adm-*, admin-dashboard.css) ; les e-mails et leurs aperçus restent
   en clair. Seules les couleurs changent : une page qui n'utilise que les variables (et --c-green-fill pour un fond
   vert sous du blanc) passe en sombre toute seule. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --c-green:          #6fcf9f;
    --c-green-fill:     #0e5c46;
    --c-green-dark:     #024735;
    --c-green-light:    #1c3a30;
    --c-green-tint:     #16261f;
    --c-gold:           #e1b93b;
    --c-gold-hover:     #c9a52e;
    --c-gold-light:     #3a3119;

    --c-text:           #ecebe7;
    --c-muted:          #a3a9b0;
    --c-subtle:         #757c84;
    --c-border:         #30363a;
    --c-bg:             #111413;
    --c-surface:        #1a1e1c;
    --c-surface-alt:    #232826;
    --c-surface-glass:  rgba(26, 30, 28, 0.95);

    --c-danger:         #e5484d;
    --c-danger-dark:    #ff9b9b;
    --c-danger-hover:   #c93a3f;
    --c-danger-bg:      #3b1d1e;
    --c-danger-border:  #6f2c2e;

    --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg:   0 12px 40px rgba(0,0,0,0.5);
    --shadow-xl:   0 20px 60px rgba(0,0,0,0.6);
    --shadow-up:   0 -4px 24px rgba(0,0,0,0.4);
    --ring:        0 0 0 3px rgba(111,207,159,0.3);
    --ring-danger: 0 0 0 3px rgba(229,72,77,0.35);
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--c-bg);
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
    font-family: inherit;
}

[id].is-active { display: block; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: var(--text-md);
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    white-space: nowrap;
    line-height: 1;
}

.btn-primary          { background: var(--c-green-fill); color: #fff; border-color: var(--c-green-fill); }
.btn-primary:hover    { background: var(--c-green-dark); border-color: var(--c-green-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(2, 71, 53, 0.25); }

.btn-yellow           { background: var(--c-gold); color: var(--c-green-dark); border-color: var(--c-gold); }
.btn-yellow:hover     { background: var(--c-gold-hover); border-color: var(--c-gold-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(225, 185, 59, 0.3); }

.btn-secondary        { background: var(--c-muted); color: var(--c-surface); border-color: var(--c-muted); }
.btn-secondary:hover  { background: var(--c-text); border-color: var(--c-text); }

.btn-success          { background: var(--c-green-fill); color: #fff; border-color: var(--c-green-fill); }
.btn-success:hover    { background: var(--c-green-dark); border-color: var(--c-green-dark); }

/* Action qui supprime ou annule, sur la page (la confirmation, elle, est en btn-danger) */
.btn-danger-outline       { background: var(--c-surface); color: var(--c-danger); border-color: var(--c-danger-border); }
.btn-danger-outline:hover { background: var(--c-danger-bg); border-color: var(--c-danger); }

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

.btn-light            { background: var(--c-surface-alt); color: var(--c-text); border-color: var(--c-border); }
.btn-light:hover      { background: var(--c-border); }

.btn-dark             { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); }
.btn-dark:hover       { background: var(--c-muted); border-color: var(--c-muted); }

/* Bouton blanc à côté d'un bouton principal (fenêtres Ajouter à ma liste, Réserver, Annuler la réservation : « Se connecter », « Fermer ») */
.btn-white            { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); }
.btn-white:hover      { border-color: var(--c-green); color: var(--c-green); }

/* Bouton secondaire à contour (page d'erreur « Page précédente », bilan de Mes listes) */
.btn-outline          { background: transparent; color: var(--c-green); border-color: var(--c-green); }
.btn-outline:hover    { background: var(--c-green-light); }

.btn-disabled, .btn:disabled { background: var(--c-border); color: var(--c-subtle); border-color: var(--c-border); cursor: not-allowed; pointer-events: none; }

/* Tailles et largeur. Rôles : btn-primary = action principale (vert) ; btn-yellow = mise en avant (or) ;
   btn-light = action secondaire, Annuler, Fermer, Précédent ; btn-outline = secondaire à contour ;
   btn-danger-outline = supprimer / annuler sur la page ; btn-danger = confirmer une suppression. */
.btn-sm    { padding: 8px 14px; font-size: var(--text-sm); }
.btn-lg    { padding: 16px 32px; font-size: var(--text-lg); }
.btn-block { display: flex; width: 100%; box-sizing: border-box; }
.btn:focus-visible { outline: 3px solid var(--c-green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:hover { transform: none; }
}

.badge {
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: transform 0.2s;
    text-transform: uppercase;
    font-size: var(--text-xs);
    display: block;
}

.badge-green       { background-color: var(--c-green-fill) !important; color: white; }
.badge-red         { background-color: var(--c-danger) !important; color: white; }
.badge-yellow      { background-color: var(--c-gold) !important; color: var(--c-green-dark); }
.badge-default     { background-color: var(--c-muted) !important; color: var(--c-surface); }
/* Badges d'occasion : couleur inline gérée dans l'admin (Occasions) */
.badge-link        { background-color: var(--c-muted) !important; color: var(--c-surface); }
.badge-password    { background-color: var(--c-text) !important; color: var(--c-surface); }
.badge-date-future { background-color: var(--c-surface-alt); color: var(--c-muted); border: 1px solid var(--c-border); }
.badge-date-past   { background-color: var(--c-danger-bg); color: var(--c-danger-dark); border: 1px solid var(--c-danger-border); }

.alert {
    padding: 10px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: var(--text-md);
    line-height: 1.5;
}

.alert-success {
    background-color: var(--c-green-tint);
    color: var(--c-green);
    border: 1px solid var(--c-green-light);
}

.alert-warning {
    background-color: var(--c-gold-light);
    color: var(--c-text);
    border: 1px solid var(--c-gold);
}

.alert-error {
    background-color: var(--c-danger-bg);
    color: var(--c-danger-dark);
    border: 1px solid var(--c-danger-border);
}

/* ── Toast notifications ── */
.toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 14px 20px;
    min-width: 260px;
    max-width: 400px;
    border-left: 4px solid var(--c-green);
    animation: toastIn .3s cubic-bezier(.22,1,.36,1);
}
.toast--error   { border-left-color: var(--c-danger); }
.toast--success { border-left-color: var(--c-green); }
.toast--info    { border-left-color: var(--c-muted); }

.toast__icon { flex-shrink: 0; font-size: var(--text-2xl); line-height: 1; display: flex; }
.toast--success .toast__icon { color: var(--c-green); }
.toast--error   .toast__icon { color: var(--c-danger); }
.toast--info    .toast__icon { color: var(--c-muted); }

.toast__text {
    flex: 1;
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--c-text);
    margin: 0;
}

.toast__close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-2xl);
    color: var(--c-subtle);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.toast__close:hover { color: var(--c-muted); background: var(--c-surface-alt); }

.toast--out {
    animation: toastOut .35s cubic-bezier(.4,0,1,1) forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0)   scale(1);    }
    to   { opacity: 0; transform: translateY(16px) scale(.97); }
}

/* Mobile et tablette : au-dessus de la barre de navigation du bas (60 px, header.css) au lieu de la recouvrir */
@media (max-width: 1024px) {
    .toast {
        bottom: calc(60px + 16px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {
    .toast {
        right: 12px;
        left: 12px;
        bottom: calc(60px + 12px + env(safe-area-inset-bottom));
        min-width: unset;
        max-width: unset;
    }
}

.form-group {
    margin-bottom: 20px;
}

.form-group > label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--c-text);
}

.form-group .required {
    color: var(--c-danger);
    margin-left: 2px;
}

.form-group small {
    display: block;
    margin-top: 6px;
    font-size: var(--text-xs);
    color: var(--c-muted);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    font-size: var(--text-md);
    font-family: var(--font-body);
    color: var(--c-text);
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
    -webkit-appearance: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--c-green);
    box-shadow: var(--ring);
}

/* Téléphones et tablettes : champs en 16 px minimum, sinon Safari (iPhone) zoome à chaque saisie et la page
   reste agrandie. !important : passe devant les tailles réduites des pages (filtres, paramètres, administration). */
@media (max-width: 1024px), (pointer: coarse) {
    body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea) {
        font-size: var(--text-lg) !important;
    }
}

input::placeholder,
textarea::placeholder {
    color: var(--c-subtle);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.input-group {
    display: flex;
    width: 100%;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.input-group:focus-within {
    border-color: var(--c-green);
    box-shadow: var(--ring);
}

.input-group input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1;
}

.input-group button {
    border-radius: 0;
    flex-shrink: 0;
}
/* Bouton afficher / masquer des champs mot de passe (ajouté par assets/js/ui-actions.js) */
.pw-field {
    position: relative;
    display: block;
    flex: 1 1 auto;        /* garde la place du champ dans les formulaires en ligne */
    min-width: 0;
}
.pw-field > input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 48px !important;
}
.pw-field__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    font-size: var(--text-lg);
    line-height: 1;
}
.pw-field__toggle:hover { background: var(--c-surface-alt); color: var(--c-green); }
.pw-field__toggle:focus-visible { outline: 2px solid var(--c-green); outline-offset: 1px; }

/* Menu « ⋯ » en haut des profils, listes et idées des autres membres, avec « Signaler » (Components/ReportLink.php) */
.report-menu {
    position: relative;
    flex-shrink: 0;
}
.report-menu__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--c-subtle);
    font-size: var(--text-xl);
    list-style: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.report-menu__btn::-webkit-details-marker { display: none; }
.report-menu__btn i { display: flex; }
.report-menu__btn:hover,
.report-menu[open] .report-menu__btn { background: var(--c-surface-alt); color: var(--c-muted); }
.report-menu__list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 200px;
    padding: 6px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.report-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--c-danger-dark);
    font-size: var(--text-md);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
.report-menu__item i { display: flex; }
.report-menu__item:hover,
.report-menu__item:focus-visible { background: var(--c-danger-bg); }

/* ══ Composants communs (docs/design-standard.md) ═════════════════════════════════════════════════════════════ */

/* État vide : une page ou un onglet sans contenu (icône, titre, texte, bouton) */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
    background: var(--c-surface);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-lg);
}
.empty-state[hidden] { display: none; }
.empty-state__icon { display: flex; margin-bottom: 4px; font-size: var(--text-5xl); color: var(--c-subtle); }
.empty-state__title { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--c-text); line-height: 1.5; }
.empty-state__text { margin: 0; max-width: 440px; font-size: var(--text-md); color: var(--c-muted); line-height: 1.5; }
.empty-state .btn { margin-top: 8px; }
/* Dans une fenêtre ou un menu : sans cadre */
.empty-state--compact { padding: 16px 8px; background: none; border: 0; }

/* Titres : titre de page (pages « appli ») et titre de section */
.page-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-text);
}
.section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-text);
}
@media (max-width: 640px) {
    .page-title { font-size: var(--text-3xl); }
    .section-title { font-size: var(--text-xl); }
}

/* Carte : fond blanc, bordure, arrondi et ombre de la charte */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Pastille (étiquette courte : statut, catégorie, compteur) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-alt);
    color: var(--c-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.chip--green   { background: var(--c-green-light); color: var(--c-green); }
.chip--gold    { background: var(--c-gold-light); color: var(--c-text); }
.chip--danger  { background: var(--c-danger-bg); color: var(--c-danger-dark); }

/* Pastille d'icône : icône Flaticon dans un rond teinté (à la place des emojis d'interface) */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-green-light);
    color: var(--c-green);
    font-size: var(--text-2xl);
    line-height: 1;
}
.icon-badge i { display: flex; }
.icon-badge--sm { width: 40px; height: 40px; font-size: var(--text-lg); }
.icon-badge--lg { width: 72px; height: 72px; font-size: var(--text-4xl); }
.icon-badge--gold    { background: var(--c-gold-light); color: var(--c-text); }

/* Choix du thème : Clair, Sombre ou Automatique (celui de l'appareil). Components/ThemeSwitch.php, assets/js/theme.js ;
   menu de l'avatar et panneau « Plus » des membres, bouton de l'en-tête des visiteurs (.theme-menu, header.css) */
.theme-switch {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-alt);
}
.theme-switch__btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--c-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
}
.theme-switch__btn i { display: flex; }
.theme-switch__btn:active { color: var(--c-text); }
@media (hover: hover) {                 /* au doigt, le survol resterait collé au dernier bouton touché */
    .theme-switch__btn:hover { color: var(--c-text); }
}
.theme-switch__btn:focus-visible { outline: 2px solid var(--c-green); outline-offset: 1px; }
.theme-switch__btn[aria-checked="true"] {
    background: var(--c-surface);
    color: var(--c-green);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
/* Pendant le changement de thème (theme.js) : toutes les couleurs changent d'un coup, sans le fondu des boutons et liens */
.theme-changing,
.theme-changing *,
.theme-changing *::before,
.theme-changing *::after {
    transition: none !important;
}