/* =========================================================================
   Planificateur média — Design system (tokens brief-design.md §2)
   Une seule couleur d'accent, séparateurs fins, coins 4–6px, pas d'ombres
   marquées. Police Hanken Grotesk (chargée via <link> dans le layout agence).
   ========================================================================= */

:root {
    /* Texte */
    --encre: #1A1A1A;
    --texte-secondaire: #6B6B6B;
    --texte-discret: #9A968D;

    /* Accent (unique) */
    --accent: #18E299;
    --accent-fonce: #0E9E6E;

    /* Surfaces */
    --synthese: #0A2A1E;
    --bordure: #E6E4DF;
    --fond-0: #FFFFFF;
    --fond-1: #FBFAF8;
    --fond-2: #F7F6F3;
    --fond-3: #F2F1ED;
    --fond-4: #F0EEE9;

    /* Validation par ligne */
    --ligne-validee: #E4F6EC;
    --ligne-refusee-fond: #FCEDEC;
    --ligne-refusee: #E5484D;

    --rayon: 6px;
    --rayon-sm: 4px;
    --contenu-max: 1180px;
}

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

body {
    margin: 0;
    font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    color: var(--encre);
    background: var(--fond-0);
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    line-height: 1.45;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Signature de titre Oo : dernier mot en graisse 800 + point accent */
.signature {
    font-weight: 800;
}

.signature .point {
    color: var(--accent);
}

/* ----- Top chrome (header sticky, commun agence / client / public) ----- */
.shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    height: 60px;
    border-bottom: 1px solid var(--bordure);
    background: var(--fond-0);
    position: sticky;
    top: 0;
    z-index: 60;
}

.shell-header-gauche {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shell-header-droite {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Logo « OSWALD ORB. » — OSWALD 600, ORB 800, point accent. */
.shell-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 14px;
    letter-spacing: 0.16em;
    font-weight: 600;
    color: var(--encre);
}

.shell-logo .gras {
    font-weight: 800;
}

.shell-logo .point {
    color: var(--accent);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0;
}

/* Lien « ← Tous les plans » séparé du logo par un filet. */
.shell-retour {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: var(--texte-secondaire);
    padding-right: 16px;
    border-right: 1px solid var(--bordure);
}

.shell-retour:hover {
    color: var(--encre);
}

/* Segmenté du chrome (Client | Agence | Admin). */
.seg {
    display: inline-flex;
    background: #F1F0EC;
    border-radius: 7px;
    padding: 2px;
}

.seg-item {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--texte-secondaire);
    padding: 5px 13px;
    border-radius: 5px;
    cursor: pointer;
    line-height: 1.4;
}

a.seg-item:hover {
    color: var(--encre);
}

.seg-item.actif {
    background: var(--fond-0);
    color: var(--encre);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

span.seg-item {
    cursor: default;
}

/* Avatar rond + menu déconnexion (élément <details>, sans JS). */
.avatar-menu {
    position: relative;
}

.avatar {
    list-style: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--synthese);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.avatar::-webkit-details-marker {
    display: none;
}

.avatar-panneau {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 80;
    min-width: 210px;
    background: var(--fond-0);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    padding: 6px;
}

.avatar-panneau-id {
    padding: 8px 10px;
    border-bottom: 1px solid var(--fond-4);
    margin-bottom: 4px;
}

.avatar-panneau-nom {
    font-size: 13px;
    font-weight: 700;
}

.avatar-panneau-mail {
    font-size: 12px;
    color: var(--texte-discret);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-panneau-lien {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--encre);
}

.avatar-panneau-lien:hover {
    background: var(--fond-2);
}

/* Menu « ⋮ » (kebab) — actions sur la recommandation stratégique (agence éditable).
   Élément <details>, sans JS ; panneau calqué sur .avatar-panneau. */
.kebab-menu {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.kebab-bouton {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--texte-secondaire);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.kebab-bouton::-webkit-details-marker {
    display: none;
}

.kebab-bouton:hover,
.kebab-menu[open] .kebab-bouton {
    background: var(--fond-2);
    color: var(--encre);
}

.kebab-panneau {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 80;
    min-width: 160px;
    background: var(--fond-0);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    padding: 6px;
}

.kebab-panneau form {
    margin: 0;
}

.kebab-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--encre);
    cursor: pointer;
}

.kebab-item:hover {
    background: var(--fond-2);
    color: var(--accent-fonce);
}

.kebab-item--danger:hover {
    background: var(--fond-2);
    color: #c0392b;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    background: var(--accent);
    color: var(--encre);
}

.pill-discret {
    background: var(--fond-3);
    color: var(--texte-secondaire);
}

/* Toggle par onglets texte (Tous / Digital / Print) — bandeaux Actions & Prestations */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    background: transparent;
    padding: 0;
}

.toggle a,
.toggle button {
    position: relative;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    padding: 2px 0;
    border-radius: 0;
    color: var(--texte-discret);
    font-size: 14px;
    font-weight: 600;
}

.toggle a.actif,
.toggle button.actif {
    background: transparent;
    color: var(--encre);
    box-shadow: none;
}

.toggle button.actif::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

/* Lien « Télécharger » secondaire discret entre le filtre et le bouton + Ajouter
   (brief §4.2) : gris au repos, encre au survol, aligné sur les onglets. */
.btn-telecharger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--texte-secondaire);
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 2px;
}

.btn-telecharger::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    background: currentColor;
    -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16"/></svg>');
    mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16"/></svg>');
}

.btn-telecharger:hover {
    color: var(--encre);
}

