/* ===== Page-owned styles for confidentialite-transparence ===== */

/* Section spacing */
.confidentialite-transparence section {
  margin-bottom: var(--space-7); /* 4rem */
}

/* ===== Introduction Section ===== */
.section-intro {
  background-color: var(--bg-card);
  border-top: 1px solid var(--accent-gold);
  padding: var(--space-6) 0;
}

.section-intro__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: grid;
  grid-template-columns: 30% 70%;
  gap: var(--space-5);
  align-items: start;
}

.section-intro__sidebar {
  order: -1; /* sidebar first on desktop */
}

.section-intro__main {
  /* main content */
}

.section-intro__title {
  margin-bottom: var(--space-3);
}

.section-intro__subtitle {
  margin-bottom: var(--space-4);
}

.section-intro__quote {
  margin-bottom: var(--space-4);
  max-width: 65ch;
}

.section-intro__text {
  max-width: 65ch;
}

.section-intro__summary {
  padding: var(--space-4);
}

.section-intro__summary-title {
  font-size: var(--font-size-h3);
  margin-bottom: var(--space-3);
}

.section-intro__summary-list {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

.section-intro__summary-item {
  margin-bottom: var(--space-2);
}

.section-intro__summary-link {
  color: var(--accent-gold);
  text-decoration: none;
  transition: text-decoration 0.2s;
}

.section-intro__summary-link:hover {
  text-decoration: underline;
}

/* ===== Collecte des données Section ===== */
.section-collecte {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.section-collecte__title {
  margin-bottom: var(--space-4);
}

.section-collecte__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.section-collecte__card {
  padding: var(--space-4);
}

.section-collecte__card-title {
  margin-bottom: var(--space-3);
}

.section-collecte__card-text {
  max-width: 70ch;
}

/* ===== Utilisation des cookies Section ===== */
.section-cookies {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.section-cookies__title {
  margin-bottom: var(--space-4);
}

.section-cookies__subtitle {
  margin-bottom: var(--space-3);
}

.section-cookies__text {
  max-width: 70ch;
  margin-bottom: var(--space-4);
}

.section-cookies__table-wrapper {
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

.section-cookies__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--accent-gold);
}

.section-cookies__table th,
.section-cookies__table td {
  padding: var(--space-3);
  border: 1px solid var(--accent-gold);
  text-align: left;
}

.section-cookies__table thead {
  background-color: var(--bg-card);
}

.section-cookies__table tbody tr:nth-child(even) {
  background-color: var(--bg-card);
}

.section-cookies__btn {
  margin-top: var(--space-3);
}

/* ===== Protection des données Section ===== */
.section-protection {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.section-protection__title {
  margin-bottom: var(--space-4);
}

.section-protection__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.section-protection__subtitle {
  margin-bottom: var(--space-3);
}

.section-protection__text {
  max-width: 65ch;
}

/* ===== Droits des utilisateurs Section ===== */
.section-droits {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.section-droits__title {
  margin-bottom: var(--space-4);
}

.section-droits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.section-droits__card {
  padding: var(--space-4);
}

.section-droits__card-title {
  margin-bottom: var(--space-2);
}

.section-droits__card-text {
  max-width: 60ch;
}

.section-droits__reclamation {
  max-width: 70ch;
}

.section-droits__subtitle {
  margin-bottom: var(--space-3);
}

.section-droits__text {
  margin-bottom: var(--space-4);
}

/* ===== Transparence éditoriale et affiliations Section ===== */
.section-transparence {
  background-color: var(--bg-card);
  padding: var(--space-6) 0;
}

.section-transparence__title {
  max-width: 1200px;
  margin: 0 auto var(--space-4);
  padding: 0 var(--space-4);
}

.section-transparence__grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.section-transparence__subtitle {
  margin-bottom: var(--space-3);
}

.section-transparence__quote {
  margin-bottom: var(--space-4);
}

.section-transparence__text {
  max-width: 70ch;
}

/* ===== Contact et modifications Section ===== */
.section-contact-modifications {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  border-top: 1px solid var(--accent-gold);
  padding-top: var(--space-6);
}

.section-contact-modifications__title {
  margin-bottom: var(--space-4);
}

.section-contact-modifications__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.section-contact-modifications__subtitle {
  margin-bottom: var(--space-3);
}

.section-contact-modifications__text {
  max-width: 65ch;
}

.section-contact-modifications__email {
  color: var(--accent-gold);
  text-decoration: none;
  transition: text-decoration 0.2s;
}

.section-contact-modifications__email:hover {
  text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 64rem) { /* 1024px */
  .section-intro__inner {
    grid-template-columns: 1fr;
  }

  .section-intro__sidebar {
    order: 0; /* move sidebar below main on tablet */
  }

  .section-droits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) { /* 768px */
  .section-collecte__grid,
  .section-protection__grid,
  .section-transparence__grid,
  .section-contact-modifications__grid {
    grid-template-columns: 1fr;
  }

  .section-droits__grid {
    grid-template-columns: 1fr;
  }

  .section-intro__inner {
    grid-template-columns: 1fr;
  }

  .section-intro__sidebar {
    order: 0;
  }

  .section-cookies__table-wrapper {
    overflow-x: auto;
  }

  .section-cookies__table {
    min-width: 600px; /* ensure table scrolls on small screens */
  }
}

@media (max-width: 30rem) { /* 480px */
  .section-intro__title {
    font-size: 2rem;
  }

  .section-intro__subtitle {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.25rem;
  }
}