.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: var(--color-surface-hover, #f8fafc);
}

.journal-description {
    white-space: pre-line;
}

.documentation-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.documentation-nav {
    position: sticky;
    top: 1.5rem;
}

.documentation-nav h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.documentation-link {
    display: block;
    padding: 0.65rem 0.75rem;
    color: var(--color-text, #1f2937);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.documentation-link:hover,
.documentation-link.active {
    color: var(--color-action, #2563eb);
    background: #eff6ff;
    border-left-color: var(--color-action, #2563eb);
}

.documentation-content {
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.documentation-content h1,
.documentation-content h2,
.documentation-content h3 {
    line-height: 1.25;
    color: var(--color-text, #111827);
}

.documentation-content pre {
    padding: 1rem;
    overflow-x: auto;
    background: #111827;
    color: #f9fafb;
    border-radius: 6px;
}

.documentation-content code {
    font-family: monospace;
}

.documentation-lead {
    font-size: 1.1rem;
    color: #4b5563;
}

@media (max-width: 800px) {
    .documentation-layout {
        grid-template-columns: 1fr;
    }

    .documentation-nav {
        position: static;
    }
}

/* Ajustements finaux de navigation */
.sidebar {
    box-sizing: border-box;
    width: 248px;
    padding: 24px 16px;
    background: #303830;
}

.main {
    margin-left: 248px;
}

.main.no-sidebar {
    margin-left: 0;
}

.logo {
    padding: 0 8px;
    letter-spacing: -0.02em;
}

.subtitle {
    margin: 6px 8px 28px;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu a {
    min-height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
}

.menu a:hover {
    background: #465247;
    border-color: #657266;
}

.menu a.active {
    background: #e2af4b;
    color: #303830;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.14);
}

.documentation-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}

.documentation-nav {
    padding: 1.25rem;
}

.documentation-link {
    min-height: 40px;
    margin-bottom: 0.2rem;
    border-radius: 8px;
}

.documentation-link:hover,
.documentation-link.active {
    background: #f1f4f1;
}

@media (max-width: 800px) {
    .sidebar {
        position: static;
        width: 100%;
    }

    .main {
        margin-left: 0;
    }
}

.parcours-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 2rem 2.25rem;
    color: #ffffff;
    background: linear-gradient(120deg, #1f5d70, #3b8791);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(31, 93, 112, 0.16);
}

.parcours-hero h1 {
    margin: 0.35rem 0 0.6rem;
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.parcours-hero p {
    max-width: 680px;
    margin: 0;
    color: #d9f0f2;
}

.parcours-hero > svg {
    width: 76px;
    height: 76px;
    color: #b9e1d8;
    flex-shrink: 0;
}

.parcours-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.parcours-panel {
    padding: 1.5rem;
}

.parcours-panel-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #1f5d70;
    background: #dff3f3;
    border-radius: 10px;
}

.parcours-panel h2 {
    margin-bottom: 0.5rem;
}

.parcours-panel p {
    min-height: 52px;
    color: #657266;
    line-height: 1.6;
}

.parcours-panel .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.parcours-panel .btn-secondary svg {
    width: 16px;
}

@media (max-width: 800px) {
    .parcours-hero {
        padding: 1.5rem;
    }

    .parcours-hero > svg {
        width: 48px;
        height: 48px;
    }

    .parcours-grid {
        grid-template-columns: 1fr;
    }
}
/* ================================
   Accueil & Intégration
   Charte graphique
================================ */

/* ================================
   VARIABLES THEME
================================ */

:root {

    --color-background: #f5f5f2;

    --color-sidebar: #535f54;

    --color-action: #e2af4b;

    --color-dark: #303830;

    --color-text-dark: #333333;

    --color-text-light: #ffffff;

    --color-muted: #d9dfda;

}


.text-theme {

    color:#303830;

}


.cards-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:20px;

    margin-top:30px;

    align-items:start;

}

/* ================================
   LAYOUT GENERAL
================================ */

body {

    margin:0;

    font-family:Arial,sans-serif;

    background:var(--color-background);

}


/* En-tête de page (titre à gauche, bouton d'action à droite) :
   espacement 2-3 mm avant le premier bloc (retours utilisateurs). */
.page-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    flex-wrap:wrap;

    margin-bottom:10px;

}


/* ================================
   SIDEBAR
================================ */

.sidebar {

    position:fixed;

    left:0;

    top:0;

    bottom:0;

    width:260px;

    box-sizing:border-box;

    background:var(--color-sidebar);

    color:white;

    padding:20px;

    /* 0.13.41/0.13.44 : menu défilant sur écrans compacts (14") */
    height:100vh;

    overflow-y:auto;

    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

    overscroll-behavior:contain;

    scrollbar-width:thin;

}


.logo {

    font-size:22px;

    font-weight:bold;

}


.auth-title {

    color: var(--color-text-light);

    font-size:24px;

    font-weight:700;

    text-align:center;

    margin-top:2px;

    margin-bottom:4px;

    letter-spacing:-0.01em;

}


/* Page de connexion : fond vert du bandeau latéral + logo blanc
   (cohérence charte ; le formulaire reste sur une carte claire). */
.auth-body {

    background: var(--color-sidebar);

    min-height: 100vh;

}


.subtitle {

    color:var(--color-muted);

    font-size:14px;

    margin-top:5px;

    margin-bottom:30px;

}


/* ================================
   MENU
================================ */

.menu a {

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px;

    margin-bottom:6px;

    color:#d1d5db;

    text-decoration:none;

    border-radius:10px;

    transition:all .2s ease;

}


.menu a:hover {

    background:var(--color-dark);

    color:white;

}


.menu a.active {

    background:var(--color-action);

    color:var(--color-text-dark);

}


/* ================================
   COULEURS ICONES
================================ */

.blue {

    background:#dbeafe;

    color:#2563eb;

}


.purple {

    background:#ede9fe;

    color:#7c3aed;

}


.pink {

    background:#fce7f3;

    color:#db2777;

}


.cyan {

    background:#cffafe;

    color:#0891b2;

}


.orange {

    background:#ffedd5;

    color:#ea580c;

}


.green {

    background:#dcfce7;

    color:#16a34a;

}


.gray {

    background:#e5e7eb;

    color:#657266;

}


/* ================================
   CONTENU
================================ */

.main {

    margin-left:260px;

}


.topbar {

    height:70px;

    background:var(--color-action);

    border-bottom:1px solid #e5e7eb;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    padding:0 30px;

    gap:1rem;

}


.topbar-titre {

    flex:0 0 auto;

    text-align:left;

    color:var(--color-text-dark);

    line-height:1.25;

    white-space:nowrap;

}


.topbar-titre small {

    font-size:12px;

    opacity:.75;

    margin-left:.5rem;

}


.topbar form[action="/recherche/"] {

    margin-left:auto;

    flex:0 1 420px;

}


.content {

    padding:30px;

}


.user {

    font-weight:bold;

}


/* ================================
   BOUTONS
================================ */

.btn-primary {

    background:var(--color-action);

    color:var(--color-text-dark);

    padding:12px 20px;

    border-radius:12px;

    border:none;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:all .2s ease;

}


.btn-primary:hover {

    background:var(--color-dark);

    color:white;

}


/* ================================
   BADGES
================================ */

.badge {

    display:inline-flex;

    align-items:center;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}


.badge-success {

    background:#dcfce7;

    color:#166534;

}


.badge-danger {

    background:#fee2e2;

    color:#b91c1c;

}


.badge-warning {

    background:#fef3c7;

    color:#92400e;

}


.badge-info {

    background:#dbeafe;

    color:#1d4ed8;

}



/* CARTES GENERALES */

.card {

    background:white;
    border-radius:16px;
    padding:20px;
    border:1px solid #e5e7eb;

    box-shadow:
    0 2px 8px rgba(0,0,0,0.04);
    height:fit-content;

}



/* ICONES STYLE BASE44 */

.icon-box {

    width:38px;
    height:38px;

    border-radius:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

}

.icon-box svg {

    width:24px;
    height:24px;

}



/* COULEURS ICONES */

.icon-blue {

    background:#dbeafe;
    color:#2563eb;

}


.icon-purple {

    background:#ede9fe;
    color:#7c3aed;

}


.icon-green {

    background:#dcfce7;
    color:#16a34a;

}


.icon-orange {

    background:#ffedd5;
    color:#ea580c;

}


.icon-red {

    background:#fee2e2;
    color:#dc2626;

}


.icon-pink {

    background:#fce7f3;
    color:#db2777;

}


.icon-cyan {

    background:#cffafe;
    color:#0891b2;

}




/* BOUTONS */

/* ================================
   BOUTONS THEME
================================ */

.btn-primary {

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:var(--color-action);

    color:var(--color-dark);

    padding:12px 20px;

    border-radius:12px;

    border:none;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

}


.btn-primary:hover {

    background:var(--color-sidebar);

    color:white;

}


.btn-primary svg {

    width:18px;

    height:18px;

}


/* BADGES */

.badge {

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}


.badge-success {

    background:#dcfce7;
    color:#166534;

}


.badge-warning {

    background:#ffedd5;
    color:#9a3412;

}


.badge-danger {

    background:#fee2e2;
    color:#991b1b;

}




/* CHAMPS */

.form-control {

    padding:12px;

    border-radius:10px;

    border:1px solid #e5e7eb;

    font-size:15px;

}

/* ================================
   SIDEBAR
================================ */

.sidebar {

    background: var(--color-sidebar);

    color: var(--color-text-light);

}


/* Logo */

.sidebar .logo {

    color:white;

}


/* Menu */

.sidebar nav a {

    display:block;

    padding:12px 16px;

    margin:4px 10px;

    border-radius:10px;

    color:white;

    text-decoration:none;

    transition:all .2s ease;

}


/* Survol */

.sidebar nav a:hover {

    background:var(--color-hover);

}


/* Menu actif */

.sidebar nav a.active {

    background:var(--color-active);

    color:var(--color-text-dark);

    font-weight:600;

}

/* BOUTON VOIR DOSSIER */

.btn-dossier {

    display:inline-block;

    margin-top:15px;

    background:var(--color-dark);

    color:white;

    padding:10px 16px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

}


.btn-dossier:hover {

    background:var(--color-sidebar);

}


/* Correction taille icones menu */
.menu .icon-box {
    width:38px;
    height:38px;
    flex-shrink:0;
}

.menu .icon-box svg {
    width:20px;
    height:20px;
}

/* Uniformisation icones menu gauche */
.menu .icon-box {
    width:38px;
    height:38px;
    border-radius:10px;
    flex-shrink:0;
}

.menu .icon-box svg {
    width:20px;
    height:20px;
}

/* ================================
   FICHE DOSSIER
================================ */


.dossier-header {

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:25px;

}


.dossier-header-left {

    display:flex;
    align-items:center;
    gap:20px;

}


.btn-retour {

    display:flex;
    align-items:center;
    gap:8px;

    color:var(--color-dark);

    text-decoration:none;

    font-size:14px;

}


.dossier-identite {

    display:flex;
    flex-direction:column;

}


.dossier-title-line {

    display:flex;
    align-items:center;
    gap:10px;

}


.dossier-title-line h1 {

    margin:0;

    font-size:28px;

    color:var(--color-dark);

}


.dossier-infos {

    display:flex;
    gap:15px;

    margin-top:8px;

    color:#6b7280;

    font-size:14px;

}


.dossier-infos span {

    display:flex;
    align-items:center;
    gap:5px;

}



.dossier-actions {

    margin-left:auto;

}

/* =========================================================
   ONGLETS
   STYLE COMMUN DOSSIER / PERSONNE
========================================================= */

.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
    flex-wrap: wrap;
}

/* Onglets sous forme de lien OU de bouton */
.tabs .tab,
.tabs a.tab,
.tabs button.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 18px;
    margin: 0;

    border: none;
    outline: none;
    box-shadow: none;

    border-radius: 10px;

    background: transparent;

    color: #6b7280;

    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    box-sizing: border-box;

    transition:
        background-color .2s ease,
        color .2s ease;
}

/* Survol */
.tabs .tab:hover,
.tabs a.tab:hover,
.tabs button.tab:hover {
    background: #f3f4f6;
    color: var(--color-dark);
}

/* Focus clavier */
.tabs .tab:focus,
.tabs .tab:focus-visible,
.tabs a.tab:focus,
.tabs a.tab:focus-visible,
.tabs button.tab:focus,
.tabs button.tab:focus-visible {
    border: none;
    outline: none;
    box-shadow: none;
}

/* Onglet actif */
.tabs .tab.active,
.tabs a.tab.active,
.tabs button.tab.active {
    background: var(--color-action);
    color: var(--color-dark);

    font-weight: 600;

    border: none;
    outline: none;
    box-shadow: none;
}
/* ================================
   FICHE DOSSIER - SYNTHESE
================================ */


.dossier-synthese {
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ================================
   SYNTHESE DOSSIER
================================ */


/* Cartes statistiques */

.stat-card {

    background:white;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:20px;

}


.stat-title {

    color:#6b7280;

    font-size:14px;

}


.stat-value {

    margin-top:10px;

    font-size:32px;

    font-weight:bold;

    color:var(--color-dark);

}


.stat-value.danger {

    color:#dc2626;

}

/* ================================
   COMPOSITION DOSSIER
================================ */


.personnes-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}



.personne-card {

    background:white;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:20px;

}



.personne-header {

    display:flex;

    align-items:center;

    gap:10px;

    font-size:18px;

    color:var(--color-dark);

}



.personne-header svg {

    width:24px;

    height:24px;

}



.personne-card p {

    color:#6b7280;

}


/* ================================
   PROGRESSION PARCOURS
================================ */


.progress-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}


.progress-bar {

    width:100%;

    height:10px;

    background:#e5e7eb;

    border-radius:20px;

    overflow:hidden;

}


.progress-fill {

    height:100%;

    background:var(--color-sidebar);

    border-radius:20px;

}



/* ================================
   ETAPES PARCOURS
================================ */


.steps {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:20px;

}


.step {

    padding:8px 14px;

    border-radius:20px;

    font-size:14px;

    font-weight:600;

}


.step-success {

    background:#d1fae5;

    color:#166534;

}


.step-progress {

    background:#fed7aa;

    color:#9a3412;

}


.step-muted {

    background:#f3f4f6;

    color:#6b7280;

}



/* ================================
   BLOCS DE LA FICHE
================================ */


.synthese-block {

    background:white;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:20px;

}


.synthese-block h2 {

    margin-top:0;

    color:var(--color-dark);

    font-size:20px;

}

/* ================================
   COMPOSITION PERSONNES
================================ */


.personne-role {

    margin:10px 0;

    color:#6b7280;

    font-size:14px;

}


.personne-info {

    margin-top:15px;

    font-size:14px;

    color:#4b5563;

}


.personne-info p {

    margin:8px 0;

}
/* ================================
   ACCOMPAGNEMENTS
================================ */


.accompagnements-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:20px;

}



