/* Cordee : styles des écrans (skill design-ecrans). Couleurs en variables ; thème sombre sous prefers-color-scheme. */
:root {
  --fond: #f6f7f9;
  --surface: #ffffff;
  --texte: #14181f;
  --texte-discret: #4b5563;
  --bordure: #c9ced8;
  --accent: #3b5bdb;
  --accent-texte: #ffffff;
  --erreur: #b42318;
  --erreur-fond: #fdecea;
  --succes: #12663a;
  --succes-fond: #e6f4ec;
  --danger: #b42318;
  --attention: #8a5300;
  --attention-fond: #fdf1d8;
  --danger-texte: #ffffff;
  --ombre: 0 1px 2px rgb(20 24 31 / 6%), 0 8px 24px rgb(20 24 31 / 8%);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0f1217;
    --surface: #181c24;
    --texte: #e8ebf0;
    --texte-discret: #a3acba;
    --bordure: #3a4150;
    --accent: #7c93f5;
    --accent-texte: #0f1217;
    --erreur: #ff9b92;
    --erreur-fond: #3a1d1b;
    --succes: #6fd49a;
    --succes-fond: #14301f;
    --danger: #ff9b92;
    --attention: #f2c46d;
    --attention-fond: #3a2d10;
    --danger-texte: #0f1217;
    --ombre: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.centre {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.5rem 1rem;
}
.marque {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.logo {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: .45rem;
  background: var(--accent);
  box-shadow: inset -.45rem -.45rem 0 rgb(255 255 255 / 28%);
}
.carte {
  width: 100%;
  max-width: 30rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 1rem;
  box-shadow: var(--ombre);
  padding: 1.5rem 1.25rem;
}
@media (min-width: 640px) { .carte { padding: 2rem; } }
h1 { margin: 0 0 .25rem; font-size: 1.5rem; line-height: 1.25; }
.soustitre { margin: 0 0 1.25rem; color: var(--texte-discret); }
.champ { margin-bottom: 1rem; }
label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .95rem; }
input {
  width: 100%;
  min-height: 2.75rem;
  padding: .6rem .75rem;
  font: inherit;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: .6rem;
}
input[aria-invalid="true"] { border-color: var(--erreur); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mdp { position: relative; display: flex; }
.mdp input { padding-right: 5.5rem; }
.montrer { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); }
.montrer[hidden] { display: none; }
button {
  min-height: 2.75rem;
  padding: .6rem 1rem;
  font: inherit;
  font-weight: 600;
  border-radius: .6rem;
  border: 1px solid transparent;
  cursor: pointer;
}
button.plein { width: 100%; background: var(--accent); color: var(--accent-texte); }
button.plein:hover { filter: brightness(1.06); }
button:disabled { opacity: .6; cursor: progress; }
button.discret { background: transparent; color: var(--accent); min-height: 2.75rem; padding: .4rem .75rem; }
button.discret:hover { text-decoration: underline; }
.aide { margin: .35rem 0 0; font-size: .875rem; color: var(--texte-discret); }
.aide-liste { margin: 0 0 1rem; padding-left: 1.25rem; font-size: .9375rem; line-height: 1.5; }
.aide-liste li + li { margin-top: .35rem; }
.centre-texte { text-align: center; margin-top: 1rem; }
.erreur, .succes {
  display: flex;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border-radius: .6rem;
  font-size: .95rem;
}
.avertissement { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 8px; border: 1px solid var(--attention); color: var(--attention); background: var(--attention-fond); overflow-wrap: anywhere; }
.avertissement code { font-size: .9em; }
.erreur { color: var(--erreur); background: var(--erreur-fond); border: 1px solid var(--erreur); }
.succes { color: var(--succes); background: var(--succes-fond); border: 1px solid var(--succes); }
.pied { margin-top: 1rem; text-align: center; }
.pied .plein { margin-top: 0; }
.lien { color: var(--accent); }
.htmx-request button.plein { opacity: .6; cursor: progress; }

/* CO-4 : écrans de travail (projets, équipe, rôles) */
.barre {
  display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap;
  max-width: 48rem; margin: 0 auto; padding: .75rem 1rem;
}
.barre .marque { text-decoration: none; color: inherit; margin-right: auto; }
.barre form { margin: 0; }
.qui { color: var(--texte-discret); font-size: .9rem; overflow-wrap: anywhere; }
.app { max-width: 48rem; margin: 0 auto; padding: .5rem 1rem 3rem; }
.app h1 { margin-top: .5rem; }
.app h2 { margin: 0 0 .75rem; font-size: 1.15rem; line-height: 1.3; }
.app .carte { max-width: none; margin-top: 1.25rem; }
.fil { font-size: .9rem; color: var(--texte-discret); margin: .25rem 0; overflow-wrap: anywhere; }
.fil a { color: var(--accent); }
.liste, .resume { list-style: none; margin: 0; padding: 0; }
.liste > li {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: .85rem; margin-bottom: .6rem; box-shadow: var(--ombre);
}
.element {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .75rem; min-height: 3.5rem;
  padding: .7rem 1rem; color: inherit; text-decoration: none; border-radius: .85rem;
}
.element:hover { background: var(--fond); }
.element .nom { font-weight: 650; }
.element .fleche { margin-left: auto; color: var(--texte-discret); font-size: 1.4rem; }
.nom { font-weight: 650; overflow-wrap: anywhere; }
.meta { display: block; color: var(--texte-discret); font-size: .9rem; overflow-wrap: anywhere; }
.element .meta { display: inline; }
.element .haut { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; }
.resume li { display: flex; flex-direction: column; padding: .45rem 0; border-top: 1px solid var(--bordure); }
.resume li:first-child { border-top: 0; }
.compte {
  display: inline-block; min-width: 1.5rem; padding: 0 .45rem; margin-left: .35rem; text-align: center;
  font-size: .85rem; font-weight: 600; color: var(--texte-discret); border: 1px solid var(--bordure); border-radius: 1rem;
}
.vide { color: var(--texte-discret); padding: .5rem 0 1rem; }
.grille { display: grid; gap: 0 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grille { grid-template-columns: 1fr 1fr; } }
.action { margin: 1rem 0 0; }
.lien-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .4rem 1rem;
  font-weight: 600; text-decoration: none; color: var(--accent); border: 1px solid var(--bordure); border-radius: .6rem;
  background: transparent;
}
.lien-btn:hover { border-color: var(--accent); }
.lien-btn.danger-lien { color: var(--danger); }
.lien-btn.danger-lien:hover { border-color: var(--danger); }
.bloc-item { padding: .85rem 1rem; }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
details { margin-top: .5rem; }
summary {
  display: flex; align-items: center; min-height: 2.75rem; color: var(--accent); font-weight: 600; cursor: pointer;
}
details form { padding-top: .5rem; }
select {
  width: 100%; min-height: 2.75rem; padding: .6rem .75rem; font: inherit; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bordure); border-radius: .6rem;
}
button.second { background: transparent; color: var(--accent); border-color: var(--accent); }
button.danger { width: 100%; background: var(--danger); color: var(--danger-texte); }
.app form .plein { margin-top: .25rem; }

