/* ══════════════════════════════════════════════════════════════
   PROJ-SHARED.CSS règles partagées entre toutes les pages projet
   ──────────────────────────────────────────────────────────────
   Chargé par : projets/<projet>/index.html (toutes les pages projet :
                tellmefilms, kinocaen, site-catalogue, forum-metiers,
                marketing-digital).
   Position dans la cascade : APRÈS style.css racine, AVANT le style.css
   spécifique de chaque page (qui peut override si besoin).
   ──────────────────────────────────────────────────────────────
   Contenu :
     1. Filet de sécurité overflow horizontal mobile
     2. Bascule labels breadcrumb long/short (mobile)
     3. Burger menu (bouton + icône + overlay plein écran)
     4. Bottom nav unifiée « other-projects »
     5. Media query mobile : nav 1 ligne (breadcrumb compact + burger)
   ══════════════════════════════════════════════════════════════ */


/* ── −1. SWITCHER global (parité homepage) ──────────────────
   Pages projet : .switcher en bottom-right (pill desktop, rond mobile).
   La pill desktop est cachée mobile (≤ 700px) au profit du rond
   .switcher-toggle qui s'allonge vers le haut en capsule continue
   (animation switcherCapsule). Code dupliqué de style.css racine pour
   que projet.html (qui ne charge pas style.css) en bénéficie. */
