/* ===== ARPi — espace membre — implementation of "Espace membre v3 : le verbe.dc.html" =====
   Écran sombre, autonome du site public : la maquette source est une app à part
   entière (porte, barre de tâches, écran de commande) et non un gabarit du site. */

:root {
  --em-ink: #16130F;
  --em-cream: #F6F2EC;
  --em-brick: #B23A18;
  --em-brick-hi: #C94A24;
  --em-amber: #E0985F;

  --em-line: rgba(246, 242, 236, 0.14);
  --em-line-2: rgba(246, 242, 236, 0.22);
  --em-line-3: rgba(246, 242, 236, 0.28);
  --em-dim: rgba(246, 242, 236, 0.45);
  --em-dim-2: rgba(246, 242, 236, 0.35);
  --em-veil: rgba(246, 242, 236, 0.07);

  --em-pad-x: clamp(20px, 4vw, 40px);
  --em-max: 1120px;
  --em-mono: 'IBM Plex Mono', monospace;
  --em-serif: 'Instrument Serif', Georgia, serif;
}

* { box-sizing: border-box; }

/* Presque tous les blocs de l'écran sont des flex/grid : sans ce garde-fou,
   leur display l'emporte sur l'attribut hidden posé par le JS. */
[hidden] { display: none !important; }

.em-body {
  margin: 0;
  min-height: 100vh;
  background: var(--em-ink);
  color: var(--em-cream);
  font-family: Archivo, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--em-amber); text-decoration: none; }
a:hover { color: var(--em-cream); }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Le clavier voit toujours où il est ; la souris, jamais. */
:focus-visible { outline: 2px solid var(--em-amber); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.em-grow { flex: 1 1 20px; }

/* ===== Atomes de type ===== */
.em-logo { font-family: var(--em-serif); font-size: 23px; line-height: 1; color: var(--em-cream); }
.em-logo-lg { font-size: 30px; }
.em-logo-btn { cursor: pointer; }
.em-logo-btn:hover { color: var(--em-amber); }

.em-label {
  font-family: var(--em-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--em-dim);
}
.em-kicker {
  font-family: var(--em-mono); font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--em-amber);
}
.em-note { font-family: var(--em-mono); font-size: 12.5px; line-height: 1.6; color: rgba(246, 242, 236, 0.4); }
.em-count { font-family: var(--em-mono); font-size: 12px; color: rgba(246, 242, 236, 0.4); }

/* ===== Champs ===== */
.em-line-input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--em-line-3); outline: none;
  color: var(--em-cream); font-family: inherit; font-size: 19px; padding: 0 0 12px;
  transition: border-color 0.2s ease;
}
.em-line-input::placeholder { color: rgba(246, 242, 236, 0.3); }
.em-line-input:focus { border-bottom-color: var(--em-amber); }
.em-line-input-lg { font-size: 20px; padding: 12px 0; }
.em-line-input-sm { font-size: 17px; padding: 0 0 10px; border-bottom-color: var(--em-line-2); }
.em-line-input-serif { font-family: var(--em-serif); font-size: clamp(28px, 4vw, 38px); }

.em-box-input {
  flex: 1 1 180px; min-width: 0; background: transparent; border: 1px solid var(--em-line-3);
  outline: none; color: var(--em-cream); font-family: inherit; font-size: 16px;
  padding: 13px 14px; min-height: 44px; transition: border-color 0.2s ease;
}
.em-box-input::placeholder { color: rgba(246, 242, 236, 0.3); }
.em-box-input:focus { border-color: var(--em-amber); }
.em-box-input-year { flex: 0 0 92px; width: 92px; font-family: var(--em-mono); font-size: 14px; padding: 13px 12px; }

