/* ===========================================================================
 * Carnet de terrain — styles
 * Palette beige, cohérente avec le « Carnet de l'apprenant ».
 * L'accent vert reste réglable via --c / --c-d / --c-l.
 * ========================================================================= */

.carnet {
	--c:   #2f7d52; /* accent principal */
	--c-d: #276346; /* accent foncé (texte, icônes) */
	--c-l: #e7f3ec; /* accent clair (fonds de tags catégorie) */
	--c-b: #c5dbc9; /* accent bordure */

	background: #f3ede3;
	border: 1px solid #dcd0bd;
	border-radius: 14px;
	padding: 22px;
	max-width: 760px;
	margin: 24px 0;
	font-family: inherit;
	box-shadow: 0 2px 8px rgba(60, 40, 15, 0.06);
}

.carnet * { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
 * En-tête
 * ------------------------------------------------------------------------- */
.carnet-head {
	display: flex; flex-direction: column; align-items: center;
	text-align: center; margin-bottom: 8px;
}
.carnet-ico {
	background: var(--c-d); color: #fff;
	width: 44px; height: 44px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; line-height: 1;
	margin-bottom: 10px;
}
.carnet-title { margin: 0; font-weight: 600; font-size: 18px; color: #1b2a20; }

.carnet-stats {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 8px; margin-top: 10px;
}
.carnet-stat {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 12px; color: #6a7a70;
	background: #faf7f2; border: 1px solid #e0d6c5;
	border-radius: 99px; padding: 3px 12px;
}
.carnet-stat .dashicons {
	font-size: 14px; width: 14px; height: 14px; line-height: 1;
	color: #8a9a8e;
}

/* ---------------------------------------------------------------------------
 * Barre de progression
 * ------------------------------------------------------------------------- */
.carnet-bar {
	height: 7px; background: #e8e0d4; border-radius: 99px;
	overflow: hidden; margin: 12px 0 18px;
}
.carnet-bar span {
	display: block; height: 100%; background: var(--c);
	border-radius: 99px; transition: width .4s;
}
.carnet-rule { height: 1px; background: #e0d6c5; margin: 14px 0 18px; }

/* ---------------------------------------------------------------------------
 * Bloc « Ce que vous venez d'apprendre » (groupe de cartes)
 * ------------------------------------------------------------------------- */
.carnet-new { margin-bottom: 18px; }
.carnet-new-label {
	margin: 0 0 10px; font-size: 12px; font-weight: 700;
	letter-spacing: .03em; color: var(--c-d); text-transform: uppercase;
	text-align: center;
}
.carnet-new-item {
	background: #faf7f2; border: 1px solid #d4c9b8;
	border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
	box-shadow: 0 2px 6px rgba(60, 40, 15, 0.05);
}
.carnet-new-item:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
 * Tags catégorie / sous-catégorie
 * ------------------------------------------------------------------------- */
.carnet-tags {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 5px; margin: 0 0 6px;
}
.carnet-tag {
	font-size: 11px; line-height: 1.7;
	padding: 2px 9px; border-radius: 99px; white-space: nowrap;
}
.carnet-tag-axe { color: var(--c-d); background: var(--c-l); }
.carnet-tag-sub { color: #7a6a55; background: #fff; border: 1px solid #e0d6c5; }

.carnet-new-item .carnet-fiche-title { display: block; text-align: center; }

.carnet-fiche-title { font-weight: 600; font-size: 15px; color: #1b2a20; }
.carnet-fiche-body { font-size: 14px; color: #55655b; line-height: 1.6; margin-top: 2px; }
.carnet-fiche-body p { margin: .3em 0; }

/* ---------------------------------------------------------------------------
 * Thèmes (accordéon)
 * ------------------------------------------------------------------------- */
.carnet-theme {
	background: #faf7f2; border: 1px solid #d4c9b8;
	border-radius: 10px; margin-bottom: 9px; overflow: hidden;
	box-shadow: 0 2px 6px rgba(60, 40, 15, 0.05);
	transition: background .15s, border-color .15s;
}
.carnet-theme.is-open { border-color: #c8b89a; box-shadow: 0 2px 8px rgba(60, 40, 15, 0.09); }

/* Survol discret sur la carte entière (coins arrondis nets, pas de débordement) */
.carnet-theme:has(.carnet-theme-head:hover) { background: #f3ede3; }

.carnet-theme-head {
	width: 100%;
	display: flex; align-items: center; gap: 9px;
	padding: 13px 15px; cursor: pointer; font-family: inherit;
	text-align: left;
}

/* Neutralise les styles de bouton injectés par le thème / MasterStudy
 * (fond vert au survol, bordure et halo de focus). */
.carnet-theme-head,
.carnet-theme-head:hover,
.carnet-theme-head:focus,
.carnet-theme-head:focus-visible,
.carnet-theme-head:active {
	background: none !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

.carnet-theme-head .dashicons { color: var(--c-d); font-size: 19px; }
.carnet-theme-name { flex: 1; text-align: left; font-weight: 600; font-size: 15px; color: #1b2a20; }
.carnet-theme-count {
	font-size: 12px; color: #8a7a64; background: #f0e9dd;
	border-radius: 99px; padding: 1px 9px;
}
.carnet-chev { color: #b0a48d; transition: transform .25s; }
.carnet-theme.is-open .carnet-chev { transform: rotate(180deg); }

.carnet-theme-body {
	max-height: 0; overflow: hidden;
	transition: max-height .35s ease; padding: 0 15px;
}
.carnet-theme.is-open .carnet-theme-body { max-height: 12000px; padding-bottom: 8px; }

/* Niveau 2 : sous-thème */
.carnet-sub-title {
	display: flex; align-items: center; gap: 8px;
	margin: 16px 0 10px; font-size: 14px; font-weight: 600;
	text-transform: none; letter-spacing: 0; color: var(--c-d);
}
.carnet-sub-title::before {
	content: "\21B3"; /* ↳ */
	color: #b0a48d; font-size: 15px; line-height: 1; flex-shrink: 0;
}
.carnet-sub-title::after {
	content: ""; flex: 1; height: 1px; background: #e0d6c5;
}
.carnet-sub-title:first-child { margin-top: 4px; }

.carnet-row {
	margin: 0 0 16px;
}
.carnet-row:last-child { margin-bottom: 4px; }
.carnet-lecon-tag { font-size: 11px; color: #b0a48d; margin-left: 6px; }

@media (max-width: 600px) {
	.carnet { padding: 16px; }
}