/**
 * e-Kart.fr — habillage « Paddock » (template enfant de Cassiopeia)
 *
 * Bitume pour la structure, jaune « plaque de numéro » pour l'accent,
 * rouge vibreur réservé au liseré de piste sous l'en-tête et au pied de page.
 */

/* ---------- Polices auto-hébergées ---------- */
@font-face { font-family: "Saira Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/saira-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/saira-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-weight: 800; font-display: swap; src: url("../fonts/saira-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/barlow-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600-normal.woff2") format("woff2"); }

/* ---------- Jetons ---------- */
:root {
  --ek-bitume: #2a2e33;
  --ek-bitume-clair: #3b4148;
  --ek-beton: #eef0f2;
  --ek-papier: #ffffff;
  --ek-encre: #1d2125;
  --ek-gris: #5a6169;
  --ek-filet: #d9dde1;
  --ek-plaque: #ffcf00;
  --ek-vibreur: #d8241b;

  --ek-titre: "Saira Condensed", "Arial Narrow", sans-serif;
  --ek-texte: "Barlow", "Segoe UI", system-ui, sans-serif;

  --ek-kerb: repeating-linear-gradient(90deg, var(--ek-vibreur) 0 28px, var(--ek-papier) 28px 56px);

  --cassiopeia-color-primary: var(--ek-bitume);
  --cassiopeia-color-link: var(--ek-encre);
  --cassiopeia-color-hover: var(--ek-vibreur);
  --cassiopeia-font-family-body: var(--ek-texte);
  --cassiopeia-font-family-headings: var(--ek-titre);
  --link-color: var(--ek-encre);
  --link-color-rgb: 29, 33, 37;
  --link-hover-color: var(--ek-encre);
  --link-hover-color-rgb: 29, 33, 37;
  --body-color: var(--ek-encre);
  --body-bg: var(--ek-beton);
}

/* ---------- Base ---------- */
body {
  background: var(--ek-beton);
  color: var(--ek-encre);
  font-family: var(--ek-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ek-titre);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ek-encre);
}

h1, .h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); font-weight: 800; }
h2, .h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
h3, .h3 { font-size: 1.375rem; }

a {
  color: var(--ek-encre);
  text-decoration-color: var(--ek-plaque);
  text-decoration-thickness: 0.18em;
  text-underline-offset: 0.18em;
}

a:hover, a:focus {
  color: var(--ek-encre);
  text-decoration-color: var(--ek-vibreur);
}

:focus-visible {
  outline: 3px solid var(--ek-plaque);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ek-bitume);
}

::selection { background: var(--ek-plaque); color: var(--ek-encre); }

/* ---------- En-tête ---------- */
.container-header {
  background: var(--ek-bitume);
  background-image: none;
  box-shadow: none;
  border-bottom: 0;
}

/* Liseré vibreur : l'élément signature du site */
.container-header::after {
  content: "";
  display: block;
  height: 7px;
  background: var(--ek-kerb);
}

.container-header .navbar-brand {
  padding: 1.1rem 0 0.4rem;
  margin: 0;
}

.container-header .brand-logo {
  font-family: var(--ek-titre);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--ek-papier);
  text-decoration: none;
}

/* Le nom du site posé sur une plaque jaune, comme un numéro de course */
.container-header .brand-logo span {
  display: inline-block;
  padding: 0.12em 0.4em 0.08em;
  background: var(--ek-plaque);
  color: var(--ek-encre);
  border-radius: 4px;
  transform: skewX(-8deg);
}

.container-header .brand-logo:hover span,
.container-header .brand-logo:focus span {
  background: var(--ek-papier);
}

/* Menu principal */
.container-header .container-nav {
  padding-bottom: 0.25rem;
}

.container-header .mod-menu > li > a,
.container-header .metismenu > li > a {
  font-family: var(--ek-titre);
  font-size: 1.125rem;
  font-weight: 600;
  color: #e6e8ea;
  text-decoration: none;
  padding: 0.55rem 0.15rem;
  border-bottom: 3px solid transparent;
}

.container-header .metismenu > li > a:hover,
.container-header .metismenu > li > a:focus {
  color: var(--ek-papier);
  border-bottom-color: var(--ek-papier);
}

.container-header .metismenu > li.active > a,
.container-header .metismenu > li > a[aria-current="page"] {
  color: var(--ek-papier);
  border-bottom-color: var(--ek-plaque);
}

.container-header .metismenu > li { margin-inline-end: 1.1rem; }
.container-header .metismenu > li::after { display: none; }

.container-header .navbar-toggler {
  color: var(--ek-papier);
  border: 2px solid var(--ek-bitume-clair);
}

/* Fil d'Ariane : discret, sous le menu dans l'ordre de lecture visuel */
.container-header .container-below-top {
  order: 3;
}