.switcher {
  position: fixed; bottom: 28px; right: 28px;
  z-index: 998; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.switcher-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.switcher-btns {
  display: flex; gap: 6px;
  background: rgba(13,17,23,0.88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-h); border-radius: 40px; padding: 6px 8px;
}
.sw-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .22s, border-color .22s;
}
.sw-btn:hover { transform: scale(1.18); }
.sw-btn.active { border-color: rgba(255,255,255,0.55); }
.sw-btn-violet { background: linear-gradient(135deg,#C4B5FD,#8EC5FC); }
.sw-btn-rose   { background: linear-gradient(135deg,#FA709A,#FEE140); }
.sw-btn-vert   { background: linear-gradient(135deg,#84FAB0,#8FD3F4); }
.sw-name {
  font-size: 10px; color: var(--muted);
  background: rgba(13,17,23,0.88); backdrop-filter: blur(20px);
  border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px;
}

.switcher-toggle {
  display: none;
  position: fixed; bottom: 16px; right: 16px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-h);
  background: rgba(13,17,23,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor: pointer; z-index: 999;
  align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
  padding: 0;
  transition: border-radius .25s ease, border-top-color .25s ease;
}
.switcher-toggle:focus-visible { outline: 2px solid var(--g1); outline-offset: 2px; }
.switcher-toggle-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  border: 2px solid rgba(255,255,255,0.18);
  display: block;
  transition: background .3s ease;
}

@media (max-width: 700px) {
  /* Mobile : capsule continue avec le toggle en bas. Le rond perd ses
     coins supérieurs quand expanded ; la pill au-dessus prend les coins
     inférieurs plats → effet « le rond s'allonge vers le haut ». */
  .switcher { display: none; }
  .switcher-toggle { display: flex; }
  .switcher-toggle[aria-expanded="true"] {
    border-radius: 0 0 24px 24px;
    border-top-color: transparent;
  }

  .switcher.expanded {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position: fixed;
    bottom: 64px; /* toggle bottom (16) + toggle height (48) = jointure */
    right: 16px;
    width: 48px;
    padding: 10px 0 6px;
    background: rgba(13,17,23,0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-h);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -6px 18px -8px rgba(0,0,0,0.5);
    z-index: 1000;
    transform-origin: bottom center;
    animation: switcherCapsule .26s cubic-bezier(.2,.7,.25,1) backwards;
  }
  .switcher.expanded .switcher-label,
  .switcher.expanded .sw-name { display: none; }
  .switcher.expanded .switcher-btns {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    align-items: center;
  }
  .switcher.expanded .sw-btn {
    width: 30px; height: 30px;
    border: 2px solid rgba(255,255,255,0.28);
    box-shadow: 0 2px 6px -2px rgba(0,0,0,0.5);
  }
  .switcher.expanded .sw-btn.active { display: none; }
}
@keyframes switcherCapsule {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .switcher.expanded { animation: none; }
  .switcher-toggle { transition: none; }
}


/* ── 0. Décoration mockup retirée ────────────────────────────
   Les 3 .mockup-dot (qui simulaient les boutons rouge/jaune/vert
   d'une fenêtre navigateur dans la barre URL des mockups) étaient
   perçues comme des « étiquettes vides » sans valeur informative.
   On les masque au profit d'une barre URL plus sobre. */
.mockup-dot { display: none !important; }


/* ── 0. Variable padding latéral responsive ─────────────────
   Centralise le pattern `max(40px, calc((100% - 1280px) / 2 + 40px))`
   utilisé pour aligner les nav full-width sur le contenu max-1280.
   Utilise `100%` (largeur du body, sans scrollbar) et non `100vw`
   (qui inclut le scrollbar) pour éviter un décalage de ~8px sur
   desktop entre le contenu nav et les sections en dessous.
   Toute page projet peut utiliser : padding: 12px var(--side-pad); */
:root {
  --side-pad: max(40px, calc((100% - 1280px) / 2 + 40px));
}

/* ── 1. Filet overflow-x ─────────────────────────────────────
   `overflow-x: clip` sur body (PAS html, PAS hidden) empêche tout
   débordement horizontal mobile sans casser `position: sticky` de la nav.
   Pourquoi cette combinaison précise :
     - `overflow-x: hidden` sur html OU body fait du parent un scroll
       container, ce qui casse `position: sticky` sur les enfants.
     - `overflow-x: clip` sur html crée aussi un containment qui casse
       sticky (testé dans Chrome).
     - `overflow-x: clip` sur body est le SEUL combo qui clip horizontal
       SANS établir de scroll container → sticky sur .proj-nav reste OK.
   Modernes browsers (Chrome 90+, FF 81+, Safari 16+) supportent clip ;
   pas de fallback hidden ici (cassait sticky historiquement).
   `iframe/table` contraintes à 100% pour les wireframes/maquettes
   embed et les tableaux benchmark trop larges. */
body { overflow-x: clip; }
img, iframe, video, table { max-width: 100%; }


/* ── 1.5 Breadcrumb current = back-to-top (tooltip) ──────────
   Le titre courant du breadcrumb (.breadcrumb-current) est rendu
   cliquable par proj-shared.js (scroll smooth en haut). Tooltip CSS
   discret au hover pour aider la découvrabilité. */
.breadcrumb-current {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .2s;
}
.breadcrumb-current:hover { opacity: 0.85; }
.breadcrumb-current:focus-visible {
  outline: 2px solid var(--g1);
  outline-offset: 4px;
  border-radius: 4px;
}
.breadcrumb-current-tooltip {
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  background: rgba(13,17,23,0.92);
  border: 1px solid var(--border-h);
  border-radius: 14px;
  padding: 3px 9px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  margin-left: 4px;
}
.breadcrumb-current:hover .breadcrumb-current-tooltip,
.breadcrumb-current:focus-visible .breadcrumb-current-tooltip {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 960px) {
  .breadcrumb-current-tooltip { display: none; }
}

/* ── 2. Breadcrumb mobile : labels courts ───────────────────
   Desktop : "Alexian Dumont › Projets › Projet 02 · Tell Me Films"
   Mobile  : "Accueil › Projets › Projet"
   Bascule via media query 960px plus bas. */
.bc-text-short { display: none; }


/* ── 3. Burger menu + overlay plein écran ───────────────────
   Le bouton vit dans .proj-nav-row. Caché desktop par défaut,
   affiché à partir de 960px. L'overlay est plein écran avec
   un fond translucide blur ; ouvert via .open. */
.proj-nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 18px;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: 0 0 auto;
}
.proj-nav-burger:focus-visible {
  outline: 2px solid var(--g1);
  outline-offset: 2px;
}
.proj-nav-burger-icon {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  position: relative;
}
.proj-nav-burger-icon::before,
.proj-nav-burger-icon::after {
  content: '';
  position: absolute; left: 0;
  width: 18px; height: 2px;
  background: currentColor;
}
.proj-nav-burger-icon::before { top: -6px; }
.proj-nav-burger-icon::after  { top: 6px; }

.proj-nav-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1500;
  /* Fond OPAQUE (parité homepage) : masque complètement le canvas derrière,
     menu sombre plein, identique sur toutes les pages. */
  background: #0D1117;
  padding: 80px 28px 40px;
  overflow-y: auto;
}
.proj-nav-overlay.open { display: block; }
/* Bouton close : sans bordure, pivote au hover (parité homepage). */
.proj-nav-overlay-close {
  position: absolute; top: 18px; right: 18px;
  background: transparent;
  border: 0;
  width: 40px; height: 40px;
  font-size: 26px; line-height: 1; color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, transform .2s;
}
.proj-nav-overlay-close:hover { color: var(--g1); transform: rotate(90deg); }
.proj-nav-overlay-close:focus-visible {
  outline: 2px solid var(--g1);
  outline-offset: 3px;
  border-radius: 8px;
}
.proj-nav-overlay-list {
  display: flex; flex-direction: column;
  gap: 4px;
  max-width: 480px; margin: 0 auto;
  list-style: none; padding: 0;
}
.proj-nav-overlay-list a {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: color .2s, padding .2s;
}
.proj-nav-overlay-list a:hover,
.proj-nav-overlay-list a.active {
  color: var(--text);
  padding-left: 12px;
}
/* Pas de trait sous le dernier item (Contact) — parité homepage. */
.proj-nav-overlay-list li:last-child a { border-bottom: 0; }

/* ── MODIFICATEURS MENU UNIFIÉS (parité homepage) ───────────────
   Structure cohérente sur tous les menus mobiles :
   - .menu-item-top : "00 · Haut de page" en tête (back-to-top), atténué
   - .menu-item-contact : lien Contact en bas, dégradé + graisse plus forte
   Permet l'apprentissage interne : le même menu partout. */
/* .menu-item-top : apparence identique aux items de nav (cohérence interne).
   Le numéro "00 ·" suffit à signaler le retour en haut. Pas de style distinct. */
.menu-item-contact {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  font-weight: 900 !important;
}


/* ── 4. Bottom nav unifiée « Continuer l'exploration » ───────
   Format : prev / next / back (1 à 3 liens selon position du projet).
   Desktop : 1 ligne (row), cards égales (flex: 1).
   Mobile  : 1 colonne (column), cards full width.
   Les pages spécifiques (TMF / Kino / projet.html) peuvent ajouter
   des règles locales pour personnaliser couleurs, hover, etc. */
.other-projects {
  /* Override : le <nav class="other-projects"> de Kino + projet.html hérite
     de la règle générique `nav { display: flex }` du style.css racine, ce qui
     empêchait .other-projects-row enfant de stretch (cards 258px au lieu de
     386px sur Kino). On force block ici pour normaliser tous les contextes. */
  display: block;
  padding: 64px 40px;
  border-top: 1px solid var(--border);
  max-width: 1280px;
  margin: 0 auto;
  position: static; /* annule un éventuel `position: sticky` hérité de nav */
  background: transparent; /* annule le fond glassy hérité de nav */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.other-projects-label {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 24px; text-align: center;
}
.other-projects-row {
  display: flex; flex-direction: row; gap: 14px;
  flex-wrap: nowrap; align-items: stretch;
}
.other-projects-link {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  flex: 1 1 0; min-width: 0;
  color: inherit;
}
.other-projects-link:hover,
.other-projects-link:focus-visible {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-h);
  transform: translateY(-2px);
  outline: none;
}
.opl-side {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; flex: 1;
  text-align: left;
}
.opl-num {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.opl-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 800;
  text-transform: uppercase;
  color: var(--text);
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.opl-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.opl-arrow {
  font-size: 24px;
  color: var(--muted);
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
}
.other-projects-link:hover .opl-arrow {
  color: var(--text);
  transform: translateX(3px);
}
.other-projects-link[aria-label*="précédent"]:hover .opl-arrow {
  transform: translateX(-3px);
}


/* ── 5. Mobile (≤ 960px) : nav passe en 1 seule ligne ────────
   Avant : 2 lignes empilées (column) avec 2e ligne quasi vide
   (links cachés, espace blanc à droite du burger).
   Maintenant : breadcrumb compact à gauche (flex:1), burger à droite,
   fond unique. Bascule également les labels long/short. */
@media (max-width: 960px) {
  .proj-nav {
    flex-direction: row;
    align-items: center;
    padding: 0;
  }
  .proj-nav .breadcrumb {
    padding: 10px 16px;
    background: transparent;
    border-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .proj-nav-row {
    padding: 10px 16px 10px 0;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    gap: 0;
  }
  .proj-nav-links { display: none; }
  .proj-nav-burger { display: inline-flex; }
  .breadcrumb-current { font-size: 10px; letter-spacing: 0.5px; }
  /* Bascule labels : version courte visible, longue cachée */
  .bc-text-long  { display: none; }
  .bc-text-short { display: inline; }
}

/* ── 6. Mobile (≤ 768px) : bottom-nav passe en colonne ───────
   Réduction des paddings et bascule .other-projects-row en
   flex-direction: column pour cards empilées full-width. */
@media (max-width: 768px) {
  .other-projects { padding: 40px 20px; }
  .other-projects-row { flex-direction: column; }
  .other-projects-link { padding: 16px 18px; }
}


/* ══════════════════════════════════════════════════════════════
   LOGO ŒIL INQUIRING (footer light pages)
   ──────────────────────────────────────────────────────────────
   Disponible sur P01/P04/P05 (light pages qui ne chargent pas
   style.css de la racine). Duplique le style défini dans style.css
   pour homepage/TMF/Kino qui le chargent déjà.
   ══════════════════════════════════════════════════════════════ */
.footer-logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer-logo-eye {
  width: 28px; height: 28px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  transition: transform .25s ease;
}
.footer-logo-eye:hover { transform: scale(1.1); }
.footer-logo-eye:focus-visible {
  outline: 2px solid var(--g1);
  outline-offset: 4px;
  border-radius: 50%;
}
.footer-logo-eye svg {
  width: 100%; height: 100%;
  display: block;
}
.footer-logo-eye-path {
  fill: var(--g1);
  transform-origin: center;
  transform-box: fill-box;
  transition: fill 1.8s ease;
}
.footer-logo-eye.is-blinking .footer-logo-eye-path {
  animation: footerLogoEyeBlink 0.55s ease-in-out;
}
@keyframes footerLogoEyeBlink {
  0%, 100% { transform: scaleY(1); }
  45%      { transform: scaleY(0.08); }
  55%      { transform: scaleY(0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-logo-eye.is-blinking .footer-logo-eye-path { animation: none; }
  .footer-logo-eye:hover { transform: none; }
}