.shell-main {
    max-width: var(--contenu-max);
    margin: 0 auto;
    padding: 36px 28px 80px;
}

/* ----- Boutons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 16px;
    border-radius: var(--rayon);
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--encre);
    background: var(--fond-0);
}

.btn-accent {
    background: var(--accent);
    color: var(--encre);
}

.btn-accent:hover {
    background: var(--accent-fonce);
    color: var(--fond-0);
}

.btn:disabled,
.btn[disabled] {
    background: var(--fond-3);
    color: var(--texte-discret);
    border-color: transparent;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-ligne {
    border-color: var(--bordure);
    background: var(--fond-0);
    color: var(--texte-secondaire);
}

.btn-ligne:hover {
    border-color: var(--texte-discret);
    color: var(--encre);
}

.btn-lien {
    color: var(--accent-fonce);
    font-weight: 600;
    font-size: 13px;
}

/* ----- Badges de statut ----- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--fond-3);
}

.badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--badge-couleur, var(--texte-discret));
}

.badge-statut {
    color: var(--encre);
    background: color-mix(in srgb, var(--badge-couleur, var(--texte-discret)) 12%, var(--fond-0));
}

/* Badge cliquable (changement de statut, §14) */
.badge-statut--action {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.12s ease;
}

.badge-statut--action:hover {
    filter: brightness(0.97);
}

.badge-chevron {
    font-size: 9px;
    line-height: 1;
    /* Affordance discrète : masquée dans la liste, révélée au survol du badge
       (le badge reste cliquable pour changer de statut, §14/#26). */
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.12s ease, width 0.12s ease;
}

.badge-statut--action:hover .badge-chevron {
    width: 9px;
    opacity: 0.7;
}

.statut-popover {
    position: relative;
    display: inline-flex;
}

.statut-popover-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 190px;
    padding: 5px;
    background: var(--fond-0);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.12);
}

.statut-popover-menu form {
    margin: 0;
}

.statut-popover-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--encre);
    text-align: left;
    cursor: pointer;
}

.statut-popover-item:hover {
    background: var(--fond-2);
}

.statut-popover-item.est-courant {
    font-weight: 600;
    background: var(--fond-3);
}

.statut-popover-item .pastille {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--badge-couleur, var(--texte-discret));
    flex: 0 0 auto;
}

/* ----- Homepage (agence & client) ----- */
/* Conteneur homepage plus resserré que les pages plan (maquette : 1060 / 52px). */
.shell-main--home {
    max-width: 1060px;
    padding: 52px 28px 96px;
}

.home-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* Badge d'espace (vert, coins carrés, pastille) — remplace l'ancienne pastille pill. */
.badge-espace {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--accent);
    color: var(--synthese);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--rayon-sm);
}

.badge-espace::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--synthese);
}

.btn-plus {
    font-size: 16px;
    line-height: 1;
}

.home-titre {
    font-size: 36px;
    font-weight: 400;
    margin: 16px 0 36px;
    letter-spacing: -0.015em;
}

.home-filtres {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -18px 0 30px;
    flex-wrap: wrap;
}

.home-filtres .compteur {
    color: var(--texte-discret);
    font-size: 12.5px;
}

.groupe-entreprise {
    margin-bottom: 36px;
}

.groupe-entreprise-tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--bordure);
    padding-bottom: 10px;
    margin-bottom: 2px;
}

.groupe-entreprise-tete h2 {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}

.groupe-entreprise-tete .compteur {
    color: var(--texte-discret);
    font-size: 12px;
}

.ligne-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 6px;
    border-bottom: 1px solid var(--fond-4);
    border-radius: var(--rayon-sm);
}

.ligne-plan:hover {
    background: var(--fond-2);
}

.ligne-plan-titre {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}

.ligne-plan-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 18px;
}