.container-header .mod-breadcrumbs {
  margin: 0;
  padding: 0.35rem 0 !important;
  background: transparent;
  font-size: 0.875rem;
  color: #b9bec4;
}

.container-header .mod-breadcrumbs a { color: #e6e8ea; text-decoration-color: rgba(255, 207, 0, .6); }
.container-header .mod-breadcrumbs .active,
.container-header .mod-breadcrumbs .active span { color: #b9bec4; }
.container-header .breadcrumb-item + .breadcrumb-item::before { color: #8a9098; }

/* Mobile : empilement nom du site / menu / fil d'Ariane / liseré */
.container-header {
  display: flex;
  flex-direction: column;
}

.container-header > .grid-child:not(.container-below-top) { order: 1; }
.container-header > .container-nav { order: 2; }
.container-header::after { order: 4; }

/* Les soulignés animés de Cassiopeia font doublon avec la barre jaune */
.container-header .metismenu > li > a::after,
.container-header .metismenu > li > button::before,
.container-header .mod-menu > li::after { display: none !important; }

/* Ordinateur : nom du site et menu sur une seule ligne */
@media (min-width: 992px) {
  /* Même grille que .site-grid de Cassiopeia, pour aligner l'en-tête sur le contenu */
  .container-header {
    display: grid;
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [main-start] minmax(0, calc(4 * 19.875rem + 3em))
      [main-end] minmax(0, 1fr) [full-end];
    column-gap: 1em;
    align-items: end;
  }

  .container-header > .grid-child {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* Nom du site à gauche, menu à droite, dans la même cellule */
  .container-header > .grid-child:not(.container-below-top):not(.container-nav) {
    grid-column: main;
    grid-row: 1;
    justify-self: start;
  }

  .container-header > .container-nav {
    grid-column: main;
    grid-row: 1;
    justify-self: end;
    padding: 0 0 0.85rem 19rem;
  }

  .container-header > .container-below-top {
    grid-column: main;
    grid-row: 2;
  }

  .container-header::after {
    grid-column: full;
    grid-row: 3;
  }

  .container-header .navbar-brand { padding: 1rem 0 0.75rem; }

  .container-header .mod-menu { flex-wrap: wrap; justify-content: flex-end; column-gap: 1.35rem; }
  .container-header .metismenu.mod-menu > .metismenu-item { margin: 0; padding: 0; }
  .container-header .metismenu > li > a { padding: 0.35rem 0 0.3rem; font-size: 1.0625rem; }
}

/* ---------- Bloc recherche (top-a) ---------- */
.container-top-a .top-a.card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.container-top-a .card-body { padding: 1rem 0 0; }

.mod-finder__search { max-width: 32rem; }

.mod-finder__search .form-control {
  border: 2px solid var(--ek-filet);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  background: var(--ek-papier);
}

.mod-finder__search .form-control:focus {
  border-color: var(--ek-bitume);
  box-shadow: none;
}

/* ---------- Boutons ---------- */
.btn-primary {
  --btn-bg: var(--ek-bitume);
  --btn-border-color: var(--ek-bitume);
  --btn-hover-bg: var(--ek-encre);
  --btn-hover-border-color: var(--ek-encre);
  --btn-active-bg: var(--ek-encre);
  background-color: var(--ek-bitume);
  border-color: var(--ek-bitume);
  color: var(--ek-papier);
  font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--ek-encre);
  border-color: var(--ek-encre);
  color: var(--ek-plaque);
}

/* ---------- Colonnes latérales ---------- */
.container-sidebar-left .card,
.container-sidebar-right .card {
  background: var(--ek-papier);
  border: 0;
  border-top: 4px solid var(--ek-bitume);
  border-radius: 0 0 6px 6px;
  box-shadow: none;
}

.container-sidebar-left .card-header,
.container-sidebar-right .card-header {
  background: transparent;
  border: 0;
  padding: 1rem 1.25rem 0;
  font-family: var(--ek-titre);
  font-size: 1.375rem;
  font-weight: 700;
}

/* ---------- Contenu ---------- */
.container-component > main,
.container-component > .main {
  background: var(--ek-papier);
  border-radius: 6px;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}

.container-component .page-header h1 {
  margin-bottom: 1.5rem;
}

/* Titres d'articles dans les listes */
.blog-item .page-header h2,
.com-content-article .page-header h1,
.com-content-article .page-header h2 {
  margin: 0 0 0.5rem;
}

.blog-item .page-header h2 a {
  text-decoration: none;
  background-image: linear-gradient(var(--ek-plaque), var(--ek-plaque));
  background-size: 0 0.28em;
  background-position: 0 92%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease;
}

.blog-item .page-header h2 a:hover,
.blog-item .page-header h2 a:focus {
  background-size: 100% 0.28em;
}

/* Bloc « Détails » ramené à une ligne d'informations */
dl.article-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.25rem;
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  color: var(--ek-gris) !important;
}

dl.article-info .article-info-term {
  display: none;
}

dl.article-info dd {
  margin: 0;
}

dl.article-info [class^="icon-"],
dl.article-info [class*=" icon-"] {
  color: var(--ek-gris);
  opacity: 0.7;
}

/* Étiquettes : petites plaques jaunes */
.tags .badge,
.tags a.btn,
.tags .btn-info,
.tags span.badge {
  background: var(--ek-plaque) !important;
  color: var(--ek-encre) !important;
  border: 0;
  border-radius: 3px;
  font-family: var(--ek-titre);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 0.25em 0.6em 0.2em;
  text-decoration: none;
}

.tags a:hover .badge,
.tags a.badge:hover {
  background: var(--ek-bitume) !important;
  color: var(--ek-papier) !important;
}

/* Corps de texte : largeur de lecture confortable, images libres */
.blog-item .item-content > p,
.blog-item .item-content > ul,
.blog-item .item-content > ol,
.com-content-article__body > p,
.com-content-article__body > ul,
.com-content-article__body > ol {
  max-width: 72ch;
}

.item-content img,
.com-content-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

figcaption, .figure-caption {
  font-size: 0.875rem;
  color: var(--ek-gris);
}

/* Séparation entre les articles de la liste */
.blog-items .blog-item + .blog-item,
.blog-item + .items-row,
.com-content-category-blog__item + .com-content-category-blog__item {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 2px solid var(--ek-beton);
}

.blog-items hr,
.item-separator { display: none; }

/* Pagination */
.pagination .page-link {
  color: var(--ek-encre);
  border-color: var(--ek-filet);
}

.pagination .page-item.active .page-link {
  background: var(--ek-bitume);
  border-color: var(--ek-bitume);
  color: var(--ek-plaque);
}

/* ---------- Galerie Phoca : liste des catégories ----------
 * Le thème « simple » de Phoca superpose les titres aux vignettes (128 px) :
 * les titres longs débordaient sur les catégories voisines. Titre sous l'image. */
.pg-categories-items-box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1.5rem 1.25rem;
  align-items: start;
}

.pg-categories-items-box .pg-category-box {
  margin: 0;
  border: 0;
}

.pg-categories-items-box .pg-category-box-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: none;
}

