/**
 * Méga-menus de l'en-tête, faits de blocs de contenu Blocksy.
 *
 * Le panneau est un sous-menu de Blocksy, qui en règle le fond, l'ombre et les
 * marges ; le contenu est un bloc `.gi-mega` saisi dans l'éditeur. Les règles
 * du panneau ne visent donc que le sous-menu **qui contient** un tel bloc —
 * `:has(.gi-mega)` —, et un menu déroulant ordinaire garde les réglages du
 * personnalisateur.
 *
 * Aucune couleur en dur : tout vient de la palette.
 *
 * Le préfixe `[data-header]` n'est pas décoratif : les réglages de Blocksy
 * arrivent par une règle `[data-header*="type-1"] .ct-header [data-id="menu"]
 * .sub-menu`, qu'une spécificité égale laisserait gagner selon l'ordre de
 * chargement des feuilles.
 */

/*
 * Le bloc remplace les liens, mais seulement là où il a la place.
 *
 * Chaque enfant d'une entrée à méga-menu devient une colonne, et Blocksy ne
 * sait pas en masquer : les liens ordinaires s'afficheraient à côté du bloc.
 * On les garde pourtant dans le menu, pour deux raisons. Le menu mobile les
 * affiche, lui, le bloc n'y étant pas rendu. Et entre 1 000 et 1 200 pixels,
 * faute de place, Blocksy replie les dernières entrées dans « Plus », un
 * menu déroulant étroit où le panneau ne tient pas — il y faut les liens.
 *
 * D'où deux règles symétriques : dans la barre, le bloc seul ; dans « Plus »,
 * les liens seuls. Retirer le bloc de l'entrée rend aussitôt les liens partout.
 */
[data-id="menu"] > ul > li > .sub-menu:has(> li > .entry-content > .gi-mega) > li:not(:has(> .entry-content > .gi-mega)),
[data-id="menu"] .more-items-container .sub-menu > li:has(> .entry-content > .gi-mega) {
  display: none;
}

