/* ——— Pages "Le CRIDON" (informations générales) ——————————————————————— */

/* Bloc titre de page (h1 en dehors du header, même pattern que les pages archives/e-learning) */
.cridon-info .page-intro {
  background-color: var(--color-clear-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-border);
  padding-block-end: var(--space-12);
}

/* Sidebar visible sur mobile (sans la barre fixe en bas de page-navigation) */
.cridon-info .layout-2-col .sidebar {
  background-color: var(--color-clear-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-border);
  margin-block-end: var(--space-8);

  @media (width > 720px) {
    margin-block-end: 0;
  }
}

/* Main transparent : chaque section a son propre fond de carte */
.cridon-info .layout-2-col .main-content {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: 0;
}

/* ——— Table des matières (sidebar) ——————————————————————— */

.page-toc {

  ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding-block: var(--space-8);
    padding-inline: var(--space-8);
  }

  a {
    border-radius: var(--radius-md);
    color: inherit;
    display: block;
    font-size: 0.875rem;
    line-height: 1.35;
    padding: 0.4rem var(--space-4) 0.4rem var(--space-8);
    position: relative;
    text-decoration: none;
    transition-duration: 150ms;
    transition-property: background-color, color;
    transition-timing-function: ease-out;

    &:hover {
      background-color: var(--color-surface-lighter);
      color: inherit;
    }

    &.active {
      background-color: var(--color-surface-lighter);
      /* Le padding de base (var(--space-8)) reste intact + 1.25rem d'indent,
         comme .menu-item.active .menu-label dans page-nav.css */
      padding-inline-start: calc(var(--space-8) + 1.25rem);

      &::before {
        background-color: var(--color-accent);
        border-radius: 50%;
        content: "";
        display: block;
        height: 8px;
        /* Calé dans la zone de padding héritée du lien (var(--space-8)),
           identique à .menu-item.active .menu-label::before dans page-nav.css */
        left: calc(var(--space-8) + 0.3rem);
        outline: 1px solid var(--color-primary);
        outline-offset: 2px;
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        width: 8px;
      }
    }
  }
}

/* ——— Section de contenu (carte blanche) ——————————————————————— */

.info-section {
  background-color: var(--color-clear-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-border);
  padding-block-end: var(--space-24);

  a {
    color: var(--color-accent);

    &:hover,
    &:focus {
      color: var(--color-accent-dark);
    }
  }
}

/* Séparateur · entre mots dans le badge */
.info-section__title-sep {
  border-radius: 50%;
  background-color: currentColor;
  display: inline-block;
  height: 3px;
  opacity: 0.35;
  width: 3px;
}

/* Corps de la section (texte, listes, tableaux) */
.info-section__body {
  padding-inline: var(--space-20);

  .elearning-card a {
    color: var(--color-primary);
    text-decoration: none;

    &:hover p {
      color: var(--color-primary);
    }    
  }

  .elearning-card__title {
    font-size: var(--fs-heading-2);
    line-height: 1.25;
  }
}

.info-section__body h3 {
  font-family: var(--ff-headings);
  font-size: var(--fs-heading-2);
  font-weight: 600;
  line-height: 1.25;
  margin-block: var(--space-20) var(--space-12);
}

.info-section__body h4 {
  font-size: var(--fs-body);
  font-weight: 600;
  margin-block: var(--space-16) var(--space-8);
  text-decoration: underline;
}

.info-section__body p {
  margin-block: 0 var(--space-12);
}

.info-section__body ul,
.info-section__body ol {
  margin-block: 0 var(--space-16);
  padding-inline-start: var(--space-20);
}

.info-section__body li {
  line-height: 1.65;
  margin-block-end: var(--space-8);
}

.info-section__body {
  .info-section__conditions {
    column-count: auto;
    column-fill: balance;
    column-gap: var(--space-32  );
    column-rule: 1px solid var(--color-border-light);
    column-width: 45ch;
    list-style-position: outside;
    list-style-type: decimal-leading-zero;
    padding-inline: 0;
  
    li {
      line-height: 1.65;
      margin-block-end: var(--space-24);
      margin-inline-start: var(--space-32);
    }
  
    h4 {
      font-size: var(--fs-heading-3);
      text-decoration: none;
      line-height: 1.3;
      font-weight: 700;
      margin-block-start: 0;
    }

    h5 {
      font-size: var(--fs-heading-3);
      line-height: 1.3;
      font-weight: 700;
      margin-block-end: 0;
    }
  
    ul {
      list-style-type: square;
      padding-inline-start: 0;

      li {
        margin-inline-start: var(--space-16);
      }
    }
  }
}

.info-section__intro {
  font-size: var(--fs-heading-2);
  line-height: 1.35;
}

