/**
 * Fil Instagram — mise en page uniquement.
 *
 * Le partage des rôles est la clé de la portabilité : **le module tient la
 * mise en page, le thème tient la typographie et les boutons.**
 *
 *  - Ni `color` ni `font-family` sur le titre ou les liens : les règles de
 *    titre du thème s'appliquent, et le bloc parle la langue de la boutique
 *    au lieu d'y planter la charte de quelqu'un d'autre.
 *  - Le bouton porte les classes `btn btn-primary` du thème ; cette feuille ne
 *    le repeint pas.
 *  - Aucun fond n'est imposé au bloc : il se pose dans n'importe quelle section.
 *
 * Ce qui reste ici — grille, découpe carrée, pastille vidéo — n'a pas
 * d'équivalent dans un thème et doit donc être porté par le module.
 *
 * Chaque sélecteur porte **deux classes**. Un thème impose couramment ses
 * règles depuis des sélecteurs du type `.conteneur h2` (0,1,1) ou
 * `.content ul` (0,1,1) : une classe seule (0,1,0) perd, et la grille
 * retomberait en liste à puces.
 *
 * Tout est surchargeable : `.kif { --kif-… }` suffit à habiller le bloc
 * autrement, sans toucher au module.
 */
.kif {
  /* `--kif-muted` n'est **pas** défini : un gris fixe ne peut pas tenir le
     contraste sur un fond inconnu. Mesuré sur un thème sombre d'essai, un
     #767676 tombait à 3,6:1 sur #14161a — sous le seuil AA. Le nom de compte
     hérite donc de la couleur du texte, atténuée en opacité : le rapport de
     contraste suit le thème au lieu de le contredire.
     Une boutique qui veut une teinte précise pose `--kif-muted`. */
  --kif-surface: #f5f5f5;
  --kif-radius: 10px;
  --kif-gap: 10px;
  /* Quatre colonnes : deux rangées pour les huit publications par défaut. */
  --kif-cols: 4;

  /* C'est la largeur du bloc, et non celle de l'écran, qui doit commander le
     nombre de colonnes : le bloc peut vivre dans une colonne étroite. */
  container-type: inline-size;
  margin: 40px 0;
}

.kif :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.kif .kif__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 20px;
}

/* Pas de couleur, pas de police : le thème décide de l'allure d'un titre. */
.kif .kif__title {
  margin: 0;
}

.kif .kif__handle {
  color: var(--kif-muted, inherit);
  font-size: 0.9375rem;
  opacity: var(--kif-handle-opacity, 0.72);
  text-decoration: none;
}

.kif .kif__handle:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Nombre de colonnes explicite : quatre par défaut, soit deux rangées pour
   huit publications. `auto-fit` donnait un compte variable selon la largeur —
   sept colonnes sur un écran large — ce qui empêchait toute mise en page
   prévisible.
   La valeur se surcharge : `.kif { --kif-cols: 3 }` suffit. */
.kif .kif__grid {
  display: grid;
  gap: var(--kif-gap);
  grid-template-columns: repeat(var(--kif-cols), minmax(0, 1fr));
}

/* Repli par la largeur de fenêtre, pour les navigateurs sans requêtes de
   conteneur. Déclaré **avant** celles-ci : à spécificité égale, la dernière
   règle l'emporte, donc la requête de conteneur gagne là où elle est comprise.
   L'inverse ferait mentir la fenêtre sur une colonne étroite. */
@media (max-width: 760px) {
  .kif .kif__grid {
    --kif-cols: 3;
  }
}

@media (max-width: 520px) {
  .kif .kif__grid {
    --kif-cols: 2;
  }
}

/* Le bloc est plaçable dans n'importe quelle colonne d'un constructeur de
   page : c'est la largeur **du bloc** qui doit décider, pas celle de l'écran. */
@container (max-width: 760px) {
  .kif .kif__grid {
    --kif-cols: 3;
  }
}

@container (max-width: 520px) {
  .kif .kif__grid {
    --kif-cols: 2;
  }
}

/* Les seuls `!important` de la feuille, et ils sont assumés.
 *
 * Un thème style couramment ses listes depuis `.page .content ul` (0,2,1),
 * qui bat le `.kif .kif__grid` (0,2,0) d'à côté : mesuré sur un thème d'essai,
 * la grille reprenait des puces et un retrait de 24 px. Monter la spécificité
 * ne ferait que déplacer la course — il y aura toujours un thème plus précis.
 *
 * `!important` est ici à sa place : ce ne sont pas des choix de style, ce sont
 * des mises à zéro qui n'ont pas le droit d'échouer. Rien d'autre dans cette
 * feuille n'en porte, et rien ici ne gêne la surcharge d'un intégrateur, qui
 * passera par les variables.
 */
.kif .kif__grid,
.kif .kif__cell {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.kif .kif__cell::before,
.kif .kif__cell::marker {
  content: none !important;
}

.kif .kif__link {
  background: var(--kif-surface);
  border-radius: var(--kif-radius);
  display: block;
  overflow: hidden;
  position: relative;
}

/* Le carré est imposé par le conteneur, pas par l'image : une publication au
   format portrait ne doit pas casser l'alignement de la grille. */
.kif .kif__image {
  aspect-ratio: 1 / 1;
  display: block;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 100%;
}

.kif .kif__link:hover .kif__image {
  transform: scale(1.04);
}

/* Le contraste de la pastille ne dépend d'aucun jeton : elle se pose sur une
   photo quelconque, donc sur un fond imprévisible. */
.kif .kif__badge {
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  height: 28px;
  justify-content: center;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 28px;
}

/* Le pictogramme de vidéo est décoratif ; la mention reste lisible par un
   lecteur d'écran, sans quoi une vignette de Reel se confond avec une photo. */
.kif .kif__sr {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 480px) {
  .kif {
    margin: 24px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kif *,
  .kif *::before,
  .kif *::after {
    transition-duration: 0.01ms !important;
  }
}