/* Express Cabinet : charte d'Express Juridique (INTEROPERABILITE-EC-EJ.md §1.4), polices auto-hébergées. */

@font-face { font-family: 'Ubuntu'; font-weight: 400; font-display: swap; src: url("../fonts/ubuntu-400-Az0JWXe.woff2") format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-weight: 500; font-display: swap; src: url("../fonts/ubuntu-500-0FFw8he.woff2") format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-weight: 700; font-display: swap; src: url("../fonts/ubuntu-700-GF4_8iU.woff2") format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-400-wXCs6kL.woff2") format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap; src: url("../fonts/open-sans-600-wHwATTd.woff2") format('woff2'); }

:root {
    --primary-color: #252e7a;
    --primary-light: #525d89;
    --secondary-color: #5e58dd;
    --tertiary-color: #fb9390;
    --quaternary-color: #97eac9;
    /* À compléter : liseré corail de la charte, fond corail très clair, texte foncé (contraste 6,9:1). */
    --a-completer: var(--tertiary-color);
    --a-completer-fond: #fff3f2;
    --a-completer-texte: #9c2f2b;
    --background-color: #f5f7fa;
    --surface: #ffffff;
    --success: #25c666;
    --warning: #f88e0b;
    --danger: #c10000;
    --gris-700: #787ead;
    --gris-500: #a3a8c8;
    --gris-300: #d5d8e8;
    --gris-200: #e6e8f1;
    --gris-100: #f0f1f7;
    --gris-50: #fafbfc;
    --texte: #252e7a;
    --texte-doux: #525d89;
    --barre: 53px;
    --entete: 56px;
    --gouttiere: 24px;
    --rayon: 8px;
    --ombre: 0 1px 2px rgba(37, 46, 122, .06), 0 4px 16px rgba(37, 46, 122, .06);
    --police-titre: 'Ubuntu', system-ui, sans-serif;
    --police-texte: 'Open Sans', system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--police-texte);
    font-size: 14px;
    line-height: 1.5;
    color: var(--texte);
    background: var(--background-color);
}

