/* ===========================================================
   CyNoLux — Portfolio (v5)
   Chargée après refonte.css, uniquement sur /portfolio et les
   pages projet.

   Deux partis pris :

   1. Les vignettes n'ont plus de photo générique : le fond est
      peint (dégradé navy/or) et porté par des icônes propres à
      chaque projet — deux icônes « fantômes » en coin plus un
      écho agrandi du badge — pendant qu'un emplacement dédié
      attend le vrai logo de l'application au centre.

   2. Les animations servent la lecture, jamais le spectacle.
      Elles indiquent ce qui est cliquable, ce qui vient
      d'arriver, ce qui a changé — et disparaissent toutes si
      le visiteur a demandé moins de mouvement.
   =========================================================== */

/* -----------------------------------------------------------
   1. LA GRILLE DE PROJETS
   ----------------------------------------------------------- */

.project-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line);
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s var(--ease);
}

/* Vignette : hauteur portante, et non plus une bande de 170 px.
   Le fond est peint, pas photographié. L'angle du dégradé et la
   position du halo doré varient avec l'index de la carte : la
   planche respire sans jamais sortir de la palette. */
.project-thumb {
  height: 210px;
  background:
    radial-gradient(
      circle at calc(26% + var(--i, 0) * 4%) -12%,
      rgba(253, 185, 19, 0.22),
      transparent 52%
    ),
    linear-gradient(
      calc(130deg + var(--i, 0) * 5deg),
      var(--navy-800),
      var(--navy-600) 62%,
      var(--navy-500)
    );
}

/* Fond thématique : chaque vignette porte trois icônes « fantômes »
   propres au projet (deux au choix libre + un écho agrandi du badge)
   plutôt que l'une des trois photos génériques d'origine. Le fond
   dit ce que fait le produit avant même la lecture du texte.
   Chacune dérive doucement en boucle ; le déphasage négatif basé
   sur --i évite que les trente-trois cartes respirent en même
   temps quand la grille apparaît à l'écran. */
.project-ghost {
  position: absolute;
  z-index: 1;
  color: rgba(255, 255, 255, 0.17);
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), animation-duration 0.4s var(--ease);
}
.project-ghost-1 {
  top: 2px;
  left: 6px;
  font-size: 5rem;
  animation: ghost-drift-1 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.9s);
}
.project-ghost-2 {
  top: -18px;
  right: -14px;
  font-size: 5.4rem;
  animation: ghost-drift-2 8.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
}
.project-ghost-3 {
  bottom: -34px;
  right: -20px;
  font-size: 8.4rem;
  color: rgba(255, 255, 255, 0.1);
  animation: ghost-pulse-3 9s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
@keyframes ghost-drift-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(4px, -10px) rotate(-4deg); }
}
@keyframes ghost-drift-2 {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(10px); }
}
@keyframes ghost-pulse-3 {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.09) rotate(3deg); }
}
.project-card:hover .project-ghost { opacity: 0.9; animation-duration: 3s; }

/* Badge d'icône : coin haut-gauche de la vignette. Identifie le
   produit avant même que le logo ne soit posé au centre. */
.project-badge {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(6, 17, 40, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--gold-400);
  font-size: 1.05rem;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s var(--ease),
    background 0.4s var(--ease);
}
.project-card:hover .project-badge {
  transform: translateY(-3px);
  border-color: rgba(253, 185, 19, 0.6);
  background: rgba(6, 17, 40, 0.68);
}

/* Emplacement du logo : réservé au centre de la vignette, en
   attente de l'import du visuel réel de chaque application.
   Tant qu'aucune image ne charge (404 volontaire), l'icône
   bootstrap sert de repère visuel discret plutôt que de casser
   la carte avec l'icône « image cassée » du navigateur. */
.project-logo {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 104px;
  height: 104px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.011);
  border: 1px solid rgba(255, 255, 255, 0.032);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.project-logo img {
  /* lab.css pose un ancien réglage `.project-thumb img { position:absolute;
     inset:0; width:100%; height:100% }` pensé pour une photo plein cadre.
     On le neutralise explicitement ici pour que le logo reste centré et
     à taille contenue dans son emplacement, quel que soit l'ordre de
     chargement des feuilles de style. */
  position: relative;
  inset: auto;
  width: 95%;
  height: 95%;
  object-fit: contain;
  transform: none;
}
.project-logo.is-empty img { display: none; }
.project-logo.is-empty::after {
  content: "\f42a"; /* bi-image */
  font-family: "bootstrap-icons";
  font-size: 2.1rem;
  color: rgba(255, 255, 255, 0.32);
}

