/* ================================
   Utilities (classes atomiques)
================================ */
	.avatar-wrap.action	{
		
		position: absolute;
		width: 70px;
	}
/* =========================
   List utilities
========================= */

/* Liste sans styles (menus, grilles) */
.list-unstyled {
  margin: 0;
  padding: 0;
}

/* Liste en ligne (nav horizontale, tags) */
.list-inline {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm); /* espace entre les items */
}

/* Liste espacée (ex: contenus éditoriaux) */
.list-spaced {
  margin: 0;
  padding-left: 1.25em; /* indentation pour puces */
}
.list-spaced > li + li {
  margin-top: 0.5em; /* espace vertical entre items */
}


/* =========================
   Layout · Container & Sections
========================= */

/* Container centré, fluide */
.container, .header__inner, .footer__inner {
  max-width: var(--container-mw);
  margin-inline: auto;
  padding-inline:
    max(var(--container-px), env(safe-area-inset-left))
    max(var(--container-px), env(safe-area-inset-right));
}

/* Header/Footer utilisent leur max dédié */
.header__inner { --container-mw: var(--container-header-max); }
.footer__inner { --container-mw: var(--container-footer-max); }

/* Tablette : entre 768px et 1023px => fixe 720px */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --container-mw: 720px;
  }
}

/* Desktop >= 1024px */
@media (min-width: 1025px) {
  :root {
    --container-header-max: 1150px;
    --container-footer-max: 1150px;
    --container-mw: clamp(var(--container-min),
                          calc(100vw - 2 * var(--container-px)),
                          var(--container-max));
  }
}
/* Variantes de container */
.container--narrow { max-width: 800px; }
.container--wide   { max-width: 1400px; }

/* Sections avec rythme vertical */
.section {
  padding-block: clamp(2rem, 1.2rem + 2vw, 4rem);
}
.section--tight { padding-block: clamp(1rem, 0.6rem + 1vw, 2rem); }
.section--loose { padding-block: clamp(3rem, 1.8rem + 3vw, 6rem); }

/* Full-bleed (contenu bord à bord) */
.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* =========================
   Grid (CSS Grid)
========================= */

/* Grille de base : colonnes auto selon une largeur mini */
.grid {
  display: grid;
  gap: var(--gap-2xl);
  grid-template-columns: repeat(
    var(--grid-cols, auto-fit),
    minmax(var(--grid-min, 240px), 1fr)
  );
}

/* Ajusteurs d’écart */
.grid--tight { gap: var(--gap-lg); }
.grid--loose { gap: var(--gap-3xl); }

/* Presets rapides */
.grid--cards  { --grid-min: 280px; }
.grid--thumbs { --grid-min: 160px; }
.grid--wide   { --grid-min: 320px; }


/* =========================
   Flex helpers
========================= */

.flex { display: flex; gap: var(--gap-xl); }
.flex-center { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }


/* =========================
   Spacing utilities
========================= */

.stack > * + * { margin-top: var(--space-4); }
.stack--tight > * + * { margin-top: var(--space-2); }
.stack--loose > * + * { margin-top: var(--space-6); }


/* =========================
   Theming helpers (sections)
========================= */

.section--surface{
  --color-bg: var(--surface);
  --on-bg:    var(--on-surface);
}
.section--inverse{
  --color-bg: var(--surface-inverse);
  --on-bg:    var(--on-surface-inv);
}
:where(.section--surface, .section--inverse){
  background: var(--color-bg);
  color: var(--on-bg);
}


/* =========================
   Buttons
========================= */

.btn{
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  --btn-bd: transparent;
  --btn-radius: 6px;
  --btn-px: 16px;
  --btn-py: 10px;
  --btn-minh: 44px; /* touch target */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: var(--btn-py) var(--btn-px);
  min-height: var(--btn-minh);
  border-radius: var(--btn-radius);

  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);

  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  user-select: none;

  transition:
    var(--trans-bg),
    var(--trans-shadow),
    var(--trans-opacity);
}

@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
}

/* Hover : assombrissement doux (avec fallback) */
.btn:hover{
  background: color-mix(in srgb, var(--btn-bg) 92%, #000 8%);
}
@supports not (color-mix(in srgb, red, blue)) {
  .btn:hover{ filter: brightness(.94); }
}

/* Focus accessible */
.btn:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* État disabled */
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity: .6;
  cursor: not-allowed;
}

/* Variantes */
.btn--secondary{
  --btn-bg: #fff;
  --btn-fg: var(--color-text, #222);
  --btn-bd: var(--color-border, #ddd);
}
.btn--ghost{
  --btn-bg: transparent;
  --btn-fg: var(--color-primary);
  --btn-bd: currentColor;
}
.btn--danger{
  --btn-bg: var(--color-danger, #d50032);
  --btn-fg: #fff;
}

/* Tailles */
.btn--sm{
  --btn-px: 12px; --btn-py: 8px; --btn-minh: 36px;
  font-size: .9rem;
}
.btn--lg{
  --btn-px: 20px; --btn-py: 14px; --btn-minh: 48px;
  font-size: 1.05rem;
}

/* Largeur */
.btn--block{ display: flex; width: 100%; }          /* plein largeur */
.btn--equal{ flex: 1 1 0; min-inline-size: 10ch; }  /* largeurs égales en flex */

/* Bouton style lien (pour <button>) */
.btn--link{
  --btn-bg: transparent;
  --btn-fg: var(--color-link, #0073e6);
  --btn-bd: transparent;

  border: 0; padding: 0; min-height: auto; border-radius: 0;
  text-decoration: underline;
}
.btn--link:hover,
.btn--link:focus{
  text-decoration: none;
}