/* alphaPlanner — feuille de style de base
 *
 * Parti pris visuel : peu de couleurs, beaucoup d'air. L'interface doit se
 * faire oublier — c'est la tâche en cours qui doit capter l'attention, pas la
 * décoration autour.
 *
 * La couleur d'accent est réservée à ce qui appelle une action ou répond à
 * « où suis-je ». Elle perd tout pouvoir de signalement si elle sert d'ornement.
 *
 * Trois choix structurent le reste :
 *
 *   - **Deux plans.** La page est légèrement teintée, les surfaces sont
 *     franches. C'est ce qui donne du relief sans ajouter une seule couleur ;
 *     une carte blanche sur une page blanche ne se voit pas.
 *   - **Un conteneur large** (90 % de la fenêtre, borné). Les écrans qui n'y
 *     gagnent rien — la tâche en cours, le plan à cocher — se bornent
 *     eux-mêmes : la largeur disponible n'est pas une obligation de la remplir.
 *   - **Deux navigations.** Bandeau collant en haut sur grand écran, barre à
 *     portée du pouce en bas sur téléphone. Voir la section « mobile », en fin
 *     de fichier.
 */

/* Aligne les contrôles natifs — cases à cocher, champs — sur le thème de la
 * PAGE et non sur celui du système. Sans cela, un système en sombre associé au
 * thème clair de l'application produit des cases à cocher noires sur fond
 * blanc. C'est le navigateur qui décide, et il décide mal. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Les couleurs sont déclarées une fois par thème, dans un groupe réutilisé
 * trois fois : préférence système, et les deux valeurs forcées par le bouton.
 * Trois copies à tenir à jour, c'est le prix du choix explicite de thème sans
 * JavaScript au premier rendu.
 *
 * Deux plans, et c'est le changement qui donne le plus d'effet : la PAGE est
 * légèrement teintée, les SURFACES sont franches. Une carte blanche sur une
 * page blanche ne se voit pas — c'est ce qui rendait l'ensemble terne. */
:root {
    --fond-page:     #f4f5f8;
    --fond:          #ffffff;
    --fond-doux:     #f2f4f7;
    --bordure:       #e4e7ec;
    --bordure-forte: #cfd4dc;
    --texte:         #16181d;
    --texte-doux:    #667085;
    --accent:        #4f46e5;
    --accent-fort:   #4338ca;
    --accent-texte:  #ffffff;
    --accent-doux:   #eef0fe;
    --danger:        #b42318;
    --danger-fond:   #fef3f2;
    --succes:        #067647;
    --succes-fond:   #ecfdf3;

    --ombre:       0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --ombre-levee: 0 2px 4px rgba(16, 24, 40, .05), 0 8px 20px rgba(16, 24, 40, .08);
    --ombre-haute: 0 16px 48px rgba(16, 24, 40, .18);
}

/* --- Clients, solde et décomptes maintenance ----------------------------- */
.mini-action,
.editer-tache,
.decompter-forfait {
    border: 1px solid color-mix(in srgb, var(--bordure) 75%, transparent);
    background: color-mix(in srgb, var(--fond) 82%, transparent);
    color: var(--texte-doux);
    border-radius: 999px;
    padding: .34rem .62rem;
    cursor: pointer;
    font: inherit;
    font-size: .76rem;
    white-space: nowrap;
}
.mini-action:hover,.editer-tache:hover,.decompter-forfait:hover { color: var(--texte); border-color: var(--accent); }
.decompter-forfait { color: #70e9d3; border-color: color-mix(in srgb, #39dec1 42%, transparent); }
.decompter-forfait.decomptee { color: #07110f; background: #62e6c9; border-color: #62e6c9; }
.projet-client-select { display: flex; align-items: center; gap: .6rem; color: var(--texte-doux); font-size: .78rem; }
.projet-client-select select { min-width: 12rem; padding: .4rem .7rem; }
.dialogue-tache {
    width: min(34rem, calc(100vw - 2rem));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--bordure));
    border-radius: 1.1rem;
    color: var(--texte);
    background: color-mix(in srgb, var(--fond) 94%, #07151e);
    box-shadow: 0 2rem 6rem #000a, 0 0 3rem color-mix(in srgb, var(--accent) 15%, transparent);
}
.dialogue-tache::backdrop { background: #02070dcc; backdrop-filter: blur(7px); }
.dialogue-tache form { display: grid; gap: 1rem; }
.dialogue-tache header,.dialogue-tache footer { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.dialogue-tache header strong { font-size: 1.15rem; }
.dialogue-tache header button { border: 0; background: transparent; color: var(--texte-doux); font-size: 1.5rem; cursor: pointer; }
.dialogue-tache label { display: grid; gap: .35rem; }
.dialogue-tache input,.dialogue-tache textarea { width: 100%; }
.dialogue-tache footer { justify-content: flex-end; }
.grille-clients-finance { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .85rem; }
.fiche-client { display: grid; gap: .4rem; min-width: 0; }
.fiche-client > span,.fiche-client > a { overflow-wrap: anywhere; }
.fiche-client footer { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding-top: .65rem; margin-top: .3rem; border-top: 1px solid var(--bordure); font-size: .78rem; }
.fiche-client footer strong { margin-left: auto; color: #6ee7cf; }
.section-clients { margin-block: 2rem; }
.onglets-clients { display: flex; gap: .55rem; overflow-x: auto; padding: .35rem 0 1rem; }
.onglets-clients a { padding: .55rem .85rem; border: 1px solid var(--bordure); border-radius: 999px; white-space: nowrap; background: var(--fond); }
.decompte-client { scroll-margin-top: 1rem; margin-bottom: 2.5rem; }
.decompte-kpis { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.formulaire-periode { display: grid; grid-template-columns: minmax(11rem, .7fr) minmax(14rem, 1.5fr) auto; gap: .8rem; align-items: end; margin-block: 1rem; }
.formulaire-periode label { display: grid; gap: .3rem; }
.decompte-table input,.decompte-table textarea { width: 100%; min-width: 10rem; }
.decompte-table .decompte-minutes { min-width: 5rem; width: 5rem; }
.decompte-table td:nth-child(1) { min-width: 0; width: 2rem; text-align: center; }
.decompte-table td:nth-child(2) { min-width: 15rem; }
.decompte-table td:nth-child(3) { min-width: 19rem; }
.contrat-reglages,.decompte-historique { margin-top: 1rem; }
.contrat-reglages summary,.decompte-historique summary { cursor: pointer; }
.barre-facturation { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; padding: .85rem 1rem; }
.barre-facturation .resume-selection { font-weight: 600; margin-right: auto; }
.barre-facturation input[type="text"] { width: 12rem; }
.facture-historique + .facture-historique { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--bordure); }
.entete-facture-historique { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.entete-facture-historique .annuler-facture { margin-left: auto; }
.liste-facture-historique { margin: .4rem 0 0; padding-left: 1.2rem; color: var(--texte-doux); font-size: .85rem; }
@media (max-width: 800px) {
    .decompte-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .formulaire-periode { grid-template-columns: 1fr; }
    .projet-client-select { align-items: flex-start; flex-direction: column; }
    .decompter-forfait { font-size: 0; padding: .42rem; }
    .decompter-forfait::after { content: '−'; font-size: .9rem; }
    .barre-facturation .resume-selection { margin-right: 0; width: 100%; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond-page:     #0e1013;
        --fond:          #17191f;
        --fond-doux:     #1e2128;
        --bordure:       #292d36;
        --bordure-forte: #3a404b;
        --texte:         #e8eaee;
        --texte-doux:    #98a1ae;
        --accent:        #8b85f5;
        --accent-fort:   #a29bff;
        --accent-texte:  #12141a;
        --accent-doux:   #23233c;
        --danger:        #ff9c92;
        --danger-fond:   #2a1614;
        --succes:        #5fd39a;
        --succes-fond:   #10241c;

        --ombre:       0 1px 2px rgba(0, 0, 0, .5);
        --ombre-levee: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .45);
        --ombre-haute: 0 16px 48px rgba(0, 0, 0, .6);
    }
}

/* Le bouton de thème force la valeur : ces règles doivent l'emporter sur la
 * préférence système, dans les deux sens. */
:root[data-theme="light"] {
    --fond-page: #f4f5f8; --fond: #ffffff; --fond-doux: #f2f4f7;
    --bordure: #e4e7ec; --bordure-forte: #cfd4dc;
    --texte: #16181d; --texte-doux: #667085;
    --accent: #4f46e5; --accent-fort: #4338ca;
    --accent-texte: #ffffff; --accent-doux: #eef0fe;
    --danger: #b42318; --danger-fond: #fef3f2;
    --succes: #067647; --succes-fond: #ecfdf3;
    --ombre:       0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --ombre-levee: 0 2px 4px rgba(16, 24, 40, .05), 0 8px 20px rgba(16, 24, 40, .08);
    --ombre-haute: 0 16px 48px rgba(16, 24, 40, .18);
}

:root[data-theme="dark"] {
    --fond-page: #0e1013; --fond: #17191f; --fond-doux: #1e2128;
    --bordure: #292d36; --bordure-forte: #3a404b;
    --texte: #e8eaee; --texte-doux: #98a1ae;
    --accent: #8b85f5; --accent-fort: #a29bff;
    --accent-texte: #12141a; --accent-doux: #23233c;
    --danger: #ff9c92; --danger-fond: #2a1614;
    --succes: #5fd39a; --succes-fond: #10241c;
    --ombre:       0 1px 2px rgba(0, 0, 0, .5);
    --ombre-levee: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .45);
    --ombre-haute: 0 16px 48px rgba(0, 0, 0, .6);
}

:root {
    --rayon:       12px;
    --rayon-petit:  8px;
    --rayon-grand: 18px;

    /* Le conteneur occupe 90 % de la fenêtre, borné : au-delà d'environ
     * 1 500 px une ligne de texte devient pénible à suivre, l'œil perd le
     * début de la ligne suivante. Les écrans qui gagnent vraiment à s'étaler —
     * calendrier, tableaux — lèvent cette borne eux-mêmes. */
    --largeur: min(90%, 94rem);

    /* Longueur de ligne confortable, pour les blocs qui sont du texte suivi et
     * non des données. */
    --mesure: 42rem;

    --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
              Arial, sans-serif;
    --police-chiffres: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* `hidden` n'est qu'un `display: none` de la feuille du navigateur, avec une
 * priorité nulle : la moindre règle de classe qui pose un `display` l'annule
 * sans prévenir. L'élément reste alors visible alors que l'attribut est bien
 * présent — symptôme déroutant, puisque le HTML paraît correct.
 *
 * Cette règle doit rester au-dessus de toutes les autres. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--police);
    font-size: 16px;
    line-height: 1.55;
    color: var(--texte);
    background: var(--fond-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* `text-wrap: balance` évite le mot orphelin en fin de titre. Détail, mais
 * c'est l'accumulation de ces détails qui fait qu'une interface paraît soignée
 * ou bâclée. Ignoré sans dommage par les navigateurs qui ne le connaissent
 * pas. */
h1, h2, h3 {
    letter-spacing: -.015em;
    text-wrap: balance;
}

h1 { font-size: 1.625rem; line-height: 1.25; margin: 0 0 .5rem; font-weight: 650; }
h2 { font-size: 1.1875rem; margin: 0 0 .6rem; font-weight: 600; }
h3 { font-size: 1rem; margin: 0 0 .4rem; font-weight: 600; }
p  { margin: 0 0 1rem; }

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

/* Les chiffres qu'on compare de haut en bas doivent s'aligner sur la virgule.
 * Sans chasse fixe, une colonne de montants ondule et devient illisible. */
.chiffre, .chiffres, .montant,
.tableau td:not(:first-child),
.chiffre-cle strong { font-variant-numeric: tabular-nums; }

/* Texte suivi : ramené à une longueur de ligne lisible même quand le
 * conteneur, lui, est large. */
.mesure { max-width: var(--mesure); }

/* Largeur des listes à une dimension — un titre à gauche, une durée à droite.
 *
 * Une page large sert les données denses : un tableau de montants, une grille
 * de projets, un calendrier. Elle dessert une simple liste : étalée sur
 * 1 300 px, le titre et sa durée se retrouvent aux deux bouts de l'écran et
 * l'œil doit traverser le vide pour les relier. Ces listes se bornent donc,
 * pendant que le reste de la page profite de la place. */
.liste-suivantes,
.liste-journal,
.liste-aujourdhui,
.liste-captures,
.liste-rappels,
.liste-canaux,
.liste-pieces,
.liste-imports,
.barres-projets,
.barres-jours,
.barres-heures,
.jour { max-width: 64rem; }

/* ---------------------------------------------------------------- barre --- */

/* Barre collante : sur des pages longues — un projet de soixante étapes, un
 * journal — reperdre la navigation en bas de page oblige à remonter pour rien.
 * Le flou d'arrière-plan garde le contenu perceptible dessous, ce qui aide à
 * comprendre qu'on n'a pas changé de page. */
.barre {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .6rem clamp(1rem, 5vw, 2rem);
    border-bottom: 1px solid var(--bordure);
    background: color-mix(in srgb, var(--fond) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(12px);
}

/* Repli pour les navigateurs sans color-mix : mieux vaut une barre opaque
 * qu'une barre transparente au travers de laquelle le texte défile. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .barre { background: var(--fond); }
}

.marque {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 650;
    letter-spacing: -.02em;
    color: var(--texte);
    text-decoration: none;
    white-space: nowrap;
}

/* Le seul ornement de l'interface, et il est minuscule. Il donne un point
 * d'ancrage à l'œil dans le coin haut-gauche, là où on revient toujours. */
.marque-point {
    width: .55rem;
    height: .55rem;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-fort));
}

.nav {
    display: flex;
    gap: .15rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav::-webkit-scrollbar { display: none; }

.nav a {
    position: relative;
    padding: .4rem .7rem;
    font-size: .9375rem;
    white-space: nowrap;
    border-radius: var(--rayon-petit);
    color: var(--texte-doux);
    text-decoration: none;
    transition: color .12s ease, background-color .12s ease;
}

.nav a:hover { background: var(--fond-doux); color: var(--texte); }

/* L'onglet courant porte la couleur d'accent : ce n'est pas de l'ornement, il
 * répond à « où suis-je ». */
.nav a.actif { background: var(--accent-doux); color: var(--accent); font-weight: 550; }

.barre-fin { display: flex; align-items: center; gap: .25rem; flex: none; }
.en-ligne  { display: inline; margin: 0; }

/* -------------------------------------------------------------- contenu --- */

.contenu {
    width: var(--largeur);
    margin: 0 auto;
    padding: 2rem 0 4rem;
}

/* Les écrans de données respirent mieux sur toute la largeur disponible. Ils
 * lèvent la borne du conteneur en la posant eux-mêmes. */
body:has(.cal-mois) .contenu,
body:has(.cal-semaine) .contenu { --largeur: min(94%, 108rem); }

.centre {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.25rem;
}

.carte {
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.5rem;
}

.carte-connexion { width: 100%; max-width: 22rem; }
.carte-connexion h1 { margin-bottom: 0; }
.carte-connexion .discret { margin-bottom: 1.5rem; }

/* ---------------------------------------------------------- formulaires --- */

label {
    display: block;
    margin-bottom: .3rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--texte-doux);
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: .55rem .75rem;
    margin-bottom: 1rem;
    font: inherit;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    transition: border-color .12s ease, box-shadow .12s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-doux);
    outline: none;
}

input:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.bouton {
    padding: .55rem 1.1rem;
    font: inherit;
    font-weight: 550;
    color: var(--accent-texte);
    background: var(--accent);
    border: 1px solid transparent;
    border-radius: var(--rayon-petit);
    box-shadow: var(--ombre);
    cursor: pointer;
    transition: background-color .12s ease, transform .06s ease, box-shadow .12s ease;
}

.bouton:hover  { background: var(--accent-fort); box-shadow: var(--ombre-levee); }
.bouton:active { transform: translateY(1px); box-shadow: none; }
.bouton:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.bouton-large { width: 100%; }

.lien-bouton,
.bouton-icone {
    padding: .35rem .65rem;
    font: inherit;
    color: var(--texte-doux);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--rayon-petit);
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease;
}

.lien-bouton:hover,
.bouton-icone:hover { background: var(--fond-doux); color: var(--texte); }

.alerte {
    padding: .7rem .85rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    color: var(--danger);
    background: var(--danger-fond);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    border-left: 3px solid var(--danger);
    border-radius: var(--rayon-petit);
}

/* ------------------------------------------------------- état initial --- */

.vide { padding-top: 2rem; }

.etapes {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.etapes li {
    position: relative;
    padding: .4rem 0 .4rem 1.75rem;
    color: var(--texte-doux);
}

.etapes li::before {
    position: absolute;
    left: 0;
    content: "○";
}

.etapes .fait { color: var(--texte-doux); text-decoration: line-through; }
.etapes .fait::before { content: "✓"; color: var(--succes); text-decoration: none; }

.etapes .encours { color: var(--texte); font-weight: 500; }
.etapes .encours::before { content: "→"; color: var(--accent); }

/* ------------------------------------------------------------- projets --- */

.entete-page {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.entete-page h1 { margin: 0; }
.entete-page p  { margin: 0; }

.facultatif { font-weight: 400; opacity: .7; }

.formulaire-projet { margin-bottom: 1.5rem; padding: 1.25rem; }
.formulaire-projet .actions { display: flex; align-items: center; gap: .5rem; }

.liste-projets { list-style: none; margin: 0; padding: 0; }

.liste-projets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: .75rem;
}

.liste-projets li { margin: 0; }

.carte-projet {
    display: flex;
    align-items: center;
    gap: .85rem;
    height: 100%;
    padding: .95rem 1.1rem;
    color: inherit;
    text-decoration: none;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.carte-projet:hover {
    border-color: var(--bordure-forte);
    box-shadow: var(--ombre-levee);
    transform: translateY(-1px);
}

.carte-projet.fane  { opacity: .55; box-shadow: none; }

/* La couleur arrive en style en ligne depuis le projet : la pastille est le
 * seul endroit où l'application affiche une couleur choisie par l'utilisateur,
 * et c'est ce qui rend une liste de projets reconnaissable au coup d'œil. */
.pastille {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}

.carte-projet .corps { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.carte-projet .titre { font-weight: 500; }
.carte-projet .discret { font-size: .875rem; }

.progression { display: flex; align-items: center; gap: .6rem; flex: none; }

.jauge {
    display: block;
    width: 5rem;
    height: 6px;
    overflow: hidden;
    background: var(--fond-doux);
    box-shadow: inset 0 0 0 1px var(--bordure);
    border-radius: 999px;
}

.jauge > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-fort));
    border-radius: 999px;
    transition: width .25s ease;
}

.jauge.grande { width: 100%; height: 8px; }

.chiffre, .chiffres {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--texte-doux);
}