/* Trame technique par-dessus : supprimée — les icônes fantômes
   suffisent à porter le fond, la grille technique alourdissait
   inutilement la planche. */

/* Le monogramme devient l'élément d'identité : c'est lui qui
   distingue SamaRH de SamaPaie, pas la photo. */
.project-thumb span {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(6, 17, 40, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  color: #fff;
  opacity: 1;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s var(--ease),
    background 0.4s var(--ease);
}
.project-card:hover .project-thumb span {
  transform: translateY(-3px);
  border-color: rgba(253, 185, 19, 0.6);
  background: rgba(6, 17, 40, 0.68);
}

/* Une flèche apparaît au survol : le signal que la carte mène
   quelque part. Elle n'existe pas au repos, pour ne pas répéter
   trente-deux fois la même icône sur la planche. */
.project-thumb::after {
  content: "\f138"; /* bi-arrow-right-circle-fill */
  font-family: "bootstrap-icons";
  position: absolute;
  z-index: 3;
  inset: auto 18px 18px auto;
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: var(--gold-400);
  background: none;
  opacity: 0;
  transform: translateX(-8px) scale(0.8);
  transition:
    opacity 0.4s var(--ease),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .project-thumb::after {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.project-body { padding: 24px 24px 26px; }
.project-cat {
  display: inline-block;
  font-size: 0.68rem;
  color: var(--gold-700);
}
[data-theme="dark"] .project-cat { color: var(--gold-400); }

.project-body h3 {
  margin: 8px 0 8px;
  font-size: 1.22rem;
  transition: color 0.3s var(--ease);
}
.project-card:hover .project-body h3 { color: var(--navy-600); }
[data-theme="dark"] .project-card:hover .project-body h3 { color: var(--gold-300); }

/* Le résumé tient en quatre lignes : toutes les cartes s'alignent,
   et le texte long ne fait pas éclater la grille. */
.project-body p {
  font-size: 0.89rem;
  line-height: 1.6;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-client {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
  color: var(--ink-quiet);
}
.project-client i { color: var(--gold-600); }

/* -----------------------------------------------------------
   2. ARRIVÉE ET FILTRAGE
   L'apparition est décalée de proche en proche pour que l'œil
   suive la grille au lieu de la recevoir d'un bloc.
   ----------------------------------------------------------- */
.grid .project-card { transition-delay: calc(var(--i, 0) * 45ms); }

.project-card.is-filtering {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
}
.project-card {
  transition-property: transform, box-shadow, border-color, opacity;
}

/* Les boutons de filtre : l'état actif se lit d'abord, et le
   survol annonce le clic. */
.portfolio-filters { gap: 10px; flex-wrap: wrap; }
.filter-btn {
  position: relative;
  transition:
    background 0.35s var(--ease),
    color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.filter-btn:hover { transform: translateY(-2px); }
.filter-btn.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-500);
  transform: translateX(-50%);
}

/* -----------------------------------------------------------
   3. EN-TÊTE DE LA PAGE PORTFOLIO
   L'intro et l'astuce de clic flottaient, centrées, sans
   structure. On leur donne la même grammaire que les autres
   sections du site.
   ----------------------------------------------------------- */
.portfolio-intro {
  max-width: 60ch;
  margin: 0 auto 10px;
  text-align: center;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.portfolio-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 30px;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  color: var(--ink-quiet);
}
.portfolio-hint i { color: var(--gold-600); }

/* -----------------------------------------------------------
   4. PAGES PROJET — LE VISUEL D'EN-TÊTE
   La fausse fenêtre de navigateur ne contenait qu'une icône et
   un mot posés au centre. On en fait une scène : halo animé,
   trame en perspective, monogramme qui respire.
   ----------------------------------------------------------- */
.pd-visual {
  border: 1px solid var(--line);
  box-shadow: var(--lift);
  overflow: hidden;
}
.pd-visual-stage {
  position: relative;
  min-height: 300px;
  background:
    radial-gradient(circle at 50% 120%, rgba(253, 185, 19, 0.16), transparent 62%),
    linear-gradient(150deg, var(--navy-800), var(--navy-600) 65%, var(--navy-500));
  overflow: hidden;
}
/* Trame en fuite : donne de la profondeur sans image. */
.pd-visual-stage::before {
  content: "";
  position: absolute;
  inset: -40% -20% -10%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(600px) rotateX(58deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000, transparent 72%);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 72%);
  pointer-events: none;
}
.pd-visual-glow { animation: pd-breathe 7s ease-in-out infinite; }
@keyframes pd-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.1); }
}
.pd-visual-icon {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(253, 185, 19, 0.32);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.7);
  animation: pd-float 6s ease-in-out infinite;
}
@keyframes pd-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.pd-visual-word {
  position: relative;
  z-index: 2;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: -0.03em;
}
/* Un filet doré signe le bas de la scène, comme sur la plaque
   de chiffres de l'accueil. Même geste, même famille. */
