/* Les composants communs, dessinés comme ceux de Market Raccoon (composants.css).
   Le geste : au survol on soulève, au clic on enfonce, le ressort fait le reste. */

.bouton, .puce, .carte--cliquable, .tache {
    transition:
        transform var(--g-duree) var(--g-ressort),
        box-shadow var(--g-duree) ease,
        background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

/* ===== Boutons : toujours en pilule, 44 px ===== */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 2.75rem; padding: 0 1.25rem;
    border: var(--g-filet) solid transparent; border-radius: var(--g-r-rond);
    background: none; color: inherit;
    font: 600 0.9375rem/1.1 var(--g-sans); letter-spacing: -0.005em;
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.bouton .ic { width: 1.125em; height: 1.125em; }
.bouton:hover { transform: translateY(-0.125rem); }
.bouton:active { transform: translateY(0.0625rem) scale(0.97); transition-duration: 0.08s; }
.bouton:disabled, .bouton[aria-busy="true"] { opacity: 0.5; cursor: progress; transform: none; }

.bouton--plein { background: var(--g-bouton); color: var(--g-bouton-texte); box-shadow: var(--g-arete), var(--g-ombre-1); }
.bouton--plein:hover { box-shadow: var(--g-arete), var(--g-ombre-2); }
.bouton--souci { background: var(--g-souci); color: var(--g-souci-encre); box-shadow: var(--g-arete), var(--g-ombre-1); }
.bouton--souci:hover { background: var(--g-souci-fort); box-shadow: var(--g-arete), var(--g-ombre-2); }
.bouton--contour { background: var(--g-carte); border-color: var(--g-bord-fort); box-shadow: var(--g-ombre-1); }
.bouton--contour:hover { border-color: var(--g-texte); box-shadow: var(--g-ombre-2); }
.bouton--doux { color: var(--g-texte-doux); }
.bouton--doux:hover { background: var(--g-gris-voile); color: var(--g-texte); transform: none; }
.bouton--danger { color: var(--g-rouge); }
.bouton--danger:hover { background: var(--g-rouge-voile); transform: none; }
.bouton--petit { min-height: 2.25rem; padding: 0 0.95rem; font-size: 0.875rem; }
.bouton--rond { width: 2.75rem; padding: 0; }

/* ===== Puces : un choix, un filtre ===== */
.puce {
    display: inline-flex; align-items: center; gap: 0.375rem;
    min-height: 2.25rem; padding: 0 0.95rem;
    border: var(--g-filet) solid var(--g-bord); border-radius: var(--g-r-rond);
    background: var(--g-carte); color: var(--g-texte);
    font: 500 0.875rem/1.2 var(--g-sans); text-decoration: none; cursor: pointer;
    box-shadow: var(--g-ombre-1);
}
.puce:hover { transform: translateY(-0.125rem); border-color: var(--g-bord-fort); box-shadow: var(--g-ombre-2); }
.puce[aria-current="true"], .puce[aria-pressed="true"] {
    background: var(--g-souci); border-color: var(--g-souci-fort); color: var(--g-souci-encre); font-weight: 600;
}

/* ===== Étiquettes : un état, qui ne se clique pas ===== */
.etiquette {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.125rem 0.55rem; border-radius: var(--g-r-rond);
    background: var(--g-gris-voile); color: var(--g-petit-texte);
    font: 600 0.8125rem/1.35 var(--g-sans); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.etiquette .ic { width: 0.95em; height: 0.95em; }
.etiquette--rouge { background: var(--g-rouge-voile); color: var(--g-rouge); }
.etiquette--vert { background: var(--g-vert-voile); color: var(--g-vert); }
.etiquette--orange { background: var(--g-orange-voile); color: var(--g-orange); }
.etiquette--bleu { background: var(--g-bleu-voile); color: var(--g-bleu); }
.etiquette--violet { background: var(--g-violet-voile); color: var(--g-violet); }
.etiquette--souci { background: var(--g-souci); color: var(--g-souci-encre); }

/* La pastille de projet : une couleur ET le nom, jamais la couleur seule. */
.projet {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font: 600 0.8125rem/1.3 var(--g-sans); color: var(--g-texte-doux); white-space: nowrap;
}
.projet::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--g-gris); }
.projet--violet::before { background: var(--g-violet); }
.projet--bleu::before { background: var(--g-bleu); }

