/* =========================================================================
   Outil de communication interne professionnel — Les Petits Tournesols
   UX V2 foundation. Design tokens repris de la charte reelle du site public
   (public/assets/css/site.css du depot lpt-site). Aucune couleur inventee ;
   seul --danger est ajoute (absent du site vitrine) pour les etats de refus.
   ========================================================================= */

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

@font-face {
    font-family: "Bubblegum Sans";
    src: url("../fonts/bubblegum-sans-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    /* Couleurs officielles (site.css) */
    --sand: #fff8ef;
    --sand-deep: #fff1db;
    --sun: #ffd444;
    --sea: #0093be;
    --sea-soft: #ddf4fb;
    --sea-text: #006b8a;
    --coral: #d5007f;
    --coral-hover: #b6006c;
    --green: #95c11f;
    --green-text: #5e7900;
    --ink: #16313a;
    --muted: #5f737b;
    --line: rgba(22, 49, 58, 0.12);
    --shadow: 0 24px 60px rgba(22, 49, 58, 0.12);
    --shadow-sm: 0 8px 24px rgba(22, 49, 58, 0.08);

    /* Seul ajout : etat de refus/danger (absent du site vitrine) */
    --danger: #c1432e;
    --danger-hover: #a5341f;

    /* Semantiques applicatives */
    --color-primary: var(--coral);
    --color-primary-hover: var(--coral-hover);
    --color-secondary: var(--sea);
    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-surface-warm: var(--sand);
    --color-text: var(--ink);
    --color-text-muted: var(--muted);
    --color-border: var(--line);
    --color-success: var(--green-text);
    --color-warning: var(--sun);
    --color-danger: var(--danger);

    --font-family-body: "Quicksand", "Segoe UI", system-ui, sans-serif;
    --font-family-heading: "Bubblegum Sans", "Quicksand", "Segoe UI", sans-serif;

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;   /* --radius du site */
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --content-width: min(1120px, calc(100% - 2 * var(--space-4)));
    --tap-min: 44px;
    color-scheme: light;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--color-text);
    background: var(--color-background);
    font-family: var(--font-family-body);
    line-height: 1.6;
}

img { display: block; max-width: 100%; }
p { margin: 0 0 var(--space-4); }

a {
    color: var(--sea-text);
    text-decoration: none;
    font-weight: 600;
}
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 3px solid var(--sea-text);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Coque ---- */
.app-shell {
    width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-5) 0 var(--space-6);
}

.app-shell > h1 {
    font-family: var(--font-family-heading);
    font-weight: 400;
    font-size: clamp(1.6rem, 5vw, 2.1rem);
    color: var(--coral);
    margin: 0 0 var(--space-5);
    letter-spacing: 0.2px;
}

h2, h3, h4 {
    color: var(--ink);
    line-height: 1.25;
}

/* =========================================================================
   Composants
   ========================================================================= */

/* ---- Boutons ---- */
.btn,
button[type="submit"],
.messenger button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    padding: 0 var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color .15s ease, border-color .15s ease;
}

.btn-primary,
button[type="submit"] {
    background: var(--color-primary);
    color: #ffffff;
}
.btn-primary:hover,
button[type="submit"]:hover { background: var(--color-primary-hover); }

.btn-secondary {
    background: #ffffff;
    color: var(--sea-text);
    border-color: var(--sea);
}
.btn-secondary:hover { background: var(--sea-soft); }

.btn-danger {
    background: var(--color-danger);
    color: #ffffff;
}
.btn-danger:hover { background: var(--danger-hover); }

.btn-ghost {
    background: transparent;
    color: var(--sea-text);
    border-color: var(--line);
}
.btn-ghost:hover { background: var(--sand); }

.btn-block { width: 100%; }

/* Etat desactive : indice visuel clair pendant l'envoi. pointer-events:none
   empeche tout etat :hover trompeur, sans dependre d'une guerre de
   specificite CSS avec .btn-primary:hover / .btn-secondary:hover etc. */
button:disabled,
.btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

/* ---- Champs ---- */
.field {
    display: block;
    margin-bottom: var(--space-4);
}

label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 700;
    color: var(--ink);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--muted);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--ink);
    font: inherit;
}
textarea { min-height: calc(2 * var(--tap-min)); resize: vertical; }

input:focus,
select:focus,
textarea:focus {
    border-color: var(--sea);
    outline: 3px solid var(--sea-text);
    outline-offset: 1px;
}

/* ---- Bannieres / messages ---- */
.msg-error,
[role="alert"] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: #fbe9e6;
    color: var(--danger);
    border: 1px solid rgba(193, 67, 46, 0.35);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.info-banner {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--sea-soft);
    color: var(--sea-text);
    border: 1px solid rgba(0, 147, 190, 0.2);
    margin-bottom: var(--space-4);
}

.status-line {
    min-height: 1.4rem;
    color: var(--muted);
    font-weight: 600;
    margin: var(--space-3) 0 0;
}
.status-line:empty { min-height: 0; margin: 0; }

/* ---- Badges de statut ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.6;
}
.badge-group { background: var(--sea-soft); color: var(--sea-text); }
/* Textes de badge fonces au-dela des tons de reference du site (--green-text,
   --danger) pour atteindre 4.5:1 sur leurs fonds clairs respectifs (verifie). */
