/* =============================================================================
   Thème ATAESOFT – Conformité RGPD
   Surcharge de Bootstrap 5.3 : couleurs du logo (bleu marine #004890, orange
   soleil #F06000), typographie Plus Jakarta Sans, surfaces blanches sur fond
   gris-bleu. Chargé après bootstrap.min.css.
   ============================================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../lib/polices/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../lib/polices/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../lib/polices/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Jetons ------------------------------------------------------------------ */
:root {
  --ata-marine: #004890;
  --ata-marine-fonce: #00356b;
  --ata-marine-nuit: #0a2540;
  --ata-marine-pale: #e8f0fa;
  --ata-orange: #f06000;
  --ata-orange-fonce: #b34700;
  --ata-orange-pale: #ffe7d6;

  --ata-fond: #f4f6fa;
  --ata-surface: #ffffff;
  --ata-surface-douce: #f8fafc;
  --ata-bordure: #e3e8f0;
  --ata-bordure-forte: #d5dce6;
  --ata-texte: #0f1b2d;
  --ata-texte-2: #3d4e66;
  --ata-texte-doux: #5b6b82;
  --ata-texte-discret: #8392a7;

  --ata-succes: #0f6b43;
  --ata-succes-fond: #e3f5ec;
  --ata-succes-point: #0f8a55;
  --ata-attente: #8a4b00;
  --ata-attente-fond: #fff1dc;
  --ata-attente-point: #f0a030;
  --ata-neutre: #475569;
  --ata-neutre-fond: #eef1f5;
  --ata-danger: #b42318;
  --ata-danger-fond: #fdecea;

  --ata-rayon: 10px;
  --ata-rayon-carte: 16px;

  /* Bootstrap */
  --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --bs-body-font-size: 0.9375rem;
  --bs-body-color: var(--ata-texte);
  --bs-body-bg: var(--ata-fond);
  --bs-emphasis-color: var(--ata-texte);
  --bs-secondary-color: var(--ata-texte-doux);
  --bs-tertiary-bg: var(--ata-surface-douce);
  --bs-border-color: var(--ata-bordure);
  --bs-border-radius: var(--ata-rayon);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 12px;
  --bs-primary: var(--ata-marine);
  --bs-primary-rgb: 0, 72, 144;
  --bs-primary-text-emphasis: var(--ata-marine-fonce);
  --bs-primary-bg-subtle: var(--ata-marine-pale);
  --bs-link-color: var(--ata-marine);
  --bs-link-color-rgb: 0, 72, 144;
  --bs-link-hover-color: var(--ata-marine-fonce);
  --bs-link-hover-color-rgb: 0, 53, 107;
  --bs-focus-ring-color: rgba(0, 72, 144, 0.18);
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, .h1, h2, .h2, h3, .h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

h4, .h4, h5, .h5, h6, .h6 {
  font-weight: 700;
}

.text-muted {
  color: var(--ata-texte-doux) !important;
}

.font-monospace {
  font-size: 0.875em;
}

/* --- Boutons ------------------------------------------------------------------ */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-border-radius: var(--ata-rayon);
  --bs-btn-focus-box-shadow: 0 0 0 4px rgba(0, 72, 144, 0.18);
}

.btn-sm {
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-border-radius: 8px;
}

.btn-primary {
  --bs-btn-font-weight: 700;
  --bs-btn-bg: var(--ata-marine);
  --bs-btn-border-color: var(--ata-marine);
  --bs-btn-hover-bg: var(--ata-marine-fonce);
  --bs-btn-hover-border-color: var(--ata-marine-fonce);
  --bs-btn-active-bg: var(--ata-marine-fonce);
  --bs-btn-active-border-color: var(--ata-marine-fonce);
  --bs-btn-disabled-bg: var(--ata-marine);
  --bs-btn-disabled-border-color: var(--ata-marine);
}

.btn-outline-primary {
  --bs-btn-color: var(--ata-marine);
  --bs-btn-bg: var(--ata-marine-pale);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--ata-marine);
  --bs-btn-hover-border-color: var(--ata-marine);
  --bs-btn-active-bg: var(--ata-marine-fonce);
  --bs-btn-active-border-color: var(--ata-marine-fonce);
}

