/* =====================================================================
   Nokinomo : gabarit des pages projets (projets-fr / projets-en)
   Chargé après style.css et responsive.css
   ===================================================================== */

:root {--nk-red: #e5251d; --nk-ink: #232323; --nk-grey: #99999c; --edge: 65px;}
@media (max-width: 1199px) {:root {--edge: 50px;}}
@media (max-width: 991px) {:root {--edge: 40px;}}
@media (max-width: 767px) {:root {--edge: 15px;}}

.nk-page {font-family: 'Barlow', sans-serif;}
.nk-wrap {padding: 0 var(--edge);}

/* ---------- Haut de page ---------- */
.nk-hero {background: #f7f7f7;}
.nk-hero-grid {display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 640px;}
.nk-hero-media {margin: 0; position: relative; overflow: hidden; background: #1b2a5c;}
.nk-hero-media img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.nk-hero-text {padding: 96px var(--edge) 72px 7%; display: flex; flex-direction: column; justify-content: center;}
.nk-eyebrow {font-family: 'Barlow Semi Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--nk-red); margin: 0 0 14px;}
.nk-title {font-family: 'Barlow Semi Condensed', sans-serif; font-size: 50px; line-height: 1.02; font-weight: 600; color: var(--nk-ink); letter-spacing: -.5px; margin: 0 0 24px;}
.nk-lead {font-family: 'Barlow', sans-serif; font-size: 19px; line-height: 1.55; color: var(--nk-ink); margin: 0 0 22px; max-width: 34em;}
.nk-body {font-family: 'Barlow', sans-serif; font-size: 15px; line-height: 1.75; color: #6f6f6f; margin: 0 0 16px; max-width: 38em;}
.nk-facts {display: flex; flex-wrap: wrap; gap: 20px 36px; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid #e4e4e4;}
.nk-facts div {min-width: 110px;}
.nk-facts dt, .nk-credits dt {font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--nk-grey); margin-bottom: 4px;}
.nk-facts dd {font-family: 'Barlow', sans-serif; margin: 0; font-size: 15px; color: var(--nk-ink); font-weight: 500;}

/* ---------- Vidéos (YouTube chargé au clic) ---------- */
.nk-video {padding-top: 96px;}
.nk-video + .nk-video {padding-top: 24px;}
.nk-yt {position: relative; aspect-ratio: 16 / 9; background: #0e1630; cursor: pointer; border: 0; width: 100%; padding: 0; display: block; overflow: hidden;}
.nk-yt img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.nk-yt::after {content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--nk-red); box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .2s; z-index: 1;}
.nk-yt::before {content: ""; position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -6px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; z-index: 2;}
.nk-yt:hover::after {transform: scale(1.08);}
.nk-yt iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3;}
.nk-yt.is-playing {cursor: default;}
.nk-yt.is-playing::before, .nk-yt.is-playing::after {display: none;}

/* ---------- Galerie ---------- */
.nk-gallery {padding-top: 24px;}
.nk-gallery:first-child, .nk-hero + .nk-gallery {padding-top: 96px;}
.nk-row {display: grid; gap: 24px; margin-bottom: 24px;}
.nk-row.two {grid-template-columns: repeat(2, minmax(0, 1fr));}
.nk-row figure {margin: 0; overflow: hidden; background: #eef1f7;}
.nk-row.two figure {aspect-ratio: 16 / 10;}
.nk-row img {width: 100%; height: 100%; object-fit: cover; display: block;}

/* ---------- Textes dans la galerie ---------- */
.nk-text {max-width: 46em; margin: 56px 0 40px;}
.nk-text h2 {font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--nk-ink); letter-spacing: -.3px; margin: 0 0 18px;}
.nk-text h3 {font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.25; color: var(--nk-ink); margin: 26px 0 8px;}
.nk-text p {font-family: 'Barlow', sans-serif; font-size: 16px; line-height: 1.75; color: #555; margin: 0 0 14px;}

/* ---------- Crédits ---------- */
.nk-credits {background: #f7f7f7; padding: 80px 0; margin-top: 72px;}
.nk-credits h2 {font-family: 'Barlow Semi Condensed', sans-serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--nk-red); font-weight: 600; margin: 0 0 28px;}
.nk-credits dl {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; margin: 0;}
.nk-credits dd {font-family: 'Barlow', sans-serif; margin: 0; font-size: 15px; color: var(--nk-ink);}

/* ---------- Navigation entre projets ---------- */
.nk-nav {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 34px var(--edge); border-top: 1px solid #ececec;}
.nk-nav a {color: var(--nk-ink);}
.nk-nav a:hover {color: var(--nk-red);}
.nk-nav span {display: block; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--nk-grey); margin-bottom: 2px;}
.nk-nav strong {font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 18px;}
.nk-nav .nk-next {text-align: right;}
.nk-nav .nk-home-link {font-size: 20px;}

/* ---------- Pied de page sombre ---------- */
.nk-page footer.footer-strip-dark {background: #141414 !important; color: rgba(255,255,255,.55);}
.nk-page footer .container {max-width: none !important; width: 100%; padding: 0 var(--edge) !important;}
.nk-page footer .row {margin: 0 !important;}
.nk-page footer .row > [class*="col"]:first-child {padding-left: 0 !important;}
.nk-page footer .row > [class*="col"]:last-child {padding-right: 0 !important;}
.nk-page footer a {color: rgba(255,255,255,.8) !important;}
.nk-page footer a:hover {color: #fff !important;}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .nk-hero-grid {grid-template-columns: minmax(0, 1fr); min-height: 0;}
  .nk-hero-media {aspect-ratio: 16 / 10;}
  .nk-hero-text {padding: 40px var(--edge) 48px;}
  .nk-title {font-size: 38px;}
  .nk-credits dl {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 767px) {
  .nk-row.two {grid-template-columns: minmax(0, 1fr);}
  .nk-row {gap: 16px; margin-bottom: 16px;}
  .nk-video, .nk-gallery:first-child, .nk-hero + .nk-gallery {padding-top: 56px;}
  .nk-lead {font-size: 17px;}
  .nk-text {margin: 40px 0 28px;}
  .nk-text h2 {font-size: 25px;}
  .nk-credits {padding: 56px 0; margin-top: 48px;}
  .nk-nav strong {font-size: 15px;}
  .nk-page footer .row > [class*="col"] {text-align: left !important; padding-left: 0 !important;}
}

/* ---------- Encarts (citations tirées de l'installation) ---------- */
.nk-callouts {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 72px 0;}
.nk-callout {background: #f7f7f7; padding: 40px 40px 36px; border-left: 3px solid var(--nk-red);}
.nk-callout .nk-eyebrow {color: var(--nk-grey);}
.nk-callout p.q {font-family: 'Barlow Semi Condensed', sans-serif; font-size: 25px; line-height: 1.3; font-weight: 600; color: var(--nk-ink); margin: 0;}
@media (max-width: 767px) {.nk-callouts {grid-template-columns: minmax(0, 1fr); margin: 48px 0; gap: 16px;} .nk-callout {padding: 28px 24px;} .nk-callout p.q {font-size: 20px;}}

/* =====================================================================
   Pages À propos et Contact (même système que l'accueil et les projets)
   ===================================================================== */
.nk-hero.nk-hero-rev .nk-hero-grid {grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);}
.nk-hero-rev .nk-hero-text {padding: 96px 7% 72px var(--edge); order: 1;}
.nk-hero-rev .nk-hero-media {order: 2;}
@media (max-width: 991px) {.nk-hero.nk-hero-rev .nk-hero-grid {grid-template-columns: minmax(0, 1fr);} .nk-hero-rev .nk-hero-text {padding: 40px var(--edge) 48px;}}
.nk-hero-text .nk-actions {margin-top: 12px;}
.nk-section {padding: 96px 0; border-top: 1px solid #ececec;}
.nk-section.nk-grey {background: #f7f7f7; border-top: 0;}
.nk-split {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px;}
.nk-split h2 {font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 34px; line-height: 1.05; letter-spacing: -.3px; color: var(--nk-ink); margin: 0;}
.nk-split p {font-family: 'Barlow', sans-serif; font-size: 16px; line-height: 1.75; color: #555; margin: 0 0 16px; max-width: 44em;}
.nk-steps {list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--nk-ink);}
.nk-steps li {font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; font-size: 18px; color: var(--nk-ink); padding: 16px 16px 16px 0; border-bottom: 1px solid #e4e4e4;}
.nk-steps li span {display: block; font-size: 12px; font-weight: 600; color: var(--nk-red); letter-spacing: .04em; margin-bottom: 4px;}
.nk-list {list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--nk-ink);}
.nk-list li {font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.35; color: var(--nk-ink); padding: 12px 0; border-bottom: 1px solid #e4e4e4;}
.nk-logos {display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px; background: #e4e4e4; border: 1px solid #e4e4e4;}
.nk-logos div {background: #fff; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: 14px;}
.nk-logos img {max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .3s, opacity .3s;}
.nk-logos div:hover img {filter: none; opacity: 1;}
.nk-cta-band {background: #141414; color: #fff; padding: 100px var(--edge) 90px;}
.nk-cta-band h2 {font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: clamp(32px, 3.8vw, 50px); letter-spacing: -.5px; color: #fff; margin: 0 0 14px;}
.nk-cta-band p {font-family: 'Barlow', sans-serif; color: rgba(255,255,255,.65); font-size: 17px; margin: 0 0 34px;}
.nk-page footer.footer-strip-dark {border-top: 1px solid rgba(255,255,255,.1);}
/* Contact */
.nk-contact-info {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; margin: 8px 0 32px; padding-top: 24px; border-top: 1px solid #e4e4e4;}
.nk-contact-info dt {font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--nk-grey); margin-bottom: 6px;}
.nk-contact-info dd {font-family: 'Barlow', sans-serif; font-size: 17px; line-height: 1.5; color: var(--nk-ink); margin: 0;}
.nk-contact-info dd a {color: var(--nk-ink); border-bottom: 1px solid currentColor;}
.nk-contact-info dd a:hover {color: var(--nk-red);}
.nk-contact-info .nk-mail {font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 24px;}
.nk-map {position: relative; min-height: 420px; background: #e9e9e9;}
.nk-map iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05);}
@media (max-width: 991px) {
  .nk-hero-rev .nk-hero-text {padding: 40px var(--edge) 48px;}
  .nk-hero-rev .nk-hero-media {order: 0;}
  .nk-split {grid-template-columns: minmax(0, 1fr); gap: 24px;}
  .nk-steps {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .nk-logos {grid-template-columns: repeat(4, minmax(0, 1fr));}
  .nk-map {min-height: 360px;}
}
@media (max-width: 767px) {
  .nk-section {padding: 64px 0;}
  .nk-split h2 {font-size: 28px;}
  .nk-logos {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .nk-contact-info {grid-template-columns: minmax(0, 1fr);}
  .nk-cta-band {padding: 72px var(--edge);}
}
.nk-hero-rev .nk-map {order: 2;}

/* ---------- Formulaire newsletter ---------- */
.nk-form {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin: 8px 0 0; padding-top: 28px; border-top: 1px solid #e4e4e4; position: relative;}
.nk-field-full {grid-column: 1 / -1;}
.nk-field label {display: block; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--nk-grey, #99999c); margin: 0 0 8px;}
.nk-field input {width: 100%; height: 50px; padding: 0 16px; border: 1px solid #d6d6d6; border-radius: 0; background: #fff; font-family: 'Barlow', sans-serif; font-size: 16px; color: #232323; margin: 0; box-shadow: none; transition: border-color .2s;}
.nk-field input:focus {outline: none; border-color: #232323;}
.nk-req {color: #e5251d;}
.nk-form-foot {display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px;}
.nk-form-foot .nk-btn {cursor: pointer;}
.nk-form-req {font-family: 'Barlow', sans-serif; font-size: 13px; color: #6f6f6f;}
.nk-form-note {font-family: 'Barlow', sans-serif; font-size: 13px; line-height: 1.6; color: #6f6f6f; margin: 4px 0 0; max-width: 34em;}
@media (max-width: 767px) {.nk-form {grid-template-columns: minmax(0, 1fr);}}