/* ============================================================
   article-m.css — Redlina
   Styles mobile (<1024px) pour les pages articles
   Chargé via : <link media="(max-width: 1023px)">
   Variables définies dans global.css
   ============================================================ */


/* ── Article — conteneur principal ───────────────────────── */

.article-surtitle{
  font-size: 14px;
  font-weight: 500;
  color: var(--redlina-graytext-1);
  margin-bottom: 16px;
}

.article {
  margin: 100px auto 80px;
  max-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.h1-article {
  font-size: 28px;
  font-weight: 600;
  color: var(--redlina-black);
  line-height: 1.25;
  margin: 0;
}

.fade-separator {
  height: 5px;
  width: 50px;
  background: var(--redlina-red);
  margin: 20px 0 12px;
}

.article-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 35px;
  font-size: 12px;
  color: var(--redlina-graytext-1);
}

.h2-article {
  font-size: 22px;
  font-weight: 600;
  color: var(--redlina-black);
  margin: 40px 0 20px;
  line-height: 1.25;
}

.h3-article {
  font-size: 18px;
  font-weight: 600;
  color: var(--redlina-black);
  margin: 30px 0 10px;
}

.p-article {
  font-size: 16px;
  font-weight: 400;
  color: var(--redlina-black);
  line-height: 1.4;
  margin-bottom: 24px;
}

.a-edit {
  color: var(--redlina-graytext-1);
  text-decoration: underline;
}

.a-edit:active {
  color: var(--redlina-graytext-1);
  text-decoration: underline;
}

/* ── Sommaire ─────────────────────────────────────────────── */

.article-toc {
  width: 100%;
  box-sizing: border-box;
  margin: 35px 0;
}

.toc-h2 {
  font-size: 12px;
  font-weight: 600;
  color: var(--redlina-graytext-1);
  margin: 0 0 10px;
  padding: 0;
}

.toc-list {
  list-style: none;
  padding: 0 0 0 5px;
  margin: 0;
  border-left: 0.5px solid var(--redlina-graytext-1);
}

.toc-item {
  margin-bottom: 8px;
}

.toc-link {
  display: block;
  padding-left: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--redlina-graytext-1);
  text-decoration: none;
}

.toc-link:active {
  color: var(--redlina-black);
  text-decoration: underline;
}


/* ── Tableau avantages / inconvénients ───────────────────── */

.pros-cons-section {
  margin: 24px 0;
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pros-cons-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  border: 1px solid var(--redlina-grayline-1);
  table-layout: fixed;
}

.pros-cons-table thead {
  background: var(--redlina-background-2);
}

.pros-cons-table th,
.pros-cons-table td {
  width: 50%;
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  color: var(--redlina-black);
}

.pros-cons-table th {
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--redlina-grayline-1);
}

.pros-cons-table td {
  font-size: 13px;
  border-bottom: 1px solid var(--redlina-grayline-1);
}

.pros-cons-table tbody tr:last-child td {
  border-bottom: none;
}


/* ── Checklist ────────────────────────────────────────────── */

.section-article-checklist {
  max-width: 100%;
}

.title-article-checklist {
  font-size: 22px;
  font-weight: 600;
  color: var(--redlina-black);
  margin: 40px 0 20px;
}

.checklist-ul {
  list-style: none;
  padding: 0;
  margin-left: 0px;
}

.checklist-li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 400;
  color: var(--redlina-black);
  line-height: 1.4;
}

.checklist-li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  background: url("../icons/check-list.svg") center / contain no-repeat;
}

.p-article + .checklist-ul {
  margin-top: -10px;
}


/* ── Liste simple (puces) ─────────────────────────────────── */

.simplelist-ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.simplelist-li {
  position: relative;
  padding-left: 25px;
  font-size: 16px;
  font-weight: 400;
  color: var(--redlina-black);
  line-height: 1.4;
}

.simplelist-li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 16px;
  height: 16px;
  background: url("../icons/bullet-list.svg") center / contain no-repeat;
}

.p-article + .simplelist-ul {
  margin-top: -16px;  /* compense la marge du p-article */
}


/* ── Encadré ─────────────────────────────────────────────── */

.encadre-section {
  max-width: 100%;
  margin: 35px 0;
  padding: 20px 20px 5px 20px;
  background: var(--redlina-background-2);
  border-radius: 16px;
  box-sizing: border-box;
  color: var(--redlina-black);
}

.h3-encadre-section {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 10px;
}

.p-encadre-section {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  margin: 15px 0px;
}


/* ── FAQ ─────────────────────────────────────────────────── */

.faq-section {
  max-width: 100%;
  margin: 35px 0;
  padding: 20px 20px 5px 20px;
  background: var(--redlina-background-2);
  border-radius: 16px;
  box-sizing: border-box;
  color: var(--redlina-black);
}

.faq-h2 {
  font-size: 20px;
  font-weight: 600;
  margin:0px 0px 20px 0px;
}

.faq-details {
  margin: 0;
}

.faq-summary {
  display: block;
  position: relative;
  margin: 0px 0px 15px 0px;
  padding-right: 35px;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq-summary::-webkit-details-marker,
.faq-summary::marker {
  display: none;
}

.faq-summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
  transition: transform 0.25s ease;
}

.faq-details[open] .faq-summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.faq-p {
  margin: 0px 0px 20px 0px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--redlina-black);
  opacity: 0.85;
  overflow: hidden;
}


/* ── Sources ─────────────────────────────────────────────── */

.sources-section {
  margin-top: 30px;
}

.sources-h2 {
  font-size: 12px;
  font-weight: 600;
  color: var(--redlina-graytext-1);
  margin: 0 0 5px;
}

.sources-list {
  list-style: decimal;
  padding-left: 0;
  margin: 0;
  font-size: 12px;
}

.sources-list li {
  display: flex;
  align-items: baseline;
  gap: 0px;
  margin-bottom: 1px;
  font-size: 12px;
  counter-increment: sources-counter;
  list-style: none;
}

.sources-list li::before {
  content: counter(sources-counter) ".";
  min-width: 5px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--redlina-graytext-1);
}

.a-sources {
  padding-left: 10px;
  font-size: 12px;
  color: var(--redlina-graytext-1);
  text-decoration: none;
}

.a-sources:active {
  text-decoration: underline;
}


/* ── Disclaimer ───────────────────────────────────────── */
.disclaimer{
  margin-top:30px;
  font-size: 12px;
  font-weight: 400;
  line-height:1.4;
  color: var(--redlina-graytext-1);
}

.d-disclaimer{
  font-weight:600;
}


/* ── Articles liés ───────────────────────────────────────── */
 
.articles-lies {
  margin: 40px 0px 0px 0px;
}
 
.articles-lies-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--redlina-graytext-1);
  margin: 0px;
}
 
.articles-lies-grille {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 25px;
}
 
.article-lie-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--redlina-background-2);
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.2s ease;
}
 
.article-lie-titre {
  font-size: 20px;
  font-weight: 600;
  color: var(--redlina-black);
  line-height: 1.35;
}
 
.article-lie-prev {
  font-size: 14px;
  font-weight: 400;
  color: var(--redlina-graytext-2);
  line-height: 1.4;
 
  /* Tronque à 3 lignes pour uniformiser les hauteurs de cartes */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}