/* ============================================
   Samuel Nkenke Eyebe — Portfolio
   Palette : encre #0E2A66 · bleu #1A4FBF · jaune #F7C223
   ============================================ */

:root {
  --encre: #0E2A66;
  --bleu: #1A4FBF;
  --bleuclair: #EEF3FD;
  --jaune: #F7C223;
  --jaunepale: #FEF6E0;
  --papier: #FBFCFE;
  --trait: #DDE6F7;
  --gris: #5A6B8C;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--jaune);
  color: var(--encre);
}

:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Fonds graphiques ---------- */
.grille {
  background-image:
    linear-gradient(to right, rgba(26, 79, 191, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 79, 191, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 45%, transparent 100%);
}

.grille-sombre {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ---------- Navigation ---------- */
#nav.colle {
  background: rgba(251, 252, 254, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--trait);
  box-shadow: 0 8px 30px -20px rgba(14, 42, 102, .3);
}

.nav-link {
  position: relative;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--gris);
  transition: color .25s;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: var(--jaune);
  transition: width .3s ease;
}

.nav-link:hover,
.nav-link.actif {
  color: var(--encre);
}

.nav-link:hover::after,
.nav-link.actif::after {
  width: 100%;
}

.nav-mobile {
  padding: .875rem .25rem;
  font-weight: 500;
  color: var(--encre);
  border-bottom: 1px solid var(--trait);
}

.nav-mobile:last-of-type {
  border-bottom: 0;
}

/* ---------- Typographie utilitaire ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 700;
  color: var(--bleu);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--jaune);
  flex: none;
}

.souligne {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.souligne::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: .1em;
  height: .34em;
  background: var(--jaune);
  opacity: .5;
  z-index: -1;
  border-radius: 3px;
  transform: skewX(-9deg);
}

.chiffre {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 600;
  color: var(--encre);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- Cartes « ce qui me définit » ---------- */
.carte-fait {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 1.25rem;
  padding: 1.6rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.carte-fait:hover {
  transform: translateY(-4px);
  border-color: rgba(26, 79, 191, .35);
  box-shadow: 0 20px 40px -28px rgba(14, 42, 102, .5);
}

.fait-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--bleu);
  opacity: .55;
}

.fait-titre {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--encre);
  margin-top: .55rem;
  line-height: 1.3;
}

.fait-txt {
  font-size: .9375rem;
  color: var(--gris);
  line-height: 1.65;
  margin-top: .6rem;
}

/* ---------- Cartes expertise ---------- */
.carte-exp {
  position: relative;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 1.5rem;
  padding: 2rem;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.carte-exp::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--jaune);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s ease;
}

.carte-exp:hover {
  transform: translateY(-5px);
  border-color: rgba(26, 79, 191, .3);
  box-shadow: 0 28px 55px -35px rgba(14, 42, 102, .55);
}

.carte-exp:hover::before {
  transform: scaleY(1);
}

.exp-icone {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  background: var(--bleuclair);
  color: var(--bleu);
  transition: background .35s, color .35s;
}

.carte-exp:hover .exp-icone {
  background: var(--encre);
  color: var(--jaune);
}

.exp-titre {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--encre);
  margin-top: 1.4rem;
  line-height: 1.3;
}

.exp-txt {
  color: var(--gris);
  line-height: 1.7;
  margin-top: .85rem;
}

/* ---------- Frise parcours ---------- */
.frise {
  padding-left: 0;
  list-style: none;
}

.frise-item {
  position: relative;
  padding-left: 2.75rem;
  padding-bottom: 3.5rem;
}

.frise-item:last-child {
  padding-bottom: 0;
}

.frise-item::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 1.5rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--trait), rgba(221, 230, 247, 0));
}

.frise-item:last-child::before {
  display: none;
}

.frise-point {
  position: absolute;
  left: 0;
  top: .45rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--jaune);
  box-shadow: 0 0 0 5px var(--jaunepale);
}

.frise-point--pale {
  background: var(--bleu);
  box-shadow: 0 0 0 5px var(--bleuclair);
}

.badge-date {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--bleu);
  background: var(--bleuclair);
  padding: .4rem .85rem;
  border-radius: 999px;
}

.badge-actif {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: 11.5px;
  font-weight: 600;
  color: #0F6E3D;
  background: #E6F6EC;
  padding: .4rem .85rem;
  border-radius: 999px;
}

.badge-actif::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #17A55C;
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .45;
    transform: scale(.75);
  }
}

