/* ============================================================
   Site 2026 — Stylebook — CSS responsive partagé
   Convention de breakpoints (documentée sur variables.html) :
   Mobile ≤430px · Tablette ≥768px · Desktop ≥992px
   Le chrome (sidebar, TOC, recherche) bascule en dessous de 992px.
   ============================================================ */

/* --- Décalage des ancres pour ne pas les faire disparaître sous le header sticky ---
   Valeur fixe (mesurée : header réel ≈ 59px, padding 12px 32px inline, non fluide
   malgré --spacing-padding-block documenté sur variables.html) + une marge de confort. */
:target {
  scroll-margin-block-start: 80px;
}

/* --- Espacement standard au-dessus de chaque section de contenu (5 pages) --- */
.site-section {
  padding-top: 72px;
}

/* --- Bandeau de titre de section (icône + h2), 5 pages --- */
.site-h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--color-secondary);
}
.site-h2-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-icon-badge-bg);
  color: var(--color-primary);
}

/* --- Pastille de code inline (variables.html, components.html, atoms.html) --- */
.site-code-pill {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.875em;
  background: var(--color-bg-code);
  padding: 2px 6px;
  border-radius: 5px;
}
/* --- Variante accentuée (variables.html — encarts « Familles fluides ») --- */
.site-code-pill--accent {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.875em;
  background: oklch(89% 0.039 268);
  padding: 2px 6px;
  border-radius: 5px;
}

/* --- Paragraphe d'intro de section (5 pages) --- */
.site-section-intro {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-grey-700);
  margin: 14px 0 0;
  max-width: 68ch;
}
/* --- Variante à marge resserrée (variables.html, components.html) --- */
.site-section-intro--tight {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-grey-700);
  margin: 8px 0 0;
  max-width: 68ch;
}

/* --- Ligne d'en-tête de bloc (titre + lien), atoms.html + molecules.html --- */
.site-block-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Bouton "Copier le code" des démos (molecules.html) --- */
.site-copy-code-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-grey-100);
  border-radius: 999px;
  background: oklch(99% 0 0);
  color: var(--color-grey-600);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
@media (hover: hover) {
  .site-copy-code-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-secondary);
  }
}