.ligne-plan-montant {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ----- En-tête de plan ----- */
.plan-entete {
    margin-bottom: 18px;
}

.plan-entete-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.plan-entete-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-titre {
    font-size: 27px;
    font-weight: 400;
    margin: 6px 0 0;
    max-width: 720px;
    line-height: 1.2;
}

/* Onglets de vue */
.onglets {
    display: flex;
    gap: 26px;
    border-bottom: 1px solid var(--bordure);
    margin: 22px 0 26px;
}

.onglets a {
    padding-bottom: 12px;
    color: var(--texte-discret);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.onglets a.actif {
    color: var(--encre);
    font-weight: 700;
    border-bottom-color: var(--accent);
}

/* ----- Bloc Synthèse ----- */
.synthese {
    background: var(--synthese);
    color: var(--fond-0);
    border-radius: var(--rayon);
    padding: 22px 26px;
    margin-bottom: 34px;
}

.synthese-tete {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    margin-bottom: 8px;
}

.synthese-tete .puce {
    width: 22px;
    height: 22px;
    border-radius: var(--rayon-sm);
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.synthese table {
    width: 100%;
    border-collapse: collapse;
    /* Largeurs réparties uniformément : 1re colonne (libellé) fixe, colonnes de
       montants égales entre elles quel que soit leur nombre (5 client / 6 agence). */
    table-layout: fixed;
}

.synthese th,
.synthese td {
    text-align: right;
    padding: 12px 0;
    font-variant-numeric: tabular-nums;
}

.synthese th:first-child,
.synthese td:first-child {
    text-align: left;
    width: 19%;
}

.synthese thead th {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    font-size: 13px;
    padding-bottom: 6px;
}

.synthese tbody td {
    color: rgba(255, 255, 255, 0.78);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.synthese tbody td:first-child {
    color: var(--fond-0);
    font-weight: 600;
}

.synthese tbody td.col-total {
    color: var(--fond-0);
    font-weight: 700;
}

.synthese tbody tr.ligne-total td {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding-top: 16px;
}

.synthese tbody tr.ligne-total td:first-child {
    font-weight: 700;
}

.synthese tbody tr.ligne-total td.col-total {
    color: #FFFFFF;
    font-size: 17px;
}

/* Colonne « Marge » (vue agence uniquement) — texte vert accent. */
.synthese td.col-marge {
    color: var(--accent);
}

.synthese-offertes {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.synthese-offertes .valeur {
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ----- Bandeau de section (Actions. / Prestations.) ----- */
.section-bandeau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--fond-2);
    border-radius: var(--rayon);
    padding: 16px 20px;
    margin-bottom: 4px;
}

/* Fonds de bandeau par famille (brief §2) : Actions gris-bleu froid, Prestations taupe chaud. */
.section-bandeau--actions {
    background: #e7edee;
}

.section-bandeau--prestations {
    background: #eeeae2;
}

.section-bandeau h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
}

.section-bandeau h2 .point {
    color: var(--accent);
}

.section-bandeau-droite {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* ----- Tableau du plan ----- */
.table-plan {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    /* Largeurs de colonnes fixes et partagées : les tableaux Socle et Actions
       (deux <table> distincts) s'alignent au pixel malgré des contenus différents. */
    table-layout: fixed;
}

.table-plan th.col-ligne {
    width: 24%;
}

.table-plan th.col-dates {
    width: 16%;
}

.table-plan thead th {
    text-align: left;
    color: var(--texte-discret);
    font-weight: 500;
    font-size: 13px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--encre);
}

.table-plan th.num,
.table-plan td.num {
    text-align: right;
}

.table-plan th.num {
    width: 120px;
}

.table-plan th.suivi,
.table-plan td.suivi {
    text-align: right;
    width: 140px;
}

.table-plan tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--bordure);
    vertical-align: top;
}

.groupe-tete td {
    padding-top: 20px;
    border-bottom: none;
}

.groupe-tete .libelle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.groupe-tete .libelle::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.groupe-tete .compteur {
    color: var(--texte-discret);
    font-weight: 400;
    margin-left: 6px;
    font-size: 13px;
}

/* Colonne poignée de réordonnancement (agence éditable). */
.table-plan th.col-poignee,
.table-plan td.cell-poignee {
    width: 24px;
    padding-left: 4px;
    padding-right: 0;
    text-align: center;
}

.table-poignee {
    display: inline-block;
    cursor: grab;
    user-select: none;
    color: var(--texte-secondaire);
    font-size: 12px;
    line-height: 1;
    letter-spacing: -2px;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.table-poignee:hover {
    opacity: 1;
}

.table-poignee:active {
    cursor: grabbing;
}

/* Ligne en cours de glissement : légèrement estompée (repère visuel). */
.table-plan tr.en-glisse {
    opacity: 0.5;
}

.cell-levier {
    font-weight: 600;
}

.cell-levier .regie {
    display: block;
    color: var(--texte-secondaire);
    font-weight: 400;
    font-size: 13px;
    margin-top: 2px;
}

/* Historique : ligne de version cliquable (lien étiré sur toute la rangée). */
.table-historique tbody tr.ligne-cliquable {
    position: relative;
    cursor: pointer;
}

.table-historique tbody tr.ligne-cliquable:hover {
    background: var(--fond-2);
}

.lien-etire {
    color: inherit;
    text-decoration: none;
}

.lien-etire::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* En-tête de consultation d'une version figée. */
.version-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.version-fige-note {
    color: var(--texte-discret);
    font-size: 13px;
    margin: 4px 0 22px;
}

.cell-dates {
    white-space: nowrap;
}

.cell-dates .duree {
    display: block;
    color: var(--texte-discret);
    font-size: 12.5px;
    margin-top: 2px;
}

.cell-desc {
    color: var(--texte-secondaire);
    font-size: 13.5px;
    max-width: 380px;
}

/* Lien « Voir le livrable » sur la ligne, sous la description (action / prestation).
   Discret, en vert accent, avec une petite icône. Rien si pas de livrable. */
.lien-livrable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-fonce);
}

.lien-livrable::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: none;
    background: var(--accent-fonce);
    -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>');
    mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>');
}

.lien-livrable:hover {
    color: var(--accent-fonce);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cell-budget {
    font-weight: 700;
}

.muet {
    color: var(--texte-discret);
}

/* Ligne offerte : valeur barrée + libellé */
.offerte-valeur {
    text-decoration: line-through;
    color: var(--texte-discret);
}

.tag-offerte {
    display: inline-block;
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent-fonce);
}

/* Validation par ligne (fond) */
tr.statut-validee td {
    background: var(--ligne-validee);
}

tr.statut-refusee td {
    background: var(--ligne-refusee-fond);
}

/* Sous-totaux */
tr.sous-total td {
    border-bottom: none;
    border-top: 1px solid var(--bordure);
    font-weight: 600;
    background: var(--fond-1);
}

tr.sous-total-actions td {
    background: var(--fond-3);
    font-weight: 700;
    padding: 16px 12px;
    /* Filet d'encre sur les lignes de total (brief §2). */
    border-top: 2px solid var(--encre);
}

/* ----- Colonne Suivi (boutons de ligne) ----- */
.suivi-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

