/* These font-faces are here to make fonts work if the Ghost instance is installed in a subdirectory */
/* ===== Submenu pills — palette par thème (override minimal) ===== */

/* Clair : pills grisées par défaut */
:root {
  --hub-pill-bg: rgba(0,0,0,.1);              /* gris clair */
  --hub-pill-border: rgba(0,0,0,.25);          /* gris très clair */
  --hub-pill-text: rgba(17,24,39,.75);            /* gris foncé */
  --hub-pill-shadow: 0 1px 2px rgba(0,0,0,.05);

  --hub-pill-hover-bg: rgba(0,0,0,.2);        /* blanc au hover */
  --hub-pill-hover-border: rgba(0,0,0,1);    /* gris + marqué */
  --hub-pill-hover-shadow: 0 8px 24px rgba(0,0,0,.6);

  --hub-pill-active-bg: rgba(0,0,0,.14);
  --hub-pill-active-shadow: inset 0 2px 6px rgba(0,0,0,.35);

  /* accent (garde ta couleur si tu en as défini une ailleurs) */
  --hub-accent: #2563eb;
  --hub-accent-soft: rgba(37,99,235,.12);
}
/* Forcer le texte au noir au survol en clair */
@media (prefers-color-scheme: light){
  .hub-subnav .m-submenu--hub a.m-recent-article:hover{
    color:#111;
  }
}

/* Sombre : pills plus claires que la barre, pour trancher sans “flash” */
html.dark,
:root[data-theme="dark"]{
	--hub-pill-bg: rgba(255,255,255,.2);     /* + clair que le bg header sombre */
	--hub-pill-border: rgba(255,255,255,.4); /* gris 1/4 */
	--hub-pill-text: rgba(255,255,255,.85);
	--hub-pill-shadow: 0 2px 8px rgba(255,255,255,.6);

	--hub-pill-hover-bg: rgba(255,255,255,.25);
	--hub-pill-hover-border: rgba(255,255,255,.8); /* blanc quasi plein */
	--hub-pill-hover-shadow: 0 12px 28px rgba(255,255,255,.65);

	--hub-pill-active-bg: rgba(255,255,255,.28);
	--hub-pill-active-shadow: inset 0 2px 8px rgba(255,255,255,.55);

	--hub-accent-soft: rgba(37,99,235,.22);
}

/* Sous-menu principal */
.m-submenu--hub {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 0.5rem 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  border-top: 1px solid #ddd;
  transition: all 0.3s ease;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
}

/* Sous-menu ouvert */
.m-submenu--hub.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Structure interne du sous-menu */
.m-submenu-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Conteneur de cartes */
.m-submenu-section > div {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

/* Carte de sous-menu */
.m-recent-article {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.3rem;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.m-recent-article:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Image dans la carte */
.m-recent-article__picture {
  width: 100%;
  margin-bottom: 0.75rem;
}

.m-recent-article__picture img {
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Flèche ▼ du menu */
.nav-item.has-submenu > a .submenu-arrow {
  transition: transform 0.3s ease;
  display: inline-block;
}

/* Flèche retournée quand ouvert */
.nav-item.has-submenu.open > a .submenu-arrow {
  transform: rotate(180deg);
}


/* Mobile (écrans < 768px) */
@media (max-width: 767px) {
  .m-submenu-section > div {
    grid-template-columns: 1fr;
  }

  .m-recent-article {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 0.75rem;
  }

  .m-recent-article__picture {
    display: none; /* Pas d'image sur mobile */
  }
}

/* Tablette (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .m-submenu-section > div {
    grid-template-columns: repeat(2, 1fr);
  }
}

.m-submenu--hub {
  padding: 0.5rem 0;
  margin: 0;
  background: #ccc; /* Fond légèrement gris */
}
.m-submenu--hub .m-recent-article {
  width: max-content;
  padding: 0.5rem 2rem;
  background: #f9f9f9; /* Var fallback */
}
@media only screen and (min-width: 48rem) {
    .m-submenu.m-nav__left li {
        margin-right: 0px;
    }
}









/* --- Sous-menus des hubs : occuper toute la grille --- */



/* Sous-menus des hubs : sans l-wrapper */
.hub-subnav .m-submenu--hub {
  position: absolute;            /* si ton thème positionne le dropdown en absolu */
  left: 0; right: 0; top: 100%;
  width: 100%;
  z-index: 50;                    /* ajuste si nécessaire */
  padding: .75rem 0;
}

/* Conteneur interne : gère le centrage et la largeur max */
.hub-subnav .m-submenu--hub .m-submenu-section {
  max-width: var(--submenu-width, 1200px);
  margin: 0 auto;                 /* centre horizontalement */
  padding: 0 20px;                /* gutter comme l'ancien l-wrapper */
}

/* La liste : grille fluide en colonnes */
.hub-subnav .m-submenu--hub .m-submenu-section > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .5rem 1.25rem;
  width: 100%;
}

/* Liens lisibles (évite le texte vertical/break-all hérités) */
.hub-subnav .m-submenu--hub a {
  writing-mode: horizontal-tb;
  word-break: normal;
  overflow-wrap: normal;
  white-space: nowrap;            /* passe à normal si tu veux autoriser les retours */
  display: block;
  padding: .4rem .6rem;
}

.m-submenu--hub {
    padding: 0.5rem 0;
    margin: 0;
    background: #ccc;
}
.m-submenu--hub {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 0.5rem 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    border-top: 1px solid #ddd;
    transition: all 0.3s 
ease;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
}
@media only screen and (min-width: 48rem) {
    .m-submenu--hub {
        background-color: var(--background-color);
        border-top: 1px solid var(--secondary-border-color);
        box-shadow: 0 60px 60px rgba(0, 0, 0, var(--submenu-shadow-color-opacity)), 0 0 0 transparent;
        left: 0;
        position: fixed;
        top: 67px;
        visibility: hidden;
        white-space: normal;
        width: 100%;
        z-index: 5;
    }
}

/* ----------Sous-menu sous forme de pills ---------- */


/* Boutons légers pour les éléments de sous-menu (hubs) */
a.m-submenu-item {
  display: inline-block;
  padding: .45rem .75rem;               /* densité */
  border: 1px solid var(--hub-pill-border);    /* trait fin */
  border-radius: 9999px;                /* pill */
  background: var(--hub-pill-bg);
  color: inherit;
  text-decoration: none;
  line-height: 1.25;
  white-space: normal;                  /* permet le retour à la ligne si besoin */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);/* relief subtil */
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}