.archives { margin-top: 2rem; }
.archives summary { cursor: pointer; color: var(--texte-doux); margin-bottom: .75rem; }

/* --------------------------------------------------------------- arbre --- */

.resume {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1.5rem;
}

.arbre, .branche { list-style: none; margin: 0; padding: 0; }

/* Le plan est une liste à cocher : au-delà d'environ mille pixels, le titre
 * et son estimation se retrouvent aux deux extrémités de l'écran et l'œil doit
 * traverser le vide pour relier les deux. La page est large, l'arbre non. */
.arbre { max-width: 68rem; }

/* Le trait de rattachement rend la hiérarchie lisible d'un coup d'œil, sans
 * qu'il faille compter les indentations. */
.branche {
    margin-left: 1.15rem;
    padding-left: .85rem;
    border-left: 1px solid var(--bordure);
}

.noeud.replie > .branche { display: none; }

.ligne {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .12rem .25rem;
    border: 1px solid transparent;
    border-radius: var(--rayon-petit);
}

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

.poignee {
    padding: 0 .15rem;
    font-size: .85rem;
    line-height: 1;
    color: transparent;
    background: none;
    border: 0;
    cursor: grab;
}

.ligne:hover .poignee { color: var(--texte-doux); }

.plier, .plier-vide {
    width: 1.15rem;
    padding: 0;
    font-size: .75rem;
    color: var(--texte-doux);
    background: none;
    border: 0;
    cursor: pointer;
}

.plier-vide { cursor: default; }

.coche {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Le titre est un champ en permanence : pas de mode édition, pas de double
 * clic à deviner. On clique, on tape. */
.arbre input.titre {
    flex: 1;
    min-width: 0;
    padding: .2rem .3rem;
    margin: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--rayon-petit);
}

.arbre input.titre:hover { border-color: var(--bordure); }

.arbre input.titre:focus {
    background: var(--fond);
    border-color: var(--accent);
    outline: none;
}

.arbre input.estimation {
    width: 3.75rem;
    flex: none;
    padding: .2rem .3rem;
    margin: 0;
    font: inherit;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--texte-doux);
    text-align: right;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--rayon-petit);
}

.arbre input.estimation:hover { border-color: var(--bordure); }
.arbre input.estimation:focus { background: var(--fond); border-color: var(--accent); outline: none; }

/* Estimation d'un parent : somme calculée, donc non modifiable. Même gabarit
 * que le champ de saisie pour que la colonne reste alignée. */
.arbre .estimation.calculee {
    width: 3.75rem;
    flex: none;
    padding: .2rem .3rem;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--texte-doux);
    text-align: right;
    border: 1px solid transparent;
    cursor: default;
}

.avancement { display: flex; align-items: center; gap: .4rem; flex: none; }
.avancement .jauge { width: 3rem; }

.noeud.fait > .ligne > input.titre { color: var(--texte-doux); text-decoration: line-through; }

.supprimer {
    padding: 0 .35rem;
    font-size: 1.1rem;
    line-height: 1;
    color: transparent;
    background: none;
    border: 0;
    cursor: pointer;
}

.ligne:hover .supprimer { color: var(--texte-doux); }
.supprimer:hover { color: var(--danger); }

.note {
    margin: 0 0 .3rem 3.5rem;
    font-size: .875rem;
    color: var(--texte-doux);
}

.noeud.en-deplacement { opacity: .4; }
.noeud.survol > .ligne        { border-bottom-color: var(--accent); box-shadow: 0 2px 0 -1px var(--accent); }
.noeud.survol-dedans > .ligne { border-color: var(--accent); background: var(--fond-doux); }

.ajout-racine {
    margin-top: .75rem;
    padding: .4rem .7rem;
    font: inherit;
    color: var(--texte-doux);
    background: none;
    border: 1px dashed var(--bordure);
    border-radius: var(--rayon-petit);
    cursor: pointer;
}

.ajout-racine:hover { color: var(--texte); border-color: var(--accent); }

.aide { margin-top: 2rem; font-size: .8125rem; }
.aide strong { font-weight: 600; color: var(--texte); }

/* -------------------------------------------------------------- import --- */

.depot { position: relative; }

.depot textarea {
    width: 100%;
    padding: .8rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    resize: vertical;
}

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

.depot-indice {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    margin: 0;
    padding: .15rem .5rem;
    font-size: .75rem;
    color: var(--texte-doux);
    background: var(--fond-doux);
    border-radius: var(--rayon-petit);
    pointer-events: none;
}

.depot.survol textarea   { border-color: var(--accent); background: var(--fond-doux); }
.depot.survol .depot-indice { color: var(--accent); }

.ligne-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.choix-projet { display: flex; align-items: center; gap: .5rem; margin: 0; }
.choix-projet span { font-size: .875rem; color: var(--texte-doux); }

select {
    padding: .4rem .5rem;
    font: inherit;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
}

#apercu { margin-top: 2rem; }

.resume-import {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    font-size: .9375rem;
    background: var(--fond-doux);
    border-radius: var(--rayon);
}

