.main-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--sand);
}

.paint-hero {
  padding: 40px 0 30px;
  background:
    linear-gradient(90deg, rgba(47, 43, 36, 0.52), rgba(47, 43, 36, 0.12)),
    url("../../uploads/899737004.jpg") center / cover;
  color: #fffdf3;
}

.paint-hero-inner {
  max-width: 1120px;
}

.paint-hero h1 {
  margin-bottom: 14px;
}

.paint-hero p:last-child {
  max-width: 620px;
  margin-bottom: 0;
  color: rgba(255, 253, 243, 0.86);
  font-size: 20px;
}

.paint-section {
  background: var(--paper-soft);
}

.paint-heading {
  align-items: start;
  flex-direction: column;
  gap: 8px;
}

.paint-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* Écart entre tuiles réduit au minimum (2px) : à 0px les coins arrondis
     de deux tuiles voisines (border-radius:8px) donneraient l'impression
     d'un petit "trou" pointu à chaque jonction ; 2px suffit à effacer cet
     artefact tout en restant visuellement quasi imperceptible. Même
     valeur reprise dans tous les paliers mobiles ci-dessous, plus besoin
     de la faire varier avec la largeur d'écran. */
  gap: 2px;
}

.paint-tile {
  position: relative;
  aspect-ratio: 1.12 / 1;
  min-height: 176px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg);
  box-shadow: var(--shadow);
  /* Pas de bordure/liseré autour des tuiles (retiré à la demande :
     avant il y avait "border: 3px solid var(--bg)" pour marquer une
     séparation nette entre tuiles voisines — plus nécessaire maintenant
     que le gap est réduit à 2px, qui suffit lui-même à séparer visuellement
     les tuiles sans liseré coloré. */
  text-decoration: none;
}

.paint-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.paint-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(47, 43, 36, 0), rgba(47, 43, 36, 0.15));
  pointer-events: none;
}

.paint-tile span {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 13px;
  z-index: 1;
  color: #fffdf3;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 600;
  line-height: 1.05;
  /* Filet de sécurité générique (pas seulement en dessous de 700px) :
     dès que le nombre de colonnes monte à 6-7 sur grand écran, les tuiles
     deviennent assez étroites pour qu'un mot long ("Festicartes",
     "Peintures"...) dépasse la largeur utile du libellé. Sans ce retour
     à la ligne forcé, le mot ne se coupe pas et déborde visuellement
     jusqu'au bord de la tuile voisine (le liseré de 3px entre tuiles
     étant trop fin pour qu'on remarque la coupure). */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.paint-tile:hover img,
.paint-tile:focus-visible img {
  transform: scale(1.04);
}

.paint-tile:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}


