/* ==========================================================
   Boîte à suggestions : page des DG (Suggestions.php) et onglet Suggestions de l'ADMIN
   Mobile d'abord ; couleurs par variables du thème (sombre et clair)
   ========================================================== */

/* ---------- Page des DG ---------- */
.suggestions { display: grid; gap: 1.25rem; min-width: 0; }
.suggestions__entete .titre-section { margin-bottom: .5rem; }
.suggestions__entete p { margin: 0; }

.suggestions__message { margin: 0; padding: .75rem 1rem; border-radius: var(--rayon); border: 1px solid var(--trait); border-left: 4px solid var(--monte); background: var(--surface); font-weight: 700; }
.suggestions__message--erreur { border-left-color: var(--baisse); }

.suggestions__equipe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.suggestions__equipe label { font-weight: 700; }
.suggestions__equipe select, .suggestions__champ input, .suggestions__champ textarea {
    font: inherit;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: .55rem .7rem;
    min-width: 0;
}
.suggestions__equipe select { min-width: min(100%, 16rem); }
.suggestions__equipe select:focus, .suggestions__champ input:focus, .suggestions__champ textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }

.suggestions__connexion { max-width: 28rem; display: grid; gap: .75rem; }
.suggestions__connexion p { margin: 0; }
.suggestions__erreur { color: var(--baisse); font-weight: 700; }

.suggestions__corps { display: grid; gap: 1rem; align-items: start; }
.suggestions__formulaire { display: grid; gap: .9rem; }
.suggestions__qui { display: flex; align-items: center; gap: .65rem; padding-bottom: .75rem; border-bottom: 1px solid var(--trait); }
.suggestions__qui p { margin: 0; display: grid; line-height: 1.25; }
.suggestions__qui span { color: var(--texte-2); font-size: .9rem; }
.suggestions__champ { display: grid; gap: .3rem; font-weight: 700; }
.suggestions__champ textarea { resize: vertical; min-height: 12rem; line-height: 1.45; font-weight: 400; }
.suggestions__champ input { font-weight: 400; }

.suggestions__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.suggestions__bouton {
    font: inherit;
    font-weight: 700;
    padding: .6rem 1.2rem;
    border: 1px solid var(--accent-fond);
    border-radius: var(--rayon);
    background: var(--accent-fond);
    color: var(--accent-texte);
    cursor: pointer;
    justify-self: start;
}
.suggestions__bouton:hover { filter: brightness(1.1); }
.suggestions__bouton--second { background: var(--surface); border-color: var(--trait); color: var(--texte); }
.suggestions__bouton--second:hover { border-color: var(--bleu); filter: none; }

.suggestions__guide { display: grid; gap: .6rem; font-size: .95rem; }
.suggestions__guide p { margin: 0; }
.suggestions__guide ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.suggestions__exemple summary { cursor: pointer; font-weight: 700; color: var(--bleu); }
.suggestions__exemple pre {
    margin: .5rem 0 0;
    padding: .75rem;
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    white-space: pre-wrap;
    font: inherit;
    font-size: .88rem;
    line-height: 1.45;
}

.suggestions__miennes ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.suggestions__miennes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; padding: .55rem .75rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.suggestions__etat { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 4px; border: 1px solid var(--trait); color: var(--texte-2); }
.suggestions__etat--prise, .suggestions__etat--complete { border-color: var(--monte); color: var(--monte); }

.suggestions__sortie { margin: 0; }
.suggestions__lien { font: inherit; padding: 0; border: 0; background: none; color: var(--texte-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.suggestions__lien:hover { color: var(--texte); }

@media (min-width: 900px) {
    .suggestions__corps { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
    .suggestions__guide { position: sticky; top: 1rem; }
}

/* ---------- ADMIN : liste des suggestions ---------- */
.sugg-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.sugg-barre .filtres__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.sugg-barre .filtres__groupe a {
    padding: .3rem .75rem;
    border: 1px solid var(--trait);
    border-radius: 999px;
    color: var(--texte-2);
    font-weight: 700;
    font-size: .88rem;
}
.sugg-barre .filtres__groupe a:hover { color: var(--texte); text-decoration: none; }
.sugg-barre .filtres__groupe a[aria-current] { background: var(--accent-fond); border-color: var(--accent-fond); color: var(--accent-texte); }

.sugg { --couleur-p: var(--trait); display: grid; gap: .75rem; border-left: 5px solid var(--couleur-p); }
.sugg--p1 { --couleur-p: var(--baisse); }
.sugg--p2 { --couleur-p: var(--orange-brule); }
.sugg--p3 { --couleur-p: var(--or); }
.sugg--p4 { --couleur-p: var(--bleu); }
.sugg--p5 { --couleur-p: var(--texte-2); }
.sugg--prise { background: color-mix(in srgb, var(--monte) 7%, var(--surface)); }

.sugg__haut { display: flex; align-items: flex-start; gap: .75rem; }
.sugg__priorite {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 .3rem;
    border: 2px solid var(--couleur-p);
    border-radius: var(--rayon);
    font-family: var(--police-texte);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--texte);
}
.sugg__titre { min-width: 0; }
.sugg__titre h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }
.sugg__qui { display: flex; align-items: center; gap: .4rem; margin: .25rem 0 0; color: var(--texte-2); font-size: .85rem; }
.sugg__qui img { flex: none; }

.sugg__texte {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
    padding: .75rem;
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    max-height: 22rem;
    overflow-y: auto;
}

.sugg__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.sugg__form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.sugg__form label { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .9rem; }
.sugg__form select {
    font: inherit;
    font-weight: 400;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: .35rem .5rem;
}
.sugg__fin { margin-left: auto; }

/* Crochet vert « Pris en charge » : vraie case à cocher, cachée derrière un carré dessiné */
.sugg__crochet { position: relative; cursor: pointer; user-select: none; }
.sugg__crochet input { position: absolute; opacity: 0; width: 1.6rem; height: 1.6rem; margin: 0; cursor: pointer; }
.sugg__case {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--trait);
    border-radius: 6px;
    background: var(--fond);
    color: transparent;
    transition: background .15s, border-color .15s;
}
.sugg__crochet:hover .sugg__case { border-color: var(--monte); }
.sugg__crochet input:checked + .sugg__case { background: var(--monte); border-color: var(--monte); color: var(--fond); }
.sugg__crochet input:focus-visible + .sugg__case { outline: 2px solid var(--bleu); outline-offset: 2px; }
.sugg--prise .sugg__crochet { color: var(--monte); }

.sugg__completer { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.sugg__supprimer { color: var(--baisse); }