.avertissements {
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .875rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.avertissements ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.avertissements li { margin-bottom: .25rem; color: var(--texte-doux); }
.avertissements summary { cursor: pointer; color: var(--texte-doux); }

/* Les points « à vérifier » sont les seuls à porter la couleur d'alerte. Les
 * remarques restent repliées : soixante lignes d'information dépliées d'office
 * noieraient les deux qui comptent. */
.avertissements.attention {
    color: var(--danger);
    background: var(--danger-fond);
    border-color: currentColor;
}

.avertissements.attention li { color: inherit; }

.apercu-arbre, .apercu-arbre ul { list-style: none; margin: 0; padding: 0; }

.apercu-arbre ul {
    margin-left: 1rem;
    padding-left: .85rem;
    border-left: 1px solid var(--bordure);
}

.apercu-arbre li { padding: .15rem 0; }
.apercu-arbre li.fait .titre-apercu { color: var(--texte-doux); text-decoration: line-through; }

.marque-apercu { display: inline-block; width: 1.2rem; color: var(--texte-doux); }
.titre-apercu  { margin-right: .5rem; }

.apercu-arbre .meta {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--texte-doux);
}

.etiquette {
    padding: .05rem .4rem;
    margin-left: .35rem;
    font-size: .75rem;
    color: var(--texte-doux);
    background: var(--fond-doux);
    border: 1px solid var(--bordure);
    border-radius: 999px;
}

.etiquette.echeance { color: var(--danger); border-color: currentColor; }

.apercu-arbre .note {
    margin: .1rem 0 .3rem 1.2rem;
    font-size: .8125rem;
    color: var(--texte-doux);
}

.liste-imports { list-style: none; margin: 0; padding: 0; }

.liste-imports li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--bordure);
}

/* ---------------------------------------------------------- maintenant --- */

/* Une seule tâche à l'écran, en grand. Tout le reste est replié : c'est le
 * principe directeur de l'outil, pas une contrainte de mise en page. */

/* Une seule tâche, en grand, sur une largeur qui reste embrassable d'un
 * regard : c'est l'écran où la largeur ne doit surtout PAS être remplie. */
.sprint, .prochaine { max-width: 52rem; padding-top: 1.5rem; }

.sprint-projet {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    font-size: .9375rem;
}

.sprint-projet a { color: var(--texte-doux); text-decoration: none; }
.sprint-projet a:hover { color: var(--texte); }

.sprint-tache {
    font-size: 1.75rem;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.reprise-note {
    padding: .6rem .8rem;
    margin-bottom: 1.25rem;
    font-size: .9375rem;
    color: var(--texte-doux);
    background: var(--fond-doux);
    border-left: 3px solid var(--bordure);
    border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}

.minuteur {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin: 1.5rem 0;
}

.temps {
    font-size: 3.5rem;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.02em;
}

/* Dépassement : la couleur d'alerte, mais sans clignotement. Le but est de le
 * remarquer, pas de se faire houspiller. */
.minuteur.depasse .temps { color: var(--danger); }

.minuteur.fini { animation: pulsation 1.2s ease-out 3; }

@keyframes pulsation {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

.sprint-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.bouton-doux {
    color: var(--texte);
    background: var(--fond-doux);
    border-color: var(--bordure);
}

.bouton-doux:hover { border-color: var(--accent); filter: none; }

.aide-demarrage { font-size: .875rem; }

.etiquette-note {
    display: block;
    margin-bottom: .3rem;
    font-size: .875rem;
    color: var(--texte-doux);
}

#reprise {
    width: 100%;
    padding: .6rem .7rem;
    font: inherit;
    font-size: .9375rem;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    resize: vertical;
}

#reprise:focus { border-color: var(--accent); outline: none; }

.enregistre { min-height: 1.2em; margin: .25rem 0 0; font-size: .8125rem; }

.ensuite { margin-top: 3rem; }
.ensuite summary { cursor: pointer; color: var(--texte-doux); }

.liste-suivantes { list-style: none; margin: .75rem 0 0; padding: 0; }

.liste-suivantes li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--bordure);
}

.liste-suivantes .titre { flex: 1; }
.liste-suivantes .meta,
.liste-journal .meta {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--texte-doux);
}

/* -------------------------------------------------------------- journal --- */

.jour { margin-bottom: 2rem; }

.jour h2 {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding-bottom: .3rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--bordure);
}

.jour h2 .discret { font-size: .875rem; font-weight: 400; }

.liste-journal { list-style: none; margin: 0 0 .75rem; padding: 0; }

.liste-journal li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .2rem 0;
}

.liste-journal .titre { flex: 1; }
.liste-journal a { color: var(--texte-doux); }
.liste-journal.sessions { opacity: .75; font-size: .9375rem; }

.marque-apercu.succes { color: var(--succes); }

.tableau {
    width: 100%;
    margin-top: 1rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9375rem;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    overflow: hidden;
}

.tableau th, .tableau td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--bordure); }
.tableau tr:last-child td { border-bottom: 0; }
.tableau th { font-weight: 550; font-size: .8125rem; color: var(--texte-doux); background: var(--fond-doux); }
/* L'en-tête suit l'alignement de sa colonne. Sans cela, « TVA » se pose à
 * gauche d'une colonne de montants alignés à droite, et l'œil ne sait plus
 * quel titre va avec quels chiffres. */
.tableau td:not(:first-child),
.tableau th:not(:first-child) { text-align: right; }
.tableau tbody tr:hover td { background: var(--fond-doux); }
.tableau .discret { display: block; font-size: .8125rem; }

.ecart-haut { color: var(--danger); }
.ecart-bas  { color: var(--succes); }

.calibrage p { margin: .75rem 0; font-size: .875rem; }

/* -------------------------------------------------------------- capture --- */

kbd {
    padding: .05rem .3rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125em;
    background: var(--fond-doux);
    border: 1px solid var(--bordure);
    border-radius: 4px;
}

.pastille-compte {
    display: inline-block;
    min-width: 1.15rem;
    padding: 0 .3rem;
    margin-left: .2rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.15rem;
    text-align: center;
    color: var(--accent-texte);
    background: var(--accent);
    border-radius: 999px;
}

.capture-fond {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: 12vh 1rem 0;
    background: rgba(0, 0, 0, .35);
}

.capture-boite {
    width: 100%;
    max-width: 34rem;
    height: fit-content;
    padding: 1rem;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}

.capture-boite textarea {
    width: 100%;
    padding: .6rem .7rem;
    font: inherit;
    font-size: 1rem;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    resize: none;
}

.capture-boite textarea:focus { border-color: var(--accent); outline: none; }

.capture-pied {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .6rem;
    font-size: .8125rem;
}

.capture-pied .discret:first-child { flex: 1; }
.capture-etat { min-width: 4rem; }

/* ---------------------------------------------------------------- inbox --- */

.liste-captures { list-style: none; margin: 0; padding: 0; }

.liste-captures li {
    padding: .9rem 1rem;
    margin-bottom: .75rem;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.liste-captures .contenu { margin: 0 0 .7rem; }

.liste-captures .tri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.liste-captures .date { margin: .5rem 0 0; font-size: .75rem; }

/* ----------------------------------------------------------- aujourd'hui --- */

.liste-aujourdhui { list-style: none; margin: 1rem 0 0; padding: 0; }

.liste-aujourdhui li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .3rem;
    border-bottom: 1px solid var(--bordure);
}

.liste-aujourdhui .titre { flex: 1; }
.liste-aujourdhui li.fait .titre { color: var(--texte-doux); text-decoration: line-through; }
.liste-aujourdhui a { text-decoration: none; }
.liste-aujourdhui.semaine { opacity: .8; }

.retirer {
    padding: 0 .35rem;
    font-size: 1.1rem;
    line-height: 1;
    color: transparent;
    background: none;
    border: 0;
    cursor: pointer;
}

.liste-aujourdhui li:hover .retirer { color: var(--texte-doux); }
.retirer:hover { color: var(--danger); }

/* Étiquette d'horizon dans l'arbre : discrète, elle ne doit pas concurrencer
 * le titre de l'étape. */
.horizon { flex: none; }

/* ----------------------------------------------------------- calendrier --- */

.cal-nav { display: flex; align-items: center; gap: .25rem; }
.cal-nav .actif { background: var(--bordure); color: var(--texte); }

.cal-mois {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--bordure);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
}

.cal-entete {
    padding: .4rem;
    font-size: .75rem;
    text-align: center;
    color: var(--texte-doux);
    background: var(--fond-doux);
}

.cal-case {
    min-height: 6.5rem;
    padding: .3rem;
    background: var(--fond);
}

.cal-case.hors { background: var(--fond-doux); }
.cal-case.hors .numero { opacity: .45; }
.cal-case.aujourdhui { box-shadow: inset 0 0 0 2px var(--accent); }

.cal-jour {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .25rem;
}

.cal-jour .numero { font-size: .8125rem; font-weight: 500; }

/* La densité du mois est portée par l'opacité du temps travaillé : plus la
 * journée a été chargée, plus le chiffre ressort. Aucun jour n'est marqué
 * « vide » — l'absence se lit d'elle-même, elle n'a pas à être soulignée. */
.duree-jour {
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.cal-pastille {
    display: block;
    padding: .05rem .3rem;
    margin-bottom: .12rem;
    overflow: hidden;
    font-size: .6875rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    border-radius: 3px;
}

.cal-pastille.echeance  { color: var(--danger); background: var(--danger-fond); }
.cal-pastille.echeance.fait { color: var(--texte-doux); background: var(--fond-doux); text-decoration: line-through; }
.cal-pastille.evenement { color: var(--texte); background: var(--fond-doux); }
.cal-pastille.creneau   { color: var(--texte-doux); border-left: 3px solid; background: var(--fond-doux); }

/* --- vue semaine --- */

.cal-semaine {
    display: grid;
    grid-template-columns: 3rem repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--bordure);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
}

.cal-heures, .cal-colonne { background: var(--fond); }

.cal-heures { padding-top: 2.35rem; }

.cal-heure {
    position: relative;
    height: 3rem;
    font-size: .6875rem;
    color: var(--texte-doux);
}

.cal-heure span { position: absolute; top: -.5em; right: .3rem; }

.cal-colonne.aujourdhui { background: var(--fond-doux); }

.cal-colonne-entete {
    padding: .35rem;
    font-size: .75rem;
    text-align: center;
    color: var(--texte-doux);
    border-bottom: 1px solid var(--bordure);
}

.cal-colonne-entete strong { display: block; font-size: .9375rem; color: var(--texte); }

.cal-piste { position: relative; }

.cal-ligne-heure { height: 3rem; border-bottom: 1px solid var(--bordure); opacity: .5; }

/* Un bloc est positionné à la minute : 3rem par heure, donc 0.05rem par
 * minute. Le calcul vit dans le CSS pour que le gabarit reste du HTML simple. */
.cal-bloc {
    position: absolute;
    left: 2px;
    right: 2px;
    top: calc(var(--debut) * 0.05rem);
    height: calc(var(--duree) * 0.05rem);
    min-height: .9rem;
    padding: .05rem .25rem;
    overflow: hidden;
    font-size: .6875rem;
    line-height: 1.25;
    border-radius: 3px;
}

/* Le réel est plein, le prévu n'est qu'un contour : d'un coup d'œil on voit
 * ce qui a eu lieu et ce qui n'était qu'une intention. */
