/*
  Composants ASMA utilisés par le site.
  Le bouton reprend asma-ds/components/button/button.css ; les autres composants
  suivent leurs specs (components/<nom>/<nom>-component-spec.md) et les maquettes Figma.
*/

/* ==== Icon ==== */
.icon { width: 1em; height: 1em; flex-shrink: 0; }
.icon-20 .icon, .icon-20 { width: 20px; height: 20px; }

/* ==== Button (asma-ds/components/button/button.css) ==== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--spacing-component-xs);
  border: none; border-radius: var(--radius-control);
  font-family: var(--font-family-scale-body); font-weight: var(--font-weight-scale-semibold);
  font-size: var(--font-size-label); line-height: var(--line-height-label);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn--sm { padding: var(--spacing-component-xs) var(--spacing-component-sm); }
.btn--md { padding: var(--spacing-component-sm) var(--spacing-component-md); }
.btn--lg { padding: var(--spacing-component-md) var(--spacing-component-lg); }
.btn--primary { background: var(--color-action-primary); color: var(--color-text-on-brand); }
.btn--primary:hover:not(:disabled) { background: var(--color-action-primary-hover); }
.btn--primary:active:not(:disabled) { background: var(--color-action-primary-active); }
.btn--outlined { background: var(--color-action-secondary); color: var(--color-text-primary); border: var(--border-scale-thin) solid var(--color-border-default); }
.btn--outlined:hover:not(:disabled) { background: var(--color-action-secondary-hover); border-color: var(--color-border-default); }
.btn--outlined:active:not(:disabled) { background: var(--color-action-secondary-active); border-color: var(--color-border-strong); }
.btn--ghost { background: transparent; color: var(--color-text-primary); }
.btn--ghost:hover:not(:disabled) { background: var(--color-action-ghost-hover); }
.btn--ghost:active:not(:disabled) { background: var(--color-action-ghost-active); }
.btn--icon-only { padding: var(--spacing-component-sm); aspect-ratio: 1 / 1; }
/* Icon-only compact (28 px, bouton « copier » du footer) */
.btn--icon-only.btn--xs { padding: 6px; }
.btn--icon-only .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.btn:focus-visible { outline: var(--border-scale-medium) solid var(--color-border-focus); outline-offset: 2px; }
.btn__icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.btn__icon .icon { width: 100%; height: 100%; }
.btn__icon--caret { transition: transform var(--motion-duration-scale-sm) var(--motion-easing-scale-standard); }
[aria-expanded="true"] > .btn__icon--caret { transform: rotate(180deg); }

/* ==== Icon link (réseaux sociaux) ==== */
.icon-link { display: inline-flex; color: var(--color-icon-primary); border-radius: var(--radius-control); }
.icon-link .icon { width: 24px; height: 24px; }
.icon-link--xl .icon { width: 32px; height: 32px; }
.icon-link:hover { color: var(--color-icon-brand); }

/* ==== Link ==== */
.link { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px; }
.link:hover { text-decoration-thickness: 2px; }
.link-plain { text-decoration: none; }
.link-plain:hover { text-decoration: underline; }

/* ==== Breadcrumb ==== */
.breadcrumb ol { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-component-xs); list-style: none; padding: 0; }
.breadcrumb li { display: flex; gap: var(--spacing-component-xs); color: var(--color-text-secondary); }
.breadcrumb li + li::before { content: "/"; color: var(--color-text-tertiary); }

/* ==== Tag ==== */
.tag {
  display: inline-flex; align-items: center; gap: var(--spacing-component-2xs);
  padding: var(--spacing-component-2xs) var(--spacing-component-xs);
  border-radius: var(--radius-pill);
  background: var(--color-action-neutral); color: var(--color-text-primary);
  font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm);
  white-space: nowrap;
}
.tag--md { font-size: var(--font-size-body-md); line-height: var(--line-height-body-md); }
.tag--brand { background: var(--color-action-primary); color: var(--color-text-on-brand); }
.tag--info { background: var(--color-feedback-info-background); color: var(--color-feedback-info-text); }
.tag--success { background: var(--color-feedback-success-background); color: var(--color-feedback-success-text); }
.tags { display: flex; flex-wrap: wrap; gap: var(--spacing-component-xs); }
.dot { width: 8px; height: 8px; margin: 2px; border-radius: var(--radius-pill); background: var(--color-feedback-success-icon); }

/* ==== Avatar ==== */
.avatar { border-radius: var(--radius-pill); object-fit: cover; background: var(--color-background-sunken); flex-shrink: 0; }
.avatar--lg { width: 40px; height: 40px; }
.avatar--xl { width: 80px; height: 80px; }

