/*
 * Catalogue AREKO — mobile d'abord (spec 03b §6, lot C4d2).
 * Couleurs : uniquement les variables de areko-tokens.css. Le jaune n'est jamais une couleur
 * de texte. Zones tactiles ≥ 44 px. Aucune animation sous reduced-motion. Aucune ressource externe.
 *
 * Titres : Barlow Condensed (SIL OFL 1.1, voir assets/fonts/OFL.txt), hébergée sur le site en
 * attendant la police officielle. Texte courant : police du thème.
 */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}

.areko-catalog {
  --areko-gap: 16px;
  --areko-radius: 12px;
  --areko-tap: 44px;
  --areko-title-font: "Barlow Condensed", "Arial Narrow", sans-serif;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--areko-gap) 32px;
  color: var(--areko-ink);
  font-size: 1rem;
  line-height: 1.5;
}
.areko-catalog *,
.areko-catalog *::before,
.areko-catalog *::after { box-sizing: border-box; }
.areko-catalog a { color: inherit; }
.areko-catalog :focus-visible { outline: 3px solid var(--areko-ink); outline-offset: 2px; }
.areko-catalog .screen-reader-text:not(:focus):not(:active) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.areko-icon { flex: none; width: 20px; height: 20px; }

/* Boutons ------------------------------------------------------------- */
.areko-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--areko-tap); min-width: var(--areko-tap); padding: 0 16px;
  border: 2px solid transparent; border-radius: var(--areko-radius);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2;
}
.areko-btn--primary { background: var(--areko-red); color: var(--areko-surface); }
.areko-btn--primary:hover { filter: brightness(.92); }
.areko-btn--secondary { background: var(--areko-surface); color: var(--areko-ink); border-color: var(--areko-border); }
.areko-btn--secondary:hover { border-color: var(--areko-ink); }
.areko-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--areko-tap); min-height: var(--areko-tap);
  background: transparent; border: 0; color: inherit; cursor: pointer;
}

/* Fil d'Ariane : replié sur mobile -------------------------------------- */
.areko-breadcrumb { padding: 12px 0 4px; font-size: .9375rem; }
.areko-breadcrumb__back { display: inline-flex; align-items: center; min-height: var(--areko-tap); text-decoration: none; font-weight: 600; }
.areko-icon--back { transform: rotate(180deg); }
.areko-breadcrumb__list, .areko-breadcrumb__path { margin: 0; padding: 0; list-style: none; }
.areko-breadcrumb__list { display: none; }
.areko-breadcrumb__more { margin: 0 0 4px; }
.areko-breadcrumb__more > summary { display: flex; align-items: center; min-height: var(--areko-tap); cursor: pointer; color: var(--areko-muted); font-size: .9375rem; }
.areko-breadcrumb__path { padding: 0 0 8px; }
.areko-breadcrumb__item { display: inline; }
.areko-breadcrumb__item + .areko-breadcrumb__item::before { content: "›"; margin: 0 8px; color: var(--areko-muted); }

