/**
 * DataFirefly — Documentation hub styles.
 *
 * Chargé uniquement sur les pages de doc (cf. inc/documentation.php).
 * S'appuie sur les tokens de theme.css : --bg / --card / --ink / --line /
 * --amber (teal) / --shadow / 'Instrument Serif' / 'JetBrains Mono'.
 * Le dark mode est piloté par les variables — peu de surcharges spécifiques.
 *
 * @since 1.11.0
 */

/* ============================================================ *
 *  Layout reader (shell 3 colonnes)
 * ============================================================ */
.df-doc-shell{
	display:grid;
	grid-template-columns: 260px minmax(0,1fr) 240px;
	gap:48px;
	align-items:start;
	padding-top:24px;
	padding-bottom:64px;
}
.df-doc-section .df-doc-shell{ grid-template-columns: 260px minmax(0,1fr) 0; }

/* Colonne nav (gauche) — sticky */
.df-doc-aside{
	position:sticky;
	top:96px;
	max-height:calc(100vh - 120px);
	overflow-y:auto;
	overscroll-behavior:contain;
	padding-right:8px;
	scrollbar-width:thin;
}
.df-doc-aside-close{ display:none; }

/* Colonne TOC (droite) — sticky */
.df-doc-toc{
	position:sticky;
	top:96px;
	max-height:calc(100vh - 120px);
	overflow-y:auto;
}
.df-doc-toc--empty{ display:none; }

/* ============================================================ *
 *  Sidebar de navigation
 * ============================================================ */
.df-doc-nav-head{ margin-bottom:14px; }
.df-doc-nav-home{
	display:inline-flex; align-items:center; gap:8px;
	font-size:13px; font-weight:600; color:var(--ink-3);
	text-decoration:none; letter-spacing:.01em;
}
.df-doc-nav-home svg{ transform:rotate(180deg); width:14px; height:14px; }
.df-doc-nav-home:hover{ color:var(--amber-deep); }

.df-doc-nav-search{
	position:relative; display:flex; align-items:center;
	margin-bottom:18px;
}
.df-doc-nav-search svg{ position:absolute; left:10px; color:var(--ink-3); pointer-events:none; }
.df-doc-nav-search input{
	width:100%; padding:8px 12px 8px 32px;
	border:1px solid var(--line); border-radius:10px;
	background:var(--card); color:var(--ink); font-size:14px;
}
.df-doc-nav-search input:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px var(--glow); }

.df-doc-nav-root,
.df-doc-nav-list,
.df-doc-nav-sub{ list-style:none; margin:0; padding:0; }

.df-doc-nav-section{ margin-bottom:18px; }
.df-doc-nav-section-link{
	display:block; font-size:12px; font-weight:700;
	text-transform:uppercase; letter-spacing:.06em;
	color:var(--ink-2); text-decoration:none;
	padding:4px 0 8px; border-bottom:1px solid var(--line);
	margin-bottom:8px;
}
.df-doc-nav-section.is-current > .df-doc-nav-section-link,
.df-doc-nav-section-link:hover{ color:var(--amber-deep); }

.df-doc-nav-list{ display:flex; flex-direction:column; gap:1px; }
.df-doc-nav-item a{
	display:block; padding:6px 12px;
	font-size:14px; line-height:1.35; color:var(--ink-2);
	text-decoration:none; border-radius:8px;
	border-left:2px solid transparent; margin-left:-2px;
	transition:background .15s, color .15s, border-color .15s;
}
.df-doc-nav-item a:hover{ background:var(--bg-2); color:var(--ink); }
.df-doc-nav-item.is-active a{
	color:var(--amber-deep); font-weight:600;
	background:var(--glow); border-left-color:var(--amber);
}
.df-doc-nav-sub{ margin:8px 0 0 12px; padding-left:12px; border-left:1px solid var(--line); }
.df-doc-nav-section[data-df-hidden]{ display:none; }
.df-doc-nav-item[data-df-hidden]{ display:none; }

/* ============================================================ *
 *  Article (colonne centrale)
 * ============================================================ */
.df-doc-main{ min-width:0; }
.df-doc-main .df-breadcrumbs{ margin-bottom:18px; }