/* ==== Blockquote (Accent) ==== */
.blockquote {
  padding: var(--spacing-component-xs) 0 var(--spacing-component-xs) var(--spacing-component-md);
  border-left: var(--border-scale-medium) solid var(--color-action-primary);
  font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg);
}

/* ==== Alert (Warning) ==== */
.alert {
  display: flex; gap: var(--spacing-component-xs); align-items: flex-start;
  padding: var(--spacing-component-sm);
  border: var(--border-scale-thin) solid var(--color-feedback-warning-border);
  border-radius: var(--radius-control);
  background: var(--color-feedback-warning-background); color: var(--color-feedback-warning-text);
  font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm);
}
.alert > .icon { width: 20px; height: 20px; color: var(--color-feedback-warning-icon); }

/* ==== Timeline (vertical) ==== */
.timeline { list-style: none; padding: 0; }
.timeline-item { display: grid; grid-template-columns: 16px 1fr; column-gap: var(--spacing-component-sm); }
.timeline-item__rail { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-component-2xs); padding-top: 2px; }
.timeline-item__marker {
  width: 12px; height: 12px; flex-shrink: 0; border-radius: var(--radius-pill);
  background: var(--color-background-elevated); border: var(--border-scale-medium) solid var(--color-border-strong);
}
.timeline-item__connector { width: 2px; flex: 1; background: var(--color-border-default); }
.timeline-item:last-child .timeline-item__connector { display: none; }
.timeline-item--current .timeline-item__marker { background: var(--color-action-primary); border-color: var(--color-action-primary); }
.timeline-item__content { display: flex; flex-direction: column; gap: var(--spacing-component-2xs); padding-bottom: var(--spacing-component-lg); min-width: 0; }
.timeline-item__content > .t-body-md { color: var(--color-text-secondary); }
.timeline-item__logo { width: 40px; height: 40px; margin-bottom: var(--spacing-component-xs); }

/* ==== Progress linéaire ==== */
.progress { display: block; width: 120px; height: 8px; flex-shrink: 0; border-radius: var(--radius-scale-2xs); background: var(--color-action-neutral); overflow: hidden; }
.progress__fill { display: block; height: 100%; border-radius: inherit; background: var(--color-action-primary); }

/* ==== Switchers (Theme / Lang) — variante Motion=Tension ====
   Spec : asma-ds components/theme-switcher, lang-switcher, segmented-control ; foundations.yaml → motion.tension.
   L'état sélectionné est porté par un Indicator opaque placé dans une Tension-layer (aria-hidden, filtre
   #asma-tension) SOUS les cellules ; les cellules sont transparentes. Texte, icônes et focus ne sont jamais filtrés. */
.switcher {
  position: relative; display: inline-flex; gap: var(--spacing-component-2xs); padding: var(--spacing-component-2xs);
  border: none; border-radius: var(--radius-card); background: var(--color-action-secondary-active);
  flex-shrink: 0;
  transition: box-shadow var(--motion-duration-scale-sm) var(--motion-easing-scale-standard);
}
button.switcher { cursor: pointer; }
/* Hover : contour 1px Border/default autour de la Track, rien d'autre ne change (n'anime jamais l'Indicator) */
.switcher:hover { box-shadow: inset 0 0 0 var(--border-scale-thin) var(--color-border-default); }
.switcher__cell {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--radius-control);
  font-size: var(--font-size-body-xs); line-height: var(--line-height-body-xs); color: var(--color-text-tertiary);
  transition: color var(--motion-duration-scale-sm) var(--motion-easing-scale-standard);
}
.switcher__cell .icon { width: 12px; height: 12px; color: var(--color-icon-secondary); transition: color var(--motion-duration-scale-sm) var(--motion-easing-scale-standard); }
.switcher__cell.is-active { color: var(--color-text-primary); }
a.switcher__cell { text-decoration: none; }
a.switcher__cell:hover { color: var(--color-text-primary); }
.switcher--theme .switcher__cell--light .icon { color: var(--color-icon-primary); }
[data-theme="dark"] .switcher--theme .switcher__cell--light .icon { color: var(--color-icon-secondary); }
[data-theme="dark"] .switcher--theme .switcher__cell--dark .icon { color: var(--color-icon-primary); }