/* ===== Boutons ===== */
.em-cta {
  font-size: 17px; font-weight: 600; color: var(--em-cream); background: var(--em-brick);
  padding: 18px 34px; min-height: 44px; cursor: pointer; text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.em-cta:hover { background: var(--em-brick-hi); }
.em-cta-inline { align-self: flex-start; }
.em-cta.is-off { background: rgba(246, 242, 236, 0.1); color: var(--em-dim-2); cursor: default; }
.em-cta.is-off:hover { background: rgba(246, 242, 236, 0.1); }
.em-cta.is-done, .em-cta.is-done:hover { background: var(--em-amber); color: var(--em-ink); cursor: default; }

.em-chip {
  font-family: var(--em-mono); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; white-space: nowrap; border: 1px solid var(--em-line-3); color: var(--em-cream);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.em-chip:hover { border-color: var(--em-amber); }
.em-chip-amber { background: var(--em-amber); border-color: var(--em-amber); color: var(--em-ink); }
.em-chip-amber:hover { background: #EEA96E; border-color: #EEA96E; }
.em-chip[disabled] {
  background: rgba(246, 242, 236, 0.1); border-color: transparent;
  color: var(--em-dim-2); cursor: default;
}
/* Chips de disponibilité : l'état actif est brique plein. */
.em-chip[aria-pressed="true"] { background: var(--em-brick); border-color: var(--em-brick); color: var(--em-cream); }
.em-chip[aria-pressed="true"]:hover { background: var(--em-brick-hi); border-color: var(--em-brick-hi); }

.em-link-btn {
  font-family: var(--em-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--em-dim); cursor: pointer; align-self: flex-start; min-height: 44px; display: flex; align-items: center;
}
.em-link-btn:hover { color: var(--em-cream); }

/* ===== Sans JS ===== */
.em-noscript { display: none; min-height: 100vh; align-items: center; justify-content: center; padding: 40px 24px; }
.em-noscript-card { display: flex; flex-direction: column; gap: 18px; max-width: 420px; }
.em-noscript-text { font-size: 18px; line-height: 1.5; }
.em-noscript-link { font-family: var(--em-mono); font-size: 12.5px; }

/* ===== Porte ===== */
.em-gate[hidden] { display: none; }
.em-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.em-gate-form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 26px; }
.em-gate-back {
  font-family: var(--em-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--em-dim); align-self: flex-start;
}
.em-gate-back:hover { color: var(--em-cream); }
.em-gate-fields { display: flex; flex-direction: column; gap: 14px; }
.em-gate-note { font-family: var(--em-mono); font-size: 12px; color: var(--em-dim-2); line-height: 1.6; }
.em-gate-demo { color: rgba(246, 242, 236, 0.28); }

/* ===== Coque de l'espace ===== */
.em-app { min-height: 100vh; display: flex; flex-direction: column; }
.em-app[hidden] { display: none; }

.em-head {
  display: flex; align-items: center; gap: 18px;
  padding: 18px var(--em-pad-x); border-bottom: 1px solid rgba(246, 242, 236, 0.12);
}
.em-head-spacer { flex: 1 1 auto; }
.em-head-pending { font-family: var(--em-mono); font-size: 12px; color: rgba(246, 242, 236, 0.4); white-space: nowrap; }
.em-head-site {
  font-family: var(--em-mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(246, 242, 236, 0.4); white-space: nowrap;
}
.em-head-site:hover { color: var(--em-cream); }
.em-avatar {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--em-amber);
  color: var(--em-ink); font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.em-head-out {
  font-family: var(--em-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(246, 242, 236, 0.4); cursor: pointer; white-space: nowrap;
}
.em-head-out:hover { color: var(--em-cream); }

.em-main { flex: 1 1 auto; display: flex; flex-direction: column; }

.em-view { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; max-width: var(--em-max); margin: 0 auto; }
.em-view[hidden] { display: none; }
.em-view-command { gap: 40px; padding: clamp(40px, 8vh, 90px) var(--em-pad-x) 60px; }
.em-view-task { gap: 34px; padding: 46px var(--em-pad-x) 70px; }

/* ===== Faire : la commande ===== */
.em-q {
  width: 100%; background: transparent; border: none; border-bottom: 2px solid rgba(246, 242, 236, 0.24);
  outline: none; color: var(--em-cream); font-family: var(--em-serif);
  font-size: clamp(32px, 6vw, 62px); line-height: 1.15; padding: 0 0 18px;
  transition: border-color 0.2s ease;
}
.em-q::placeholder { color: rgba(246, 242, 236, 0.3); }
.em-q:focus { border-bottom-color: var(--em-amber); }

.em-verbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.em-verbs[hidden] { display: none; }
.em-verb {
  width: 100%; border: 1px solid rgba(246, 242, 236, 0.2); padding: 30px 26px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  cursor: pointer; min-height: 44px; text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.em-verb:hover { background: var(--em-brick); border-color: var(--em-brick); }
.em-verb-word { font-family: var(--em-serif); font-size: clamp(28px, 4vw, 36px); line-height: 1; }
.em-verb-meta { font-family: var(--em-mono); font-size: 12.5px; color: var(--em-amber); white-space: nowrap; }
.em-verb:hover .em-verb-meta { color: var(--em-cream); }

.em-hits { display: flex; flex-direction: column; }
.em-hits[hidden] { display: none; }
.em-hit {
  width: 100%; display: flex; align-items: center; gap: 22px; padding: 22px 0;
  border-top: 1px solid rgba(246, 242, 236, 0.14); cursor: pointer; flex-wrap: wrap; text-align: left;
  transition: background 0.2s ease;
}
.em-hit:hover { background: rgba(246, 242, 236, 0.05); }
.em-hit-when { font-family: var(--em-mono); font-size: 13px; color: var(--em-amber); min-width: 86px; }
.em-hit-label { flex: 1 1 240px; font-size: 21px; }
.em-hit-action {
  font-family: var(--em-mono); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--em-ink); background: var(--em-amber); padding: 10px 16px; white-space: nowrap;
}

.em-empty { font-family: var(--em-mono); font-size: 14px; color: var(--em-dim); line-height: 1.7; }
.em-foot-note { font-family: var(--em-mono); font-size: 12.5px; color: var(--em-dim-2); line-height: 1.6; }

/* ===== Écran de tâche ===== */
.em-back {
  font-family: var(--em-mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--em-dim); cursor: pointer; align-self: flex-start; min-height: 44px; display: flex; align-items: center;
}
.em-back:hover { color: var(--em-cream); }
.em-task-head { display: flex; flex-direction: column; gap: 12px; }
.em-task-title {
  margin: 0; font-family: var(--em-serif); font-weight: 400;
  font-size: clamp(34px, 5.4vw, 56px); line-height: 1.02; letter-spacing: -0.015em;
  max-width: 24ch; text-wrap: pretty;
}
.em-panel { display: flex; flex-direction: column; }
.em-panel[hidden] { display: none; }
.em-panel-slots { gap: 26px; }
.em-panel-track { gap: 24px; max-width: 760px; }
.em-panel-profil { gap: 30px; }
.em-panel-done { flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap; }

/* --- Kit : lignes téléchargeables --- */
.em-rows { display: flex; flex-direction: column; }
.em-row {
  display: flex; align-items: center; gap: 22px; padding: 22px 0;
  border-top: 1px solid rgba(246, 242, 236, 0.14); flex-wrap: wrap;
}
.em-row-when { font-family: var(--em-mono); font-size: 13px; color: var(--em-amber); min-width: 86px; }
.em-row-copy { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
.em-row-label { font-size: 20px; line-height: 1.3; }
.em-row-sub { font-family: var(--em-mono); font-size: 12.5px; color: var(--em-dim); }

/* --- Salle : créneaux --- */
.em-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.em-day { display: flex; flex-direction: column; gap: 9px; }
.em-day-label {
  font-family: var(--em-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--em-dim); padding-bottom: 8px; border-bottom: 1px solid rgba(246, 242, 236, 0.16);
}
.em-slot {
  font-family: var(--em-mono); font-size: 13px; padding: 14px 4px; min-height: 44px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--em-line-3); color: var(--em-cream);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.em-slot:hover { border-color: var(--em-amber); }
.em-slot[aria-pressed="true"] { background: var(--em-brick); border-color: var(--em-brick); }
/* Créneau déjà pris : barré. Créneau réservé par le membre : ambre, il doit
   rester lisible une fois la grille figée. */
.em-slot[data-taken] {
  background: var(--em-veil); border-color: transparent; color: rgba(246, 242, 236, 0.25);
  cursor: not-allowed; text-decoration: line-through;
}
.em-slot[data-taken]:hover { border-color: transparent; }
.em-slot[disabled]:not([data-taken]) { color: rgba(246, 242, 236, 0.3); border-color: var(--em-line); cursor: default; }
.em-slot[disabled]:not([data-taken]):hover { border-color: var(--em-line); }
.em-slot[aria-pressed="true"][disabled] {
  background: var(--em-amber); border-color: var(--em-amber); color: var(--em-ink); cursor: default;
}
.em-slot[aria-pressed="true"][disabled]:hover { border-color: var(--em-amber); }

/* --- Suivre : avancement --- */
.em-progress { height: 6px; background: rgba(246, 242, 236, 0.16); }
.em-progress-fill { display: block; height: 100%; width: 0; background: var(--em-amber); transition: width 0.6s ease; }
.em-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.em-step { display: flex; flex-direction: column; gap: 6px; }
.em-step-label { font-size: 16.5px; color: rgba(246, 242, 236, 0.4); }
.em-step.is-past .em-step-label { color: var(--em-cream); }
.em-step.is-now .em-step-label { color: var(--em-cream); font-weight: 600; }
.em-step-note { font-family: var(--em-mono); font-size: 12px; color: var(--em-dim); line-height: 1.5; }

/* --- Profil --- */
.em-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(246, 242, 236, 0.16); flex-wrap: wrap; }
.em-tab {
  font-size: 16px; padding: 14px 16px; min-height: 44px; display: flex; align-items: center;
  cursor: pointer; border-bottom: 2px solid transparent; color: var(--em-dim);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.em-tab:hover { color: var(--em-cream); }
.em-tab[aria-selected="true"] { border-bottom-color: var(--em-brick); color: var(--em-cream); font-weight: 600; }

.em-pane { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: start; }
.em-pane[hidden] { display: none; }
.em-pane-prive { display: flex; flex-direction: column; gap: 26px; max-width: 620px; }
.em-pane:focus-visible { outline-offset: 6px; }
.em-col { display: flex; flex-direction: column; gap: 26px; }
.em-field { display: flex; flex-direction: column; gap: 10px; }
.em-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.em-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.em-photo-row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.em-photo {
  width: 132px; height: 132px; flex: 0 0 132px; border-radius: 50%; overflow: hidden;
  background: var(--em-veil); border: 1px solid var(--em-line-2);
  display: flex; align-items: center; justify-content: center;
}
.em-photo-img { width: 100%; height: 100%; object-fit: cover; }
.em-photo-ph { font-family: var(--em-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--em-dim-2); }
.em-photo-copy { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.em-films { display: flex; flex-direction: column; }
.em-film {
  display: flex; align-items: center; gap: 18px; padding: 16px 0;
  border-top: 1px solid rgba(246, 242, 236, 0.14); flex-wrap: wrap;
}
.em-film-year { font-family: var(--em-mono); font-size: 13px; color: var(--em-amber); min-width: 52px; }
.em-film-copy { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.em-film-title { font-size: 19px; line-height: 1.3; }
.em-film-meta { font-family: var(--em-mono); font-size: 12.5px; color: var(--em-dim); }
.em-film-remove {
  font-family: var(--em-mono); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(246, 242, 236, 0.4); cursor: pointer; min-height: 44px; display: flex; align-items: center;
}
.em-film-remove:hover { color: var(--em-brick-hi); }
.em-films-empty { font-family: var(--em-mono); font-size: 12.5px; color: var(--em-dim); padding: 16px 0; border-top: 1px solid rgba(246, 242, 236, 0.14); }

.em-add { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid rgba(246, 242, 236, 0.14); }

.em-contact { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.em-contact .em-line-input { flex: 1 1 220px; width: auto; }
.em-toggle {
  font-family: var(--em-mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 11px 14px; min-height: 44px; display: flex; align-items: center; cursor: pointer;
  white-space: nowrap; border: 1px solid var(--em-line-2); color: var(--em-dim);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.em-toggle:hover { border-color: var(--em-amber); color: var(--em-cream); }
.em-toggle[aria-pressed="true"] { background: var(--em-amber); border-color: var(--em-amber); color: var(--em-ink); }
.em-toggle[aria-pressed="true"]:hover { color: var(--em-ink); }

.em-private-note { font-family: var(--em-mono); font-size: 12.5px; color: var(--em-amber); line-height: 1.6; }
.em-save-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 6px; }

/* ===== Barre de tâches ===== */
.em-bar {
  border-top: 1px solid rgba(246, 242, 236, 0.12); padding: 12px 10px 16px;
  display: flex; justify-content: space-around; position: sticky; bottom: 0; background: var(--em-ink);
}
.em-bar-link {
  font-family: var(--em-mono); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 12px 18px; min-height: 44px; display: flex; align-items: center; cursor: pointer;
  color: rgba(246, 242, 236, 0.42); border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.em-bar-link:hover { color: var(--em-cream); }
.em-bar-link[aria-current="page"] { color: var(--em-cream); border-bottom-color: var(--em-brick); }

/* ===================================================================
   Responsive — la maquette source vise un aperçu fixe de 1280 px.
   =================================================================== */
@media (max-width: 700px) {
  /* 16 px minimum : en dessous, iOS zoome à la prise de focus. */
  .em-line-input, .em-line-input-lg, .em-line-input-sm, .em-box-input { font-size: 16px; }

  .em-head { gap: 12px; padding: 14px var(--em-pad-x); }
  .em-head-pending, .em-head-site { display: none; }
  .em-view-task { gap: 26px; padding: 30px var(--em-pad-x) 50px; }
  .em-view-command { gap: 30px; }
  .em-hit { gap: 12px; padding: 18px 0; }
  .em-hit-when { min-width: 0; }
  .em-row { gap: 14px; }
  .em-row-when { min-width: 0; }
  .em-pane { gap: 30px; }
  .em-cta { padding: 16px 24px; }
  .em-bar { padding: 8px 4px 12px; }
  .em-bar-link { padding: 12px 8px; font-size: 11.5px; }
  .em-days { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}