/* L'ossature visuelle de l'outil. Les jetons viennent de la charte European Sourcing, recopiés
   dans `tokens/`, `docs/charte-graphique/` reste la source de vérité.

   Ce qu'elle ne donne pas : elle décrit le site vitrine, dont le readme dit qu'aucun kit n'existe
   pour l'application. Un outil interne où deux ADV passent leurs journées ne se dessine pas comme
   une page d'accueil, pas de grandes bandes colorées ni de sections aérées à 100 px, mais de la
   densité, des listes lisibles et des états qui se distinguent au premier regard : les couleurs,
   rayons, ombres et fontes des jetons sont respectés, le rythme vertical est resserré. */

@import url("tokens/colors-JYWEfmj.css");
@import url("tokens/fonts-4lh19CG.css");
@import url("tokens/radius-42DeTcm.css");
@import url("tokens/shadows-4mW8akz.css");
@import url("tokens/spacing-K_DkChM.css");
@import url("components-4i4NOm8.css");
@import url("screens-7J0W8mT.css");
@import url("preview-J83yL2e.css");
@import url("dashboard-2kZv3D1.css");
@import url("analysis-ZuUUmpY.css");

*, *::before, *::after { box-sizing: border-box; }

/* La page occupe la hauteur de la fenêtre et le pied se pose en bas : sans cela, un écran au
   contenu court laisse le pied flotter au milieu, avec une bande grise en dessous qui ressemble
   à une page cassée. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--surface-alt);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3 {
    margin: 0 0 var(--space-3);
    color: var(--text-heading);
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
}

h1 { font-size: 28px; }
h2 { font-size: 18px; }

a { color: var(--text-link); }
code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--es-gray-100);
    border-radius: var(--radius-xs);
    padding: 1px 5px;
}

/* Le lien d'évitement : invisible jusqu'à ce qu'on le demande au clavier. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--space-2);
    background: var(--surface-card);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-button);
    z-index: 10;
}
.skip-link:focus { left: var(--space-4); }

/* ---------------------------------------------------------------- bandeau */

.banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    padding: var(--space-3) var(--space-5);
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
}

.banner__product { margin: 0; font-family: var(--font-heading); font-size: 16px; }
.banner__product a { color: var(--text-heading); text-decoration: none; }
.banner__product strong { color: var(--text-accent-secondary); }

.banner__person { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.banner__name { font-family: var(--font-ui); font-weight: 500; }
.banner__person form { margin: 0; }
.banner__signout {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--text-heading);
    font-family: var(--font-ui);
    cursor: pointer;
}
.banner__signout:hover { border-color: var(--color-secondary); }

.navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-button);
    color: var(--text-body);
    font-family: var(--font-ui);
    font-weight: 500;
    text-decoration: none;
}

.navigation a:hover { background: var(--surface-alt); color: var(--text-heading); }

/* `position: relative` sur l'élément de liste n'est pas décoratif : le panneau replié est
   `position: absolute`, et sans ancêtre positionné son bloc conteneur serait la page entière. */
.navigation li { position: relative; }

.navigation li:hover .navigation__detail,
.navigation li:focus-within .navigation__detail { display: flex; }

.navigation__detail { max-width: 18rem; font-size: 13px; }

/* L'écran actif, ou celui dont la page ouverte fait partie : le fond et le soulignement se voient,
   mais c'est `aria-current` qui porte l'information, la teinte ne fait que la rappeler. */
.navigation a[aria-current] {
    background: var(--color-primary-tint);
    color: var(--color-primary-hover);
    box-shadow: inset 0 -2px 0 var(--color-primary);
}

/* ------------------------------------------------- panne du compte technique */

/* Sous le bandeau, sur toute la largeur, tant que la panne est ouverte : c'est ce qui dit à qui
   ouvre l'outil que rien de programmé ne part. Le mot porte le sens, l'orange ne fait que le
   rendre repérable de loin, comme pour les états. */
.outage-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--container-pad);
    background: var(--es-coral-100);
    border-bottom: 2px solid var(--es-viz-orange);
}
.outage-banner__icon { flex: none; margin-top: 3px; color: var(--text-warning); }
.outage-banner__text { flex: 0 1 auto; margin: 0; }
.outage-banner__title { display: block; color: var(--text-warning); }
.outage-banner__alert { font-weight: 600; color: var(--text-heading); }
.outage-banner > .hint { flex: none; margin-top: 3px; }