/* Recherche ------------------------------------------------------------ */
.areko-search { display: flex; gap: 8px; margin: 8px 0 12px; }
.areko-search__input {
  flex: 1 1 auto; min-width: 0; min-height: var(--areko-tap);
  padding: 0 14px; font: inherit; font-size: 1rem; /* 16 px : pas de zoom automatique sur mobile */
  color: var(--areko-ink); background: var(--areko-surface);
  border: 2px solid var(--areko-border); border-radius: var(--areko-radius);
}
.areko-search__input:focus { border-color: var(--areko-ink); }
.areko-search__submit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Domaines : puces horizontales défilantes (mobile et tablette) ----------- */
.areko-domains { margin: 0 calc(var(--areko-gap) * -1) 8px; }
.areko-chips {
  display: flex; gap: 8px; margin: 0; padding: 4px var(--areko-gap); list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.areko-chips::-webkit-scrollbar { display: none; }
.areko-chips__item { flex: none; scroll-snap-align: start; }
.areko-chip {
  display: inline-flex; align-items: center; min-height: var(--areko-tap); padding: 0 16px;
  border: 2px solid var(--areko-border); border-radius: 999px; background: var(--areko-surface);
  text-decoration: none; white-space: nowrap; font-weight: 500;
}
.areko-chip:hover { border-color: var(--areko-ink); }
.areko-chip.is-current { background: var(--areko-red); border-color: var(--areko-red); color: var(--areko-surface); }
.areko-chip__count { margin-left: 4px; opacity: .8; }
.areko-chips--sub .areko-chip { min-height: 40px; font-size: .9375rem; }

/* Mise en page : barre d'outils sur mobile, colonne latérale sur bureau --- */
.areko-layout { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.areko-main { display: contents; }
.areko-filtercol { flex: 1 1 auto; }
.areko-sortrow { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.areko-sort__label { font-size: .9375rem; color: var(--areko-muted); }
.areko-sort__select {
  min-height: var(--areko-tap); max-width: 11em; padding: 0 10px; font: inherit; font-size: 1rem;
  color: var(--areko-ink); background: var(--areko-surface);
  border: 2px solid var(--areko-border); border-radius: var(--areko-radius);
}
.areko-sort__apply { display: inline-flex; }
.areko-viewtoggle { display: inline-flex; border: 2px solid var(--areko-border); border-radius: var(--areko-radius); overflow: hidden; }
.areko-view {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--areko-tap); min-height: calc(var(--areko-tap) - 4px); color: var(--areko-muted); text-decoration: none;
}
.areko-view.is-current { background: var(--areko-ink); color: var(--areko-surface); }
.areko-results { flex: 0 0 100%; min-height: 40vh; /* évite le saut de mise en page pendant le chargement */ }
.areko-results[aria-busy="true"] { opacity: .55; transition: opacity .15s; }

/* Filtres : bouton + panneau ------------------------------------------- */
.areko-filters > summary { list-style: none; cursor: pointer; }
.areko-filters > summary::-webkit-details-marker { display: none; }
.areko-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em;
  padding: 0 6px; border-radius: 999px; background: var(--areko-yellow); color: var(--areko-ink); /* jaune en fond uniquement */
  font-size: .875rem; font-weight: 700;
}
.areko-badge.is-empty { display: none; }
.areko-filters__panel { margin-top: 12px; padding: 16px; border: 1px solid var(--areko-border); border-radius: var(--areko-radius); background: var(--areko-surface); }
.areko-filters__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.areko-filters__title { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-family: var(--areko-title-font); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.areko-filters__reset { display: inline-flex; align-items: center; min-height: var(--areko-tap); font-weight: 600; font-size: .9375rem; color: var(--areko-red); }
.areko-field { margin: 0 0 12px; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--areko-border); }
.areko-field:last-of-type { border-bottom: 0; }
/* Sections repliables (<details>) : même geste que les branches de l'arbre */
.areko-section__title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--areko-tap);
  list-style: none; cursor: pointer;
  font-family: var(--areko-title-font); font-size: 1.0625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.areko-section__title::-webkit-details-marker { display: none; }
.areko-section__chevron { flex: none; color: var(--areko-muted); transition: transform .15s; transform: rotate(90deg); }
.areko-section:not([open]) .areko-section__chevron { transform: rotate(0); }
.areko-section__body { padding-bottom: 4px; }
.areko-option { display: flex; align-items: center; gap: 12px; min-height: var(--areko-tap); cursor: pointer; }
.areko-option input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--areko-red); }
.areko-filters__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--areko-border); }
.areko-filters__reset-end { flex: 1 1 auto; }
.areko-seeresults { display: none; }
.is-enhanced .areko-apply { display: none; }