.btn-outline-secondary {
  --bs-btn-color: var(--ata-texte);
  --bs-btn-bg: var(--ata-surface);
  --bs-btn-border-color: var(--ata-bordure-forte);
  --bs-btn-hover-color: var(--ata-texte);
  --bs-btn-hover-bg: var(--ata-surface-douce);
  --bs-btn-hover-border-color: var(--ata-texte-discret);
  --bs-btn-active-color: var(--ata-texte);
  --bs-btn-active-bg: var(--ata-neutre-fond);
  --bs-btn-active-border-color: var(--ata-texte-discret);
}

.btn-success {
  --bs-btn-font-weight: 700;
  --bs-btn-bg: var(--ata-succes);
  --bs-btn-border-color: var(--ata-succes);
  --bs-btn-hover-bg: #0b5535;
  --bs-btn-hover-border-color: #0b5535;
}

.btn-outline-danger {
  --bs-btn-color: var(--ata-danger);
  --bs-btn-border-color: #f3c3be;
  --bs-btn-hover-bg: var(--ata-danger);
  --bs-btn-hover-border-color: var(--ata-danger);
}

.btn-link {
  --bs-btn-font-weight: 600;
  text-decoration: none;
}

.btn-link.text-danger:hover {
  color: #8f1b12 !important;
}

/* --- Formulaires -------------------------------------------------------------- */
.form-label,
.form-check-label {
  font-weight: 600;
  font-size: 0.875rem;
}

.form-control,
.form-select {
  border-color: var(--ata-bordure-forte);
  border-radius: var(--ata-rayon);
  padding: 0.6rem 0.9rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ata-marine);
  box-shadow: 0 0 0 4px rgba(0, 72, 144, 0.12);
}

.form-check-input:checked {
  background-color: var(--ata-marine);
  border-color: var(--ata-marine);
}

.form-text {
  color: var(--ata-texte-doux);
}

/* Tom Select */
.ts-wrapper .ts-control {
  border-color: var(--ata-bordure-forte);
  border-radius: var(--ata-rayon);
  padding: 0.55rem 0.9rem;
}

.ts-wrapper.focus .ts-control {
  border-color: var(--ata-marine);
  box-shadow: 0 0 0 4px rgba(0, 72, 144, 0.12);
}

.ts-dropdown .active {
  background-color: var(--ata-marine-pale);
  color: var(--ata-marine-fonce);
}

/* --- Cartes et sections -------------------------------------------------------- */
.card {
  --bs-card-border-color: var(--ata-bordure);
  --bs-card-border-radius: var(--ata-rayon-carte);
  --bs-card-inner-border-radius: calc(var(--ata-rayon-carte) - 1px);
  --bs-card-cap-bg: var(--ata-surface);
  --bs-card-cap-padding-y: 1rem;
  --bs-card-cap-padding-x: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-spacer-y: 1.25rem;
  box-shadow: none;
}

.card.shadow-sm {
  box-shadow: 0 1px 3px rgba(15, 27, 45, 0.05) !important;
}

.card-header {
  border-bottom-color: #eef1f5;
}

.card-header .h6,
.card-header h2.h6 {
  font-size: 1rem;
  font-weight: 800;
}

.list-group {
  --bs-list-group-border-color: #eef1f5;
}

/* --- Tableaux ------------------------------------------------------------------ */
.table {
  --bs-table-border-color: #eef1f5;
  --bs-table-hover-bg: var(--ata-surface-douce);
  font-size: 0.9rem;
}

.table > thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ata-texte-doux);
  background: var(--ata-surface-douce);
  border-bottom-color: #eef1f5;
}

.card > .table > :not(caption) > * > *:first-child {
  padding-left: 1.5rem;
}

.card > .table > :not(caption) > * > *:last-child {
  padding-right: 1.5rem;
}