a.m-submenu-item:hover {
  border-color: var(--hub-pill-hover-bg);
  box-shadow: var(--hub-pill-hover-shadow);
}

a.m-submenu-item:active {
  transform: translateY(0.5px) scale(0.99);
  box-shadow: var(--hub-pill-active-shadow);
}

a.m-submenu-item:focus-visible {
  outline: none;
  border-color: var(--hub-pill-bg);
  border-color: var(--hub-accent);
  box-shadow: var(--hub-pill-active-shadow);
  background: var(--hub-pill-active-bg);
}

/* Mode sombre : adoucit le contraste
@media (prefers-color-scheme: dark) {
  a.m-submenu-item {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
  }
  a.m-submenu-item:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 2px 10px rgba(0,0,0,.6);
  }
}
 */
/* -------------------------------------------------- */

/* === PATCH MINIMAL : rétablir les pills sur les liens du sous-menu hub === */
/* Spécificité plus forte que .m-recent-article (cartes) pour éviter ses styles colonne */
.hub-subnav .m-submenu--hub a.m-submenu-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;             /* annule la colonne des cartes */
  min-height: 2.25rem;
  padding: .45rem .9rem;
  white-space: nowrap;

  border: 1px solid var(--hub-pill-border);
  border-radius: 9999px;
  background: var(--hub-pill-bg);
  color: var(--hub-pill-text);
  box-shadow: var(--hub-pill-shadow);
  text-decoration: none;
  line-height: 1.2;

  transition:
    transform .12s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}

/* Hover/active/focus — mêmes variables que ton thème */
.hub-subnav .m-submenu--hub a.m-submenu-item:hover {
  background: var(--hub-pill-hover-bg);
  border-color: var(--hub-pill-hover-border);
  box-shadow: var(--hub-pill-hover-shadow), 0 0 0 3px var(--hub-accent-soft);
  transform: translateY(-1px);
}

.hub-subnav .m-submenu--hub a.m-submenu-item:active {
  transform: translateY(0);
  box-shadow: var(--hub-pill-active-shadow);
  background: var(--hub-pill-active-bg);
}

.hub-subnav .m-submenu--hub a.m-submenu-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--hub-accent-soft), 0 6px 18px rgba(0,0,0,.18);
  border-color: var(--hub-accent);
}

/* Facultatif : style "actif" si tu poses .is-active côté serveur */
.hub-subnav .m-submenu--hub a.m-submenu-item.is-active {
  background: linear-gradient(180deg, #fff, #c8cacc);
  border-color: var(--hub-accent);
  color: #111;
  box-shadow: 0 8px 24px rgba(37,99,235,.18);
}

/* Option : rendre le “texte grisé” par défaut un peu plus doux */
.hub-subnav .m-submenu--hub a.m-submenu-item {
  color: color-mix(in oklab, var(--hub-pill-text) 82%, transparent); /* supportés par la plupart des navigateurs modernes */
}
@supports not (color: color-mix(in oklab, #000 50%, #fff)) {
  .hub-subnav .m-submenu--hub a.m-submenu-item { opacity: .92; }   /* fallback */
}

/* N’afficher que la 1re sous-nav si plusieurs existent par erreur */
.hub-subnav ~ .hub-subnav { display: none; }