/* =========================================================================
   Sitero — LA GALERIE (page Exemples)
   Ajout du 01/08. Cette feuille ne remplace rien : elle vient EN PLUS de
   style.css et ne touche à aucune classe existante. Tout est préfixé
   « gal » pour qu'aucun nom ne puisse en écraser un autre.

   Ce qu'on ajoute : une mosaïque de photos d'ambiance sous les trois
   maquettes. Les photos sont DÉCORATIVES. Elles montrent le métier
   (du code, des croquis de mise en page, des couleurs, des bureaux), et
   surtout pas des sites livrés : la page ne doit jamais laisser croire
   qu'il s'agit de clients réels.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. LE BLOC ENTIER
   Il respire beaucoup au-dessus : la mosaïque doit se lire comme un second
   chapitre, pas comme la suite de la grille de maquettes.
   ------------------------------------------------------------------------- */
.gal{
  margin-top:clamp(64px,8vw,116px);
}

/* un filet fin en haut, du turquoise de la marque qui s'efface :
   il sépare les deux chapitres sans tirer un trait gris de plus */
.gal__sep{
  height:1px;border:0;margin:0 0 clamp(38px,5vw,64px);
  background:linear-gradient(90deg,var(--tint) 0%,rgba(0,146,181,.18) 24%,rgba(0,0,0,0) 62%);
}

/* -------------------------------------------------------------------------
   2. LE TITRE DU BLOC
   ------------------------------------------------------------------------- */
.gal__head{max-width:660px;margin-bottom:clamp(30px,3.6vw,46px)}
.gal__ti{margin-bottom:14px}
.gal__lead{
  color:var(--ink-2);font-size:clamp(1rem,1.35vw,1.1rem);line-height:1.55;
  text-wrap:pretty;
}
/* La mention honnête, en petit : ce sont des photos d'ambiance.
   Elle est OBLIGATOIRE, c'est elle qui empêche de lire la mosaïque comme
   un portfolio de clients. Ne pas la retirer. */
.gal__note{
  margin-top:16px;font-size:.8rem;line-height:1.5;color:var(--ink-3);
  padding-left:14px;border-left:2px solid var(--line);max-width:62ch;
}

/* -------------------------------------------------------------------------
   3. LA MOSAÏQUE
   Une grille de 6 colonnes ; chaque photo occupe 2, 4 ou 6 colonnes et 1 ou
   2 lignes. Les hauteurs de ligne sont fixes : c'est ce qui garde des
   rangées bien alignées quelles que soient les proportions des photos.
   ------------------------------------------------------------------------- */
.gal__mos{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(122px,14vw,186px);
  gap:clamp(12px,1.3vw,18px);
}

/* une case = un cadre (la photo) + une légende sous le cadre */
.gal__it{
  margin:0;display:flex;flex-direction:column;min-width:0;
  /* ÉTAT DE REPOS : VISIBLE. Rien ici ne masque la case.
     Sans JavaScript, la galerie s'affiche normalement. Le masquage
     n'existe que le temps de l'animation (voir « gal--anim » plus bas). */
}

/* placements : les lettres suivent l'ordre du HTML */
.gal__it--a{grid-column:span 4;grid-row:span 2}
.gal__it--b{grid-column:span 2}
.gal__it--c{grid-column:span 2}
.gal__it--d{grid-column:span 2;grid-row:span 2}
.gal__it--e{grid-column:span 2;grid-row:span 2}
.gal__it--f{grid-column:span 2;grid-row:span 2}
.gal__it--g{grid-column:span 2}
.gal__it--h{grid-column:span 2}
.gal__it--i{grid-column:span 2}
.gal__it--j{grid-column:span 6;grid-row:span 2}

/* -------------------------------------------------------------------------
   4. LE CADRE ET LA PHOTO
   ------------------------------------------------------------------------- */
.gal__cadre{
  position:relative;display:block;flex:1;min-height:0;overflow:hidden;
  border-radius:var(--r-m);background:var(--paper);
  box-shadow:0 20px 40px -30px rgba(0,0,0,.34);
  transition:box-shadow .7s var(--e-out);
}
.gal__img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* le léger agrandissement au survol : uniquement une transformation,
     donc pris en charge par la carte graphique */
  transform:scale(1.006);
  transition:transform .9s var(--e-out);
}