.paint-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.paint-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.paint-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.paint-grid--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.paint-grid--7 {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

/*
 * Contrôleur de charte graphique — grille auto-adaptative.
 * Le nombre de colonnes se cale TOUJOURS sur le nombre RÉEL de tuiles
 * .paint-tile présentes (plus besoin d'ajouter/maintenir une classe
 * .paint-grid--N à la main : ces classes restent tolérées sur les
 * anciennes pages mais n'ont plus d'effet, la règle ci-dessous étant
 * volontairement plus prioritaire).
 * Règle de charte : jusqu'à 8 tuiles, tout tient sur une seule ligne
 * (ordinateur) ; à partir de 9, on repasse sur plusieurs lignes de 8.
 * De 1 à 5 tuiles, elles ne s'étirent jamais pour remplir la ligne : elles
 * gardent la taille "5 colonnes", avec de l'espace vide à droite s'il y en
 * a moins de 5 (voir tuile isolée, ex. "Livrets", pour le même principe
 * hors grille).
 *
 * Cantonnée à min-width:1081px (au-delà du premier palier ci-dessous) :
 * le sélecteur :has() a une spécificité CSS plus élevée qu'une simple
 * classe, donc SANS cette limite il écraserait aussi, par erreur, les
 * filets de sécurité tablette/mobile définis juste après (y compris
 * quand la fenêtre du navigateur est simplement rétrécie, par exemple
 * en ouvrant les outils de développement).
 */
@media (min-width: 1081px) {
  /* De 1 à 5 tuiles : jamais étirées pour remplir la ligne — elles gardent
     toujours la taille qu'elles auraient dans une grille à 5 colonnes,
     quitte à laisser de l'espace vide à droite (grille à 5 pistes fixes,
     seules les N premières sont occupées). */
  .paint-grid:not(:has(.paint-tile:nth-child(6))) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .paint-grid:has(.paint-tile:nth-child(6)):not(:has(.paint-tile:nth-child(7))) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .paint-grid:has(.paint-tile:nth-child(7)):not(:has(.paint-tile:nth-child(8))) { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .paint-grid:has(.paint-tile:nth-child(8)):not(:has(.paint-tile:nth-child(9))) { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .paint-grid:has(.paint-tile:nth-child(9)) { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }

  /*
   * Correctif recadrage d'image : le min-height:176px de .paint-tile est
   * pensé pour 2 à 5 colonnes, où la largeur de colonne (>=204px) donne
   * déjà, via aspect-ratio, une hauteur supérieure à 176px (min-height ne
   * s'applique donc jamais réellement). À 6 colonnes et au-delà, la
   * colonne devient trop étroite pour que aspect-ratio (1.12/1, proche du
   * format réel des visuels, ~1.176/1) dépasse 176px — c'est alors
   * min-height qui l'emporte et force les tuiles dans un format bien plus
   * "portrait" que prévu. Comme les images sources sont "paysage",
   * object-fit:cover doit alors rogner fortement leurs bords gauche/droit
   * pour remplir la case, donnant l'impression que la tuile (l'image) est
   * tronquée. On abaisse ici min-height pour laisser aspect-ratio piloter
   * la hauteur réelle (valeur réduite d'environ 25px à chaque colonne
   * supplémentaire, empiriquement).
   */
  .paint-grid:has(.paint-tile:nth-child(6)):not(:has(.paint-tile:nth-child(7))) .paint-tile {
    min-height: 150px !important;
  }
  .paint-grid:has(.paint-tile:nth-child(7)):not(:has(.paint-tile:nth-child(8))) .paint-tile {
    min-height: 125px !important;
  }
  .paint-grid:has(.paint-tile:nth-child(8)) .paint-tile {
    min-height: 100px !important;
  }

  /*
   * Pages à plusieurs groupes de tuiles empilés (ex: "Sets" puis "Nappes"
   * sur sets-nappes.html, chacun dans son propre .paint-grid, séparés par
   * un <h3 class="tiles-group-title">) : à partir du 2e groupe, chaque
   * tuile reprend la taille des tuiles du 1er groupe de la page, plutôt
   * que sa propre taille "idéale" calculée sur son propre nombre de
   * tuiles — cohérence visuelle entre groupes empilés. La largeur de la
   * ligne ne sera donc pas forcément remplie si le groupe suivant a moins
   * de tuiles que le premier.
   * :first-of-type / :not(:first-of-type) fonctionnent ici car tous les
   * .paint-grid d'une même page sont des <div>, et les <h3> intercalés
   * (d'un autre type de balise) ne comptent pas dans ce calcul.
   */
  .section-inner:has(.paint-grid:first-of-type:not(:has(.paint-tile:nth-child(6))))
    .paint-grid:not(:first-of-type) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .section-inner:has(.paint-grid:first-of-type:has(.paint-tile:nth-child(6)):not(:has(.paint-tile:nth-child(7))))
    .paint-grid:not(:first-of-type) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .section-inner:has(.paint-grid:first-of-type:has(.paint-tile:nth-child(7)):not(:has(.paint-tile:nth-child(8))))
    .paint-grid:not(:first-of-type) {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
  .section-inner:has(.paint-grid:first-of-type:has(.paint-tile:nth-child(8)))
    .paint-grid:not(:first-of-type) {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  /* Même logique pour la hauteur minimale des tuiles (évite un recadrage
     d'image trop agressif si le groupe suivant se retrouve avec des
     colonnes plus étroites que sa propre taille "idéale"). */
  .section-inner:has(.paint-grid:first-of-type:has(.paint-tile:nth-child(6)):not(:has(.paint-tile:nth-child(7))))
    .paint-grid:not(:first-of-type) .paint-tile {
    min-height: 150px !important;
  }
  .section-inner:has(.paint-grid:first-of-type:has(.paint-tile:nth-child(7)):not(:has(.paint-tile:nth-child(8))))
    .paint-grid:not(:first-of-type) .paint-tile {
    min-height: 125px !important;
  }
  .section-inner:has(.paint-grid:first-of-type:has(.paint-tile:nth-child(8)))
    .paint-grid:not(:first-of-type) .paint-tile {
    min-height: 100px !important;
  }
}

@media (max-width: 1080px) {
  .paint-hero {
    padding: 60px 0 44px;
  }

  /* Filet de sécurité générique : toute grille .paint-grid--N (existante ou
     future) repasse à 3 colonnes par défaut à cette largeur. Les variantes
     qui peuvent encore tenir sur plus de colonnes (--4, --5) sont redéfinies
     juste après et gagnent grâce à l'ordre des règles (même spécificité).
     Avant ce filet, .paint-grid--6 et .paint-grid--7 n'étaient jamais
     redéfinis ici et restaient forcés à 6/7 colonnes par la règle desktop
     en !important : les tuiles devenaient trop étroites pour leur
     min-height fixe et se chevauchaient. */
  .paint-grid,
  [class*="paint-grid--"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .paint-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .paint-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .paint-tile {
    min-height: 190px;
  }
}

@media (max-width: 700px) {
  .paint-hero {
    padding: 54px 0 42px;
  }
  .paint-hero p:last-child {
    font-size: 18px;
  }
  /* Sélecteur générique : plus besoin d'énumérer --3/--4/.../--N, toute
     variante actuelle ou future passe automatiquement à 2 colonnes ici. */
  .paint-grid,
  [class*="paint-grid--"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    /* 2px : même valeur quasi-invisible que le gap de base, plus besoin
       de variante par palier (avant : 14px, puis 8px). */
    gap: 2px !important;
  }
  .paint-tile {
    min-height: 150px;
  }
  .paint-tile span {
    left: 10px;
    right: 10px;
    bottom: 10px;
    font-size: clamp(17px, 4.6vw, 22px);
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

@media (max-width: 380px) {
  .paint-grid,
  [class*="paint-grid--"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    /* 2px : idem, même valeur partout (avant : 10px, puis 6px). */
    gap: 2px !important;
  }
  .paint-tile {
    min-height: 128px;
  }
  .paint-tile span {
    font-size: clamp(15px, 5vw, 19px);
  }
}

/* Label de catégorie en haut à gauche des tuiles */
.paint-tile .tile-label {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35);
  padding: 2px 5px;
  border-radius: 3px;
  line-height: 1.2;
  pointer-events: none;
}

/* Titres de groupe nappes/sets */
.tiles-group-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--rose);
}
.tiles-group-title:first-of-type {
  margin-top: 0;
}

/* Cas particulier : une tuile isolée placée hors grille, dans une simple
   boîte flex centrée, avec une largeur fixée en ligne (ex : la tuile
   "Livrets" sur festicartes.html, en `width: calc(25% - 10px)` — soit la
   taille qu'elle aurait dans une grille à 4 colonnes — pour rester
   visuellement raccord avec la grille de 4 tuiles juste au-dessus, sur
   ordinateur).
   Règle stricte demandée : une tuile isolée ne doit JAMAIS dépasser la
   taille qu'elle aurait dans une grille "normale" à cette largeur d'écran :
   au maximum la taille "4 colonnes" sur ordinateur (25%, déjà géré par le
   style en ligne ci-dessus, inchangé), et au maximum la taille
   "2 colonnes" sur smartphone (50%) — jamais envahissante, y compris sur
   les très petits écrans. */
@media (max-width: 700px) {
  .paint-tile[style*="width"] {
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }
}