/* CO-5 : clés */
.large { grid-column: 1 / -1; }
.etat { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem; border-radius: 1rem; font-size: .85rem; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.etat-ligne { display: block; margin: .3rem 0; }
.etat-neutre { color: var(--texte-discret); }
.etat-succes { color: var(--succes); background: var(--succes-fond); }
.etat-attention { color: var(--attention); background: var(--attention-fond); }
.etat-erreur { color: var(--erreur); background: var(--erreur-fond); }
.resume .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.actions form { margin: 0; }
.actions button.plein { width: auto; margin-top: 0; }
.code-carte { border-color: var(--accent); margin-bottom: 1rem; }
.code {
  margin: 0 0 .75rem; padding: .75rem 1rem; text-align: center; font: 600 1.5rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em; background: var(--fond); border: 1px solid var(--bordure); border-radius: .6rem; overflow-wrap: anywhere; user-select: all;
}
pre.commande {
  margin: .25rem 0 .75rem; padding: .7rem .85rem; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all;
  font: .9rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; background: var(--fond); border: 1px solid var(--bordure); border-radius: .6rem;
}
button.copier[hidden] { display: none; }
.depart { margin-bottom: .75rem; }
.depart .meta { margin-bottom: .1rem; }

/* CO-6 : comptes (vue de l'administrateur) */
.lien-barre { color: var(--accent); font-weight: 600; text-decoration: none; padding: .6rem .25rem; }
.lien-barre:hover { text-decoration: underline; }
.adresse { overflow-wrap: anywhere; }
.carte-compte { position: relative; flex-direction: column; align-items: flex-start; gap: .15rem; padding-right: 2.5rem; }
.carte-compte .haut { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; }
.carte-compte .meta { display: block; }
.carte-compte .fleche { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); margin: 0; }
.soustitre .etat { margin: 0 .25rem .25rem 0; }
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1rem; }
.chiffre { margin: 0; padding: .6rem .5rem; text-align: center; background: var(--fond); border: 1px solid var(--bordure); border-radius: .75rem; }
.chiffre dt { color: var(--texte-discret); font-size: .85rem; line-height: 1.25; }
.chiffre dd { margin: .1rem 0 0; font-size: 1.75rem; font-weight: 650; line-height: 1.2; }
.carte .meta { margin: .25rem 0 0; }