.cal-bloc.reel { color: #fff; }

.cal-bloc.prevu {
    right: 40%;
    color: var(--texte-doux);
    background: transparent;
    border: 1px dashed;
}

.cal-bloc.rdv {
    color: var(--texte);
    background: var(--fond-doux);
    border: 1px solid var(--bordure);
}

.cal-pied { padding: .25rem; border-top: 1px solid var(--bordure); }

.legende { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; font-size: .8125rem; }
.puce { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; vertical-align: -1px; }
.puce.reel  { background: var(--accent); }
.puce.prevu { border: 1px dashed var(--texte-doux); }
.puce.rdv   { background: var(--fond-doux); border: 1px solid var(--bordure); }

.url-flux {
    width: 100%;
    max-width: 30rem;
    padding: .2rem .35rem;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    color: var(--texte-doux);
    background: var(--fond-doux);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
}

#flux .ligne-actions { flex-wrap: wrap; gap: .6rem; }
#flux label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-weight: 400; }

@media (max-width: 50rem) {
    /* La grille hebdomadaire n'a pas de sens sur un écran étroit : sept
     * colonnes de deux centimètres ne se lisent pas. */
    .cal-semaine { display: block; overflow-x: auto; }
    .cal-mois .cal-case { min-height: 4.5rem; }
    .cal-pastille { font-size: .625rem; }
}

/* -------------------------------------------------------------- rappels --- */

/* Le bandeau se place sous la navigation, pleine largeur, sans rien recouvrir.
 * Une fenêtre modale obligerait à s'en occuper immédiatement — or un rappel
 * arrive presque toujours au milieu d'autre chose. */
.bandeau-rappels {
    padding: .5rem 0;
    background: var(--danger-fond);
    border-bottom: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}

.bandeau-rappels .rappel {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: var(--largeur);
    margin: 0 auto;
    padding: .15rem 0;
}

.bandeau-rappels .corps { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1; }
.bandeau-rappels .icone { flex: none; }

.etat-canaux { margin-bottom: 1.5rem; }
.etat-canaux h2 { margin-bottom: .75rem; }

.liste-canaux { list-style: none; margin: 0 0 1rem; padding: 0; }

.liste-canaux li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--bordure);
}

.liste-canaux .discret { flex: 1; font-size: .875rem; }

.badge {
    padding: .05rem .45rem;
    font-size: .75rem;
    color: var(--texte-doux);
    background: var(--fond-doux);
    border: 1px solid var(--bordure);
    border-radius: 999px;
}

.badge.ok { color: var(--succes); border-color: currentColor; }

.liste-rappels { list-style: none; margin: 1rem 0 0; padding: 0; }

.liste-rappels li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--bordure);
}

.liste-rappels .corps { display: flex; flex-direction: column; flex: 1; }
.liste-rappels .corps .discret { font-size: .8125rem; }
.liste-rappels li.inactif { opacity: .5; }

input[type="datetime-local"] {
    padding: .4rem .5rem;
    font: inherit;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
}

.carte h2:first-child { margin-top: 0; }
.carte + .carte { margin-top: 1.5rem; }

/* ------------------------------------------------------- pièces jointes --- */

.panneau-pieces { margin-top: 2rem; }

/* Le dépôt est signalé sur toute la page, et la ligne visée est surlignée :
 * sans ce retour, impossible de savoir si le fichier ira sur l'étape ou sur
 * le projet — et la différence compte. */
.panneau-pieces.survol { outline: 2px dashed var(--accent); outline-offset: 6px; }

.ligne.cible-fichier {
    background: var(--fond-doux);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.liste-pieces { list-style: none; margin: .75rem 0; padding: 0; }

.liste-pieces li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--bordure);
}