/* ---------- Reconnaissances ---------- */
.reco {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.reco-an {
  flex: none;
  min-width: 3.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--bleu);
  padding-top: .18rem;
}

.reco-t {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--encre);
  line-height: 1.35;
}

.reco-s {
  font-size: .9rem;
  color: var(--gris);
  line-height: 1.6;
  margin-top: .2rem;
}

/* ---------- Projets ---------- */
.projet {
  display: grid;
  gap: 0;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 1.75rem;
  overflow: hidden;
  transition: box-shadow .4s ease, border-color .4s ease;
}

.projet:hover {
  border-color: rgba(26, 79, 191, .3);
  box-shadow: 0 34px 70px -45px rgba(14, 42, 102, .6);
}

@media (min-width: 900px) {
  .projet {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .projet--inverse .projet-visuel {
    order: 2;
  }
}

.projet-visuel {
  overflow: hidden;
  background: var(--bleuclair);
}

.projet-visuel img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.projet:hover .projet-visuel img {
  transform: scale(1.04);
}

.projet-texte {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 900px) {
  .projet-texte {
    padding: 3rem;
  }
}

.tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--bleu);
  background: var(--bleuclair);
  padding: .38rem .8rem;
  border-radius: 999px;
}

.tag--or {
  color: #7A5A02;
  background: var(--jaunepale);
}

.projet-preuve {
  margin-top: 1.4rem;
  padding-left: 1rem;
  border-left: 3px solid var(--jaune);
  font-size: .9rem;
  font-weight: 500;
  color: var(--encre);
  line-height: 1.6;
}

/* ---------- Logos partenaires ---------- */
.logo-case {
  display: grid;
  place-items: center;
  padding: 1.1rem;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 1rem;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.logo-case img {
  width: 100%;
  height: auto;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .35s ease, opacity .35s ease;
}

.logo-case:hover {
  transform: translateY(-3px);
  border-color: rgba(26, 79, 191, .3);
  box-shadow: 0 18px 36px -26px rgba(14, 42, 102, .5);
}

.logo-case:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* ---------- Cartes références ---------- */
.carte-ref {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 1.5rem;
  padding: 2rem;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.carte-ref:hover {
  transform: translateY(-4px);
  border-color: rgba(26, 79, 191, .3);
  box-shadow: 0 24px 48px -34px rgba(14, 42, 102, .55);
}

.ref-logo {
  width: 118px;
  height: auto;
  border-radius: .6rem;
}

.ref-titre {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--encre);
  margin-top: 1.2rem;
  line-height: 1.3;
}

.ref-txt {
  color: var(--gris);
  line-height: 1.7;
  margin-top: .7rem;
  font-size: .9375rem;
}

/* ---------- Contact ---------- */
.ligne-contact {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 1rem;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}

a.ligne-contact:hover {
  border-color: rgba(26, 79, 191, .4);
  transform: translateX(4px);
  box-shadow: 0 16px 32px -26px rgba(14, 42, 102, .5);
}

.ic-contact {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
  border-radius: .9rem;
  background: var(--bleuclair);
  color: var(--bleu);
}

a.ligne-contact:hover .ic-contact {
  background: var(--encre);
  color: var(--jaune);
}

.lbl-contact {
  display: block;
  font-size: 11px;
  letter-spacing: .13em;
  font-weight: 600;
  color: var(--gris);
  text-transform: uppercase;
}

.val-contact {
  display: block;
  font-weight: 600;
  color: var(--encre);
  margin-top: .18rem;
  font-size: .95rem;
  line-height: 1.4;
}

/* ---------- Formulaire ---------- */
.lbl-champ {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--encre);
  margin-bottom: .5rem;
}

.champ {
  width: 100%;
  padding: .85rem 1rem;
  font-size: .95rem;
  font-family: inherit;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: .85rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
}

.champ::placeholder {
  color: #93A2BE;
}

.champ:focus {
  outline: none;
  background: #fff;
  border-color: var(--bleu);
  box-shadow: 0 0 0 4px rgba(26, 79, 191, .12);
}

.champ:user-invalid {
  border-color: #D14343;
}

select.champ {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235A6B8C' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 2.75rem;
}

/* ---------- Bouton retour haut ---------- */
#haut.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Animations d'apparition ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.2, .7, .3, 1) var(--d, 0s),
    transform .8s cubic-bezier(.2, .7, .3, 1) var(--d, 0s);
  will-change: opacity, transform;
}

.reveal.vu {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Impression ---------- */
@media print {

  #nav,
  #haut,
  #contactForm,
  .projet-visuel {
    display: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  body {
    background: #fff;
  }
}