/* CRAH – interface de saisie et d'administration.
   Palette : encre (bleu nuit), bleu d'encre pour l'action, ambre pour le focus. */

/* CRAH – styles du module, chargés sur les pages CRAH d'un site GeneratePress.
   Les couleurs reprennent les couleurs globales GeneratePress (Apparence > Personnaliser > Couleurs),
   avec la palette CRAH en valeurs de repli. La typographie est celle du thème. */

.crah-page {
	--crah-ink: var(--contrast, #1c2330);
	--crah-muted: var(--contrast-2, #596273);
	--crah-field: var(--contrast-3, #b7bfcb);
	--crah-line: var(--base, #d9dee6);
	--crah-line-soft: #eceff4;
	--crah-paper: var(--base-2, #f3f5f8);
	--crah-surface: var(--base-3, #ffffff);
	--crah-accent: var(--accent, #0f5b78);
	--crah-accent-strong: #0a4259;
	--crah-accent-soft: #e2edf2;
	--crah-ok: #2f7a4f;
	--crah-ok-soft: #e3f1e8;
	--crah-warn: #93570a;
	--crah-warn-soft: #fbf0dc;
	--crah-danger: #a8322d;
	--crah-danger-soft: #f8e4e2;
	--crah-focus: #f0b429;
}

/* ---------- Intégration GeneratePress ---------- */

.crah-page .inside-article { padding-top: 32px; }
.crah-page .entry-content { margin-top: 0; }
.crah-page .entry-content .crah-app { font-size: 15px; line-height: 1.5; color: var(--crah-ink); }
:where(.crah-app, .crah-dialog) p { margin: 0 0 .75em; }
:where(.crah-app, .crah-dialog) :is(ul, ol) { margin: 0; }
:where(.crah-app, .crah-dialog) table { margin: 0; border: 0; }
:where(.crah-app, .crah-dialog) :is(h1, h2, h3, h4, h5) { margin-bottom: 0; }

/* Entrée active du menu principal (routes de l'application). */
.main-navigation .crah-current > a { font-weight: 600; }

.crah-page *,
.crah-page *::before,
.crah-page *::after { box-sizing: border-box; }

.crah-page :focus-visible {
	outline: 3px solid var(--crah-focus);
	outline-offset: 2px;
}

.crah-sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

.crah-muted { color: var(--crah-muted); }
.crah-loading { color: var(--crah-muted); padding: 24px 0; }

/* ---------- En-tête de semaine ---------- */

.crah-week { margin: 0 0 28px; padding-bottom: 22px; border-bottom: 1px solid var(--crah-line); }
.crah-week__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 16px; margin-bottom: 16px; }
.crah-week__title {
	margin: 0;
	font-size: clamp(26px, 3.3vw, 40px);
	font-weight: 650;
	line-height: 1.1;
	letter-spacing: -.015em;
}
.crah-week__days { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; }
.crah-week__day {
	width: 46px; padding: 6px 0 7px; text-align: center;
	background: var(--crah-surface); border: 1px solid var(--crah-line); border-radius: 6px;
}
.crah-week__dow { display: block; font-size: 12px; color: var(--crah-muted); }
.crah-week__num { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.crah-week__day.is-weekend { background: transparent; border-style: dashed; color: var(--crah-muted); }
.crah-week__day.is-today { background: var(--crah-accent); border-color: var(--crah-accent); color: #fff; }
.crah-week__day.is-today .crah-week__dow { color: #cfe4ec; }
.crah-week__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crah-week__select { max-width: 340px; }

/* ---------- Titres, textes ---------- */

.crah-h2 { margin: 0; font-size: 22px; font-weight: 650; line-height: 1.25; }
.crah-h3 { margin: 0 0 6px; font-size: 19px; font-weight: 650; line-height: 1.3; }
.crah-h4 { margin: 0 0 4px; font-size: 16px; font-weight: 650; color: var(--crah-accent-strong); }
.crah-intro { margin: 6px 0 20px; max-width: 72ch; }

.crah-toolbar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
	margin-bottom: 18px;
}
.crah-toolbar .crah-h2 { margin-right: auto; }

/* ---------- Boutons ---------- */

.crah-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 8px 14px;
	font: inherit; font-size: 14px; line-height: 1.2;
	color: var(--crah-ink); background: var(--crah-surface);
	border: 1px solid var(--crah-line); border-radius: 6px;
	cursor: pointer; text-decoration: none;
}
.crah-btn:hover { border-color: var(--crah-accent); color: var(--crah-accent-strong); }
.crah-btn--primary { background: var(--crah-accent); border-color: var(--crah-accent); color: #fff; font-weight: 600; }
.crah-btn--primary:hover { background: var(--crah-accent-strong); border-color: var(--crah-accent-strong); color: #fff; }
.crah-btn--ghost { background: transparent; }
.crah-btn--danger { color: var(--crah-danger); border-color: #e3bbb7; }
.crah-btn--danger:hover { background: var(--crah-danger-soft); border-color: var(--crah-danger); color: var(--crah-danger); }
.crah-btn--small { padding: 5px 10px; font-size: 13px; }
.crah-btn--icon { padding: 4px 9px; font-size: 14px; }
.crah-btn--block { width: 100%; padding: 11px 14px; font-size: 15px; }
.crah-btn:disabled { opacity: .45; cursor: default; pointer-events: none; }

/* ---------- Formulaires ---------- */

.crah-page input[type="text"],
.crah-page input[type="email"],
.crah-page input[type="password"],
.crah-page input[type="number"],
.crah-page input[type="date"],
.crah-page select,
.crah-page textarea {
	max-width: 100%;
	padding: 8px 10px;
	font: inherit; font-size: 15px;
	color: var(--crah-ink); background: var(--crah-surface);
	border: 1px solid var(--crah-field); border-radius: 6px;
}
.crah-page textarea { width: 100%; min-height: 84px; resize: vertical; }
.crah-page input:focus,
.crah-page select:focus,
.crah-page textarea:focus { border-color: var(--crah-accent); }

.crah-field { display: flex; flex-direction: column; gap: 4px; }
.crah-field > input,
.crah-field > select,
.crah-field > textarea { width: 100%; }
.crah-field__label { font-size: 14px; font-weight: 600; }
.crah-field__help { margin: 0; font-size: 13px; color: var(--crah-muted); }
.crah-fields-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

.crah-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; border: 0; }
.crah-checks legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.crah-check { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.crah-check input { width: 17px; height: 17px; accent-color: var(--crah-accent); }

.crah-error { margin: 0; color: var(--crah-danger); font-size: 14px; }
.crah-error:empty { display: none; }

/* ---------- Bandeaux, pastilles, états vides ---------- */

.crah-banner {
	margin: 0 0 16px; padding: 12px 16px; max-width: 880px;
	border-left: 4px solid var(--crah-accent); border-radius: 4px;
	background: var(--crah-accent-soft); font-size: 14.5px;
}
.crah-banner--warn { border-color: var(--crah-warn); background: var(--crah-warn-soft); }
.crah-banner--error { border-color: var(--crah-danger); background: var(--crah-danger-soft); }
.crah-banner--info { border-color: var(--crah-accent); background: var(--crah-accent-soft); }

.crah-chip {
	display: inline-block; padding: 2px 9px;
	font-size: 12.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
	color: var(--crah-muted); background: var(--crah-surface);
	border: 1px solid var(--crah-line); border-radius: 999px;
}
.crah-chip--soumis { color: var(--crah-accent-strong); background: var(--crah-accent-soft); border-color: #b9d4df; }
.crah-chip--relu { color: var(--crah-ok); background: var(--crah-ok-soft); border-color: #b8dcc5; }
.crah-chip--integre { color: #fff; background: var(--crah-ink); border-color: var(--crah-ink); }
.crah-chip--supprime,
.crah-chip--suspendu { color: var(--crah-danger); background: var(--crah-danger-soft); border-color: #e7c2be; }
.crah-chip--archive { color: var(--crah-muted); background: var(--crah-paper); }
.crah-chip--code { color: var(--crah-accent-strong); font-variant-numeric: tabular-nums; }

.crah-empty {
	max-width: 640px; padding: 28px;
	background: var(--crah-surface); border: 1px dashed var(--crah-field); border-radius: 8px;
	color: var(--crah-muted);
}

/* ---------- Saisie du CRAH ---------- */

.crah-editor__head {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
	gap: 16px 32px; max-width: 880px; margin-bottom: 20px;
}
.crah-editor__meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--crah-muted); }

.crah-progress { width: min(280px, 100%); }
.crah-progress__bar { height: 8px; background: var(--crah-line); border-radius: 4px; overflow: hidden; }
.crah-progress__fill { display: block; height: 100%; width: 0; background: var(--crah-accent); transition: width .3s ease; }
.crah-progress.is-complete .crah-progress__fill { background: var(--crah-ok); }
.crah-progress__label { margin: 6px 0 0; font-size: 13px; color: var(--crah-muted); }

.crah-rub {
	max-width: 880px; margin: 0 0 18px; padding: 22px 26px 12px;
	background: var(--crah-surface); border: 1px solid var(--crah-line); border-radius: 8px;
}
.crah-rub > .crah-h3 { padding-bottom: 10px; border-bottom: 2px solid var(--crah-ink); }
.crah-sub { margin: 18px 0 4px; padding-left: 16px; border-left: 3px solid var(--crah-accent-soft); }

.crah-q { padding: 16px 0; border-top: 1px solid var(--crah-line-soft); }
.crah-rub > .crah-q:first-of-type,
.crah-sub > .crah-h4 + .crah-q { border-top: 0; }
.crah-q__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.crah-q__title { font-size: 15.5px; font-weight: 600; }
.crah-q__req { font-size: 12.5px; font-weight: 600; color: var(--crah-warn); }
.crah-q__tag { font-size: 12.5px; color: var(--crah-accent); }
.crah-q__consigne { margin: 0 0 10px; font-size: 14px; color: var(--crah-muted); max-width: 72ch; }
.crah-q__rien { margin-top: 10px; color: var(--crah-muted); }
.crah-q.is-rien .crah-q__input { opacity: .45; }
.crah-q.is-missing .crah-q__title { color: var(--crah-danger); }
.crah-q.is-missing .crah-q__req { color: var(--crah-danger); }

.crah-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.crah-rte-tools { display: flex; gap: 6px; margin-bottom: 6px; }
.crah-rte {
	min-height: 110px; padding: 10px 12px;
	background: var(--crah-surface); border: 1px solid var(--crah-field); border-radius: 6px;
	line-height: 1.6; overflow-wrap: anywhere;
}
.crah-rte:focus { border-color: var(--crah-accent); outline: 3px solid var(--crah-focus); outline-offset: 1px; }
.crah-rte ul, .crah-rte ol, .crah-rte-view ul, .crah-rte-view ol { margin: 4px 0; padding-left: 22px; }
.crah-rte p, .crah-rte-view p { margin: 0 0 6px; }
.crah-count { display: block; margin-top: 4px; font-size: 12.5px; color: var(--crah-muted); text-align: right; }
.crah-count.is-over { color: var(--crah-warn); font-weight: 600; }
.crah-rte-view { line-height: 1.6; }

.crah-value-empty { color: var(--crah-muted); font-style: italic; }

.crah-editor__foot {
	position: sticky; bottom: 0; z-index: 5;
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
	max-width: 880px; margin-top: 8px; padding: 14px 0;
	background: var(--crah-surface);
	border-top: 1px solid var(--crah-line);
}
.crah-savestate { margin: 0; font-size: 14px; color: var(--crah-muted); }
.crah-savestate.is-error { color: var(--crah-danger); font-weight: 600; }

/* ---------- Tableaux ---------- */

.crah-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.crah-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--crah-surface); }
.crah-table th,
.crah-table td { padding: 9px 10px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--crah-line); }
.crah-table thead th { font-size: 13px; font-weight: 600; color: var(--crah-muted); background: var(--crah-paper); white-space: nowrap; }
.crah-table tfoot td { font-weight: 700; background: var(--crah-paper); }
.crah-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.crah-table--grid td { padding: 4px; }
.crah-table--grid input,
.crah-table--grid select { width: 100%; min-width: 110px; padding: 6px 8px; font-size: 14px; }
.crah-table--compact th,
.crah-table--compact td { padding: 5px 6px; }
.crah-table--board th[scope="row"] { font-size: 15px; }
.crah-table__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.crah-grid__add { margin-top: 8px; }
.crah-grid__hint { margin: 6px 0 0; font-size: 12.5px; color: var(--crah-muted); }

.crah-mini { display: flex; align-items: center; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.crah-mini__bar { width: 70px; height: 6px; background: var(--crah-line); border-radius: 3px; overflow: hidden; }
.crah-mini__bar span { display: block; height: 100%; background: var(--crah-accent); }

/* ---------- Paramétrage du formulaire ---------- */

.crah-tree,
.crah-tree__sub,
.crah-tree__champs { list-style: none; margin: 0; padding: 0; }
.crah-tree { max-width: 980px; }
.crah-tree__rub {
	margin: 0 0 14px; padding: 14px 16px 12px;
	background: var(--crah-surface); border: 1px solid var(--crah-line); border-radius: 8px;
}
.crah-tree__sub .crah-tree__rub { margin: 12px 0 0 18px; background: #fafbfc; }
.crah-tree__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.crah-tree__title { flex: 1 1 200px; font-size: 16px; font-weight: 650; }
.crah-tree__sub .crah-tree__title { font-size: 15px; }
.crah-tree__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.crah-tree__champs { margin-top: 10px; }
.crah-tree__champ {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
	margin-top: 6px; padding: 8px 10px;
	background: var(--crah-surface); border: 1px solid var(--crah-line-soft); border-radius: 6px;
}
.crah-tree__name { flex: 1 1 220px; font-weight: 600; font-size: 14.5px; }
.crah-tree__meta { display: flex; flex-wrap: wrap; gap: 4px; }
.crah-grip { cursor: grab; color: var(--crah-muted); user-select: none; font-size: 15px; letter-spacing: -2px; }
.is-archived { opacity: .55; }
.is-drop { outline: 2px dashed var(--crah-accent); outline-offset: 2px; }
.is-dragging { opacity: .4; }

.crah-cols { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Aperçu du CRAH consolidé ---------- */

.crah-doc {
	max-width: 820px; padding: 44px clamp(20px, 5vw, 56px);
	background: var(--crah-surface); border: 1px solid var(--crah-line);
	font-family: Arial, Helvetica, sans-serif; font-size: 14px;
}
.crah-doc__title { margin: 0 0 24px; font-size: 22px; color: var(--crah-accent-strong); }
.crah-doc h3 { margin: 26px 0 8px; padding-bottom: 4px; font-size: 17px; color: var(--crah-accent-strong); border-bottom: 1.5px solid var(--crah-accent); }
.crah-doc h4 { margin: 18px 0 6px; font-size: 15px; color: var(--crah-accent); }
.crah-doc h5 { margin: 14px 0 4px; font-size: 14px; }
.crah-doc .crah-table { margin: 6px 0 12px; font-size: 13px; }
.crah-doc__contrib + .crah-doc__contrib { margin-top: 8px; }

/* ---------- Dialogues ---------- */

.crah-dialog {
	width: min(700px, calc(100vw - 24px));
	max-height: calc(100vh - 40px);
	padding: 0; border: 0; border-radius: 10px;
	color: var(--crah-ink);
	box-shadow: 0 24px 64px rgba(28, 35, 48, .32);
}
.crah-dialog::backdrop { background: rgba(28, 35, 48, .5); }
.crah-dialog__form { display: flex; flex-direction: column; gap: 16px; padding: 24px 26px 0; }
.crah-dialog__title { margin: 0; font-size: 20px; font-weight: 650; }
.crah-dialog__actions {
	position: sticky; bottom: 0;
	display: flex; justify-content: flex-end; gap: 10px;
	margin: 0 -26px; padding: 14px 26px 18px;
	background: var(--crah-surface); border-top: 1px solid var(--crah-line-soft);
}

/* ---------- Notifications ---------- */

.crah-toast {
	position: fixed; right: 20px; bottom: 20px; z-index: 100;
	max-width: min(420px, calc(100vw - 40px));
	padding: 12px 16px; border-radius: 6px;
	color: #fff; background: var(--crah-ink);
	font-size: 14.5px; box-shadow: 0 10px 30px rgba(28, 35, 48, .3);
	opacity: 0; transform: translateY(8px); pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.crah-toast.is-visible { opacity: 1; transform: none; }
.crah-toast.is-ok { background: var(--crah-ok); }
.crah-toast.is-error { background: var(--crah-danger); }

/* ---------- Journal ---------- */

.crah-journal details { font-size: 13px; }
.crah-journal pre {
	max-width: 520px; max-height: 240px; overflow: auto; margin: 6px 0 0; padding: 8px;
	background: var(--crah-paper); border-radius: 4px; font-size: 12px; white-space: pre-wrap;
}

/* ---------- Compte ---------- */

.crah-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 28px; max-width: 640px; }
.crah-dl dt { font-weight: 600; color: var(--crah-muted); }
.crah-dl dd { margin: 0; }
.crah-panel {
	max-width: 640px; padding: 22px 24px; margin-bottom: 20px;
	background: var(--crah-surface); border: 1px solid var(--crah-line); border-radius: 8px;
	display: flex; flex-direction: column; gap: 14px;
}

/* ---------- Connexion ---------- */

.crah-login { display: flex; justify-content: center; padding: 24px 0 48px; }
.crah-login__card {
	width: min(440px, 100%); padding: 36px 32px 26px;
	background: var(--crah-surface); border: 1px solid var(--crah-line); border-top: 4px solid var(--crah-accent); border-radius: 8px;
}
.crah-login__brand { margin: 0 0 18px !important; font-size: 44px; font-weight: 750; line-height: 1; color: var(--crah-accent); letter-spacing: -.01em; }
.crah-login__title { margin: 0; font-size: 21px; font-weight: 650; line-height: 1.25; }
.crah-login__sub { margin: 6px 0 22px !important; font-size: 14px; color: var(--crah-muted); }
.crah-login__form { display: flex; flex-direction: column; gap: 6px; }
.crah-login__form input[type="text"],
.crah-login__form input[type="password"] { width: 100%; margin-bottom: 10px; }
.crah-login__form .crah-check { margin: 4px 0 16px; }
.crah-login__lost { margin: 18px 0 0 !important; text-align: center; font-size: 14px; }
.crah-login__lost a { color: var(--crah-accent); }

/* ---------- Accueil : portail des fonctionnalités ---------- */

.crah-accueil { max-width: 960px; font-size: 15px; line-height: 1.5; color: var(--crah-ink); }
.crah-accueil__head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--crah-line); }
.crah-accueil__title { margin: 0 0 8px; font-size: clamp(26px, 3.3vw, 38px); font-weight: 650; line-height: 1.15; letter-spacing: -.015em; }
.crah-accueil__who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--crah-muted); }

.crah-module { border-radius: 8px; }
.crah-module__title { margin: 0; font-weight: 700; line-height: 1.1; }
.crah-module__desc { margin: 6px 0 0; max-width: 60ch; }

.crah-module--actif {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 32px;
	padding: 28px 30px;
	background: var(--crah-surface);
	border: 1px solid var(--crah-line); border-left: 6px solid var(--crah-accent);
}
.crah-module--actif .crah-module__title { font-size: 44px; letter-spacing: -.01em; color: var(--crah-accent); }
.crah-module__week { margin: 18px 0 0; font-size: 19px; font-weight: 600; }
.crah-module__state { margin: 4px 0 0; color: var(--crah-muted); }
.crah-module__actions { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.crah-module__actions .crah-btn { justify-content: center; }
.crah-module__actions .crah-btn--primary { padding: 12px 18px; font-size: 15px; }

.crah-modules-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.crah-module--avenir {
	padding: 20px 22px;
	border: 1px dashed var(--crah-field);
	color: var(--crah-muted);
}
.crah-module--avenir .crah-module__title { font-size: 19px; color: var(--crah-ink); }
.crah-module__soon { margin: 12px 0 0; font-size: 13px; font-weight: 600; }

.crah-module--setup .crah-module__title { font-size: 26px; }
.crah-module__steps { margin: 10px 0 0 1.2em; padding: 0; max-width: 64ch; }
.crah-module__steps li { margin-bottom: 6px; }

.crah-accueil__foot { display: flex; flex-wrap: wrap; gap: 20px; margin: 24px 0 0; font-size: 14px; }
.crah-accueil__foot a { color: var(--crah-accent); }

@media (max-width: 700px) {
	.crah-module--actif { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
	.crah-module--actif .crah-module__title { font-size: 36px; }
	.crah-module__actions { min-width: 0; }
}

/* ---------- Petits écrans ---------- */

@media (max-width: 900px) {
	.crah-page .inside-article { padding: 22px 16px; }
	.crah-week__day { width: 38px; }
	.crah-rub { padding: 18px 16px 8px; }
}

@media (max-width: 560px) {
	.crah-week__days { display: none; }
	.crah-editor__head { align-items: stretch; }
	.crah-dialog__form { padding: 20px 18px 0; }
	.crah-dialog__actions { margin: 0 -18px; padding: 12px 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.crah-page * { transition: none !important; }
}