/* L'Observatoire Charik Guardian : complète data-crm-manager.css (mêmes variables).
   Gabarits : single-guardian_study.php, archive-guardian_study.php. */


/* ---------- En-tête de rubrique ---------- */
.obs-hero { padding: 0 0 4.5rem; }
.obs-hero h1, .study-head h1 { margin: 3rem 0 0 var(--mgn); font: 400 clamp(2.9rem, 6vw, 5.2rem)/.98 var(--serif); letter-spacing: -.028em; }
.obs-hero h1 em { display: block; font-style: italic; color: var(--ink-2); margin-top: .1em; }
.obs-lede { margin: 1.6rem 0 0 var(--mgn) !important; max-width: 40rem; font-size: 1.2rem; line-height: 1.6; color: var(--ink-2); }

.obs-meta { display: flex; justify-content: space-between; gap: 1rem; font: 500 .64rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.obs-fig { margin-top: 1.1rem !important; font: 400 3rem/1 var(--serif); letter-spacing: -.02em; color: var(--blue-ink); }
.obs-ex { margin-top: .8rem !important; font-size: .98rem; line-height: 1.6; color: var(--ink-2); }

/* ---------- Liste des études ---------- */
.obs-list { padding-top: 0; }
.obs-feature {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--shadow);
}
.obs-feature-fig { padding: 2.2rem 2.4rem; border-right: 1px solid var(--rule); background: linear-gradient(var(--sheet), var(--sheet)) padding-box; }
.obs-fig-xl { font-size: clamp(4.5rem, 9vw, 7.5rem); margin-top: 1.6rem !important; }
.obs-fig-cap { margin-top: .6rem !important; max-width: 16rem; font: 400 1.05rem/1.4 var(--serif); font-style: italic; color: var(--ink-2); }
.obs-feature-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2.2rem 2.4rem; }
.obs-tag { font: 500 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); }
.obs-feature-txt h2 { font: 400 clamp(1.8rem, 3vw, 2.4rem)/1.08 var(--serif); letter-spacing: -.015em; }
.obs-feature-txt h2 a, .obs-card h3 a { text-decoration: none; }
.obs-feature-txt h2 a:hover, .obs-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.obs-feature-txt .obs-ex { margin: 0 !important; }
.obs-feature-txt .btn { margin-top: .6rem; }

.obs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.4rem; margin-top: 3.5rem; }
.obs-card { position: relative; display: flex; flex-direction: column; padding-top: 1.3rem; border-top: 3px double var(--ink); }
.obs-card h3 { margin-top: .9rem !important; font: 400 1.35rem/1.2 var(--serif); }
.obs-card h3 a::after { content: ""; position: absolute; inset: 0; }
.obs-more { display: flex; justify-content: space-between; margin-top: auto !important; padding-top: 1.2rem; font: 500 .68rem/1.3 var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.obs-more-go { color: var(--blue-ink); }

.obs-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.obs-principles li { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.obs-principles b { font: 600 1rem/1.3 var(--sans); }
.obs-principles span { font-size: .95rem; line-height: 1.6; color: var(--ink-2); }

/* ---------- Étude ---------- */
.study-head { padding: 0 0 3.5rem; }
.study-crumb { display: flex; gap: .6rem; margin: 2.6rem 0 0 var(--mgn) !important; font: 500 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.study-crumb a { color: var(--blue-ink); text-decoration: none; }
.study-head h1 { margin-top: 1.2rem; max-width: 52rem; font-size: clamp(2.5rem, 5vw, 4.2rem); }
.study-head .study-meta { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 2.6rem; margin: 2.2rem 0 0 var(--mgn); padding-top: 1rem; border-top: 3px double var(--ink); }
.study-meta dt { font: 500 .6rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.study-meta dd { margin-top: .35rem; font: 500 .92rem/1.35 var(--sans); }

.study-body { padding-top: 3.5rem; }
.study-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow); }
.study-kpis li { display: grid; gap: .5rem; padding: 1.6rem 1.8rem; }
.study-kpis li + li { border-left: 1px solid var(--rule); }
.study-kpis b { font: 400 2.9rem/1 var(--serif); letter-spacing: -.02em; color: var(--blue-ink); }
.study-kpis span { font-size: .92rem; line-height: 1.45; color: var(--ink-2); }

.prose { max-width: 42rem; margin-top: 3.5rem; }
.prose h2 { margin: 3rem 0 1rem !important; font: 400 clamp(1.7rem, 3vw, 2.2rem)/1.1 var(--serif); letter-spacing: -.012em; }
.prose h2:first-child { margin-top: 0 !important; }
.prose p { margin-top: 1rem !important; font-size: 1.08rem; line-height: 1.8; color: #1E293B; }

/* Graphique : une série, barres fines, étiquettes directes */
.obs-chart { margin: 2.4rem 0 1rem; padding: 1.6rem 1.6rem 1.2rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; }
.obs-chart figcaption { display: grid; gap: .3rem; margin-bottom: 1.4rem; }
.obs-chart figcaption b { font: 600 .98rem/1.35 var(--sans); }
.obs-chart figcaption span { font: 400 .72rem/1.4 var(--mono); color: var(--ink-3); }
.hbars { display: grid; gap: .55rem; }
.hb { display: grid; grid-template-columns: 12rem minmax(0, 1fr); align-items: center; gap: .9rem; }
.hb-l { font: 500 .84rem/1.2 var(--sans); color: var(--ink-2); text-align: right; }
.hb-t { position: relative; display: flex; align-items: center; gap: .5rem; height: 22px; }
.hb-m { height: 100%; background: var(--blue-ink); border-radius: 0 4px 4px 0; transition: background .15s ease; }
.hb:hover .hb-m { background: var(--ink); }
.hb-v { flex: none; font: 500 .8rem/1 var(--mono); color: var(--ink); }
.obs-table { margin-top: 1rem; font-size: .85rem; }
.obs-table summary { cursor: pointer; font: 500 .7rem/1 var(--mono); letter-spacing: .06em; color: var(--blue-ink); }
.obs-table table { margin-top: .8rem; border-collapse: collapse; }
.obs-table th, .obs-table td { padding: .35rem 1.4rem .35rem 0; border-bottom: 1px solid var(--rule-soft); text-align: left; }

/* CTA dans le corps de l'étude */
.study-cta { margin: 2.6rem 0 !important; padding: 1.6rem 1.8rem; background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--green); border-radius: 4px; }
.study-cta-k { font: 400 1.6rem/1.15 var(--serif) !important; color: var(--ink) !important; margin: 0 !important; }
.study-cta p:not(.study-cta-k) { margin: .7rem 0 1.2rem !important; font-size: 1rem; color: var(--ink-2); }

.study-method { max-width: 42rem; margin-top: 3.5rem; padding-top: 1.2rem; border-top: 3px double var(--ink); }
.study-method-h { font: 500 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--coral-ink); }
.study-method dl { margin-top: 1rem; }
.study-method dl > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule-soft); }
.study-method dt { font: 500 .66rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.study-method dd { font-size: .92rem; line-height: 1.5; color: var(--ink-2); }


/* En-tête : rubrique courante */
.obs-body .mast-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }

