/* ========================================
   FLOCANCE OFFICE — Styles
   ======================================== */

:root{
  --nav-h: 64px;
  --space: 20px;
  --gutter: clamp(4px, 0.8vw, 8px);
  --active-blue: #4da3ff;
  --link-hover: #ff2bd6; /* Rose flashy global au survol */
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; color:#fff;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Segoe UI", Arial, sans-serif;
  background:#000;
  overflow-x:hidden;
}

/* ===== Vidéo plein écran unique — rotation auto en portrait ===== */
.video-bg{
  position: fixed; inset: 0;
  z-index: -1; overflow: hidden; background: #000;
}
.bg-video{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%, -50%);  /* ← plus de rotate() */
  width: 100vw; height: 100vh; object-fit: cover;
}
@media (orientation: portrait){
  .bg-video{ /* idem, pas de rotate */ }
}

/* ===== NAV ===== */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:10; pointer-events:none;
}
.nav-left,.nav-middle,.nav-right{
  position:fixed; top:0; height:var(--nav-h);
  display:flex; align-items:center; pointer-events:auto;
}
.nav-left{ left:24px; }
.nav-right{ right:24px; }
.nav-middle{ left:50%; transform: translateX(-50%); }
.nav h2{
  margin:0; transform:scaleY(4) translateY(10px);
  transform-origin:center; letter-spacing:.5px;
}
.nav a{
  text-decoration:none; color:#fff; -webkit-text-fill-color:#fff;
  -webkit-text-stroke: 0.7px #000;
 
}
.nav a:hover{} /* hover géré globalement */

.nav a.active{
  color: var(--active-blue);
  -webkit-text-fill-color: var(--active-blue);
  border-bottom: none;
}
@media (max-width:640px){
  .nav-left{ left:16px; top:-26px; }
  .nav-right{ right:16px; top:-26px; }
  .nav-middle{ top:-26px; }
  .nav a{ font-size:15px; }
}

/* ===== Titre / layout ===== */
.center{
  min-height:100vh; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:0 var(--space);
}
.brand{
  display:inline-block; white-space: nowrap;
  font-size: clamp(45px, 13vw, 170px);
  line-height:.9; letter-spacing:.02em; text-transform:uppercase;
  transform: scaleY(2); transform-origin: center;
  mix-blend-mode: difference; color:#fff;
}

/* ===== Contact fixe ===== */
.contact-fixed{
  position: fixed;
  right: clamp(10px, 2vw, 20px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(10px, 2vw, 20px));
  z-index: 12;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  font-size: clamp(10px, 1.6vw, 14px);
  line-height: 1.2; letter-spacing: .02em;
  color: #fff; -webkit-text-fill-color: #fff; -webkit-text-stroke: 0.6px #000;
  text-shadow:
    1px 0 rgba(0,0,0,.5), -1px 0 rgba(0,0,0,.5),
    0 1px rgba(0,0,0,.5),  0 -1px rgba(0,0,0,.5);
  pointer-events: auto;
}
.contact-fixed a{ color: inherit; text-decoration: none; }

/* ===== Gabarit contenu ===== */
.wrap{
  max-width: 1200px;
  margin: calc(var(--nav-h) + 24px) auto 24px;
  padding: 0 20px;
}
.page-title{ margin:0 0 16px; font-size:clamp(28px,5vw,64px); text-transform:uppercase; }