.pg-categories-items-box .pg-category-box-title {
  position: static;
  width: auto;
  padding: 0.5rem 0 0;
  background: none;
  color: var(--ek-encre);
  font-family: var(--ek-titre);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
}

#phocagallery .pg-categories-items-box .pg-category-box-title a,
.pg-categories-items-box .pg-category-box-title a {
  display: inline;
  color: var(--ek-encre);
  text-decoration: none;
}

.pg-categories-items-box .pg-category-box-title a:hover,
.pg-categories-items-box .pg-category-box-title a:focus {
  text-decoration: underline;
  text-decoration-color: var(--ek-plaque);
}

.pg-categories-items-box .pg-category-box-title svg { display: none; }

.pg-categories-items-box .pg-category-box-count {
  font-family: var(--ek-texte);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--ek-gris);
}

/* ---------- Pied de page ---------- */
.container-footer {
  background: var(--ek-bitume);
  background-image: none;
  color: #c9cdd2;
  margin-top: 3rem;
}

.container-footer::before {
  content: "";
  display: block;
  height: 7px;
  background: var(--ek-kerb);
}

.container-footer a { color: var(--ek-papier); }

/* Bouton « retour en haut » */
.back-to-top-link {
  background: var(--ek-bitume);
  color: var(--ek-plaque);
  border: 2px solid var(--ek-plaque);
}

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  /* Bouton du menu sur la même ligne que le nom du site */
  .container-header { position: relative; }
  .container-header .container-nav,
  .container-header .navbar { position: static; width: 100%; }

  .container-header .navbar-toggler {
    position: absolute;
    top: 1.45rem;
    right: 1rem;
  }

  .container-header .container-nav { padding-top: 0; padding-bottom: 0; }
  .container-header .container-nav nav { margin-top: 0; }
  .container-header .navbar-collapse,
  .container-header .navbar-collapse .mod-menu { width: 100%; }

  .container-header .metismenu.mod-menu > .metismenu-item { margin: 0; padding: 0; display: block; }

  .container-header .metismenu.mod-menu > .metismenu-item > a {
    display: block;
    padding: 0.7rem 0 0.7rem 0.75rem;
    border-bottom: 1px solid var(--ek-bitume-clair);
    border-left: 4px solid transparent;
    text-decoration: none;
  }

  .container-header .metismenu.mod-menu > .metismenu-item.active > a {
    border-bottom-color: var(--ek-bitume-clair);
    border-left-color: var(--ek-plaque);
  }

  .container-header .navbar-brand { padding: 0.9rem 4rem 0.6rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-item .page-header h2 a { transition: none; }
}