/* Archive vide */
.obs-empty { display: grid; justify-items: start; gap: 1rem; max-width: 40rem; padding: 2.2rem 2.4rem; background: var(--sheet); border: 1px dashed var(--rule); border-radius: 4px; }
.obs-empty-t { font: 400 clamp(1.6rem, 3vw, 2.1rem)/1.15 var(--serif); }
.obs-empty .obs-ex { margin: 0 !important; }

/* Chiffres clés : 1, 2 ou 3 */
.study-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.study-kpis-1 { grid-template-columns: minmax(0, 1fr); max-width: 26rem; }

/* L'essentiel : phrases autonomes, reprises telles quelles par les moteurs de réponse */
.study-findings { max-width: 42rem; margin-top: 2.4rem; padding: 1.4rem 1.6rem; border-top: 3px double var(--ink); border-bottom: 1px solid var(--rule); }
.study-findings-h { font: 500 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--coral-ink); }
.study-findings ul { display: grid; gap: .7rem; margin-top: 1rem !important; }
.study-findings li { position: relative; padding-left: 1.3rem; font-size: 1.02rem; line-height: 1.6; }
.study-findings li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--grad); border-radius: 1px; }

/* Blocs du corps */
.prose strong { font-weight: 600; color: var(--ink); }
.prose a:not(.btn) { color: var(--blue-ink); text-decoration: underline; text-underline-offset: .15em; }
.study-list { display: grid; gap: .5rem; margin-top: 1rem !important; padding-left: 1.3rem !important; }
.study-list li { font-size: 1.05rem; line-height: 1.7; color: #1E293B; }
ul.study-list { list-style: square; }
ol.study-list { list-style: decimal; }
.study-callout { margin: 2rem 0 !important; padding: 1.3rem 1.5rem; background: var(--paper-2); border-left: 3px solid var(--blue-ink); }
.study-callout-h { font: 600 .98rem/1.35 var(--sans) !important; margin: 0 0 .4rem !important; color: var(--ink) !important; }
.study-callout p:not(.study-callout-h) { margin: 0 !important; font-size: 1rem; }
.study-stat { display: grid; gap: .4rem; margin: 2.2rem 0 !important; padding: 1.2rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.study-stat b { font: 400 clamp(2.6rem, 6vw, 3.6rem)/1 var(--serif); letter-spacing: -.02em; color: var(--blue-ink); }
.study-stat span { font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
.study-table-box { margin: 2rem 0 .6rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; }
.study-table-cap { padding: 1rem 1.2rem .4rem; font: 600 .95rem/1.35 var(--sans) !important; color: var(--ink) !important; margin: 0 !important; }
.study-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
/* Tableau plus large que l'écran : fondu à droite tant qu'il reste des colonnes à voir */
.study-table-wrap.is-scrollable:not(.at-end) { -webkit-mask-image: linear-gradient(90deg, #000 85%, rgba(0, 0, 0, .3)); mask-image: linear-gradient(90deg, #000 85%, rgba(0, 0, 0, .3)); }
.study-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.study-table .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.study-table th, .study-table td { padding: .7rem 1.2rem; border-bottom: 1px solid var(--rule-soft); text-align: left; vertical-align: top; font-size: .92rem; line-height: 1.45; }
.study-table thead th { font: 500 .62rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1.5px solid var(--ink); }
.study-table tbody th { font-weight: 600; }
.study-table tbody tr:last-child > * { border-bottom: 0; }
.study-table-note { margin-top: .4rem !important; font: 400 .72rem/1.5 var(--mono) !important; color: var(--ink-3) !important; }
.obs-chart-src { margin-top: .8rem !important; font: 400 .7rem/1.4 var(--mono) !important; color: var(--ink-3) !important; }
.hb.is-hl .hb-m { background: var(--green-ink); }
.study-cite { margin-top: 1.2rem !important; font: 400 .72rem/1.6 var(--mono); color: var(--ink-3); }

/* Deux colonnes : le texte garde sa largeur de lecture, la colonne de droite
   porte le sommaire et l'appel de cadrage. Collante seulement si l'écran est
   assez haut pour la montrer entière, sinon le CTA passerait sous la ligne de flottaison. */
.study-layout { display: grid; grid-template-columns: minmax(0, 42rem) minmax(16rem, 20rem); justify-content: space-between; column-gap: 3rem; }
.study-rail { margin-top: 2.4rem; }
.study-rail-in { display: grid; gap: 1.8rem; }
@media (min-height: 760px) {
    .study-rail-in { position: sticky; top: 96px; }
}
.rail-h { font: 500 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--coral-ink); }
.rail-toc { padding-top: 1rem; border-top: 3px double var(--ink); }
.rail-toc ol { display: grid; margin-top: .7rem !important; counter-reset: toc; }
.rail-toc li { counter-increment: toc; }
.rail-toc a { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); padding: .36rem 0; font-size: .86rem; line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.rail-toc a::before { content: counter(toc, decimal-leading-zero); font: 500 .64rem/2 var(--mono); color: var(--ink-3); }
.rail-toc a:hover { color: var(--blue-ink); }
.rail-facts > div { display: grid; gap: .2rem; padding: .6rem 0; border-top: 1px solid var(--rule-soft); }
.rail-facts dt { font: 500 .6rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.rail-facts dd { font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.rail-cta { display: grid; justify-items: start; gap: .9rem; padding: 1.3rem 1.3rem 1.2rem; background: var(--sheet); border: 1px solid var(--rule); border-top: 1.5px dashed var(--ink-3); border-radius: 4px; box-shadow: var(--shadow); }
.rail-cta-head { display: flex; justify-content: space-between; width: 100%; font: 500 .6rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.rail-cta-t { font: 400 1.4rem/1.12 var(--serif); letter-spacing: -.01em; }
.rail-cta .btn { width: 100%; padding: .8rem 1.1rem; font-size: .92rem; }
.rail-cta .btn-link { font-size: .86rem; }

/* Sous 1200px la colonne n'a plus la place : le texte reprend seul, le CTA reste dans le corps et en bas */
@media (max-width: 1199px) {
    .study-layout { display: block; }
    .study-rail { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .obs-feature { grid-template-columns: minmax(0, 1fr); }
    .obs-feature-fig { border-right: 0; border-bottom: 1px solid var(--rule); }
    .obs-grid, .obs-principles { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
    .study-head .study-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
    .study-kpis, .study-kpis-2 { grid-template-columns: minmax(0, 1fr); }
    .study-kpis li + li { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 640px) {
    .obs-hero h1, .study-head h1, .obs-lede, .study-crumb, .study-head .study-meta { margin-left: 0 !important; }
    .obs-empty { padding: 1.5rem 1.3rem; }
    .study-findings { padding: 1.2rem 0; }
    .obs-feature-fig, .obs-feature-txt { padding: 1.5rem 1.3rem; }
    .obs-chart { padding: 1.2rem 1rem 1rem; }
    .study-method dl > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
    .hb { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
    /* Tableaux larges : première colonne figée, colonnes à largeur minimale */
    .study-table th, .study-table td { min-width: 6.4rem; padding: .65rem .8rem; }
    .study-table thead th:first-child, .study-table tbody th { position: sticky; left: 0; z-index: 1; min-width: 7.6rem; max-width: 9rem; background: var(--sheet); box-shadow: 1px 0 0 var(--rule); }
    .hb-l { text-align: left; }
}