/* ══════════════════════════════════════════════════════════════
   kaki-commun.css - socle partagé de la direction kaki
   index.html, realisations.html, tarifs.html, methodologie.html.
   Chargé après blanc-kaki.css et avant la feuille propre à la page
   (accueil.css, portfolio.css, tarifs.css, methodologie.css). Porte :
   - les tokens de mise en page (--bar-h, --edge, --arrondi-*) et
     l'aplat des commandes (--commande*) ;
   - la barre : logo à gauche, onglet « Menu » collé au coin haut
     droit, arrondi sur son angle bas gauche ;
   - le menu : deux panneaux, destinations à gauche avec flèches,
     liens secondaires et bloc projet à droite ;
   - la signature rayée « Tom Web Studio » en bas du pied de page.
   Couleurs : uniquement les tokens de main.css (palette noir kaki).
   ══════════════════════════════════════════════════════════════ */

.theme-kaki {
  --bar-h: 5.5rem;
  --edge: clamp(1.25rem, 5vw, 6rem);
  --arrondi-onglet: clamp(1.5rem, 2.6vw, 2.75rem);
  /* Aplat des commandes (onglet Menu, Lancer mon projet, Devis
     gratuit, repère du menu) : le kaki foncé du fond de la section
     studio. Texte blanc papier : 10.7:1 ; au survol, kaki plein :
     7.0:1. Le texte reste --papier, jamais --blanc, que le scope
     clair remappe en noir. */
  --commande:       var(--kaki-fonce);
  --commande-hover: var(--kaki-plein);
}
@media (max-width: 768px) {
  .theme-kaki { --bar-h: 4rem; }
}

/* ── 1. Barre ─────────────────────────────────────────────── */
/* Pleine largeur : le logo s'aligne sur la même marge que la colonne
   de gauche du menu, pas sur le conteneur de 1160px. Le conteneur
   perd sa position pour que l'onglet s'ancre sur #navbar lui-même,
   donc sur le coin du viewport. */
.theme-kaki .nav-container {
  position: static;
  max-width: none;
  min-height: var(--bar-h);
  padding: 0 var(--edge);
}
.theme-kaki .nav-wordmark {
  position: static;
  transform: none;
}
.theme-kaki .nav-wordmark img { height: 40px; }
@media (max-width: 768px) {
  .theme-kaki .nav-wordmark img { height: 28px; }
}

/* L'onglet. Deux identifiants dans le sélecteur : main.css et
   noir-argent.css écrivent sur « .nav-toggle span », qui viserait
   sinon le libellé et le paquet de traits. */
#navbar #nav-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  flex-direction: row;
  gap: 1.25rem;
  width: auto;
  height: var(--bar-h);
  margin: 0;
  padding: 0 clamp(1.25rem, 2.4vw, 2.25rem) 0 clamp(1.5rem, 2.8vw, 2.5rem);
  background: var(--commande);
  color: var(--papier);
  border-radius: 0 0 0 var(--arrondi-onglet);
  transition: background-color 0.2s var(--ease-noir), transform 0.2s var(--ease-noir);
}
@media (hover: hover) and (pointer: fine) {
  #navbar #nav-toggle:hover { background: var(--commande-hover); }
}
#navbar #nav-toggle:active { transform: scale(0.98); transform-origin: top right; }
#navbar #nav-toggle:focus-visible { outline: 2px solid var(--papier); outline-offset: -6px; }
/* Le verrou de défilement élargit le viewport de la largeur de la
   barre : sans ce recalage l'onglet sauterait vers la droite. */
body.nav-open #navbar #nav-toggle { right: var(--nav-lock-gap, 0px); }

#navbar #nav-toggle > span {
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  opacity: 1;
  transform: none;
  transition: none;
}
#navbar #nav-toggle > .nav-toggle-label {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
#navbar #nav-toggle > .nav-toggle-bars {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 28px;
}
/* Trois traits de longueurs inégales, le court au milieu. À
   l'ouverture ils se rejoignent en croix : 6px d'écart plus 2px de
   trait, soit 8px de course. */
