/* ===========================================================================
   Bibliotheque d'inspirations — /inspirations et /inspirations/<slug>
   ===========================================================================
   N'ajoute que ce qui manque. Viennent d'ailleurs, et ne sont pas redefinis :

     assets/style.css          couleurs (--bg, --card, --ink, --ink-soft,
                               --ocre, --blue, --line), polices, .btn-primary,
                               .btn-secondary, .gal-grid, .ba (carte chantier)
     assets/prestation.css     fil d'Ariane .ps-fil, appel a l'action .ps-cta,
                               .ps-actions, pastilles .ps-liens-prestations
     assets/realisations.css   filtres .rl-filtres / .rl-groupe / .rl-filtre /
                               .rl-compte, et le resume .rl-resume

   Les filtres reprennent volontairement l'apparence de ceux des realisations :
   c'est le meme geste pour le visiteur, il n'a pas a reapprendre une interface.
   =========================================================================== */

.ins-tete,
.ins-filtres-zone,
.ins-liste,
.ins-fiche-tete,
.ins-bloc {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.ins-tete { padding-top: 2.5rem; }
.ins-tete h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.1;
  margin: 0 0 1.2rem;
}

.ins-chapo {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0;
}

/* Texte reserve aux lecteurs d'ecran : complete l'intitule d'un lien sans
   allonger le bouton a l'ecran. */
.ins-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Filtres ------------------------------------------------------------- */
.ins-filtres-zone { padding-top: 2.6rem; }

/* Pastille de famille dans le filtre couleur : elle sert a reconnaitre la
   famille d'un coup d'oeil, pas a montrer une teinte. */
.ins-temoin {
  width: 12px; height: 12px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* --- Liste --------------------------------------------------------------- */
.ins-liste { padding-top: 1.6rem; }

.ins-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.8rem;
}

.ins-carte {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.ins-visuel { display: block; line-height: 0; }
.ins-visuel img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Aplat de palette : le rendu de repli quand aucune image de assets/img/ ne
   correspond honnetement a l'inspiration. Aucune image n'est fabriquee pour
   cette section — mieux vaut la palette que la photo d'un autre chantier. */
.ins-aplat {
  display: flex;
  width: 100%;
  height: 220px;
  /* Palette absente : le bloc reste un aplat propre, jamais un trou. */
  background: var(--bg-2);
}
.ins-aplat > span { flex: 1 1 0; display: block; }
.ins-aplat-large { height: 100%; min-height: 260px; border-radius: 10px; overflow: hidden; }

.ins-corps {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.3rem 1.4rem 1.5rem;
  flex: 1 1 auto;
}

.ins-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ocre);
}
.ins-meta span + span::before { content: '· '; opacity: 0.55; }

.ins-titre { font-size: 1.28rem; line-height: 1.25; margin: 0; }
.ins-titre a { color: var(--ink); text-decoration: none; }
.ins-titre a:hover, .ins-titre a:focus-visible { color: var(--ocre); }

.ins-palette {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.ins-palette li { display: inline-flex; align-items: center; gap: 0.4rem; }
.ins-pastille {
  width: 15px; height: 15px;
  flex: none;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.ins-resume {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

.ins-ligne { font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.ins-ligne a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.ins-ligne a:hover, .ins-ligne a:focus-visible { color: var(--ocre); border-bottom-color: var(--ocre); }
.ins-etiquette {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ocre);
  margin-right: 0.4rem;
}

.ins-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.1rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.ins-actions .btn-primary { font-size: 0.84rem; padding: 0.62rem 1.1rem; }
.ins-lien-fiche {
  font-size: 0.86rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.ins-lien-fiche:hover, .ins-lien-fiche:focus-visible { color: var(--ocre); border-bottom-color: var(--ocre); }

.ins-vide {
  text-align: center;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.9;
  padding: 3rem 0;
}
.ins-vide a { color: var(--ocre); }

/* --- Fiche detaillee ----------------------------------------------------- */
.ins-fiche-tete { padding-top: 2.5rem; }

.ins-fiche-grille {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}
.ins-fiche-tete h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.1;
  margin: 0.6rem 0 1.2rem;
}
.ins-fiche-tete .ins-chapo { font-size: 1.1rem; color: var(--ink); }
.ins-description {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 1.1rem 0 2rem;
}
.ins-fiche-visuel { align-self: stretch; display: flex; }
.ins-fiche-visuel picture { width: 100%; }
.ins-fiche-visuel img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
}

.ins-bloc { padding-top: 3.6rem; }
.ins-bloc h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  margin: 0 0 1.3rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.ins-section-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.ins-section-tete h2 { flex: 1 1 auto; }
.ins-lien-plus { font-size: 0.86rem; color: var(--ocre); text-decoration: none; }
.ins-lien-plus:hover, .ins-lien-plus:focus-visible { text-decoration: underline; }

.ins-texte { max-width: 72ch; }
.ins-texte p { font-size: 1rem; line-height: 1.8; color: var(--ink-soft); margin: 0 0 1.2rem; }
.ins-texte p:last-child { margin-bottom: 0; }

.ins-palette-detail {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.ins-palette-detail li { display: flex; gap: 0.8rem; align-items: flex-start; }
.ins-pastille-large {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.ins-couleur-texte { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9rem; }
.ins-couleur-texte strong { color: var(--ink); font-weight: 600; }
.ins-couleur-famille {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ins-avertissement {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 6px;
}

.ins-puces, .ins-precautions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  max-width: 76ch;
}
.ins-puces li, .ins-precautions li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.ins-puces li::before { content: '—'; color: var(--ocre); flex: none; }
.ins-precautions li::before { content: '!'; color: var(--ocre); font-weight: 700; flex: none; }

.ins-pieces { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }

.ins-chantier { max-width: 420px; }

.ins-autres { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.ins-autres li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.ins-autres a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.ins-autres a:hover, .ins-autres a:focus-visible { color: var(--ocre); border-bottom-color: var(--ocre); }
.ins-autres-palette { display: inline-flex; gap: 3px; }
.ins-autres-palette span {
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* --- Accessibilite ------------------------------------------------------- */
/* Le focus doit rester visible partout, y compris sur les elements dont le
   style de survol repose sur la couleur seule. */
.ins-titre a:focus-visible,
.ins-lien-fiche:focus-visible,
.ins-lien-plus:focus-visible,
.ins-ligne a:focus-visible,
.ins-autres a:focus-visible,
.ins-vide a:focus-visible {
  outline: 2px solid var(--ocre);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .ins-fiche-grille { grid-template-columns: 1fr; gap: 2rem; }
  .ins-fiche-visuel { order: -1; }
  .ins-aplat-large { min-height: 200px; }
}

@media (max-width: 560px) {
  .ins-grille { grid-template-columns: 1fr; }
  .ins-visuel img, .ins-aplat { height: 190px; }
  .ins-bloc, .ins-tete, .ins-liste, .ins-filtres-zone, .ins-fiche-tete { padding-left: 1.1rem; padding-right: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ins-titre a, .ins-lien-fiche, .ins-lien-plus, .ins-autres a { transition: none; }
}