/* Le voile qui fait la famille : un souffle de turquoise très léger posé
   sur toutes les photos. C'est lui qui donne l'impression que des images
   d'origines différentes ont été prises pour le même site. Il s'efface au
   survol — seule l'opacité change, c'est gratuit pour le navigateur. */
.gal__cadre::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(168deg,rgba(0,146,181,.11) 0%,rgba(0,146,181,.03) 46%,rgba(10,20,26,.10) 100%);
  transition:opacity .7s var(--e-out);
}
.gal__it:hover .gal__cadre::after{opacity:.2}
.gal__it:hover .gal__cadre{box-shadow:0 32px 56px -30px rgba(0,0,0,.42)}
.gal__it:hover .gal__img{transform:scale(1.045)}

/* certaines photos ont un sujet décentré : on choisit la partie gardée */
.gal__it--d .gal__img{object-position:50% 42%}
.gal__it--g .gal__img{object-position:50% 45%}
.gal__it--i .gal__img{object-position:50% 45%}
.gal__it--j .gal__img{object-position:50% 58%}

/* -------------------------------------------------------------------------
   5. LES LÉGENDES
   Elles nomment un savoir-faire, jamais un client ni un résultat.
   ------------------------------------------------------------------------- */
.gal__cap{
  margin-top:10px;font-size:.74rem;letter-spacing:.045em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.35;
}

/* -------------------------------------------------------------------------
   6. L'ANIMATION D'APPARITION
   RÈGLE DU PROJET : une animation ne rend JAMAIS un contenu visible.
   L'état de repos ci-dessus est « visible ». La classe « gal--anim » est
   posée par galerie.js juste avant d'animer, et retirée à la fin — ainsi
   qu'au bout de deux secondes par un filet de sécurité, même si GSAP ne
   répond pas. Si le script ne tourne pas, cette classe n'apparaît jamais.
   ------------------------------------------------------------------------- */
/* « gal__anim » marque tout ce qui participe à la cascade : le titre, les
   deux paragraphes, puis les dix photos. Une seule liste, un seul geste. */
.gal.gal--anim .gal__anim{opacity:0}

/* le script n'anime que « transform » et « opacity » : rien qui oblige le
   navigateur à recalculer la mise en page pendant le défilement */

/* -------------------------------------------------------------------------
   7. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width:1080px){
  .gal__mos{grid-auto-rows:clamp(110px,15vw,158px)}
}
@media (max-width:900px){
  /* deux colonnes, hauteurs libres : chaque photo garde ses proportions */
  .gal__mos{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .gal__it{grid-column:span 1!important;grid-row:span 1!important}
  /* la hauteur ne vient plus de la grille mais des proportions de l'image :
     « flex:none » évite que le cadre cherche à remplir une case sans hauteur */
  .gal__cadre{flex:none;aspect-ratio:4/3}
  /* la première et la dernière restent larges : c'est ce qui garde un
     rythme de mosaïque au lieu d'un simple tableau de vignettes */
  .gal__it--a,.gal__it--j{grid-column:span 2!important}
  .gal__it--a .gal__cadre,.gal__it--j .gal__cadre{aspect-ratio:16/9}
  .gal__it--d .gal__cadre,.gal__it--e .gal__cadre{aspect-ratio:3/4}
}
@media (max-width:520px){
  .gal__mos{grid-template-columns:1fr}
  .gal__it{grid-column:span 1!important}
  .gal__it--a,.gal__it--j{grid-column:span 1!important}
  .gal__cadre,.gal__it--d .gal__cadre,.gal__it--e .gal__cadre{aspect-ratio:4/3}
}

/* -------------------------------------------------------------------------
   8. PRÉFÉRENCES SYSTÈME
   Mouvement réduit : tout est visible tout de suite, plus aucun mouvement.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .gal.gal--anim .gal__anim{opacity:1!important;transform:none!important}
  .gal__img{transition:none}
  .gal__it:hover .gal__img{transform:none}
}

/* Filet du site : quand main.js abandonne les apparitions, la galerie
   s'affiche elle aussi, sans condition. */
html.reveals-off .gal.gal--anim .gal__anim{opacity:1!important;transform:none!important}
/* Sans GSAP, la classe n'est jamais posée ; cette ligne est une ceinture
   de plus au cas où elle resterait accrochée. */
.js-off .gal.gal--anim .gal__anim{opacity:1!important;transform:none!important}

@media print{
  .gal__mos{grid-template-columns:repeat(2,1fr)}
  .gal__cadre::after{display:none}
}