/* Header + menu unifies -- charge sur TOUTES les pages du site (pages editoriales via
   editorial-pages.css qui l'importe, et la home directement) pour qu'un seul composant
   pilote le header/menu partout, plutot que deux implementations qui divergent. Valeurs de
   variables dupliquees depuis le :root d'editorial-pages.css (memes noms, memes valeurs) --
   garder les deux en synchronisation si l'une change. */
:root {
  --ink: #090909;
  --paper: #f1ece4;
  --red: #b1230a;
  --gutter: clamp(20px, 4.25vw, 72px);
  --display: Inter, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  background: #fff;
  color: #000;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

/* Header unifie (toutes les pages) -- hamburger / logo mark centre / lien contact */
.ep-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 74px;
  padding: 0 var(--gutter);
  background: transparent;
  border: 0;
}
.ep-burger { grid-column: 1; justify-self: start; display: flex; flex-direction: column; justify-content: center; gap: 7px; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ep-burger span { display: block; height: 1px; background: #fff; transition: transform .3s ease, opacity .3s ease, background .2s ease; }
.ep-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.ep-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ep-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.ep-mark { grid-column: 2; justify-self: center; display: inline-flex; color: #fff; text-decoration: none; transition: color .2s ease; perspective: 400px; }
.ep-mark svg { width: 22px; height: 37px; transform-style: preserve-3d; }

/* Echo du logo 3D de /contact/ (Three.js) sans son poids : rotation continue, meme cadence
   que la version 3D (18s par tour complet, lineaire). Boucle infinie demandee explicitement
   par Aboubacar pour ce logo precis -- voir feedback_animation_restraint (memoire) pour
   pourquoi c'est une exception assumee a la regle "one-shot" du reste du site. */
@keyframes ep-mark-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.ep-mark svg { animation: ep-mark-spin 18s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .ep-mark svg { animation: none; }
}
/* Contraste sur fond clair (ex. hero cream de la home, #heroStage) -- header toujours
   transparent, seule la couleur du contenu s'adapte (voir minimal-header.js). */
.ep-header.is-on-light .ep-burger span { background: var(--ink); }
.ep-header.is-on-light .ep-mark { color: var(--ink); }

/* Le menu plein ecran est toujours noir : si is-on-light est actif au moment du clic (tout en
   haut de la home), forcer le header en blanc pendant que le menu est ouvert, sinon les icones
   sombres deviennent invisibles sur le rideau noir. */
body:has(.ep-menu-overlay.is-open) .ep-header.is-on-light .ep-burger span { background: #fff; }
body:has(.ep-menu-overlay.is-open) .ep-header.is-on-light .ep-mark { color: #fff; }

/* Menu plein ecran -- rideau montant identique a l'ancien theme de la home (fond sombre) */
.ep-menu-overlay { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; background: var(--ink); clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(.7, 0, .3, 1); }
.ep-menu-overlay[hidden] { display: none; }
.ep-menu-overlay.is-open { clip-path: inset(0 0 0 0); }
.ep-menu-overlay nav { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1vw, 10px); }
.ep-menu-overlay nav a { display: flex; flex-direction: column; align-items: center; font: 700 clamp(36px, calc(15px + 5.9vw), 128px)/.95 var(--display); text-decoration: none; color: var(--paper); text-transform: uppercase; letter-spacing: -.02em; transition: opacity .2s ease; }
.ep-menu-num { display: none; }
.ep-menu-logo { width: min(60vw, 220px); height: min(24vh, 220px); }
.ep-menu-logo canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 768px) {
  .ep-menu-overlay nav { gap: 22px; }
  .ep-menu-overlay nav a { font-size: clamp(40px, 12vw, 72px); }
}

/* Roll au survol des mots du menu -- meme effet que l'ancien theme (voir renderRollText dans
   build_sentekia_html.js et .menu__link-title .roll-text dans sentekia-luxury.css) : deux
   copies du mot empilees, chaque caractere translate verticalement au survol. */
.ep-menu-overlay nav a .roll-text { position: relative; display: block; overflow: hidden; line-height: 1.05; }
.ep-menu-overlay nav a .roll-layer { display: block; }
.ep-menu-overlay nav a .roll-layer--bottom { position: absolute; inset: 0; }
.ep-menu-overlay nav a .roll-char { display: inline-block; transition: transform .5s cubic-bezier(.65, 0, .35, 1); transition-delay: var(--rd, 0ms); }
.ep-menu-overlay nav a .roll-layer--bottom .roll-char { transform: translateY(130%); }
.ep-menu-overlay nav a:hover .roll-layer--top .roll-char { transform: translateY(-100%); }
.ep-menu-overlay nav a:hover .roll-layer--bottom .roll-char { transform: translateY(0); }
@media (hover: hover) {
  .ep-menu-overlay nav:has(a:hover) a:not(:hover) { opacity: .3; }
}

/* Rideau de transition montant au chargement des pages hors-wave */
.sk-curtain-reveal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: var(--ink, #090909);
  clip-path: inset(0 0 0 0);
  pointer-events: none;
  transition: clip-path 0.85s cubic-bezier(0.7, 0, 0.3, 1);
  will-change: clip-path;
  animation: skCurtainFailsafe 0.01s linear 1.3s forwards;
}
@keyframes skCurtainFailsafe {
  to { visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-curtain-reveal { display: none; }
}
.sk-curtain-reveal.is-revealed {
  clip-path: inset(0 0 100% 0);
}
.sk-curtain-reveal.is-done {
  display: none !important;
}

/* Mobile : l'entete (burger, logo, PARLEZ NOUS) ne suit plus le defilement, il part avec le haut de
   la page (demande d'Aboubacar, 19/09/2026 : evite l'encombrement visuel et le blanc sur fond
   clair). Il reste fixe sur desktop. Sur l'accueil il est deja dans le conteneur qui defile
   (.page-content-wrapper), ailleurs il defile avec la fenetre. */
@media (max-width: 768px) {
  .ep-header { position: absolute; }
  .ep-mark { grid-column: 1; grid-row: 1; justify-self: start; }
  .ep-burger { grid-column: 3; grid-row: 1; justify-self: end; }
}