.suivi-actions form {
    display: inline-flex;
    align-items: center;
}

/* Séparateur discret entre l'état/annotation et les actions d'édition (agence). */
.suivi-sep {
    width: 1px;
    height: 16px;
    margin: 0 4px;
    background: var(--bordure);
}

/* Icônes de ligne : boutons discrets sans bordure, gris au repos, encre au survol. */
.btn-icone {
    width: 28px;
    height: 28px;
    border-radius: var(--rayon-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--texte-discret);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    line-height: 1;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.btn-icone:hover {
    background: var(--fond-3);
    color: var(--encre);
}

/* Bouton Supprimer : neutre au repos, rouge discret au survol. */
.btn-icone.danger:hover {
    background: var(--ligne-refusee-fond);
    color: var(--ligne-refusee);
}

/* Bouton Annoter : pastille verte discrète quand la ligne porte des annotations. */
.btn-icone.a-annotations {
    background: var(--ligne-validee);
    color: var(--accent-fonce);
    font-weight: 700;
}

.btn-icone.a-annotations:hover {
    background: var(--accent);
    color: var(--encre);
}

.btn-icone .compteur {
    font-size: 12px;
    font-weight: 700;
}

/* Indicateur de validation (lecture, mode client/aperçu) */
.valid-etat {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: var(--rayon-sm);
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bordure);
    font-size: 13px;
}

.valid-etat.validee {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--encre);
}

.valid-etat.refusee {
    background: var(--ligne-refusee);
    border-color: var(--ligne-refusee);
    color: var(--fond-0);
}

/* Validation par ligne côté client (✓ / ✕, état actif coloré) */
.btn-icone.valider.actif {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--encre);
}

.btn-icone.refuser.actif {
    background: var(--ligne-refusee);
    border-color: var(--ligne-refusee);
    color: var(--fond-0);
}

.btn-icone.valider:hover {
    background: var(--ligne-validee);
    color: var(--accent-fonce);
}

.btn-icone.refuser:hover {
    background: var(--ligne-refusee-fond);
    color: var(--ligne-refusee);
}

.btn-icone.valider.actif:hover,
.btn-icone.refuser.actif:hover {
    color: inherit;
}

/* ----- Volet latéral (drawer) ----- */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 42, 30, 0.32);
    z-index: 40;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 92vw);
    background: var(--fond-0);
    z-index: 41;
    border-left: 1px solid var(--bordure);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.drawer-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--bordure);
    position: sticky;
    top: 0;
    background: var(--fond-0);
}

.drawer-tete h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
}

.drawer-tete h2 .point {
    color: var(--accent);
}

.drawer-corps {
    padding: 22px 24px;
    flex: 1;
}

.drawer-pied {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    /* Marge basse renforcée : les boutons du pied dégagent le bord bas du viewport
       (et la barre de debug Symfony en dev), pour rester toujours cliquables. */
    padding: 16px 24px 40px;
    border-top: 1px solid var(--bordure);
    position: sticky;
    bottom: 0;
    background: var(--fond-0);
}

/* Champs de formulaire */
.champ {
    margin-bottom: 16px;
}

.champ > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--texte-secondaire);
    margin-bottom: 6px;
}

.champ input[type='text'],
.champ input[type='email'],
.champ input[type='url'],
.champ input[type='date'],
.champ input[type='file'],
.champ input[type='number'],
.champ textarea,
.champ select {
    width: 100%;
    font: inherit;
    padding: 9px 11px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: var(--fond-0);
    color: var(--encre);
}

.champ input:focus,
.champ textarea:focus,
.champ select:focus {
    outline: none;
    border-color: var(--accent-fonce);
}

.champ .aide {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--texte-discret);
}

.champ-erreur {
    color: var(--ligne-refusee);
    font-size: 12.5px;
    margin-top: 5px;
}

.champ-ligne {
    display: flex;
    gap: 14px;
}

.champ-ligne > .champ {
    flex: 1;
}

/* Aligne une case à cocher (Visible client) sur la ligne d'un champ voisin. */
.champ-ligne--bas {
    align-items: flex-end;
}

/* Mention discrète en regard d'un libellé (« forfait », « 100 % marge », « descriptif »),
   alignée à droite sur la ligne du label (le champ sert de repère de positionnement). */
.champ {
    position: relative;
}

.champ-mention {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--texte-discret);
    text-transform: none;
}

/* ----- Formulaire dynamique de ligne (volet, refonte V3) ----- */

/* Sélecteurs en cascade sur toute la largeur du volet. */
.choix-radios--large > div {
    display: flex;
    width: 100%;
}

.choix-radios--large label {
    flex: 1;
    padding: 8px 10px;
}

/* Badge de visibilité : distingue ce qui est vu du client de l'usage interne. */
.badge-visibilite {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}

.badge-visibilite--client {
    color: var(--accent-fonce);
    background: color-mix(in srgb, var(--accent) 18%, var(--fond-0));
}

.badge-visibilite--interne {
    color: var(--texte-secondaire);
    background: var(--fond-3);
}

/* Badge de visibilité rattaché à un champ : posé sur la ligne du label, en haut à
   droite, pour ne pas s'intercaler entre le libellé et le widget. Ne cible que les
   enfants directs de .champ (préserve les badges du récap « Agence »). */
.champ > .badge-visibilite {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 0;
}

/* La case « Visible client » posée à côté du taux de commission. */
.champ-visible-client {
    flex: 0 0 auto;
    padding-bottom: 9px;
    white-space: nowrap;
}

