/* Les écrans de Gestiob. Plus dense que Market Raccoon : c'est un outil
   de travail quotidien pour deux personnes, pas une vitrine pour novices. */

/* ===== Barre du haut ===== */
.barre {
    position: sticky; top: 0; z-index: 20;
    background: var(--g-barre); border-bottom: 1px solid var(--g-bord);
}
.barre-interieur {
    display: flex; align-items: center; gap: 1rem;
    max-width: var(--g-conteneur); margin: 0 auto; padding: 0.625rem 1.5rem;
}
.marque {
    display: inline-flex; align-items: center; gap: 0.5rem; flex: none;
    font: 800 1.1875rem/1 var(--g-titre); letter-spacing: -0.04em; text-decoration: none;
}
.marque-logo {
    display: grid; place-items: center; width: 1.875rem; height: 1.875rem;
    border-radius: 0.625rem; background: var(--g-souci); color: var(--g-souci-encre);
    box-shadow: var(--g-arete);
}
.nav { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
    display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
    min-height: 2.5rem; padding: 0 0.875rem; border-radius: var(--g-r-rond);
    color: var(--g-texte-doux); font: 600 0.9375rem/1 var(--g-sans); text-decoration: none;
}
.nav a:hover { background: var(--g-barre-survol); color: var(--g-texte); }
.nav a[aria-current="page"] { background: var(--g-barre-actif); color: var(--g-texte); }
.nav .compteur {
    display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
    border-radius: var(--g-r-rond); background: var(--g-souci); color: var(--g-souci-encre);
    font: 700 0.75rem/1 var(--g-sans); font-variant-numeric: tabular-nums;
}
.barre-droite { display: flex; align-items: center; gap: 0.5rem; flex: none; }

.bascule-theme {
    position: relative; width: 2.875rem; height: 1.625rem; flex: none; padding: 0;
    border: 1px solid var(--g-bord); border-radius: var(--g-r-rond);
    background: var(--g-barre-survol); cursor: pointer;
}
.bascule-theme span {
    position: absolute; top: 0.125rem; left: 0.125rem; width: 1.25rem; height: 1.25rem;
    border-radius: 50%; background: var(--g-bouton);
    transition: transform 0.32s var(--g-ease);
}
:root[data-theme="dark"] .bascule-theme span { transform: translateX(1.25rem); }

