/*
 * Composants (design/components.md). Une section par composant, valeurs uniquement issues de tokens.css.
 */

/* ── Icônes ────────────────────────────────────────────── */

.icon {
  flex: none;
}

/* ── Button ────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-touch-min);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.btn--secondary {
  background: var(--color-soft);
  color: var(--color-ink);
}

.btn--inverse {
  background: var(--color-inv);
  color: var(--color-inv-ink);
}

.btn--full {
  width: 100%;
}

.btn:hover {
  opacity: 0.85;
}

.btn:focus-visible {
  border-radius: var(--radius-pill);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* ── IconButton ────────────────────────────────────────── */

.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size-icon-button);
  height: var(--size-icon-button);
  border-radius: var(--radius-pill);
  background: var(--color-soft);
  color: var(--color-ink);
  transition: opacity 0.15s ease;
}

.icon-btn--inv {
  background: var(--color-inv);
  color: var(--color-inv-ink);
}

.icon-btn--inv-soft {
  background: var(--color-inv-soft);
  color: var(--color-inv-ink);
}

.icon-btn--accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.icon-btn:hover {
  opacity: 0.85;
}

.icon-btn:focus-visible {
  border-radius: var(--radius-pill);
}

/* Bascule de thème : l'icône montre l'action (lune = passer en sombre, soleil = passer en clair). */
.theme-toggle .icon-sun,
.theme-toggle[data-state="dark"] .icon-moon {
  display: none;
}

.theme-toggle[data-state="dark"] .icon-sun {
  display: block;
}

/* ── Pill ──────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-soft);
  color: var(--color-ink);
}

.pill--accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.pill__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

/* ── Tag ───────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-soft);
  color: var(--color-ink);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── TechChip ──────────────────────────────────────────── */

.tech-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-soft);
  color: var(--color-ink);
}

.tech-chip--inv {
  background: var(--color-inv-soft);
  color: var(--color-inv-ink);
}

.tech-chip__logo {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

/*
 * Logo mêlant noir et couleurs (Next.js…, ton « dark » de bin/logos.php) : posé sur une pastille claire fixe,
 * pour rester lisible sur les fonds sombres (thème sombre, carte inversée). Les logos entièrement noirs
 * (ton « mono ») n'en ont pas besoin : ils prennent la couleur du texte.
 */
.tech-logo--backdrop {
  padding: 2px;
  border-radius: var(--radius-xs);
  background: var(--color-brand-fg);
}

.tech-chip__mono {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* ── Field ─────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.field__input {
  width: 100%;
  min-height: var(--size-touch-min);
  padding: var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-soft);
  color: var(--color-ink);
}

.field__input::placeholder {
  color: var(--color-muted);
}

.field__input--area {
  resize: vertical;
}

.field__input:focus,
.field__input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.field--error .field__input {
  box-shadow: inset 0 0 0 2px var(--color-danger);
}

.field__error {
  color: var(--color-danger);
}

/* ── ChoiceChips ───────────────────────────────────────── */

.chips {
  border: 0;
  padding: 0;
  min-width: 0;
}

.chips legend {
  margin-bottom: var(--space-2);
}

.chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-soft);
  color: var(--color-ink);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.chip:hover {
  opacity: 0.85;
}

.chip[aria-current="true"],
.chip:has(.chip__input:checked) {
  background: var(--color-inv);
  color: var(--color-inv-ink);
}

/* Le bouton radio reste accessible au clavier mais invisible : c'est la pastille qui le représente. */
.chip__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chip:has(.chip__input:focus-visible) {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* ── Marque ────────────────────────────────────────────── */

.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink);
}

.marque--inv {
  color: var(--color-inv-ink);
}

.marque__symbol {
  flex: none;
}

.marque__bg {
  fill: var(--color-brand-bg);
}

.marque__edge {
  fill: none;
  stroke: var(--color-brand-edge);
}

.marque__accent-line,
.marque__fg-line {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.marque__accent-line {
  stroke: var(--color-accent);
}

.marque__fg-line {
  stroke: var(--color-brand-fg);
}

.marque__cursor {
  fill: var(--color-accent);
  animation: marque-blink 1.1s steps(1) infinite;
}

@keyframes marque-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marque__cursor {
    animation: none;
  }
}