.works .wrap.wrap--fullbleed{
  max-width: none;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ===== Prose ===== */
.prose h2{ margin:24px 0 8px; font-size:20px; text-transform:uppercase; }
.prose p{ color:#e8e8e8; line-height:1.6; }
.prose ul{ padding-left:18px; line-height:1.6; }

/* ===== WORKS / ABOUT – Paires ===== */
.pair-gallery {
  display: grid;
  gap: calc(var(--gutter) * 2);
}

.pair{
  padding: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gutter);
  row-gap: var(--gutter);

  background: #000;
  border: 3px solid lightslategrey;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;

  width: 65vw;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
@media (orientation: portrait){
  .pair{ width: 90vw; }
}
@media (max-width: 900px){
  .pair{ grid-template-columns: 1fr; }
}
.pair.single{ grid-template-columns: 1fr; }

.pair-title{
  grid-column: 1 / -1;
  margin: 0 0 0px;
  padding-left:  var(--gutter);
  padding-right: var(--gutter);
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(10px, 1.4vw, 16px);
  font-weight: 200;
  letter-spacing: .05em;
  text-align: justify;
  line-height: 1.6;
  color: #e8e8e8;
}

.pair > div,
.pair > div p,
.pair > div ul,
.pair > div li,
.pair > div em,
.pair > div small,
.pair > div a{
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(8.5px, 1.4vw, 12px);
  font-weight: 200;
  letter-spacing: .05em;
  text-align: justify;
  line-height: 1.6;
  color: #e8e8e8;
}
.pair > div ul{ padding-left: 18px; margin: 0.4em 0; }
.pair > div a{ text-decoration: none; }

.pair > div strong,
.pair > div b { font-weight: 700 !important; color: #fff; }

.pair [lang="en"], .pair [lang="en"] *{
  color: royalblue; -webkit-text-fill-color: royalblue;
}

/* Médias */
.item{ position: relative; overflow: hidden; background: #000; border: none; border-radius: 0; }
.item img, .item video{
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; background: #000;
}

/* Clip centré */
.center-clip{ display:flex; justify-content:center; align-items:center; padding: var(--gutter); }
.center-clip img{ display:block; width: 10vw; height: auto; }
@media (orientation: portrait){ .center-clip img{ width: 25vw; } }

/* Motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
}

/* =========================
   LIENS — Couleur rose flashy AU SURVOL partout
   ========================= */

/* État normal */
a{
  text-decoration: none;
  border-bottom: 0;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  outline: none;
  box-shadow: none;
}

/* Survol (desktop) : passe en rose flashy */
@media (hover:hover){
  a:hover{
    color: var(--link-hover);
    -webkit-text-fill-color: var(--link-hover);
    text-decoration: none;
    outline: none;
    box-shadow: none;
  }
}

/* Focus/active : même couleur, pas d’outline */
a:focus,
a:focus-visible,
a:active{
  color: var(--link-hover);
  -webkit-text-fill-color: var(--link-hover);
  outline: none !important;
  box-shadow: none !important;
}

/* Neutralise d’éventuels anciens soulignages */
.nav a,
.nav a:hover,
.pair > div a,
.pair > div a:hover,
.pairlink a,
.pairlink a:hover,
.contact-fixed a,
.contact-fixed a:hover{
  border-bottom: 0 !important;
  text-decoration: none !important;
}
/* =========================
   PAIRLINK — cadre serré autour du texte (+4px)
   ========================= */

.pairlink{
  grid-column: 1 / -1;
  margin: clamp(8px, 2vw, 16px) 0;
  /* pas de padding ni de bordure ici, pour éviter la pleine largeur */
  padding: 0;
  border: 0;
  background: transparent;

  text-align: center;

  /* typo / effet comme avant */
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Segoe UI", Arial, sans-serif;
  font-size: clamp(18px, 2.8vw, 32px);  /* ≈ 2× .pair-title */
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  transform: scaleY(1.3);
  transform-origin: center;

  color: orangered;
  -webkit-text-fill-color:  white;
  -webkit-text-stroke: 1.2px white; /* contour texte */
  text-shadow:
    1px 0 rgba(0,0,0,.7), -1px 0 rgba(0,0,0,.7),
    0 1px rgba(0,0,0,.7),  0 -1px rgba(0,0,0,.7);
}

.pairlink a{
  display: inline-block;               /* cadre serré autour du contenu */
  padding: 2 2 2 2px;                      /* +2px de chaque côté → +4px total */
  border: 0px solid #000;              /* le cadre noir */
  border-radius: ;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  text-decoration: none;

  /* sécurité au cas où le stroke ne s’hérite pas */
  -webkit-text-stroke: 0.5px black;

}

/* Hover : reste cohérent avec ta règle globale (rose) */
@media (hover:hover){
  .pairlink:hover,
  .pairlink a:hover{
    color: var(--link-hover);
    -webkit-text-fill-color: var(--link-hover);
  }
}