.table > :not(caption) > * > * {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

/* --- Pastilles (badges Bootstrap redessinés) ---------------------------------- */
.badge {
  --bs-badge-font-size: 0.75rem;
  --bs-badge-font-weight: 700;
  --bs-badge-padding-x: 0.65rem;
  --bs-badge-padding-y: 0.3rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.text-bg-success { color: var(--ata-succes) !important; background-color: var(--ata-succes-fond) !important; }
.text-bg-warning { color: var(--ata-attente) !important; background-color: var(--ata-attente-fond) !important; }
.text-bg-danger { color: var(--ata-danger) !important; background-color: var(--ata-danger-fond) !important; }
.text-bg-secondary { color: var(--ata-neutre) !important; background-color: var(--ata-neutre-fond) !important; }
.text-bg-primary { color: var(--ata-marine) !important; background-color: var(--ata-marine-pale) !important; }
.text-bg-light { color: var(--ata-texte-2) !important; background-color: var(--ata-neutre-fond) !important; border: 0 !important; }

/* Pastille de statut avec point coloré */
.badge.statut::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 0.1em;
  background: currentColor;
}

/* --- Alertes -------------------------------------------------------------------- */
.alert {
  --bs-alert-border-radius: 12px;
  border: 0;
}

.alert-warning { --bs-alert-color: #6b3a00; --bs-alert-bg: var(--ata-attente-fond); }
.alert-danger { --bs-alert-color: #8f1b12; --bs-alert-bg: var(--ata-danger-fond); }
.alert-info { --bs-alert-color: var(--ata-marine-fonce); --bs-alert-bg: var(--ata-marine-pale); }
.alert-light { --bs-alert-color: var(--ata-texte-2); --bs-alert-bg: var(--ata-surface); border: 1px solid var(--ata-bordure) !important; }

/* --- Modale, menus déroulants, fil d'Ariane --------------------------------------- */
.modal {
  --bs-modal-border-radius: var(--ata-rayon-carte);
  --bs-modal-border-color: transparent;
  --bs-modal-header-border-color: #eef1f5;
  --bs-modal-footer-border-color: #eef1f5;
  --bs-modal-padding: 1.5rem;
}

.modal-content {
  box-shadow: 0 24px 48px rgba(10, 37, 64, 0.18);
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--ata-bordure);
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-link-active-bg: var(--ata-marine);
  box-shadow: 0 12px 32px rgba(10, 37, 64, 0.12);
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--ata-texte-discret);
  --bs-breadcrumb-item-active-color: var(--ata-texte);
  font-size: 0.875rem;
}

.breadcrumb a {
  text-decoration: none;
}

/* --- Grilles (Tabulator) ---------------------------------------------------------
   Rendu de la maquette : carte blanche arrondie, en-têtes en petites capitales grises,
   lignes aérées séparées par un filet, survol discret, pied de page blanc.
   tabulator_bootstrap5.min.css est chargé AVANT ce fichier (voir _Ressources). */
.tabulator {
  font-family: inherit;
  font-size: 0.875rem;
  border: 1px solid var(--ata-bordure);
  border-radius: var(--ata-rayon-carte);
  background: var(--ata-surface);
  overflow: hidden;
}

.tabulator .tabulator-header {
  background: var(--ata-surface-douce);
  border-top: 0;
  border-bottom: 1px solid #eef1f5;
  color: var(--ata-texte-doux);
  font-weight: 700;
}

.tabulator .tabulator-header .tabulator-col {
  background: var(--ata-surface-douce);
  border-right: 0;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 14px 12px;
}

.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-content {
  padding-left: 24px;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
  background: var(--ata-neutre-fond);
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: var(--ata-bordure-forte);
}

.tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: var(--ata-marine);
}

.tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-top-color: var(--ata-marine);
}

.tabulator .tabulator-tableholder .tabulator-table {
  background: var(--ata-surface);
  color: var(--ata-texte);
}

.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
  color: var(--ata-texte-discret);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 3rem 1rem;
}

.tabulator-row,
.tabulator-row.tabulator-row-even,
.tabulator.table-striped:not(.table) .tabulator-row.tabulator-row-even {
  background-color: var(--ata-surface);
  border-bottom: 1px solid #eef1f5;
  min-height: 56px;
}

.tabulator-row.tabulator-selectable:hover,
.tabulator-row.tabulator-row-even.tabulator-selectable:hover {
  background-color: #f6f9fd;
}