.accompagnement-card {

    background:white;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:20px;

}



.accompagnement-header {

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:15px;

    color:var(--color-dark);

}



.accompagnement-header svg {

    width:24px;

    height:24px;

}



.accompagnement-info {

    margin-top:15px;

    color:#6b7280;

    font-size:14px;

}


.accompagnement-info p {

    margin:8px 0;

}
/* ================================
   TACHES
================================ */


.taches-list {

    display:flex;

    flex-direction:column;

    gap:15px;

}



.tache-card {

    background:white;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:20px;

}



.tache-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}



.tache-header div {

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--color-dark);

}



.tache-header svg {

    width:22px;

    height:22px;

}



.tache-info {

    margin-top:15px;

    color:#6b7280;

    font-size:14px;

}



.tache-info p {

    margin:8px 0;

}

/* ================================
   CHECKBOX TACHES
================================ */


.tache-title {

    display:flex;

    align-items:center;

    gap:10px;

}



.task-check {

    position:relative;

    width:20px;

    height:20px;

    cursor:pointer;

}



.task-check input {

    position:absolute;

    opacity:0;

}



.checkmark {

    width:20px;

    height:20px;

    border:2px solid #9ca3af;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:all .2s ease;

}



.task-check input:checked + .checkmark {

    background:var(--color-sidebar);

    border-color:var(--color-sidebar);

}



