/* ───────────────────────────── */
/* ARTICLE LAYOUT */
/* ───────────────────────────── */

.article-header {
  padding: 11rem 4rem 3rem;
  max-width: 960px;
  margin: 0 auto;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2.5rem;
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ash);
  text-decoration: none;
}

.article-back::before {
  content: "←";
  font-size: .7rem;
}

.article-back:hover {
  color: var(--chalk);
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.article-date {
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.article-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .5rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(184,150,90,.7);
  border: 1px solid rgba(184,150,90,.2);
  padding: .22rem .6rem;
}

.article-header h1 {
  max-width: 900px;
  font-family: var(--f-display);
  font-size: clamp(2.7rem, 4.6vw, 4.6rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.12;
  color: var(--paper);
}

/* ───────────────────────────── */
/* CONTENT — fond ivoire         */
/* ───────────────────────────── */

.article-content {
  background: var(--ivory);
  max-width: 100%;
  margin: 0;
  padding: 5rem 4rem 7rem;
}

.article-content > * {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.article-content p {
  margin-bottom: 1.7em;
  font-size: .94rem;
  line-height: 1.9;
  color: #4a4640;
  font-weight: 300;
}

.article-content p:first-child {
  font-size: 1.05rem;
  color: var(--ink);
}

.article-content h2 {
  margin: 3.5rem auto 1.4rem;
  font-family: var(--f-display);
  font-size: 1.95rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.article-content h3 {
  margin: 2.3rem auto 1rem;
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
}

.article-content strong {
  color: var(--ink);
  font-weight: 400;
}

/* ───────────────────────────── */
/* BLOCKQUOTE                    */
/* ───────────────────────────── */

.article-content blockquote {
  margin: 2.5rem auto;
  padding-left: 2rem;
  border-left: 2px solid var(--gold);
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: #5a5650;
}

/* ───────────────────────────── */
/* TABLE                         */
/* ───────────────────────────── */

.article-table-wrap {
  margin: 2.5rem auto;
  overflow-x: auto;
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(13,13,11,.08);
  min-width: 720px;
}

.article-table th,
.article-table td {
  padding: 1.25rem 1.4rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(13,13,11,.08);
}

.article-table th {
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(13,13,11,.02);
}

.article-table td {
  font-size: .84rem;
  line-height: 1.7;
  color: #4a4640;
}

.article-table tr:last-child td {
  border-bottom: none;
}

/* Responsive tables */
@media (max-width: 768px) {
  .article-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ───────────────────────────── */
/* FOOTER CTA — fond ivoire      */
/* ───────────────────────────── */

.article-footer {
  background: var(--ivory);
  max-width: 100%;
  margin: 0;
  padding: 3rem 4rem 6rem;
  border-top: 1px solid rgba(13,13,11,.06);
  text-align: center;
}

.article-footer-label {
  margin-bottom: 1.5rem;
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6a655e;
}

.article-footer-cta {
  display: inline-block;
  padding: 1rem 3rem;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s;
}

.article-footer-cta:hover {
  background: var(--gold);
}

/* ───────────────────────────── */
/* MOBILE                        */
/* ───────────────────────────── */

@media (max-width: 900px) {
  .article-header {
    padding: 8rem 2rem 2.5rem;
  }

  .article-content {
    padding: 3rem 2rem 5rem;
  }

  .article-footer {
    padding: 2rem 2rem 4rem;
  }
}

/* ───────────────────────────── */
/* BLOC PILIER                        */
/* ───────────────────────────── */


.piliers {
      margin: 3rem auto;
      max-width: 720px;
      display: flex;
      flex-direction: column;
      gap: 1px;
      background: rgba(0,0,0,0.07);
      border: 1px solid rgba(0,0,0,0.07);
      border-radius: 14px;
      overflow: hidden;
    }
    .pb-cloture {
      margin-top: 1.25rem;
      padding-top: 1.25rem;
      border-top: 1px solid rgba(0,0,0,0.06);
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem;
      font-style: italic;
      font-weight: 300;
      color: #888;
      line-height: 1.7;
    }
    .pilier { background: #fff; overflow: hidden; }
    .pilier-header {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      padding: 1.5rem 2rem;
      cursor: pointer;
      border: none;
      background: transparent;
      width: 100%;
      text-align: left;
      font-family: 'Outfit', sans-serif;
      transition: background .15s;
    }
    .pilier-header:hover { background: #fafaf8; }
    .pilier.open .pilier-header { background: #fafaf8; }
    .pilier-num {
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      font-weight: 300;
      color: #ccc;
      letter-spacing: .1em;
      flex-shrink: 0;
      width: 24px;
    }
    .pilier-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 300;
      color: #1a1917;
      flex: 1;
    }
    .pilier-sub {
      font-size: 13px;
      color: #aaa;
      font-family: 'Outfit', sans-serif;
      font-weight: 200;
    }
    .pilier-arrow {
      font-size: 13px;
      color: #ccc;
      flex-shrink: 0;
      transition: transform .25s;
    }
    .pilier.open .pilier-arrow { transform: rotate(180deg); }
    .pilier-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height .45s ease;
      background: #fafaf8;
      border-top: 1px solid rgba(0,0,0,0.05);
    }
    .pilier.open .pilier-body { max-height: 1200px; }
    .pilier-body-inner {
      padding: 1.75rem 2rem 2rem;
    }
    .pb-section { margin-bottom: 1.5rem; }
    
    .pb-section:last-child { margin-bottom: 0; }
    .pb-label {
      font-size: 10px;
      font-weight: 300;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: #bbb;
      font-family: 'DM Mono', monospace;
      margin-bottom: .75rem;
    }
    .pb-section p {
      font-size: 14px!important;
      color: #555;
      line-height: 1.8;
      margin-bottom: .6rem;
    }
    
    .pb-section p:last-child { margin-bottom: 0; }
    .pb-limit {
      margin-top: 1.5rem;
      padding: 14px 18px;
      border-left: 3px solid rgba(0,0,0,0.1);
      background: white;
      border-radius: 0 8px 8px 0;
    }
    .pb-limit-label {
      font-size: 10px;
      font-weight: 300;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: #bbb;
      font-family: 'DM Mono', monospace;
      margin-bottom: .4rem;
    }
    .pb-limit p {
      font-size: 13px;
      color: #777;
      line-height: 1.65;
      font-style: italic;
      margin: 0;
    }
    .pull-centered {
      margin: 3.5rem auto;
      max-width: 560px;
      text-align: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.3rem, 2.5vw, 1.75rem);
      font-weight: 300;
      font-style: italic;
      color: #1a1917;
      line-height: 1.45;
      opacity: 0.8;
    }
    @media (max-width: 640px) {
      .pilier-sub { display: none; }
      .pilier-header { padding: 1.25rem; }
    }


    /* Widget organisationnel intégré */
    .widget-orga {
      margin: 3rem 0;
      border: 1px solid rgba(0,0,0,0.1);
      border-radius: 14px;
      overflow: hidden;
      font-family: 'Outfit', sans-serif;
    }
    .widget-orga {
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }
    .widget-tabs {
      display: flex;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      background: rgba(0,0,0,0.02);
      flex-wrap: wrap;
    }
    .widget-tab {
      padding: 10px 20px;
      font-size: 13px;
      font-weight: 300;
      cursor: pointer;
      border: none;
      background: transparent;
      font-family: 'Outfit', sans-serif;
      color: #888;
      border-bottom: 2px solid transparent;
      transition: all .2s;
      letter-spacing: .02em;
    }
    .widget-tab:hover { color: #333; }
    .widget-tab.active { color: #1a1917; border-bottom-color: #1a1917; background: white; }
    .widget-panel { display: none; padding: 2rem; background: white; }
    .widget-panel.active { display: grid; grid-template-columns: 1fr 220px; gap: 2rem; }
    .wp-title { font-size: 1.3rem; font-weight: 400; color: #1a1917; margin-bottom: .5rem; font-family: 'Cormorant Garamond', serif; font-style: italic; }
    .wp-desc { font-size: 14px; color: #666; line-height: 1.65; margin-bottom: 1.25rem; }
    .wp-phase { font-size: 12px; color: #aaa; font-style: italic; margin-bottom: 1.5rem; }
    .wp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
    .wp-col h4 { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: #aaa; margin-bottom: .5rem; }
    .wp-col ul { list-style: none; }
    .wp-col ul li { font-size: 13px; color: #666; padding: 2px 0 2px 10px; position: relative; line-height: 1.5; }
    .wp-col ul li::before { content: '–'; position: absolute; left: 0; color: #ccc; }
    .wp-ia { padding: 12px 14px; background: #fffbf0; border-left: 3px solid #e8c97a; border-radius: 0 6px 6px 0; }
    .wp-ia-label { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: #b8900a; margin-bottom: 5px; }
    .wp-ia p { font-size: 13px; color: #666; line-height: 1.6; }
    .wp-schema { display: flex; align-items: center; justify-content: center; }
    @media (max-width: 680px) {
      .widget-panel.active { grid-template-columns: 1fr; }
      .wp-schema { display: none; }
      .wp-cols { grid-template-columns: 1fr; }
    }

    /* Diagnostic intégré */
    .diag-section {
      margin: 3rem 0;
      padding: 2rem;
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 14px;
      background: #fafaf8;
      font-family: 'Outfit', sans-serif;
    }
    .diag-intro { font-size: 14px; color: #666; line-height: 1.65; margin-bottom: 2rem; }
    .diag-q { margin-bottom: 1.5rem; }
    .diag-q-label { font-size: 14px; font-weight: 300; color: #1a1917; margin-bottom: .75rem; }
    .diag-opts { display: flex; flex-direction: column; gap: 6px; }
    .diag-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; cursor: pointer; transition: all .15s; background: white; font-family: 'Outfit', sans-serif; text-align: left; }
    .diag-opt:hover { border-color: rgba(0,0,0,0.25); background: #fefefe; }
    .diag-opt.selected { border-color: #1a1917; background: white; }
    .diag-opt input { margin-top: 3px; flex-shrink: 0; }
    .diag-opt span { font-size: 13px; color: #666; line-height: 1.4; }
    .diag-btn { margin-top: 1.5rem; padding: 10px 24px; border-radius: 100px; background: #1a1917; color: white; border: none; font-size: 13px; font-family: 'Outfit', sans-serif; font-weight: 300; cursor: pointer; letter-spacing: .04em; transition: opacity .15s; }
    .diag-btn:disabled { opacity: 0.3; cursor: default; }
    .diag-result { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; background: white; display: none; }
    .diag-result-badge { display: inline-block; padding: 3px 12px; border-radius: 100px; font-size: 11px; margin-bottom: .75rem; font-family: 'Outfit', sans-serif; }
    .diag-result h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 400; color: #1a1917; margin-bottom: .6rem; }
    .diag-result p { font-size: 13px; color: #666; line-height: 1.65; }
    .diag-result .sub { margin-top: .6rem; font-size: 12px; color: #aaa; font-style: italic; }
    .diag-reset { margin-top: .75rem; font-size: 12px; color: #aaa; background: none; border: none; cursor: pointer; font-family: 'Outfit', sans-serif; text-decoration: underline; }