/* ==========================================================================
   MC3D Line — gabarit des articles techniques (bibliothèque du carnet)
   Mise en page type BabyLoveGrowth, dans la charte du site :
   héros, sommaire collant à gauche, encadré synthèse, tableaux, FAQ.
   ========================================================================== */

.at-section { padding-bottom: 70px; }

.at-crumb { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8a6a35; margin-bottom: 18px; }
.at-crumb a { color: var(--violet); text-decoration: none; font-weight: 600; }
.at-crumb a:hover { text-decoration: underline; }

.at-hero { border-radius: var(--radius, 8px); overflow: hidden; margin: 0 0 26px; box-shadow: 0 14px 34px rgba(34, 22, 43, 0.14); }
.at-hero img { display: block; width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; }

.at-section h1 { max-width: 900px; }
.at-meta { color: rgba(48, 36, 26, 0.62); font-size: 0.92rem; margin: 10px 0 22px; }

.at-resume { background: rgba(98, 43, 170, 0.06); border-left: 4px solid var(--violet); border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0; padding: 18px 22px; margin: 0 0 34px; max-width: 900px; }
.at-resume span { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #C8862E; margin-bottom: 6px; }
.at-resume p { margin: 0; font-size: 1.02rem; line-height: 1.65; }

/* ---------- la double colonne : sommaire collant + corps ---------- */
.at-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start; }

.at-toc { position: sticky; top: calc(var(--nav-h) + 22px); }
.at-toc details { background: #fff; border: 1px solid rgba(48, 36, 26, 0.10); border-radius: var(--radius, 8px); padding: 14px 16px; box-shadow: 0 6px 20px rgba(34, 22, 43, 0.06); }
.at-toc summary { cursor: pointer; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet); list-style: none; }
.at-toc summary::-webkit-details-marker { display: none; }
.at-toc nav { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; max-height: calc(100vh - var(--nav-h) - 160px); overflow-y: auto; }
.at-toc nav a { font-size: 0.88rem; line-height: 1.4; color: rgba(48, 36, 26, 0.78); text-decoration: none; padding: 5px 8px; border-left: 2px solid rgba(48, 36, 26, 0.10); }
.at-toc nav a:hover { color: var(--violet); border-left-color: var(--gold, #C8862E); background: rgba(98, 43, 170, 0.05); }

/* ---------- le corps de l'article ---------- */
.at-corps { min-width: 0; max-width: 820px; }
.at-corps > h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 44px 0 14px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.at-corps > h2:first-child { margin-top: 0; }
.at-corps h3 { font-size: 1.08rem; margin: 26px 0 8px; color: var(--violet); }
.at-corps p { line-height: 1.72; margin-bottom: 1em; }
.at-corps ul, .at-corps ol { margin: 0 0 1.2em 1.3em; line-height: 1.7; }
.at-corps li { margin-bottom: 0.35em; }
.at-corps a { color: var(--violet); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(98, 43, 170, 0.3); }
.at-corps a:hover { border-bottom-color: var(--violet); }
.at-corps img { max-width: 100%; height: auto; border-radius: var(--radius, 8px); margin: 22px auto; display: block; box-shadow: 0 10px 26px rgba(34, 22, 43, 0.12); }
.at-corps strong { color: #22162B; }
.at-corps blockquote { border-left: 4px solid var(--gold, #C8862E); margin: 22px 0; padding: 10px 20px; background: rgba(200, 134, 46, 0.06); border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0; }

/* tableaux : défilables, en-tête charte */
.at-tablewrap { overflow-x: auto; margin: 24px 0; border-radius: var(--radius, 8px); box-shadow: 0 8px 22px rgba(34, 22, 43, 0.08); }
.at-corps table { border-collapse: collapse; width: 100%; min-width: 520px; background: #fff; font-size: 0.94rem; }
.at-corps th { background: #22162B; color: #FCFAF6; text-align: left; padding: 11px 14px; font-weight: 600; }
.at-corps td { padding: 10px 14px; border-top: 1px solid rgba(48, 36, 26, 0.10); vertical-align: top; line-height: 1.55; }
.at-corps tr:nth-child(even) td { background: rgba(98, 43, 170, 0.035); }

.at-cta { margin-top: 46px; text-align: center; }
.at-cta p { max-width: 560px; margin: 0 auto 18px; }
.at-cta .btn-row { justify-content: center; }

/* ---------- la bibliothèque sur la page ressources ---------- */
.bib-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; }
.bib-nav a { font-size: 0.86rem; font-weight: 600; color: var(--violet); background: rgba(98, 43, 170, 0.07); border: 1px solid rgba(98, 43, 170, 0.18); padding: 7px 14px; border-radius: 999px; text-decoration: none; }
.bib-nav a:hover { background: var(--violet); color: #fff; }
.bib-cat { margin-top: 42px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.bib-cat h3 { font-size: 1.15rem; color: #22162B; border-bottom: 2px solid var(--gold, #C8862E); display: inline-block; padding-bottom: 4px; margin-bottom: 16px; }
.bib-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px 26px; }
.bib-liste a { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 9px 12px; border-radius: 6px; text-decoration: none; color: #30241A; border: 1px solid transparent; }
.bib-liste a:hover { background: #fff; border-color: rgba(98, 43, 170, 0.18); color: var(--violet); }
.bib-liste .bib-date { flex: none; font-size: 0.78rem; color: rgba(48, 36, 26, 0.5); }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .at-layout { grid-template-columns: 1fr; gap: 20px; }
  .at-toc { position: static; }
  .at-toc nav { max-height: none; }
  .at-hero img { height: clamp(180px, 44vw, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}