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



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

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

.article {
  margin: 200px auto 150px;
  max-width: 850px;
  padding: 0 75px;
  box-sizing: border-box;
}

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

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

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

.h2-article {
  font-size: 30px;
  font-weight: 600;
  color: var(--redlina-black);
  margin: 50px 0 30px;
  line-height: 1.2;
}

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

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

.a-edit{
color:var(--redlina-graytext-1);
text-decoration: underline;
cursor:pointer;
transition: 0.2s ease;
}

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

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

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

.article-toc {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 50px 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 30px 0 10px;
  margin: 0;
  border-left: 0.5px solid var(--redlina-graytext-1);
}

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

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

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


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

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

.table-wrapper {
  overflow-x: auto;
}

.pros-cons-table {
  width: 100%;
  min-width: 650px;
  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: 16px 25px;
  text-align: left;
  vertical-align: top;
  color: var(--redlina-black);
}

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

.pros-cons-table td {
  font-size: 14px;
  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: 650px;
}

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

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

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

.checklist-li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 15px;
  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 0 0 25px;
  margin: 0 0 30px;
}

.simplelist-li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 7px;
  font-size: 17px;
  font-weight: 400;
  color: var(--redlina-black);
  line-height: 1.5;
}

.simplelist-li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 17px;
  height: 17px;
  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: 650px;
  margin: 50px 0;
  padding: 30px 40px 20px 40px;
  background: var(--redlina-background-2);
  border-radius: 20px;
  color: var(--redlina-black);
}

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

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


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

.faq-section {
  margin: 50px 0;
  padding: 45px 0;
  background: var(--redlina-background-2);
  border-radius: 20px;
  color: var(--redlina-black);
}

.faq-h2 {
  font-size: 26px;
  font-weight: 600;
  margin: 0 50px 30px;
}

.faq-details {
  margin: 0;
}

.faq-summary {
  display: block;
  position: relative;
  margin: 20px 50px 0;
  padding-right: 110px;
  box-sizing: border-box;
  font-size: 18px;
  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: 20px;
  height: 20px;
  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: 15px 50px 25px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--redlina-black);
  opacity: 0.85;
  overflow: hidden;
}


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

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

.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:50px;
  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: 100px 0px 100px 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(2, 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-card:hover {
  background: var(--redlina-background-3);
}
 
.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;
}