/* ==========================================================================
   Réalisations
   ========================================================================== */

/* --------------------------------------------------------------------------
   Titre, compteur et sélecteur
   -------------------------------------------------------------------------- */

/* Le titre est éclairé par la même lampe que Savoir-faire, et le bloc monte
   se mettre en place : c'est le mouvement du modèle — le titre se rapproche
   du haut pendant que la barre lumineuse s'élargit. */
.barre__titre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(96px, 12vw, 150px) var(--cadre) 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 30px;

}

.barre__titre > *:not(.lampe) {
  position: relative;
  z-index: 1;
  animation: montee-titre .8s ease-in-out .3s both;
}


.titre-galerie {
  font: 400 52px/1.06 var(--titre);
  color: var(--texte-sombre-1);
}

.compteur {
  font: 500 13px/1 var(--courant);
  letter-spacing: .14em;
  color: var(--texte-sombre-3);
}

/* --------------------------------------------------------------------------
   Menu déroulant — mobile

   Il remplace les puces sous 680 px. Le sélecteur natif est écarté : aucun
   navigateur ne laisse styler ses options, chaque système dessine la sienne.
   -------------------------------------------------------------------------- */

.barre__select {
  display: none;
  padding: 0 var(--cadre) 14px;
  position: relative;
}

/* Le déclencheur : un bandeau plein, sans cadre rapporté. L'encadrement fin
   d'un sélecteur natif est ce qui datait le plus ; l'accent tient ici à un
   trait de laiton en tête et à un fond légèrement soulevé. */
.filtre-declencheur {
  font: 500 11px/1 var(--courant);
  letter-spacing: .18em;
  color: var(--texte-sombre-3);
  background: #1b1a16;
  border: 0;
  border-left: 3px solid var(--laiton);
  padding: 17px 18px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  transition: background .25s ease;
}

