/**
 * Bloc menu_cartes — compétences présentées comme la carte d'un café de spécialité
 *
 * Contenu : 1. En-tête  2. Grille des rubriques  3. Rubrique  4. Rubrique « hors carte »
 *           5. Responsive
 *
 * Nombre de rubriques libre : grille auto-fill. Une rubrique --hors-carte occupe toute la
 * largeur et se place en dernier, quel que soit le nombre de rubriques.
 */

/* 1. En-tête --------------------------------------------------------------- */
.menu-cartes__head { display: grid; gap: var(--space-xs); margin-bottom: var(--space-xl); }

/* 2. Grille des rubriques -------------------------------------------------- */
/* Cadre double : le filet d'une carte imprimée */
.menu-cartes__list {
    /* R10 : resserré pour que la carte tienne entière à l'écran quand elle est épinglée ;
       R17 : marges verticales réduites (Backend à 5 lignes) pour rester épinglée en 1366 × 768 */
    list-style: none; margin: 0; padding: var(--space-md) var(--space-lg);
    display: grid; gap: var(--space-lg);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    border: 1px solid var(--color-text);
    outline: 1px solid var(--color-text); outline-offset: 5px;
}

/* 3. Rubrique -------------------------------------------------------------- */
.menu-cartes__item { display: grid; align-content: start; gap: var(--space-xs); }
.menu-cartes__num {
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--color-primary);
}
.menu-cartes__title {
    font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600;
    line-height: 1.1; letter-spacing: -0.01em;
    padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-text);
}
.menu-cartes__entries { list-style: none; padding: 0; margin: 0; }
/* Une ligne par élément, séparées par le filet pointillé de la carte */
.menu-cartes__entries li {
    display: flex; align-items: baseline; gap: var(--space-xs);
    padding-block: 0.4rem;
    font-family: var(--font-mono); font-size: var(--fs-sm);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--color-text) 45%, transparent) var(--rule-dot), transparent calc(var(--rule-dot) + 0.5px));
    background-size: var(--rule-gap) calc(var(--rule-dot) * 2); background-repeat: repeat-x; background-position: left bottom;
}
.menu-cartes__entries li:last-child { background: none; }

/* 4. Rubrique « hors carte » ----------------------------------------------- */
/* Clin d'œil : le brief veut que la carte humoristique ne pèse plus autant que les vraies
   compétences → bandeau à part, en bas, avec ses éléments en ligne. */
.menu-cartes__item--hors-carte {
    grid-column: 1 / -1; order: 99;
    grid-template-columns: auto auto 1fr; align-items: baseline; gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-text);
}
.menu-cartes__item--hors-carte .menu-cartes__num {
    padding: 0.2em 0.6em; border: 1px solid currentColor; border-radius: var(--radius-sm);
    transform: rotate(-3deg);
}
.menu-cartes__item--hors-carte .menu-cartes__title {
    font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 100, "WONK" 1;
    border: 0; padding: 0;
}
.menu-cartes__item--hors-carte .menu-cartes__entries { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); }
.menu-cartes__item--hors-carte .menu-cartes__entries li { background: none; padding-block: 0; color: var(--color-text-muted); }
.menu-cartes__item--hors-carte .menu-cartes__entries li + li::before { content: "·"; margin-right: var(--space-md); }

/* 5. Responsive ------------------------------------------------------------ */
@media (max-width: 768px) {
    .menu-cartes__list { padding: var(--space-lg) var(--space-md); outline-offset: 3px; }
    .menu-cartes__item--hors-carte { grid-template-columns: 1fr; gap: var(--space-xs); justify-items: start; }
    /* Les « · » se retrouveraient en début de ligne au retour à la ligne */
    .menu-cartes__item--hors-carte .menu-cartes__entries li + li::before { content: none; }
}