/* =========================================================================
   WEBCRAFT — portfolio-galerie.css · 2026
   Portfolio poussé : galerie muséale, captures réelles des sites livrés
   (ordinateur + mobile), compositions alternées, révélation au scroll.
   Aucune dépendance. Ne touche ni aux textes ni aux liens du contenu.
   ========================================================================= */

:root{
  --gal-ecart: clamp(28px, 6vw, 120px);
  --gal-ombre: 0 1px 1px rgba(12,12,16,.04), 0 18px 40px -18px rgba(12,12,16,.22), 0 48px 90px -60px rgba(12,12,16,.35);
  --gal-ombre-forte: 0 2px 2px rgba(12,12,16,.05), 0 28px 60px -22px rgba(12,12,16,.26), 0 70px 130px -70px rgba(12,12,16,.42);
}

/* -------------------------------------------------------------------------
   1. VITRINE DE PROJET — une réalisation par « salle »
   ------------------------------------------------------------------------- */
.galerie{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: var(--gal-ecart);
  align-items: center;
  padding-block: clamp(38px, 5vw, 84px);
  border-top: 1px solid var(--ligne);
}
.galerie:first-of-type{ border-top: 0; padding-top: clamp(20px, 2.6vw, 40px); }

.galerie--inverse{ direction: rtl; }
.galerie--inverse > *{ direction: ltr; }

/* --- le texte : numéro, nom, métier, liens --- */
.galerie__fiche{ position: relative; }

.galerie__rang{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.galerie__numero{
  font-family: var(--serif);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: .8;
  color: var(--encre);
  letter-spacing: -.02em;
}
.galerie__secteur{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--doux);
}

.galerie__nom{
  font-size: clamp(24px, 2.9vw, 40px);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 700;
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  max-width: 22ch;
}
.galerie__nom em{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.galerie__metier{
  font-size: 17px;
  line-height: 1.55;
  color: var(--doux);
  max-width: 46ch;
  margin: 0 0 clamp(16px, 2vw, 26px);
}

.galerie__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}
.galerie__tags span{
  font-size: 12.5px;
  letter-spacing: .02em;
  padding: 6px 12px;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  color: var(--texte);
  white-space: nowrap;
}

.galerie__lien{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15.5px;
  position: relative;
  padding-bottom: 4px;
}
.galerie__lien::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--degrade);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--eas);
}
.galerie__lien:hover::after,
.galerie__lien:focus-visible::after{ transform: scaleX(1); }
.galerie__lien .fleche{ transition: transform .45s var(--eas); }
.galerie__lien:hover .fleche{ transform: translateX(6px); }

/* --- le visuel : la capture dans un cadre d'écran, avec le mobile en écho --- */
.galerie__scene{
  position: relative;
  isolation: isolate;
}
.galerie__scene::before{
  content: "";
  position: absolute;
  inset: 8% -6% -10% 12%;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(175,38,250,.13), rgba(1,1,253,.06) 55%, transparent 72%);
  filter: blur(30px);
  z-index: -1;
  opacity: .9;
}

/* l'écran */
.galerie__ecran{
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--blanc);
  box-shadow: var(--gal-ombre);
  border: 1px solid rgba(12,12,16,.10);
  transition: box-shadow .6s var(--eas), transform .6s var(--eas);
}
.galerie__ecran:hover{ box-shadow: var(--gal-ombre-forte); }

.galerie__barre{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: #F1EFEA;
  border-bottom: 1px solid rgba(12,12,16,.08);
}
.galerie__barre i{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(12,12,16,.22);
  display: block;
}
.galerie__url{
  flex: 1;
  margin-left: 8px;
  font-size: 11.5px;
  color: var(--doux);
  background: var(--blanc);
  border-radius: 999px;
  padding: 3px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.galerie__vue{
  position: relative;
  aspect-ratio: 16 / 10.6;
  overflow: hidden;
  background: var(--papier-2);
}
.galerie__vue img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.005);
  transition: transform 1.4s var(--eas);
}
.galerie__ecran:hover .galerie__vue img{ transform: scale(1.035); }

/* le mobile en écho, posé sur le coin de l'écran */
.galerie__mobile{
  position: absolute;
  right: clamp(-6px, -1vw, 0px);
  bottom: clamp(-26px, -3vw, -14px);
  width: clamp(78px, 13%, 132px);
  aspect-ratio: 9 / 19;
  border-radius: clamp(12px, 1.6vw, 20px);
  overflow: hidden;
  background: var(--blanc);
  border: 3px solid var(--encre);
  box-shadow: 0 18px 34px -14px rgba(12,12,16,.45);
  transition: transform .7s var(--eas);
}
.galerie__mobile img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.galerie__scene:hover .galerie__mobile{ transform: translateY(-8px) rotate(-1.5deg); }

/* --- révélation au scroll : chaque vitrine s'ouvre depuis son côté --- */
.galerie[data-revele]{ opacity: 0; }
.galerie[data-revele] .galerie__fiche,
.galerie[data-revele] .galerie__scene{
  opacity: 0;
  transform: translate3d(-30px, 26px, 0);
  transition: opacity .9s var(--eas), transform 1s var(--eas);
}
.galerie[data-revele].galerie--inverse .galerie__fiche,
.galerie[data-revele].galerie--inverse .galerie__scene{
  transform: translate3d(30px, 26px, 0);
}
.galerie[data-revele].est-la{
  opacity: 1;
}
.galerie[data-revele].est-la .galerie__fiche{ opacity: 1; transform: none; transition-delay: .04s; }
.galerie[data-revele].est-la .galerie__scene{ opacity: 1; transform: none; transition-delay: .16s; }

/* --- sur grand écran, la vitrine respire plus large --- */
@media (min-width: 1800px){
  .galerie{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); }
}

/* --- tablette et mobile : tout en colonne, mobile en écho réduit --- */
@media (max-width: 900px){
  .galerie,
  .galerie--inverse{
    grid-template-columns: minmax(0, 1fr);
    direction: ltr;
    gap: clamp(20px, 4vw, 32px);
    padding-block: clamp(30px, 6vw, 48px);
  }
  .galerie__scene{ order: -1; }
  .galerie__nom{ max-width: none; font-size: clamp(23px, 6.4vw, 32px); }
  .galerie__metier{ font-size: 16px; }
  .galerie__mobile{
    width: clamp(64px, 17%, 96px);
    bottom: clamp(-18px, -2vw, -10px);
    border-width: 2.5px;
  }
  .galerie[data-revele] .galerie__fiche,
  .galerie[data-revele] .galerie__scene,
  .galerie[data-revele].galerie--inverse .galerie__fiche,
  .galerie[data-revele].galerie--inverse .galerie__scene{
    transform: translate3d(0, 24px, 0);
  }
}

@media (prefers-reduced-motion: reduce){
  .galerie[data-revele],
  .galerie[data-revele] .galerie__fiche,
  .galerie[data-revele] .galerie__scene{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .galerie__vue img,
  .galerie__mobile,
  .galerie__ecran,
  .galerie__lien .fleche{ transition: none !important; }
}