/* Arbre de catégories : chevron, retrait avec ligne guide, compteurs ------- */
.areko-tree, .areko-tree__children { margin: 0; padding: 0; list-style: none; }
.areko-tree__row { display: flex; align-items: center; gap: 2px; min-height: var(--areko-tap); }
.areko-tree__toggle, .areko-tree__spacer { flex: none; width: var(--areko-tap); height: var(--areko-tap); }
.areko-tree__toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; color: var(--areko-muted); cursor: pointer; }
.areko-tree__chevron { transition: transform .15s; }
.areko-tree__toggle[aria-expanded="true"] .areko-tree__chevron { transform: rotate(90deg); }
.areko-tree__label { display: flex; flex: 1; align-items: center; gap: 10px; min-height: var(--areko-tap); cursor: pointer; }
.areko-tree__label input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--areko-red); }
.areko-tree__count { flex: none; min-width: 2em; padding: 1px 8px; border-radius: 999px; background: var(--areko-border); color: var(--areko-ink); font-size: .8125rem; font-weight: 600; text-align: center; }
.areko-tree__children { margin-left: 15px; padding-left: 14px; border-left: 2px solid var(--areko-border); } /* ligne guide */
.areko-tree__children[hidden] { display: none; }
.areko-tree__node > .areko-tree__row .areko-tree__label { font-weight: 500; }
.areko-tree__children .areko-tree__label { font-size: .9375rem; font-weight: 400; }

/* Budget : champs Min / Max et curseur à deux poignées ---------------------- */
.areko-budget { margin-top: 10px; }
.areko-budget.is-disabled { opacity: .5; }
.areko-budget__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 2px; font-weight: 600; }
.areko-budget__hint { font-size: .8125rem; font-weight: 400; color: var(--areko-muted); }
.areko-slider { position: relative; height: var(--areko-tap); margin: 2px 0; }
.areko-slider[hidden] { display: none; }
.areko-slider::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--areko-border); }
.areko-slider__fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--areko-red); }
.areko-slider__input {
  position: absolute; left: 0; top: 0; width: 100%; height: var(--areko-tap); margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.areko-slider__input::-webkit-slider-runnable-track { height: var(--areko-tap); background: none; }
.areko-slider__input::-moz-range-track { height: var(--areko-tap); background: none; }
.areko-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; width: var(--areko-tap); height: var(--areko-tap);
  border: 11px solid transparent; border-radius: 50%; background: var(--areko-red); background-clip: padding-box; box-shadow: 0 0 0 0 transparent; cursor: grab; /* poignée 22 px, zone tactile 44 px */
}
.areko-slider__input::-moz-range-thumb {
  pointer-events: auto; width: 22px; height: 22px; border: 11px solid transparent; border-radius: 50%; background: var(--areko-red); background-clip: padding-box; cursor: grab;
}
.areko-slider__input:focus-visible { outline: none; }
.areko-slider__input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--areko-ink); outline-offset: -8px; }
.areko-slider__input:focus-visible::-moz-range-thumb { outline: 3px solid var(--areko-ink); outline-offset: -8px; }
.areko-range { display: flex; align-items: flex-end; gap: 8px; }
.areko-range label { display: flex; flex: 1; flex-direction: column; gap: 4px; font-size: .875rem; color: var(--areko-muted); }
.areko-range input { width: 100%; min-height: var(--areko-tap); padding: 0 10px; font: inherit; font-size: 1rem; color: var(--areko-ink); border: 2px solid var(--areko-border); border-radius: var(--areko-radius); }
.areko-range input:disabled { background: var(--areko-border); }
.areko-range__sep { padding-bottom: 12px; color: var(--areko-muted); }

