/* ==========================================================
   1000exercices.info - stylearticle.css
   Template article avec sidebar
   Optimisé pour Firefox, Chrome, Brave, Edge et navigateurs modernes.
   Non testé sous Netscape Navigator, Mosaic, ni U.S. Robotics 56K.
   Si vous entendez krrrr... piiii... tchiiii..., rechargez la page !
   ========================================================== */

:root {
  --blue: #1e5f8f;
  --blue-dark: #17476c;
  --blue-light: #e8f2fa;
  --green: #2f8b57;
  --green-dark: #236b42;
  --green-light: #e8f6ee;
  --text: #25313b;
  --muted: #667684;
  --border: #d8e3ea;
  --bg: #eef4f8;
  --white: #ffffff;
  --soft: #f8fbfd;
  --yellow-soft: #fff8df;
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--green-dark);
  text-decoration: underline;
}

p,
li {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.site-wrapper {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--white);
  box-shadow: 0 0 24px rgba(27, 61, 84, 0.12);
}

/* Header */

.site-header {
  background: var(--white);
}

.site-top-banner {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--white);
}

.top-banner-link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.top-banner-link:hover,
.top-banner-link:focus {
  text-decoration: none;
}

.top-banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1180px;
  margin: 0 auto;
}

/* Navigation */

.mobile-nav-bar {
  display: none;
  background: var(--blue);
  border-top: 1px solid var(--blue-dark);
  border-bottom: 3px solid var(--green);
  padding: 8px 12px;
  text-align: right;
}

.mobile-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 38px;
  padding: 0;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  cursor: pointer;
}

.mobile-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--blue-dark);
  border-radius: 3px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.mobile-nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.mobile-nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--blue);
  border-top: 1px solid var(--blue-dark);
  border-bottom: 3px solid var(--green);
}

.main-nav a {
  padding: 13px 16px;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: bold;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.main-nav a:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav a.active {
  background: var(--green);
  color: var(--white);
  text-decoration: none;
}

/* Layout article + sidebar */

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  padding: 24px;
}

.main-content,
.sidebar {
  min-width: 0;
}

.content-box,
.side-box {
  margin-bottom: 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.content-box {
  padding: 26px;
}

.article-box {
  border-top: 4px solid var(--green);
}

/* Fil d’Ariane */

.breadcrumb {
  margin: 0 0 18px;
  font-size: 0.92rem;
  color: var(--muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  color: var(--muted);
}

.breadcrumb li + li::before {
  content: "›";
  margin: 0 6px 0 0;
  color: var(--green);
  font-weight: 700;
}

.breadcrumb a {
  color: var(--blue);
  font-weight: 600;
}

.breadcrumb [aria-current="page"] {
  color: var(--muted);
}

/* En-tête article */

.article-kicker {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 10px;
  background: var(--green-light);
  color: var(--green-dark);
  border: 1px solid #b8dcc8;
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: bold;
}

.article-box h1 {
  max-width: 850px;
  margin: 0 0 14px;
  color: var(--blue-dark);
  font-size: 2.25rem;
  line-height: 1.22;
}

.article-lead {
  max-width: 880px;
  margin: 0 0 16px;
  color: #33424e;
  font-size: 1.12rem;
  line-height: 1.7;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.92rem;
}

.article-meta li {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.article-hero {
  margin: 0 0 24px;
}

.article-hero picture,
.article-hero img {
  display: block;
  width: 100%;
}

.article-hero img {
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(27, 61, 84, 0.10);
}

.article-hero figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Blocs article */

.article-summary,
.article-toc,
.article-callout,
.article-warning,
.article-related-box {
  margin: 22px 0;
  padding: 18px 20px;
  border-radius: 6px;
}

.article-summary {
  background: var(--green-light);
  border: 1px solid #b8dcc8;
  border-left: 4px solid var(--green);
}

.article-summary h2,
.article-toc h2 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  color: var(--blue-dark);
  font-size: 1.25rem;
}

.article-summary ul,
.article-toc ol {
  margin: 0;
  padding-left: 20px;
}

.article-summary li,
.article-toc li {
  margin-bottom: 5px;
}

.article-toc {
  background: var(--soft);
  border: 1px solid var(--border);
}

.article-callout {
  background: var(--yellow-soft);
  border: 1px solid #eadc9d;
  border-left: 4px solid #d4a82c;
}

.article-warning {
  background: #fff4f0;
  border: 1px solid #f0c0ad;
  border-left: 4px solid #d9794f;
}

.article-related-box {
  background: var(--blue-light);
  border: 1px solid #c9dce9;
}

.article-related-box h2,
.article-callout h2,
.article-warning h2 {
  margin-top: 0;
}

.article-body h2,
.article-related-box h2,
.article-callout h2,
.article-warning h2,
.faq-block h2 {
  margin: 30px 0 14px;
  padding-bottom: 9px;
  color: var(--blue-dark);
  font-size: 1.55rem;
  line-height: 1.25;
  border-bottom: 2px solid var(--blue-light);
}

.article-body h2::first-letter,
.article-related-box h2::first-letter,
.article-callout h2::first-letter,
.article-warning h2::first-letter,
.faq-block h2::first-letter {
  color: var(--green);
}

.article-body h3 {
  margin: 24px 0 10px;
  color: var(--green-dark);
  font-size: 1.2rem;
  line-height: 1.3;
}

.article-body p,
.article-body li,
.article-callout p,
.article-warning p,
.article-related-box p {
  color: var(--text);
}

.article-body p,
.article-callout p,
.article-warning p,
.article-related-box p {
  margin: 0 0 18px;
  text-align: justify;
}

.article-body ul,
.article-body ol {
  margin-top: 0;
  margin-bottom: 18px;
  padding-left: 22px;
}

.article-body li {
  margin-bottom: 7px;
}

.article-body strong {
  color: var(--blue-dark);
}

.external-resources {
  margin: 18px 0 0;
  padding-left: 20px;
}

.external-resources li {
  margin-bottom: 8px;
}

/* FAQ interne article */

.faq-block {
  margin-top: 28px;
}

.faq-block details {
  margin-bottom: 12px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.faq-block summary {
  padding: 13px 15px;
  color: var(--blue-dark);
  font-weight: bold;
  cursor: pointer;
}

.faq-block details[open] summary {
  border-bottom: 1px solid var(--border);
}

.faq-block details p {
  margin: 0;
  padding: 14px 15px 16px;
  text-align: justify;
}

/* Boutons */

.quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.btn-main,
.btn-secondary,
.side-button {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 3px;
  font-weight: bold;
  text-align: center;
}

.btn-main {
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--green-dark);
}

.btn-main:hover,
.btn-main:focus {
  background: var(--green-dark);
  color: var(--white);
  text-decoration: none;
}

.btn-secondary {
  background: var(--blue);
  color: var(--white);
  border: 1px solid var(--blue-dark);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--blue-dark);
  color: var(--white);
  text-decoration: none;
}

/* Sidebar */

.side-box {
  padding: 18px;
  background: #fbfdff;
}

.side-box h2 {
  margin: -18px -18px 14px;
  padding: 11px 14px;
  background: var(--blue);
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1.25;
  border-bottom: 3px solid var(--green);
}

.side-box h2::first-letter {
  color: var(--white);
}

.side-box ul,
.side-toc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-box li,
.side-toc li {
  border-bottom: 1px solid var(--border);
}

.side-box li:last-child,
.side-toc li:last-child {
  border-bottom: 0;
}

.side-box li a,
.side-toc li a {
  display: block;
  padding: 9px 0;
  font-weight: bold;
}

.side-box p {
  margin: 0 0 12px;
}

.side-highlight {
  background: var(--green-light);
  border-color: #b8dcc8;
}

.side-button {
  display: block;
  margin-top: 12px;
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--green-dark);
}

