:root {
  --paper: #faf9f6;
  --raised: #ffffff;
  --rule: #dcdad2;
  --rule-soft: #ebe9e2;
  --ink: #111110;
  --ink-muted: #5c5b55;
  --ink-faint: #6e6d66;
  --busy: #111110;
  --hold: #b4b1a6;
  --rule-fort: #c2beb3;
  --unknown: #e8e6dd;
  --accent: #cc2200;
  --accent-quiet: #f7e4e0;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0e0c;
    --raised: #171714;
    --rule: #34332e;
    --rule-soft: #24241f;
    --ink: #f4f2ec;
    --ink-muted: #a5a39a;
    --ink-faint: #8b897f;
    --busy: #f4f2ec;
    --hold: #5a584f;
    --rule-fort: #4a4941;
    --unknown: #232219;
    --accent: #ff5233;
    --accent-quiet: #2d100a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
h1 { font-size: 30px; line-height: 34px; font-weight: 800; }
h2 { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: var(--accent); }
button { font-family: inherit; border-radius: 0; cursor: pointer; }
input, select { font-family: inherit; border-radius: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-bottom: 96px; }
@media (min-width: 900px) {
  .wrap { padding: 0 40px; }
  main.wrap { padding-bottom: 120px; }
}

.lab {
  font-family: var(--mono); font-size: 11px; line-height: 14px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.mono { font-family: var(--mono); font-size: 13px; line-height: 20px; font-weight: 500; }
.faint { color: var(--ink-faint); font-size: 13px; line-height: 20px; }
.err { color: var(--accent); }

/* ---------- barre du haut ---------- */
header.top { border-bottom: 2px solid var(--ink); position: relative; }
.topbar { display: flex; align-items: center; gap: 12px; min-height: 60px; flex-wrap: nowrap; }
.sq { width: 12px; height: 12px; background: var(--accent); flex-shrink: 0; display: inline-block; }
/* Le nom reste Dispo, « crew » est une précision, pas une seconde
   moitié : plus petit, en chasse fixe, en accent. Le carré rouge quitte
   le logo, il marque maintenant l'onglet où l'on se trouve. */
.brand { display: inline-flex; align-items: baseline; gap: 3px; text-decoration: none; color: var(--ink); }
.brand-nom { font-weight: 800; font-size: 15px; letter-spacing: 0.07em; }
.brand-crew {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--accent);
}

nav.mainnav { display: flex; gap: 2px; margin-left: 20px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
nav.mainnav::-webkit-scrollbar { display: none; }
.pastille { display: inline-block; width: 7px; height: 7px; background: var(--accent); margin-left: 6px; vertical-align: 2px; }
nav.mainnav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 19px 12px; white-space: nowrap; text-decoration: none;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted); border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
/* Le carré du logo, en plus petit, suit l'onglet où l'on se trouve. */
/* Deux signaux distincts, qui se confondaient tant qu'ils avaient la même
   forme. L'onglet courant se dit par la couleur du texte et le trait sous
   l'onglet ; le carré rouge ne sert plus qu'à annoncer ce qui attend. */
nav.mainnav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
nav.mainnav a[aria-current="page"] .pastille { background: var(--ink); }

.spacer { flex: 1; }

.avatarbtn {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 6px 0; color: var(--ink);
}
.av {
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--unknown); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-muted);
  object-fit: cover; overflow: hidden;
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.big { width: 96px; height: 96px; font-size: 24px; }

.menu {
  position: absolute; right: 16px; top: 58px; z-index: 40; min-width: 240px;
  background: var(--raised); border: 1px solid var(--ink); padding: 6px 0;
}
@media (min-width: 900px) { .menu { right: 40px; } }
.menu a, .menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 10px 16px; font-size: 14px; color: var(--ink); text-decoration: none;
}
.menu a:hover, .menu button:hover { background: var(--unknown); }
.menu .sep { height: 1px; background: var(--rule); margin: 6px 0; }
.menu .danger { color: var(--accent); }
.menu .head { padding: 8px 16px 12px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; }