/* Résultats et filtres actifs -------------------------------------------- */
.areko-results__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 8px; }
.areko-results__title { margin: 0; font-family: var(--areko-title-font); font-size: 1.5rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; }
.areko-results__title:focus { outline: none; }
.areko-activebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--areko-border); border-radius: var(--areko-radius); background: var(--areko-surface); }
.areko-activebar__label { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; color: var(--areko-muted); }
.areko-active { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.areko-tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--areko-tap); padding: 0 12px;
  border: 2px solid var(--areko-ink); border-radius: 999px; text-decoration: none; font-size: .9375rem;
}
.areko-tag:hover { background: var(--areko-ink); color: var(--areko-surface); }
.areko-tag__x { width: 16px; height: 16px; }
.areko-reset { display: inline-flex; align-items: center; min-height: var(--areko-tap); font-weight: 600; color: var(--areko-red); }

/* Grille : 1 colonne mobile, 2 tablette, 3-4 bureau ; liste sur demande ------ */
.areko-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.areko-card { margin: 0; }
.areko-card__inner {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--areko-border); border-radius: var(--areko-radius); background: var(--areko-surface); overflow: hidden;
}
.areko-card__inner:hover { border-color: var(--areko-ink); }
.areko-card__visual { position: relative; }
.areko-card__media { display: block; aspect-ratio: 16 / 9; background: var(--areko-border); overflow: hidden; }
.areko-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.areko-card__img--empty { display: flex; align-items: center; justify-content: center; color: var(--areko-muted); }
.areko-card__placeholder { width: 48px; height: 48px; }
.areko-badge-cat, .areko-badge-level {
  position: absolute; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 24px); min-height: 28px; padding: 2px 10px; border-radius: 999px;
  font-size: .8125rem; font-weight: 700; line-height: 1.2; text-decoration: none;
}
.areko-badge-cat { left: 10px; background: var(--areko-surface); color: var(--areko-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.areko-badge-cat:hover { background: var(--areko-ink); color: var(--areko-surface); }
.areko-badge-level { right: 10px; background: var(--areko-ink); color: var(--areko-surface); }
.areko-badge-level .areko-icon { width: 14px; height: 14px; }
.areko-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.areko-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.areko-meta { display: inline-flex; align-items: center; gap: 6px; }
.areko-meta__count { color: var(--areko-muted); }
.areko-card__title { margin: 0; font-family: var(--areko-title-font); font-size: 1.375rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: .01em; }
.areko-card__title a { text-decoration: none; }
.areko-card__title a::after { content: ""; position: absolute; inset: 0; } /* toute la carte est cliquable (sous le badge de catégorie) */
.areko-card__title a:focus-visible { outline-offset: -3px; }
.areko-card__desc {
  display: -webkit-box; margin: 0; overflow: hidden; color: var(--areko-muted); font-size: .9375rem;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3;
}
.areko-card__goals { display: none; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.areko-card__goals li { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; }
.areko-card__goals .areko-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--areko-red); }
.areko-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.areko-card__price { margin: 0; font-size: 1.0625rem; }
.areko-card__regular { margin-right: 4px; color: var(--areko-muted); }
.areko-card__cta { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--areko-red); }
.areko-card__cert { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .875rem; color: var(--areko-muted); }