.liste-pieces .icone { flex: none; }
.liste-pieces .corps { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.liste-pieces .corps a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-pieces .corps .discret { font-size: .8125rem; }
.liste-pieces .supprimer-piece { font-size: 1.1rem; line-height: 1; }

.panneau-pieces .ligne-actions { flex-wrap: wrap; }
.panneau-pieces input[type="url"] { flex: 1; min-width: 14rem; margin: 0; }
.panneau-pieces input[type="text"] { width: 12rem; margin: 0; }

/* Lecture d'un email : le corps garde ses retours a la ligne, ce sont eux qui
 * rendent une citation ou une signature lisible. */
.email-complet {
    width: 100%;
    padding: .75rem;
    margin: .5rem 0 .25rem;
    background: var(--fond-doux);
    border-left: 3px solid var(--bordure);
    border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}

.email-entetes, .email-corps {
    margin: 0;
    font-family: inherit;
    font-size: .875rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.email-entetes {
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    color: var(--texte-doux);
    border-bottom: 1px solid var(--bordure);
}

.email-complet .discret { margin: .5rem 0; font-size: .8125rem; }

.lien-email {
    padding: 0;
    font: inherit;
    color: var(--accent);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

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

/* ---------------------------------------------------------------- revue --- */

.grille-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .85rem;
    margin-bottom: 2rem;
}

.chiffre-cle {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 1rem 1.1rem;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.chiffre-cle strong {
    font-size: 1.625rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.chiffre-cle span { font-size: .8125rem; color: var(--texte-doux); }
.chiffre-cle > span:first-of-type { color: var(--texte); font-weight: 500; }
.chiffre-cle .discret { font-size: .75rem; }

.chiffre-cle .valeur-nette {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin-top: .6rem;
    padding-top: .55rem;
    border-top: 1px solid var(--bordure);
    color: var(--texte);
}

.chiffre-cle .valeur-nette b {
    font-family: var(--police-chiffres);
    font-size: 1.05rem;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.chiffre-cle .valeur-nette.net-indisponible {
    color: var(--texte-doux);
    font-weight: 600;
}

.revue-section, section > h2 { margin-top: 2rem; }
section > h2:first-child { margin-top: 0; }

/* --- barres par jour --- */

.barres-jours {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .4rem;
    align-items: end;
    height: 9rem;
    margin: 1rem 0;
}

.barre-jour {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.barre-jour .colonne {
    width: 100%;
    max-width: 3rem;
    background: var(--accent);
    border-radius: 4px 4px 0 0;
    transition: height .2s ease;
}

/* Un jour sans activité garde sa place mais reste vide : le marquer d'une
 * couleur en ferait un manquement, ce qu'il n'est pas. */
.barre-jour .colonne[style*="height: 0%"] { background: var(--bordure); height: 2px !important; }

.etiquette-jour { margin-top: .3rem; font-size: .75rem; color: var(--texte-doux); }
.valeur-jour { font-size: .6875rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; }

/* --- barres par projet --- */

.barres-projets { list-style: none; margin: 1rem 0; padding: 0; }

.barres-projets li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .3rem 0;
}

.barres-projets .nom { width: 9rem; flex: none; overflow: hidden; text-overflow: ellipsis;
                       white-space: nowrap; color: inherit; text-decoration: none; }
.barres-projets .nom:hover { color: var(--accent); }

.barres-projets .piste { flex: 1; height: 1.1rem; background: var(--fond-doux); border-radius: 4px; overflow: hidden; }
.barres-projets .piste > span { display: block; height: 100%; border-radius: 4px; }
.barres-projets .meta { width: 4rem; flex: none; text-align: right; }

/* --- barres par heure --- */

.barres-heures {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    gap: 2px;
    align-items: end;
    height: 5rem;
    margin: 1rem 0;
}

.barre-heure { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.barre-heure .colonne { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .8; }
.etiquette-heure { margin-top: .2rem; font-size: .625rem; color: var(--texte-doux); }

.facteur { font-size: 1.05rem; }
.facteur strong { font-size: 1.35rem; }

/* La suppression reste en retrait : dans la quasi-totalite des cas c'est
 * l'archivage qu'on veut, et un projet efface emporte son historique. */
.lien-bouton.danger { color: var(--texte-doux); }
.lien-bouton.danger:hover { color: var(--danger); background: var(--danger-fond); }

input[type="url"] {
    padding: .4rem .5rem;
    font: inherit;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
}

/* ------------------------------------------------- dépôt d'un export --- */

/* Variante « zone de dépôt » : ici il n'y a pas de zone de texte, donc la
 * bordure et l'indice ne peuvent pas s'appuyer dessus comme sur /import. */
.depot-archive {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 2.5rem 1rem;
    text-align: center;
    border: 2px dashed var(--bordure);
    border-radius: var(--rayon);
}

.depot-archive .depot-indice {
    position: static;
    padding: 0;
    font-size: 1rem;
    background: none;
}

.depot-archive p { margin: 0; }
.depot-archive label { cursor: pointer; }
.depot-archive.survol { border-color: var(--accent); background: var(--fond-doux); }
.depot-archive.survol .depot-indice { color: var(--accent); }

.etapes-import { margin: 1rem 0; padding-left: 1.25rem; }
.etapes-import li { margin-bottom: .35rem; }
.etapes-import li span { color: var(--texte-doux); }

/* L'étape en cours reste visiblement inachevée : sans ce contraste, une étape
 * longue passe pour une étape terminée et on ferme l'onglet trop tôt. */
.etapes-import li.en-cours { opacity: .6; }
.etapes-import li.en-cours span::after { content: ' ⋯'; }
.etapes-import li.echec strong { color: var(--danger); }

.succes {
    padding: .6rem .75rem;
    font-size: .9rem;
    color: var(--succes);
    border: 1px solid currentColor;
    border-radius: var(--rayon-petit);
}

.alerte-inline { color: var(--danger); }

.journal-depot { margin-top: .25rem; font-size: .8125rem; }
.journal-depot summary { cursor: pointer; color: var(--texte-doux); }
.journal-depot ul { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--texte-doux); }

/* Classe supplémentaire, pour ne pas remettre en page la liste des imports
 * Markdown, qui tient sur une ligne. */
.liste-imports.depots .corps { display: flex; flex-direction: column; gap: .15rem; }
.liste-imports.depots li { align-items: flex-start; padding: .6rem 0; }

/* =========================================================== mobile === */

/* Barre du bas — masquée sur grand écran, où la navigation du haut suffit. */

.nav-pouce, .feuille-fond { display: none; }

@media (max-width: 60rem) {

    /* --- navigation ------------------------------------------------------ */

    /* Les dix liens du haut ne tiennent pas sur un téléphone. Ils y sont
     * remplacés par une barre du bas : à portée du pouce, et qui ne bouge pas
     * quand la page défile. */
    .barre .nav { display: none; }
    .barre { gap: .5rem; justify-content: space-between; }

    .nav-pouce {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        display: flex;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: color-mix(in srgb, var(--fond) 92%, transparent);
        backdrop-filter: saturate(1.6) blur(12px);
        border-top: 1px solid var(--bordure);
    }

    .nav-pouce > a,
    .nav-pouce > button {
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .1rem;
        /* 3,25rem = 52 px : au-dessus des 44 px en deçà desquels une cible
         * devient pénible à viser au pouce. */
        min-height: 3.25rem;
        padding: .35rem .15rem;
        font: inherit;
        font-size: .625rem;
        color: var(--texte-doux);
        text-decoration: none;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .nav-pouce .glyphe { font-size: 1.05rem; line-height: 1.1; }
    .nav-pouce .etiquette-pouce { letter-spacing: -.01em; }

    .nav-pouce .actif { color: var(--accent); }

    /* Le trait au-dessus de l'onglet courant : sur une barre du bas, une
     * pastille de fond mangerait la place du libellé. */
    .nav-pouce .actif::before {
        content: "";
        position: absolute;
        top: 0;
        width: 1.75rem;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: var(--accent);
    }

    .nav-pouce .pastille-compte {
        position: absolute;
        top: .3rem;
        left: 50%;
        margin-left: .35rem;
    }

    /* La barre du bas recouvrirait la fin de page sans cette réserve. */
    .contenu { padding-bottom: 5.5rem; }

    /* --- feuille « Plus » ------------------------------------------------ */

    .feuille-fond {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: flex;
        align-items: flex-end;
        background: rgba(0, 0, 0, .4);
    }

    .feuille {
        width: 100%;
        padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
        background: var(--fond);
        border-radius: var(--rayon-grand) var(--rayon-grand) 0 0;
        box-shadow: var(--ombre-haute);
        animation: monte .18s ease-out;
    }

    @keyframes monte {
        from { transform: translateY(12%); opacity: .6; }
        to   { transform: none; opacity: 1; }
    }

    .feuille-liens { list-style: none; margin: 0 0 .5rem; padding: 0; }

    .feuille-liens a {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .8rem .75rem;
        color: var(--texte);
        text-decoration: none;
        border-radius: var(--rayon-petit);
    }

    .feuille-liens a.actif { color: var(--accent); background: var(--accent-doux); }
    .feuille-liens .glyphe { width: 1.25rem; text-align: center; color: var(--texte-doux); }
    .feuille-liens a.actif .glyphe { color: inherit; }

    .feuille-pied {
        display: flex;
        justify-content: space-between;
        gap: .5rem;
        padding-top: .5rem;
        border-top: 1px solid var(--bordure);
    }

    /* --- densité générale ------------------------------------------------ */

    .contenu { width: 94%; padding-top: 1.25rem; }
    .barre   { padding: .5rem 3vw; }

    h1 { font-size: 1.375rem; }

    /* Les en-têtes de page portent souvent un titre et deux ou trois boutons :
     * côte à côte sur un téléphone, tout devient illisible. */
    .entete-page { flex-direction: column; align-items: stretch; gap: .6rem; margin-bottom: 1rem; }
    .entete-page .cal-nav,
    .entete-page .ligne-actions { flex-wrap: wrap; }

    .carte { padding: 1.1rem; }
    .liste-projets { grid-template-columns: 1fr; }

    /* Les tableaux de chiffres défilent plutôt que de se tasser. */
    .tableau { display: block; overflow-x: auto; white-space: nowrap; }
    .tableau .discret { white-space: normal; }

    /* Cibles tactiles : les boutons discrets du bureau sont trop petits pour
     * un doigt. */
    .lien-bouton, .bouton-icone { padding: .5rem .7rem; }
    .bouton { padding: .65rem 1.1rem; }

    /* Les actions qui n'apparaissent qu'au survol n'apparaîtraient jamais :
     * il n'y a pas de survol sur un écran tactile. */
    .supprimer, .retirer, .poignee { color: var(--texte-doux); }

    .capture-fond { padding-top: 6vh; }
    .grille-chiffres { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; }
    .chiffre-cle { padding: .8rem .9rem; }
    .chiffre-cle strong { font-size: 1.375rem; }

    .sprint-tache { font-size: 1.4rem; }
    .temps { font-size: 2.75rem; }

    .barres-projets .nom { width: 6rem; }
    .barres-heures { grid-template-columns: repeat(9, 1fr); }
}

/* Le survol n'existe pas sur un écran tactile : sans cette règle, la poignée
 * de déplacement et la croix de suppression restent invisibles même sur un
 * grand iPad. */
@media (hover: none) {
    .poignee, .supprimer, .retirer,
    .liste-pieces .supprimer-piece { color: var(--texte-doux); }
}

@media (max-width: 34rem) {
    /* Sur mobile, l'estimation et la barre d'avancement passent après le
     * titre : c'est lui qui doit rester lisible. */
    .arbre input.estimation,
    .arbre .estimation.calculee { width: 2.75rem; }
    .avancement .jauge { display: none; }
    .note { margin-left: 2rem; }

    .branche { margin-left: .5rem; padding-left: .5rem; }
    .marque { font-size: .9375rem; }
    .ligne-actions { flex-wrap: wrap; gap: .6rem; }
    .choix-projet { width: 100%; }
    .choix-projet select { flex: 1; }

    /* Le clavier iOS agrandit la page si le champ visé fait moins de 16 px.
     * Ce zoom n'est jamais annulé et laisse l'interface de travers. */
    input, select, textarea { font-size: 16px; }
}

/* Recherche universelle. */
.bouton-recherche {
    display: inline-flex; align-items: center; gap: .7rem; padding: .42rem .55rem .42rem .75rem;
    color: var(--texte-doux); border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
    background: var(--fond-doux); font: 500 .72rem/1 var(--police); cursor: pointer;
}
.bouton-recherche:hover { color: var(--texte); border-color: var(--accent); }
.bouton-recherche kbd { font-size: .58rem; }
.recherche-fond {
    position: fixed; z-index: 100; inset: 0; display: grid; place-items: start center;
    padding: min(14vh, 8rem) 1rem 1rem; background: rgba(3, 7, 14, .68); backdrop-filter: blur(10px);
}
.recherche-fond[hidden] { display: none; }
.recherche-boite {
    width: min(42rem, 100%); overflow: hidden; border: 1px solid var(--bordure-forte);
    border-radius: calc(var(--rayon) + .4rem); background: var(--fond); box-shadow: 0 2rem 7rem #0008, 0 0 3rem var(--halo);
}
.recherche-boite header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid var(--bordure); }
.recherche-boite header > span { color: var(--accent); font-size: 1.35rem; }
.recherche-boite input { margin: 0; padding: .35rem 0; border: 0; outline: 0; background: transparent; font-size: 1rem; box-shadow: none; }
.recherche-resultats { display: grid; gap: .25rem; max-height: min(56vh, 32rem); padding: .55rem; overflow-y: auto; }
.recherche-resultats > p { padding: 1.5rem; text-align: center; }
.recherche-resultats a { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: .7rem; padding: .7rem; color: var(--texte); border-radius: var(--rayon-petit); text-decoration: none; }
.recherche-resultats a:hover, .recherche-resultats a.actif { background: var(--accent-doux); box-shadow: inset 2px 0 0 var(--accent); }
.recherche-resultats a > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.recherche-resultats strong, .recherche-resultats small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche-resultats small { margin-top: .18rem; color: var(--texte-doux); }
.recherche-type { justify-self: start; padding: .25rem .42rem; color: var(--texte-doux); border-radius: 999px; background: var(--fond-doux); font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.recherche-type.task { color: var(--accent); background: var(--accent-doux); }
.recherche-boite footer { display: flex; gap: 1rem; padding: .55rem 1rem; color: var(--texte-doux); border-top: 1px solid var(--bordure); font-size: .62rem; }

/* Alertes et personnalisation finance. */
.finance-personnaliser { margin: -.7rem 0 1rem auto; width: fit-content; font-size: .72rem; }
.finance-personnaliser summary { color: var(--texte-doux); cursor: pointer; }
.finance-personnaliser > div { position: absolute; z-index: 7; right: max(1rem, calc((100vw - 92rem) / 2)); display: grid; gap: .45rem; min-width: 16rem; margin-top: .4rem; padding: .75rem; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); background: var(--fond); box-shadow: var(--ombre-levee); }
.finance-personnaliser label { display: flex; align-items: center; gap: .45rem; margin: 0; }
[data-finance-widget] { cursor: grab; }
[data-finance-widget].en-glisse { opacity: .45; transform: scale(.98); }
.liste-alertes-finance { display: grid; gap: .55rem; }
.alerte-finance { display: grid; grid-template-columns: 4px 1fr auto; align-items: center; gap: .8rem; padding: .8rem; color: var(--texte); text-decoration: none; }
.alerte-finance > div { display: flex; flex-direction: column; }
.alerte-signal { width: 4px; height: 2.5rem; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px var(--halo); }
.alerte-finance.attention .alerte-signal { background: #f59e0b; }
.alerte-finance.danger .alerte-signal { background: #ef6688; }

/* Scenarios et mouvements de tresorerie. */
.scenario-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.scenario-bouton { display: flex; align-items: flex-start; flex-direction: column; gap: .25rem; padding: .85rem; color: var(--texte); text-align: left; cursor: pointer; }
.scenario-bouton strong { color: var(--accent); font: 700 1.15rem/1.2 var(--police-chiffres); }
.scenario-bouton small { color: var(--texte-doux); }
.scenario-bouton.actif { border-color: var(--accent); background: linear-gradient(145deg, var(--accent-doux), var(--fond)); box-shadow: 0 0 1.5rem var(--halo); }
.projection-ajout summary { cursor: pointer; }
.projection-ajout[open] summary { margin-bottom: .8rem; }
.grille-mouvement-projection { display: grid; grid-template-columns: 1.4fr .8fr .9fr .7fr; align-items: end; gap: .65rem; }
.grille-mouvement-projection label { margin: 0; }
.grille-mouvement-projection input, .grille-mouvement-projection select { margin-top: .25rem; }
.grille-mouvement-projection .mouvement-note { grid-column: span 2; }
.liste-projection-evenements article:has(.supprimer-mouvement),
.liste-projection-evenements article:has(.modifier-echeance) { grid-template-columns: 5.5rem 5.7rem minmax(10rem, 1fr) auto auto; }
.ajustements-echeances > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .4rem 0; border-bottom: 1px solid var(--bordure); }
.projection-type.exceptionnel { color: #138a75; background: color-mix(in srgb, #23c7a6 14%, var(--fond)); }
.projection-type.depense { color: #b45f75; background: color-mix(in srgb, #ec668b 12%, var(--fond)); }

/* Rentabilite client. */
.rentabilite-clients { margin: 1rem 0 1.5rem; }
.rentabilite-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .65rem; }
.rentabilite-carte { display: grid; gap: .65rem; padding: .85rem; }
.rentabilite-carte header, .rentabilite-carte footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.rentabilite-carte footer { font-size: .66rem; color: var(--texte-doux); }
.rentabilite-barre { height: 4px; overflow: hidden; border-radius: 999px; background: var(--fond-doux); }
.rentabilite-barre i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-fort)); box-shadow: 0 0 8px var(--halo); }
.rentabilite-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.rentabilite-kpis span { display: flex; flex-direction: column; font-size: .62rem; color: var(--texte-doux); }
.rentabilite-kpis b { color: var(--texte); font: 650 .76rem/1.3 var(--police-chiffres); }
.rentabilite-carte.niveau-faible { border-color: color-mix(in srgb, #ef6688 40%, var(--bordure)); }

/* Preparation des factures maintenance et pilotage semaine. */
.facture-maintenance-prete { display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(18rem, 1.3fr) auto; align-items: center; gap: 1rem; margin-bottom: .7rem; padding: .85rem; border-color: color-mix(in srgb, var(--accent) 35%, var(--bordure)); }
.facture-maintenance-prete > div:first-child { display: flex; flex-direction: column; }
.facture-maintenance-prete > div:first-child strong { color: var(--accent); font: 700 1.15rem/1.4 var(--police-chiffres); }
.resume-facture { margin: 0; font-size: .72rem; }
.grille-pilotage-semaine { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .65rem; }
.grille-pilotage-semaine article { display: flex; align-items: flex-start; flex-direction: column; gap: .35rem; padding: .8rem; }
.pilotage-semaine { margin-top: 1.5rem; }

@media (max-width: 60rem) {
    .grille-mouvement-projection { grid-template-columns: 1fr 1fr; }
    .facture-maintenance-prete { grid-template-columns: 1fr; }
}
@media (max-width: 44rem) {
    .bouton-recherche span, .bouton-recherche kbd { display: none; }
    .bouton-recherche::before { content: "⌕"; font-size: 1rem; }
    .scenario-cartes { grid-template-columns: 1fr; }
    .grille-mouvement-projection { grid-template-columns: 1fr; }
    .grille-mouvement-projection .mouvement-note { grid-column: 1; }
    .recherche-boite footer { display: none; }
}

@media print {
    body:has(.facture-maintenance-prete) .barre,
    body:has(.facture-maintenance-prete) .nav-pouce,
    body:has(.facture-maintenance-prete) .entete-page,
    body:has(.facture-maintenance-prete) .onglets-clients,
    body:has(.facture-maintenance-prete) .formulaire-periode,
    body:has(.facture-maintenance-prete) .decompte-table,
    body:has(.facture-maintenance-prete) .facture-maintenance-prete .ligne-actions { display: none !important; }
    .facture-maintenance-prete { display: block; border: 0; }
    .resume-facture { width: 100%; min-height: 20rem; border: 0; }
}

/* Respecte le réglage système : certaines personnes sont gênées par les
 * animations, et l'outil n'en a besoin d'aucune pour fonctionner. */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------- finances --- */

.tableau .total td { border-top: 2px solid var(--bordure); }
.tableau td .discret { display: inline; font-size: .8125rem; margin-left: .35rem; }

.liste-rapprochement { list-style: none; margin: 1rem 0; padding: 0; }

.liste-rapprochement li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: .7rem .8rem;
    margin-bottom: .5rem;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

/* Les deux côtés d'un rapprochement se lisent en vis-à-vis : c'est la
 * comparaison qui permet de trancher, pas chaque ligne prise isolément. */
.liste-rapprochement .cote { display: flex; flex-direction: column; flex: 1; min-width: 12rem; }
.liste-rapprochement .cote .discret { font-size: .8125rem; }
.liste-rapprochement .cote .meta { font-size: .75rem; color: var(--texte-doux); }
.liste-rapprochement .fleche { flex: none; color: var(--texte-doux); }

.actions-rapprochement { display: flex; align-items: center; gap: .5rem; flex: none; }
.actions-rapprochement input { margin: 0; padding: .35rem .5rem; }

#table-completer input { margin: 0; padding: .3rem .4rem; text-align: right; }

/* ======================================================= NEXUS UI v2 ===
 * Une direction plus affirmee pour alphaPlanner : cockpit calme, profondeur
 * sombre et signaux lumineux precis. Les composants et leur semantique ne
 * changent pas ; cette couche constitue le nouveau langage visuel commun. */

:root[data-theme="dark"] {
    --fond-page:     #070b12;
    --fond:          #0d1420;
    --fond-doux:     #121d2b;
    --bordure:       rgba(137, 217, 255, .13);
    --bordure-forte: rgba(137, 217, 255, .26);
    --texte:         #eef7fb;
    --texte-doux:    #8495a7;
    --accent:        #64e6ff;
    --accent-fort:   #967dff;
    --accent-texte:  #041116;
    --accent-doux:   rgba(100, 230, 255, .11);
    --danger:        #ff8a9d;
    --danger-fond:   rgba(255, 89, 119, .09);
    --succes:        #5cf2bd;
    --succes-fond:   rgba(92, 242, 189, .09);
    --surface-verre: rgba(13, 20, 32, .78);
    --halo:          rgba(100, 230, 255, .16);
    --ombre:         0 1px 0 rgba(255, 255, 255, .025), 0 12px 32px rgba(0, 0, 0, .2);
    --ombre-levee:   0 0 0 1px rgba(100, 230, 255, .08), 0 18px 48px rgba(0, 0, 0, .34), 0 0 34px rgba(100, 230, 255, .06);
    --ombre-haute:   0 30px 90px rgba(0, 0, 0, .62), 0 0 0 1px rgba(100, 230, 255, .1);
}

:root[data-theme="light"] {
    --fond-page:     #edf3f5;
    --fond:          #f9fcfd;
    --fond-doux:     #e8f0f3;
    --bordure:       rgba(18, 76, 97, .12);
    --bordure-forte: rgba(18, 76, 97, .24);
    --texte:         #0d2230;
    --texte-doux:    #607785;
    --accent:        #087f9c;
    --accent-fort:   #6951d8;
    --accent-texte:  #ffffff;
    --accent-doux:   rgba(8, 127, 156, .1);
    --danger:        #c43155;
    --danger-fond:   rgba(196, 49, 85, .08);
    --succes:        #087e5b;
    --succes-fond:   rgba(8, 126, 91, .08);
    --surface-verre: rgba(249, 252, 253, .82);
    --halo:          rgba(8, 127, 156, .12);
    --ombre:         0 1px 0 rgba(255, 255, 255, .8), 0 12px 32px rgba(30, 70, 85, .07);
    --ombre-levee:   0 0 0 1px rgba(8, 127, 156, .08), 0 18px 48px rgba(30, 70, 85, .12), 0 0 30px rgba(8, 127, 156, .06);
    --ombre-haute:   0 30px 80px rgba(30, 70, 85, .2), 0 0 0 1px rgba(8, 127, 156, .1);
}

:root {
    --rayon: 16px;
    --rayon-petit: 10px;
    --rayon-grand: 24px;
    --police: Inter, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --police-titre: Bahnschrift, "Segoe UI Variable Display", "Segoe UI", sans-serif;
}

body {
    min-height: 100vh;
    background-color: var(--fond-page);
    background-image:
        radial-gradient(circle at 83% 8%, color-mix(in srgb, var(--accent-fort) 12%, transparent) 0, transparent 30rem),
        radial-gradient(circle at 36% 92%, var(--halo) 0, transparent 34rem);
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .26;
    background-image:
        linear-gradient(var(--bordure) 1px, transparent 1px),
        linear-gradient(90deg, var(--bordure) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black, transparent 75%);
}

h1, h2, h3 {
    font-family: var(--police-titre);
    letter-spacing: -.025em;
}

h1 {
    font-size: clamp(1.75rem, 2.3vw, 2.45rem);
    font-weight: 650;
}

a { color: var(--accent); }

::selection { color: var(--accent-texte); background: var(--accent); }

/* Les surfaces gagnent une bordure lumineuse tres fine et une profondeur
 * commune. Le verre reste suffisamment opaque pour les tableaux et formulaires. */
.carte,
.carte-projet,
.tableau,
.chiffre-cle,
.liste-captures li,
.liste-rapprochement li,
.capture-boite {
    background: linear-gradient(145deg, color-mix(in srgb, var(--fond) 96%, white 4%), var(--fond));
    border-color: var(--bordure);
    box-shadow: var(--ombre);
}

.carte-projet,
.chiffre-cle,
.liste-captures li {
    position: relative;
    overflow: hidden;
}

.carte-projet::before,
.chiffre-cle::before,
.liste-captures li::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), transparent 80%);
    opacity: .55;
}

.carte-projet { min-height: 5.25rem; padding: 1.15rem 1.25rem; }
.carte-projet:hover { border-color: var(--bordure-forte); box-shadow: var(--ombre-levee); transform: translateY(-3px); }
.carte-projet .titre { font-family: var(--police-titre); font-size: 1.05rem; letter-spacing: -.01em; }

.pastille {
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 3px var(--fond-doux), 0 0 12px currentColor;
}

.jauge { height: 5px; background: color-mix(in srgb, var(--fond-doux) 82%, transparent); box-shadow: inset 0 0 0 1px var(--bordure); }
.jauge > span { background: linear-gradient(90deg, var(--accent), var(--accent-fort)); box-shadow: 0 0 12px var(--halo); }

.bouton {
    position: relative;
    padding: .66rem 1.2rem;
    font-weight: 650;
    letter-spacing: .01em;
    background: linear-gradient(115deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-fort)));
    border: 1px solid color-mix(in srgb, var(--accent) 70%, white);
    box-shadow: 0 8px 24px var(--halo), inset 0 1px 0 rgba(255, 255, 255, .32);
}

.bouton:hover {
    background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent-fort));
    box-shadow: 0 12px 32px var(--halo), 0 0 0 1px var(--accent);
    transform: translateY(-1px);
}