/* Quick-add régie / prestataire : lien déclencheur + rangée de saisie inline. */
.lien-quickadd {
    display: inline-block;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-fonce);
    cursor: pointer;
}

.lien-quickadd:hover {
    text-decoration: underline;
}

.quick-add {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Au repos, le bloc de saisie inline reste replié (le contrôleur bascule `hidden`) ;
   sans cette règle, `display: flex` écraserait l'attribut `hidden`. */
.quick-add[hidden] {
    display: none;
}

.quick-add input {
    flex: 1;
}

/* Récap calculé en direct : encart pâle, prix client en accent, marge en dessous. */
.recap {
    background: var(--fond-2);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 16px 0;
}

.recap-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--texte-secondaire);
    padding: 3px 0;
}

.recap-ligne > span:last-child {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--encre);
}

.recap-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--bordure);
    font-weight: 700;
    color: var(--encre);
}

.recap-total > span:last-child {
    font-weight: 800;
    color: var(--accent-fonce);
}

/* Section d'appartenance (Socle / Actions) rejetée en pied de volet, discrète. */
.champ-section-appartenance {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--bordure);
}

/* Toggle segmenté (Type Digital/Print, Mode Calculé/Forfait) : piste grise,
   option sélectionnée = pastille blanche. Le widget Symfony imbrique les
   input/label dans un <div> interne. */
.choix-radios > div {
    display: inline-flex;
    gap: 2px;
    background: var(--fond-2);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 3px;
}

.choix-radios input[type='radio'] {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
}

.choix-radios label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 18px;
    border: 0;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texte-secondaire);
    cursor: pointer;
}

.choix-radios input[type='radio']:checked + label {
    background: var(--fond-0);
    color: var(--encre);
    box-shadow: 0 1px 2px rgba(10, 42, 30, 0.12);
}

.champ-offerte {
    display: flex;
    align-items: center;
    gap: 8px;
}

.champ-offerte label {
    margin: 0;
    font-weight: 500;
    color: var(--encre);
}

/* La ligne « Commission visible du client » porte une aide qui doit passer sous
   la case + le libellé, sur toute la largeur. */
.champ-offerte--aide {
    flex-wrap: wrap;
}

.champ-offerte--aide .aide {
    flex-basis: 100%;
    margin-top: 4px;
}

/* Titre de section du volet (Classification, Description, Tarification & budget…) :
   mutualisé avec les <legend> des blocs de champs (Dates clés, Livrable). */
.drawer-section,
.bloc-champs > legend {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--encre);
    padding: 0;
    margin: 24px 0 12px;
}

.drawer-corps > .drawer-section:first-of-type {
    margin-top: 4px;
}

.drawer-section .champ-sous,
.bloc-champs > legend .champ-sous {
    font-weight: 500;
}

/* Encart « Budget calculé » : encadré pointillé, fond très pâle, montant en vert. */
.budget-apercu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--fond-1);
    border: 1px dashed var(--bordure);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.budget-apercu .libelle {
    font-weight: 600;
    color: var(--texte-secondaire);
}

.budget-apercu .montant {
    font-weight: 800;
    color: var(--accent-fonce);
    font-variant-numeric: tabular-nums;
}

/* Bloc de champs à plat : la structure est portée par les titres de section. */
.bloc-champs {
    border: 0;
    padding: 0;
    margin: 0 0 16px;
}

/* ----- Section Jalons (volet action) ----- */
.bloc-jalons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bloc-jalons > [data-jalons-target='liste'] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jalon-ligne {
    position: relative;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-sm);
    background: var(--fond-1, var(--fond-0));
    padding: 14px 14px 2px;
}

.jalon-ligne .champ:last-of-type {
    margin-bottom: 14px;
}

.jalon-suppr {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    line-height: 1;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    background: var(--fond-0);
    color: var(--texte-discret);
    font-size: 12px;
    cursor: pointer;
}

.jalon-suppr:hover {
    border-color: var(--ligne-refusee);
    color: var(--ligne-refusee);
}

.jalon-ajout {
    align-self: flex-start;
}

/* ----- Flash ----- */
.flash {
    padding: 11px 16px;
    border-radius: var(--rayon);
    margin-bottom: 18px;
    font-size: 14px;
    border: 1px solid var(--bordure);
    background: var(--ligne-validee);
}

.flash-erreur {
    border-color: #F1C9BD;
    background: #FBE7E0;
    color: #C0472E;
}

/* ----- Volet d'annotation ----- */
.drawer-montant {
    display: block;
    margin-top: 2px;
    color: var(--texte-secondaire);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.annot-fil {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.annot-vide {
    margin: 0;
    font-size: 13.5px;
}

.annot {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.annot-avatar {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--fond-3);
    color: var(--texte-secondaire);
}

.annot-agence .annot-avatar {
    background: var(--synthese);
    color: var(--accent);
}

.annot-bulle {
    flex: 1;
    background: var(--fond-2);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 10px 12px;
}

.annot-agence .annot-bulle {
    background: var(--ligne-validee);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--bordure));
}

.annot-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.annot-auteur {
    font-weight: 700;
    font-size: 13.5px;
}

.annot-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--texte-discret);
}

.annot-date {
    margin-left: auto;
    color: var(--texte-discret);
    font-size: 12px;
}

.annot-texte {
    margin: 0;
    font-size: 14px;
    color: var(--encre);
    white-space: pre-line;
}

.annot-modifie {
    font-size: 11px;
    font-style: italic;
    color: var(--texte-discret);
}

.annot-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.annot-suppr {
    margin: 0;
}