.tension-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tension-layer { position: absolute; inset: var(--spacing-component-2xs); pointer-events: none; filter: url(#asma-tension); }
/* Position gauche : left 0 / right = cellule + gap ; position droite : l'inverse */
.tension-indicator, .tension-drop {
  position: absolute; top: 0; bottom: 0; left: 0; right: calc(20px + var(--spacing-component-2xs));
  background: var(--color-background-elevated); border-radius: var(--radius-control);
}
.tension-drop.is-right,
[data-theme="dark"] .switcher--theme .tension-indicator,
:root[lang="en"] .switcher--lang .tension-indicator { left: calc(20px + var(--spacing-component-2xs)); right: 0; }
/* Ancienne position forcée sans transition (point de départ de l'animation de langue au chargement) */
.switcher.at-left .tension-indicator { left: 0; right: calc(20px + var(--spacing-component-2xs)); transition: none; }
.switcher.at-right .tension-indicator { left: calc(20px + var(--spacing-component-2xs)); right: 0; transition: none; }
/* Bord d'attaque : Duration/sm + Easing/spring ; bord de fuite : Duration/md + Easing/standard */
.switcher.is-moving-right .tension-indicator {
  transition: left var(--motion-duration-scale-md) var(--motion-easing-scale-standard), right var(--motion-duration-scale-sm) var(--motion-easing-scale-spring);
}
.switcher.is-moving-left .tension-indicator {
  transition: left var(--motion-duration-scale-sm) var(--motion-easing-scale-spring), right var(--motion-duration-scale-md) var(--motion-easing-scale-standard);
}
/* Drop : copie sur l'ancienne position, se contracte et se détache (Duration/md + Easing/accelerate) */
.tension-drop { animation: tension-drop var(--motion-duration-scale-md) var(--motion-easing-scale-accelerate) forwards; }
@keyframes tension-drop { 0% { transform: scale(1); } 55% { transform: scale(0.55, 0.7); } 100% { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) {
  .switcher .tension-indicator { transition: none !important; }
  .tension-drop { display: none; }
}

/* ==== Menu item ==== */
.menu { display: flex; flex-direction: column; }
.menu-item {
  display: flex; align-items: center; padding: var(--spacing-component-xs);
  border-radius: var(--radius-control); text-decoration: none;
  font-size: var(--font-size-body-md); line-height: var(--line-height-body-md);
}
.menu-item:hover { background: var(--color-action-ghost-hover); }
.menu-item:active { background: var(--color-action-ghost-active); }
.menu-item[aria-current="page"] { font-weight: var(--font-weight-scale-semibold); background: var(--color-action-ghost-hover); }

/* ==== Panel (subtle) — carte de fond « Background/subtle » ==== */
.panel-subtle { background: var(--color-background-subtle); border-radius: var(--radius-card); }

/* ==== Node (diagramme de workflow) ==== */
.node {
  width: 240px; max-width: 100%;
  background: var(--color-background-elevated);
  border: var(--border-scale-thin) solid var(--color-border-default); border-radius: var(--radius-card);
}
.node__header {
  display: flex; align-items: center; gap: var(--spacing-component-xs);
  padding: var(--spacing-component-xs) var(--spacing-component-sm);
  background: var(--color-background-subtle); border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}
.node__header .icon { width: 20px; height: 20px; color: var(--color-icon-primary); }
.node__body { padding: var(--spacing-component-sm); color: var(--color-text-secondary); list-style-type: none; }

/* ==== Toast (retour « copié ») ==== */
.toast {
  position: fixed; left: 50%; bottom: var(--spacing-section-md); z-index: 60; transform: translateX(-50%);
  padding: var(--spacing-component-sm) var(--spacing-component-md); border-radius: var(--radius-control);
  background: var(--color-background-inverse); color: var(--color-text-inverse);
  font-size: var(--font-size-body-md); line-height: var(--line-height-body-md);
}
.progress__fill--40 { width: 40%; }
.progress__fill--60 { width: 60%; }
.progress__fill--80 { width: 80%; }
.progress__fill--100 { width: 100%; }
.timeline-item__tags { padding-top: var(--spacing-component-2xs); }

/* ==== Retour de copie dans le bouton (icône copier → coche, libellé « Copié ») ==== */
.btn__icon--swap { position: relative; }
.btn__icon--swap > span { position: absolute; inset: 0; display: inline-flex; transition: transform var(--motion-duration-scale-sm) var(--motion-easing-scale-spring), opacity var(--motion-duration-scale-sm) var(--motion-easing-scale-standard); }
.btn__icon--swap .icon { width: 100%; height: 100%; }
.btn__icon--swap .btn__icon-done { opacity: 0; transform: scale(0.4); }
.is-done .btn__icon--swap .btn__icon-default { opacity: 0; transform: scale(0.4); }
.is-done .btn__icon--swap .btn__icon-done { opacity: 1; transform: scale(1); }