.task-check input:checked + .checkmark::after {

    content:"✓";

    color:var(--color-action);

    font-size:13px;

    font-weight:bold;

}



.tache-card:has(input:checked) strong {

    text-decoration:line-through;

    color:#9ca3af;

}

/* ================================
   ENTETE SECTION
================================ */


.section-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}


.section-header h2 {

    margin:0;

}


.section-header p {

    margin-top:8px;

}

/* ================================
   PARCOURS TIMELINE
================================ */


.timeline {

    position:relative;

    margin-top:30px;

    padding-left:30px;

}



.timeline::before {

    content:"";

    position:absolute;

    left:10px;

    top:0;

    bottom:0;

    width:2px;

    background:#d9dfda;

}



.timeline-item {

    position:relative;

    margin-bottom:25px;

}



.timeline-dot {

    position:absolute;

    left:-28px;

    top:20px;

    width:16px;

    height:16px;

    border-radius:50%;

    border:3px solid white;

}



.timeline-dot.success {

    background:#16a34a;

}



.timeline-dot.warning {

    background:var(--color-action);

}



.timeline-dot.muted {

    background:#9ca3af;

}



.timeline-content {

    background:white;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:20px;

}



.timeline-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.timeline-content p {

    color:#6b7280;

}
/* ================================
   NOTES DOSSIER
================================ */