.pd-visual-stage::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 110px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), transparent);
}

/* -----------------------------------------------------------
   5. PAGES PROJET — LE BLOC « CE QUE ÇA CHANGE »
   Nouveau. Il répond à la question qu'un visiteur se pose
   vraiment devant une réalisation : et pour moi, ça donne quoi ?
   ----------------------------------------------------------- */
.pd-impact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line-soft);
}
.pd-impact-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 19px 22px;
  background: var(--surface, #fff);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  transition: background 0.35s var(--ease), padding-inline-start 0.35s var(--ease);
}
[data-theme="dark"] .pd-impact-item { background: var(--plaque); }
.pd-impact-item:hover {
  background: var(--bg-soft);
  padding-inline-start: 28px;
}
[data-theme="dark"] .pd-impact-item:hover { background: rgba(255, 255, 255, 0.04); }

/* Une barre dorée verticale plutôt qu'une énième coche : les
   fonctionnalités juste en dessous en sont déjà couvertes. */
.pd-impact-mark {
  flex: none;
  width: 3px;
  align-self: stretch;
  min-height: 22px;
  margin-top: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--gold-500), var(--gold-400));
}

/* -----------------------------------------------------------
   6. PAGES PROJET — FONCTIONNALITÉS ET DIVERS
   ----------------------------------------------------------- */
.pd-feature {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s var(--ease);
}
.pd-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(253, 185, 19, 0.45);
}
.pd-feature-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pd-feature:hover .pd-feature-icon { transform: scale(1.14) rotate(-8deg); }

.pd-lead {
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.pd-lead strong { color: var(--ink); font-weight: 700; }

.pmodal-pill { transition: transform 0.35s var(--ease), border-color 0.35s var(--ease); }
.pmodal-pill:hover { transform: translateY(-2px); border-color: rgba(253, 185, 19, 0.5); }

.pd-related-card {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s var(--ease),
    border-color 0.35s var(--ease);
}
.pd-related-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift-soft);
  border-color: rgba(253, 185, 19, 0.42);
}
.pd-related-card .pd-related-thumb {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: grid;
  place-items: center;
}
/* L'icône était posée en navy sur une pastille navy : on ne
   voyait qu'un carré bleu vide. */
.pd-related-card .pd-related-thumb i { color: var(--gold-400); font-size: 1.05rem; }
.pd-related-card:hover .pd-related-thumb { transform: scale(1.1); }