.nav-toggle-bars i {
  display: block;
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.22s var(--ease-noir), opacity 0.12s linear, width 0.22s var(--ease-noir);
}
.nav-toggle-bars i:nth-child(2) { width: 18px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; width: 28px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 480px) {
  #navbar #nav-toggle { gap: 0.85rem; }
  #navbar #nav-toggle > .nav-toggle-label { font-size: 0.82rem; }
}

/* Menu ouvert : le bandeau disparaît, le logo repasse en blanc sur
   le panneau sombre, quel que soit l'état de défilement. */
body.theme-kaki.nav-open #navbar .nav-wordmark img { filter: none; }

/* ── 2. Menu : deux panneaux ──────────────────────────────── */
.theme-kaki .nav-overlay {
  --text: #F5F6F7;
  --text-muted: var(--brume);
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: var(--noir-kaki);
  color: var(--text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.theme-kaki .nav-overlay::before { content: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .theme-kaki .nav-overlay { background: var(--noir-kaki); }
}
@media (prefers-reduced-transparency: reduce) {
  .theme-kaki .nav-overlay { background: var(--noir-kaki); }
}
@media (min-width: 900px) {
  .theme-kaki .nav-overlay { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); }
}

.menu-main,
.menu-side {
  display: flex;
  flex-direction: column;
  padding: calc(var(--bar-h) + 0.25rem) var(--edge) clamp(2.5rem, 7vh, 4rem);
}
.menu-side {
  background: var(--noir-kaki-3);
  padding-top: clamp(2.5rem, 6vh, 3.5rem);
}
@media (min-width: 900px) {
  .menu-side { padding: calc(var(--bar-h) + 3.5rem) clamp(2rem, 3.5vw, 4rem) 3rem; }
}

/* Repère sous le logo : un trait court au dégradé de l'onglet. */
.menu-mark {
  display: block;
  width: 7.5rem;
  height: 4px;
  background: var(--commande);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.menu-back {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  align-self: flex-start;
  min-height: 44px;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
  color: var(--brume);
  transition: color 0.2s var(--ease-noir);
}
.menu-back svg {
  color: var(--kaki-clair);
  transition: transform 0.24s var(--ease-noir);
}
@media (hover: hover) and (pointer: fine) {
  .menu-back:hover { color: var(--text); }
  .menu-back:hover svg { transform: translateX(-4px); }
}

.menu-primary { margin-top: clamp(1rem, 3vh, 2rem); }
.menu-primary .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 44px;
  padding: 0.12em 0;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
  transition: color 0.2s var(--ease-noir);
}
.menu-arrow {
  flex-shrink: 0;
  width: 0.82em;
  height: 0.82em;
  transition: transform 0.24s var(--ease-noir), color 0.2s var(--ease-noir);
}
@media (hover: hover) and (pointer: fine) {
  .menu-primary .nav-link:hover { color: var(--kaki-clair); }
  .menu-primary .nav-link:hover .menu-arrow { transform: translateX(8px); }
}
.menu-primary .nav-link.active { color: var(--kaki-clair); }

.menu-secondary li + li { margin-top: 0.15rem; }
.menu-secondary a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color 0.2s var(--ease-noir);
}
@media (hover: hover) and (pointer: fine) {
  .menu-secondary a:hover { color: var(--kaki-clair); }
}