.notes-list {

    display:flex;

    flex-direction:column;

    gap:20px;

}



.note-card {

    background:white;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:20px;

}



.note-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}



.note-header div {

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--color-dark);

}



.note-header svg {

    width:20px;

    height:20px;

}



.note-header span {

    color:#6b7280;

    font-size:14px;

}



.note-card p {

    color:#4b5563;

    line-height:1.6;

}
/* ================================
   TACHES TERMINEES
================================ */


.tache-terminee {

    opacity:0.65;

}


.tache-terminee strong {

    text-decoration:line-through;

    color:#6b7280;

}

/* ================================
   ACTIONS FORMULAIRES
================================ */


.form-actions {

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

}



/* ================================
   BOUTON SECONDAIRE
================================ */


.btn-secondary {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:42px;

    box-sizing:border-box;

    background:#e5e7eb;

    color:var(--color-dark);

    padding:0 20px;

    border-radius:12px;

    border:none;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

}



.btn-secondary:hover {

    background:var(--color-sidebar);

    color:white;

}


/* ================================
   STATISTIQUES SYNTHESE
================================ */


.stats-grid {

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:20px;

    margin-bottom:25px;

}


@media (max-width:1200px) {

    .stats-grid {

        grid-template-columns:repeat(2, 1fr);

    }

}

