/* 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%);
  --surligne: #fde68a; /* PBI 124 : mots trouvés dans l'extrait */
  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;
    --surligne: #5c4a12;
  }
}

*, *::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) */
.qui { color: var(--texte-discret); font-size: .9rem; overflow-wrap: anywhere; }
.app { width: 100%; min-width: 0; max-width: 48rem; margin: 0 auto; padding: .5rem 1rem 3rem; }
.app:focus { outline: none; }
.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; }
.evaluation { display: flex; flex-direction: column; gap: .35rem; padding: .8rem 1rem; }
.evaluation .texte-libre { margin: 0; }
.evaluation .haut, .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: minmax(0, 1fr); }
@media (min-width: 720px) { .grille { grid-template-columns: repeat(2, minmax(0, 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) */
.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 .nom { min-width: 0; overflow-wrap: anywhere; } /* PBI 233 : un nom de testeur de 40 caractères sans espace ne doit pas élargir la carte */
.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; --piste-fond: #dfe3ea; --barre-fond: #eef0f4; --survol: #e4e7ee; }
@media (prefers-color-scheme: dark) { :root { --accent-fond: #222b4d; --piste-fond: #2b3342; --barre-fond: #0b0e12; --survol: #1b202a; } }
.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, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cartes { grid-template-columns: repeat(3, minmax(0, 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(--piste-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; }

/* TB-4 : ossature des pages (en-tête, barre de menus à deux niveaux, menu de l'utilisateur). */
:root { --entete-h: 3.5rem; --barre-l: 16.5rem; }
[hidden] { display: none !important; }
body.avec-coque { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.evitement { position: absolute; left: -999rem; top: .5rem; z-index: 100; padding: .6rem 1rem; background: var(--accent); color: var(--accent-texte); border-radius: .6rem; font-weight: 600; }
.evitement:focus { left: .5rem; }
.entete {
  flex: none; display: flex; align-items: center; gap: .5rem; height: var(--entete-h); padding: 0 .75rem;
  background: var(--surface); border-bottom: 1px solid var(--bordure); position: relative; z-index: 30;
}
.entete .marque { margin-right: auto; text-decoration: none; color: inherit; min-width: 0; }
.bouton-menu { flex: none; width: 2.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--texte); border-color: var(--bordure); }
.bouton-menu:hover { border-color: var(--accent); }
.bm-barres, .bm-barres::before, .bm-barres::after { display: block; width: 1.15rem; height: 2px; background: currentColor; border-radius: 1px; }
.bm-barres { position: relative; }
.bm-barres::before, .bm-barres::after { content: ""; position: absolute; left: 0; }
.bm-barres::before { top: -6px; }
.bm-barres::after { top: 6px; }
.coque { flex: 1; min-height: 0; display: flex; position: relative; }
.barre-lat {
  flex: none; width: var(--barre-l); overflow-y: auto; overscroll-behavior: contain; background: var(--barre-fond);
  border-right: 1px solid var(--bordure); padding: .75rem .5rem 2rem;
}
.defilement { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
html[data-barre="repliee"] .barre-lat { display: none; }
.n1 { list-style: none; margin: 0; padding: 0; }
.n-lien {
  display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: .4rem .75rem; border-radius: .6rem;
  color: var(--texte-discret); text-decoration: none; overflow-wrap: anywhere; transition: background-color .15s ease, color .15s ease;
}
.n-lien:hover { background: var(--survol); color: var(--texte); }
.n1-lien { font-weight: 650; }
.n1-etiquette { display: flex; align-items: center; min-height: 2.75rem; padding: .4rem .75rem; }
.n-lien[aria-current="page"] { background: var(--surface); color: var(--texte); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent), var(--ombre); }
.n-lien[aria-current="page"] .icone { color: var(--accent); }
.voile { display: none; }
@media (max-width: 899px) {
  .barre-lat {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 20; width: min(18rem, 86vw); box-shadow: var(--ombre);
    transform: translateX(-102%); visibility: hidden; transition: transform .2s ease, visibility .2s;
  }
  html[data-menu="ouvert"] .barre-lat { transform: none; visibility: visible; }
  html[data-menu="ouvert"] .voile { display: block; position: absolute; inset: 0; z-index: 10; background: rgb(8 10 14 / 55%); }
  html[data-barre="repliee"] .barre-lat { display: block; }
}
@media (prefers-reduced-motion: reduce) { .barre-lat, .n-lien, .onglet { transition: none; } }
/* Menu de l'utilisateur */
.util { position: relative; flex: none; }
.util-formulaire { display: flex; align-items: center; gap: .35rem; margin: 0; }
.util-formulaire label { margin: 0; font-weight: 500; font-size: .9rem; color: var(--texte-discret); max-width: 9rem; overflow-wrap: anywhere; }
.util-formulaire select { width: auto; max-width: 12rem; min-height: 2.75rem; }
.util-bouton {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 16rem; background: transparent; color: var(--texte);
  border-color: var(--bordure); padding: .4rem .75rem;
}
.util-bouton:hover, .util-bouton[aria-expanded="true"] { border-color: var(--accent); }
.util-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.util-fleche { flex: none; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.util-liste {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 40; min-width: 15rem; padding: .35rem;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: .85rem; box-shadow: var(--ombre);
}
.util-liste form { margin: 0; }
.util-liste a, .util-liste button {
  display: flex; align-items: center; width: 100%; min-height: 2.75rem; padding: .4rem .75rem; border: 0; border-radius: .6rem;
  background: transparent; color: var(--texte); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.util-liste a:hover, .util-liste button:hover, .util-liste [role="menuitem"]:focus-visible { background: var(--fond); }
@media (max-width: 480px) { .entete .marque { font-size: 1.1rem; } .util-bouton { max-width: 8.5rem; } }

/* ORG-3 : projets d'une organisation (cartes) et paramètres */
.cartes-projets { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cartes-projets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cartes-projets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.projet-carte {
  display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; min-width: 0;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: .85rem; box-shadow: var(--ombre);
}
.projet-carte:hover { border-color: var(--accent); }
.app .projet-carte .projet-nom { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.projet-nom a { color: inherit; text-decoration: none; }
.projet-nom a:hover { color: var(--accent); }
.projet-description {
  margin: 0; flex: 1; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.projet-carte .meta { margin: 0; }
.projet-carte .actions { margin-top: .5rem; }
.ligne-surnom { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; width: 100%; margin: .35rem 0; }
.ligne-surnom input { flex: 1 1 10rem; min-width: 0; min-height: 2.75rem; padding: .5rem .75rem; font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--bordure); border-radius: .6rem; }
.carte-compte form { width: 100%; }
.carte-compte form .second { width: auto; }

/* ORG-6 : barre du haut de l'administrateur général et page des organisations en deux zones. */
.entete-haute { height: auto; min-height: var(--entete-h); flex-wrap: wrap; padding-top: .35rem; padding-bottom: .35rem; }
.entete-haute .marque { margin-right: 0; }
.barre-haut { flex: 1 1 auto; min-width: 0; }
.barre-haut .n1 { display: flex; flex-wrap: wrap; gap: .25rem; margin-left: .5rem; }
.barre-haut .n-lien { min-height: 2.5rem; padding: .3rem .9rem; }
@media (max-width: 599px) {
  .barre-haut { order: 3; flex-basis: 100%; }
  .barre-haut .n1 { margin-left: 0; }
  .barre-haut .n-lien { min-height: 2.75rem; }
}
.app:has(.md) { max-width: 74rem; }
.md { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; margin-top: .75rem; }
@media (min-width: 860px) { .md { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1.5rem; } }
.md-liste, .md-detail { min-width: 0; }
.md-entete { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.app .md-entete h2 { margin: 0; }
.lien-btn.nouveau { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); font-weight: 650; text-decoration: none; }
.lien-btn.nouveau:hover { filter: brightness(1.06); }
/* ORG-14 : en-tête d'une liste (titre, compteur, bouton de création) et page de formulaire seul. */
.entete-liste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.app .entete-liste { margin: .5rem 0 .25rem; }
.app .entete-liste h1 { margin: 0; }
.app .carte.carte-formulaire { max-width: 32rem; }
.carte-formulaire .actions { align-items: center; margin-top: 1rem; }
.md-liste .liste > li:has(.choisie) { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.md-liste .element.choisie { background: var(--accent-fond); }
.md-detail > .md-titre { margin-top: 0; overflow-wrap: anywhere; font-size: 1.4rem; }
.md-detail .carte:first-child { margin-top: 0; }
.app .md-detail h3 { margin: 0 0 .75rem; font-size: 1.05rem; }
.md-detail .liste { margin-bottom: 1rem; }
.md-invite { padding: 2rem 1rem; text-align: center; border: 1px dashed var(--bordure); border-radius: 1rem; }
.chiffres.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entete-haute .util { min-width: 0; max-width: 100%; }
@media (max-width: 599px) { .entete-haute .util { flex: 1 1 12rem; } .entete-haute .util-formulaire { flex-wrap: wrap; justify-content: flex-end; } }

/* ORG-9 : accueil public (sans coque). Variables du thème seulement ; se lit sans JavaScript. */
.accueil { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(60rem 28rem at 50% -8rem, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--fond); }
.accueil-haut { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: 64rem; margin: 0 auto; padding: 1rem; }
.accueil-corps { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 1rem 3rem; }
.heros { text-align: center; padding: 2.5rem 0 2rem; max-width: 42rem; margin: 0 auto; }
.surtitre { margin: 0 0 .75rem; font-size: .85rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-discret); }
.heros h1 { margin: 0 0 1rem; font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.1; letter-spacing: -.02em; }
.heros .accent { color: var(--accent); }
.chapeau { margin: 0 auto; max-width: 34rem; font-size: 1.125rem; color: var(--texte-discret); }
.heros-action { margin: 1.75rem 0 0; }
.lien-plein {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .6rem 1.75rem;
  font-weight: 650; text-decoration: none; color: var(--accent-texte); background: var(--accent); border-radius: .75rem;
  box-shadow: var(--ombre);
}
.lien-plein:hover { filter: brightness(1.08); }
.methode, .pour-qui, .utiliser { margin-top: 2rem; }
.methode h2, .pour-qui h2, .utiliser h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etapes li {
  counter-increment: etape; position: relative; display: flex; flex-direction: column; gap: .3rem;
  padding: 1.1rem 1.1rem 1.1rem 3.6rem; background: var(--surface); border: 1px solid var(--bordure); border-radius: 1rem; box-shadow: var(--ombre);
}
.etapes li::before {
  content: counter(etape); position: absolute; left: 1rem; top: 1rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  font-weight: 700; border-radius: 50%; color: var(--accent-texte); background: var(--accent);
}
.etapes strong { font-size: 1.05rem; }
.etapes span { color: var(--texte-discret); }
.pour-qui { padding: 1.5rem 1.25rem; background: var(--surface); border: 1px solid var(--bordure); border-radius: 1rem; box-shadow: var(--ombre); text-align: center; }
.pour-qui p { margin: 0 auto; max-width: 40rem; }
.pour-qui code { padding: .1em .4em; border-radius: .35rem; background: var(--fond); border: 1px solid var(--bordure); font-size: .9em; }
.pour-qui p.heros-action { margin-top: 1.25rem; }
/* PBI 110 : page « Intégrer Cordee » (prompt à copier, jeton, encadrés de configuration) */
.prompt-integration { margin: .5rem 0 .75rem; padding: .8rem 1rem; max-height: 26rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font: .88rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; background: var(--fond); border: 1px solid var(--bordure); border-radius: .6rem; }
.jeton-info { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin: .5rem 0; }
.integration .actions .copier { width: auto; margin-top: 0; }
.integration details { margin-top: .75rem; }
.integration summary { cursor: pointer; font-weight: 600; }
/* ENV-9.1 : PBI (arbre, fichier de conception en lecture) */
.liste.pbi > li { padding: .75rem 1rem; }
.liste.pbi ul.liste { margin: .6rem 0 0 .9rem; }
.liste.pbi .pbi-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; }
.liste.pbi .nom { font-weight: 650; overflow-wrap: anywhere; }
.filtres-activite { display: flex; flex-wrap: wrap; gap: .3rem .6rem; max-width: 100%; }
.filtres-activite a { flex: 0 0 auto; }
.liste.activite { width: 100%; max-width: 100%; }
.liste.activite > li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; max-width: 100%; }
.liste.activite time { white-space: nowrap; }
.liste.activite .texte-libre { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
pre.fichier-pbi {
  margin: .5rem 0 0; padding: .8rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere;
  font: .9rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; background: var(--fond); border: 1px solid var(--bordure); border-radius: .6rem;
}


/* ENV-11.2 : page « Machines » */
.machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: .85rem; list-style: none; padding: 0; margin: 1rem 0; }
.machine { border-left: 4px solid var(--bordure); }
.machine-vert { border-left-color: var(--succes); }
.machine-orange { border-left-color: var(--attention); background: var(--attention-fond); }
.machine-rouge { border-left-color: var(--erreur); background: var(--erreur-fond); }
.machine-tete { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; }
.machine-nom { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.machine .meta { margin: .15rem 0; }
.machine-pbi { list-style: none; margin: .6rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--bordure); display: grid; gap: .4rem; }
.machine-pbi .element { display: block; }
.machine-pbi .meta { display: block; }
.machine-pbi a { color: var(--accent); font-weight: 600; text-decoration: none; }
.machine-pbi a:hover { text-decoration: underline; }
.muet { color: var(--attention); }
.machine-rouge .muet { color: var(--erreur); }

/* PBI 159 : compteur « non lus » de la barre de menus et boîte du titulaire. */
.pastille-nav { display: inline-block; min-width: 1.4rem; margin-left: .35rem; padding: 0 .4rem; border-radius: 1rem; font-size: .8rem; font-weight: 700; line-height: 1.4rem; text-align: center; color: var(--attention); background: var(--attention-fond); border: 1px solid var(--attention); }
.boite-lien { display: flex; flex-direction: column; gap: .25rem; min-height: 2.75rem; color: inherit; text-decoration: none; }
.boite-lien:hover .nom, .boite-lien:focus-visible .nom { text-decoration: underline; }
.bloc-item.message.nouveau { border-left: 4px solid var(--accent); }
.ecrire textarea, .ecrire input[type="text"], .ecrire select { max-width: 100%; }
/* PBI 103 : page des PBI (barre de filtres, cartes sans lots, tests et corrections en retrait) et page du PBI (lots en arbre). */
.filtres-pbi { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; }
.filtre-pbi { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .35rem .8rem; border: 1px solid var(--bordure); border-radius: 999px;
  background: var(--surface); color: var(--texte); text-decoration: none; font-size: .92rem; }
.filtre-pbi:hover { border-color: var(--accent); }
.filtre-pbi:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.filtre-pbi .compte { min-width: 1.6rem; padding: 0 .4rem; border-radius: 999px; background: var(--fond); color: var(--texte-discret); font-size: .8rem; font-weight: 650; text-align: center; }
.filtre-pbi[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); font-weight: 650; }
.filtre-pbi[aria-current] .compte { background: var(--accent-texte); color: var(--accent); }
/* PBI 124 : recherche plein texte (zone rapide, recherche avancée dépliable à droite, extrait surligné sur la carte). */
.recherche-pbi { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: start; margin: 0 0 1rem; }
.recherche-rapide { min-width: 0; }
.recherche-ligne { display: flex; flex-wrap: wrap; gap: .5rem; }
.recherche-ligne input { flex: 1 1 14rem; width: auto; min-width: 0; }
button.chercher { background: var(--accent); color: var(--accent-texte); }
.recherche-avancee { margin-top: 1.75rem; }
.recherche-avancee[open] { grid-column: 1 / -1; margin-top: .5rem; }
.champs-avances { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: start; padding-top: .25rem; }
.recherche-avancee fieldset { margin: 0; padding: .35rem .75rem .5rem; min-width: 0; border: 1px solid var(--bordure); border-radius: .6rem; background: var(--surface); }
.recherche-avancee legend { padding: 0 .3rem; font-weight: 600; font-size: .95rem; }
.recherche-avancee .champ { margin: 0; }
.choix { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; margin: 0; font-weight: 400; }
.choix input { width: 1.2rem; height: 1.2rem; min-height: 0; padding: 0; accent-color: var(--accent); }
/* PBI 228 : téléchargement des archives (cases sur les cartes, période). */
.archives-telechargement { margin-bottom: 1rem; }
fieldset.portee-archives { margin: .9rem 0 1rem; padding: 0; border: 0; min-width: 0; }
fieldset.portee-archives legend { padding: 0; margin-bottom: .5rem; font-weight: 600; font-size: .95rem; }
.case-archive { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; margin: .25rem 0 0; font-weight: 400; color: var(--texte-discret); }
.case-archive input { width: 1.2rem; height: 1.2rem; min-height: 0; padding: 0; accent-color: var(--accent); }
.champs-periode { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; margin: .5rem 0; }
.champs-periode .champ { margin: 0; }
.extrait-pbi { margin: .35rem 0 0; color: var(--texte-discret); font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.extrait-pbi mark { padding: 0 .1rem; border-radius: .2rem; background: var(--surligne); color: var(--texte); }
@media (max-width: 640px) { .recherche-pbi { grid-template-columns: minmax(0, 1fr); } .recherche-avancee { margin-top: .25rem; } }
.cartes-pbi { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 760px) { .cartes-pbi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cartes-pbi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.groupe-pbi { min-width: 0; }
.sous-cartes { list-style: none; margin: .5rem 0 0 1rem; padding: 0 0 0 .75rem; border-left: 2px solid var(--bordure); display: grid; gap: .5rem; }
.sous-cartes.seules { margin: 0; padding: 0; border: 0; }
.carte-pbi { padding: .8rem 1rem; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); box-shadow: var(--ombre); min-width: 0; }
.carte-pbi.prete { border-left: 4px solid var(--succes); }
.sous-cartes .carte-pbi { box-shadow: none; padding: .6rem .8rem; }
.sous-cartes .titre-carte { font-size: .98rem; }
.carte-pbi .pastilles { margin: .45rem 0 .3rem; }
.carte-pbi .meta { margin: .15rem 0; overflow-wrap: anywhere; }
.carte-pbi .bloque { color: var(--attention); font-weight: 600; }
.marque-rouge { font-weight: 700; }
.arbre-lots { list-style: none; margin: .25rem 0 0; padding: 0; }
.arbre-lots .arbre-lots { margin: .4rem 0 0 1rem; padding-left: .75rem; border-left: 2px solid var(--bordure); }
.arbre-lots > li { padding: .45rem 0; border-bottom: 1px solid var(--bordure); }
.arbre-lots > li:last-child { border-bottom: 0; }
.lot-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; overflow-wrap: anywhere; }
.arbre-lots details { margin: .3rem 0 0; }
.arbre-lots summary { cursor: pointer; color: var(--accent); min-height: 32px; }
.criteres-lot { margin: .3rem 0 0; padding: .6rem .8rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--fond); border-radius: 8px; font-size: .92rem; }
.actions-titulaire form, .actions-titulaire details { margin: 0 0 .75rem; }
/* PBI 104 : mode édition de la page des PBI (poignée, flèches, cases, boîtes « Regrouper » et « Détacher »). */
.barre-edition { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .75rem; }
.outils-edition { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .4rem; }
.outils-edition form { margin: 0; }
.poignee { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--texte-discret); font-size: 1.3rem; cursor: grab; user-select: none; }
.fleche-ordre { min-width: 44px; min-height: 44px; padding: .3rem .6rem; font-size: 1.1rem; }
.case-regroupe { box-sizing: border-box; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--bordure); border-radius: .6rem; background: var(--surface); font-weight: 600; cursor: pointer; }
.case-regroupe:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.case-regroupe input, .lot-tete input[type="checkbox"] { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; accent-color: var(--accent); }
.lot-tete input[type="checkbox"] { margin: 0 .25rem 0 0; }
.lot-tete label { cursor: pointer; }
.form-regrouper { margin: 0 0 .75rem; }
.groupe-pbi.en-edition[draggable="true"] { cursor: grab; }
.groupe-pbi.glisse { opacity: .5; }
.groupe-pbi.depot-avant > .carte-pbi { box-shadow: 0 -4px 0 0 var(--accent); }
.groupe-pbi.depot-apres > .carte-pbi { box-shadow: 0 4px 0 0 var(--accent); }
.boite-edition { border-color: var(--accent); }
form.boite-edition { margin: .75rem 0 0; padding: .8rem 1rem; border: 1px solid var(--accent); border-radius: 12px; background: var(--fond); }
.boite-edition h3 { margin-top: 0; }
.boite-edition .aide { margin-bottom: .75rem; }
.apercu-lots { margin: .25rem 0 .75rem; padding-left: 1.25rem; }
.apercu-lots li { padding: .2rem 0; overflow-wrap: anywhere; }
@media (max-width: 759px) { .poignee { display: none; } } /* colonne étroite : la case garde son nom pour les lecteurs d'écran et en infobulle */
.groupe-pbi.en-edition { container-type: inline-size; }
@container (max-width: 300px) {
  .outils-edition { flex-wrap: nowrap; }
  .poignee { min-width: 28px; }
  .case-regroupe { padding: 0 .75rem; margin-left: auto; }
  .libelle-case { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
} /* téléphone : les flèches remplacent le glisser */
/* PBI 199 : gestes du titulaire (rendre, archiver, supprimer, annuler) sur les cartes du mode édition. */
.gestes-edition { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: 0 0 .4rem; }
.gestes-edition details { margin: 0; }
.gestes-edition details[open] { flex: 1 1 100%; }

/* Marques longues (rendu à la conception, attente) : retour à la ligne dans la carte */
.marque-rendu, .marque-attente { white-space: normal; max-width: 100%; align-items: flex-start; border-radius: .6rem; overflow-wrap: anywhere; }

/* PBI 205 : barre à icônes, cartes plus lisibles, place au travail qui pulse, vue Colonnes du Tableau. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { flex: none; width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.n-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-lien .pastille-nav { flex: none; }
.code-pbi { display: inline-block; padding: 0 .45rem; border-radius: .4rem; background: var(--accent-fond); color: var(--accent); font: 600 .85em/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.nom-pbi { font-weight: 700; }
.ligne-lots { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .75rem; }
.taille-pbi { font-weight: 600; }
.attend-pbi { padding-left: .5rem; border-left: 3px solid var(--attention); }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.point-vivant { display: inline-block; width: .6rem; height: .6rem; margin-right: .15rem; border-radius: 50%; background: var(--succes); animation: pouls 1.8s ease-out infinite; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 var(--succes); } 70% { box-shadow: 0 0 0 .5rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.carte-pbi { transition: transform .15s ease, box-shadow .15s ease; }
.carte-pbi:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .point-vivant { animation: none; }
  .carte-pbi { transition: none; }
  .carte-pbi:hover { transform: none; }
}
/* Vue Colonnes : seulement sur grand écran, lecture seule ; la liste reste la vue par défaut. */
.vues-pbi { display: none; gap: .4rem; margin: 0 0 .75rem; }
.vues-pbi button[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.vue-colonnes { display: none; }
@media (min-width: 1000px) {
  .vues-pbi { display: flex; }
  html[data-vue-pbi="colonnes"] #zone:not(.edition) .vue-liste { display: none; }
  html[data-vue-pbi="colonnes"] #zone:not(.edition) .vue-colonnes { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
}
.colonne-pbi { min-width: 0; padding: .75rem; border-radius: 12px; background: var(--barre-fond); border: 1px solid var(--bordure); }
.titre-colonne { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .75rem; font-size: 1rem; }
.titre-colonne .compte { min-width: 1.6rem; padding: 0 .5rem; border-radius: 1rem; background: var(--surface); border: 1px solid var(--bordure); font-size: .85rem; text-align: center; }
.cartes-colonne { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
.cartes-colonne > li { min-width: 0; }
.colonne-pbi .vide { margin: 0; color: var(--texte-discret); }
.colonne-pbi .carte-pbi { padding: .65rem .7rem; }
.colonne-pbi .etat { max-width: 100%; box-sizing: border-box; font-size: .8rem; white-space: normal; overflow-wrap: break-word; }

/* PBI 206 : menu à cinq entrées, onglets des pages regroupées, sélecteur de projet en haut de la barre. */
.n-titre { margin: 1rem 0 .15rem; padding: .4rem .75rem .2rem; font-size: .8rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-discret); border-top: 1px solid var(--bordure); }
.selecteur { position: relative; margin: 0 0 .75rem; }
.selecteur-titre { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; margin: 0; padding: .4rem .75rem; border: 1px solid var(--bordure); border-radius: .6rem; background: var(--surface); color: var(--texte); font-weight: 700; }
.selecteur-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selecteur-bouton { cursor: pointer; list-style: none; }
.selecteur-bouton::-webkit-details-marker { display: none; }
.selecteur-bouton:hover { background: var(--survol); }
.selecteur-fleche { flex: none; width: .55rem; height: .55rem; margin-right: .2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.1rem) rotate(45deg); transition: transform .15s ease; }
.selecteur[open] .selecteur-fleche { transform: translateY(.1rem) rotate(-135deg); }
.selecteur-liste { position: absolute; z-index: 5; left: 0; right: 0; max-height: 60vh; overflow-y: auto; margin: .25rem 0 0; padding: .3rem; list-style: none; background: var(--surface); border: 1px solid var(--bordure); border-radius: .6rem; box-shadow: var(--ombre); }
.selecteur-lien { display: block; min-height: 2.75rem; padding: .7rem .75rem; border-radius: .5rem; color: var(--texte); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selecteur-lien:hover { background: var(--survol); }
.selecteur-lien[aria-current="true"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.selecteur-tous { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--bordure); }
.selecteur-tous .selecteur-lien { color: var(--accent); font-weight: 600; }
.onglets { margin: 0 0 1rem; border-bottom: 1px solid var(--bordure); overflow-x: auto; overscroll-behavior-x: contain; }
.onglets ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.onglet { display: flex; align-items: center; max-width: 16rem; min-height: 2.75rem; padding: .4rem .9rem; border-bottom: 3px solid transparent; color: var(--texte-discret); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.onglet:hover { background: var(--survol); color: var(--texte); }
.onglet[aria-current="page"] { color: var(--texte); border-bottom-color: var(--accent); }
.onglet-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.onglet .pastille-nav { flex: none; }

/* PBI 207 : palette « Aller à… » (Ctrl+K) et barre flottante du téléphone. */
.aller { margin: 0 0 .5rem; }
.aller-lien { border: 1px solid var(--bordure); background: var(--surface); }
.touche { display: inline-block; flex: none; margin-left: auto; padding: 0 .4rem; border: 1px solid var(--bordure); border-bottom-width: 2px; border-radius: .4rem; background: var(--surface); color: var(--texte-discret); font: 600 .75rem/1.4rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.palette { width: min(34rem, 92vw); max-height: min(28rem, 82dvh); margin: 12vh auto auto; padding: 0; border: 1px solid var(--bordure); border-radius: 1rem; background: var(--surface); color: var(--texte); box-shadow: var(--ombre), 0 24px 60px rgb(8 10 14 / 28%); overflow: hidden; }
.palette[open] { display: flex; flex-direction: column; }
.palette::backdrop { background: rgb(8 10 14 / 45%); backdrop-filter: blur(3px); }
.palette-form { flex: none; margin: 0; border-bottom: 1px solid var(--bordure); }
.palette-champ { display: flex; align-items: center; gap: .65rem; padding: .35rem 1rem; color: var(--texte-discret); }
.palette-champ:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.palette-champ input { flex: 1; min-width: 0; min-height: 3rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--texte); font-size: 1rem; box-shadow: none; }
.palette-champ input:focus, .palette-champ input:focus-visible { outline: none; box-shadow: none; }
.palette-champ input::-webkit-search-cancel-button { display: none; }
.palette-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .35rem .5rem .5rem; }
.palette-groupe ul { margin: 0; padding: 0; list-style: none; }
.palette-titre-groupe { margin: .6rem .5rem .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-discret); }
.palette-ligne { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: .35rem .6rem; border-radius: .6rem; color: var(--texte); text-decoration: none; }
.palette-ligne:hover { background: var(--survol); }
.palette-ligne[aria-selected="true"] { background: var(--accent-fond); box-shadow: inset 3px 0 0 var(--accent); }
.palette-ligne[aria-selected="true"] .icone { color: var(--accent); }
.palette-texte { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.palette-libelle, .palette-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-libelle { font-weight: 600; }
.palette-detail { font-size: .85rem; color: var(--texte-discret); }
.palette-vide { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--texte-discret); }
.palette-aide { flex: none; display: flex; align-items: center; gap: .35rem; margin: 0; padding: .5rem 1rem; border-top: 1px solid var(--bordure); font-size: .8rem; color: var(--texte-discret); }
.palette-aide .touche { margin-left: 0; }
.recherche-aller { max-width: 32rem; margin: 0 0 1rem; }
.palette-resultats { max-width: 40rem; }
.page-plus { max-width: 32rem; }
.feuille-liste { margin: 0; padding: 0; list-style: none; }
.feuille-lien { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 2.75rem; padding: .4rem .75rem; border: 0; border-radius: .7rem; background: transparent; color: var(--texte); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.feuille-lien:hover { background: var(--survol); }
.feuille-lien[aria-current="page"] { background: var(--accent-fond); color: var(--accent); }
.feuille-compte { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--bordure); }
.feuille-qui { margin: 0; padding: .3rem .75rem; font-size: .85rem; color: var(--texte-discret); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feuille-qui strong { color: var(--texte); }
.zone-tel, .feuille-voile { display: none; }
@media (max-width: 759px) {
  .zone-tel { display: block; }
  html[data-feuille="ouverte"] .feuille-voile { display: block; position: fixed; inset: 0; z-index: 39; background: rgb(8 10 14 / 40%); }
  .barre-tel { position: fixed; z-index: 40; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); border: 1px solid var(--bordure); border-radius: 1.2rem; background: var(--surface); background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(14px); box-shadow: var(--ombre), 0 10px 30px rgb(8 10 14 / 18%); }
  .tel-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem; margin: 0; padding: .35rem; list-style: none; }
  .tel-lien { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3.25rem; padding: .35rem .2rem; border-radius: .9rem; color: var(--texte-discret); font-size: .75rem; font-weight: 600; text-decoration: none; }
  .tel-lien:hover { background: var(--survol); color: var(--texte); }
  .tel-lien[aria-current="page"] { background: var(--accent-fond); color: var(--accent); font-weight: 700; }
  .tel-texte { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tel-lien .pastille-nav { position: absolute; top: .1rem; left: calc(50% + .35rem); min-width: 1.25rem; margin: 0; padding: 0 .3rem; font-size: .7rem; line-height: 1.1rem; }
  .feuille { position: fixed; z-index: 41; left: .75rem; right: .75rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); max-height: calc(100dvh - 8rem); overflow-y: auto; padding: .5rem; border: 1px solid var(--bordure); border-radius: 1.2rem; background: var(--surface); box-shadow: var(--ombre), 0 10px 30px rgb(8 10 14 / 22%); animation: feuille-monte .15s ease-out; }
  .coque:has(.barre-tel) .app { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
}
@keyframes feuille-monte { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .feuille { animation: none; } }
@media (max-width: 759px) { .palette-aide { display: none; } }

/* PBI 231 : pages « Cas de test » */
.code-cas { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; color: var(--accent); margin-right: .35rem; }
.cas-section h2, .cas-origine h2 { margin-top: 0; }
.cas-texte { margin: 0; }
.cas-gestes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.cas-gestes form { margin: 0; }
.cas-gestes button { width: auto; }
.fichier-cas { width: 100%; min-height: 16rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.5; }
.formulaire-cas small { display: block; margin-top: .25rem; color: var(--texte-discret); }

/* PBI 234 : page « Campagne » */
.liste.campagne-cas > li { padding: .85rem 1rem; }
.liste.campagne-histo > li { padding: 0; }
.campagne-gestes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .6rem; }
.campagne-gestes form, .campagne-attribuer { margin: 0; }
.campagne-attribuer { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.campagne-attribuer select { flex: 1 1 9rem; width: auto; min-width: 0; max-width: 100%; }
.liste.campagne-cas .haut { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; }
.campagne-gestes .campagne-attribuer { flex: 1 1 100%; min-width: 0; }
.campagne-gestes button, .campagne-attribuer button { width: auto; }
.campagne-avancement { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.campagne-avancement .nom { font-size: 1.5rem; font-weight: 700; }
/* PBI 235 : exécution des cas par le testeur et exécutions vues par l'équipe */
.liste.testeur-cas > li { padding: 0; }
.liste.testeur-cas > li > .haut, .liste.testeur-cas > li > .meta { padding-left: 1rem; padding-right: 1rem; }
.liste.testeur-cas > li > .haut { padding-top: .85rem; }
.liste.testeur-cas > li > .meta:last-child, .liste.testeur-cas > li > .texte-libre { padding-bottom: .85rem; }
.liste.testeur-cas > li > .texte-libre { padding-left: 1rem; padding-right: 1rem; }
.liste.testeur-cas .haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .6rem; }
.testeur-portee summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.testeur-verdict { border: 0; padding: 0; margin: 0 0 1rem; }
.testeur-verdict legend { font-weight: 600; padding: 0; margin-bottom: .4rem; }
.testeur-verdict .choix { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .35rem .6rem; border: 1px solid var(--bordure); border-radius: .5rem; margin-bottom: .5rem; cursor: pointer; }
.testeur-verdict .choix input { width: 1.25rem; height: 1.25rem; flex: none; margin: 0; }
.campagne-executions { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.campagne-executions li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; border-left: 3px solid var(--bordure); padding-left: .6rem; }
.campagne-executions .texte-libre { flex: 1 1 100%; margin: 0; }