.badge-success { background: rgba(149, 193, 31, 0.2); color: #4a5f00; }
.badge-pending { background: rgba(255, 212, 68, 0.35); color: #7a5b00; }
.badge-danger { background: #fbe9e6; color: #a8331f; }

/* ---- Avatar a initiales ---- */
.avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--sea-soft);
    color: var(--sea-text);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
}
.avatar-group { background: var(--sand-deep); color: #8a5a00; }

/* ---- Carte ---- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

/* =========================================================================
   Navigation du tableau de bord (conservee, restylee en pilules douces)
   ========================================================================= */
.dashboard-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 var(--space-5);
}
.dashboard-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: var(--ink);
    font-weight: 600;
}
.dashboard-nav a:hover { background: var(--sand); text-decoration: none; }

/* =========================================================================
   Ecran de connexion
   ========================================================================= */
.auth-card {
    max-width: 420px;
    margin: var(--space-5) auto 0;
}
.auth-card h2 {
    margin: 0 0 var(--space-5);
    font-size: 1.4rem;
}
.auth-hint {
    margin-top: var(--space-4);
    text-align: center;
    color: var(--muted);
    font-size: 0.95rem;
}

/* =========================================================================
   Messagerie
   ========================================================================= */
.messenger { margin-top: var(--space-5); }
.messenger > h3 {
    font-size: 1.15rem;
    margin: 0 0 var(--space-4);
}

.messenger-grid {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: var(--space-5);
    align-items: start;
}

.messenger-grid aside,
.messenger-grid section {
    background: var(--color-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.messenger-grid h4 {
    margin: 0 0 var(--space-3);
    font-size: 1rem;
}

/* Nouvelle conversation */
#messenger-recipient-form { margin-bottom: var(--space-3); }
#messenger-recipient-form button { width: 100%; margin-top: var(--space-2); }
[data-action="refresh-contexts"] {
    width: 100%;
    background: transparent;
    color: var(--sea-text);
    border: 1px solid var(--line);
    margin-bottom: var(--space-4);
    font-weight: 600;
}
[data-action="refresh-contexts"]:hover { background: var(--sand); }

/* Liste des conversations */
#messenger-contexts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
#messenger-contexts li { margin: 0; }
#messenger-contexts button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    padding: var(--space-3);
    background: #ffffff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    font-weight: 600;
    justify-content: flex-start;
}
#messenger-contexts button:hover { background: var(--sand); }
#messenger-contexts button[aria-current="true"] {
    border-color: var(--sea);
    background: var(--sea-soft);
}
.ctx-body { flex: 1 1 auto; min-width: 0; }
.ctx-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ctx-type {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
}
.ctx-unread {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--coral);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}
.messenger-empty {
    padding: var(--space-5) var(--space-3);
    text-align: center;
    color: var(--muted);
}

/* Fil de conversation */
#messenger-current-title {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
}
.messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 240px;
    max-height: 460px;
    overflow-y: auto;
    padding: var(--space-4) var(--space-1);
    margin-bottom: var(--space-4);
}
.message {
    max-width: 78%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 0;
}
.message small {
    display: block;
    margin-bottom: 2px;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
}
.message p { margin: 0; overflow-wrap: anywhere; }

.message--received {
    align-self: flex-start;
    background: var(--sea-soft);
    color: var(--ink);
    border-bottom-left-radius: var(--radius-sm);
}
.message--sent {
    align-self: flex-end;
    background: var(--coral);
    color: #ffffff;
    border-bottom-right-radius: var(--radius-sm);
}
/* Blanc opaque (5.08:1 sur --coral, verifie) plutot que 85% (3.91:1, sous AA) */
.message--sent small { color: #ffffff; }

/* Composer */
#messenger-send-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
#messenger-send-form[hidden] { display: none; }
.composer-row {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
}
.composer-row textarea { flex: 1 1 auto; min-height: var(--tap-min); }
.composer-row button { flex: 0 0 auto; }
.char-count {
    font-size: 0.78rem;
    color: var(--muted);
    text-align: right;
}

/* Deconnexion */
.logout-form { margin-top: var(--space-5); }
.logout-form button {
    background: transparent;
    color: var(--danger);
    border: 1px solid rgba(193, 67, 46, 0.3);
    font-weight: 700;
}
.logout-form button:hover { background: #fbe9e6; }

/* =========================================================================
   Tables (ecrans de gestion hors perimetre V2 : lisibilite mobile de base)
   ========================================================================= */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
    border-bottom: 1px solid var(--line);
    padding: var(--space-3);
    text-align: left;
    vertical-align: top;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* =========================================================================
   Responsive — mobile first ajuste sous 720px
   ========================================================================= */
@media (max-width: 720px) {
    .app-shell { width: calc(100% - 2 * var(--space-3)); padding-top: var(--space-4); }
    .messenger-grid { grid-template-columns: 1fr; }
    .messenger-grid aside,
    .messenger-grid section { padding: var(--space-4); }
    .messages { max-height: 55vh; }
    .message { max-width: 88%; }
    .dashboard-nav a { flex: 1 1 auto; justify-content: center; }
}

/* Bannière de staging (rendue uniquement en environnement de validation). */
.staging-banner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: #8a1c1c;
    color: #fff;
    text-align: center;
    font-weight: 700;
    line-height: 1.3;
}
.staging-banner__label { letter-spacing: 0.02em; }
.staging-banner__meta {
    font-weight: 400;
    font-size: 0.85em;
    opacity: 0.9;
}