/* ==========================================================
   Échanges entre DG : Echanges.php (propositions, échanges conclus, commentaires) et ProposerEchange.php (constructeur)
   Mobile d'abord ; couleurs par variables du thème (sombre et clair). Boutons et champs : suggestions2026.css
   ========================================================== */

.echanges-page { display: grid; gap: 1.25rem; min-width: 0; }
.echanges-page__entete .titre-section { margin-bottom: .5rem; }
.echanges-page__entete p { margin: 0; max-width: 60rem; }
.echanges-page__retour { margin: 0 0 .25rem; font-size: .9rem; }

/* Mon équipe : choix, connexion, bouton Proposer */
.echanges-page__equipe { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .9rem 1.5rem; }
.echanges-page__connexion { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.echanges-page__connexion .suggestions__erreur { flex-basis: 100%; margin: 0; }
.echanges-page__connecte { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.echanges-page__connecte form { margin: 0; }
.echanges-page__connecte .suggestions__bouton { text-decoration: none; }
.echanges-page__aide { margin: 0; }

.echanges-page__section { display: grid; gap: .75rem; }
.echanges-page__section > .titre-bloc { margin: 0; }
.echanges-page__cartes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); align-items: start; }
.echanges-page__passees summary { cursor: pointer; font-weight: 700; color: var(--texte-2); }
.echanges-page__passees[open] summary { margin-bottom: .75rem; }

/* ---------- Carte d'un échange ---------- */
.echange-dg { display: grid; gap: .9rem; border-top: 3px solid var(--trait); }
.echange-dg--accepte { border-top-color: var(--or); }
.echange-dg--officiel { border-top-color: var(--monte); }
.echange-dg--propose { border-top-color: var(--bleu); }
.echange-dg__entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem .8rem; }
.echange-dg__statut {
    display: inline-block;
    padding: .12rem .5rem;
    border: 1px solid var(--trait);
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texte-2);
}
.echange-dg__statut--propose { border-color: var(--bleu); color: var(--bleu); }
.echange-dg__statut--accepte { border-color: var(--or); color: var(--texte); }
.echange-dg__statut--officiel { border-color: var(--monte); color: var(--monte); }
.echange-dg__statut--refuse, .echange-dg__statut--rejete { border-color: var(--baisse); color: var(--baisse); }

.echange-dg__cotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.echange-dg__cote { display: grid; gap: .5rem; align-content: start; min-width: 0; }
.echange-dg__equipe { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.05rem; line-height: 1.2; }
.echange-dg__equipe img { flex: none; }
.echange-dg__equipe small { display: block; font-family: var(--police-texte, inherit); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2); }
.echange-dg__elements { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.echange-dg__elements li { display: grid; line-height: 1.3; padding-left: .6rem; border-left: 2px solid var(--trait); min-width: 0; }
.echange-dg__elements a, .echange-dg__elements strong { font-weight: 700; color: var(--texte); }
.echange-dg__elements a:hover { color: var(--bleu); }
.echange-dg__elements span { color: var(--texte-2); font-size: .85rem; }
.echange-dg__rien { margin: 0; }

.echange-dg__conditions, .echange-dg__mot { padding: .65rem .8rem; background: var(--fond); border: 1px solid var(--trait); border-left: 3px solid var(--or); border-radius: var(--rayon); }
.echange-dg__mot { border-left-color: var(--bleu); }
.echange-dg__conditions strong, .echange-dg__mot strong { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-2); }
.echange-dg__conditions p, .echange-dg__mot p { margin: .25rem 0 0; }
.echange-dg__pied { padding-top: .6rem; border-top: 1px solid var(--trait); font-weight: 700; font-size: .9rem; }

/* Masse salariale après l'échange */
.echange-dg__masses { display: grid; gap: .75rem; }
.echange-dg__masses .titre-bloc { margin: 0; }
.echange-dg__masses-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.echange-dg__masse { display: grid; gap: .1rem; padding: .7rem .8rem; background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); }
.echange-dg__masse strong { font-family: var(--police-titre); font-size: 1.6rem; line-height: 1.1; }
.echange-dg__masse-equipe { font-weight: 700; }
.echange-dg__masse.est-depasse { border-color: var(--baisse); }
.echange-dg__alerte { color: var(--baisse); font-weight: 700; font-size: .9rem; }

