/* Mauzello — feuille de style unique, sans framework.
   Palette : fond clair chaleureux, accent montagne (bleu-vert). */
:root {
  --bg: #f5f4f0;
  --card: #ffffff;
  --ink: #26323a;
  --muted: #5f6b75; /* contraste AA (v1.9.3) : #7a8894 ne passait pas 4.5:1 sur fond clair */
  --accent: #0e7a6e;
  --accent-ink: #ffffff;
  --line: #e3e1da;
  --warn: #b45309;
  --err: #b3261e;
  --ok: #15803d;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(38, 50, 58, .08);
}

/* Mode sombre (v1.9.0) : réglage par utilisateur (clair/sombre/auto),
   appliqué via data-theme sur <html> (templates/layout.php). Duplication
   assumée entre les deux blocs ci-dessous — pas de préprocesseur CSS ici. */
[data-theme="sombre"] {
  --bg: #1b2027;
  --card: #242a33;
  --ink: #e8ebee;
  --muted: #9aa7b2;
  --accent: #2fb3a0;
  --accent-ink: #0d1013;
  --line: #333b46;
  --warn: #f0a94e;
  --err: #f2685c;
  --ok: #4ade80;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
  /* Pastilles pastel (badges, flash, tags…) : re-teintées ici pour rester
     lisibles sur fond sombre, appliquées via les règles thème plus bas. */
  --pastel-neutral: rgba(255, 255, 255, .07);
  --pastel-accent: rgba(47, 179, 160, .18);
  --pastel-ok: rgba(74, 222, 128, .16);
  --pastel-warn: rgba(240, 169, 78, .16);
  --pastel-err: rgba(242, 104, 92, .16);
  --pastel-mention: rgba(240, 169, 78, .22);
  --pastel-gorille: rgba(240, 169, 78, .12);
  --gorille-line: rgba(240, 169, 78, .35);
  --tag-bg: rgba(255, 255, 255, .08);
  --tag-ink: #7fb8e0;
  --cal-day-bg: #20262e;
  --cal-today-bg: rgba(47, 179, 160, .15);
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg: #1b2027;
    --card: #242a33;
    --ink: #e8ebee;
    --muted: #9aa7b2;
    --accent: #2fb3a0;
    --accent-ink: #0d1013;
    --line: #333b46;
    --warn: #f0a94e;
    --err: #f2685c;
    --ok: #4ade80;
    --shadow: 0 1px 3px rgba(0, 0, 0, .4);
    --pastel-neutral: rgba(255, 255, 255, .07);
    --pastel-accent: rgba(47, 179, 160, .18);
    --pastel-ok: rgba(74, 222, 128, .16);
    --pastel-warn: rgba(240, 169, 78, .16);
    --pastel-err: rgba(242, 104, 92, .16);
    --pastel-mention: rgba(240, 169, 78, .22);
    --pastel-gorille: rgba(240, 169, 78, .12);
    --gorille-line: rgba(240, 169, 78, .35);
    --tag-bg: rgba(255, 255, 255, .08);
    --tag-ink: #7fb8e0;
    --cal-day-bg: #20262e;
    --cal-today-bg: rgba(47, 179, 160, .15);
  }
}
/* Règles thème : mêmes sélecteurs pour sombre et auto, la valeur réelle vient
   des --pastel-* ci-dessus ; en clair (ou auto + système clair), ces
   variables n'existent pas et chaque var() retombe sur la couleur d'origine
   — ce bloc ne change donc rien en dehors du mode sombre effectif. */