.side-button:hover,
.side-button:focus {
  background: var(--green-dark);
  color: var(--white);
  text-decoration: none;
}

.side-ad-box {
  margin-bottom: 22px;
  padding: 10px;
  background: #0d1216;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: center;
}

.side-ad-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.side-ad-link:hover,
.side-ad-link:focus {
  text-decoration: none;
}

.side-ad-link img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
  border-radius: 3px;
}

.side-ad-note {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  line-height: 1.3;
}

/* Footer */

.site-footer {
  background: var(--blue-dark);
  color: rgba(255, 255, 255, 0.88);
  border-top: 4px solid var(--green);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
}

.footer-inner p {
  margin: 6px 0 0;
}

.site-footer a {
  color: var(--white);
  font-weight: bold;
}

/* Responsive tablette */

@media (max-width: 900px) {
  .mobile-nav-bar {
    display: block;
  }

  .main-nav {
    display: none;
    background: var(--blue-dark);
    border-top: 0;
    border-bottom: 3px solid var(--green);
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav a {
    display: block;
    padding: 13px 18px;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .main-nav a:first-child {
    border-left: 0;
  }

  .main-nav a:last-child {
    border-bottom: 0;
  }

  .page-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .side-box,
  .side-ad-box {
    margin-bottom: 0;
  }
}

/* Responsive mobile */

@media (max-width: 680px) {
  body {
    background: var(--white);
  }

  .site-wrapper {
    box-shadow: none;
  }

  .top-banner-img {
    width: 100%;
    height: auto;
  }

  .page-layout {
    padding: 14px;
  }

  .content-box {
    padding: 18px;
  }

  .article-box h1 {
    font-size: 1.82rem;
  }

  .article-lead {
    font-size: 1.02rem;
  }

  .article-body h2,
  .article-related-box h2,
  .article-callout h2,
  .article-warning h2,
  .faq-block h2 {
    font-size: 1.35rem;
  }

  .article-meta {
    display: block;
  }

  .article-meta li {
    display: flex;
    margin-bottom: 7px;
  }

  .quick-buttons,
  .sidebar {
    display: block;
  }

  .btn-main,
  .btn-secondary {
    display: block;
    margin-bottom: 10px;
  }

  .side-box,
  .side-ad-box {
    margin-bottom: 18px;
  }

  .footer-inner {
    display: block;
    padding: 20px 14px;
  }

  .footer-inner div + div {
    margin-top: 14px;
  }
}

/* Tableaux simples dans les articles */
.article-table-wrap {
  width: 100%;
  margin: 20px 0 24px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
}

.article-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.96rem;
}

.article-table th,
.article-table td {
  padding: 11px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.article-table th {
  background: var(--blue-light);
  color: var(--blue-dark);
  font-weight: bold;
}

.article-table tr:nth-child(even) td {
  background: var(--soft);
}

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