/* ─── Page guide des formats ─────────────────────────────────────── */

    /* Layout 2 colonnes (texte / visuel) sur desktop, calé sur les autres pages */
    .rnk-format-split {
      display: grid;
      gap: var(--rnk-spacing-xl);
      align-items: start;
    }
    @media (min-width: 64rem) {
      .rnk-format-split {
        grid-template-columns: 1fr 1fr;
        gap: var(--rnk-spacing-2xl);
      }
    }
    .rnk-format-split--reverse > :first-child { order: 1; }
    @media (min-width: 64rem) {
      .rnk-format-split--reverse > :first-child { order: 2; }
      .rnk-format-split--reverse > :last-child  { order: 1; }
    }

    /* Ancre offset pour ne pas masquer le titre sous le header sticky */
    .rnk-format-block { scroll-margin-top: calc(var(--rnk-chrome-h, 4.5rem) + 4rem); }

    /* Variante d'icône : ton chaud, comme le screenshot */
    .rnk-feature__icon--accent {
      background-color: var(--rnk-color-accent-soft);
      color: var(--rnk-color-accent);
    }

    /* Bloc "Bon à savoir" */
    .rnk-tip {
      margin-top: var(--rnk-spacing-lg);
      padding: var(--rnk-spacing-md) var(--rnk-spacing-lg);
      background-color: var(--rnk-color-bg-alt);
      border-left: 3px solid var(--rnk-color-accent);
      border-radius: var(--rnk-radius-md);
    }
    .rnk-tip__title {
      font-family: var(--rnk-font-body);
      font-size: 0.875rem;
      font-weight: var(--rnk-fw-medium);
      margin: 0 0 var(--rnk-spacing-xxs);
      display: flex; align-items: center; gap: 0.5rem;
    }
    .rnk-tip__icon {
      display: inline-flex;
      flex: 0 0 1.125rem;
      width: 1.125rem;
      height: 1.125rem;
      color: var(--rnk-color-accent);
    }
    .rnk-tip__icon svg {
      width: 100%;
      height: 100%;
    }
    .rnk-tip__desc {
      margin: 0;
      font-size: 0.875rem;
      color: var(--rnk-color-text-muted);
      line-height: 1.6;
    }

    /* Visuel placeholder côté droit */
    .rnk-format-visual {
      aspect-ratio: 4 / 3;
      border-radius: var(--rnk-radius-lg);
      background-color: var(--rnk-color-bg-alt);
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--rnk-color-text-soft);
      font-size: 0.8125rem;
      text-align: center;
      padding: var(--rnk-spacing-md);
      box-shadow: var(--rnk-shadow-sm);
    }
    .rnk-format-visual--has-image {
      color: transparent;
      box-shadow: var(--rnk-shadow-md);
      display: block;
      overflow: hidden;
      padding: 0;
    }

    /* Sommaire haut de page */
    .rnk-format-tocbar {
      position: sticky;
      top: var(--rnk-chrome-h, 4.5rem);
      z-index: var(--rnk-z-dropdown);
      background-color: var(--rnk-color-bg);
      border-bottom: 1px solid var(--rnk-color-border);
      padding-block: var(--rnk-spacing-sm);
    }
    .rnk-format-toc {
      display: flex;
      flex-wrap: nowrap;
      gap: var(--rnk-spacing-xs);
      list-style: none;
      padding: 0;
      margin: 0;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .rnk-format-toc::-webkit-scrollbar { display: none; }
    .rnk-format-toc li { flex: 0 0 auto; }
    .rnk-format-toc a {
      display: inline-block;
      padding: 0.5rem 0.875rem;
      border: 1px solid var(--rnk-color-border-strong);
      border-radius: var(--rnk-radius-pill);
      font-size: 0.8125rem;
      color: var(--rnk-color-text);
      background-color: var(--rnk-color-surface);
      text-decoration: none;
      white-space: nowrap;
      transition: background-color var(--rnk-transition-fast),
                  border-color var(--rnk-transition-fast),
                  color var(--rnk-transition-fast);
    }
    .rnk-format-toc a:hover {
      border-color: var(--rnk-color-accent);
      color: var(--rnk-color-accent);
      background-color: var(--rnk-color-accent-soft);
    }
    @media (min-width: 48rem) {
      .rnk-format-toc { flex-wrap: wrap; overflow-x: visible; }
    }

    /* Petit titre de bloc, registre éditorial */
    .rnk-format-block__title {
      margin: 0 0 var(--rnk-spacing-md);
    }
    .rnk-format-block__intro {
      color: var(--rnk-color-text-muted);
      max-width: 38rem;
      margin: 0 0 var(--rnk-spacing-lg);
    }

    /* ─── Comparateur rapide (haut de page) ─────────────────────────── */
    .rnk-format-compare__head {
      max-width: 44rem;
      margin: 0 0 var(--rnk-spacing-lg);
    }
    .rnk-format-compare__head h2 { margin: 0 0 var(--rnk-spacing-xs); }
    .rnk-format-compare__head p {
      margin: 0;
      color: var(--rnk-color-text-muted);
    }

    /* Table desktop : une ligne par usage */
    .rnk-format-compare-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background-color: var(--rnk-color-surface);
      border: 1px solid var(--rnk-color-border);
      border-radius: var(--rnk-radius-lg);
      overflow: hidden;
      box-shadow: var(--rnk-shadow-sm);
    }
    .rnk-format-compare-table caption {
      position: absolute;
      width: 1px; height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    .rnk-format-compare-table thead {
      background-color: var(--rnk-color-bg-alt);
    }
    .rnk-format-compare-table th {
      text-align: left;
      font-family: var(--rnk-font-body);
      font-size: 0.75rem;
      font-weight: var(--rnk-fw-medium);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--rnk-color-text-muted);
      padding: var(--rnk-spacing-sm) var(--rnk-spacing-md);
      border-bottom: 1px solid var(--rnk-color-border);
    }
    .rnk-format-compare-table td {
      padding: var(--rnk-spacing-md);
      border-bottom: 1px solid var(--rnk-color-border);
      vertical-align: middle;
      font-size: 0.9375rem;
    }
    .rnk-format-compare-table tr:last-child td { border-bottom: 0; }
    .rnk-format-compare-table tr:hover td { background-color: var(--rnk-color-bg-alt); }

    .rnk-format-compare__usage {
      display: flex;
      align-items: center;
      gap: var(--rnk-spacing-sm);
      font-weight: var(--rnk-fw-medium);
      color: var(--rnk-color-text);
    }
    .rnk-format-compare__usage-icon {
      flex-shrink: 0;
      width: 2.25rem; height: 2.25rem;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--rnk-radius-md);
      background-color: var(--rnk-color-accent-soft);
      color: var(--rnk-color-accent);
    }

    .rnk-format-compare__format {
      color: var(--rnk-color-text);
    }
    .rnk-format-compare__format a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px dotted var(--rnk-color-border-strong);
      transition: color var(--rnk-transition-fast),
                  border-color var(--rnk-transition-fast);
    }
    .rnk-format-compare__format a:hover {
      color: var(--rnk-color-accent);
      border-bottom-color: var(--rnk-color-accent);
    }

    .rnk-format-compare__cta {
      text-align: right;
      width: 1%;
      white-space: nowrap;
    }

    /* Masquer la table sur mobile, afficher la version cards */
    .rnk-format-compare-cards { display: grid; gap: var(--rnk-spacing-sm); }
    .rnk-format-compare-table-wrap { display: none; }

    @media (min-width: 48rem) {
      .rnk-format-compare-cards { display: none; }
      .rnk-format-compare-table-wrap { display: block; }
    }

    /* Cards mobile */
    .rnk-format-compare-card {
      background-color: var(--rnk-color-surface);
      border: 1px solid var(--rnk-color-border);
      border-radius: var(--rnk-radius-lg);
      padding: var(--rnk-spacing-md);
      box-shadow: var(--rnk-shadow-sm);
      display: grid;
      gap: var(--rnk-spacing-sm);
    }
    .rnk-format-compare-card__usage {
      display: flex;
      align-items: center;
      gap: var(--rnk-spacing-sm);
    }
    .rnk-format-compare-card__usage-label {
      font-family: var(--rnk-font-body);
      font-size: 0.6875rem;
      font-weight: var(--rnk-fw-medium);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--rnk-color-text-muted);
      margin: 0 0 0.125rem;
    }
    .rnk-format-compare-card__usage-text {
      font-weight: var(--rnk-fw-medium);
      color: var(--rnk-color-text);
      margin: 0;
      line-height: 1.3;
    }
    .rnk-format-compare-card__arrow {
      display: flex;
      align-items: center;
      gap: var(--rnk-spacing-xs);
      color: var(--rnk-color-text-muted);
      font-size: 0.8125rem;
    }
    .rnk-format-compare-card__arrow svg {
      flex-shrink: 0;
      color: var(--rnk-color-accent);
    }
    .rnk-format-compare-card__format {
      font-family: var(--rnk-font-body);
      font-size: 0.9375rem;
      font-weight: var(--rnk-fw-medium);
      color: var(--rnk-color-text);
      margin: 0;
    }
    .rnk-format-compare-card__format a {
      color: inherit;
      text-decoration: underline;
      text-decoration-color: var(--rnk-color-border-strong);
      text-underline-offset: 3px;
    }
    .rnk-format-compare-card__format a:hover {
      color: var(--rnk-color-accent);
      text-decoration-color: var(--rnk-color-accent);
    }
    .rnk-format-compare-card .rnk-button {
      justify-self: start;
    }