/* =============================================================================
   Styles des pages contributeur. Couleurs du projet en variables (« jetons ») ;
   L'interface utilise le bleu LUNIK ; le bordeaux #911537 reste celui des textes des cartes (dragon).
   ============================================================================= */
:root {
    /* Accent de l'interface : bleu LUNIK. --accent (foncé) pour les boutons et les liens, assez contrasté
       pour du texte ; --accent-clair (le bleu du bandeau) pour les éléments décoratifs. */
    --accent: #177384;
    --accent-fonce: #105a68;
    --accent-clair: #24A1B8;
    --fond: #faf6f2;
    --surface: #ffffff;
    --texte: #2b1d22;
    --texte-doux: #6f5e64;
    --bordure: #e6dcd6;
    --succes: #2e7d4f;
    --alerte: #b3261e;
    --attention: #a35c00;
    --rayon: 10px;
    /* Bandeau du site (en-tête) : bleu LUNIK. Le texte y est foncé : du blanc sur ce bleu
       ne serait pas assez contrasté pour être lisible en petite taille. */
    --bandeau: var(--accent-clair);
    --bandeau-texte: #06303a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: var(--accent); }

.entete {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 6px 16px; background: var(--bandeau); color: var(--bandeau-texte);
}
.entete a { color: var(--bandeau-texte); font-weight: 600; }
.entete__logo { display: block; line-height: 0; }
.entete__logo img { height: 56px; width: auto; display: block; }
.entete__nav { display: flex; gap: 1rem; align-items: center; font-size: .9rem; }

.pied {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px; color: var(--texte-doux); font-size: .85rem; border-top: 1px solid var(--bordure);
}
.pied img { width: 40px; height: 40px; }

.page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }

/* Vue admin « comme le contributeur » : rappel permanent qu'on regarde l'espace d'un autre. */
.bandeau-admin {
    position: sticky; top: 0; z-index: 20;
    background: #2b1d22; color: #fff; padding: 8px 16px; font-size: .9rem;
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.bandeau-admin a { color: #ffd7e2; margin-left: auto; }

.carte-blanche {
    background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
    padding: 24px; max-width: 440px; margin: 32px auto;
}
h1 { font-size: 1.5rem; margin: 0 0 1rem; }

label { display: block; font-weight: 600; margin: 0 0 .35rem; }
input[type=text], input[type=email], textarea, select {
    width: 100%; padding: .65rem .75rem; font: inherit; color: inherit;
    border: 1px solid var(--bordure); border-radius: 8px; background: #fff;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.champ { margin-bottom: 1rem; }
.aide { color: var(--texte-doux); font-size: .875rem; }

.bouton {
    display: inline-block; border: 0; border-radius: 8px; cursor: pointer;
    padding: .7rem 1.2rem; font: inherit; font-weight: 600; text-decoration: none;
    background: var(--accent); color: #fff;
}
.bouton:hover { background: var(--accent-fonce); }
.bouton--plein { width: 100%; }
.bouton--secondaire { background: transparent; color: var(--accent); border: 1px solid var(--accent); }

.alerte { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.alerte--erreur { background: #fdecea; color: var(--alerte); }
.alerte--succes { background: #e8f5ec; color: var(--succes); }
.alerte--info { background: #f3ece8; color: var(--texte); }

/* Suivi en 5 étapes (templates/_suivi.html.twig) */
.suivi { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 16px; margin: 16px 0 24px; }
.suivi__titre { font-size: 1rem; margin: 0 0 12px; }
.suivi__etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; counter-reset: etape; }
.suivi__etape { display: grid; justify-items: center; text-align: center; gap: 4px; position: relative; font-size: .85rem; color: var(--texte-doux); }
.suivi__etape:not(:last-child)::after {
    content: ""; position: absolute; top: 15px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: var(--bordure);
}
.suivi__etape--fait:not(:last-child)::after { background: var(--succes); }
.suivi__puce {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
    border: 2px solid var(--bordure); background: #fff; color: var(--texte-doux);
}
.suivi__etape--fait .suivi__puce { background: var(--succes); border-color: var(--succes); color: #fff; }
.suivi__etape--en_cours .suivi__puce { border-color: var(--accent); color: var(--accent); }
.suivi__etape--en_cours, .suivi__etape--fait { color: var(--texte); }
.suivi__etape--en_cours .suivi__libelle { font-weight: 700; }
.suivi__detail { font-size: .75rem; color: var(--texte-doux); }
.suivi__envoi { margin: 12px 0 0; }
@media (max-width: 600px) {
    .suivi__etapes { grid-template-columns: 1fr; }
    .suivi__etape { grid-template-columns: 30px 1fr; justify-items: start; text-align: left; align-items: center; column-gap: 10px; }
    .suivi__etape:not(:last-child)::after { display: none; }
    .suivi__detail { grid-column: 2; }
}
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Éditeur : contrepartie et modification par l'organisateur */
.ed-contrepartie { margin: -8px 0 8px; color: var(--texte-doux); font-weight: 600; }
.ed-modif-admin { background: #fff4e5; color: #8a4b00; padding: 8px 12px; border-radius: 8px; font-size: .9rem; }

/* « Mes cartes » */
.groupe { margin: 24px 0; }
.groupe__titre { font-size: 1.1rem; margin: 0 0 8px; }
.liste-cartes { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.liste-cartes__item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 12px 16px;
    color: inherit; text-decoration: none;
}
a.liste-cartes__item:hover { border-color: var(--accent-clair); }
.liste-cartes__droite { display: flex; gap: 12px; align-items: center; }
.liste-cartes__action { color: var(--accent); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.pastille { font-size: .8rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.pastille--vide { background: #eee; color: #555; }
.pastille--brouillon { background: #fff4e5; color: var(--attention); }
.pastille--a_valider { background: #e8f0fb; color: #1d4f91; }
.pastille--validee { background: #e8f5ec; color: var(--succes); }