.tabulator-row .tabulator-cell {
  padding: 14px 12px;
  border-right: 0;
  line-height: 1.45;
}

.tabulator-row .tabulator-cell:first-child {
  padding-left: 24px;
}

.tabulator-row .tabulator-cell:last-child {
  padding-right: 24px;
}

.tabulator .tabulator-footer {
  background: var(--ata-surface);
  border-top: 1px solid #eef1f5;
  color: var(--ata-texte-doux);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 10px 16px 10px 24px;
}

.tabulator .tabulator-footer .tabulator-footer-contents {
  padding: 0;
}

.tabulator .tabulator-footer .tabulator-page-size {
  border: 1px solid var(--ata-bordure-forte);
  border-radius: 8px;
  padding: 4px 8px;
  margin: 0 8px;
}

.tabulator .tabulator-footer .tabulator-page {
  margin: 0 2px;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--ata-bordure);
  border-radius: 8px;
  background: var(--ata-surface);
  color: var(--ata-texte-2);
  font-weight: 600;
}

.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
  background: var(--ata-surface-douce);
  color: var(--ata-texte);
  cursor: pointer;
}

.tabulator .tabulator-footer .tabulator-page.active,
.tabulator .tabulator-footer .tabulator-page.active:hover {
  background: var(--ata-marine);
  border-color: var(--ata-marine);
  color: #ffffff;
}

.tabulator .tabulator-footer .tabulator-page.disabled {
  opacity: 0.45;
}

/* Cellule sur deux lignes (intitulé + précision) */
.tabulator-row .tabulator-cell .cellule-double {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: normal;
  min-width: 0;
}

/* Flèches de tri discrètes : visibles au survol ou sur la colonne triée */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
  white-space: nowrap;
}

.tabulator .tabulator-header .tabulator-col:not([aria-sort="ascending"]):not([aria-sort="descending"]) .tabulator-col-sorter {
  opacity: 0;
  transition: opacity 0.15s;
}

.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-sorter {
  opacity: 1 !important;
}

/* Barre d'outils au-dessus d'une grille : onglets, recherche, filtres */
.barre-grille {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.barre-grille .recherche {
  position: relative;
  flex: 0 1 300px;
}

.barre-grille .recherche svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ata-texte-discret);
  pointer-events: none;
}

.barre-grille .recherche input {
  height: 40px;
  padding-left: 36px;
  background: var(--ata-surface);
}

.barre-grille .form-select {
  width: auto;
  min-width: 165px;
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ata-texte-2);
  background-color: var(--ata-surface);
}

.barre-grille .espace {
  flex: 1;
}

/* --- Mise en page : barre latérale --------------------------------------------- */
.coquille {
  display: flex;
  min-height: 100vh;
}

.barre-laterale {
  width: 264px;
  flex: none;
  background: var(--ata-surface);
  border-right: 1px solid var(--ata-bordure);
}

.barre-laterale .offcanvas-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 1rem;
}

@media (min-width: 992px) {
  .barre-laterale {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
}

.barre-laterale .logo {
  height: 36px;
  width: auto;
  margin-left: 0.5rem;
}

.espace-courant {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--ata-bordure);
  border-radius: 12px;
  background: var(--ata-surface-douce);
}

.monogramme {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.875rem;
  background: var(--ata-marine);
  color: #ffffff;
}

.monogramme.rond {
  border-radius: 50%;
  background: var(--ata-orange-pale);
  color: var(--ata-orange-fonce);
  font-size: 0.8rem;
}

.navigation-laterale {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navigation-laterale .groupe {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ata-texte-discret);
  padding: 1.1rem 0.75rem 0.4rem;
}

.navigation-laterale .groupe:first-child {
  padding-top: 0;
}