.annot-lien {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: var(--texte-discret);
    cursor: pointer;
    list-style: none;
}

.annot-lien::-webkit-details-marker {
    display: none;
}

.annot-lien:hover {
    color: var(--encre);
}

.annot-edit {
    margin: 0;
}

.annot-edit .annot-form {
    margin-top: 8px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
    align-self: flex-start;
}

.annot-pied {
    flex-direction: column;
    align-items: stretch;
}

.annot-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.annot-form textarea {
    width: 100%;
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-sm);
    background: var(--fond-0);
    color: var(--encre);
    resize: vertical;
}

.annot-form textarea:focus {
    outline: none;
    border-color: var(--accent-fonce);
}

.annot-form button {
    align-self: flex-end;
}

.annot-invite {
    margin: 0;
    text-align: center;
}

/* =========================================================================
   Vue Rapport — tableau dense agrégé par catégorie, montants à droite.
   ========================================================================= */
.rapport {
    margin-bottom: 40px;
}

.rapport-sous-titre {
    color: var(--texte-discret);
    font-size: 13px;
}

.rapport-table .cell-categorie {
    font-weight: 600;
}

.rapport-table tr.rapport-total td {
    border-top: 2px solid var(--encre);
    border-bottom: none;
    background: var(--synthese);
    color: var(--fond-0);
    font-weight: 700;
    padding: 16px 12px;
}

.rapport-table tr.rapport-total td:first-child {
    border-top-left-radius: var(--rayon);
    border-bottom-left-radius: var(--rayon);
}

.rapport-table tr.rapport-total td:last-child {
    border-top-right-radius: var(--rayon);
    border-bottom-right-radius: var(--rayon);
}

.rapport-table tr.rapport-total td.col-total {
    color: var(--accent);
    font-size: 17px;
}

/* =========================================================================
   Timeline Gantt — rendu CSS grid maison (positions précalculées côté serveur).
   ========================================================================= */
.gantt-wrap {
    margin-bottom: 48px;
}

.gantt-bandeau {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    margin: 8px 0 14px;
}

.gantt-bandeau .puce {
    width: 22px;
    height: 22px;
    border-radius: var(--rayon-sm);
    background: var(--fond-3);
    color: var(--accent-fonce);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.gantt-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--texte-secondaire);
}

.legende-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 14px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.pastille.kind-diffusion {
    background: #d7e0f5;
}

.pastille.kind-aller_retour {
    background: color-mix(in srgb, var(--ligne-validee) 45%, transparent);
    border: 1.5px dashed var(--accent);
}

.pastille.kind-bat {
    background: var(--accent);
    color: var(--encre);
    width: 14px;
}

.pastille.kind-weekend {
    background: var(--fond-2);
    border: 1px solid var(--bordure);
}

.pastille.kind-today {
    background: var(--accent);
    width: 3px;
    height: 16px;
    border-radius: 2px;
}

/* Conteneur scrollable horizontalement. */
.gantt {
    overflow-x: auto;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-0);
}

.gantt-grille {
    --jour-largeur: 30px;
    --col-gauche: 240px;
    width: calc(var(--col-gauche) + var(--nb-jours) * var(--jour-largeur));
    font-variant-numeric: tabular-nums;
}

.gantt-entete,
.gantt-groupe-tete,
.gantt-ligne {
    display: flex;
    width: calc(var(--col-gauche) + var(--nb-jours) * var(--jour-largeur));
}

/* Colonnes gauche figées (sticky) pendant le scroll horizontal. */
.gantt-coin,
.gantt-gauche,
.gantt-groupe-label {
    position: sticky;
    left: 0;
    flex: 0 0 var(--col-gauche);
    width: var(--col-gauche);
    background: var(--fond-0);
    border-right: 1px solid var(--bordure);
}

.gantt-entete {
    border-bottom: 1px solid var(--encre);
}

.gantt-coin {
    z-index: 6;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 12px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--texte-discret);
}

.gantt-axe {
    display: flex;
    flex-direction: column;
}

.gantt-mois,
.gantt-jours {
    display: grid;
    grid-template-columns: repeat(var(--nb-jours), var(--jour-largeur));
}

.gantt-mois-cell {
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border-left: 1px solid var(--bordure);
}

.gantt-jour {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
    font-size: 11px;
    color: var(--texte-discret);
    padding: 4px 0;
}

.gantt-jour-lettre {
    font-size: 9px;
    line-height: 1;
    color: var(--texte-discret);
    text-transform: uppercase;
}

.gantt-jour-num {
    line-height: 1;
}

.gantt-jour.est-chome {
    background: var(--fond-2);
}

.gantt-jour.est-aujourdhui {
    color: var(--accent-fonce);
    font-weight: 700;
    box-shadow: inset 1px 0 0 var(--accent);
}

.gantt-groupe-tete {
    background: var(--fond-2);
    border-bottom: 1px solid var(--bordure);
}

.gantt-groupe-label {
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--fond-2);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--texte-secondaire);
}

.gantt-groupe-label::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

/* Groupes de prestations à jalons : pastille distincte (contour, pas plein) pour
   les différencier des groupes d'actions média. */
.gantt-groupe-tete.variante-prestation .gantt-groupe-label::before {
    background: transparent;
    border: 2px solid var(--accent);
}

.gantt-gauche {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--bordure);
}