.bouton-doux {
    color: var(--texte);
    background: var(--surface-verre);
    border-color: var(--bordure-forte);
    box-shadow: none;
}

.bouton-doux:hover { color: var(--accent); background: var(--accent-doux); }

.lien-bouton,
.bouton-icone {
    text-decoration: none;
    border-color: var(--bordure);
    background: color-mix(in srgb, var(--fond-doux) 58%, transparent);
}

.lien-bouton:hover,
.bouton-icone:hover { color: var(--accent); border-color: var(--bordure-forte); background: var(--accent-doux); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="datetime-local"],
select,
textarea,
#reprise,
.depot textarea,
.capture-boite textarea {
    color: var(--texte);
    background: color-mix(in srgb, var(--fond) 88%, transparent);
    border-color: var(--bordure-forte);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .015);
}

input:focus,
select:focus,
textarea:focus,
#reprise:focus,
.depot textarea:focus,
.capture-boite textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-doux), 0 0 24px var(--halo);
    outline: none;
}

.entete-page {
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--bordure);
}

.entete-page h1::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    margin-top: .65rem;
    background: linear-gradient(90deg, var(--accent), transparent);
    box-shadow: 0 0 12px var(--accent);
}

.resume-import {
    gap: 2rem;
    padding: 1rem 1.2rem;
    background: var(--surface-verre);
    border: 1px solid var(--bordure);
    box-shadow: var(--ombre);
}

.resume-import strong { color: var(--accent); font-size: 1.05rem; }

.etiquette,
.badge,
kbd {
    background: var(--accent-doux);
    border-color: var(--bordure-forte);
}

details > summary {
    font-family: var(--police-titre);
    font-weight: 600;
    letter-spacing: .01em;
}

.tableau { border-collapse: separate; background: var(--surface-verre); }
.tableau th { padding-top: .75rem; padding-bottom: .75rem; text-transform: uppercase; letter-spacing: .08em; background: var(--fond-doux); }
.tableau tbody tr:hover td { background: var(--accent-doux); }

.ligne { min-height: 2.3rem; transition: background .14s ease, border-color .14s ease; }
.ligne:hover { background: var(--accent-doux); border-color: var(--bordure); }
.branche { border-left-color: color-mix(in srgb, var(--accent) 24%, var(--bordure)); }

.liste-aujourdhui { display: grid; gap: .55rem; }
.liste-aujourdhui li {
    min-height: 3.25rem;
    padding: .7rem .8rem;
    background: var(--surface-verre);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    box-shadow: var(--ombre);
}
.liste-aujourdhui li:hover { border-color: var(--bordure-forte); background: var(--accent-doux); }

.cal-mois,
.cal-semaine { gap: 1px; background: var(--bordure-forte); border-color: var(--bordure-forte); box-shadow: var(--ombre); }
.cal-case,
.cal-heures,
.cal-colonne { background: color-mix(in srgb, var(--fond) 92%, transparent); }
.cal-entete { padding: .65rem; text-transform: uppercase; letter-spacing: .12em; }
.cal-case.aujourdhui { box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 22px var(--halo); }
.cal-nav .actif { color: var(--accent); background: var(--accent-doux); border-color: var(--accent); }

/* Maintenant devient le centre du cockpit : une seule action, dans une surface
 * genereuse, marquee par un liseret spectral. */
#maintenant { padding-top: clamp(1rem, 4vh, 3.5rem); }

.sprint,
.prochaine {
    position: relative;
    max-width: 61rem;
    padding: clamp(1.6rem, 4vw, 3.25rem);
    overflow: hidden;
    background:
        linear-gradient(135deg, var(--surface-verre), color-mix(in srgb, var(--fond) 92%, transparent)),
        var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre-levee);
}

.sprint::before,
.prochaine::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    width: 55%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-fort), transparent);
    box-shadow: 0 0 24px var(--accent);
}

.sprint::after,
.prochaine::after {
    content: "";
    position: absolute;
    right: -7rem;
    top: -8rem;
    width: 18rem;
    height: 18rem;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    box-shadow: 0 0 80px var(--halo);
    pointer-events: none;
}

.sprint-projet { margin-bottom: 1.15rem; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.sprint-tache { max-width: 46rem; margin-bottom: 1.75rem; font-size: clamp(2rem, 4.3vw, 4.4rem); line-height: 1.04; font-weight: 620; }
.temps { color: var(--accent); font-family: var(--police-chiffres); font-size: clamp(3.75rem, 8vw, 7rem); font-weight: 350; text-shadow: 0 0 35px var(--halo); }
.sprint-actions { position: relative; z-index: 1; gap: .75rem; }
.reprise-note { background: var(--fond-doux); border-left-color: var(--accent); }
.ensuite { max-width: 61rem; margin-top: 1.25rem; padding: .2rem .5rem; }

.capture-fond,
.feuille-fond { background: rgba(2, 5, 10, .7); backdrop-filter: blur(12px); }
.capture-boite { border-color: var(--bordure-forte); box-shadow: var(--ombre-haute); }

.carte-connexion {
    position: relative;
    max-width: 28rem;
    padding: 2.25rem;
    overflow: hidden;
    border-color: var(--bordure-forte);
    box-shadow: var(--ombre-haute);
}

.carte-connexion::before {
    content: "";
    position: absolute;
    inset: 0 10% auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-fort), transparent);
    box-shadow: 0 0 24px var(--accent);
}