.df-doc-header{ margin-bottom:36px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.df-doc-eyebrows{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px; }
.df-doc-plat{
	display:inline-flex; align-items:center; gap:7px;
	font-size:12px; font-weight:600; color:var(--ink-2);
	padding:4px 10px 4px 4px; border:1px solid var(--line);
	border-radius:99px; background:var(--card);
}
.df-doc-plat-glyph{
	display:inline-grid; place-items:center; width:20px; height:20px;
	border-radius:6px; font-size:10px; font-weight:800; color:#fff;
	background:var(--p, var(--amber));
}
.df-doc-section-tag{
	font-size:12px; font-weight:600; color:var(--ink-3);
	text-decoration:none; padding:4px 10px;
	border:1px solid var(--line); border-radius:99px;
}
.df-doc-section-tag:hover{ color:var(--amber-deep); border-color:var(--amber-soft); }
.df-doc-diff{
	font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
	padding:4px 10px; border-radius:99px;
}
.df-doc-diff.is-beginner{ background:oklch(0.92 0.08 145); color:oklch(0.35 0.1 145); }
.df-doc-diff.is-intermediate{ background:oklch(0.93 0.09 75); color:oklch(0.4 0.1 60); }
.df-doc-diff.is-advanced{ background:oklch(0.92 0.07 25); color:oklch(0.42 0.12 25); }

.df-doc-summary{ margin-top:14px; }
.df-doc-meta{ display:flex; flex-wrap:wrap; gap:20px; margin-top:18px; font-size:13px; color:var(--ink-3); }
.df-doc-meta-item time, .df-doc-meta-item code{ color:var(--ink-2); font-weight:600; }
.df-doc-meta-item code{ background:var(--chip); padding:1px 7px; border-radius:6px; font-family:'JetBrains Mono',monospace; font-size:12px; }

/* Contenu */
.df-doc-content{ font-size:16.5px; }
.df-doc-content h2{ scroll-margin-top:96px; }
.df-doc-content h3{ scroll-margin-top:96px; }

/* Callouts — utilisables via une classe sur un groupe Gutenberg ou du HTML.
   Ex: <div class="df-callout is-tip"><strong>Astuce</strong> …</div> */
.df-callout{
	margin:1.6em 0; padding:16px 18px 16px 48px; position:relative;
	border:1px solid var(--line); border-radius:12px;
	background:var(--bg-2); font-size:15px; line-height:1.6;
}
.df-callout > *:first-child{ margin-top:0; }
.df-callout > *:last-child{ margin-bottom:0; }
.df-callout::before{
	content:'i'; position:absolute; left:16px; top:16px;
	display:grid; place-items:center; width:22px; height:22px;
	border-radius:50%; font-size:13px; font-weight:800; color:#fff;
	font-family:'Instrument Serif',serif;
}
.df-callout.is-note{ border-color:var(--amber-soft); }
.df-callout.is-note::before{ background:var(--amber); }
.df-callout.is-tip{ border-color:oklch(0.8 0.1 145); background:oklch(0.97 0.03 145); }
.df-callout.is-tip::before{ content:'✓'; background:oklch(0.55 0.13 145); }
.df-callout.is-warn{ border-color:oklch(0.82 0.1 60); background:oklch(0.97 0.04 75); }
.df-callout.is-warn::before{ content:'!'; background:oklch(0.62 0.14 55); }
.df-callout.is-danger{ border-color:oklch(0.82 0.1 25); background:oklch(0.97 0.03 25); }
.df-callout.is-danger::before{ content:'!'; background:oklch(0.58 0.18 25); }

/* ============================================================ *
 *  Carte produit lié
 * ============================================================ */
.df-doc-product{
	display:flex; align-items:center; gap:16px; flex-wrap:wrap;
	margin:48px 0 0; padding:18px 20px;
	border:1px solid var(--line); border-radius:16px;
	background:var(--card); box-shadow:var(--shadow);
}
.df-doc-product-img img{ width:56px; height:56px; border-radius:12px; object-fit:cover; }
.df-doc-product-body{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:160px; }
.df-doc-product-kicker{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.df-doc-product-name{ font-size:17px; font-weight:600; color:var(--ink); text-decoration:none; }
.df-doc-product-name:hover{ color:var(--amber-deep); }
.df-doc-product-price{ font-size:14px; color:var(--ink-2); }
.df-doc-product-cta{ white-space:nowrap; }

/* ============================================================ *
 *  Helpful widget
 * ============================================================ */
.df-doc-helpful{
	display:flex; align-items:center; gap:14px; flex-wrap:wrap;
	margin:40px 0 0; padding:18px 20px;
	border:1px dashed var(--line); border-radius:14px;
}
.df-doc-helpful-q{ font-weight:600; color:var(--ink); }
.df-doc-helpful-btns{ display:flex; gap:8px; }
.df-doc-helpful-btn{
	padding:6px 18px; border:1px solid var(--line); border-radius:99px;
	background:var(--card); color:var(--ink-2); font-size:14px; font-weight:600;
	cursor:pointer; transition:all .15s;
}
.df-doc-helpful-btn:hover{ border-color:var(--amber); color:var(--amber-deep); }
.df-doc-helpful-btn.is-picked{ background:var(--amber); border-color:var(--amber); color:#fff; }
.df-doc-helpful-thanks{ font-size:14px; color:var(--ink-3); }

/* ============================================================ *
 *  Pager prev / next
 * ============================================================ */
.df-doc-pager{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px; }
.df-doc-pager-link{
	display:flex; flex-direction:column; gap:6px;
	padding:16px 18px; border:1px solid var(--line); border-radius:14px;
	background:var(--card); text-decoration:none; transition:all .15s;
}
.df-doc-pager-link:hover{ border-color:var(--amber-soft); box-shadow:var(--shadow); transform:translateY(-2px); }
.df-doc-pager-link.is-next{ text-align:right; align-items:flex-end; }
.df-doc-pager-dir{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.df-doc-pager-link.is-prev .df-doc-pager-dir svg{ transform:rotate(180deg); }
.df-doc-pager-title{ font-size:15px; font-weight:600; color:var(--ink); }
.df-doc-pager-link:hover .df-doc-pager-title{ color:var(--amber-deep); }

.df-doc-support{ margin-top:36px; font-size:15px; }
.df-doc-support a{ display:inline-flex; align-items:center; gap:6px; color:var(--amber-deep); font-weight:600; text-decoration:none; }
.df-doc-support a:hover{ gap:9px; }

/* ============================================================ *
 *  Landing (archive)
 * ============================================================ */
.df-doc-arc-head{ padding-top:28px; padding-bottom:8px; max-width:880px; }
.df-doc-arc-head .df-breadcrumbs{ margin-bottom:16px; }
.df-doc-arc-head .df-h-xl{ margin:6px 0 14px; }

.df-doc-arc-search{
	display:flex; align-items:center; gap:8px; position:relative;
	margin:28px 0 18px; max-width:620px;
	padding:6px 6px 6px 40px; border:1px solid var(--line);
	border-radius:99px; background:var(--card); box-shadow:var(--shadow);
}
.df-doc-arc-search > svg{ position:absolute; left:16px; color:var(--ink-3); }
.df-doc-arc-search input{ flex:1; border:0; background:transparent; font-size:16px; color:var(--ink); padding:8px 4px; }
.df-doc-arc-search input:focus{ outline:none; }
.df-doc-arc-search .df-btn{ flex-shrink:0; }

.df-doc-arc-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.df-doc-pill{
	display:inline-flex; align-items:center; gap:8px;
	padding:7px 14px; border:1px solid var(--line); border-radius:99px;
	background:var(--card); color:var(--ink-2); font-size:14px; font-weight:600;
	text-decoration:none; transition:all .15s;
}
.df-doc-pill:hover{ border-color:var(--amber-soft); color:var(--ink); }
.df-doc-pill.is-active{ border-color:var(--p, var(--amber)); color:var(--ink); box-shadow:0 0 0 1px var(--p, var(--amber)) inset; }
.df-doc-pill-glyph{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; font-size:10px; font-weight:800; color:#fff; background:var(--p, var(--amber)); }
.df-doc-pill-n{ font-size:12px; color:var(--ink-3); font-weight:700; }

.df-doc-arc-h2{ font-size:clamp(26px,3vw,34px); font-weight:400; margin:0 0 24px; }

/* Grille sections */
.df-doc-sections-grid{
	display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px;
}
.df-doc-section-card{
	display:flex; flex-direction:column;
	padding:22px; border:1px solid var(--line); border-radius:18px;
	background:var(--card); transition:all .18s;
}
.df-doc-section-card:hover{ border-color:var(--amber-soft); box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.df-doc-section-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; text-decoration:none; margin-bottom:6px; }
.df-doc-section-card-title{ font-family:'Instrument Serif',serif; font-weight:400; font-size:24px; line-height:1.1; color:var(--ink); margin:0; }
.df-doc-section-card:hover .df-doc-section-card-title{ color:var(--amber-deep); }
.df-doc-section-card-count{ flex-shrink:0; font-size:12px; font-weight:700; color:var(--ink-3); white-space:nowrap; }
.df-doc-section-card-desc{ font-size:14px; color:var(--ink-2); line-height:1.5; margin:0 0 14px; }
.df-doc-section-card-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.df-doc-section-card-list a{ display:flex; align-items:center; gap:8px; padding:6px 8px; margin:0 -8px; border-radius:8px; font-size:14.5px; color:var(--ink-2); text-decoration:none; }
.df-doc-section-card-list a:hover{ background:var(--bg-2); color:var(--ink); }
.df-doc-li-icon{ font-size:15px; line-height:1; }
.df-doc-section-card-more{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:13px; font-weight:600; color:var(--amber-deep); text-decoration:none; }
.df-doc-section-card-more:hover{ gap:9px; }

/* Récemment mis à jour */
.df-doc-recent-sec{ padding-top:24px; }
.df-doc-recent-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.df-doc-recent-item a{
	display:flex; align-items:center; gap:16px; padding:16px 4px;
	border-bottom:1px solid var(--line); text-decoration:none;
}
.df-doc-recent-item a:hover{ background:var(--bg-2); }
.df-doc-recent-plat{ flex-shrink:0; display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; font-size:13px; font-weight:800; color:#fff; background:var(--p, var(--amber)); }
.df-doc-recent-body{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.df-doc-recent-title{ font-size:16px; font-weight:600; color:var(--ink); }
.df-doc-recent-item a:hover .df-doc-recent-title{ color:var(--amber-deep); }
.df-doc-recent-sum{ font-size:13.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.df-doc-recent-date{ flex-shrink:0; font-size:12.5px; color:var(--ink-3); }

.df-doc-empty{ padding:48px 0; color:var(--ink-3); font-size:16px; }

/* ============================================================ *
 *  Page de section
 * ============================================================ */
.df-doc-section-header{ margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.df-doc-section-header .df-h-lg{ margin:8px 0 0; }
.df-doc-section-desc{ margin-top:14px; font-size:16px; }
.df-doc-section-h2{ font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin:0 0 14px; }
.df-doc-section-list{ list-style:none; margin:0; padding:0; }
.df-doc-section-list-item a{
	display:flex; align-items:center; gap:14px; padding:16px 16px;
	margin-bottom:10px; border:1px solid var(--line); border-radius:14px;
	background:var(--card); text-decoration:none; transition:all .15s;
}
.df-doc-section-list-item a:hover{ border-color:var(--amber-soft); box-shadow:var(--shadow); transform:translateX(3px); }
.df-doc-section-list-item .df-doc-li-icon{ font-size:22px; }
.df-doc-section-list-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.df-doc-section-list-title{ display:flex; align-items:center; gap:8px; font-size:16.5px; font-weight:600; color:var(--ink); }
.df-doc-section-list-ver{ font-size:11px; background:var(--chip); padding:1px 6px; border-radius:5px; color:var(--ink-3); font-family:'JetBrains Mono',monospace; }
.df-doc-section-list-sum{ font-size:14px; color:var(--ink-3); }
.df-doc-section-list-arrow{ color:var(--ink-3); }
.df-doc-section-list-item a:hover .df-doc-section-list-arrow{ color:var(--amber-deep); }

.df-doc-subsections{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:28px; }
.df-doc-subsection{ display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--line); border-radius:12px; text-decoration:none; background:var(--card); }
.df-doc-subsection:hover{ border-color:var(--amber-soft); }
.df-doc-subsection-name{ font-weight:600; color:var(--ink); }
.df-doc-subsection-count{ font-size:12px; color:var(--ink-3); }

/* ============================================================ *
 *  FAB mobile + drawer
 * ============================================================ */
.df-doc-aside-fab{
	display:none;
	position:fixed; left:16px; bottom:20px; z-index:40;
	align-items:center; gap:8px;
	padding:11px 18px; border:1px solid var(--line); border-radius:99px;
	background:var(--card); color:var(--ink); font-size:14px; font-weight:600;
	box-shadow:var(--shadow-lg); cursor:pointer;
}
.df-doc-aside-fab svg{ transform:rotate(-90deg); }

/* ============================================================ *
 *  Responsive
 * ============================================================ */
@media (max-width:1180px){
	.df-doc-shell{ grid-template-columns:240px minmax(0,1fr); gap:36px; }
	.df-doc-toc{ display:none; }
}
@media (max-width:860px){
	.df-doc-shell,
	.df-doc-section .df-doc-shell{ grid-template-columns:minmax(0,1fr); gap:0; }
	.df-doc-pager{ grid-template-columns:1fr; }

	/* La nav devient un drawer plein écran à gauche. */
	.df-doc-aside{
		position:fixed; inset:0 auto 0 0; z-index:60;
		width:300px; max-width:88vw; max-height:none;
		padding:72px 20px 24px; margin:0;
		background:var(--card); border-right:1px solid var(--line);
		box-shadow:var(--shadow-lg);
		transform:translateX(-105%); transition:transform .25s ease;
	}
	.df-doc-aside.is-open{ transform:translateX(0); }
	.df-doc-aside-close{ display:grid; place-items:center; position:absolute; top:18px; right:18px; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--ink-2); cursor:pointer; }
	.df-doc-aside-fab{ display:inline-flex; }
	body.df-doc-aside-open{ overflow:hidden; }
	.df-doc-aside-backdrop{ position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.45); opacity:0; transition:opacity .25s; }
	.df-doc-aside-backdrop.is-open{ opacity:1; }
}

/* ============================================================ *
 *  Dark mode — surcharges ponctuelles (le reste via tokens)
 * ============================================================ */
[data-theme="dark"] .df-callout.is-tip{ background:oklch(0.28 0.06 145); border-color:oklch(0.4 0.08 145); }
[data-theme="dark"] .df-callout.is-warn{ background:oklch(0.3 0.06 70); border-color:oklch(0.42 0.08 65); }
[data-theme="dark"] .df-callout.is-danger{ background:oklch(0.3 0.06 25); border-color:oklch(0.42 0.1 25); }
[data-theme="dark"] .df-doc-diff.is-beginner{ background:oklch(0.32 0.08 145); color:oklch(0.85 0.1 145); }
[data-theme="dark"] .df-doc-diff.is-intermediate{ background:oklch(0.34 0.08 65); color:oklch(0.86 0.1 80); }
[data-theme="dark"] .df-doc-diff.is-advanced{ background:oklch(0.32 0.08 25); color:oklch(0.85 0.1 25); }

/* Admin : badge plateforme dans la colonne de liste */
.df-doc-plat-badge{ display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:600; color:#fff; background:var(--p,#42b9b5); }

/* ── Auto-lien du nom de module dans le corps de la doc ───────────── */
.df-doc-modlink{
	color:var(--amber-deep,#2f8f8b);
	text-decoration:underline;
	text-decoration-color:color-mix(in srgb, var(--amber,#42b9b5) 45%, transparent);
	text-underline-offset:2px;
	text-decoration-thickness:1.5px;
	font-weight:600;
	transition:color .15s ease, text-decoration-color .15s ease;
}
.df-doc-modlink:hover,
.df-doc-modlink:focus-visible{
	color:var(--amber,#42b9b5);
	text-decoration-color:var(--amber,#42b9b5);
}