/* ================================
   ESPACEMENT SYNTHESE
================================ */


.dossier-synthese > * {

    margin-bottom:25px;

}


.dossier-synthese .stats-grid {

    margin-bottom:25px;

}


.dossier-synthese .synthese-block {

    margin-bottom:25px;

}

.dossier-synthese > * {

    margin-bottom:25px;

}


.dossier-synthese .synthese-block {

    width:100%;

    box-sizing:border-box;

}

/* ================================
   JOURNAL ACTIVITE
================================ */


.journal-item {

    padding:12px 0;

    border-bottom:1px solid #e5e7eb;

}


.journal-item:last-child {

    border-bottom:none;

}


.journal-item p {

    margin:6px 0;

    color:#4b5563;

}


.journal-item small {

    color:#6b7280;

}
/* ================================
   BOUTON MODIFIER
================================ */
.btn-modifier {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:42px;

    box-sizing:border-box;

    background:var(--color-action);

    color:var(--color-dark);

    padding:0 20px;

    border-radius:12px;

    border:none;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

}


.btn-modifier:hover {

    background:var(--color-sidebar);

    color:white;

}


.btn-modifier svg {

    width:18px;

    height:18px;

}


/* ================================
   BOUTON DANGER
================================ */
.btn-danger {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:42px;

    box-sizing:border-box;

    background:#fee2e2;

    color:#991b1b;

    padding:0 20px;

    border-radius:12px;

    border:1px solid #fecaca;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

}