/* Réponse du DG */
.echange-dg__actions { display: grid; gap: .8rem; }
.echange-dg__actions .titre-bloc, .echange-dg__actions p { margin: 0; }
.echange-dg__boutons { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.echange-dg__boutons form { margin: 0; }
.echange-dg__boutons a { text-decoration: none; }
.echange-dg__refus { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; padding-top: .8rem; border-top: 1px solid var(--trait); }
.echange-dg__refus .suggestions__champ { flex: 1 1 16rem; }

/* Suivi */
.echange-dg__suivi ol { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .45rem; }
.echange-dg__suivi li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
.echange-dg__suivi p { margin: .6rem 0 0; }
.echange-dg__note { flex-basis: 100%; color: var(--texte); font-style: italic; }

/* Commentaires */
.echange-dg__commentaires { display: grid; gap: .8rem; }
.echange-dg__commentaires .titre-bloc { margin: 0; }
.echange-dg__commentaires > p { margin: 0; }
.echange-dg__fil { list-style: none; margin: 0; padding: 0; display: grid; }
.echange-dg__fil li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--trait); }
.echange-dg__fil li:last-child { border-bottom: 0; }
.echange-dg__fil img { border-radius: 50%; background: var(--surface-2); }
.echange-dg__fil p { margin: 0; overflow-wrap: anywhere; }
.echange-dg__fil form { margin: .25rem 0 0; }
.echange-dg__auteur { display: flex; flex-wrap: wrap; gap: .2rem .45rem; font-size: .9rem; margin-bottom: .2rem !important; }
.echange-dg__commenter { display: grid; gap: .6rem; }
.echange-dg__commenter textarea { min-height: 5rem; }

/* ---------- Constructeur ---------- */
.constructeur__choix { display: grid; gap: .5rem; max-width: 30rem; }
.constructeur__choix p { margin: 0; }
.constructeur__choix select {
    font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--trait);
    border-radius: var(--rayon); padding: .55rem .7rem; font-weight: 400;
}
.constructeur__formulaire { display: grid; gap: 1rem; }
.constructeur__colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.constructeur__equipe { display: grid; gap: .6rem; min-width: 0; }
.constructeur__groupe summary { cursor: pointer; font-weight: 800; padding: .35rem 0; }
.constructeur__groupe ul { list-style: none; margin: 0; padding: 0; display: grid; }
.constructeur__actif { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem .4rem; border-bottom: 1px solid var(--trait); cursor: pointer; border-radius: 4px; }
.constructeur__actif:hover { background: var(--surface-2); }
.constructeur__actif input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--bleu); flex: none; }
.constructeur__actif:has(input:checked) { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--bleu); }
.constructeur__texte { display: grid; line-height: 1.3; min-width: 0; }
.constructeur__texte > span { color: var(--texte-2); font-size: .85rem; }
.constructeur__texte .badge { margin-left: .2rem; }
.constructeur__resume { display: grid; gap: .9rem; }
.constructeur__resume .titre-bloc { margin: 0; }
.constructeur__masse { margin: .2rem 0 0; font-weight: 700; font-size: .9rem; }
.constructeur__masse.est-depasse { color: var(--baisse); }
.constructeur__note { margin: 0; font-size: .82rem; }
.constructeur__resume .suggestions__champ textarea { min-height: 4rem; }

@media (max-width: 760px) {
    .echange-dg__cotes, .echange-dg__masses-grille, .constructeur__colonnes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Date limite des échanges ---------- */
.echanges-page__limite { margin: 0; padding: .65rem .9rem; border: 1px solid var(--trait); border-left: 4px solid var(--bleu); border-radius: var(--rayon); background: var(--surface); }
.echanges-page__limite.est-proche { border-left-color: var(--or); }
.echanges-page__limite.est-fermee { border-left-color: var(--baisse); font-weight: 700; }

/* ---------- Sur le marché (bloc des échanges) ---------- */
.marche__gerer summary { cursor: pointer; font-weight: 800; }
.marche__gerer[open] summary { margin-bottom: .8rem; }
.marche__formulaire { display: grid; gap: .9rem; }
.marche__choix { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; }
.marche__choix fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.marche__choix legend { padding: 0 0 .3rem; font-weight: 800; }
.marche__equipe { display: grid; gap: .6rem; align-content: start; }
.marche__note { margin: 0; padding: .5rem .7rem; background: var(--fond); border-left: 3px solid var(--or); border-radius: 4px; }
.marche__proposer { font-weight: 700; font-size: .9rem; }

/* Constructeur : élément que l'autre équipe a mis sur le marché */
.constructeur__marche { margin-left: .2rem; color: var(--monte); border-color: var(--monte); }

/* ---------- Réactions ---------- */
.echange-dg__pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem .8rem; }
.echange-dg__reactions { display: inline-flex; flex-wrap: wrap; gap: .35rem; font-weight: 400; }
.echange-dg__reaction { padding: .05rem .45rem; border: 1px solid var(--trait); border-radius: 999px; font-size: .85rem; color: var(--texte); }
.echange-dg__reagir { display: flex; flex-wrap: wrap; gap: .45rem; }
.echange-dg__reagir form { margin: 0; }
.echange-dg__emoji {
    font: inherit; font-size: 1.05rem; line-height: 1; padding: .35rem .65rem; cursor: pointer;
    background: var(--surface); color: var(--texte); border: 1px solid var(--trait); border-radius: 999px;
}
.echange-dg__emoji span { font-size: .85rem; font-weight: 700; }
.echange-dg__emoji:hover:not(:disabled) { border-color: var(--bleu); }
.echange-dg__emoji.est-choisi { border-color: var(--ligne); background: color-mix(in srgb, var(--ligne) 20%, var(--surface)); }
.echange-dg__emoji:disabled { cursor: default; opacity: .75; }
.echange-dg__statut--expire { border-color: var(--trait); color: var(--texte-2); }