[data-header] .ct-header [data-id="menu"] > ul > li > .sub-menu:has(.gi-mega) {
  --dropdown-background-color: var(--theme-palette-color-8, #fff);
  --dropdown-columns-divider: 0;
  --columns-padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 48px);
  --theme-border-radius: 0 0 12px 12px;
  --theme-box-shadow: 0 18px 40px rgba(32, 30, 29, 0.12);

  border-bottom: 2px solid var(--theme-palette-color-6, #eae7e7);
}

/* La même feuille sert l'éditeur des blocs de contenu : les règles du bloc ne
   dépendent donc d'aucun conteneur propre au site. */
.gi-mega.wp-block-columns {
  --gi-encre: var(--theme-palette-color-3, #201e1d);
  --gi-accent: var(--theme-palette-color-1, #c74400);
  /* Texte discret : palette-color-5 n'atteint pas 4,5 de contraste sur fond clair. */
  --gi-discret: color-mix(in srgb, var(--theme-palette-color-3, #201e1d) 72%, transparent);
  --gi-filet: var(--theme-palette-color-6, #eae7e7);

  align-items: stretch;
  gap: clamp(28px, 3.5vw, 56px);
  color: var(--gi-encre);
  text-align: start;
}

/* Blocksy enveloppe le bloc dans un `.entry-content` à largeur contrainte, qui
   ramènerait les colonnes à la largeur de lecture et les centrerait. */
.entry-content > .gi-mega.wp-block-columns {
  max-width: none;
  margin: 0;
}

/* La feuille du bloc Colonnes n'est pas chargée : WordPress ne l'enfile que
   pour les blocs du contenu, et le panneau est rendu dans l'en-tête. Sans elle,
   la mise en page flex centre les colonnes en hauteur et les tasse à la largeur
   de leur texte. On pose donc ici ce qu'elle aurait posé. */
.gi-mega > .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}

.gi-mega > .wp-block-column[style*="flex-basis"] {
  flex-grow: 0;
}

.gi-mega p {
  margin: 0;
}

.gi-mega a {
  text-decoration: none;
}

/* — Colonne d'accroche — */

.gi-mega__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gi-mega .gi-mega__surtitre {
  color: var(--gi-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gi-mega .gi-mega__accroche {
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.gi-mega .gi-mega__action {
  margin-top: auto;
  padding-top: 10px;
  font-weight: 600;
}

.gi-mega__action a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gi-accent);
  border-bottom: 1px solid transparent;
}

.gi-mega__action a::after {
  content: "→";
  transition: transform 0.15s ease;
}

.gi-mega__action a:hover,
.gi-mega__action a:focus-visible {
  border-bottom-color: currentColor;
}

.gi-mega__action a:hover::after {
  transform: translateX(3px);
}

/* — Titre de colonne — */

.gi-mega .gi-mega__titre {
  margin-bottom: 6px;
  color: var(--gi-discret);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* — Listes de liens : saisies à la main ou tirées de la base — */

.gi-mega .gi-mega__liens {
  display: grid;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-mega .gi-mega__liens > li {
  margin: 0;
  border-bottom: 1px solid var(--gi-filet);
}

.gi-mega__liens a {
  display: block;
  padding: 10px 0;
  color: var(--gi-encre);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  transition: color 0.15s ease;
}

.gi-mega__liens a:hover,
.gi-mega__liens a:focus-visible {
  color: var(--gi-accent);
}

/* Le titre d'une fiche est rendu dans un paragraphe par le bloc Query. */
.gi-mega__liens .wp-block-post-title {
  margin: 0;
  font-size: inherit;
}

/* Les programmes, en deux listes côte à côte : en cours, puis achevés —
   chacune classée par titre, qui se lit de haut en bas. Les colonnes partent
   du haut ensemble, quelle que soit la longueur de l'une et de l'autre. */
.gi-mega .gi-mega__statuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(24px, 3vw, 40px);
  margin-bottom: 22px;
}

.gi-mega .gi-mega__statut > * {
  margin-block: 0;
}

.gi-mega .gi-mega__statut > .gi-mega__titre {
  margin-bottom: 6px;
}

/* Les axes : le rang dans le plan, numéroté par la feuille et non saisi, pour
   qu'il suive l'ordre des fiches. */
.gi-mega__liens--axes {
  counter-reset: gi-axe;
}

/* Six axes aux titres longs : sur une colonne, le panneau descendait sous la
   ligne de flottaison. Deux colonnes de texte, et non une grille, pour qu'ils
   se lisent dans l'ordre du plan, de haut en bas — 1 à 3, puis 4 à 6. */
.gi-mega .gi-mega__liens--axes {
  display: block;
  columns: 2;
  column-gap: clamp(24px, 3vw, 40px);
}

.gi-mega__liens--axes > li {
  counter-increment: gi-axe;
  break-inside: avoid;
}

.gi-mega__liens--axes a {
  padding-block: 14px;
  font-size: 17px;
  font-weight: 600;
}

.gi-mega__liens--axes a::before {
  content: "Axe " counter(gi-axe);
  display: block;
  margin-bottom: 4px;
  color: var(--gi-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Les types de publication : le compte, que le bloc Termes rend hors du lien,
   se range à droite. */
.gi-mega .gi-mega__liens--types > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--gi-discret);
  font-size: 13px;
}

/* — Dernière parution — */

.gi-mega .gi-mega__parution {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-mega__parution > li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin: 0;
}

.gi-mega .gi-mega__couverture {
  margin: 0;
}

/* Doublé de la classe du cadre, comme partout : `height: auto` laisse le
   fichier imposer ses proportions. */
.gi-mega__couverture img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(32, 30, 29, 0.16);
}

.gi-mega__parution-texte {
  display: grid;
  align-content: start;
  gap: 6px;
}

/* Blocksy donne une marge basse aux blocs du contenu, qui creusait un vide
   entre la date et le titre. */
.gi-mega .gi-mega__parution-texte > * {
  margin-block: 0;
}

.gi-mega .gi-mega__date {
  color: var(--gi-discret);
  font-size: 13px;
}

.gi-mega .gi-mega__parution-titre {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.gi-mega__parution-titre a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--gi-encre);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.gi-mega__parution-titre a:hover,
.gi-mega__parution-titre a:focus-visible {
  color: var(--gi-accent);
}

/*
 * Entrées du menu et liens de la barre haute.
 *
 * Repris du CSS additionnel du personnalisateur, pour que les règles de
 * l'en-tête ne vivent qu'à un endroit. Le `!important` est conservé : Blocksy
 * pose l'espacement des lettres depuis ses réglages de typographie, par une
 * règle plus spécifique qu'une classe seule.
 *
 * `.gi-topbar-link` est posée à la main sur les liens des deux éléments Texte
 * de la barre haute (« Cours en ligne », « Teral »), saisis dans le
 * constructeur d'en-tête : les retirer de là rend ces règles sans objet.
 */

.ct-menu-link {
  letter-spacing: 0.02em !important;
}

/* Le gras des entrées du menu principal (600), réglé dans le personnalisateur. */
.gi-topbar-link {
  font-weight: 600;
  color: var(--theme-palette-color-3);
  text-transform: uppercase;
  text-decoration: none;
}

.gi-topbar-link:hover,
.gi-topbar-link:focus-visible {
  color: var(--theme-palette-color-1);
}