/* Vue liste (un seul niveau de colonnes, visuel à gauche dès la tablette) ----- */
.areko-grid.is-list { grid-template-columns: 1fr; }
.areko-grid.is-list .areko-card__goals { display: block; }
@media (min-width: 600px) {
  .areko-grid.is-list .areko-card__inner { flex-direction: row; }
  .areko-grid.is-list .areko-card__visual { flex: 0 0 38%; max-width: 340px; }
  .areko-grid.is-list .areko-card__media { height: 100%; aspect-ratio: auto; min-height: 160px; }
  .areko-grid.is-list .areko-card__desc { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* Cartes de catégories : page générale et sous-catégories ----------------- */
.areko-categories__intro { margin: 8px 0 12px; color: var(--areko-muted); }
.areko-categories__search { max-width: 640px; margin-bottom: 20px; }
.areko-categories__all { display: flex; justify-content: center; margin: 24px 0 0; }
.areko-categories__empty { padding: 16px 0; color: var(--areko-muted); }
.areko-domains-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.areko-domain { margin: 0; }
.areko-domain__inner {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--areko-border); border-radius: var(--areko-radius); background: var(--areko-surface); overflow: hidden;
}
.areko-domain__inner:hover { border-color: var(--areko-ink); }
.areko-domain__media { display: block; aspect-ratio: 16 / 9; background: var(--areko-border); overflow: hidden; }
.areko-domain__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.areko-domain__title { margin: 0; font-family: var(--areko-title-font); font-size: 1.5rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; }
.areko-domain__title a { text-decoration: none; }
.areko-domain__title a::after { content: ""; position: absolute; inset: 0; } /* toute la carte est cliquable (sous les liens de sous-catégories) */
.areko-domain__title a:focus-visible { outline-offset: -3px; }
.areko-domain__desc {
  display: -webkit-box; margin: 0; overflow: hidden; color: var(--areko-muted); font-size: .9375rem;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2;
}
.areko-domain__count { margin: 0; font-weight: 600; }
.areko-domain__subs { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.areko-domain__subs a { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: var(--areko-tap); }
.areko-domain__more a { color: var(--areko-muted); text-decoration: none; font-weight: 600; }
.areko-domain__cta {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; min-height: var(--areko-tap); margin-top: auto; padding: 0 16px;
  border-radius: var(--areko-radius); background: var(--areko-red); color: var(--areko-surface); font-weight: 700;
}

/* En-tête d'une page de catégorie ------------------------------------------ */
.areko-cathead { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 8px 0 20px; }
.areko-cathead__title { margin: 0; font-family: var(--areko-title-font); font-size: 2.25rem; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.areko-cathead__media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--areko-radius); background: var(--areko-border); }
.areko-cathead__media .areko-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.areko-cathead__desc { margin: 0 0 8px; color: var(--areko-muted); }
.areko-cathead__desc p { margin: 0 0 8px; }
.areko-cathead__count { margin: 0; font-weight: 700; }
.areko-cathead__all { margin: 4px 0 0; }
.areko-cathead__all a { display: inline-flex; align-items: center; gap: 4px; min-height: var(--areko-tap); font-weight: 700; color: var(--areko-red); }
.areko-section-title { margin: 28px 0 12px; font-family: var(--areko-title-font); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }

/* Arbre latéral en mode navigation (page d'une catégorie) -------------------- */
.areko-tree__link { display: flex; flex: 1; align-items: center; min-height: var(--areko-tap); padding-left: 4px; text-decoration: none; }
.areko-tree__link:hover { text-decoration: underline; }
.areko-tree__row.is-current { border-left: 3px solid var(--areko-red); }
.areko-tree__row.is-current .areko-tree__link { font-weight: 700; color: var(--areko-red); }

/* Pagination ------------------------------------------------------------ */
.areko-pagination { margin: 24px 0 0; }
.areko-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.areko-page {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: var(--areko-tap); min-height: var(--areko-tap); padding: 0 12px;
  border: 2px solid var(--areko-border); border-radius: var(--areko-radius); text-decoration: none; font-weight: 600;
}
a.areko-page:hover { border-color: var(--areko-ink); }
.areko-page.is-current { background: var(--areko-ink); border-color: var(--areko-ink); color: var(--areko-surface); }
.areko-page--gap { border-color: transparent; }

/* État vide ------------------------------------------------------------- */
.areko-empty { padding: 8px 0 16px; }
.areko-empty__suggestions { margin: 0 0 16px; padding-left: 20px; }
.areko-empty__suggestions li { margin: 0; }
.areko-empty__suggestions a { display: inline-flex; align-items: center; min-height: var(--areko-tap); }
.areko-empty__latest { margin: 24px 0 12px; font-family: var(--areko-title-font); font-size: 1.25rem; text-transform: uppercase; }

/* Mobile et tablette avec JavaScript : tiroir de filtres (bottom sheet) --- */
@media (max-width: 1023.98px) {
  .is-enhanced .areko-filters[open] .areko-filters__panel {
    position: fixed; z-index: 100001; left: 0; right: 0; bottom: 0; margin: 0;
    max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
    border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .25);
  }
  .is-enhanced .areko-seeresults { display: inline-flex; flex: 1 1 100%; }
  .is-enhanced .areko-filters__actions { position: sticky; bottom: -16px; margin: 8px -16px -16px; padding: 12px 16px; background: var(--areko-surface); border-top: 1px solid var(--areko-border); }
  .is-enhanced .areko-filters:not([open]) .areko-filters__head { display: none; }
  .areko-backdrop { position: fixed; z-index: 100000; inset: 0; background: rgba(0, 0, 0, .5); }
  .areko-backdrop[hidden] { display: none; }
  html.areko-lock { overflow: hidden; }
  .is-enhanced .areko-sort__apply { display: none; }
}
@media (max-width: 599.98px) {
  .areko-sort__label { display: none; }
}
@media (min-width: 1024px) {
  .areko-filters__head .areko-iconbtn { display: none; }
  .is-enhanced .areko-sort__apply { display: none; }
  .areko-domains { display: none; } /* l'arbre latéral remplace les puces */
}