h1, h2, h3 { font-family: var(--police-titre); font-weight: 500; margin: 0 0 .5em; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
a { color: var(--secondary-color); }
:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Coque : barre latérale + en-tête ---------- */

.coque { display: grid; grid-template-columns: var(--barre) 1fr; min-height: 100vh; }

.barre {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; align-items: center;
    background: var(--primary-color);
    padding: 8px 0;
}
.barre__logo {
    display: grid; place-items: center;
    width: 37px; height: 37px; margin-bottom: 12px;
    border-radius: 8px; background: #fff;
    font-family: var(--police-titre); font-weight: 700; font-size: 14px; color: var(--primary-color);
    text-decoration: none; position: relative;
}
.barre__logo::after {
    content: ''; position: absolute; right: -3px; bottom: -3px;
    width: 10px; height: 10px; border-radius: 50%; background: var(--quaternary-color);
    border: 2px solid var(--primary-color);
}
.barre__section { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.barre__section + .barre__section { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.barre__pied { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); width: 100%; display: flex; justify-content: center; }

.icone {
    position: relative;
    display: grid; place-items: center;
    width: 41px; height: 41px; border-radius: 8px;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
}
.icone svg { width: 22px; height: 22px; fill: currentColor; }
.icone:hover, .icone:focus-visible { color: #fff; background: rgba(255, 255, 255, .1); }
.icone[aria-current='page'] { color: #fff; background: var(--secondary-color); }
.icone[aria-disabled='true'] { opacity: .38; cursor: default; }
.icone[aria-disabled='true']:hover { background: none; color: rgba(255, 255, 255, .72); }

/* Infobulle (libellé de chaque icône) */
.icone::after {
    content: attr(data-libelle);
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    padding: 4px 8px; border-radius: 4px;
    background: var(--primary-color); color: #fff; font-size: 12px; white-space: nowrap;
    box-shadow: var(--ombre);
    opacity: 0; pointer-events: none; transition: opacity .12s;
    z-index: 10;
}
.icone:hover::after, .icone:focus-visible::after { opacity: 1; }

.icone--ej { color: var(--quaternary-color); }

/* Barre dépliée : icônes et libellés (préférence mémorisée, barre_controller.js) */
.barre__tete { display: flex; align-items: center; gap: 10px; }
.barre__nom { display: none; color: #fff; font-family: var(--police-titre); font-weight: 700; font-size: 14px; white-space: nowrap; margin-bottom: 12px; }
.barre__bascule { border: 0; background: none; cursor: pointer; margin-bottom: 8px; }
.barre__bascule svg { transition: transform .15s; }
.barre-deployee { --barre: 220px; }
.barre-deployee .barre { align-items: stretch; padding: 8px; }
.barre-deployee .barre__tete { padding-left: 2px; }
.barre-deployee .barre__nom { display: block; }
.barre-deployee .barre__bascule svg { transform: rotate(180deg); }
.barre-deployee .barre__section { align-items: stretch; }
.barre-deployee .barre__pied { justify-content: flex-start; }
.barre-deployee .icone { width: auto; display: flex; justify-content: flex-start; gap: 12px; padding: 0 10px; }
.barre-deployee .icone::after { display: none; }
.barre-deployee .icone svg { flex-shrink: 0; }
.barre-deployee .icone .sr-only { position: static; width: auto; height: auto; overflow: hidden; clip: auto; text-overflow: ellipsis; font-size: 14px; }

.principal { display: flex; flex-direction: column; min-width: 0; }

.entete {
    height: var(--entete);
    display: flex; align-items: center; gap: 16px;
    padding: 0 var(--gouttiere);
    background: var(--surface);
    border-bottom: 1px solid var(--gris-200);
}
.entete__groupe { font-family: var(--police-titre); font-weight: 500; font-size: 16px; }
.entete__cabinet { color: var(--texte-doux); font-size: 13px; }
.entete__droite { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.profil { position: relative; }
.profil summary { list-style: none; cursor: pointer; }
.profil summary::-webkit-details-marker { display: none; }
.pastille {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--secondary-color); color: #fff;
    font-family: var(--police-titre); font-weight: 500; font-size: 13px;
}
.profil__menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px;
    background: var(--surface); border: 1px solid var(--gris-200); border-radius: var(--rayon);
    box-shadow: var(--ombre); padding: 8px 0; z-index: 20;
}
.profil__identite { padding: 8px 16px 12px; border-bottom: 1px solid var(--gris-200); }
.profil__identite strong { display: block; font-family: var(--police-titre); font-weight: 500; }
.profil__identite span { color: var(--texte-doux); font-size: 12px; }
.profil__menu a { display: block; padding: 8px 16px; color: var(--texte); text-decoration: none; }
.profil__menu a:hover { background: var(--gris-100); }

.contenu { padding: var(--gouttiere); max-width: 1280px; width: 100%; }

/* ---------- Éléments ---------- */

.carte { background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px 24px; }
.grille { display: grid; gap: var(--gouttiere); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.vide { color: var(--texte-doux); font-size: 13px; margin: 0; }
.etiquette { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: var(--gris-100); color: var(--texte-doux); }

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 18px; border: 0; border-radius: 20px;
    font: 500 14px var(--police-titre); text-decoration: none; cursor: pointer;
    /* Texte marine sur corail : contraste 5,6:1 (le blanc n'atteint que 2,1:1, sous le seuil RGAA). */
    background: var(--tertiary-color); color: var(--primary-color);
}
.bouton:hover { filter: brightness(.96); }
.bouton--plein { width: 100%; }

.champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.champ label { font-weight: 600; font-size: 13px; }
.champ input {
    height: 42px; padding: 0 12px;
    border: 1px solid var(--gris-300); border-radius: 6px;
    font: inherit; color: var(--texte); background: #fff;
}
.champ input:focus { border-color: var(--secondary-color); outline: none; box-shadow: 0 0 0 3px rgba(94, 88, 221, .15); }
.aide { font-size: 12px; color: var(--texte-doux); }

.alerte { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
.alerte--erreur { background: #fdecec; color: var(--danger); }
.alerte--succes { background: #e7f8ee; color: #137a3d; }
.alerte--avertissement { background: #fff3e0; color: #8a4b00; }

/* ---------- Formulaires ---------- */

.champ select, .champ textarea {
    padding: 8px 12px; border: 1px solid var(--gris-300); border-radius: 6px;
    font: inherit; color: var(--texte); background: #fff;
}
.champ select { height: 42px; }
.champ textarea { min-height: 96px; resize: vertical; }
.champ select:focus, .champ textarea:focus { border-color: var(--secondary-color); outline: none; box-shadow: 0 0 0 3px rgba(94, 88, 221, .15); }
.champ fieldset { border: 0; margin: 0; padding: 0; }
.champ legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; padding: 0; }
.champ--case label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; }
.champ--case input, .choix__option input { width: 18px; height: 18px; accent-color: var(--secondary-color); }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--danger); }
.choix { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.choix__option { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.erreurs { list-style: none; margin: 0; padding: 0; color: var(--danger); font-size: 12px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 8px; }
.pile .actions .bouton { white-space: nowrap; }
.lien-secondaire { color: var(--texte-doux); font-size: 14px; }

/* ---------- Listes et pages de paramétrage ---------- */

.fil { font-size: 13px; color: var(--texte-doux); margin-bottom: 8px; }
.fil a { color: var(--texte-doux); }
.titre-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.carte--lien { display: block; color: inherit; text-decoration: none; transition: box-shadow .12s; }
.carte--lien:hover, .carte--lien:focus-visible { box-shadow: 0 0 0 2px var(--secondary-color), var(--ombre); }
.carte h2 { font-size: 16px; margin: 0 0 8px; }
.mise-en-page { display: grid; gap: var(--gouttiere); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.tableau-conteneur { overflow-x: auto; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); margin-top: 16px; }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { text-align: left; font-weight: 600; font-size: 12px; color: var(--texte-doux); padding: 10px 14px; border-bottom: 1px solid var(--gris-200); white-space: nowrap; }
.tableau td { padding: 10px 14px; border-bottom: 1px solid var(--gris-100); }
.tableau tbody tr:hover { background: var(--gris-50); }
.tableau__action { text-align: right; white-space: nowrap; }
.tableau__action a { color: var(--secondary-color); }
.historique h2 { font-size: 16px; margin: 0 0 12px; }
.historique__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.historique__entete { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.historique__entete span { color: var(--texte-doux); }
.historique__champs { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--texte-doux); word-break: break-word; }

.ies {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: var(--gouttiere); padding: 14px 18px;
    background: var(--surface); border: 1px dashed var(--gris-300); border-radius: var(--rayon);
    color: var(--texte-doux);
}

/* ---------- Pages d'authentification ---------- */

.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth__carte { width: 100%; max-width: 400px; }
.auth__marque { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth__marque .barre__logo { margin: 0; background: var(--primary-color); color: #fff; }
.auth__marque .barre__logo::after { border-color: #fff; }
.auth__marque strong { display: block; font-family: var(--police-titre); font-weight: 500; font-size: 18px; }
.auth__marque span { color: var(--texte-doux); font-size: 13px; }
.auth__lien { display: block; margin-top: 16px; text-align: center; font-size: 13px; }

@media (max-width: 720px) {
    :root { --gouttiere: 16px; }
    .entete__cabinet { display: none; }
    .icone::after { display: none; }
    .barre__bascule { display: none; }
    .barre-deployee { --barre: 53px; }
    .barre-deployee .barre { align-items: center; padding: 8px 0; }
    .barre-deployee .barre__nom, .barre-deployee .icone .sr-only { display: none; }
    .barre-deployee .icone { width: 41px; justify-content: center; padding: 0; }
    .mise-en-page { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Dossiers ---------- */

.compteur { font-size: 14px; font-weight: 400; color: var(--texte-doux); margin-left: 6px; }
.code { font-family: var(--police-titre); font-weight: 500; letter-spacing: .02em; }
a.code { text-decoration: none; }
.filtres { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); align-items: end; margin-top: 16px; padding-bottom: 4px; }
.filtres .champ { margin-bottom: 16px; }
.filtres input, .filtres select { width: 100%; }
.filtres .champ--case input { width: 18px; }
.filtres__recherche { grid-column: span 2; }
.filtres__actions { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.etiquette--actif { background: #e7f8ee; color: #137a3d; }
.etiquette--en_sommeil, .etiquette--sortant { background: #fff3e0; color: #8a4b00; }
.etiquette--en_liquidation, .etiquette--liquide, .etiquette--vendu, .etiquette--perdu { background: var(--gris-200); color: var(--texte-doux); }
.etiquette--invite { background: #fff3e0; color: #8a4b00; }
.etiquette--sorti { background: var(--gris-200); color: var(--texte-doux); }
.invitation p { margin: 0 0 8px; }
.invitation__lien { display: flex; gap: 8px; flex-wrap: wrap; }
.invitation__lien input { flex: 1 1 280px; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--gris-300); border-radius: 6px; font: inherit; font-size: 12px; background: #fff; color: var(--texte); }
.pile { display: flex; flex-direction: column; gap: var(--gouttiere); min-width: 0; }
.carte h3 { font-size: 14px; margin: 16px 0 8px; }
.proprietes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 20px; margin: 0; }
.proprietes dt { font-size: 12px; color: var(--texte-doux); }
.proprietes dd { margin: 0; overflow-wrap: anywhere; }
.proprietes--equipe { grid-template-columns: minmax(0, 1fr); }
.texte-libre { white-space: pre-line; margin: 0; }
.contacts, .affectations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.affectations li { font-size: 13px; padding-left: 10px; border-left: 3px solid var(--gris-200); }
.affectations .affectations--en-cours { border-left-color: var(--secondary-color); }
.en-ligne { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.en-ligne input[type='date'] { height: 30px; padding: 0 6px; border: 1px solid var(--gris-300); border-radius: 6px; font: inherit; font-size: 12px; }
.lien-bouton { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--secondary-color); text-decoration: underline; cursor: pointer; }
.formulaire-compact .champ { margin-bottom: 12px; }
.formulaire-etroit { max-width: 560px; }
.groupe-champs { border: 0; margin: 0; }
.groupe-champs > legend { float: left; width: 100%; font-family: var(--police-titre); font-weight: 500; font-size: 16px; margin-bottom: 12px; padding: 0; }
.groupe-champs__corps { clear: both; }
.grille-champs { clear: both; display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grille-champs > div:not(.champ) { display: contents; }
@media (max-width: 720px) {
    .filtres__recherche { grid-column: auto; }
}
.tableau-conteneur--plat { box-shadow: none; border: 1px solid var(--gris-200); margin-top: 8px; }
.tableau__ligne--passee td { color: var(--texte-doux); }
.nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.total { margin: 0 0 4px; font-size: 13px; color: var(--texte-doux); }
.total strong { color: var(--texte); }
.siren { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: -4px 0 16px; }
.siren [data-siren-target='message'] { font-size: 13px; color: var(--texte-doux); }
.siren [data-siren-target='message'].erreur { color: var(--danger); }
.bouton--secondaire { background: var(--gris-100); color: var(--primary-color); min-height: 34px; }

/* ---------- Fiche à compléter (liseré rosé) ---------- */

.carte--a-completer { box-shadow: inset 4px 0 0 var(--a-completer), var(--ombre); }
.alerte--a-completer { background: var(--a-completer-fond); color: var(--texte); border-left: 4px solid var(--a-completer); }
.alerte--a-completer ul { margin: 4px 0 0; padding-left: 18px; }
.a-completer { margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--a-completer); border-radius: 4px; background: var(--a-completer-fond); font-size: 13px; }
.a-completer strong { color: var(--a-completer-texte); }
.champ--a-completer input, .champ--a-completer select, .champ--a-completer textarea { border-color: var(--a-completer); background: var(--a-completer-fond); }
.champ--a-completer > label::after { content: ' · à compléter'; font-weight: 400; font-size: 11px; color: var(--a-completer-texte); }
.code-dossier__message { min-height: 18px; }
.code-dossier__message.erreur { color: var(--danger); }

/* ---------- Liste filtrable (banques) ---------- */

.filtre-options__recherche { height: 36px; padding: 0 12px; border: 1px solid var(--gris-300); border-radius: 6px; font: inherit; color: var(--texte); }
.champ select[multiple] { height: auto; min-height: 160px; }

/* ---------- Révision des tarifs ---------- */

.etiquette-champ { font-weight: 600; font-size: 13px; }
.apercu-revision { margin-top: 16px; }

/* ---------- Saisie des temps (grille hebdomadaire) ---------- */

.actions--haut { margin: -8px 0 16px; }
.grille-temps th, .grille-temps td { vertical-align: middle; }
.grille-temps tbody th { font-weight: 400; min-width: 180px; }
.grille-temps__jour { text-align: center; font-size: 12px; white-space: nowrap; }
.grille-temps__jour--repos { color: var(--texte-doux); }
.grille-temps__jour--aujourdhui { color: var(--secondary-color); }
.grille-temps__case { padding: 4px; }
.grille-temps__case input { width: 64px; height: 32px; padding: 0 6px; border: 1px solid var(--gris-300); border-radius: 6px; font: inherit; font-size: 13px; text-align: center; }
.grille-temps__case input[readonly] { background: var(--gris-100); color: var(--texte-doux); cursor: help; }
.grille-temps__nouvelle select { max-width: 220px; height: 32px; border: 1px solid var(--gris-300); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; }
.grille-temps tfoot th, .grille-temps tfoot td { border-top: 2px solid var(--gris-200); }
.alerte ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Assistances et débours ---------- */

.liste-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.en-retard { color: var(--danger); font-weight: 600; }
.etiquette--assistance-en_cours, .etiquette--assistance-a_faire { background: #e7f0fd; color: #1f4f9a; }
.etiquette--assistance-en_attente_retour { background: #fff3e0; color: #8a4b00; }
.etiquette--assistance-a_facturer, .etiquette--debours-a_refacturer, .etiquette--debours-a_payer { background: #fdeef4; color: #9a1f55; }
.etiquette--assistance-facturee, .etiquette--debours-refacture, .etiquette--debours-comptabilise, .etiquette--debours-paye { background: #e7f8ee; color: #137a3d; }

/* ---------- Budgets ---------- */

.etiquette--budget-gain { background: #e7f8ee; color: #137a3d; }
.etiquette--budget-dans_le_budget { background: #eef7e7; color: #3d6b13; }
.etiquette--budget-depassement_leger { background: #fff3e0; color: #8a4b00; }
.etiquette--budget-depassement_critique { background: #fdecec; color: var(--danger); }

/* ---------- Ma journée ---------- */

.icone__pastille { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.notifications { margin-bottom: var(--gouttiere); }
.temps-semaine { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 12px; }
.temps-semaine li { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-radius: 6px; background: var(--gris-100); }
.temps-semaine__aujourdhui { outline: 2px solid var(--secondary-color); }