.gantt-gauche-infos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Poignée de réordonnancement (agence éditable, lignes d'action — §7.2). */
.gantt-poignee {
    flex: none;
    cursor: grab;
    user-select: none;
    color: var(--texte-secondaire);
    font-size: 12px;
    line-height: 1;
    letter-spacing: -2px;
    padding: 0 2px;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.gantt-poignee:hover {
    opacity: 1;
}

.gantt-poignee:active {
    cursor: grabbing;
}

/* Ligne en cours de glissement : légèrement estompée pour repère visuel. */
.gantt-ligne.en-glisse {
    opacity: 0.5;
}

.gantt-action-nom {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.gantt-action-nom:hover {
    color: var(--accent-fonce);
    text-decoration: underline;
}

.gantt-action-regie {
    font-size: 12px;
    color: var(--texte-secondaire);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-action-budget {
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.gantt-ligne.statut-validee .gantt-gauche {
    background: var(--ligne-validee);
}

.gantt-ligne.statut-refusee .gantt-gauche {
    background: var(--ligne-refusee-fond);
}

/* Piste : grille de jours, items empilés sur une seule rangée. */
.gantt-piste {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--nb-jours), var(--jour-largeur));
    min-height: 46px;
    align-items: center;
    border-bottom: 1px solid var(--bordure);
}

.gantt-piste > * {
    grid-row: 1;
}

.gantt-fond {
    align-self: stretch;
    border-right: 1px solid var(--fond-3);
    z-index: 0;
}

.gantt-fond.est-chome {
    background: var(--fond-2);
}

.gantt-fond.est-aujourdhui {
    box-shadow: inset 1px 0 0 var(--accent);
}

/* Bandes (plages : diffusion, aller-retour) */
.gantt-bande {
    z-index: 2;
    align-self: center;
    height: 26px;
    margin: 0 1px;
    padding: 0 9px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
}

.gantt-bande-nom {
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-bande.est-principal {
    font-weight: 600;
}

.gantt-bande.kind-diffusion {
    background: #d7e0f5;
    color: #33457a;
}

/* Aller-retour créa : contour pointillés vert, fond quasi transparent, sans texte. */
.gantt-bande.kind-aller_retour {
    background: color-mix(in srgb, var(--ligne-validee) 45%, transparent);
    border: 1.5px dashed var(--accent);
    border-radius: 6px;
    height: 22px;
}

.gantt-bande.kind-plage {
    background: var(--fond-3);
    color: var(--texte-secondaire);
}

/* Marqueurs (ponctuels : PC, BAT) */
.gantt-marqueur {
    z-index: 3;
    align-self: center;
    justify-self: center;
    width: 20px;
    height: 20px;
    border-radius: var(--rayon-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.gantt-marqueur.kind-bat {
    background: var(--accent);
    color: var(--encre);
}

.gantt-marqueur.kind-pc {
    background: var(--synthese);
    color: var(--accent);
}

.gantt-marqueur.kind-ponctuel {
    background: var(--texte-secondaire);
    color: var(--fond-0);
}

.gantt-vide {
    padding: 24px 16px;
}

/* ----- En-tête de page (titre + action) ----- */
.page-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.page-tete .page-titre {
    margin-bottom: 4px;
}

/* ----- Popin modale (Nouveau plan média) ----- */
.modale-fond {
    position: fixed;
    inset: 0;
    background: rgba(10, 42, 30, 0.32);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modale-fond[hidden] {
    display: none;
}

.modale {
    width: min(480px, 100%);
    max-height: 90vh;
    background: var(--fond-0);
    border: 1px solid var(--bordure);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(10, 42, 30, 0.24);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modale-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 24px 4px;
}

.modale-surtitre {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--accent);
}

.modale-tete h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.modale-tete h2 .point {
    color: var(--accent);
}

.modale-corps {
    padding: 14px 24px 4px;
    overflow-y: auto;
}

.modale-pied {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 24px 22px;
}

/* Sous-titre discret accolé à un label de champ (« Entreprise · association unique »). */
.champ-sous {
    font-weight: 500;
    font-size: 12px;
    color: var(--texte-discret);
}

/* ----- Panneau « Partager ce plan » ----- */
.modale-partage {
    width: min(560px, 100%);
}

.modale-sous-titre {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--texte-secondaire);
}

.partage-bloc {
    padding: 18px 0;
    border-top: 1px solid var(--bordure);
}

.partage-bloc:first-child {
    padding-top: 0;
    border-top: 0;
}

.partage-bloc h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
}

.partage-bloc-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.partage-bloc-tete h3 {
    margin: 0;
}

.partage-aide {
    margin: 10px 0;
    font-size: 12.5px;
    color: var(--texte-secondaire);
}

/* Toggle interrupteur (lien public) */
.toggle-switch {
    position: relative;
    width: 42px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: var(--fond-3);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;
}

.toggle-switch.actif {
    background: var(--accent);
}

.toggle-switch-bille {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--fond-0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

.toggle-switch.actif .toggle-switch-bille {
    transform: translateX(18px);
}

/* Champ lien public + copier */
.partage-lien {
    display: flex;
    gap: 8px;
}

.partage-lien input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-2);
    font-size: 12.5px;
    color: var(--encre);
}

/* Recherche + résultats autocomplete */
.partage-recherche {
    position: relative;
    margin-bottom: 12px;
}

.partage-recherche input[type="search"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    font: inherit;
    font-size: 13.5px;
}

.partage-resultats {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 5;
    background: var(--fond-0);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: 0 12px 30px rgba(10, 42, 30, 0.16);
    max-height: 260px;
    overflow-y: auto;
}

.partage-resultat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bordure);
    margin: 0;
}

.partage-resultat:last-child {
    border-bottom: 0;
}

.partage-resultat-vide,
.partage-vide {
    padding: 10px;
    font-size: 12.5px;
    margin: 0;
}

/* Listes des rattachés */
.partage-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.partage-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--fond-2);
    border-radius: var(--rayon);
}