/* ===== Mise en page ===== */
.page { max-width: var(--g-conteneur); margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }
.page-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-tete p { color: var(--g-texte-doux); margin-top: 0.375rem; }
.sur-titre { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.deux-colonnes { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
.colonne { display: grid; gap: 1.5rem; min-width: 0; }

.bloc { display: grid; gap: 0.625rem; }
.bloc-tete { display: flex; align-items: center; gap: 0.5rem; }
.bloc-tete h2 { font-size: 1rem; }
.bloc-tete .etiquette { margin-left: 0.125rem; }
.liste-taches { display: grid; gap: 0.5rem; }

.vide { padding: 1rem 1.125rem; border: 1.5px dashed var(--g-bord-fort); border-radius: var(--g-r-m); color: var(--g-texte-doux); font-size: 0.9375rem; }
.vide--grand { padding: 2.5rem 1.5rem; text-align: center; }

/* La ligne « ce que fait l'autre » */
.l-autre { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; padding: 0.75rem 1rem; border-radius: var(--g-r-m); background: var(--g-creux); box-shadow: var(--g-creux-ombre); font-size: 0.9375rem; }
.l-autre a { font-weight: 600; text-decoration: none; }
.l-autre a:hover { text-decoration: underline; }

/* ===== La carte d'une tâche ===== */
.tache {
    position: relative; display: grid; gap: 0.375rem;
    padding: 0.75rem 0.875rem; border: var(--g-filet) solid var(--g-bord); border-radius: var(--g-r-m);
    background: var(--g-carte); box-shadow: var(--g-ombre-1);
}
.tache:hover { border-color: var(--g-bord-fort); box-shadow: var(--g-ombre-2); }
.tache-haut, .tache-bas { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.tache-bas { color: var(--g-texte-doux); font-size: 0.8125rem; }
.tache-bas .avatar { width: 1.375rem; height: 1.375rem; font-size: 0.6875rem; }
.tache-titre { font-weight: 600; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
/* Toute la carte se clique, sans empêcher les boutons dedans de marcher. */
.tache-titre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tache-actions { position: relative; z-index: 1; display: flex; gap: 0.375rem; flex-wrap: wrap; margin-top: 0.125rem; }
.tache--urgente { border-left: 0.25rem solid var(--g-rouge); }
.tache--en-cours { box-shadow: inset 0.25rem 0 0 var(--g-souci), var(--g-ombre-1); }
.tache--urgente.tache--en-cours { box-shadow: var(--g-ombre-1); }
.tache[draggable="true"] { cursor: grab; }
.tache.est-tiree { opacity: 0.45; transform: rotate(-1deg) scale(0.98); }
.tache-resume { position: relative; z-index: 1; font-size: 0.875rem; color: var(--g-texte-doux); white-space: pre-line; }

/* ===== Côté droit de Ma journée ===== */
.nouveautes { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.evenement { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem; padding: 0.5rem 0; font-size: 0.9375rem; }
.evenement + .evenement { border-top: 1px solid var(--g-bord); }
.evenement time { display: block; color: var(--g-texte-doux); font-size: 0.8125rem; }
.evenement a { text-decoration: none; }
.evenement a:hover { text-decoration: underline; }

.carte-projet { display: grid; gap: 0.875rem; }
.carte-projet-tete { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.carte-projet-tete a { font: 700 1.0625rem/1.2 var(--g-titre); letter-spacing: -0.02em; text-decoration: none; }
.carte-projet-tete a:hover { text-decoration: underline; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.chiffre { display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; border-radius: var(--g-r-s); background: var(--g-creux); box-shadow: var(--g-creux-ombre); }
.chiffre b { font: 700 1.375rem/1 var(--g-titre); letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; }
.chiffre span { color: var(--g-texte-doux); font-size: 0.8125rem; }
.chiffre--alerte b { color: var(--g-rouge); }
.jalon { display: grid; gap: 0.375rem; font-size: 0.9375rem; }
.jalon-ligne { display: flex; justify-content: space-between; gap: 0.5rem; }
.jalon-ligne span:last-child { color: var(--g-texte-doux); font-variant-numeric: tabular-nums; white-space: nowrap; }
.livraison { color: var(--g-texte-doux); font-size: 0.875rem; }

/* ===== Tableau d'un projet ===== */
.filtres { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; }
.filtres .separateur { width: 1px; height: 1.5rem; background: var(--g-bord-fort); margin: 0 0.25rem; }
.tableau { display: grid; grid-template-columns: repeat(4, minmax(15rem, 1fr)); gap: 1rem; align-items: start; overflow-x: auto; padding-bottom: 0.5rem; }
.colonne-tableau {
    display: grid; gap: 0.5rem; align-content: start; min-height: 12rem;
    padding: 0.75rem; border-radius: var(--g-r-l); background: var(--g-creux); box-shadow: var(--g-creux-ombre);
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}
.colonne-tableau.est-survolee { background: var(--g-souci-voile); box-shadow: inset 0 0 0 var(--g-filet) var(--g-souci-fort); }
.colonne-tete { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.375rem 0.375rem; }
.colonne-tete h2 { font-size: 0.9375rem; }
.decisions { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); margin-bottom: 1.5rem; }

/* ===== Fiche d'une tâche ===== */
.fiche { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
.fiche-texte { max-width: var(--g-lecture); white-space: pre-line; line-height: 1.6; }
.fiche-section { display: grid; gap: 0.75rem; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.commentaire { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; }
.commentaire p { white-space: pre-line; }
.commentaire time { color: var(--g-texte-doux); font-size: 0.8125rem; }
.infos { display: grid; gap: 0.625rem; margin: 0; font-size: 0.9375rem; }
.infos div { display: flex; justify-content: space-between; gap: 1rem; }
.infos dt { color: var(--g-texte-doux); }
.infos dd { margin: 0; font-weight: 600; text-align: right; }
.commits { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.commits code { padding: 0.125rem 0.45rem; border-radius: var(--g-r-xs); background: var(--g-creux); }
details.modifier summary { cursor: pointer; font-weight: 600; list-style: none; }
details.modifier summary::-webkit-details-marker { display: none; }
details.modifier[open] summary { margin-bottom: 1rem; }

/* ===== Listes : suggestions, activité ===== */
.liste { display: grid; gap: 0.625rem; }
.ligne-suggestion { display: grid; gap: 0.625rem; }
.ligne-suggestion-tete { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: var(--g-texte-doux); font-size: 0.875rem; }
.ligne-suggestion-texte { font-weight: 600; }
.jour { display: grid; gap: 0.25rem; }
.jour h2 { font-size: 0.9375rem; color: var(--g-texte-doux); margin: 1rem 0 0.25rem; }

/* ===== Équilibre ===== */
.balances { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.balance { display: grid; gap: 0.75rem; }
.balance-barre { display: flex; height: 0.875rem; border-radius: var(--g-r-rond); overflow: hidden; background: var(--g-creux); box-shadow: var(--g-creux-ombre); }
.balance-barre span { display: block; height: 100%; }
.balance-barre .part-1 { background: var(--g-souci); }
.balance-barre .part-2 { background: var(--g-bouton); }
.balance-legende { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; }
.balance-legende b { font: 700 1.25rem/1 var(--g-titre); font-variant-numeric: tabular-nums; }
.note-v2 { color: var(--g-texte-doux); font-size: 0.9375rem; max-width: var(--g-lecture); }

/* ===== Connexion ===== */
.connexion { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.connexion .carte { width: min(26rem, 100%); display: grid; gap: 1.25rem; padding: 2rem; border-radius: var(--g-r-xl); }
.connexion form { display: grid; gap: 0.875rem; }
.erreur { padding: 0.75rem 1rem; border-radius: var(--g-r-s); background: var(--g-rouge-voile); color: var(--g-rouge); font-weight: 600; font-size: 0.9375rem; }
.ou { display: flex; align-items: center; gap: 0.75rem; color: var(--g-texte-doux); font-size: 0.875rem; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--g-bord); }

/* ===== Petits écrans ===== */
@media (max-width: 1100px) {
    .deux-colonnes, .fiche { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .barre-interieur { flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 1rem; }
    .nav { order: 3; flex-basis: 100%; }
    .barre-droite { margin-left: auto; }
    .barre-droite .bouton-texte { display: none; }
    .page { padding: 1.25rem 1rem 3rem; }
    h1 { font-size: 1.5rem; }
    .tableau { grid-template-columns: repeat(4, minmax(16rem, 85vw)); scroll-snap-type: x mandatory; }
    .colonne-tableau { scroll-snap-align: start; }
    .filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding: 0.25rem 1rem; }
    .filtres > * { flex: none; }
}