/* Tablette ------------------------------------------------------------- */
@media (min-width: 600px) {
  .areko-domains-grid { grid-template-columns: repeat(2, 1fr); }
  .areko-grid { grid-template-columns: repeat(2, 1fr); }
  .areko-grid.is-list { grid-template-columns: 1fr; }
  .areko-breadcrumb__back, .areko-breadcrumb__more { display: none; }
  .areko-breadcrumb__list { display: block; }
  .areko-search__submit span { position: static; width: auto; height: auto; clip: auto; }
  .areko-domains { margin: 0 0 8px; }
  .areko-chips { padding-left: 0; padding-right: 0; -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; overflow: visible; }
}

/* Bureau : barre latérale de 280 px collante, 3 colonnes puis 4 ---------- */
@media (min-width: 1024px) {
  .areko-domains-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .areko-cathead { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "title media" "rest media"; column-gap: 32px; align-items: start; }
  .areko-cathead__title { grid-area: title; }
  .areko-cathead__media { grid-area: media; grid-row: 1 / span 2; }
  .areko-cathead__rest { grid-area: rest; }
  .areko-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 8px 32px; }
  .areko-main { display: block; grid-column: 2; grid-row: 1 / span 2; }
  .areko-filtercol { grid-column: 1; grid-row: 1; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
  .areko-filters > summary { display: none; }
  .areko-filters__panel { margin-top: 0; }
  .areko-sortrow { justify-content: flex-end; margin: 0 0 4px; }
  .areko-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .areko-grid.is-list { grid-template-columns: 1fr; }
}
@media (min-width: 1440px) {
  .areko-grid { grid-template-columns: repeat(4, 1fr); }
  .areko-grid.is-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .areko-catalog * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Suggestions de recherche en direct (lot C5) */
.areko-search { position: relative; }
.areko-suggest {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px 0; list-style: none;
  background: var(--areko-surface); border: 1px solid var(--areko-ink); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  max-height: 60vh; overflow-y: auto;
}
.areko-suggest[hidden] { display: none; }
.areko-suggest li { margin: 0; }
.areko-suggest a { display: block; min-height: 44px; padding: 8px 12px; color: var(--areko-ink); text-decoration: none; }
.areko-suggest__title { display: block; font-weight: 600; }
.areko-suggest__path { display: block; font-size: .875em; color: var(--areko-muted); }
.areko-suggest li.is-active a, .areko-suggest a:hover { background: #f0f0f1; }
.areko-suggest a:focus-visible { outline-offset: -3px; }