/* =========================================================
   CJ Noyau – interface de l'étude
   Clarté d'abord : grands éléments, contrastes nets, peu de bruit.
   ========================================================= */

:root {
	--cj-bleu: #14284b;
	--cj-bleu-2: #23417a;
	--cj-or: #b8892b;
	--cj-fond: #f3f5f9;
	--cj-carte: #ffffff;
	--cj-bord: #dde3ec;
	--cj-texte: #1d2433;
	--cj-gris: #5a6270;
	--cj-vert: #1e8449;
	--cj-vert-fond: #e7f5ed;
	--cj-orange: #b9770e;
	--cj-orange-fond: #fdf3e1;
	--cj-rouge: #c0392b;
	--cj-rouge-fond: #fbeaea;
	--cj-rayon: 10px;
}

body.cj-app { background: var(--cj-fond); }
body.cj-app #wpcontent { padding-left: 0; }
body.cj-app #wpbody-content { padding-bottom: 40px; }

.cj-wrap { margin: 0; padding: 0 24px 24px; max-width: 1280px; color: var(--cj-texte); font-size: 14px; }
.cj-wrap * { box-sizing: border-box; }
.cj-wrap [hidden] { display: none !important; }

/* Barre supérieure */
.cj-barre {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	margin: 0 -24px 18px; padding: 12px 24px;
	background: var(--cj-bleu); color: #fff; border-bottom: 3px solid var(--cj-or);
}
.cj-barre-etude { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.cj-barre-etude .dashicons { color: var(--cj-or); }
.cj-barre-date { font-size: 13px; opacity: .85; }

.cj-fil { font-size: 13px; color: var(--cj-gris); margin-bottom: 4px; }
.cj-fil a { color: var(--cj-bleu-2); text-decoration: none; }
.cj-fil span { margin: 0 4px; }

.cj-titre { display: flex; align-items: center; gap: 10px; font-size: 24px !important; font-weight: 700 !important; color: var(--cj-bleu); margin: 6px 0 2px !important; padding: 0 !important; }
.cj-titre .dashicons { font-size: 28px; width: 28px; height: 28px; color: var(--cj-or); }
.cj-sous-titre { color: var(--cj-gris); margin: 0 0 16px; font-size: 14px; }
.cj-section { font-size: 16px; color: var(--cj-bleu); margin: 22px 0 10px; }

/* Cartes */
.cj-carte { background: var(--cj-carte); border: 1px solid var(--cj-bord); border-radius: var(--cj-rayon); padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(20,40,75,.04); }
.cj-carte h2 { font-size: 16px; margin: 0 0 10px; color: var(--cj-bleu); display: flex; align-items: center; gap: 8px; }
.cj-carte h2 .dashicons { color: var(--cj-or); }
.cj-carte h3 { font-size: 14px; margin: 18px 0 8px; color: var(--cj-bleu); }
.cj-carte-accent { border-left: 5px solid var(--cj-or); }

.cj-grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cj-grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cj-grille-2 > .cj-carte, .cj-grille-3 > .cj-carte { margin-bottom: 0; }
.cj-grille-2 { margin-bottom: 18px; }

/* Boutons */
.cj-bouton {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
	border-radius: 8px; border: 1px solid var(--cj-bord); background: #fff; color: var(--cj-bleu);
	font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1;
}
.cj-bouton:hover, .cj-bouton:focus { border-color: var(--cj-bleu-2); color: var(--cj-bleu-2); }
.cj-bouton-principal { background: var(--cj-bleu); border-color: var(--cj-bleu); color: #fff; }
.cj-bouton-principal:hover, .cj-bouton-principal:focus { background: var(--cj-bleu-2); color: #fff; }
.cj-bouton-lien { border: 0; background: none; min-height: auto; padding: 4px 6px; color: var(--cj-bleu-2); font-weight: 600; }
.cj-bouton-lien:hover { text-decoration: underline; }
.cj-danger, .cj-danger:hover { color: var(--cj-rouge) !important; }
.cj-bouton .dashicons { font-size: 18px; width: 18px; height: 18px; }

/* Actions rapides */
.cj-actions-rapides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cj-action {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	min-height: 110px; border-radius: var(--cj-rayon); background: var(--cj-bleu); color: #fff;
	font-size: 15px; font-weight: 600; text-decoration: none; text-align: center; padding: 12px;
}
.cj-action:hover, .cj-action:focus { background: var(--cj-bleu-2); color: #fff; }
.cj-action .dashicons { font-size: 32px; width: 32px; height: 32px; color: var(--cj-or); }
.cj-action-inactive { background: #e9edf3; color: var(--cj-gris); cursor: default; }
.cj-action-inactive .dashicons { color: #a3acba; }
.cj-action small { font-weight: 400; font-size: 12px; }

/* Formulaires */
.cj-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.cj-champ { margin: 0 0 12px; display: flex; flex-direction: column; gap: 5px; }
.cj-champ.cj-large { grid-column: 1 / -1; }
.cj-champ label { font-weight: 600; font-size: 13px; }
.cj-form input[type=text], .cj-form input[type=password], .cj-form input[type=search], .cj-form input[type=email], .cj-form input[type=tel], .cj-form input[type=url],
.cj-form input[type=date], .cj-form input[type=number], .cj-form select, .cj-form textarea,
.cj-filtres input, .cj-filtres select {
	width: 100%; max-width: 100%; min-height: 40px; border: 1px solid #c3cbd8; border-radius: 7px; padding: 6px 10px; font-size: 14px; background: #fff;
}
.cj-form input:focus, .cj-form select:focus, .cj-form textarea:focus { border-color: var(--cj-bleu-2); box-shadow: 0 0 0 2px rgba(35,65,122,.15); outline: none; }
.cj-requis { color: var(--cj-rouge); }
.cj-aide { font-size: 12.5px; color: var(--cj-gris); }
.cj-petit { font-size: 13px; color: var(--cj-gris); }
.cj-majuscules { text-transform: uppercase; }
.cj-mono { font-family: Consolas, Menlo, monospace; }
.cj-case { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.cj-case input { margin-top: 2px; }

.cj-barre-actions {
	position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
	background: #fff; border: 1px solid var(--cj-bord); border-radius: var(--cj-rayon); padding: 12px 16px; margin-bottom: 18px;
	box-shadow: 0 -4px 12px rgba(20,40,75,.06);
}

/* Onglets */
.cj-onglets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; border-bottom: 2px solid var(--cj-bord); }
.cj-onglet { padding: 10px 14px; text-decoration: none; color: var(--cj-gris); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.cj-onglet:hover, .cj-onglet:focus { color: var(--cj-bleu); box-shadow: none; }
.cj-onglet.actif { color: var(--cj-bleu); border-bottom-color: var(--cj-or); }
.cj-js .cj-panneau { display: none; }
.cj-js .cj-panneau.actif { display: block; }

/* Tableaux */
.cj-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cj-table th { text-align: left; background: #f0f3f8; color: var(--cj-bleu); font-weight: 700; padding: 10px; border-bottom: 2px solid var(--cj-bord); }
.cj-table td { padding: 9px 10px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
.cj-table tbody tr:hover { background: #fafbfd; }
.cj-table-compacte td { padding: 6px 4px; }
.cj-table .cj-inactif td { color: #9aa3b0; }
.cj-droite { text-align: right; }
.cj-centre { text-align: center; }
.cj-table form { margin: 0; }
.cj-edition-ligne { display: flex; gap: 6px; align-items: center; }
.cj-edition-ligne input[type=text] { border: 1px solid transparent; background: transparent; min-height: 34px; padding: 4px 8px; border-radius: 6px; width: 100%; font-size: 14px; }
.cj-edition-ligne input[type=text]:hover, .cj-edition-ligne input[type=text]:focus { border-color: #c3cbd8; background: #fff; }

/* Statuts – code couleur commun : rouge urgent, orange à surveiller, vert en règle */
.cj-statut, .cj-pastille { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.cj-ok { background: var(--cj-vert-fond); color: var(--cj-vert); }
.cj-attente { background: #eef1f5; color: var(--cj-gris); }
.cj-surveiller { background: var(--cj-orange-fond); color: var(--cj-orange); }
.cj-urgent { background: var(--cj-rouge-fond); color: var(--cj-rouge); }
.cj-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }

/* Alertes */
.cj-alerte { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 8px; margin: 0 0 16px; font-size: 14px; border-left: 4px solid; }
.cj-alerte-succes { background: var(--cj-vert-fond); border-color: var(--cj-vert); color: #145a32; }
.cj-alerte-erreur { background: var(--cj-rouge-fond); border-color: var(--cj-rouge); color: #7b241c; }
.cj-alerte-info { background: #eaf0fa; border-color: var(--cj-bleu-2); color: var(--cj-bleu); }

/* Progression */
.cj-progression { height: 12px; background: #e6eaf1; border-radius: 6px; overflow: hidden; margin: 10px 0 6px; }
.cj-progression span { display: block; height: 100%; background: linear-gradient(90deg, var(--cj-or), #d4a64a); }

.cj-liste { margin: 0; padding: 0; list-style: none; }
.cj-liste li { padding: 6px 0; border-bottom: 1px solid #eef1f5; }
.cj-vide { color: var(--cj-gris); font-style: italic; padding: 14px 0; }

/* Référentiels : deux colonnes */
.cj-colonnes { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.cj-colonne-menu { background: #fff; border: 1px solid var(--cj-bord); border-radius: var(--cj-rayon); padding: 6px; position: sticky; top: 46px; }
.cj-colonne-menu a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 7px; text-decoration: none; color: var(--cj-texte); font-weight: 600; }
.cj-colonne-menu a:hover { background: #f0f3f8; }
.cj-colonne-menu a.actif { background: var(--cj-bleu); color: #fff; }
.cj-compteur { font-size: 12px; background: rgba(0,0,0,.07); padding: 1px 8px; border-radius: 10px; }
.cj-colonne-menu a.actif .cj-compteur { background: rgba(255,255,255,.2); }
.cj-ajout-ligne { display: flex; gap: 8px; margin: 12px 0 16px; }
.cj-ajout-ligne input[type=text] { flex: 1; }
.cj-ajout-ligne input[type=date], .cj-ajout-ligne input.cj-mono { max-width: 170px; }

/* Images */
.cj-image-apercu { height: 140px; display: flex; align-items: center; justify-content: center; background: #f5f7fa; border: 1px dashed #c3cbd8; border-radius: 8px; margin-bottom: 8px; }
.cj-image-apercu img { max-height: 125px; max-width: 90%; }
.cj-image-apercu span { color: var(--cj-gris); font-size: 13px; }

.cj-apercu-document { background: #fff; border: 1px solid var(--cj-bord); padding: 24px; max-width: 760px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }

/* Journal */
.cj-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.cj-filtres select, .cj-filtres input[type=search] { width: auto; min-width: 180px; }
.cj-filtres input[type=date] { width: auto; }
.cj-a-droite { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.cj-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cj-pagination a, .cj-pagination strong { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--cj-bord); text-decoration: none; }
.cj-pagination strong { background: var(--cj-bleu); color: #fff; }

/* Téléphone et tablette */
@media (max-width: 960px) {
	.cj-actions-rapides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cj-grille-3 { grid-template-columns: 1fr; }
	.cj-colonnes { grid-template-columns: 1fr; }
	.cj-colonne-menu { position: static; display: flex; overflow-x: auto; max-width: 100%; }
	.cj-colonne-menu a { white-space: nowrap; }
	.cj-colonnes > * { min-width: 0; }
}
@media (max-width: 782px) {
	.cj-wrap { padding: 0 12px 16px; }
	.cj-barre { margin: 0 -12px 14px; padding: 10px 12px; flex-direction: column; align-items: flex-start; gap: 2px; }
	.cj-grille-2, .cj-champs { grid-template-columns: 1fr; }
	.cj-table { font-size: 13px; }
	/* Filet de sécurité : un tableau trop large défile dans sa carte au lieu d'élargir la page. */
	.cj-carte > .cj-table, .cj-wrap > .cj-table, .cj-wrap form > .cj-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.cj-ajout-ligne { flex-direction: column; }
	.cj-ajout-ligne input[type=date], .cj-ajout-ligne input.cj-mono { max-width: none; }
	.cj-action { min-height: 92px; }
}