.filtre-declencheur:hover,
.filtre-declencheur.est-ouvert { background: #232119; }

.filtre-declencheur__valeur {
  font: 600 14px/1 var(--courant);
  letter-spacing: .1em;
  color: var(--laiton);
  flex: 1;
  min-width: 0;
}

/* Chevron dessiné en bordures : deux traits, aucune image à charger. */
.filtre-declencheur__chevron {
  width: 8px;
  height: 8px;
  flex: none;
  color: var(--laiton);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.filtre-declencheur.est-ouvert .filtre-declencheur__chevron {
  transform: translateY(2px) rotate(-135deg);
}

/* La liste flotte au-dessus de la mosaïque au lieu de la repousser : c'est
   ce qu'on attend d'un menu, et la grille ne saute plus à l'ouverture. */
.filtre-liste {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  left: var(--cadre);
  right: var(--cadre);
  top: calc(100% - 14px);
  z-index: 5;
  background: #141310;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .6);
  animation: menu-ouverture .28s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes menu-ouverture {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Aucun filet entre les choix : l'espace suffit à les séparer. */
.filtre-choix {
  font: 500 13px/1 var(--courant);
  letter-spacing: .1em;
  color: var(--texte-sombre-2);
  background: none;
  border: 0;
  /* Le retrait de gauche accueille le témoin de l'élément retenu. */
  padding: 14px 18px 14px 26px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: color .2s ease, background .2s ease;
}

/* Témoin de l'élément retenu : un trait vertical, pas une pastille — le site
   n'a aucun arrondi hors des commandes flottantes. */
.filtre-choix::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--laiton);
  transform: translateY(-50%);
  transition: height .3s cubic-bezier(.16, 1, .3, 1);
}

.filtre-choix:hover { color: var(--texte-sombre-1); background: rgba(255, 255, 255, .04); }

.filtre-choix.est-actif { color: var(--laiton); }
.filtre-choix.est-actif::before { height: 13px; }

/* --------------------------------------------------------------------------
   Puces de filtre
   -------------------------------------------------------------------------- */

.filtres {
  padding: 0 var(--cadre) 26px;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.filtre {
  font: 600 12px/1 var(--courant);
  letter-spacing: .06em;
  white-space: nowrap;
  padding: 12px 17px;
  cursor: pointer;
  background: transparent;
  color: var(--texte-sombre-1);
  border: 1px solid #4a4640;
  transition: background .2s, color .2s, border-color .2s;
}
.filtre:hover { border-color: var(--or-profond); }

/* Le filtre actif est un bouton : le laiton y est à sa place. */
.filtre.est-actif {
  background: var(--laiton);
  color: var(--charbon);
  border-color: var(--laiton);
}

/* --------------------------------------------------------------------------
   Mosaïque
   -------------------------------------------------------------------------- */

.mosaique {
  padding: 0 var(--cadre) clamp(48px, 5.5vw, 88px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: 16px;
}

.tuile {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  /* Repli si le JavaScript ne s'exécute pas : deux colonnes, hauteur fixe. */
  grid-column: span 2;
  height: 320px;
}

/* La photo remplit la tuile ; le recadrage remplace l'ancien background-size. */
.tuile__photo {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Toute la tuile mène au formulaire de devis. Le lien est une surface posée
   par-dessus plutôt qu'un habillage du contenu : le titre reste un <h2> hors
   du lien, et la zone cliquable couvre la tuile entière. */
.tuile__lien {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.tuile__lien:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: -4px;
}

/* Léger agrandissement au survol, réservé aux écrans à pointeur. */
@media (min-width: 681px) and (hover: hover) {
  .tuile__photo {
    transition: transform .7s cubic-bezier(.16, 1, .3, 1);
  }
  .tuile:hover .tuile__photo,
  .tuile:focus-within .tuile__photo {
    transform: scale(1.07);
  }
}
.tuile[hidden] { display: none; }

/* La légende passe sous la photo.

   Posée dessus, la surtitre en or tombait sur ce que le cliché offrait :
   mesuré sur les trente-deux ouvrages, huit descendaient sous trois pour un
   de rapport de contraste, l'escalier colimaçon d'Auriol au pire. Il aurait
   fallu un voile à quatre-vingts pour cent d'opacité pour tous les sauver,
   au prix du bas de chaque photo.

   Sous l'image, sur le fond de page, l'or tient sept pour un quel que soit
   le cliché, et la photo n'est plus mangée. */
.tuile__cartouche {
  position: static;
  padding: 14px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tuile__metal {
  font: 500 10px/1 var(--courant);
  letter-spacing: .16em;
  color: var(--or-profond);
}

.tuile__titre {
  font: 400 20px/1.16 var(--titre);
  color: var(--texte-sombre-1);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 680px) {

  /* De la place au-dessus du titre pour que la lampe s'ouvre, et un peu d'air
     en dessous : collé au compteur puis aux onglets, le bloc se lisait comme
     une seule masse. */
  .barre__titre { padding: 52px 22px 18px; gap: 10px 30px; }
  .barre__titre .lampe { height: 92px; }
  /* Le menu déroulant remplace les puces, et suit seul le défilement : le
     titre et le compteur ne servent qu'une fois. */
  .barre__select {
    display: block;
    padding: 0 22px 14px;
    position: sticky;
    top: 76px;
    z-index: 60;
    background: var(--charbon);
    border-bottom: 1px solid var(--filet-sombre);
  }

  /* Le rembourrage mobile vaut 22 px, pas la valeur générale de --cadre :
     le panneau s'aligne sur celle-là. */
  .filtre-liste { left: 22px; right: 22px; }

  .filtres { display: none; }

  .titre-galerie { font-size: 31px; line-height: 1.1; }
  .devis-clair__titre { font-size: 24px; line-height: 1.14; }

  /* Rythme « une grande pleine largeur, deux petites ». Les classes sont
     posées par le JavaScript sur les tuiles visibles : nth-child compterait
     aussi les tuiles masquées par le filtre. */
  .mosaique {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .tuile__titre { font-size: 15px; line-height: 1.2; }
  .tuile__cartouche { padding: 10px 2px 0; gap: 3px; }

  /* La légende étant passée sous la photo, les hauteurs lui rendent la
     place qu'elle prend : sans cela, les petites tuiles ne montraient plus
     qu'un timbre-poste. */
  .tuile--m-grand {
    grid-column: span 2;
    height: 336px;
  }
  .tuile--m-grand .tuile__titre { font-size: 20px; }

  .tuile--m-petit {
    grid-column: span 1;
    height: 232px;
  }



  /* Le bloc devis passe en gris clair : les encoches du bouton suivent. */
}

/* --------------------------------------------------------------------------
   Restitution de la version ordinateur — voir la note de base.css.
   -------------------------------------------------------------------------- */

@media (min-width: 681px) {
  /* Le dégagement en tête n'existait que pour laisser la lampe s'ouvrir. */
  .barre__titre {
    padding: var(--section-y) var(--cadre) 26px;
    overflow: visible;
  }

  .barre__titre > *:not(.lampe) { animation: none; }
}