/* ── Header ────────────────────────────────────────────── */

/*
 * Bandeau pleine largeur, collé en haut et fixé pendant le défilement.
 * Fond translucide flouté porté par ::before : un backdrop-filter sur le header lui-même
 * enfermerait le menu mobile (position: fixed) dans le bandeau.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Logo à gauche, liens au centre, actions à droite. */
.site-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--gutter);
}

.site-header__bar > :first-child {
  justify-self: start;
}

.site-header__actions {
  justify-self: end;
}

.site-header__links {
  display: flex;
  gap: var(--space-6);
}

.site-header__link {
  color: var(--color-ink);
}

.site-header__link:hover,
.site-header__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-header__actions > .desktop-only {
  display: contents;
}

@media (max-width: 767px) {
  .site-header__bar {
    grid-template-columns: 1fr auto;
  }

  .site-header__actions > .desktop-only {
    display: none !important;
  }
}

/* Menu mobile plein écran */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-5) var(--gutter) var(--space-8);
  background: var(--color-surface);
  overflow-y: auto;
}

.menu-panel[hidden] {
  display: none;
}

.menu-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--space-4);
}

.menu-panel__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.menu-panel__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

.menu-panel__link[aria-current="page"] {
  background: var(--color-soft);
}

.menu-panel__bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-inline: var(--space-4);
}

.is-menu-open,
.is-menu-open body {
  overflow: hidden;
}

/* ── LangSwitch ────────────────────────────────────────── */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-muted);
}

.lang-switch__link {
  display: inline-grid;
  place-items: center;
  min-width: var(--size-touch-min);
  min-height: var(--size-touch-min);
  color: var(--color-muted);
}

.lang-switch__link.is-active {
  color: var(--color-ink);
}

.lang-switch__link:hover {
  color: var(--color-ink);
}

/* ── PageHeader · SectionHeader ────────────────────────── */

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-2) 0;
}

.page-header .t-body-l {
  max-width: 720px;
}

@media (max-width: 767px) {
  .page-header {
    gap: var(--space-3);
    padding-top: var(--space-8);
  }
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-7) var(--space-2);
}

.section-header__link {
  flex: none;
}

.section-header__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Footer ────────────────────────────────────────────── */

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-8);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.site-footer a:hover {
  color: var(--color-ink);
}

@media (max-width: 767px) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── SectionNav ────────────────────────────────────────── */
/*
 * Navigation entre les sections de l'accueil (components/section-nav.php, assets/js/section-nav.js).
 * ≥ 1520 px : la marge du conteneur (1240 px) suffit. Rail à droite, nom de la section en cours affiché
 *   à droite de son trait, les autres au survol.
 * 1024–1519 px : traits seuls ; au survol ou au focus, le rail s'ouvre en panneau avec tous les noms
 *   (comme la table des matières de Notion). Le conteneur se resserre de 72 px de chaque côté pour les traits.
 * Animation au survol : le fond du panneau se déploie depuis la droite, les traits s'allongent,
 *   puis les noms glissent en place l'un après l'autre (désactivée si prefers-reduced-motion).
 * < 1024 px : pastille flottante en bas, centrée, qui ouvre la liste des sections.
 * Attention : avec la mise à l'échelle de Windows, un écran 1920 px à 150 % ne fait que 1280 px CSS.
 */

/* Hors du flux : le rail et la pastille sont fixés à l'écran ; sans cela, la nav vide compte comme
   un bloc de .page-main et ajoute un écart de section au-dessus du hero. */
.section-nav {
  position: absolute;
}

@media (min-width: 1024px) and (max-width: 1519px) {
  .page:has(.section-nav) .container {
    max-width: min(var(--container-max), calc(100% - 2 * 72px));
  }
}

/* .section-nav devant : plus précis que la remise à zéro ul[role="list"] { padding: 0 } de base.css. */
.section-nav .section-rail {
  --rail-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: fixed;
  top: 50%;
  right: var(--space-4);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  transform: translateY(-50%);
}

/* Fond du panneau : se déploie depuis la droite au survol. */
.section-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: right center;
  transition: opacity 0.2s var(--rail-ease), transform 0.3s var(--rail-ease);
}