.technical-account-outage { margin-bottom: var(--space-5); }
.technical-account-outage .state__title { font-size: 16px; }

/* ----------------------------------------------------------------- travail */

/* Toute la largeur, pas une colonne centrée : la charte décrit un site vitrine, où 1 140 px garde
   des lignes de texte lisibles, mais cet outil affiche des tableaux de six colonnes que deux ADV
   lisent toute la journée, et brider leur largeur ferait défiler latéralement ce qui tiendrait à
   l'écran ; bandeau et pied suivent, pour ne pas paraître en retrait. */
.workspace {
    flex: 1;
    width: 100%;
    padding: var(--space-6) var(--container-pad) var(--space-9);
}

.footer {
    padding: var(--space-5) var(--container-pad);
    background: var(--surface-footer);
    color: var(--text-on-color);
    font-size: 13px;
}
.footer p { margin: 0; }

/* ---------------------------------------------------------------- messages */

.message {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--border-strong);
    background: var(--surface-card);
}
.message strong { color: var(--text-heading); }
.message--success { border-left-color: var(--es-viz-teal); }
.message--warning { border-left-color: var(--color-secondary); }
.message--error { border-left-color: var(--color-primary); }

/* ------------------------------------------------------------------- états */

/* Les états se distinguent par leur mot (« Refusé », « Sellsy n'a pas répondu »), la couleur ne
   fait que les rendre repérables de loin : deux états qui ne différeraient que par leur teinte ne
   différeraient pas du tout pour qui ne les sépare pas. */
.state {
    padding: var(--space-5);
    border-radius: var(--radius-card);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
}
.state__title {
    margin: 0 0 var(--space-2);
    color: var(--text-heading);
    font-family: var(--font-heading);
    font-weight: 600;
}
.state__explanation, .state__remedy { margin: 0 0 var(--space-2); }
.state__remedy:last-child, .state__explanation:last-child { margin-bottom: 0; }

.state--empty { border-style: dashed; }
.state--error { border-left: 3px solid var(--color-primary); }
.state--failure { border-left: 3px solid var(--es-viz-orange); }

/* ------------------------------------------------- pages de l'échafaudage */

.screen__id { margin: calc(var(--space-3) * -1) 0 var(--space-5); color: var(--text-muted); }
.screen__redirect { color: var(--text-muted); font-size: 13px; }

/* --------------------------------------------------------------- étroitesse */

@media (max-width: 640px) {
    .banner { flex-direction: column; align-items: flex-start; }
    .workspace { padding: var(--space-5) var(--space-4) var(--space-8); }
    .outage-banner { padding: var(--space-3) var(--space-4); }
    h1 { font-size: 22px; }
}

/* ---------------------------------------------------------------- connexion */

/* La seule page vue avant la connexion : une feuille blanche posée sur le fond de l'outil, la
   marque en tête, une seule action. Le liseré rose est le seul ornement, il porte la couleur de
   la marque sans grande bande colorée. */
.login {
    display: grid;
    flex: 1;
    place-items: center;
    padding: var(--space-6) var(--space-4);
}

.login__sheet {
    width: 100%;
    max-width: 24rem;
    padding: var(--space-8) var(--space-6) var(--space-6);
    border-top: 4px solid var(--color-primary);
    border-radius: var(--radius-card);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
}

.login__logo { display: block; width: 180px; height: auto; margin: 0 0 var(--space-8); }

.login__title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }

.login__lead { margin: 0 0 var(--space-6); color: var(--text-muted); }

.login__messages .message { margin: 0 0 var(--space-4); }

.login__action {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-button);
    background: var(--color-secondary);
    color: var(--text-on-secondary);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}
.login__action:hover { background: var(--color-secondary-hover); border-color: var(--color-secondary-hover); }
.login__action:focus-visible { outline: 3px solid var(--text-heading); outline-offset: 2px; }

.login__demo {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}
.login__demo label { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-family: var(--font-ui); }
.login__demo-row { display: flex; gap: var(--space-2); }
.login__demo-row select { flex: 1; min-width: 0; }
.login__demo button { cursor: pointer; }