/* Le lien de retour annonce son geste. */
.detail-back i { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.detail-back:hover i { transform: translateX(-5px); }

/* Pagination bas de page : la flèche accompagne le sens. */
.pmodal-nav-btn { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.pmodal-nav-btn:first-child:hover { transform: translateX(-5px); }
.pmodal-nav-btn:last-child:hover { transform: translateX(5px); }

/* Le chapeau du hero tombait à 2,5:1 sur le navy. */
.page-hero.has-media > .container > p { color: rgba(255, 255, 255, 0.88); }
.hero-meta-chip { color: rgba(255, 255, 255, 0.92); }

/* La carte latérale suit la lecture sur grand écran. */
@media (min-width: 1100px) {
  .pd-side .pd-info-card {
    position: sticky;
    top: 112px;
  }
}

/* -----------------------------------------------------------
   7. MOINS DE MOUVEMENT SI ON L'A DEMANDÉ
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pd-visual-glow,
  .pd-visual-icon { animation: none; }
  .grid .project-card { transition-delay: 0ms !important; }
  .project-card:hover,
  .pd-feature:hover,
  .pd-related-card:hover,
  .filter-btn:hover,
  .pmodal-nav-btn:hover { transform: none; }
  .project-card:hover .project-thumb img { transform: none; }
  .project-ghost { animation: none; }
}

/* -----------------------------------------------------------
   8. ASSISTANT DE CHOIX PRODUIT
   Trente-deux cartes, c'est beaucoup à comparer soi-même. Le
   bouton sous les filtres ouvre une petite modale qui demande
   le besoin en une phrase et renvoie vers les projets les plus
   proches — même grammaire visuelle que la palette Ctrl+K.
   ----------------------------------------------------------- */
.pf-trigger-row {
  display: flex;
  justify-content: center;
  margin: -6px 0 30px;
}

/* Jumeau flottant du bouton d'aide, posé dans la pile .lab-fab :
   un accent doré le distingue du WhatsApp (vert) et de la recherche (neutre). */
.lab-fab .fab-help {
  background: linear-gradient(140deg, var(--gold-500), var(--gold-400));
  color: #14213a;
  border-color: transparent;
  box-shadow: 0 12px 26px -10px rgba(253, 185, 19, 0.55);
}

.pf-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 16, 38, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pf-modal.is-open {
  display: flex;
  animation: cmdk-fade 0.2s var(--ease);
}
.pf-panel {
  width: 100%;
  max-width: 540px;
  max-height: 86vh;
  overflow-y: auto;
  border-radius: 22px;
  padding: 40px 34px 32px;
  position: relative;
  text-align: center;
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  box-shadow: 0 40px 90px -30px rgba(7, 25, 56, 0.6);
  animation: cmdk-pop 0.28s var(--ease-out);
}
[data-theme="dark"] .pf-panel { background: rgba(12, 26, 54, 0.94); }

.pf-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--ink-quiet);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.pf-close:hover { background: var(--gold-500); color: #14213a; }

.pf-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(140deg, var(--gold-500), var(--gold-400));
  color: #14213a;
  font-size: 1.3rem;
}
.pf-step h3 { font-size: 1.2rem; margin-bottom: 8px; }
.pf-step > p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; margin-bottom: 22px; }

.pf-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.pf-input {
  flex: 1;
  min-width: 220px;
  padding: 13px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface, #fff);
  font-size: 0.92rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s var(--ease);
}
.pf-input:focus { border-color: var(--gold-500); }
[data-theme="dark"] .pf-input { background: rgba(255, 255, 255, 0.06); }

.pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}
.pf-chip {
  padding: 7px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--line-soft);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.pf-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(253, 185, 19, 0.55);
  background: rgba(253, 185, 19, 0.12);
}

.pf-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 18px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-quiet);
  transition: color 0.25s var(--ease);
}
.pf-back:hover { color: var(--gold-600); }
.pf-results-title { font-size: 1.05rem; margin-bottom: 16px; }

.pf-results-list { display: grid; gap: 8px; }
.pf-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  text-align: left;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.pf-result:hover {
  transform: translateY(-2px);
  border-color: rgba(253, 185, 19, 0.5);
  background: rgba(253, 185, 19, 0.08);
}
.pf-result-mono {
  flex-shrink: 0;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--line-soft);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--navy-600);
}
[data-theme="dark"] .pf-result-mono { color: var(--gold-400); }
.pf-result-txt { flex: 1; min-width: 0; }
.pf-result-title { display: block; font-weight: 700; font-size: 0.94rem; color: var(--ink); }
.pf-result-cat {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-result-go { color: var(--ink-faint); flex-shrink: 0; }
.pf-result-alt { border-style: dashed; }

@media (prefers-reduced-motion: reduce) {
  .pf-modal.is-open,
  .pf-panel { animation: none; }
  .pf-chip:hover,
  .pf-result:hover { transform: none; }
}