main { padding: 32px 0 96px; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sechead { display: flex; align-items: flex-end; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.line { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.notice { border: 1px solid var(--rule); padding: 14px; }
.banner { background: var(--accent-quiet); padding: 16px; display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.banner .sq { margin-top: 5px; }
.empty { padding: 28px 0; color: var(--ink-muted); }

.btn {
  height: 44px; padding: 0 18px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.btn.primary { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn.small { height: 34px; padding: 0 12px; }
.btn.quiet { border-color: var(--rule); color: var(--ink-muted); }
.btn:disabled { opacity: 0.45; cursor: default; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field input, .field select {
  height: 44px; padding: 0 12px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); font-size: 15px; width: 100%;
}
.field input[type="date"] { font-family: var(--mono); font-size: 13px; }

/* ---------- page publique ---------- */
.hero { padding: 88px 0 72px; }
.hero h1 { font-size: 40px; line-height: 40px; letter-spacing: -0.03em; max-width: 12ch; }
@media (min-width: 760px) { .hero h1 { font-size: 64px; line-height: 60px; letter-spacing: -0.035em; } }
.hero p { margin-top: 24px; max-width: 46ch; color: var(--ink-muted); }
.hero .row { margin-top: 36px; }

.trois { display: grid; grid-template-columns: 1fr; gap: 36px; border-top: 2px solid var(--ink); padding-top: 28px; }
@media (min-width: 860px) { .trois { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.trois h2 { font-size: 22px; line-height: 26px; font-weight: 700; letter-spacing: -0.015em; }
.trois p { color: var(--ink-muted); margin-top: 8px; }

.legende { display: flex; flex-direction: column; gap: 10px; }
.legende .l { display: flex; align-items: center; gap: 14px; }

footer.bas { border-top: 1px solid var(--rule); padding: 20px 0 40px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }

/* ---------- calendrier ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dow { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-muted); padding-bottom: 4px; }
.cell {
  min-height: 58px; padding: 6px; border: 1px solid var(--rule); background: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  text-align: left; gap: 4px; color: inherit;
}
.cell .n { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.cell .w { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; }
.cell.out { opacity: 0.35; }
.cell.libre { border-color: var(--ink); }
.cell.pris { background: var(--busy); border-color: var(--busy); color: var(--paper); }

.swatch { width: 18px; height: 18px; border: 1px solid var(--rule); flex-shrink: 0; display: inline-block; }
.swatch.libre { border-color: var(--ink); background: var(--paper); }
.swatch.pris { background: var(--busy); border-color: var(--busy); }

/* ---------- résultats ---------- */
.scroller { overflow-x: auto; padding-bottom: 6px; }
.mrow { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); min-width: 660px; }
.mname { width: 170px; flex-shrink: 0; font-weight: 600; text-decoration: none; }
.mniv { width: 34px; flex-shrink: 0; }
.mcanton { width: 70px; flex-shrink: 0; }
.grid { display: flex; gap: 2px; flex: 1; min-width: 0; }
/* Un jour libre est plein : c'est ce qu'on cherche, donc ce qui doit
   sauter aux yeux. Un jour pris est creux et barré, pour que la lecture
   ne repose pas seulement sur le remplissage. */
.g {
  flex: 1; min-width: 10px; max-width: 26px; height: 24px;
  border: 1px solid var(--ink); background: var(--ink);
}
.g.no {
  background: var(--paper); border-color: var(--rule-fort);
  background-image: linear-gradient(135deg, transparent 44%, var(--rule-fort) 44%, var(--rule-fort) 56%, transparent 56%);
}
/* Une légende de grille est un rappel, pas un titre : elle tient sur une
   ligne. Nom distinct de .legende, qui appartient à la page d'accueil. */
.legende-grille { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.legende-grille .item { display: flex; align-items: center; gap: 5px; }
.legende-grille .g { flex: none; width: 11px; height: 11px; }
.legende-grille .lab, .legende-grille .faint { font-size: 11px; letter-spacing: 0.04em; }
.mcov { width: 56px; flex-shrink: 0; text-align: right; font-weight: 600; }
.pair { border-left: 3px solid var(--ink); padding-left: 12px; margin-bottom: 16px; }

table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
table.t td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
table.t input, table.t select { height: 38px; padding: 0 8px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); font-size: 14px; width: 100%; }

.auth { max-width: 400px; margin: 64px auto 0; display: flex; flex-direction: column; gap: 18px; }
.prose { max-width: 62ch; }
.prose h2 { margin-top: 28px; }
.prose p { margin-top: 10px; color: var(--ink-muted); }

/* ---------- modale ---------- */
.modal {
  position: fixed; inset: 0; z-index: 90; background: rgba(17,17,16,0.55);
  display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto;
}
.sheet {
  background: var(--raised); border: 2px solid var(--ink);
  width: 100%; max-width: 560px; padding: 24px; margin-top: 6vh;
}

.chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 32px; padding: 0 10px; background: var(--paper); color: var(--ink-muted);
  border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.plan { border: 1px solid var(--rule); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.plan.on { border: 2px solid var(--ink); }
.plan .prix { font-family: var(--mono); font-size: 22px; font-weight: 600; }

/* ---------- photo de profil ---------- */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.photoline { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.vignette {
  width: 88px; height: 88px; flex: none;
  background: var(--raised); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 26px; font-weight: 600;
  color: var(--ink-muted); overflow: hidden;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- une fonction déclarée ---------- */
.fnrow {
  display: grid; gap: 10px 16px; padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  /* Trois colonnes nommées, pas auto-fit : auto-fit en découpait autant
     que la largeur le permettait et laissait les colonnes vides à
     droite, tassant les champs sur le bord gauche. */
  grid-template-columns: minmax(220px, 3fr) minmax(140px, 1fr) minmax(160px, 1fr);
  align-items: end;
}
.fnrow .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fnrow .field > .lab { white-space: nowrap; }
.fnrow select, .fnrow input { width: 100%; min-width: 0; }

/* ---------- suggestions de titres de projet ---------- */
.suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: var(--raised); border: 2px solid var(--ink);
  max-height: 240px; overflow-y: auto;
}
.sugg {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  width: 100%; padding: 10px 12px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.sugg:last-child { border-bottom: 0; }
.sugg:hover, .sugg:focus { background: var(--ink); color: var(--paper); }
.sugg-t { font-size: 14px; font-weight: 600; }
.sugg-d {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.sugg:hover .sugg-d, .sugg:focus .sugg-d { color: var(--paper); opacity: 0.75; }

/* ---------- administration : liste des membres ---------- */
.membre { border-bottom: 1px solid var(--rule); }
.membre-tete {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: 100%; padding: 14px 0; text-align: left;
  background: none; border: 0; cursor: pointer; color: inherit;
}
.membre-tete:hover .membre-nom { text-decoration: underline; }
.membre-nom { font-size: 15px; font-weight: 600; }
.membre-etats { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  padding: 3px 6px; border: 1px solid var(--rule); color: var(--ink-muted);
}
.tag.fort { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag.creux { border-color: var(--accent); color: var(--accent); }
.petit { font-size: 11px; color: var(--ink-muted); }

.membre-corps { padding: 4px 0 22px; display: flex; flex-direction: column; gap: 14px; }
.membre-infos {
  display: grid; gap: 12px 24px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.membre-infos p { margin: 2px 0 0; font-size: 14px; word-break: break-word; }
.membre-action { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.membre-action > .lab { min-width: 190px; }
.membre-danger { border: 1px solid var(--accent); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.membre-danger p { margin: 0; }
.btn.danger { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.danger:hover { filter: brightness(0.9); }

.encadre { border: 2px solid var(--ink); padding: 18px 20px; }
.encadre .sechead { margin-top: 0; }
tr.surligne td { background: var(--accent-quiet); font-weight: 600; }

/* ---------- sélecteur de période ---------- */
.periode {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 40px;
  padding: 0 12px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); cursor: pointer; text-align: left;
  font-family: inherit; font-size: 14px;
}
.periode:hover { border-color: var(--ink); }
.periode .mono { margin-left: auto; color: var(--ink-muted); }
.datepick {
  position: absolute; top: 100%; left: 0; z-index: 40; margin-top: 4px;
  background: var(--raised); border: 2px solid var(--ink); padding: 12px; width: 280px;
}
.dp-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dp-dows, .dp-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dows .lab { text-align: center; padding-bottom: 4px; }
.dp-jour {
  height: 32px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-soft); cursor: pointer;
  font-family: var(--mono); font-size: 12px;
}
.dp-jour:hover:not(:disabled) { border-color: var(--ink); }
.dp-jour.out { opacity: 0.35; }
.dp-jour.passe { opacity: 0.25; cursor: not-allowed; }
.dp-jour.entre { background: var(--accent-quiet); border-color: var(--accent-quiet); }
.dp-jour.bout { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
#dpAide { margin: 10px 0 0; }

/* ---------- lignes de projet ---------- */
.prow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.prow-titre {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.prow-titre:hover, .prow-titre:focus { text-decoration: underline; }
.eqrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--rule-soft);
}
.eq-nom { font-weight: 600; color: var(--ink); text-decoration: none; }
.eq-nom:hover { text-decoration: underline; }

/* ---------- panneau latéral ---------- */
.volet { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.volet-fond { position: absolute; inset: 0; background: rgba(17, 17, 16, 0.28); }
.volet-corps {
  /* Une fois le panneau ouvert, c'est lui qu'on lit : la liste derrière ne
     sert plus qu'à savoir d'où l'on vient. Il prend donc la place, et on ne
     laisse derrière que la colonne des noms, assez pour se repérer. */
  position: relative; width: clamp(560px, 72vw, 1180px); max-width: 100%; height: 100%;
  background: var(--paper); border-left: 2px solid var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
  animation: volet-entre 160ms ease-out;
}
@keyframes volet-entre { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .volet-corps { animation: none; } }
.volet-tete { padding: 14px 20px 12px; border-bottom: 1px solid var(--rule); flex: none; }
.volet-ligne { display: flex; align-items: flex-start; gap: 12px; }
.volet-tete h2 { margin: 2px 0 0; font-size: 19px; line-height: 25px; }
.volet-retour {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-muted);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.volet-retour:hover { color: var(--ink); text-decoration: underline; }
.volet-chemin {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin: 0 0 8px; font-size: 11px; line-height: 15px;
}
.volet-chemin .sep { color: var(--ink-muted); opacity: 0.6; }
.volet-pas {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--ink-muted); max-width: 150px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
button.volet-pas:hover { color: var(--ink); text-decoration: underline; }
.volet-pas.courant { color: var(--ink); font-weight: 600; cursor: default; }
.volet-contenu { padding: 20px; overflow-y: auto; flex: 1; }
@media (max-width: 760px) {
  .volet-corps { width: 100%; border-left: 0; }
  .volet-fond { display: none; }
}

/* ---------- tuiles de chiffres ---------- */
.tuiles {
  display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--rule); margin-top: 8px;
}
.tuile { background: var(--paper); padding: 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.tuile-val { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1; }

/* ---------- années repliables ---------- */
.annee-tete {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 0 8px; background: none; border: 0; cursor: pointer;
  color: inherit; text-align: left; border-bottom: 2px solid var(--ink);
}
.annee-nom { font-size: 17px; font-weight: 700; }
.chevron { font-size: 12px; color: var(--ink-muted); width: 12px; }
.annee-tete:hover .annee-nom { text-decoration: underline; }

/* ---------- résultats en carte sous 760px ---------- */
@media (max-width: 760px) {
  .membre-action > .lab { min-width: 0; width: 100%; }
  .fnrow { grid-template-columns: 1fr; }
  .vignette { width: 72px; height: 72px; }
  .mrow {
    min-width: 0; display: grid; gap: 8px;
    grid-template-columns: 1fr auto; padding: 14px 0;
  }
  .mname { width: auto; grid-column: 1; font-size: 17px; }
  .mniv { width: auto; grid-column: 2; text-align: right; }
  .mcanton { width: auto; grid-column: 1; }
  .mcov { width: auto; grid-column: 2; text-align: right; }
  .mrow .grid { grid-column: 1 / -1; overflow-x: auto; padding-bottom: 4px; }
  .mrow .btn { grid-column: 1 / -1; width: 100%; }
  .hero h1 { font-size: 34px; line-height: 36px; }
  h1 { font-size: 26px; line-height: 30px; }
}

/* Repérer d'un coup d'œil ce qui n'existe que pour l'administration : sans ça
   on teste un parcours en croyant voir l'écran d'un membre ordinaire. */
.admin-seul {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}
.admin-seul > .sechead::after {
  content: "ADMIN";
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--accent); margin-left: 8px;
}
.bandeau-admin {
  background: var(--accent); color: var(--paper);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 16px; display: flex; align-items: center; gap: 12px;
}
.bandeau-admin button {
  background: none; border: 1px solid var(--paper); color: var(--paper);
  font: inherit; padding: 1px 8px; cursor: pointer;
}

/* Un jour sous option n'est pas un jour pris : la case reste libre, on ajoute
   seulement une marque et le nom du projet. Confondre les deux sortirait la
   personne des recherches pour un tournage qui n'est pas confirmé. */
.cell.option {
  border-color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.swatch.option {
  background: var(--paper); border-color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* Une option que la production a déjà confirmée n'est plus une hypothèse :
   elle n'attend plus que votre réponse. Le trait devient plein. */
.cell.option.confirme { box-shadow: inset 0 -3px 0 var(--accent), inset 0 0 0 2px var(--accent); }

/* Safari arrondit les select et les champs numériques par défaut. Tout le
   reste de l'interface est à angles vifs : on reprend la main. */
select, input, textarea, button { border-radius: 0; }
select {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
input[type="number"] { -webkit-appearance: textfield; appearance: textfield; }
input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; }

/* ---------- parcours public ----------
   Une page lue hors de Dispo, souvent avant d'engager quelqu'un. Espacements
   réguliers, un seul rythme vertical, et rien qui pousse à s'inscrire. */
body.page-cv #textpage .top .btn { display: none; }
.cv-tete { margin: 56px 0 44px; }
.cv-tete h1 { margin: 0; }
.cv-fonctions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cv-fonction {
  display: inline-flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--ink); padding: 5px 11px;
}
.cv-fonction-nom { font-size: 13px; font-weight: 600; }
.cv-fonction-niv {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--ink-muted);
}
.cv-section { margin-top: 44px; }
.cv-section h2 {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 15px; letter-spacing: 0.02em;
  border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin: 0 0 4px;
}
.cv-compte {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--ink-muted); margin-left: auto;
}
.cv-ligne {
  display: flex; gap: 20px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.cv-annee {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  width: 46px; flex: none; color: var(--ink-muted);
}
.cv-titre { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; flex: 1; }
.cv-nom { font-weight: 600; }
.cv-det { font-size: 13px; color: var(--ink-muted); }
.cv-pied { margin-top: 56px; padding-top: 20px; border-top: 2px solid var(--ink); }
.cv-pied p { margin: 0; font-size: 13px; color: var(--ink-muted); max-width: 52ch; }
.cv-lien {
  display: inline-block; margin-top: 10px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
@media (max-width: 600px) {
  .cv-tete { margin: 36px 0 32px; }
  .cv-ligne { gap: 12px; }
}


/* Le parcours public occupe la page : c'est un document, pas un encart. */
body.page-cv #textpage .wrap { max-width: 900px; }
body.page-cv .prose { max-width: none; }
body.page-cv .cv-ligne { padding: 16px 0; }

/* Impression et export PDF : on retire ce qui n'appartient pas au document. */
@media print {
  body.page-cv #textpage .top,
  body.page-cv .cv-lien { display: none; }
  body.page-cv { background: #fff; }
  body.page-cv .cv-tete { margin-top: 0; }
  body.page-cv .cv-section { break-inside: avoid; }
  body.page-cv .cv-ligne { break-inside: avoid; padding: 10px 0; }
  @page { margin: 18mm 16mm; }
}


/* Le bouton de période faisait 40px quand les menus en font 44 : les libellés
   de la ligne de recherche ne s'alignaient pas. Une seule hauteur pour tous
   les contrôles de cette ligne. */
.periode { min-height: 44px; }


/* La liste d'avantages héritait du corps de page (15px, encre pleine) au
   milieu d'une carte écrite en .faint (13px, gris). Deux polices apparentes
   dans le même bloc. On aligne, et la puce devient un carré plutôt qu'un rond,
   comme partout ailleurs. */
.plan ul { list-style: none; margin: 10px 0 0; padding: 0; }
.plan li {
  position: relative; padding-left: 16px;
  font-size: 13px; line-height: 20px; color: var(--ink-muted);
  margin-top: 6px;
}
.plan li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; background: var(--ink);
}
.plan.on li::before { background: var(--accent); }
/* Description et liste sont le même bloc de texte : même teinte.
   La hiérarchie de la carte est portée par le titre et le prix. */
.plan .faint { margin-top: 2px; color: var(--ink-muted); }

/* Confirmation groupée : la barre suit la page pour rester atteignable quand
   la liste est longue. */
.barre-lot {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--paper); border-bottom: 2px solid var(--ink);
  padding: 10px 0; margin: 18px 0 0;
}
.bloc-projet { margin-top: 26px; }
.plier {
  background: none; border: 0; cursor: pointer; padding: 0 4px 0 0;
  font-size: 13px; color: var(--ink-muted); flex: none;
}
.plier:hover { color: var(--ink); }


/* Une suppression posée en bas d'un panneau n'a pas à crier : elle doit être
   trouvable, pas tentante. Le rouge plein reste pour les actions qu'on veut
   voir de loin. */
.btn.quiet.danger {
  background: none; color: var(--accent); border-color: var(--rule);
}
.btn.quiet.danger:hover { border-color: var(--accent); filter: none; }