[data-theme="sombre"] .badge, [data-theme="auto"] .badge,
[data-theme="sombre"] .progress, [data-theme="auto"] .progress,
[data-theme="sombre"] .due, [data-theme="auto"] .due,
[data-theme="sombre"] .table th, [data-theme="auto"] .table th,
[data-theme="sombre"] .table tr.day-sep td, [data-theme="auto"] .table tr.day-sep td,
[data-theme="sombre"] .timeline li.day-sep, [data-theme="auto"] .timeline li.day-sep,
[data-theme="sombre"] .kanban-col, [data-theme="auto"] .kanban-col,
[data-theme="sombre"] .msg, [data-theme="auto"] .msg,
[data-theme="sombre"] code, [data-theme="auto"] code,
[data-theme="sombre"] kbd, [data-theme="auto"] kbd,
[data-theme="sombre"] .cal-event.cal-due, [data-theme="auto"] .cal-event.cal-due {
  background: var(--pastel-neutral, #eeece6);
}
[data-theme="sombre"] .badge-step, [data-theme="auto"] .badge-step,
[data-theme="sombre"] .cal-event.cal-ok, [data-theme="auto"] .cal-event.cal-ok,
[data-theme="sombre"] .timecode, [data-theme="auto"] .timecode,
[data-theme="sombre"] .msg-equipe, [data-theme="auto"] .msg-equipe {
  background: var(--pastel-accent, #dcebe8);
}
[data-theme="sombre"] .badge-ok, [data-theme="auto"] .badge-ok,
[data-theme="sombre"] .badge-prio-basse, [data-theme="auto"] .badge-prio-basse,
[data-theme="sombre"] .flash-success, [data-theme="auto"] .flash-success,
[data-theme="sombre"] .score-badge.ok, [data-theme="auto"] .score-badge.ok {
  background: var(--pastel-ok, #dcf2e3);
}
[data-theme="sombre"] .badge-warn, [data-theme="auto"] .badge-warn,
[data-theme="sombre"] .badge-prio-normale, [data-theme="auto"] .badge-prio-normale,
[data-theme="sombre"] .flash-warn, [data-theme="auto"] .flash-warn,
[data-theme="sombre"] .due-soon, [data-theme="auto"] .due-soon,
[data-theme="sombre"] .cal-event, [data-theme="auto"] .cal-event,
[data-theme="sombre"] .score-badge.warn, [data-theme="auto"] .score-badge.warn {
  background: var(--pastel-warn, #fdeeda);
}
[data-theme="sombre"] .badge-err, [data-theme="auto"] .badge-err,
[data-theme="sombre"] .badge-prio-haute, [data-theme="auto"] .badge-prio-haute,
[data-theme="sombre"] .flash-error, [data-theme="auto"] .flash-error,
[data-theme="sombre"] .due-late, [data-theme="auto"] .due-late,
[data-theme="sombre"] .cal-event.cal-late, [data-theme="auto"] .cal-event.cal-late,
[data-theme="sombre"] .score-badge.err, [data-theme="auto"] .score-badge.err {
  background: var(--pastel-err, #fbe3e1);
}
[data-theme="sombre"] .mention, [data-theme="auto"] .mention {
  background: var(--pastel-mention, #fdf0d5);
}
[data-theme="sombre"] .tag, [data-theme="auto"] .tag {
  background: var(--tag-bg, #e4edf5); color: var(--tag-ink, #23577d);
}
[data-theme="sombre"] .gorille, [data-theme="auto"] .gorille {
  background: var(--pastel-gorille, #fdf6e3); border-color: var(--gorille-line, #ecdcae);
}
[data-theme="sombre"] .cal-day:not(.cal-empty), [data-theme="auto"] .cal-day:not(.cal-empty) {
  background: var(--cal-day-bg, #faf9f6);
}
[data-theme="sombre"] .cal-today, [data-theme="auto"] .cal-today {
  background: var(--cal-today-bg, #eef6f4);
}
[data-theme="sombre"] .hashtag-hint, [data-theme="auto"] .hashtag-hint {
  background: var(--pastel-ok, #eef7f0);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
code { background: #eeece6; padding: 2px 6px; border-radius: 5px; font-size: .85em; word-break: break-all; }
.muted { color: var(--muted); }
.center { text-align: center; }
/* Piège à robots (v1.17.3, page « Rejoindre le studio ») : hors écran, jamais display:none
   (certains robots ignorent ce style-là spécifiquement). */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.preline { white-space: pre-line; }
.inline { display: inline; }
.danger { color: var(--err); }

/* --- Navigation --- */
.topnav {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 8px 16px; position: sticky; top: 0; z-index: 50;
}
.topnav a { padding: 6px 10px; border-radius: 7px; color: var(--ink); }
.topnav a:hover { background: #eeece6; text-decoration: none; }
.topnav a.active { background: var(--accent); color: var(--accent-ink); }
.topnav .brand { font-size: 1.05rem; margin-right: 8px; }
.topnav .spacer { flex: 1; }
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }

/* --- Bandeau minimal du panneau latéral (fiche sujet en iframe) --- */
.topnav-embed .embed-title { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subnav a { padding: 5px 10px; border-radius: 7px; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.subnav a.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* --- Menu resserré : 4 destinations + « Plus » --- */
.nav-primary { display: contents; }
.nav-more { position: relative; }
.nav-more-toggle {
  background: none; border: 0; font: inherit; cursor: pointer;
  padding: 6px 10px; border-radius: 7px; color: var(--ink);
}
.nav-more-toggle:hover { background: #eeece6; }
.nav-more-toggle.active { background: var(--accent); color: var(--accent-ink); }
.nav-more-panel {
  display: none; flex-direction: column; position: absolute; top: 100%; left: 0;
  margin-top: 4px; min-width: 170px; padding: 6px; z-index: 60;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.nav-more-panel.open { display: flex; }
.nav-more-panel a { padding: 7px 10px; border-radius: 7px; color: var(--ink); }
.nav-more-panel a:hover { background: #eeece6; text-decoration: none; }
.nav-more-panel a.active { background: var(--accent); color: var(--accent-ink); }

/* --- Barre d'onglets mobile (< 800 px), le motif connu des apps grand public --- */
.tabbar { display: none; }

.container { max-width: 1500px; margin: 0 auto; padding: 18px 16px 60px; }
.container-narrow { max-width: 720px; }

/* --- Boutons & formulaires --- */
.btn {
  display: inline-block; padding: 7px 13px; border-radius: 8px; cursor: pointer;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  font: inherit; font-size: .92em; text-decoration: none !important;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-sm { padding: 4px 9px; font-size: .85em; }
.btn-block { width: 100%; }
.btn.danger { color: var(--err); }
.linklike { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 4px; }

label { display: block; margin: 10px 0; font-weight: 600; font-size: .92em; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel],
input[type=number], input[type=search], input[type=datetime-local], input[type=date], input[type=file],
select, textarea {
  width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; font-weight: 400;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
/* Champ fautif en cas d'échec (ex. couverture rejetée) : audit « maison solide » P2, v1.16.0 */
.input-error { border-color: var(--err); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-narrow { max-width: 680px; }
.form-actions { margin-top: 14px; display: flex; gap: 8px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }
.add-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.add-row input[type=text], .add-row input[type=file], .add-row input[type=url] { flex: 1; margin: 0; }
.add-row select { width: auto; margin: 0; }
.add-row .btn { flex-shrink: 0; }
.add-row input[type=color] { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; }

/* --- Cartes / sections --- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin: 14px 0;
}
.card-danger { border-color: var(--err); border-width: 2px; }
.card-danger h2 { color: var(--err); }
.card h2 { margin-top: 0; }
.card-alert { border-left: 4px solid var(--err); }
.card-next {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  border-left: 4px solid var(--accent); font-size: 1.02em;
}
.card-next .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card-next .warn { color: var(--warn); font-size: .88em; font-weight: 400; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-2 .card { margin: 0; }

/* --- Tableau de bord personnalisable (v1.17.4) --- */
/* Les blocs se suivent dans l'ordre choisi par le membre ; ceux de
   demi-largeur (mes actions / RDV à venir) se mettent côte à côte. */
.dash-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.dash-block { min-width: 0; }
.dash-full { grid-column: 1 / -1; }
.dash-block .card, .dash-block .stat-row { margin: 0; }
.dash-customize { margin-top: 18px; font-size: .88em; }
/* Réglage des blocs dans « Mon espace » */
.dash-prefs { list-style: none; padding: 0; margin: 0; }
.dash-prefs li {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px; background: var(--card);
}
.dash-prefs li label { flex: 1; margin: 0; display: flex; align-items: center; gap: 8px; }
.dash-prefs .dash-move { padding: 0 8px; line-height: 1.6; }
.dash-prefs .dash-fixed { color: var(--muted); font-size: .85em; }

/* --- Badges, tags, stats --- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .78em;
  background: #eeece6; color: var(--ink); vertical-align: middle;
}
.badge-step { background: #dcebe8; color: var(--accent); }
.badge-ok { background: #dcf2e3; color: var(--ok); }
.badge-warn { background: #fdeeda; color: var(--warn); }
.badge-err { background: #fbe3e1; color: var(--err); }
.badge-prio-haute { background: #fbe3e1; color: var(--err); }
.badge-prio-normale { background: #fdeeda; color: var(--warn); }
.badge-prio-basse { background: #dcf2e3; color: var(--ok); }
.tag {
  display: inline-block; padding: 1px 8px; border-radius: 5px; font-size: .78em;
  background: #e4edf5; color: #23577d; margin: 1px;
}
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; }
.stat-num { font-size: 1.5em; font-weight: 700; color: var(--accent); margin-right: 6px; }

/* --- Flash --- */
.flash { max-width: 1500px; margin: 10px auto 0; padding: 10px 16px; border-radius: 8px; }
.flash-success { background: #dcf2e3; color: var(--ok); }
.flash-error { background: #fbe3e1; color: var(--err); }
.flash-warn { background: #fdeeda; color: var(--warn); }

/* --- Indicateur de chargement sur les actions fetch (audit « maison
   solide » UX #7) --- */
/* Coche une tâche, glisse une carte kanban... sur réseau lent, l'action
   semblait n'avoir rien fait, tentation de re-cliquer. L'opacité réduite
   signale « c'est en cours » et pointer-events:none bloque un second clic
   pendant que la requête est en vol (app.js, fonction api()). */
.is-busy { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* --- Tables --- */
/* Audit « maison solide » UX #5 : les tables larges (journal, recherche,
   contacts...) débordaient du conteneur sur mobile sans aucun moyen de
   les faire défiler — ce wrapper leur donne un défilement horizontal
   dédié sans casser la mise en page du reste de la page */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.table-wrap .table { box-shadow: none; }
.table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { background: #efede7; font-size: .85em; text-transform: uppercase; letter-spacing: .03em; }
.table tr:last-child td { border-bottom: none; }
/* Séparateurs de jour du journal : Aujourd'hui / Hier / date */
.table tr.day-sep td { background: #efede7; font-weight: 600; font-size: .85em;
  text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }

/* --- Filtres --- */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.filter-bar input[type=search] { flex: 1; min-width: 190px; margin: 0; width: auto; }
.filter-bar select { width: auto; margin: 0; }

/* --- Kanban --- */
.kanban-wrap { display: flex; gap: 10px; overflow-x: auto; align-items: flex-start; padding-bottom: 10px; }
.kanban-col {
  min-width: 235px; width: 235px; flex-shrink: 0;
  background: #edebe4; border-radius: var(--radius); padding: 8px;
}
.kanban-col h3 { margin: 4px 6px 8px; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
.kanban-col .count { float: right; background: var(--card); border-radius: 12px; padding: 0 8px; font-size: .9em; }
.kanban-cards { min-height: 40px; display: flex; flex-direction: column; gap: 8px; }
.kanban-cards.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: 8px; }
.kanban-card {
  background: var(--card); border-radius: 8px; box-shadow: var(--shadow);
  padding: 9px 11px; cursor: grab; border-left: 3px solid transparent;
  position: relative;
}
/* --- Édition rapide des cartes (✏️ au survol, formulaire dans la carte) --- */
.card-edit {
  position: absolute; top: 5px; right: 5px; z-index: 1;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; padding: 1px 5px; font-size: .85em; opacity: 0; transition: opacity .15s;
}
.kanban-card:hover .card-edit, .card-edit:focus { opacity: 1; }
.kanban-card.editing { cursor: auto; }
.kanban-card.editing > :not(.card-editor) { display: none; }
.card-editor { display: grid; gap: 6px; }
.card-editor input, .card-editor select { width: 100%; margin: 0; padding: 5px 7px; font-size: .88em; }
.card-editor-actions { display: flex; gap: 6px; }
.kanban-card.prio-haute { border-left-color: var(--err); }
.kanban-card.prio-basse { border-left-color: var(--ok); }
.kanban-card.dragging { opacity: .5; }
.kanban-card .card-title { display: block; font-weight: 600; color: var(--ink); }
.kanban-card .card-format { font-size: .78em; color: var(--accent); }
.kanban-card .card-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: .78em; color: var(--muted); margin-top: 4px; }
.kanban-card .card-cover { width: calc(100% + 22px); margin: -9px -11px 8px; border-radius: 8px 8px 0 0; max-height: 110px; object-fit: cover; display: block; }
.progress { height: 5px; background: #eeece6; border-radius: 3px; margin-top: 7px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
/* Bouton mobile (v1.10.1) : alternative au glisser-déposer, masqué en desktop */
.card-next-step { display: none; margin-top: 8px; width: 100%; }

/* --- Étiquettes colorées (bandeau façon Trello) & dates limites --- */
.card-labels { display: flex; gap: 4px; margin-bottom: 5px; }
.card-label { display: inline-block; width: 32px; height: 7px; border-radius: 4px; }
.due { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: .82em; background: #eeece6; }
.due-soon { background: #fdeeda; color: var(--warn); font-weight: 600; }
.due-late { background: #fbe3e1; color: var(--err); font-weight: 600; }

/* --- Calendrier des tournages --- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-head { text-align: center; font-size: .72em; text-transform: uppercase; color: var(--muted); padding: 2px; }
.cal-day { min-height: 52px; background: #faf9f6; border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; font-size: .78em; }
.cal-empty { background: transparent; border: none; }
.cal-today { outline: 2px solid var(--accent); background: #eef6f4; }
.cal-num { color: var(--muted); font-size: .85em; }
.cal-today .cal-num { color: var(--accent); font-weight: 700; }
.cal-event { display: block; background: #fdeeda; color: var(--warn); border-radius: 4px; padding: 1px 4px; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.cal-event.cal-ok { background: #dcebe8; color: var(--accent); }
.cal-event.cal-due { background: #eeece6; color: var(--ink); }
.cal-event.cal-late { background: #fbe3e1; color: var(--err); font-weight: 600; }

/* --- Stepper (fiche sujet) --- */
.stepper { display: flex; list-style: none; padding: 0; margin: 4px 0 14px; gap: 4px; overflow-x: auto; }
.stepper li { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); font-size: .8em; white-space: nowrap; color: var(--muted); }
.stepper li.done { color: var(--accent); border-color: #bcd9d4; }
.stepper li.current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.step-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.08); font-size: .85em; }
.stepper li.current .step-dot { background: rgba(255,255,255,.25); }
kbd { background: #eeece6; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: .85em; }

/* --- Fiche sujet --- */
.topic-header { display: flex; gap: 16px; align-items: flex-start; }
.topic-header h1 { margin: 0 0 4px; }
.topic-header > div { flex: 1; }
.topic-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Commentaires internes d'équipe --- */
.comment { border-left: 3px solid var(--line); padding: 4px 10px; margin-bottom: 10px; }
.comment-head { display: flex; gap: 8px; align-items: baseline; font-size: .9em; }
.mention { background: #fdf0d5; border-radius: 4px; padding: 0 3px; font-weight: 600; }
.timecode { background: #dcebe8; color: var(--accent); border-radius: 4px; padding: 0 4px; font-weight: 600; white-space: nowrap; }
a.timecode:hover { text-decoration: none; opacity: .85; }
.comment-form { display: flex; gap: 8px; align-items: flex-start; }
.comment-form textarea { flex: 1; }

/* --- Calendrier complet (mois / semaine) --- */
.cal-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.cal-toolbar h1 { margin: 0; }
.cal-nav { display: flex; gap: 6px; align-items: center; }
.cal-views { margin-left: 12px; }
.cal-week .cal-day { min-height: 160px; }
.cal-week .cal-event { white-space: normal; margin-bottom: 6px; }
.cal-none { display: block; text-align: center; margin-top: 12px; }
.topic-cover { width: 160px; max-height: 110px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.cover-preview { max-width: 220px; margin-top: 8px; border-radius: 8px; display: block; }
.topic-meta { margin: 4px 0; }
.topic-link { font-weight: 600; }
.next-action-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.next-action-row:last-child { border-bottom: none; }
.crew-row select { margin-top: 2px; }
.question-list li { margin: 4px 0; }
.task-list { list-style: none; padding: 0; }
.task { display: flex; align-items: center; gap: 8px; padding: 5px 0; flex-wrap: wrap; }
.task.done .task-name { text-decoration: line-through; color: var(--muted); }
.task-check { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
/* Étapes verrouillées (les tâches se règlent dans l'ordre) & tâches impossibles */
.task-list.locked { opacity: .55; }
.task.ignored .task-name { text-decoration: line-through; color: var(--muted); }
.task-impossible { color: var(--err); font-size: .85em; font-weight: 600; }
.task-skip { font-size: .8em; color: var(--muted); }
.task-skip:hover { color: var(--err); }
.task-done-at { font-size: .85em; }
.task-url { flex: 1; min-width: 200px; margin: 0 !important; font-size: .85em; padding: 4px 8px; }
.verify-ok { color: var(--ok); font-size: .85em; }
.verify-echec { color: var(--err); font-size: .85em; }
.verify-en_attente { color: var(--warn); font-size: .85em; }
.file-list li { margin: 4px 0; }
.thumbnail-gallery { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.thumbnail-option { border: 2px solid var(--line); border-radius: var(--radius); padding: 6px; text-align: center; width: 180px; }
.thumbnail-option.chosen { border-color: var(--ok); }
.thumbnail-option img { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 4px; }
.timeline { list-style: none; padding: 0; }
.timeline li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.timeline li.day-sep { background: #efede7; font-weight: 600; font-size: .85em;
  text-transform: capitalize; padding: 3px 8px; border-bottom: none; border-radius: 5px; margin-top: 8px; }
.timeline-hour { display: inline-block; min-width: 42px; }
.admin-list { list-style: none; padding: 0; }
.admin-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
details summary { cursor: pointer; font-weight: 600; margin: 6px 0; }

/* --- Chat --- */
.chat { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.msg { max-width: 75%; padding: 8px 12px; border-radius: 12px; background: #eeece6; }
.msg-equipe { align-self: flex-end; background: #dcebe8; }
.msg-invite { align-self: flex-start; }
.msg-who { display: block; font-size: .75em; font-weight: 700; color: var(--muted); }
.msg-body { display: block; }
.msg-when { display: block; font-size: .7em; color: var(--muted); text-align: right; }

/* --- Login & portail invité --- */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; width: 360px; }
.login-box h1 { text-align: center; margin: 0; }
.login-logo { display: block; width: 64px; margin: 0 auto 10px; transition: transform .2s; }
.login-logo:hover { transform: scale(1.08); }
.login-footer { text-align: center; font-size: .8em; color: var(--muted); margin-top: 18px; }
.login-box .muted { text-align: center; margin-top: 4px; }
.guest-page { background: var(--bg); }

/* --- Avatars (photo ou initiales) : contacts, membres, cartes du kanban --- */
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; }
.avatar-initials { background: var(--accent); color: var(--accent-ink); text-align: center; line-height: 36px; font-weight: 600; font-size: .8em; }
.avatar-lg { width: 72px; height: 72px; line-height: 72px; font-size: 1.2em; }
.avatar-sm { width: 22px; height: 22px; line-height: 22px; font-size: .68em; margin-left: 2px; }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; font-size: 14px; vertical-align: middle; margin-left: 2px; }
.contact-photo-current { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
fieldset.channels { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 14px; padding: 10px 12px; }
fieldset.channels legend { font-size: .85em; color: var(--muted); padding: 0 6px; }
.channel-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.channel-row input[type="radio"] { margin: 0; accent-color: var(--accent); }
.score-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: .8em; font-weight: 600; }
.score-badge.ok { background: #e3f3e8; color: var(--ok); }
.score-badge.warn { background: #fdf0e3; color: var(--warn); }
.score-badge.err { background: #fbe9e7; color: var(--err); }

/* --- Géolocalisation : autocomplétion commune et carte des épisodes --- */
.city-field { position: relative; }
.city-suggestions { position: absolute; z-index: 30; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); max-width: 320px; }
.city-suggestions button { display: block; width: 100%; text-align: left; padding: 7px 12px;
  border: 0; background: none; cursor: pointer; font: inherit; }
.city-suggestions button:hover { background: var(--bg); }
.episode-map { height: 70vh; border-radius: var(--radius); box-shadow: var(--shadow); }
.map-popup-list { margin: 6px 0 0; padding-left: 18px; }
.hashtag-hint { background: #eef7f0; border-radius: var(--radius); padding: 8px 12px; }

/* --- Recherche globale (nav) --- */
.nav-search input[type=search] { width: 170px; margin: 0; padding: 5px 10px; font-size: .9em; }
.nav-search input[type=search]:focus { width: 240px; transition: width .15s; }

/* --- Le Gorille MAUZ 🦍, guide de l'application --- */
.gorille {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fdf6e3; border: 1px solid #ecdcae; border-radius: var(--radius);
  padding: 10px 14px; margin: 12px 0; box-shadow: var(--shadow);
}
.gorille-face { font-size: 1.8em; }
.gorille-text { flex: 1; min-width: 220px; font-size: .95em; }

/* --- Page publique de repartage --- */
.share-links { list-style: none; padding: 0; }
.share-links li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.share-links li:last-child { border-bottom: none; }
.share-links a { flex: 1; font-weight: 600; word-break: break-all; }
.share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Pied de page : version de l'application --- */
.app-footer { text-align: center; color: var(--muted); font-size: .82em; padding: 18px 0 10px; }

/* --- Blocs repliés (journal du sujet…) --- */
.fold summary { cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary h2 { display: inline-block; margin: 0; }
.fold summary::before { content: '▸ '; color: var(--muted); }
.fold[open] summary::before { content: '▾ '; }
.fold[open] summary { margin-bottom: 8px; }

/* --- Bouton d'avancement en bas des tâches --- */
.task-advance { margin: 14px 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.task-advance button:disabled { opacity: .5; cursor: not-allowed; }

/* --- Temps bénévole --- */
.time-list { list-style: none; padding: 0; }
.time-list li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.time-list li:last-child { border-bottom: none; }

/* --- Autocomplétion des mentions @Prénom --- */
.mention-menu {
  position: absolute; z-index: 60; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.mention-item { padding: 6px 12px; cursor: pointer; }
.mention-item.selected, .mention-item:hover { background: var(--accent); color: #fff; }

/* --- Aide des raccourcis clavier (touche ?) --- */
.help-overlay {
  position: fixed; inset: 0; z-index: 70; background: rgba(20, 26, 31, .55);
  display: flex; align-items: center; justify-content: center;
}
.help-panel {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 28px; max-width: 420px; width: 92%; max-height: 85vh; overflow: auto;
}
.help-panel h2 { margin-top: 0; }
.help-panel table { border-collapse: collapse; width: 100%; }
.help-panel td { padding: 5px 8px 5px 0; border-bottom: 1px dashed var(--line); }
.help-panel tr:last-child td { border-bottom: none; }

/* --- Météo du tournage (v1.17.2) --- */
.weather-widget:empty { display: none; }
.weather-concerning { color: var(--err); font-weight: 600; }

/* --- Palette de commandes (Ctrl+K, v1.17.0) --- */
.palette-overlay { align-items: flex-start; padding-top: 12vh; }
.palette-panel { max-width: 520px; padding: 14px; }
.palette-input {
  width: 100%; margin: 0 0 8px; padding: 10px 12px; font-size: 1.05em;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.palette-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.palette-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer;
}
.palette-item.selected, .palette-item:hover { background: var(--accent); color: #fff; }
.palette-icon { width: 1.4em; text-align: center; }

/* --- Confirmations maison (remplace confirm() du navigateur) --- */
.confirm-panel { max-width: 380px; }
.confirm-message { white-space: pre-line; margin-top: 0; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* --- Micro-célébrations (v1.9.2) : publication vérifiée --- */
.confetti-burst { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.confetti-piece {
  position: absolute; top: -12px; width: 8px; height: 14px; opacity: .9;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(105vh) rotate(540deg); opacity: .2; }
}
.celebration-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 20px;
  box-shadow: var(--shadow); font-weight: 600; z-index: 81; opacity: 0;
  transition: opacity .3s, transform .3s; max-width: 90vw; text-align: center;
}
.celebration-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- Toast d'erreur maison (audit « maison solide », remplace les derniers alert()) --- */
.error-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--err); color: #fff; padding: 12px 20px; border-radius: 20px;
  box-shadow: var(--shadow); font-weight: 600; z-index: 81; opacity: 0;
  transition: opacity .3s, transform .3s; max-width: 90vw; text-align: center;
}
.error-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- Onboarding Gorille pas-à-pas (v1.9.2) --- */
.onboarding-panel { text-align: center; max-width: 380px; }
.onboarding-panel h2 { margin: 10px 0 4px; }
.onboarding-actions { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* --- Déclinaisons par sujet (v1.10.0) --- */
.declinaison-item { border-left: 3px solid var(--line); padding: 4px 10px 10px; margin-bottom: 10px; }
.declinaison-task { padding-left: 2px; }

/* --- Pagination (v1.9.3, vitesse perçue) --- */
.pagination { display: flex; justify-content: space-between; align-items: center; margin: 14px 0; gap: 10px; }
.pagination a { font-weight: 600; }

/* --- Déplacer une carte au doigt (v1.9.3, appui long) --- */
.move-menu { text-align: left; }
.move-menu-item { display: block; width: 100%; text-align: left; margin: 6px 0; min-height: 44px; }

/* --- Cloche de notifications --- */
.nav-bell { position: relative; }
.bell-badge {
  position: absolute; top: -4px; right: -8px; background: #c92a2a; color: #fff;
  border-radius: 10px; font-size: .62em; font-weight: 700; padding: 1px 5px;
}
.notif-list { list-style: none; padding: 0; }
.notif-list li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.notif-list li.unread { font-weight: 600; }
.notif-prefs td, .notif-prefs th { padding: 5px 14px 5px 0; text-align: left; }

/* --- Fiche sujet en plein écran (surimpression du board, clic carte) : page
   la plus utilisée, elle mérite tout l'espace plutôt qu'un panneau étroit --- */
.card-modal {
  position: fixed; inset: 0; z-index: 80; background: rgba(20, 26, 31, .35);
}
.card-modal-box {
  position: fixed; inset: 0; width: 100vw;
  background: var(--bg); box-shadow: -4px 0 24px rgba(20, 26, 31, .3);
  transform: translateX(100%); transition: transform .18s ease;
}
.card-modal-box.open { transform: translateX(0); }
.card-modal-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.card-modal-close {
  position: absolute; top: 8px; right: 10px; z-index: 2; background: var(--card);
  border: 1px solid var(--line); border-radius: 50%; width: 30px; height: 30px; cursor: pointer;
}
.kanban-wrap.board-blurred { filter: blur(2px); transition: filter .2s ease; pointer-events: none; }

/* --- Activité du board (flux latéral) --- */
.board-activity {
  position: fixed; top: 60px; right: 10px; bottom: 10px; width: 330px; z-index: 50;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 16px; overflow: auto;
}
/* Masqué par défaut (desktop) : le panneau fixe a la place de flotter sans
   gêner. Affiché seulement en dessous, où il recouvrirait de vraies cartes
   du board sans qu'on comprenne qu'un clic à côté le referme. */
.board-activity-backdrop { display: none; }

/* --- Stats : barres par mois --- */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.bar { width: 70%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.bar-num, .bar-label { font-size: .72em; color: var(--muted); }

/* --- Mobile --- */
@media (max-width: 800px) {
  .grid-2, .form-row, .dash-blocks { grid-template-columns: 1fr; }
  .topic-header { flex-direction: column; }
  .topnav { font-size: .9em; }
  .msg { max-width: 92%; }
  .nav-search input[type=search], .nav-search input[type=search]:focus { width: 120px; }

  /* Les 4 destinations principales passent dans la barre du bas */
  .nav-primary { display: none; }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: var(--card); border-top: 1px solid var(--line);
  }
  .tabbar a, .tabbar .nav-more-toggle {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 7px 2px 8px; border-radius: 0; font-size: .66em; color: var(--muted); text-align: center;
  }
  .tabbar a:hover { background: none; }
  .tabbar a.active, .tabbar .nav-more-toggle.active {
    background: none; color: var(--accent); font-weight: 600;
  }
  .tabbar .icon { font-size: 1.3rem; }
  .tabbar .nav-more-panel { top: auto; bottom: 100%; left: auto; right: 4px; margin: 0 0 6px; }
  .container { padding-bottom: 78px; } /* la barre du bas ne recouvre pas le contenu */

  /* --- Confort tactile (v1.9.3) : cibles ≥ 44 px sur mobile/tablette --- */
  .btn, .btn-sm { min-height: 44px; }
  .nav-bell, .nav-more-toggle { min-height: 44px; display: inline-flex; align-items: center; }
  .filter-bar input, .filter-bar select { min-height: 44px; }
  .task-check { width: 22px; height: 22px; }
  .task { padding: 10px 0; }
  .card-edit { min-width: 36px; min-height: 36px; }

  /* --- Kanban mobile en liste verticale (v1.10.1, audit regard neuf P2) :
     colonnes empilées par étape plutôt que défilement horizontal, bouton
     « Étape suivante » sur chaque carte à la place du glisser-déposer
     (qui reste utilisable au doigt via l'appui long, v1.9.3, mais une
     liste verticale + un bouton est plus lisible sur un petit écran) --- */
  .kanban-wrap { flex-direction: column; overflow-x: visible; }
  .kanban-col { width: 100%; min-width: 0; }
  .card-next-step { display: block; }
}

/* --- Tablette (audit « maison solide » UX #6) : entre le mobile (800px,
   ci-dessus) et le desktop, seul point de rupture qui manquait — le panneau
   « Activité du board » (position: fixed, ci-dessus) recouvrait de vraies
   cartes du kanban sans aucun indice que c'est un panneau temporaire. Un
   fond assombri cliquable, comme les autres modales maison, lève l'ambiguïté. --- */
@media (max-width: 1100px) {
  .board-activity-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 49; /* juste sous .board-activity (50) */
    background: rgba(20, 26, 31, .45);
  }
  .board-activity { width: min(330px, 82vw); }
}

/* Le crayon d'édition rapide n'a pas de :hover sur écran tactile : toujours visible */
@media (hover: none) {
  .card-edit { opacity: 1; }
}

/* Fiche « tournage du jour » (v1.5.2) */
.rdv-sheet-when { font-size: 1.1em; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.checklist label { display: flex; align-items: center; gap: 8px; }

/* Imprimable : sans nav ni boutons d'action. */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* Mode pas à pas (v1.5.4, réglage /profil) : masque entièrement les
   sections hors de l'étape en cours sur la fiche sujet (au lieu de
   simplement les replier) pour les bénévoles qui découvrent l'outil. */
body.guided .fold-hidden { display: none; }

/* --- Badge « BETA » (v1.24.1) : rappelle en permanence que l'interface est en développement --- */
.beta-badge {
  position: fixed; right: 14px; bottom: 14px; z-index: 50;
  background: #f0a94e; color: #26323a; font-weight: 700; font-size: .78em; letter-spacing: .06em;
  padding: 6px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: help; user-select: none;
}
@media (max-width: 800px) { .beta-badge { bottom: 76px; } } /* au-dessus de la barre d'onglets mobile */

/* --- Menu du haut revu (v1.25.0) : « Plus » par rubriques, « Créer » et menu compte --- */
.nav-more-wide { min-width: 230px; max-height: 80vh; overflow-y: auto; }
.nav-more-right { left: auto; right: 0; }
.nav-group {
  margin: 8px 10px 2px; padding-top: 6px; font-size: .72em; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  border-top: 1px solid var(--line);
}
.nav-more-panel > .nav-group:first-child, .nav-more-panel > .only-mobile + .nav-group { border-top: 0; margin-top: 2px; }
.only-mobile { display: none; }
.nav-more-toggle.btn-primary { color: #fff; }
.nav-more-toggle.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.nav-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.nav-more-panel form { margin: 0; }
.nav-menu-item {
  width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer;
  padding: 7px 10px; border-radius: 7px; color: var(--ink);
}
.nav-menu-item:hover { background: #eeece6; }
@media (max-width: 800px) {
  .only-mobile { display: block; }
  .nav-user-name { display: none; }
  .nav-create .nav-more-toggle { padding-left: 8px; padding-right: 8px; }
  .tabbar .nav-more-panel { max-height: 70vh; overflow-y: auto; min-width: 220px; }
}

/* =====================================================================
   Mobile d'abord (v1.27.0) : l'application se pense d'abord au pouce.
   ===================================================================== */
input[type=time], input[type=month], input[type=week] {
  width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; font-weight: 400;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.nav-search-link { display: none; }
.nav-menu-item[hidden] { display: none; }

@media (max-width: 800px) {
  /* Barre du haut sur UNE ligne : logo · 🔍 · 🔔 · ＋ · compte */
  .topnav { flex-wrap: nowrap; padding: 6px 10px; gap: 2px; padding-top: max(6px, env(safe-area-inset-top)); }
  .topnav .brand { margin-right: 0; white-space: nowrap; }
  .nav-search { display: none; }
  .nav-search-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 1.15rem; }
  .nav-create .nav-label { display: none; }
  .nav-create .nav-more-toggle { font-size: 1.1rem; padding: 6px 12px; }
  .topnav .nav-more-toggle { min-height: 44px; }
  .nav-user .nav-more-toggle { padding: 6px 8px; }

  /* Sous-menus (admin…) : une seule ligne qu'on fait glisser, au lieu d'un mur de boutons */
  .subnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { white-space: nowrap; flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; }

  /* Kanban : on fait glisser les colonnes d'un doigt, une colonne à la fois */
  .kanban-wrap { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 14px; }
  .kanban-col { flex: 0 0 86%; width: 86%; min-width: 0; scroll-snap-align: center; }

  /* Zones sûres des téléphones à encoche + badge BETA discret */
  .tabbar { padding-bottom: env(safe-area-inset-bottom); }
  .container { padding-bottom: calc(78px + env(safe-area-inset-bottom)); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .beta-badge { bottom: calc(66px + env(safe-area-inset-bottom)); right: 8px; padding: 3px 9px; font-size: .64em; opacity: .9; }

  /* Formulaires : champs ≥ 16 px (iOS ne zoome plus à la saisie) et gros boutons */
  input, select, textarea { font-size: 16px; }
  .form-row > label, .form-row > div { min-width: 0; }
  .add-row { flex-wrap: wrap; }
  .add-row input[type=text], .add-row input[type=url], .add-row input[type=email], .add-row select { flex: 1 1 100%; }
  .btn { min-height: 44px; }

  /* Tableaux : on garde le défilement horizontal mais la 1re colonne reste visible */
  .table-wrap .table th:first-child, .table-wrap .table td:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }
  h1 { font-size: 1.45rem; }
  .flash { margin-left: 10px; margin-right: 10px; word-break: break-word; }
}

/* Appli installée (PWA) : pas de rebond de page, texte non redimensionné en paysage */
html { -webkit-text-size-adjust: 100%; }
@media (display-mode: standalone) { body { overscroll-behavior-y: none; } }

/* --- Éditeur de texte riche (v1.27.1) : voir public/assets/js/editor.js --- */
.editor { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; margin-top: 4px; }
.editor:focus-within { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.editor-bar { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--bg, #f5f4f0);
              overflow-x: auto; scrollbar-width: none; }
.editor-bar::-webkit-scrollbar { display: none; }
.editor-btn { flex: 0 0 auto; min-height: 36px; min-width: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px;
              background: var(--card); color: var(--ink); font: inherit; font-size: .9em; cursor: pointer; }
.editor-btn:hover { background: #eeece6; }
.editor-btn.ed-b { font-weight: 700; }
.editor-btn.ed-i { font-style: italic; }
.editor-area { min-height: 150px; max-height: 60vh; overflow-y: auto; padding: 10px 12px; font: inherit; outline: none;
               line-height: 1.5; resize: vertical; }
.editor-area:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.editor-area h4, .idea-desc h4 { margin: 10px 0 4px; font-size: 1.02em; }
.editor-area ul, .editor-area ol, .idea-desc ul, .idea-desc ol { margin: 4px 0 4px 1.3em; padding: 0; }
.editor-area a, .idea-desc a { color: var(--accent); text-decoration: underline; }
.idea-desc { margin-top: 6px; line-height: 1.5; }
.idea-form .form-row { margin-top: 10px; }
@media (max-width: 800px) { .editor-area { min-height: 170px; font-size: 16px; } }

/* Liens utiles (vie de l'association) */
.link-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 10px; }
.link-main { flex: 1 1 200px; min-width: 0; word-break: break-word; }
.link-edit { flex: 0 0 auto; }
.link-edit summary { list-style: none; cursor: pointer; padding: 4px 8px; }
.link-edit summary::-webkit-details-marker { display: none; }
.link-edit[open] { flex: 1 1 100%; }

/* Emprunt de matériel (v1.29.0) */
.loan-list { list-style: none; margin: 0; padding: 0; }
.loan-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px;
            padding: 12px 6px; border-bottom: 1px solid var(--line); }
.loan-row:last-child { border-bottom: 0; }
.loan-name { flex: 1 1 220px; min-width: 0; }
.loan-action { flex: 0 1 auto; }
.loan-action .add-row { flex-wrap: wrap; }
.loan-mine { background: rgba(14, 122, 110, .08); border-radius: 8px; }
.loan-out .loan-name strong { opacity: .85; }
@media (max-width: 800px) { .loan-action { flex: 1 1 100%; } .loan-action .btn { width: 100%; } }

/* Liste des adhérents : photo bien visible, petit gorille quand il n'y en a pas encore */
.avatar-member { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; flex: 0 0 auto; }
.avatar-gorilla { display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1;
                  background: var(--pastel-gorille, rgba(240, 169, 78, .12)); border: 1px solid var(--gorille-line, rgba(240, 169, 78, .35)); }

/* Aide du champ de recherche : pastille du raccourci Ctrl K (v1.31.0) */
.nav-search { position: relative; }
.nav-kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: inherit; font-size: .72em; padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--bg, #f5f4f0); color: var(--muted); line-height: 1.4;
}
.nav-search:focus-within .nav-kbd { display: none; }
.nav-search input[type=search] { padding-right: 52px; }
@media (max-width: 800px) { .nav-kbd { display: none; } }

/* --- Recherche rapide « à la Slack » (v1.31.0) --- */
.palette-panel { max-width: 680px; padding: 12px 12px 8px; }
.palette-list { max-height: 62vh; }
.palette-group { list-style: none; padding: 10px 10px 4px; font-size: .72em; font-weight: 700; text-transform: uppercase;
                 letter-spacing: .05em; color: var(--muted); }
.palette-item { display: flex; align-items: flex-start; gap: 10px; }
.palette-icon { flex: 0 0 auto; width: 1.6em; text-align: center; padding-top: 1px; }
.palette-body { display: flex; flex-direction: column; min-width: 0; }
.palette-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-sub { font-size: .82em; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item mark { background: rgba(240, 169, 78, .45); color: inherit; border-radius: 3px; padding: 0 1px; font-weight: 700; }
.palette-item.selected mark { background: rgba(255, 255, 255, .28); }
.palette-empty { list-style: none; padding: 10px; }
.palette-foot { font-size: .72em; padding: 8px 6px 2px; border-top: 1px solid var(--line); margin-top: 6px; }
@media (max-width: 800px) { .palette-overlay { padding-top: 4vh; } .palette-foot { display: none; } .palette-list { max-height: 70vh; } }

/* Personnes attribuées à un projet (v1.31.0) */
.project-people { margin-top: 10px; }
.project-people summary { cursor: pointer; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 12px; padding: 8px 2px; }
.people-grid label { margin: 0; }

/* Alerte « candidatures bénévoles à traiter » : impossible à rater (v1.31.2) */
.banner-alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; max-width: 1500px; margin: 10px auto 0;
  padding: 12px 18px; border-radius: 10px; background: #fff0c9; border: 2px solid #f0a94e; color: #5a3d00;
  text-decoration: none; box-shadow: 0 2px 10px rgba(240, 169, 78, .35); animation: banner-pulse 2.4s ease-in-out 3;
}
.banner-alert:hover { background: #ffe8ad; text-decoration: none; }
.banner-alert-go { margin-left: auto; font-weight: 700; }
@keyframes banner-pulse { 50% { box-shadow: 0 0 0 5px rgba(240, 169, 78, .35); } }
@media (prefers-reduced-motion: reduce) { .banner-alert { animation: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .banner-alert { background: #4a3a14; border-color: #c88a2f; color: #ffe2a8; } }
[data-theme="sombre"] .banner-alert { background: #4a3a14; border-color: #c88a2f; color: #ffe2a8; }
.nav-dot { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--err, #c0392b);
           color: #fff; font-size: .72em; font-weight: 700; line-height: 18px; text-align: center; }
.join-box { margin: 14px 0; padding: 12px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); text-align: left; }
.join-box p { margin: 6px 0; }
.join-step { border: 2px solid var(--accent); }

/* Emojis « à la Slack » (v1.31.2) */
.emoji-btn { display: block; margin: 2px 0 8px auto; padding: 2px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; font-size: 1.05em; line-height: 1.4; }
.emoji-btn:hover { background: #eeece6; }
.emoji-suggest { position: fixed; z-index: 200; margin: 0; padding: 4px; list-style: none; min-width: 220px; max-width: 320px; max-height: 280px; overflow-y: auto;
                 background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .22); }
.emoji-suggest li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.emoji-suggest li.selected, .emoji-suggest li:hover { background: var(--accent); color: #fff; }
.emoji-suggest li.selected .muted, .emoji-suggest li:hover .muted { color: rgba(255, 255, 255, .8); }
.emoji-suggest-e { font-size: 1.35em; width: 1.5em; text-align: center; }
.emoji-picker { position: fixed; z-index: 210; width: min(340px, calc(100vw - 16px)); padding: 8px; background: var(--card); border: 1px solid var(--line);
                border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .28); }
.emoji-search { width: 100%; margin: 0 0 6px; font-size: 16px; }
.emoji-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); padding-bottom: 4px; scrollbar-width: none; }
.emoji-tabs button { flex: 0 0 auto; border: 0; background: none; font-size: 1.2em; padding: 4px 7px; border-radius: 7px; cursor: pointer; }
.emoji-tabs button:hover { background: #eeece6; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 240px; overflow-y: auto; padding-top: 6px; }
.emoji-title, .emoji-none { grid-column: 1 / -1; font-size: .74em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 2px 4px; }
.emoji-cell { border: 0; background: none; font-size: 1.45em; line-height: 1.5; border-radius: 7px; cursor: pointer; min-height: 38px; }
.emoji-cell:hover, .emoji-cell:focus { background: var(--accent); outline: none; }
.emoji-foot { font-size: .74em; padding: 6px 4px 0; min-height: 1.6em; }
@media (max-width: 800px) { .emoji-picker { left: 8px !important; right: 8px; width: auto; } .emoji-grid { grid-template-columns: repeat(7, 1fr); } }