.btn-danger:hover {

    background:#dc2626;

    color:white;

}


.btn-danger svg {

    width:18px;

    height:18px;

}

/* ================================
   ALERTES
================================ */

.alert {
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid;
}

.alert-danger {
    background-color: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.alert-success {
    background-color: #dcfce7;
    border-color: #bbf7d0;
    color: #15803d;
}

.alert-info {
    background-color: #e0f2fe;
    border-color: #bae6fd;
    color: #0369a1;
}

.messages {
    max-width: 1200px;
    margin: 0 auto 1rem;
}

/* Erreurs de formulaire (champs) */
.errorlist {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}

.errorlist li {
    color: #b91c1c;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

input.error,
select.error,
textarea.error {
    border-color: #b91c1c;
}

.form-actions {

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

}
/* ================================
   TABLEAUX METIER
================================ */


.table {

    width: 100%;

    border-collapse: collapse;

    background: white;

}


.table thead th {

    background: #535f54;

    color: white;

    text-align: left;

    padding: 14px 18px;

    font-weight: 600;

    font-size: 14px;

}


.table tbody td {

    padding: 14px 18px;

    border-bottom: 1px solid #e5e7eb;

    color: #374151;

}


.table tbody tr {

    transition: background-color 0.15s ease;

}


.table tbody tr:hover {

    background-color: #f3f4f6;

}


/* Espacement colonnes */

.table th:first-child,
.table td:first-child {

    width: 25%;

}


.table th:nth-child(2),
.table td:nth-child(2) {

    width: 20%;

}


.table th:nth-child(3),
.table td:nth-child(3) {

    width: 10%;

}


.table th:nth-child(4),
.table td:nth-child(4) {

    width: 25%;

}


.table th:nth-child(5),
.table td:nth-child(5) {

    width: 20%;

}



/* Liens dans les tableaux */

.table a {

    color: #535f54;

    text-decoration: none;

}


.table a:hover {

    text-decoration: underline;

}

.badge-statut {

    display:inline-block;
    padding:4px 10px;
    border-radius:20px;
    background:#e2af4b;
    color:#535f54;
    font-size:0.85rem;
    font-weight:600;

}

/* =========================
   Tableau personnes
========================= */


.personnes-table thead th {

    background:#535f54;
    color:white;
    padding:14px;

}


.personnes-table thead th a {

    color:white;
    text-decoration:none;

}



.personnes-table tbody tr {

    transition:0.2s;
    cursor:pointer;

}



.personnes-table tbody tr:hover {

    background:#f1f3f1;

}



.personnes-table td {

    padding:14px 12px;

}



.filters {

    display:flex;
    gap:10px;
    flex-wrap:wrap;

}


.filters select,
.filters input {

    min-width:180px;

}
/* =========================
   HISTORIQUE DES ACTIVITES
========================= */

.journal-action {
    display: flex;
    align-items: center;
    gap: 8px;
}

.journal-pastille {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    background: #999;
}

.journal-creation,
.journal-terminee {
    background: #3a9d5d;
}

.journal-modification,
.journal-reouverte {
    background: #e2af4b;
}

.journal-suppression {
    background: #d9534f;
}

.btn-deconnexion {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    padding: 8px 12px;
}

.btn-deconnexion:hover {
    opacity: 0.7;
}

/* Navigation et documentation */
.menu-section-title {
    padding: 0 10px 8px;
    margin-top: 22px;
    color: #aeb8b0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.menu-section-title:first-child {
    margin-top: 0;
}

.documentation-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 2rem 2.25rem;
    color: #ffffff;
    background: linear-gradient(120deg, #303830, #657266);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(48, 56, 48, 0.16);
}

.documentation-hero h1 {
    margin: 0.35rem 0 0.6rem;
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.documentation-hero p {
    max-width: 680px;
    margin: 0;
    color: #d9dfda;
}

.documentation-hero > svg {
    width: 76px;
    height: 76px;
    color: var(--color-action);
    flex-shrink: 0;
}

.documentation-eyebrow {
    color: #9b6d1a;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.documentation-hero .documentation-eyebrow {
    color: #f5d38c;
}

.documentation-index {
    padding: 1.5rem;
}

.documentation-index-header {
    align-items: center;
    margin-bottom: 1rem;
}

.documentation-index-header h2 {
    margin: 0.25rem 0 0;
}

.documentation-count {
    padding: 0.45rem 0.75rem;
    color: #657266;
    background: #f1f4f1;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.documentation-index-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.documentation-index-link {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-height: 66px;
    padding: 0.75rem 1rem;
    color: var(--color-dark);
    text-decoration: none;
    background: #fbfcfa;
    border: 1px solid #e5e9e5;
    border-radius: 12px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.documentation-index-link:hover {
    border-color: var(--color-action);
    box-shadow: 0 6px 14px rgba(48, 56, 48, 0.08);
    transform: translateY(-2px);
}

.documentation-index-number,
.documentation-link-number {
    color: #9b6d1a;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.documentation-index-title {
    font-weight: 700;
}

.documentation-index-link svg,
.documentation-link svg {
    width: 18px;
    color: #9b6d1a;
}

.documentation-link {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
}

@media (max-width: 800px) {
    .documentation-hero {
        padding: 1.5rem;
    }

    .documentation-hero > svg {
        width: 48px;
        height: 48px;
    }

    .documentation-index-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================
   CARTES KPI (indicateurs)
================================ */

.kpi-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-top:30px;

}

.kpi-card {

    background:white;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:16px;

    transition:0.2s;

}

.kpi-card:hover {

    border-color:#535f54;

    box-shadow:0 10px 30px rgba(0,0,0,0.06);

}

.kpi-value {

    font-size:30px;

    font-weight:700;

    line-height:1;

    color:#111827;

}

.kpi-title {

    margin-top:6px;

    color:#6b7280;

    font-size:14px;

}

/* ================================
   STATUTS DE PARCOURS (icônes)
================================ */

.status-icon {

    vertical-align:middle;

}

.status-pill {

    display:inline-flex;

    align-items:center;

    gap:0.4rem;

}

/* ================================
   PASTILLE DE STATUT (tableaux)
=============================== */

.statut-icone {

    width:30px;

    height:30px;

    border-radius:50%;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.statut-icone svg {

    width:18px;

    height:18px;

}

/* ================================
   CASE A COCHER DE TACHE
================================ */

.tache-checkbox {

    background:transparent;

    border:none;

    padding:0;

    cursor:pointer;

    color:#6b7280;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    line-height:1;

}

.tache-checkbox svg {

    width:20px;

    height:20px;

}

.tache-checkbox:hover {

    color:#535f54;

}

/* ================================
   GRILLE D'INFORMATIONS (2 colonnes)
================================ */

.info-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:0.9rem 2rem;

}

/* ================================
   CARTE COMPACTE
================================ */

.map-container {

    max-width:560px;

    margin-top:1rem;

}

.map-container iframe {

    width:100%;

    height:200px;

    border:0;

    border-radius:12px;

}

/* ================================
   MISE EN PAGE EN COLONNES (fiche)
================================ */

.detail-2col {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:1.5rem;

    margin-top:1.5rem;

}

@media (max-width: 900px) {

    .detail-2col {

        grid-template-columns:1fr;

    }

}

/* ============================================================
   PALETTE PAR DOMAINE D'INTERVENTION (0.13.37)
   Couleurs sobres et contrastées, utilisées partout :
   intervenants, accompagnements, besoins, statistiques.
   Le texte du domaine reste toujours affiché (jamais la couleur
   seule) ; pour les fonds clairs, texte sombre.
   ============================================================ */
.badge-domaine {
    display: inline-block;
    border-radius: 9999px;
    padding: .22rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
}
.badge-domaine-administratif { background: #64748b; color: #fff; }
.badge-domaine-social        { background: #0d9488; color: #fff; }
.badge-domaine-emploi        { background: #16a34a; color: #fff; }
.badge-domaine-logement      { background: #ea580c; color: #fff; }
.badge-domaine-sante         { background: #dc2626; color: #fff; }
.badge-domaine-fle           { background: #7c3aed; color: #fff; }
.badge-domaine-scolarite     { background: #2563eb; color: #fff; }
.badge-domaine-juridique     { background: #4f46e5; color: #fff; }
.badge-domaine-famille       { background: #db2777; color: #fff; }
.badge-domaine-mobilite      { background: #0284c7; color: #fff; }
.badge-domaine-numerique     { background: #0891b2; color: #fff; }
.badge-domaine-culture-loisirs { background: #c026d3; color: #fff; }
.badge-domaine-vie-quotidienne { background: #b45309; color: #fff; }
.badge-domaine-autre         { background: #6b7280; color: #fff; }

/* ================================
   TABLEAU DE BORD (refonte P1) :
   tuiles cliquables, listes avec survol, alertes sobres
================================ */

.stat-tile {

    display:block;

    flex:1;

    min-width:150px;

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:10px;

    padding:.7rem 1rem;

    text-align:center;

    text-decoration:none;

    color:#334155;

    transition:border-color .15s, box-shadow .15s;

}

.stat-tile:hover {

    border-color:var(--color-action);

    box-shadow:0 2px 8px rgba(0,0,0,.06);

}

.stat-valeur {

    font-size:1.35rem;

    font-weight:700;

    color:#303830;

}

.stat-valeur.stat-urgent {

    color:#b91c1c;

}

.stat-libelle {

    color:#64748b;

    font-size:.82rem;

}


/* Éléments de liste cliquables (tâches, RDV, alertes, parcours) */

.dash-item {

    display:block;

    text-decoration:none;

    color:inherit;

    padding:.55rem .5rem;

    border-radius:6px;

    transition:background .12s;

}

.dash-item:hover {

    background:#f4f6f8;

}


/* Titres de carte cliquables */

.dash-card-title a {

    color:#303830;

    text-decoration:none;

}

.dash-card-title a:hover {

    color:var(--color-action);

}


/* Points d'alerte (niveau, sans émoji) */

.alert-dot {

    display:inline-block;

    width:.55rem;

    height:.55rem;

    border-radius:50%;

    margin-right:.45rem;

    vertical-align:1px;

}

.alert-dot-rouge { background:#dc2626; }

.alert-dot-ambre { background:#d97706; }

.alert-dot-gris  { background:#9ca3af; }