.navigation-laterale .lien {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  color: var(--ata-texte-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.navigation-laterale .lien:hover {
  background: var(--ata-surface-douce);
  color: var(--ata-texte);
}

.navigation-laterale .lien.actif {
  background: var(--ata-marine-pale);
  color: var(--ata-marine);
  font-weight: 700;
}

.navigation-laterale .lien.inactif {
  color: var(--ata-texte-discret);
  cursor: default;
}

.navigation-laterale .lien.inactif:hover {
  background: transparent;
}

.navigation-laterale .lien svg {
  flex: none;
}

.navigation-laterale .lien .libelle {
  flex: 1;
  white-space: nowrap;
}

.navigation-laterale .compteur {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ata-neutre-fond);
  color: var(--ata-texte-doux);
}

.navigation-laterale .lien.actif .compteur {
  background: var(--ata-surface);
  color: var(--ata-marine);
}

.navigation-laterale .compteur.alerte {
  background: var(--ata-danger-fond);
  color: var(--ata-danger);
}

.navigation-laterale .bientot {
  font-size: 0.6875rem;
  font-weight: 600;
}

.utilisateur-courant {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem 0;
  border-top: 1px solid var(--ata-bordure);
}

.utilisateur-courant .dropdown-toggle {
  border: 0;
  background: transparent;
  padding: 0.25rem;
  color: var(--ata-texte-doux);
}

.utilisateur-courant .dropdown-toggle::after {
  display: none;
}

.zone-principale {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.barre-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--ata-surface);
  border-bottom: 1px solid var(--ata-bordure);
}

.contenu {
  width: 100%;
  max-width: 1280px;
  padding: 2rem;
  box-sizing: border-box;
}

@media (max-width: 575.98px) {
  .contenu {
    padding: 1.25rem 1rem;
  }
}

/* En-tête de page : titre, sous-titre, actions */
.entete-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.entete-page h1 {
  margin: 0;
  font-size: 1.75rem;
}

.entete-page .sous-titre {
  margin: 0.35rem 0 0;
  color: var(--ata-texte-doux);
}

/* Mise en page publique (domaine racine, erreurs) */
.page-publique {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-publique .entete-publique {
  padding: 1.25rem 2rem;
  background: var(--ata-surface);
  border-bottom: 1px solid var(--ata-bordure);
}

/* --- Écran de connexion ----------------------------------------------------------- */
.ecran-compte {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.panneau-marque {
  flex: 1 1 480px;
  position: relative;
  overflow: hidden;
  background: var(--ata-marine-nuit);
  color: #ffffff;
  padding: 4rem 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
}

.panneau-marque::before {
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--ata-orange);
  opacity: 0.92;
}

.panneau-marque::after {
  content: "";
  position: absolute;
  right: 60px;
  top: 230px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
}

.panneau-marque > * {
  position: relative;
  z-index: 1;
}

.panneau-marque .surtitre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fb7d6;
}

.panneau-marque .surtitre::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--ata-orange);
}

.panneau-marque h1 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  max-width: 34rem;
}

.panneau-marque p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #c9d6e8;
  max-width: 32rem;
  margin: 0 0 1.75rem;
}

.panneau-marque .atout {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

.panneau-marque .atout span {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.panneau-marque .mention {
  font-size: 0.8125rem;
  color: #8aa3c4;
}

.panneau-formulaire {
  flex: 1 1 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.panneau-formulaire .formulaire-compte {
  width: 100%;
  max-width: 420px;
}

.panneau-formulaire .formulaire-compte h1 {
  font-size: 1.875rem;
  margin: 1.75rem 0 0.4rem;
}

@media (max-width: 767.98px) {
  .panneau-marque {
    padding: 2.5rem 1.5rem;
    min-height: auto;
  }

  .panneau-marque .atouts,
  .panneau-marque p {
    display: none;
  }
}

.encart-info {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border-radius: var(--ata-rayon);
  background: #eef3fa;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ata-texte-2);
}

/* --- Tableau de bord ---------------------------------------------------------------- */
.indicateurs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 1199.98px) {
  .indicateurs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .indicateurs {
    grid-template-columns: minmax(0, 1fr);
  }
}

.indicateur {
  background: var(--ata-surface);
  border: 1px solid var(--ata-bordure);
  border-radius: var(--ata-rayon-carte);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: inherit;
  text-decoration: none;
}

a.indicateur:hover {
  border-color: var(--ata-bordure-forte);
  box-shadow: 0 4px 16px rgba(10, 37, 64, 0.06);
}

.indicateur .titre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ata-texte-doux);
}