.partage-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--synthese);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

.partage-item-corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.partage-item-nom {
    font-size: 13.5px;
    font-weight: 600;
}

.partage-item-meta {
    font-size: 12px;
    color: var(--texte-secondaire);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partage-resultat form,
.partage-item form {
    margin: 0;
}

/* ----- Connexion unifiée (carte centrée, onglets Agence / Client) ----- */
.login-scene {
    position: fixed;
    inset: 0;
    background: var(--fond-2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.login-wrap {
    width: 100%;
    max-width: 392px;
}

.login-logo {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    margin-bottom: 26px;
    letter-spacing: 0.16em;
    font-size: 16px;
    font-weight: 600;
    color: var(--encre);
    user-select: none;
}

.login-logo .gras {
    font-weight: 800;
}

.login-logo .point {
    color: var(--accent);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 1;
}

.login-carte {
    background: var(--fond-0);
    border: 1px solid var(--bordure);
    border-radius: 14px;
    padding: 30px 30px 32px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}

.login-onglets {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}

.login-onglet {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--encre);
    background: var(--fond-0);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.login-onglet.actif {
    color: var(--fond-0);
    background: var(--synthese);
    border-color: var(--synthese);
}

.login-onglet-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.login-form[hidden] {
    display: none;
}

.login-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--texte-secondaire);
    margin-bottom: 6px;
}

.login-input {
    width: 100%;
    font: inherit;
    font-size: 13.5px;
    color: var(--encre);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 11px 12px;
    outline: none;
    margin-bottom: 16px;
}

.login-input:focus {
    border-color: var(--accent);
}

.login-pass {
    position: relative;
    margin-bottom: 24px;
}

.login-pass .login-input {
    margin-bottom: 0;
    padding-right: 82px;
}

.login-voir {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-fonce);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
}

.login-submit {
    width: 100%;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--synthese);
    background: var(--accent);
    border: none;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-submit:hover {
    background: #14C98A;
}

.login-erreur {
    background: var(--ligne-refusee-fond);
    color: var(--ligne-refusee);
    font-size: 13px;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 18px;
}

.login-note {
    margin: 20px 4px 0;
    text-align: center;
    font-size: 12px;
    color: var(--texte-discret);
    line-height: 1.5;
}

.login-note code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    color: var(--texte-secondaire);
}

/* Onglet Facturation (§7.3) : formulaire plein onglet, largeur contenue,
   cohérent avec les cartes du reste de l'app (fond 0, bordure douce). */
.facturation {
    max-width: 720px;
    margin: 20px 0;
    padding: 22px 24px;
    background: var(--fond-0);
    border: 1px solid var(--bordure);
    border-radius: 14px;
}

.facturation-tete h2 {
    margin: 0 0 18px;
    font-size: 18px;
}

.facturation-corps > .champ > label {
    color: var(--encre);
}

.facturation-fichier {
    margin: 0 0 8px;
}

.facturation .aide {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--texte-discret);
}

.facturation-pied {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

/* Factures jointes au plan (sous les coordonnées). Carte cohérente avec l'onglet :
   dépôt multi-fichiers côté agence, liste badge PDF + Télécharger (+ suppr. agence). */
.factures {
    max-width: 720px;
    margin: 24px 0;
}

.factures-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 4px;
}

.factures-titre {
    display: flex;
    align-items: center;
    gap: 8px;
}

.factures-titre h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.factures-titre .pastille {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
}

.factures-compteur {
    font-size: 12px;
    font-weight: 600;
    color: var(--texte-discret);
}

.factures-intro {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--texte-secondaire);
}

.factures-corps {
    border: 1px solid var(--bordure);
    border-radius: 10px;
    background: var(--fond-0);
    padding: 20px 22px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.factures-depot {
    flex: none;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.factures-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px dashed var(--bordure-forte, #C9C5BC);
    border-radius: 8px;
    padding: 20px 16px;
    cursor: pointer;
    text-align: center;
}

.factures-dropzone:hover {
    border-color: var(--accent);
    background: var(--fond-1);
}

.factures-dropzone-icone {
    font-size: 20px;
    color: var(--texte-discret);
    line-height: 1;
}

.factures-dropzone-titre {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texte-secondaire);
}

.factures-dropzone-aide {
    font-size: 11.5px;
    color: var(--texte-discret);
}

.factures-input {
    font-size: 11.5px;
    color: var(--texte-secondaire);
    margin-top: 4px;
    max-width: 100%;
}

.factures-liste-conteneur {
    flex: 1;
    min-width: 0;
}

.factures-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.facture-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--fond-1);
}

.facture-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.facture-badge {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 6px;
    background: #0A2A1E;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.facture-nom {
    font-size: 13px;
    font-weight: 600;
    color: var(--encre);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.facture-meta {
    font-size: 11.5px;
    color: var(--texte-discret);
}

.facture-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.facture-telecharger {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-fonce);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    text-decoration: none;
}

.facture-telecharger:hover {
    text-decoration: underline;
}

.facture-supprimer {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #E5484D;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
}

.facture-supprimer:hover {
    text-decoration: underline;
}

.factures-vide {
    margin: 0;
    font-size: 13px;
    color: var(--texte-discret);
    text-align: center;
    padding: 24px 0;
}