.menu-project {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  max-width: 26rem;
}
@media (min-width: 900px) {
  .menu-project { margin-block: auto; }
}
.menu-project-title {
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.menu-project-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--brume);
  margin-bottom: 1.5rem;
}
.theme-kaki .nav-overlay .nav-cta {
  min-height: 52px;
  padding: 0.85rem 2rem;
  background: var(--commande);
  color: var(--papier);
  font-weight: 700;
  transition: background-color 0.2s var(--ease-noir), transform 0.2s var(--ease-noir);
}
@media (hover: hover) and (pointer: fine) {
  .theme-kaki .nav-overlay .nav-cta:hover {
    opacity: 1;
    color: var(--papier);
    background: var(--commande-hover);
  }
}
.menu-coords {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.theme-kaki .nav-overlay .nav-coord { color: var(--brume); font-size: 0.95rem; }
.theme-kaki .nav-overlay .nav-coord:hover { color: var(--text); }
.theme-kaki .nav-overlay a:focus-visible { outline: 2px solid var(--kaki-clair); outline-offset: 4px; }

/* Entrée : les destinations montent en cascade de 40ms, le panneau
   de droite glisse de quelques pixels. Rien ne traîne à la sortie. */
.menu-primary li,
.menu-side {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.26s var(--ease-noir), transform 0.26s var(--ease-noir);
}
.menu-side { transform: translateX(16px); }
body.nav-open .menu-primary li,
body.nav-open .menu-side { opacity: 1; transform: none; }
body.nav-open .menu-primary li:nth-child(1) { transition-delay: 0.04s; }
body.nav-open .menu-primary li:nth-child(2) { transition-delay: 0.08s; }
body.nav-open .menu-primary li:nth-child(3) { transition-delay: 0.12s; }
body.nav-open .menu-side { transition-delay: 0.06s; }

@media (prefers-reduced-motion: reduce) {
  .menu-primary li, .menu-side,
  body.nav-open .menu-primary li, body.nav-open .menu-side {
    opacity: 1; transform: none; transition: none;
  }
  .nav-toggle-bars i, .menu-arrow, .menu-back svg,
  #navbar #nav-toggle { transition: none; }
}

/* ── 3. Signature du pied de page ─────────────────────────── */
/* Le mot occupe toute la largeur du viewport, posé sur le bas de
   page, sous un filet. Goldman, la police du logo TWS. */
.footer-signature {
  padding: 0 var(--edge);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid rgba(245,246,247,0.14);
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(1rem, 2.5vw, 2rem);
  line-height: 0;
}
.footer-signature svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.footer-signature text {
  font-family: 'Goldman', sans-serif;
  font-weight: 700;
  /* Hauteur de capitale Goldman : 0.66 em. À 114.2 le mot mesure
     1000 unités d'encre et 75.4 de haut, le cadre du viewBox. */
  font-size: 114.2px;
}

/* ── 4. Ouverture des pages secondaires ───────────────────── */
/* Portfolio et Méthodologie (.page-head). Même geste que le hero de
   l'accueil : bloc noir kaki pleine largeur, bas à angles vifs sur le
   blanc du contenu. Le fond passe par blanc-kaki.css (scope sombre),
   ici seulement la forme. La colonne de texte reste calée sur le
   conteneur de 1160px : le padding latéral absorbe le reste. */
.theme-kaki .page-head {
  position: relative;
  z-index: 1;
  max-width: none;
  padding:
    calc(var(--bar-h) + clamp(2.5rem, 7vw, 5rem))
    max(var(--px), calc((100% - var(--max-w)) / 2 + var(--px)))
    clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}
.theme-kaki .page-head > :not(.topo) { position: relative; z-index: 1; }

/* Courbes de niveau (js/topo.js) dans le noir kaki des trois
   ouvertures : .page-head de Portfolio et Méthodologie, .tarifs-hero.
   Le bloc parent coupe le canvas sur ses bords. Apparition en
   fondu une fois la première image tracée ; sans JS, rien. */
.theme-kaki .topo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-noir);
}
.theme-kaki .topo.is-drawn { opacity: 1; }

/* La pilule d'ouverture devient une commande : aplat kaki foncé,
   texte papier (10.7:1, 7.0:1 au survol). Seule la teinte bouge. */
.theme-kaki .page-action {
  min-height: 52px;
  padding: 0.85rem 1.75rem;
  border: 0;
  background: var(--commande);
  color: var(--papier);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color 0.2s var(--ease-noir);
}
.theme-kaki .page-action:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .theme-kaki .page-action:hover { background: var(--commande-hover); color: var(--papier); }
}
.theme-kaki .page-action:focus-visible { outline: 2px solid var(--papier); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .theme-kaki .page-action { transition: none; }
}