/* Couleurs du portail Conexio : thème sombre de Telerik et rouge Conexio (mêmes valeurs que ClientPortal/wwwroot/app.css).
   Les jetons --ws-* suivent le thème : changer le thème change Workspace. */
:root {
    --kendo-color-primary: #dc4344 !important;
    --kendo-color-primary-hover: #c23d3e !important;
    --kendo-color-primary-active: #a83637 !important;

    --ws-fond: var(--kendo-color-app-surface);
    --ws-surface: var(--kendo-color-surface-alt);
    --ws-texte: var(--kendo-color-on-app-surface);
    --ws-discret: var(--kendo-color-subtle);
    --ws-accent: var(--kendo-color-primary);
    --ws-bordure: var(--kendo-color-border);
    --ws-erreur: var(--kendo-color-error);
    --ws-succes: var(--kendo-color-success);
}

html, body {
    margin: 0;
    background: var(--ws-fond);
    color: var(--ws-texte);
    font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem; }

/* Blazor met le focus sur le h1 à chaque navigation : pas de cadre au clic, seulement au clavier (comme le portail). */
h1:focus:not(:focus-visible) { outline: none; }

a { color: var(--ws-texte); }
a:hover { color: var(--ws-accent); }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--ws-accent);
    outline-offset: 2px;
}

.ws-entete {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.25rem;
    background: var(--ws-surface);
    border-bottom: 1px solid var(--ws-bordure);
}

.ws-marque { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.15rem; color: var(--ws-texte); text-decoration: none; margin-right: auto; }
/* La licence reste discrète : petite, en gris. */
.ws-compagnie { font-size: .8rem; color: var(--ws-discret); }
.ws-lien-discret { color: var(--ws-discret); }

.ws-corps { display: flex; min-height: calc(100vh - 56px); }

.ws-menu {
    width: 220px;
    flex-shrink: 0;
    padding: 1rem .75rem;
    background: var(--ws-surface);
    border-right: 1px solid var(--ws-bordure);
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* Volet du menu : fermé, le menu glisse hors de l'écran par la gauche et le contenu reprend la place.
   La marge négative couvre la largeur, le padding et la bordure du menu. */
.ws-volet { display: flex; flex-shrink: 0; overflow: hidden; }
.ws-volet .ws-menu { transition: margin-left .25s ease, visibility .25s; }
.ws-volet-ferme .ws-menu { margin-left: calc(-220px - 1.5rem - 1px); visibility: hidden; }

.ws-menu-groupe { margin-top: 1rem; font-size: .75rem; text-transform: uppercase; color: var(--ws-discret); }
.ws-menu-lien { padding: .35rem .5rem; border-radius: 6px; color: var(--ws-texte); text-decoration: none; }
.ws-menu-lien.active, .ws-menu-lien:hover { background: color-mix(in srgb, var(--ws-accent) 14%, transparent); color: var(--ws-accent); }

.ws-contenu { flex: 1; padding: 1.5rem; min-width: 0; }

.ws-muted { color: var(--ws-discret); }
.ws-erreur { color: var(--ws-erreur); }
.ws-succes { color: var(--ws-succes); margin-left: .75rem; }

.ws-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ws-tuile {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem;
    background: var(--ws-surface);
    border: 1px solid var(--ws-bordure);
    border-radius: 8px;
}
.ws-tuile-lien { text-decoration: none; color: inherit; }
.ws-tuile-lien:hover { border-color: var(--ws-accent); }
.ws-tuile-valeur { font-size: 1.4rem; font-weight: 600; }
.ws-tuile-libelle { color: var(--ws-discret); font-size: .9rem; }

.ws-connexion { max-width: 560px; }

.ws-formulaire {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem 1rem;
    align-items: end;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--ws-surface);
    border: 1px solid var(--ws-bordure);
    border-radius: 8px;
}
.ws-formulaire label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.ws-formulaire label.ws-case { flex-direction: row; align-items: center; }

@media (max-width: 700px) {
    .ws-corps { flex-direction: column; }
    .ws-menu { width: auto; flex: 1; border-right: none; border-bottom: 1px solid var(--ws-bordure); }
    .ws-volet-ferme { display: none; }
}

/* Lien qui a l'air d'un bouton principal : le portail doit s'ouvrir par un vrai clic (sinon le navigateur bloque l'onglet). */
.ws-bouton-principal {
    display: inline-block;
    padding: .55rem 1rem;
    border-radius: 6px;
    background: var(--ws-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.ws-bouton-principal:hover { background: var(--kendo-color-primary-hover); color: #fff; }

.ws-marque-produit { font-weight: 400; color: var(--ws-discret); }

/* Barre d'actions au-dessus d'une grille : boutons, import de fichier, message. */
.ws-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.ws-import { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ws-discret); }

/* Formulaire à deux colonnes larges, avec des champs qui prennent toute la largeur (texte d'un courriel). */
.ws-formulaire-large { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ws-pleine-largeur { grid-column: 1 / -1; }

h2 { font-size: 1.15rem; font-weight: 600; margin: 1.5rem 0 .75rem; }

/* Aperçu d'un courriel : en-têtes, puis le corps tel que le client le verrait. */
.ws-apercu { margin: 1rem 0; padding: 1rem; background: var(--ws-surface); border: 1px solid var(--ws-bordure); border-radius: 8px; }
.ws-entetes-courriel { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.ws-entetes-courriel dt { color: var(--ws-discret); }
.ws-entetes-courriel dd { margin: 0; }
.ws-corps-courriel { padding: 1rem; background: #fff; color: #1f2328; border-radius: 6px; max-height: 420px; overflow: auto; }