/* ==========================================================================
   aj-gallery.css, Abdeljalil Hcham
   Les archives freelance : la grille, le bandeau d'avertissement, et la
   visionneuse plein écran.

   --------------------------------------------------------------------------
   Fichier séparé de custom.css, et chargé uniquement sur les deux pages
   longues. Le reste du site n'a pas de galerie : lui faire télécharger ces
   règles serait payer pour quelque chose qu'il n'affiche pas. Même
   raisonnement que pour aj-bot.css, à ceci près que la pastille, elle, est
   partout.

   Préfixe .aj_gal_ pour la même raison que .ajb_ : ne jamais avoir à
   vérifier qu'un nom n'est pas déjà pris dans les quatre mille lignes de
   custom.css.

   --------------------------------------------------------------------------
   UNE DÉCISION QUI SE VOIT : LE BANDEAU EST IMPOSSIBLE À MANQUER.

   Ces images ont entre treize et seize ans. Montrées sans contexte à un
   recruteur, elles disent « voilà son niveau », alors qu'elles disent en
   réalité « voilà d'où il part ». L'écart entre les deux lectures est
   exactement ce que le bandeau existe pour combler, et un avertissement
   discret ne l'aurait pas comblé : il est donc traité comme un élément de
   contenu à part entière, avec le filet coloré des blocs importants du site,
   et il est répété dans la visionneuse pour celui qui clique sans lire.
   ========================================================================== */

/* ==========================================================================
   LE BANDEAU
   ========================================================================== */
.aj_gal_notice {
  background: var(--ajPanel, #121309);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--colorPrimary, #c7d300);
  padding: 28px 30px;
  margin-bottom: 40px;
}

.aj_gal_notice h6 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--colorPrimary, #c7d300);
  margin: 0 0 14px;
}

.aj_gal_notice p {
  font-size: 15px;
  line-height: 26px;
  color: var(--colorBodyText, rgba(177, 177, 177, 1));
  margin: 0 0 14px;
}

.aj_gal_notice p:last-child {
  margin-bottom: 0;
}