.carte-connexion h1 { color: var(--accent); font-size: 2.25rem; }
.page-invite::after {
    content: "ALPHA // PERSONAL OPERATING SYSTEM";
    position: fixed;
    right: 1.5rem;
    bottom: 1.25rem;
    font-family: var(--police-chiffres);
    font-size: .65rem;
    letter-spacing: .18em;
    color: var(--texte-doux);
}

/* Navigation laterale sur les grands ecrans. */
@media (min-width: 60.001rem) {
    .barre {
        position: fixed;
        inset: 0 auto 0 0;
        width: 16.5rem;
        height: 100vh;
        flex-direction: column;
        align-items: stretch;
        gap: 1.6rem;
        padding: 1.5rem 1rem 1.25rem;
        background: var(--surface-verre);
        border: 0;
        border-right: 1px solid var(--bordure);
        box-shadow: 14px 0 45px rgba(0, 0, 0, .08);
        backdrop-filter: saturate(1.35) blur(22px);
    }

    .marque { gap: .75rem; padding: .25rem .4rem 1.1rem; border-bottom: 1px solid var(--bordure); }

    .marque-symbole {
        position: relative;
        display: grid;
        width: 2.1rem;
        height: 2.1rem;
        place-items: center;
        flex: none;
        border: 1px solid var(--bordure-forte);
        border-radius: 50%;
        box-shadow: inset 0 0 14px var(--halo), 0 0 18px var(--halo);
    }

    .marque-symbole::before {
        content: "";
        position: absolute;
        inset: .27rem;
        border: 1px solid var(--accent);
        border-right-color: transparent;
        border-radius: 50%;
        transform: rotate(-28deg);
    }

    .marque-point { width: .38rem; height: .38rem; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
    .marque-texte { display: flex; flex-direction: column; line-height: 1.05; }
    .marque-texte strong { font-family: var(--police-titre); font-size: 1.05rem; letter-spacing: .02em; }
    .marque-texte span { margin-top: .2rem; font-family: var(--police-chiffres); font-size: .62rem; font-weight: 400; letter-spacing: .18em; color: var(--texte-doux); text-transform: uppercase; }

    .nav { flex: none; flex-direction: column; gap: .25rem; overflow: visible; }
    .nav a { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid transparent; }
    .nav a:hover { background: var(--accent-doux); border-color: var(--bordure); }
    .nav a.actif { color: var(--accent); background: linear-gradient(90deg, var(--accent-doux), transparent); border-color: var(--bordure); box-shadow: inset 2px 0 0 var(--accent); }
    .nav-glyphe { width: 1.15rem; font-family: var(--police-chiffres); font-size: .82rem; text-align: center; color: var(--texte-doux); }
    .nav a.actif .nav-glyphe { color: var(--accent); text-shadow: 0 0 10px var(--accent); }

    .barre-fin { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--bordure); }
    .barre-fin .en-ligne { flex: 1; }
    .barre-fin .lien-bouton { width: 100%; }

    .contenu {
        width: min(calc(100% - 20rem), 94rem);
        margin-left: 18.25rem;
        margin-right: auto;
        padding: 3rem 0 5rem;
    }

    body:has(.cal-mois) .contenu,
    body:has(.cal-semaine) .contenu { --largeur: initial; width: calc(100% - 20rem); max-width: 108rem; }

    .bandeau-rappels { margin-left: 16.5rem; }
    .bandeau-rappels .rappel { width: min(calc(100% - 4rem), 94rem); }
}

/* Sur mobile, le cockpit se replie en bandeau et les cinq destinations
 * essentielles restent a portee du pouce. */
@media (max-width: 60rem) {
    .barre {
        position: sticky;
        inset: auto;
        height: auto;
        flex-direction: row;
        align-items: center;
        padding: .7rem 3vw;
        background: var(--surface-verre);
        border-bottom: 1px solid var(--bordure);
        backdrop-filter: saturate(1.35) blur(18px);
    }

    .marque { gap: .55rem; }
    .marque-symbole { position: relative; display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border: 1px solid var(--bordure-forte); border-radius: 50%; }
    .marque-symbole::before { content: ""; position: absolute; inset: .22rem; border: 1px solid var(--accent); border-right-color: transparent; border-radius: 50%; }
    .marque-point { width: .3rem; height: .3rem; background: var(--accent); box-shadow: 0 0 9px var(--accent); }
    .marque-texte { display: flex; align-items: baseline; gap: .18rem; }
    .marque-texte strong { font-family: var(--police-titre); }
    .marque-texte span { color: var(--texte-doux); }
    .nav-glyphe { display: none; }

    .nav-pouce {
        background: var(--surface-verre);
        border-top-color: var(--bordure);
        box-shadow: 0 -16px 40px rgba(0, 0, 0, .12);
        backdrop-filter: saturate(1.4) blur(20px);
    }

    .nav-pouce .actif { color: var(--accent); text-shadow: 0 0 14px var(--halo); }
    .nav-pouce .actif::before { height: 1px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
    .feuille { background: var(--fond); border: 1px solid var(--bordure-forte); border-bottom: 0; }

    .contenu { width: 92%; padding-top: 1.6rem; }
    .entete-page { align-items: stretch; }
    .sprint, .prochaine { padding: 1.45rem; border-radius: var(--rayon); }
    .sprint-tache { font-size: clamp(1.85rem, 9vw, 3rem); }
    .temps { font-size: clamp(3.2rem, 18vw, 5rem); }
    .page-invite::after { display: none; }
}

@media (max-width: 34rem) {
    .liste-aujourdhui li { flex-wrap: wrap; }
    .liste-aujourdhui .titre { min-width: calc(100% - 4.5rem); }
    .carte-connexion { padding: 1.5rem; }
}

/* =================================================== Evolutions produit === */

/* Journal : .succes sert aussi de message encadre ailleurs. Ici le symbole
 * reste un simple marqueur compact ; c'est cette collision qui creait les
 * grandes capsules verticales visibles sur la capture. */
.liste-journal .marque-apercu.succes {
    display: inline-grid;
    width: 1.55rem;
    height: 1.55rem;
    min-width: 1.55rem;
    padding: 0;
    place-items: center;
    font-size: .75rem;
    line-height: 1;
    color: var(--succes);
    background: var(--succes-fond);
    border: 1px solid color-mix(in srgb, var(--succes) 45%, transparent);
    border-radius: 50%;
}

.liste-journal li {
    min-height: 2.7rem;
    padding: .45rem .6rem;
    border-bottom-color: var(--bordure);
    border-radius: var(--rayon-petit);
}

.liste-journal li:hover { background: var(--accent-doux); }
.jour > h2 { display: flex; align-items: baseline; gap: .55rem; }
.jour > h2 .discret { font-family: var(--police-chiffres); font-size: .72rem; font-weight: 400; }

/* Fusion de projets. */
.panneau-fusion { margin-top: 1.25rem; }
.panneau-fusion summary { cursor: pointer; }
.panneau-fusion[open] summary { margin-bottom: .85rem; }
.panneau-fusion .ligne-actions { flex-wrap: wrap; margin-bottom: 0; }
.fusion-fleche { color: var(--accent); font-size: 1.4rem; text-shadow: 0 0 12px var(--accent); }

/* Selection explicite de l'action sur Maintenant. */
.choix-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 61rem;
    padding: .7rem .85rem;
    margin-bottom: .9rem;
    background: var(--surface-verre);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.choix-action label { display: flex; flex-direction: column; margin: 0; color: var(--texte); }
.choix-action-surtitre { font-family: var(--police-chiffres); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.choix-action select { width: min(100%, 31rem); min-width: 18rem; margin: 0; }

/* Dashboard financier et graphiques natifs. */
.chiffre-cle.chiffre-signal {
    background: linear-gradient(145deg, var(--accent-doux), var(--fond));
    border-color: color-mix(in srgb, var(--accent) 38%, var(--bordure));
}
.chiffre-cle.chiffre-signal strong { color: var(--accent); text-shadow: 0 0 24px var(--halo); }

.entete-section {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.entete-section h2 { margin: .1rem 0 0; }
.surtitre { font-family: var(--police-chiffres); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

.finance-graphiques { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .85fr); gap: 1rem; }
.graphique-mensuel, .graphique-clients { min-height: 22rem; }
.graphique-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.graphique-entete > div { display: flex; flex-direction: column; }
.graphique-entete strong { font-family: var(--police-titre); font-size: 1.35rem; }

.legende-graphique { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .75rem; color: var(--texte-doux); }
.legende-graphique > span { display: inline-flex; align-items: center; gap: .35rem; }
.puce-graphique { width: .65rem; height: .65rem; border-radius: 3px; }
.puce-graphique.reel { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent)); }
.puce-graphique.recurrent { border: 1px solid var(--accent-fort); background: color-mix(in srgb, var(--accent-fort) 18%, transparent); }

.barres-mensuelles {
    display: grid;
    grid-template-columns: repeat(12, minmax(1.5rem, 1fr));
    gap: clamp(.2rem, .8vw, .65rem);
    height: 16rem;
    margin-top: 1.25rem;
    padding-top: .5rem;
    background-image: repeating-linear-gradient(to bottom, var(--bordure) 0 1px, transparent 1px 25%);
}
.mois-colonne { display: flex; min-width: 0; flex-direction: column; justify-content: flex-end; align-items: center; gap: .4rem; color: var(--texte-doux); font-family: var(--police-chiffres); font-size: .62rem; }
.mois-barres { display: flex; width: 100%; height: 100%; align-items: flex-end; justify-content: center; gap: 2px; }
.barre-revenu { display: block; width: 42%; height: var(--hauteur); min-height: 2px; border-radius: 4px 4px 1px 1px; transition: height .3s ease; }
.barre-revenu.reel { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent)); box-shadow: 0 0 14px var(--halo); }
.barre-revenu.recurrent { background: color-mix(in srgb, var(--accent-fort) 20%, transparent); border: 1px solid var(--accent-fort); }
.mois-colonne:hover .barre-revenu { filter: brightness(1.25); }

.barres-clients { display: grid; gap: .95rem; margin-top: 1.2rem; }
.client-barre { display: grid; gap: .3rem; }
.client-barre-entete { display: flex; justify-content: space-between; gap: .75rem; font-size: .84rem; }
.client-barre-entete span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-barre-entete strong { flex: none; color: var(--accent); font-family: var(--police-chiffres); font-size: .75rem; }
.client-piste { height: 5px; overflow: hidden; background: var(--fond-doux); border-radius: 999px; }
.client-piste i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-fort)); border-radius: inherit; box-shadow: 0 0 12px var(--halo); }
.client-barre > .discret { font-size: .68rem; }
.note-prevision { margin-top: .8rem; font-size: .75rem; }

/* Contrats recurrents. */
.contrat-ajout { margin-bottom: 1rem; }
.contrat-ajout summary { cursor: pointer; }
.contrat-ajout[open] summary { margin-bottom: 1rem; }
.grille-formulaire-contrat { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; }
.grille-formulaire-contrat label { margin: 0; }
.grille-formulaire-contrat input { margin: .3rem 0 0; }

input[type="date"],
input[type="number"] {
    width: 100%;
    padding: .55rem .65rem;
    font: inherit;
    color: var(--texte);
    background: color-mix(in srgb, var(--fond) 88%, transparent);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
}