.section-rail__link {
  display: flex;
  align-items: center;
  min-height: var(--space-8);
  padding-right: var(--space-1);
  color: var(--color-muted);
  text-decoration: none;
}

.section-rail__dash {
  flex: none;
  width: 20px;
  height: 4px;
  margin-right: 12px; /* trait + marge = 32 px : les noms restent alignés quand le trait s'allonge */
  border-radius: var(--radius-pill);
  background: var(--color-line);
  transition: width 0.3s var(--rail-ease), margin 0.3s var(--rail-ease), background-color 0.2s;
}

.section-rail__link[aria-current] .section-rail__dash {
  width: var(--space-8);
  margin-right: 0;
  background: var(--color-accent);
}

/* Les noms : repliés (largeur 0) au repos, ils glissent en place au survol. */
.section-rail__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: max-width 0.3s var(--rail-ease), margin 0.3s var(--rail-ease), opacity 0.2s, transform 0.3s var(--rail-ease), color 0.15s;
}

.section-rail__link[aria-current] .section-rail__label {
  color: var(--color-ink);
}

.section-rail:is(:hover, :focus-within)::before {
  opacity: 1;
  transform: none;
}

.section-rail:is(:hover, :focus-within) .section-rail__dash {
  width: 24px;
  margin-right: 8px;
}

.section-rail:is(:hover, :focus-within) .section-rail__link[aria-current] .section-rail__dash {
  width: var(--space-8);
  margin-right: 0;
}

.section-rail:is(:hover, :focus-within) .section-rail__label {
  max-width: 12em;
  margin-left: var(--space-3);
  opacity: 1;
  transform: none;
}

/* Les noms arrivent l'un après l'autre. */
.section-rail li:nth-child(2) .section-rail__label { transition-delay: 30ms; }
.section-rail li:nth-child(3) .section-rail__label { transition-delay: 60ms; }
.section-rail li:nth-child(4) .section-rail__label { transition-delay: 90ms; }
.section-rail li:nth-child(5) .section-rail__label { transition-delay: 120ms; }
.section-rail li:nth-child(6) .section-rail__label { transition-delay: 150ms; }
.section-rail li:nth-child(7) .section-rail__label { transition-delay: 180ms; }
.section-rail li:nth-child(n + 8) .section-rail__label { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .section-rail__label {
    transition-delay: 0s !important;
  }
}

/* Lien survolé dans le panneau : trait et nom se renforcent. */
.section-rail__link:is(:hover, :focus-visible) {
  color: var(--color-ink);
}

.section-rail__link:is(:hover, :focus-visible) .section-rail__dash {
  background: var(--color-ink);
}

.section-rail__link[aria-current]:is(:hover, :focus-visible) .section-rail__dash {
  background: var(--color-accent);
}

/* Grand écran : la marge suffit, la section en cours reste nommée même au repos. */
@media (min-width: 1520px) {
  .section-rail__link[aria-current] .section-rail__label {
    max-width: 12em;
    margin-left: var(--space-3);
    opacity: 1;
    transform: none;
  }
}

.section-pill {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  transform: translateX(-50%);
  transition: opacity 0.2s, transform 0.2s;
}

/* Arrivé au pied de page, la pastille s'efface pour ne pas couvrir ses liens. */
.section-nav.is-at-end .section-pill {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--space-4));
}

.section-pill__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-inv);
  color: var(--color-inv-ink);
  box-shadow: var(--shadow-float);
  white-space: nowrap;
  cursor: pointer;
}

.section-pill__button .icon {
  transition: transform 0.2s;
}

.section-pill__button[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.section-pill__dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background: var(--color-accent);
}

.section-nav .section-pill__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}

.section-nav .section-pill__list[hidden] {
  display: none;
}

.section-pill__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  text-decoration: none;
}

.section-pill__link:hover {
  color: var(--color-ink);
}

.section-pill__link[aria-current] {
  background: var(--color-soft);
  color: var(--color-ink);
}

@media (min-width: 1024px) {
  .section-pill {
    display: none;
  }
}

@media (max-width: 1023px) {
  .section-nav .section-rail { /* même précision que la règle d'affichage du rail */
    display: none;
  }

  /* Place sous le dernier contenu pour que la pastille ne le recouvre pas. */
  .page-main:has(.section-nav) {
    padding-bottom: var(--space-16);
  }
}