.aj_gal_notice strong {
  color: var(--colorWhite, #fff);
  font-weight: 700;
}

/* Le paragraphe sur la confidentialité Deloitte. Il est séparé du reste par
   un filet parce qu'il ne dit pas la même chose que les autres : les deux
   premiers expliquent ce qu'on regarde, celui-ci explique ce qu'on ne
   regardera pas, et pourquoi. C'est le paragraphe qu'un recruteur doit
   retenir. */
.aj_gal_notice_confid {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  margin-top: 4px;
}

/* ==========================================================================
   LA GRILLE

   `auto-fill` plutôt qu'un nombre de colonnes fixe : la grille se réorganise
   seule de quatre colonnes à une, sans une seule requête média.

   Les vignettes sont recadrées en 3/4 avec `object-position: top`. Ce sont
   des maquettes de sites, c'est-à-dire des images très hautes (jusqu'à
   1280x2061) dont tout l'intérêt est dans le premier écran : recadrer par le
   haut montre l'en-tête et le bandeau principal, recadrer au centre aurait
   montré le milieu du pied de page.
   ========================================================================== */
/* Cinq colonnes fixes, et non `auto-fill` comme au premier jet. La
   pagination affiche dix vignettes : avec un nombre de colonnes variable,
   « dix » donnait deux rangées de cinq sur un écran, trois rangées de quatre
   sur un autre, et une dernière rangée bancale. Un nombre fixe par palier
   garantit que dix se divise toujours proprement : 5 + 5, puis 4 + 4 + 2 en
   dessous, puis 2 par 2 sur téléphone. */
.aj_gal_grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aj_gal_grid li {
  margin: 0;
}

/* `hidden` doit gagner contre `display: grid` hérité du conteneur : sans
   cette règle, les quinze vignettes des autres pages resteraient visibles,
   et surtout le navigateur les téléchargerait. */
.aj_gal_grid li[hidden] {
  display: none;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.aj_gal_pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.aj_gal_pager[hidden] {
  display: none;
}

.aj_gal_pbtn {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--colorBodyText, rgba(177, 177, 177, 1));
  background: var(--ajPanel2, #0f100a);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: color linear 0.2s, background linear 0.2s, border-color linear 0.2s;
}

.aj_gal_pbtn:hover:not(:disabled):not(.is_current) {
  color: var(--colorWhite, #fff);
  border-color: rgba(199, 211, 0, 0.5);
}

.aj_gal_pbtn.is_current {
  color: var(--colorBlack, #0c0c08);
  background: var(--colorPrimary, #c7d300);
  border-color: var(--colorPrimary, #c7d300);
  cursor: default;
}

/* Désactivé plutôt que masqué : un bouton qui disparaît décale toute la
   rangée sous le curseur au moment du clic. */
.aj_gal_pbtn:disabled {
  opacity: 0.3;
  cursor: default;
}

.aj_gal_pbtn:focus-visible {
  outline: 2px solid var(--colorPrimary, #c7d300);
  outline-offset: 2px;
}

.aj_gal_item {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--ajPanel2, #0f100a);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color linear 0.25s, transform 0.25s ease;
}

.aj_gal_item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  /* Le thème d'origine impose `height: 100% !important` à toutes les images.
     Sans cette ligne, le ratio ci-dessus est ignoré et les vignettes
     s'écrasent. Un !important ne se bat qu'avec un !important. */
  height: auto !important;
  filter: saturate(0.85);
  transition: filter 0.3s linear, transform 0.4s ease;
}

.aj_gal_item:hover {
  border-color: var(--colorPrimary, #c7d300);
}

.aj_gal_item:hover img,
.aj_gal_item:focus-visible img {
  filter: saturate(1);
  transform: scale(1.04);
}

.aj_gal_item:focus-visible {
  outline: 2px solid var(--colorPrimary, #c7d300);
  outline-offset: 2px;
}

/* L'année, posée dans le coin. Ces images sont datées et la date fait partie
   du message : une maquette de 2010 se juge autrement qu'une de 2012. */
.aj_gal_year {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--colorBlack, #0c0c08);
  background: var(--colorPrimary, #c7d300);
}

/* ==========================================================================
   LA VISIONNEUSE
   ========================================================================== */
.aj_gal_box {
  position: fixed;
  inset: 0;
  z-index: 10050;   /* au-dessus de la pastille du chatbot (9998) */
  display: flex;
  flex-direction: column;
  background: rgba(6, 6, 4, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s linear, visibility 0.22s linear;
}

.aj_gal_box.is_open {
  opacity: 1;
  visibility: visible;
}

.aj_gal_bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.aj_gal_count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--colorPrimary, #c7d300);
  font-variant-numeric: tabular-nums;
}

.aj_gal_close {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--ajMuted, rgba(177, 177, 177, 0.75));
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: color linear 0.2s, border-color linear 0.2s;
}

.aj_gal_close:hover,
.aj_gal_close:focus-visible {
  color: var(--colorPrimary, #c7d300);
  border-color: rgba(199, 211, 0, 0.4);
}

/* --- La scène ------------------------------------------------------------
   L'image est contenue en entier, jamais rognée. Ces maquettes font jusqu'à
   2061 pixels de haut : les afficher à leur largeur naturelle obligerait à
   faire défiler chaque image, ce qui transforme une galerie qu'on feuillette
   en un document qu'on lit. Pour le détail, le lien « taille réelle » ouvre
   le fichier. */
.aj_gal_stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 18px 68px;
}

.aj_gal_stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 1;
  transition: opacity 0.15s linear;
}

.aj_gal_stage img.is_loading {
  opacity: 0.25;
}

.aj_gal_nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: var(--colorWhite, #fff);
  background: rgba(18, 19, 9, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  font-family: inherit;
  transition: background linear 0.2s, border-color linear 0.2s, color linear 0.2s;
}

.aj_gal_nav:hover,
.aj_gal_nav:focus-visible {
  color: var(--colorBlack, #0c0c08);
  background: var(--colorPrimary, #c7d300);
  border-color: var(--colorPrimary, #c7d300);
}

.aj_gal_prev { left: 10px; }
.aj_gal_next { right: 10px; }

/* --- Le rappel, en bas ---------------------------------------------------
   Celui qui a cliqué sur la première vignette sans lire le bandeau est
   exactement celui à qui il faut redire de quoi il s'agit. Deux lignes, tout
   le temps visibles, à l'endroit où le regard retombe après l'image. */
.aj_gal_foot {
  flex: 0 0 auto;
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.aj_gal_foot p {
  max-width: 780px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 19px;
  color: var(--ajMuted, rgba(177, 177, 177, 0.75));
}

.aj_gal_foot strong {
  color: var(--colorPrimary, #c7d300);
  font-weight: 700;
}

.aj_gal_foot a {
  color: var(--colorPrimary, #c7d300);
  border-bottom: 1px solid rgba(199, 211, 0, 0.4);
  white-space: nowrap;
}

/* Le défilement de la page est bloqué pendant que la visionneuse est
   ouverte, sinon la molette fait glisser le site derrière l'image. */
body.aj_gal_locked {
  overflow: hidden;
}

/* ==========================================================================
   PETITS ÉCRANS
   ========================================================================== */
/* Paliers de colonnes. Chacun divise dix sans laisser de rangée orpheline
   au milieu de la page : 5, puis 4, puis 2. */
@media (max-width: 1199.98px) {
  .aj_gal_grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767.98px) {
  .aj_gal_notice {
    padding: 22px 20px;
  }

  /* Mesuré : à 320 pixels de large, le bandeau faisait 740 pixels de haut,
     soit une fois et demie l'écran, avant la première vignette. Il doit
     rester impossible à manquer, pas impossible à dépasser. Un point de
     moins et trois pixels d'interligne en moins le ramènent sous les 650
     sans rien retirer du texte. */
  .aj_gal_notice p {
    font-size: 14px;
    line-height: 23px;
  }

  .aj_gal_grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* Les flèches passent sous l'image : à 375 pixels de large, 68 pixels de
     marge de chaque côté ne laissaient presque rien à l'image elle-même. Le
     balayage horizontal fonctionne de toute façon, les flèches deviennent
     une commodité plutôt que le moyen principal. */
  /* Les flèches passent sous l'image, et la réserve en bas leur fait de la
     place : sans elle, l'image centrée descend jusque sous les boutons, et
     le bas de la maquette se retrouve caché derrière deux rectangles. 64
     pixels, c'est la hauteur des flèches plus leur marge. */
  .aj_gal_stage {
    padding: 12px 12px 64px;
  }

  .aj_gal_nav {
    top: auto;
    bottom: 10px;
    transform: none;
    width: 52px;
    height: 44px;
  }

  .aj_gal_prev { left: 12px; }
  .aj_gal_next { right: 12px; }

  .aj_gal_foot p {
    font-size: 11px;
    line-height: 17px;
  }
}

/* Sur téléphone, deux colonnes : à trois, une maquette de site fait
   105 pixels de large et on ne distingue plus rien de ce qu'elle montre. */
@media (max-width: 479.98px) {
  .aj_gal_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .aj_gal_pbtn {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aj_gal_item,
  .aj_gal_item img,
  .aj_gal_box,
  .aj_gal_stage img {
    transition: none;
  }

  .aj_gal_item:hover img {
    transform: none;
  }
}