/* Initiale d'une personne, en souci pour moi, en encre pour l'autre. */
.avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 1.625rem; height: 1.625rem; border-radius: 50%;
    background: var(--g-bouton); color: var(--g-bouton-texte);
    font: 700 0.75rem/1 var(--g-sans);
}
.avatar--moi { background: var(--g-souci); color: var(--g-souci-encre); }
.avatar--grand { width: 2.25rem; height: 2.25rem; font-size: 0.875rem; }

/* ===== Cartes ===== */
.carte {
    padding: 1.25rem 1.375rem;
    border: var(--g-filet) solid var(--g-bord); border-radius: var(--g-r-l);
    background: var(--g-carte); box-shadow: var(--g-ombre-1);
}
.carte--cliquable { cursor: pointer; text-decoration: none; display: block; }
.carte--cliquable:hover { transform: translateY(-0.1875rem); box-shadow: var(--g-ombre-2); border-color: var(--g-bord-fort); }
.creux { padding: 0.75rem 0.875rem; border-radius: var(--g-r-s); background: var(--g-creux); box-shadow: var(--g-creux-ombre); }

/* ===== Champs ===== */
.champ {
    width: 100%; min-height: 2.75rem; padding: 0.625rem 0.95rem;
    border: var(--g-filet) solid var(--g-bord-champ); border-radius: var(--g-r-s);
    background: var(--g-carte); color: var(--g-texte); box-shadow: var(--g-creux-ombre);
    font: 400 1rem/1.4 var(--g-sans);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
textarea.champ { resize: vertical; min-height: 5.5rem; }
select.champ { cursor: pointer; }
.champ::placeholder { color: var(--g-texte-doux); opacity: 0.85; }
.champ:focus { outline: none; border-color: var(--g-texte); box-shadow: var(--g-creux-ombre), 0 0 0 0.25rem var(--g-souci-voile); }

.libelle { display: grid; gap: 0.375rem; font: 600 0.875rem/1.3 var(--g-sans); }
.libelle small { font-weight: 400; color: var(--g-texte-doux); }
.grille-champs { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

/* Barre de progression : une piste creusée, un remplissage arrondi. */
.progression {
    height: 0.5rem; border-radius: var(--g-r-rond);
    background: var(--g-creux); box-shadow: var(--g-creux-ombre); overflow: hidden;
}
.progression > span { display: block; height: 100%; border-radius: inherit; background: var(--g-vert); }

/* ===== Dialogue : un voile plein, jamais de flou ===== */
dialog.dialogue {
    width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
    padding: 1.5rem; border: var(--g-filet) solid var(--g-bord); border-radius: var(--g-r-xl);
    background: var(--g-carte); color: var(--g-texte); box-shadow: var(--g-ombre-3);
}
dialog.dialogue::backdrop { background: var(--g-voile-dialogue); }
.dialogue form { display: grid; gap: 1rem; }
.dialogue-pied { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
    dialog.dialogue[open] { animation: g-sauter 0.36s var(--g-ressort) both; }
}

/* ===== Message bref ===== */
.toasts { position: fixed; left: 50%; bottom: 1.25rem; z-index: 50; display: grid; gap: 0.5rem; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2rem); }
.toast {
    padding: 0.75rem 1.125rem; border-radius: var(--g-r-m);
    background: var(--g-bouton); color: var(--g-bouton-texte);
    font: 500 0.9375rem/1.4 var(--g-sans); box-shadow: var(--g-ombre-3);
}
.toast--erreur { background: var(--g-rouge); color: #fffdf8; }
@media (prefers-reduced-motion: no-preference) {
    .toast { animation: g-sauter 0.42s var(--g-ressort) both; }
}
@keyframes g-sauter { from { opacity: 0; transform: translateY(0.75rem) scale(0.96); } }

kbd {
    display: inline-block; min-width: 1.4em; padding: 0.05rem 0.35rem;
    border: 1px solid var(--g-bord-fort); border-bottom-width: 2px; border-radius: 0.35rem;
    background: var(--g-carte); text-align: center; font-size: 0.8em;
}

@media (pointer: coarse) {
    .bouton--petit, .puce { min-height: 2.75rem; }
}