/* CO-11 : idées et fonctionnalités */
textarea {
  width: 100%; min-height: 6rem; padding: .6rem .75rem; font: inherit; color: var(--texte); resize: vertical;
  background: var(--fond); border: 1px solid var(--bordure); border-radius: .6rem;
}
.cache { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.meta-inline { font-weight: 400; color: var(--texte-discret); }
.texte-libre { margin: .5rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.liste.idees > li, .liste.fonctionnalites > li { padding: 0; }
.liste.fonctionnalites { padding-left: 0; list-style: none; }
.liste.fonctionnalites > li { padding: .85rem 1rem; }
.sous-liste { list-style: none; margin: 0 .75rem .75rem 1rem; padding: 0 0 0 .75rem; border-left: 3px solid var(--bordure); }
.sous-liste > li { margin-top: .6rem; background: var(--fond); border: 1px solid var(--bordure); border-radius: .75rem; }
.alloue { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.alloue select { width: auto; min-width: 9rem; flex: 1 1 9rem; }
.alloue input[type="text"] { width: auto; min-width: 9rem; flex: 1 1 9rem; }
.rang {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; margin-right: .6rem;
  font-size: .9rem; font-weight: 650; color: var(--accent); border: 1px solid var(--accent); border-radius: 1rem;
}
.ordre { margin-top: 0; }
.ordre button { min-width: 2.75rem; padding: .4rem .6rem; }
.archives > summary { padding: 0; }
.archives .liste { margin-top: .75rem; }

/* CO-12 : lots et dépendances */
.liste.lots { padding-left: 0; list-style: none; }
.liste.lots > li { padding: .85rem 1rem; }
.lot .pastilles { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.lot .actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.lot .actions form { margin: 0; }
.lot details { margin-top: .6rem; }
.lot .criteres { margin-top: .4rem; }
.lot .resume li { flex-direction: row; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.compte { color: var(--texte-discret); font-weight: 400; }

/* CO-9 : choix d'un mode parmi plusieurs (reprise d'un lot), cartes cliquables d'au moins 44 px. */
fieldset.choix { margin: .9rem 0 1rem; padding: 0; border: 0; min-width: 0; }
fieldset.choix legend { padding: 0; margin-bottom: .5rem; font-weight: 600; font-size: .95rem; }
.option {
  display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 .5rem; padding: .7rem .85rem; min-height: 2.75rem;
  font-weight: 400; border: 1px solid var(--bordure); border-radius: .6rem; background: var(--fond); cursor: pointer;
}
.option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.option input[type="radio"] { width: 1.25rem; height: 1.25rem; min-height: 0; margin: .2rem 0 0; padding: 0; flex: none; accent-color: var(--accent); }
.option small { display: block; margin-top: .15rem; font-size: .875rem; color: var(--texte-discret); }

/* CO-14 : mise en production */
.bloc-item.prete { border-left: 4px solid var(--succes); background: var(--succes-fond); }
.production { margin-top: .6rem; }
.production .plein { width: auto; margin-top: .5rem; }

/* TB-1 : saisie du code de connexion du développeur */
.saisie-code { text-align: center; font: 600 1.6rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .25em; }

/* TB-2 : tableau des fonctionnalités (cartes, barre de lots, blocages). */
:root { --accent-fond: #e3e9ff; --barre-fond: #dfe3ea; }
@media (prefers-color-scheme: dark) { :root { --accent-fond: #222b4d; --barre-fond: #2b3342; } }
.sous-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
.lien-btn.actif { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.etat-accent { color: var(--accent); background: var(--accent-fond); }
.cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cartes { grid-template-columns: repeat(3, 1fr); } }
.cartes > .bloc-item { border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); box-shadow: var(--ombre); margin: 0; }
.cartes > .bloc-item.a-vous { border-left: 4px solid var(--accent); }
.cartes > .bloc-item.prete { border-left: 4px solid var(--succes); background: var(--succes-fond); }
.titre-carte { font-size: 1.05rem; margin: 0; overflow-wrap: anywhere; }
.titre-carte a { color: inherit; text-decoration: none; }
.titre-carte a:hover, .titre-carte a:focus-visible { text-decoration: underline; }
.pastilles { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.a-faire-prete { margin: .25rem 0 .5rem; font-weight: 600; color: var(--succes); }
.avance { margin: .5rem 0; }
.barre-lots { display: block; width: 100%; height: 8px; }
.barre-lots .b-fond { fill: var(--barre-fond); }
.barre-lots .b-termine { fill: var(--succes); }
.barre-lots .b-pris { fill: var(--attention); }
.bloques { margin-top: .6rem; padding: .5rem .7rem; border-radius: 8px; background: var(--erreur-fond); }
.liste-bloques, .causes { list-style: none; margin: .25rem 0 0; padding: 0; }
.liste-bloques li { margin: .35rem 0; }
.causes li { color: var(--erreur); font-size: .9rem; overflow-wrap: anywhere; }
.titre-section { margin: 1.5rem 0 .75rem; font-size: 1.1rem; }
.filtre { margin: 0 0 1rem; }
.maj { margin-top: 1rem; }
.cartes .actions.ordre { margin: 0; }

/* TB-2 (correctif IDEE-28) : le titre prend la place restante, les flèches ↑↓ ne passent jamais dessous. */
.ligne > .titre-carte { flex: 1 1 10rem; min-width: 0; }

/* TB-3 : sessions, messages, journal. */
a.lien-etat { text-decoration: none; }
a.lien-etat:hover, a.lien-etat:focus-visible { text-decoration: underline; }
.indic { display: none; margin-left: .5rem; color: var(--texte-discret); font-size: .9rem; }
.htmx-request .indic, .htmx-request.indic { display: inline; }
.filtres { display: grid; gap: 0 1rem; grid-template-columns: 1fr; margin: .5rem 0 1rem; }
@media (min-width: 720px) { .filtres { grid-template-columns: 1fr 1fr; } .filtres .actions { grid-column: 1 / -1; } }
.filtres input[type="date"] { min-height: 2.75rem; }
.liste.sessions, .liste.messages, .liste.evenements { margin-top: .5rem; }
.liste.sessions > li, .liste.messages > li, .liste.evenements > li { padding: .85rem 1rem; }
.session-rouge { border-left: 4px solid var(--erreur); background: var(--erreur-fond); }
.session-vivante { border-left: 4px solid var(--succes); }
.session-morte { border-left: 4px solid var(--bordure); }
.lots-session { list-style: none; margin: .5rem 0 0; padding: 0; }
.lot-session { margin: .5rem 0 0; padding-top: .5rem; border-top: 1px solid var(--bordure); }
.lot-session .actions { margin-top: .4rem; }
.evenement .ligne, .message .ligne { align-items: baseline; }
.message .texte-libre, .evenement .texte-libre { margin-top: .35rem; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 1rem 0; }
.pagination .meta { flex: 1 1 100%; order: -1; }
.session p, .message p, .evenement p { margin: .3rem 0; }
.session .ligne, .message .ligne, .evenement .ligne { margin-bottom: .2rem; }
.session .actions { margin-top: .5rem; }
@media (max-width: 719px) { .filtres .champ { margin-bottom: .7rem; } }
.boite-filtres { margin: .25rem 0 1rem; }
.boite-filtres > summary { min-height: 2.75rem; }