/* ——— Bouton d'action dans un bloc intro ——————————————————————— */

.info-section__intro .btn {
  margin-block-start: var(--space-12);
}

.info-section__intro .btn-full-width {
  margin-block: var(--space-20) var(--space-32);
  margin-inline: 0;
}

/* "Cards" d'information*/

.info-section__card {
  background-color: var(--color-primary-100);
  border: 1px solid var(--color-primary-300);
  border-radius: var(--radius-md);
  /*box-shadow: var(--shadow-border);*/
  margin-block-end: var(--space-8);
  padding: var(--space-16) var(--space-20);
  max-width: 75ch;

  > span {
    color: var(--color-meta-text);
    display: block;
    font-size: var(--fs-smallest);
    letter-spacing: 0.04rem;
    margin-block-end: var(--space-12);
    text-transform: uppercase;
  }

  .info-section__card-title {
    font-size: var(--fs-heading-2);
    line-height: 1;
    margin-block: 0 var(--space-32);
    text-decoration: none;
  }

  p {
    line-height: 1.6;
    max-width: none;
  }
}

.info-section__card + p {
  margin-block-start: var(--space-20);
}

.info-section__card-title {
  font-family: var(--ff-headings);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  margin-block-end: var(--space-8);
  text-transform: uppercase;
}

.info-section__card-details {
  /*color: var(--color-meta-text);*/
  font-size: var(--fs-body);
  margin-block-end: var(--space-16);
}

.info-section__body .info-section__card-price {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-block-end: 0;
}

.info-section__card-tva {
  color: var(--color-meta-text);
  display: block;
  font-size: var(--fs-small);
  margin-block-start: 0;
}

/* ——— Bloc adresse ——————————————————————— */

.info-address {
  display: inline-block;
  font-style: normal;
  font-weight: bold;
  line-height: 1.6;
  margin-block-end: var(--space-16);
}

/* ——— Grille des tutoriels ——————————————————————— */

.tutoriels-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  margin-block-end: var(--space-20);

  @media (width > 560px) {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
}

.tutoriel-card {
  background-color: var(--color-surface-lighter);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  color: inherit;
  display: block;
  padding: var(--space-16) var(--space-20);
  text-decoration: none;
  transition-duration: 150ms;
  transition-property: background-color, border-color;
  transition-timing-function: ease-out;

  &:hover {
    background-color: color-mix(in srgb, var(--color-secondary) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
  }
}

.tutoriel-card__title {
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.45;
  margin-block-end: 0;
}

/* ——— Tableau tarifaire ——————————————————————— */

.tarif-table {
  border-collapse: collapse;
  border-top: 1px solid var(--color-border-light);
  margin-block-end: var(--space-12);
  width: 100%;

  tr {
    border-bottom: 1px solid var(--color-border-light);
  }

  td {
    padding: var(--space-12) var(--space-8) var(--space-12) 0;
    text-align: start;
    vertical-align: middle;
  }

  td:last-child {
    font-weight: 700;
    text-align: end;
    white-space: nowrap;
  }
}

/* ——— Grille des formules de conférences ——————————————————————— */

.conferences-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  margin-block-end: var(--space-20);

  @media (width > 560px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ——— En-tête du relevé de compte ——————————————————————— */

.releve-meta {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-small);
  gap: var(--space-8);
  justify-content: space-between;
  margin-block: var(--space-12) var(--space-8);
}

.releve-meta__period {
  color: var(--color-meta-text);
}

/* ——— Tableau relevé de compte ——————————————————————— */

.releve-table-wrapper {
  margin-block: var(--space-12) var(--space-16);
  overflow-x: auto;
}

.releve-table {
  border-collapse: collapse;
  font-size: var(--fs-small);
  min-width: 540px;
  width: 100%;

  th,
  td {
    border-bottom: 1px solid var(--color-secondary-200);
    padding: var(--space-8) var(--space-12);
    text-align: start;
    vertical-align: top;
  }

  tr:nth-child(even) {
    background-color: var(--color-secondary-100);
  }

  td:nth-child(1) {
    width: 10ch;
  }

  td:nth-child(2) {
    width: 65ch;
  }

  thead th {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
    text-align: end;
    text-transform: uppercase;

    &:first-child,
    &:nth-child(2) {
      text-align: start;
    }
  }

  thead {
    th,
    td {
      border: none;
    }
  }

  td.amount,
  td.balance {
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
  }
}

/* ——— Citation légale ——————————————————————— */

.legal-quote {
  border-left: 3px solid var(--color-border-light);
  line-height: 1.65;
  margin-block: var(--space-12) var(--space-20);
  padding-block: var(--space-4);
  padding-inline: var(--space-16);

  em {
    font-style: normal;
  }
}