.liste-contrats { display: grid; gap: .65rem; }
.contrat-carte {
    display: grid;
    grid-template-columns: 3px minmax(11rem, 1.2fr) minmax(10rem, .8fr) minmax(10rem, .8fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
}
.contrat-carte.en-pause { opacity: .58; }
.contrat-signal { width: 3px; height: 2.5rem; background: linear-gradient(var(--accent), var(--accent-fort)); border-radius: 999px; box-shadow: 0 0 12px var(--accent); }
.contrat-identite, .contrat-montant, .contrat-periode { display: flex; min-width: 0; flex-direction: column; }
.contrat-identite strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contrat-identite span, .contrat-montant span, .contrat-periode { font-size: .73rem; color: var(--texte-doux); }
.contrat-montant strong { color: var(--accent); font-family: var(--police-chiffres); }
.contrat-actions { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }

@media (max-width: 72rem) {
    .finance-graphiques { grid-template-columns: 1fr; }
    .graphique-clients { min-height: auto; }
    .contrat-carte { grid-template-columns: 3px 1fr 1fr; }
    .contrat-periode { grid-column: 2; }
    .contrat-actions { grid-column: 3; grid-row: 2; }
}

@media (max-width: 44rem) {
    .choix-action { align-items: stretch; flex-direction: column; }
    .choix-action select { width: 100%; min-width: 0; }
    .finance-graphiques { display: block; }
    .graphique-clients { margin-top: 1rem; }
    .barres-mensuelles { gap: 2px; overflow-x: auto; }
    .entete-section { align-items: flex-start; flex-direction: column; }
    .contrat-carte { grid-template-columns: 3px 1fr; }
    .contrat-montant, .contrat-periode, .contrat-actions { grid-column: 2; }
    .contrat-actions { grid-row: auto; justify-content: flex-start; flex-wrap: wrap; }
    .panneau-fusion .choix-projet { width: 100%; }
    .fusion-fleche { transform: rotate(90deg); }
}

/* Navigation et projection du tableau de bord financier. */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
[data-finance-panel][hidden], .annee-archive[hidden] { display: none !important; }
.finance-onglets {
    position: sticky;
    z-index: 8;
    top: .75rem;
    display: flex;
    gap: .35rem;
    margin: 0 0 1.25rem;
    padding: .4rem;
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--bordure) 78%, transparent);
    border-radius: calc(var(--rayon) + .25rem);
    background: color-mix(in srgb, var(--fond) 88%, transparent);
    box-shadow: 0 .7rem 2.5rem color-mix(in srgb, #000 10%, transparent);
    backdrop-filter: blur(18px) saturate(145%);
}
.finance-onglets button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.45rem;
    padding: .48rem .9rem;
    flex: 1 0 auto;
    color: var(--texte-doux);
    font: 600 .78rem/1 var(--police);
    letter-spacing: .015em;
    border: 1px solid transparent;
    border-radius: var(--rayon-petit);
    background: transparent;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.finance-onglets button:hover { color: var(--texte); background: var(--fond-doux); }
.finance-onglets button[aria-selected="true"] {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    background: color-mix(in srgb, var(--accent-doux) 72%, var(--fond));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 1.2rem var(--halo);
}
.finance-onglets button span {
    min-width: 1.25rem;
    padding: .2rem .35rem;
    font-size: .65rem;
    color: var(--texte-doux);
    border-radius: 999px;
    background: var(--fond-doux);
}

.projection-tresorerie { display: grid; gap: 1rem; }
.projection-solde-final { display: flex; align-items: flex-end; flex-direction: column; }
.projection-solde-final strong { font: 700 1.6rem/1 var(--police-chiffres); color: var(--accent); }
.projection-parametre {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) auto auto minmax(5rem, auto);
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    border-color: color-mix(in srgb, var(--accent) 30%, var(--bordure));
}
.projection-parametre > div { display: flex; flex-direction: column; }
.projection-parametre label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    color: var(--texte-doux);
    white-space: nowrap;
}
.projection-parametre input { width: 7rem; margin: 0; text-align: right; font-family: var(--police-chiffres); }
.projection-graphique { position: relative; padding: 1rem 1rem .7rem; overflow: hidden; }
.projection-graphique::before {
    content: "";
    position: absolute;
    inset: -40% 35% 55% -15%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 17%, transparent), transparent 68%);
    pointer-events: none;
}
.projection-legende { position: relative; display: flex; justify-content: flex-end; gap: 1.1rem; font-size: .7rem; color: var(--texte-doux); }
.projection-legende span { display: inline-flex; align-items: center; gap: .35rem; }
.projection-legende i { width: .55rem; height: .55rem; border-radius: 50%; }
.projection-legende .entree, .projection-flux .entree { background: var(--accent); }
.projection-legende .sortie, .projection-flux .sortie { background: #f59e70; }
.projection-graphique svg { position: relative; display: block; width: 100%; height: auto; max-height: 18rem; overflow: visible; }
.projection-zero { stroke: var(--bordure); stroke-width: 1; stroke-dasharray: 5 7; }
.projection-aire { fill: url(#projection-remplissage); }
.projection-ligne { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px var(--halo)); }
.projection-graphique circle { fill: var(--fond); stroke: var(--accent); stroke-width: 3; }
.projection-mois-labels, .projection-flux { display: grid; grid-template-columns: repeat(12, 1fr); gap: .2rem; padding: 0 2.7%; }
.projection-mois-labels span { overflow: hidden; text-align: center; font-size: .62rem; color: var(--texte-doux); text-overflow: clip; }
.projection-flux { height: 2.6rem; margin-top: .55rem; align-items: end; }
.projection-flux > div { display: flex; height: 100%; align-items: end; justify-content: center; gap: 2px; }
.projection-flux i { display: block; width: min(34%, .75rem); min-height: 2px; border-radius: 3px 3px 1px 1px; opacity: .78; }
.projection-evenements { margin-top: .5rem; }
.projection-evenements h3 { margin: .1rem 0 0; }
.liste-projection-evenements { display: grid; gap: .45rem; }
.liste-projection-evenements article {
    display: grid;
    grid-template-columns: 5.5rem 5.7rem minmax(10rem, 1fr) auto;
    align-items: center;
    gap: .75rem;
    min-height: 3.4rem;
    padding: .55rem .75rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    background: color-mix(in srgb, var(--fond-doux) 58%, transparent);
}
.liste-projection-evenements time { font: 650 .73rem/1 var(--police-chiffres); color: var(--texte-doux); }
.liste-projection-evenements article > div { display: flex; min-width: 0; flex-direction: column; }
.liste-projection-evenements article > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projection-type { justify-self: start; padding: .25rem .45rem; font-size: .62rem; font-weight: 700; border-radius: 999px; color: var(--texte-doux); background: var(--fond); }
.projection-type.recurrent { color: var(--accent); background: var(--accent-doux); }
.projection-type.tva { color: #c2782e; background: color-mix(in srgb, #f59e0b 13%, var(--fond)); }
.projection-type.cotisation { color: #b45f75; background: color-mix(in srgb, #ec668b 12%, var(--fond)); }
.liste-projection-evenements .montant { font-family: var(--police-chiffres); white-space: nowrap; }
.liste-projection-evenements .positif { color: var(--accent); }
.liste-projection-evenements .negatif { color: var(--texte); }
.projection-suite { margin-top: .55rem; }
.projection-suite[open] summary { margin-bottom: .55rem; }
.finance-historique-footer { display: flex; justify-content: center; padding: .8rem 0 0; }

@media (max-width: 52rem) {
    .finance-onglets { top: .35rem; }
    .projection-parametre { grid-template-columns: 1fr auto; }
    .projection-parametre > div { grid-column: 1 / -1; }
    .projection-parametre #etat-retrait { grid-column: 1 / -1; }
    .liste-projection-evenements article { grid-template-columns: 5.2rem 1fr auto; }
    .liste-projection-evenements .projection-type { grid-column: 1; grid-row: 2; }
    .liste-projection-evenements article > div { grid-column: 2; grid-row: 1 / span 2; }
    .liste-projection-evenements .montant { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 34rem) {
    .finance-onglets button { padding-inline: .7rem; }
    .projection-solde-final { align-items: flex-start; }
    .projection-parametre { grid-template-columns: 1fr; }
    .projection-parametre > div, .projection-parametre #etat-retrait { grid-column: 1; }
    .projection-parametre label { justify-content: space-between; }
    .projection-parametre input { flex: 1; }
    .liste-projection-evenements article { grid-template-columns: 1fr auto; }
    .liste-projection-evenements time { grid-column: 1; }
    .liste-projection-evenements .projection-type { grid-column: 2; grid-row: 1; }
    .liste-projection-evenements article > div { grid-column: 1 / -1; grid-row: 2; }
    .liste-projection-evenements .montant { grid-column: 1 / -1; grid-row: 3; justify-self: end; }
}

/* Frise chronologique des échéances URSSAF et TVA. */
.frise-echeances { margin-block: 1.5rem; min-width: 0; max-width: 100%; }
.frise-total { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.frise-total strong { font: 700 1.35rem/1.2 var(--police-chiffres); color: var(--accent); }
.frise-legende { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin: .5rem 0 .9rem; font-size: .78rem; color: var(--texte-doux); }
.frise-legende > span { display: inline-flex; align-items: center; gap: .35rem; }
.frise-puce { display: inline-block; width: .6rem; height: .6rem; border-radius: 999px; }
.frise-puce.tva { background: #f59e0b; }
.frise-puce.cotisation { background: #ec668b; }
.frise-puce.cfe { background: #64748b; }
.frise-piste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 17rem;
    gap: .9rem;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: .2rem .2rem 1rem;
    scroll-snap-type: x proximity;
}
.frise-etape { display: grid; grid-template-rows: auto auto 1fr; scroll-snap-align: start; min-width: 0; }
.frise-mois { min-height: 1.4rem; font-size: .72rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-doux); }
.frise-mois.meme-mois { color: transparent; }
.frise-noeud { position: relative; height: 1.4rem; }
.frise-noeud::before { content: ''; position: absolute; top: 50%; left: -.9rem; right: -.9rem; height: 2px; background: var(--bordure); }
.frise-etape:first-child .frise-noeud::before { left: 0; }
.frise-etape:last-child .frise-noeud::before { right: 0; }
.frise-noeud i { position: absolute; top: 50%; left: 0; width: .9rem; height: .9rem; border: 3px solid var(--fond); border-radius: 999px; background: var(--texte-doux); transform: translateY(-50%); box-shadow: 0 0 0 2px var(--bordure); }
.frise-etape.type-tva .frise-noeud i { background: #f59e0b; }
.frise-etape.type-cotisation .frise-noeud i { background: #ec668b; }
.frise-etape.type-cfe .frise-noeud i { background: #64748b; }
.frise-etape.proche .frise-noeud i { box-shadow: 0 0 0 2px var(--bordure), 0 0 14px var(--halo); }
.frise-carte { display: grid; gap: .3rem; padding: .8rem .85rem; min-width: 0; }
.frise-carte header { display: flex; align-items: center; gap: .5rem; }
.frise-carte header time { font: 650 .75rem/1 var(--police-chiffres); color: var(--texte-doux); }
.frise-dans { margin-left: auto; font: 650 .7rem/1 var(--police-chiffres); color: var(--texte-doux); }
.frise-carte > strong { font-size: .95rem; }
.frise-montants { display: grid; gap: .25rem; margin: .45rem 0 .1rem; }
.frise-montants div { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .3rem .5rem; border-radius: var(--rayon-petit); background: color-mix(in srgb, var(--fond-doux) 70%, transparent); }
.frise-montants dt { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); }
.frise-montants dd { margin: 0; font: 650 .84rem/1.2 var(--police-chiffres); white-space: nowrap; }
.frise-carte footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; }
.frise-carte footer b { font-family: var(--police-chiffres); color: var(--accent); }
.frise-detail { margin: 0; font-size: .7rem; line-height: 1.35; }
.frise-tableau { margin-top: .4rem; }
.projection-type.cfe { color: #64748b; background: color-mix(in srgb, #64748b 14%, var(--fond)); }
.badge.attention { color: #c2782e; background: color-mix(in srgb, #f59e0b 14%, var(--fond)); }

/* Fiches clients : édition à la main. */
.fiche-client header { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.fiche-client header strong { min-width: 0; overflow-wrap: anywhere; }
.fiche-notes { white-space: pre-line; font-size: .78rem; }
.dialogue-tache textarea { font: inherit; resize: vertical; }
.contrat-client { max-width: 14rem; }

@media (max-width: 52rem) {
    .frise-piste { grid-auto-columns: minmax(min(85vw, 17rem), 1fr); }
}