.indicateur .icone {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicateur .valeur {
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.indicateur .valeur small {
  font-size: 1.1rem;
  color: var(--ata-texte-discret);
}

.indicateur .detail {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ata-texte-doux);
}

.ton-marine .icone { background: var(--ata-marine-pale); color: var(--ata-marine); }
.ton-attente .icone { background: var(--ata-attente-fond); color: var(--ata-attente); }
.ton-danger .icone { background: var(--ata-danger-fond); color: var(--ata-danger); }
.ton-orange .icone { background: var(--ata-orange-pale); color: var(--ata-orange-fonce); }
.ton-succes .detail { color: var(--ata-succes); }
.ton-danger .detail { color: var(--ata-danger); }

.grille-accueil {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.75rem;
}

@media (max-width: 991.98px) {
  .grille-accueil {
    grid-template-columns: minmax(0, 1fr);
  }
}

.point-a-traiter {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #eef1f5;
  color: inherit;
  text-decoration: none;
}

.point-a-traiter:last-child {
  border-bottom: 0;
}

.point-a-traiter:hover {
  background: var(--ata-surface-douce);
  color: inherit;
}

.point-a-traiter .gravite {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.gravite.haute { background: var(--ata-danger); }
.gravite.moyenne { background: var(--ata-orange); }
.gravite.basse { background: var(--ata-texte-discret); }

.point-a-traiter .font-monospace {
  white-space: nowrap;
}

.point-a-traiter .intitule {
  font-weight: 700;
}

.point-a-traiter .explication {
  font-size: 0.8125rem;
  color: var(--ata-texte-doux);
}

.barre-avancement {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  gap: 3px;
  background: var(--ata-neutre-fond);
}

.legende-avancement {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  margin-top: 0.6rem;
}

.legende-avancement .repere {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.carte-nuit {
  position: relative;
  overflow: hidden;
  background: var(--ata-marine-nuit);
  color: #ffffff;
  border-radius: var(--ata-rayon-carte);
  padding: 1.35rem 1.5rem;
}

.carte-nuit::after {
  content: "";
  position: absolute;
  right: -56px;
  bottom: -76px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--ata-orange);
  opacity: 0.9;
}

.carte-nuit > * {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 3.5rem);
}

.carte-nuit .delai {
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  color: #ffb27a;
  width: 4.5rem;
  flex: none;
}

/* --- Onglets de filtre ---------------------------------------------------------------- */
.onglets-filtre {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #e9edf3;
  border-radius: 12px;
}

.onglets-filtre button {
  height: 34px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ata-texte-2);
}

.onglets-filtre button .nombre {
  color: var(--ata-texte-discret);
  margin-left: 0.25rem;
}

.onglets-filtre button.actif {
  background: var(--ata-surface);
  color: var(--ata-texte);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.08);
}

/* --- Fiche ---------------------------------------------------------------------------- */
.entete-fiche {
  background: var(--ata-surface);
  border: 1px solid var(--ata-bordure);
  border-radius: var(--ata-rayon-carte);
  padding: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.entete-fiche h1 {
  font-size: 1.875rem;
  margin: 0.6rem 0 0.5rem;
  line-height: 1.15;
}

.entete-fiche .description {
  color: var(--ata-texte-2);
  margin: 0;
  max-width: 44rem;
  white-space: pre-line;
}

.grille-fiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 1199.98px) {
  .grille-fiche {
    grid-template-columns: minmax(0, 1fr);
  }
}

.synthese dl {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.7rem 0.75rem;
  margin: 0;
  font-size: 0.875rem;
}

.synthese dt {
  color: var(--ata-texte-doux);
  font-weight: 500;
}

.synthese dd {
  margin: 0;
  font-weight: 600;
}

.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.etiquette {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--ata-neutre-fond);
  color: var(--ata-texte);
}

.vigilance {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.vigilance::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  margin-top: 0.45rem;
  background: var(--ata-orange);
}

.vigilance:last-child {
  margin-bottom: 0;
}

.jauge {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.jauge > span {
  display: block;
  height: 100%;
  background: var(--ata-orange);
}