/* Fiches réalisation : même ordre que la page d'origine, dans le style du nouveau site (2026-10-26).
   Bande noire en haut, galerie (aperçu de taille fixe et visionneuse), description des travaux, 3 réalisations semblables. */

/* Haut de page : la bande noire commune (css/site.css), repères du projet en grand à droite (comme les chiffres du haut des
   pages services), la galerie déborde sur la bande (choix 2 d'Alexandre, 2026-10-26). Pas de photo : celle de la page
   d'origine, agrandie bien au-delà de sa taille, était floue et répétait la galerie */
.reperes-projet { display: grid; gap: 14px; padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid rgb(255 255 255 / .18); font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.reperes-projet li { overflow-wrap: break-word; hyphens: auto; }
.bande-projet + .galerie-projet { position: relative; margin-top: calc(-1 * var(--chevauche)); padding-top: 0; }  /* la galerie déborde sur la bande */
.bande-projet + .galerie-projet .apercu { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .35); }

/* Galerie : aperçu de taille fixe, une grande photo et quatre petites, quel que soit le nombre de photos (3 ou 50);
   « Voir les N photos » ou un clic sur une photo ouvre la visionneuse (js/site.js), où chaque photo est entière, verticale ou
   horizontale (choix d'Alexandre après essai, 2026-10-26) */
.galerie-projet { padding-top: var(--espace-blocs); }
.apercu-cadre { position: relative; }
.apercu { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; height: clamp(300px, 40vw, 540px); overflow: hidden; border-radius: var(--rayon); }
.apercu li { min-height: 0; }
.apercu li:first-child { grid-row: span 2; }
.apercu li:nth-child(n+6) { display: none; }  /* les autres photos : seulement dans la visionneuse */
.apercu a, .apercu picture { display: block; height: 100%; }
.apercu img { width: 100%; height: 100%; object-fit: cover; transition: filter .2s; }
.apercu a:hover img { filter: brightness(.9); }
.apercu-4 li:nth-child(2) { grid-column: span 2; }  /* moins de 5 photos : la grille s'adapte */
.apercu-3 { grid-template-columns: 2fr 1fr; }
.apercu-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.apercu-2 li:first-child { grid-row: auto; }
.apercu-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.apercu-tout { position: absolute; right: calc(var(--gouttiere) + 16px); bottom: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--blanc); font: inherit; font-size: 14px; font-weight: 600; color: var(--encre); box-shadow: 0 6px 20px -6px rgb(0 0 0 / .35); cursor: pointer; transition: background-color .2s, color .2s; }
.apercu-tout:hover { background: var(--encre); color: var(--blanc); }
.apercu-tout .ico { width: 16px; height: 16px; }

/* Description des travaux : partage à droite du titre, déroulement à gauche, blocs à droite */
.description-projet { padding: var(--espace-blocs) 0 0; }
.description-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.description-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); margin-top: var(--espace-tete); }
.description-une { grid-template-columns: minmax(0, 1fr); }  /* seulement le déroulement, ou seulement les blocs */
.deroulement-titre { display: flex; align-items: center; gap: 8px; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--encre); }
.deroulement-titre .ico { width: 20px; height: 20px; }
.deroulement { margin-top: 12px; padding-left: 28px; }
.deroulement li { display: flex; gap: 12px; align-items: flex-start; padding: 5px 0; font-size: 16.5px; line-height: 1.5; color: var(--encre); }
.deroulement .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.projet-bloc + .projet-bloc { margin-top: 36px; }
.projet-bloc h3 { display: flex; align-items: center; gap: 12px; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--encre); }
.projet-bloc-ico { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--blanc); }
.projet-bloc-ico .ico { width: 15px; height: 15px; stroke-width: 3; }
.projet-bloc .texte { margin-top: 10px; padding-left: 36px; }

/* Page « Nos réalisations » et pages de catégorie : la bande noire, puis les cartes, qui débordent sur la bande */
.bande-projet + .liste-projets { position: relative; margin-top: calc(-1 * var(--chevauche)); }
.liste-projets { padding-bottom: var(--espace); }
.liste-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.liste-grille .autre-projet { box-shadow: 0 24px 50px -30px rgb(0 0 0 / .45); }
.autre-projet p.autre-projet-desc { font-size: 15px; line-height: 1.5; letter-spacing: 0; text-transform: none; }  /* une phrase, pas un lieu */

@media (max-width: 1024px) {
  .liste-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* tablette et téléphone : les repères sous le titre, sur une ligne, séparés par un point (jamais en colonnes serrées) */
  .reperes-projet { display: flex; flex-wrap: wrap; gap: 4px 0; padding: 18px 0 0; border-left: 0; border-top: 1px solid rgb(255 255 255 / .16); font-size: 20px; }
  .reperes-projet li { white-space: nowrap; }
  .reperes-projet li + li::before { content: "·"; margin: 0 12px; color: rgb(255 255 255 / .45); }
  .description-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .liste-grille { grid-template-columns: minmax(0, 1fr); }
  .reperes-projet { font-size: 17px; }
  .apercu { display: block; height: auto; border-radius: 18px; }  /* téléphone : la grande photo seule, le bouton dessus */
  .apercu li:nth-child(n+2) { display: none; }
  .apercu img { height: auto; aspect-ratio: 4 / 3; }
  .apercu-tout { right: calc(var(--gouttiere) + 12px); bottom: 12px; }
  .deroulement { padding-left: 0; }
  .projet-bloc h3 { font-size: 20px; }
  .projet-bloc .texte { padding-left: 0; }
}