/* --- Boutons de copie HTML/CSS/JSON des cartes de démo (atoms.html) --- */
.site-copy-btn {
  padding: 4px 8px;
  border: 1px solid var(--color-grey-100);
  border-radius: var(--border-radius-pill);
  background: var(--color-white);
  color: var(--color-grey-600);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
@media (hover: hover) {
  .site-copy-btn:hover {
    border-color: var(--color-marine-blue-500);
    color: var(--color-marine-blue-800);
  }
}

/* --- Lien d'évitement clavier : masqué hors focus, révélé au Tab --- */
.site-skip-link {
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: var(--border-radius-btn-reg);
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: 600;
  transition: top 0.2s ease;
}
.site-skip-link:focus {
  top: 8px;
}

.site-overlay {
  display: none;
}

@media (max-width: 991px) {
  /* --- Sidebar en tiroir --- */
  .site-sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 70 !important;
  }
  .site-sidebar.is-open {
    transform: translateX(0);
  }

  /* --- Voile derrière le tiroir --- */
  .site-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: oklch(23% 0 0 / 0.45);
    z-index: 65;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .site-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* --- Bouton hamburger --- */
  .site-hamburger {
    display: inline-flex !important;
  }

  /* --- Colonne principale : plus de marge réservée à la sidebar --- */
  .site-main {
    margin-left: 0 !important;
  }

  /* --- Grille contenu + TOC : une seule colonne --- */
  .site-content-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  /* --- TOC desktop masqué, remplacé par le menu déroulant --- */
  .site-toc {
    display: none !important;
  }
  .site-toc-dropdown {
    display: block !important;
  }

  /* --- Recherche : icône déclenchante, champ en overlay --- */
  .site-search-field {
    display: none;
  }
  .site-search-field.is-open {
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    left: 66px !important;
    right: 16px !important;
    width: auto !important;
    padding: 12px 16px;
    background: oklch(98.4% 0.002 264 / 0.98);
    backdrop-filter: blur(12px);
    z-index: 80;
  }
  .site-search-field.is-open .site-search-field-icon {
    left: 27px !important;
  }
  .site-search-field.is-open .site-search-field-close {
    display: flex !important;
    right: 27px !important;
  }
  .site-search-field.is-open .site-search-field-input {
    padding-right: 32px !important;
  }
  .site-search-icon-btn {
    display: inline-flex !important;
  }

  /* --- Liens secondaires du topbar (redondants avec le tiroir) --- */
  .site-topbar-link {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .site-hamburger {
    display: none !important;
  }
  .site-toc-dropdown {
    display: none !important;
  }
  .site-search-icon-btn {
    display: none !important;
  }
}

/* --- Section "Utiliser les tokens" (Accueil) : schéma en colonne, blocs centrés --- */
/* Breakpoint dédié à 1080px, distinct du reste du chrome (992px) */
@media (max-width: 1079px) {
  .site-token-flow {
    flex-direction: column !important;
    align-items: center !important;
  }
  .site-token-flow > div {
    width: fit-content !important;
    max-width: 100%;
  }
  .site-token-flow-arrow {
    align-self: center;
    transform: rotate(90deg);
  }

  /* --- Section "Bonnes pratiques" (Accueil) : 1 colonne, groupée par paire (bonne + mauvaise pratique) --- */
  .site-practices-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .site-practices-grid > *:nth-child(2n):not(:last-child) {
    margin-bottom: 22px;
  }

  /* --- Stat cards (intro Variables) : 1 colonne --- */
  .site-statcards-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Hiérarchie des tokens (Variables) : schéma en colonne, blocs centrés --- */
  .site-hierarchy-flow {
    grid-template-columns: 1fr !important;
    justify-items: center;
  }
  .site-hierarchy-flow-block {
    width: fit-content !important;
    max-width: 100%;
  }
  .site-hierarchy-flow-arrow {
    justify-content: center;
    transform: rotate(90deg);
  }

  /* --- Familles fluides (Variables) : 1 colonne --- */
  .site-sizefamilies-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Familles sémantiques — le décalage (Variables) : 1 colonne --- */
  .site-spacingfamilies-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Bonnes pratiques (Composants) : 1 colonne, même traitement que l'Accueil --- */
  .site-componentpractices-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Icons (Atomes) : les 2 blocs (tailles / code) en colonne --- */
  .site-iconsizes-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Composants — Section "Container" : chaque démo garde sa largeur mais son contenu (nom + description) défile horizontalement au lieu d'être tronqué --- */
  .site-container-demo {
    overflow-x: auto !important;
  }
  .site-container-demo > span:nth-child(2) {
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* --- Variables — Section "Layout & conteneurs" : chaque démo garde sa largeur mais son contenu ne se tronque/replie plus, il défile horizontalement --- */
  .site-layoutcontainer-demo {
    overflow-x: auto !important;
  }
  .site-layoutcontainer-demo button {
    white-space: nowrap !important;
  }

  /* --- Primitives — taille réelle (Variables) : écart réduit entre les 3 colonnes de chaque ligne, barre bornée pour garder la même marge interne que le bloc --- */
  .site-primitives-row {
    gap: 8px !important;
  }
  .site-primitives-bar {
    max-width: 100%;
  }

  /* --- Échelle de base (Variables) : même traitement que "Primitives — taille réelle" --- */
  .site-scale-row {
    gap: 8px !important;
  }
  .site-scale-bar {
    max-width: 100%;
  }

  /* --- Typographie (Variables) : échelle de type + espacements de lettres — chaque ligne garde ses 3 colonnes (tag / exemple / noms de tokens) et défile horizontalement au lieu d'écraser la colonne centrale --- */
  .site-typescale-wrap {
    overflow-x: auto !important;
  }
  .site-typerow {
    grid-template-columns: 88px 340px 300px !important;
    width: max-content;
    min-width: 100%;
  }
  .site-typerow button {
    white-space: nowrap !important;
  }

  /* --- Bordures & rayons (Variables) : blocs Épaisseurs / Rayons en colonne ; items du bloc Rayons en grille 3 colonnes x 2 rangées --- */
  .site-bordures-grid {
    grid-template-columns: 1fr !important;
  }
  .site-radii-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    justify-items: center;
  }

  /* --- Breakpoints (Variables) : 1 colonne --- */
  .site-breakpoints-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Tokens sémantiques (Variables) : lignes du tableau repliées en carte empilée pour éviter le retour à la ligne --- */
  .site-semantic-header {
    display: none !important;
  }
  .site-semantic-legend {
    display: block !important;
  }
  .site-semantic-row {
    grid-template-columns: 30px 1fr !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 3px !important;
    column-gap: 12px !important;
  }
  .site-semantic-swatch {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
  }
  .site-semantic-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .site-semantic-alias {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  .site-semantic-role {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  /* --- Paddings fluides (Variables) : lignes du tableau repliées en carte empilée --- */
  .site-paddings-legend {
    display: block !important;
  }
  .site-paddings-header {
    display: none !important;
  }
  .site-paddings-row {
    grid-template-columns: 1fr !important;
    row-gap: 3px !important;
  }
  .site-paddings-name,
  .site-paddings-value,
  .site-paddings-usage {
    grid-column: 1 !important;
  }

  /* --- Tokens structurels (Variables) : lignes du tableau repliées en carte empilée --- */
  .site-structural-legend {
    display: block !important;
  }
  .site-structural-header {
    display: none !important;
  }
  .site-structural-row {
    grid-template-columns: 1fr !important;
    row-gap: 3px !important;
  }
  .site-structural-name,
  .site-structural-value,
  .site-structural-role {
    grid-column: 1 !important;
    white-space: normal !important;
  }

  /* --- Dark mode readiness (Variables) : lignes du tableau repliées en carte empilée --- */
  .site-darkmode-legend {
    display: block !important;
  }
  .site-darkmode-header {
    display: none !important;
  }
  .site-darkmode-row {
    grid-template-columns: 30px 1fr !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 3px !important;
    column-gap: 12px !important;
  }
  .site-darkmode-swatch {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
  }
  .site-darkmode-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .site-darkmode-alias {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  .site-darkmode-role {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
}

/* --- Composants — Section "Page & layout" : les 2 blocs (Anatomie / code) en colonne sous 768px --- */
@media (max-width: 767px) {
  .site-pagelayout-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Accueil — Pagination : sur la 1ère page il n'y a pas de "Précédent",
     le span vide qui le remplace ne doit pas laisser un espace vide en mobile --- */
  .site-indexpagination-grid {
    grid-template-columns: 1fr !important;
  }
  .site-indexpagination-grid > span:first-child {
    display: none !important;
  }
}

/* --- Composants — Section "Page & layout", tableau Règle/Classe/Pourquoi : scroll horizontal sous 1080px pour garder chaque ligne sur une seule ligne --- */
@media (max-width: 1079px) {
  .site-pagerules-wrap {
    overflow-x: auto !important;
  }
  .site-pagerules-row {
    grid-template-columns: 260px 170px 420px !important;
    width: max-content;
    min-width: 100%;
  }
  .site-pagerules-row span {
    white-space: nowrap !important;
  }

  /* --- Composants — Section "Card", tableau Règle/Pourquoi de ".card--featured" : scroll horizontal pour garder chaque ligne sur une seule ligne --- */
  .site-cardrules-wrap {
    overflow-x: auto !important;
  }
  .site-cardrules-row {
    grid-template-columns: 340px 520px !important;
    width: max-content;
    min-width: 100%;
  }
  .site-cardrules-row span {
    white-space: nowrap !important;
  }
}

/* --- Composants — Section "Header", aperçu live : encart d'étiquette + aperçu regroupés dans un seul scroll horizontal sous 1280px --- */
@media (max-width: 1279px) {
  .site-headerpreview-wrap {
    overflow-x: auto !important;
  }
  .site-headerpreview-inner {
    width: max-content;
    min-width: 100%;
  }
  .site-headerpreview-label {
    width: 100%;
  }
  .site-headerpreview-label span {
    white-space: nowrap !important;
  }
  .site-headerpreview-row {
    width: max-content !important;
    gap: 24px;
  }
  .site-headerpreview-row span {
    white-space: nowrap !important;
  }

  /* --- Composants — Section "Card", ".card — défaut" : les 2 blocs (aperçu / anatomie) en colonne, sans toucher à l'aspect de la carte --- */
  .site-carddefault-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Composants — Section "Footer", aperçu live : même traitement que le Header (scroll horizontal unifié) --- */
  .site-footerpreview-wrap {
    overflow-x: auto !important;
  }
  .site-footerpreview-inner {
    width: max-content;
    min-width: 100%;
  }
  .site-footerpreview-row {
    grid-template-columns: repeat(4, 160px) !important;
  }
  .site-footerpreview-row span {
    white-space: nowrap !important;
  }
}

/* --- Variables — Section "Primitives — taille réelle" : largeur de la barre --primitive-3xl réduite en mobile (≤430px, convention du site) --- */
@media (max-width: 430px) {
  .site-primitives-row:nth-child(2) .site-primitives-bar {
    width: 4.75rem !important;
    max-width: 4.75rem !important;
  }

  /* --- Composants — Section "Container" : largeurs des démos élargies en mobile pur pour rester lisibles --- */
  .site-container-demo:nth-child(2) { /* .container-max */
    width: 94% !important;
  }
  .site-container-demo:nth-child(3) { /* .container */
    width: 88% !important;
  }
  .site-container-demo:nth-child(4) { /* .container-narrow */
    width: 82% !important;
  }

  /* --- Variables — Section "Layout & conteneurs" : largeurs des démos élargies en mobile pur, même méthode que Container (Composants) --- */
  .site-layoutcontainer-row:nth-child(2) .site-layoutcontainer-demo { /* --layout-content-max */
    width: 94% !important;
  }
  .site-layoutcontainer-row:nth-child(3) .site-layoutcontainer-demo { /* --layout-content-wide */
    width: 88% !important;
  }
  .site-layoutcontainer-row:nth-child(4) .site-layoutcontainer-demo { /* --layout-content-85 */
    width: 82% !important;
  }
  .site-layoutcontainer-row:nth-child(5) .site-layoutcontainer-demo { /* --layout-content-narrow */
    width: 76% !important;
  }

  /* --- Composants — .card--horizontal : repli en colonne (media pleine largeur, le séparateur du lien "Voir" passe du bord gauche au bord haut) --- */
  .site-cardh {
    flex-direction: column !important;
  }
  .site-cardh-media {
    width: 100% !important;
  }
  .site-cardh-action {
    border-inline-start: 0 !important;
    border-block-start: var(--border-width-xxs) solid var(--color-border-default) !important;
    padding-block: 12px;
  }
}

/* --- Respect de prefers-reduced-motion : coupe le défilement lissé et les
   transitions du tiroir latéral / voile pour les utilisateurs qui le demandent.
   Le scrollIntoView() JS suit le scroll-behavior CSS, donc il est couvert ici. --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  .site-sidebar,
  .site-overlay,
  .site-skip-link {
    transition: none !important;
  }
}