/* ============================================================
   Styles globaux — portfolio-ecosystem / 01_site
   Source de vérité unique. Aucun framework, aucune dépendance.
   ============================================================ */


/* --- Custom properties ---
   Centralisées ici pour éviter de dupliquer les valeurs magiques. */

:root {
  /* h1 line-height déterministe : 1.21875 = 39/32, hauteur naturelle de ▭.
     Sans ça, `line-height: normal` varie selon le plus grand glyphe sur
     la ligne (▭=39px, ·=37px, ▽=45px), ce qui désaligne les pages à
     5 lignes entre elles. S'applique aussi aux h1 dans #cv-nav (générés
     par cv.js) pour qu'ils stackent à la même hauteur que la topbar. */
  --h1-lh: 1.21875;

  /* Largeur de lecture : ~16 mots par ligne */
  --read-width: 85ch;
}


/* --- Bord perdu : aucune marge nulle part ---
   Tous les blocs sont collés à leurs voisins. Le rythme vertical vient
   uniquement de la line-height interne et des <br> dans le HTML. */

body { margin: 0; }

h1, h2, h3, h4, h5, h6,
p, ul, ol, li,
table, figure, blockquote, header, nav { margin: 0; }


/* --- Texte --- */

h1 { line-height: var(--h1-lh); }
h2 { max-width: var(--read-width); }


/* --- Lien retour `<` ---
   Le symbole hérite du bold du h1, ce qui le rend trop épais à côté des
   autres symboles (▭ ▽ ⌂). On force normal pour qu'il reste fin. */

.back { font-weight: normal; }


/* --- Images --- */

img { width: 100%; }


/* --- Grilles de figures ---
   Les pages projet utilisent <table> pour des grilles 3 colonnes
   d'images. CSS centralisé ici pour éviter les attributs HTML4
   dépréciés (cellspacing, cellpadding, width) sur chaque table. */

figure table { width: 100%; border-collapse: collapse; }
figure table td { padding: 0; vertical-align: top; }


/* --- Topbar des pages CV ---
   Le <header> qui englobe la topbar et la nav reste visible pendant
   le défilement du CV. */

body:has(#cv) > header {
  position: sticky;
  top: 0;
  background: Canvas;
}


/* --- Pages démo et live : layout pleine hauteur ---
   Le body devient une colonne plein écran quand une démo (iframe) ou
   le lecteur vidéo est présent. La zone média prend toute la hauteur
   restante sous le h1 de topbar via flex-grow. */

body:has(iframe.demo-iframe),
body:has(#player) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* dynamique : s'adapte à la barre d'URL mobile */
  overflow: hidden;
}

.demo-iframe {
  flex: 1;
  width: 100%;
  border: 0;
  display: block;
  min-height: 0; /* évite que l'iframe pousse le body au-delà de 100vh */
}


/* --- Lecteur vidéo (page direct) ---
   Cliquable n'importe où pour toggler mute/unmute. */

#player {
  position: relative;
  width: 100%;
  background: #000;
  flex: 1;
  cursor: pointer;
}

#video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#sound {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  -webkit-tap-highlight-color: transparent; /* pas de flash gris au tap mobile */
  cursor: pointer;
  color: VisitedText; /* violet des liens visités, s'adapte au theme */
  text-decoration: underline;
  font: inherit;
  font-size: 2em;
  font-weight: bold;
  line-height: 1; /* assez d'espace en dessous pour voir le soulignement */
}

/* État "Connexion…" centré sur le player tant que la vidéo n'a pas
   démarré. Masqué via [hidden] quand ça joue.
   #status est un h1 — taille / poids / typo héritent des défauts. */
#status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}
#status[hidden] { display: none; }

/* Logo « chaîne TV » dans le coin haut-droit, comme un watermark.
   Aligné à droite, en h1 (typo héritée), blanc sur la vidéo. */
#channel {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  color: #fff;
  font: inherit;
  font-size: 2em;
  font-weight: bold;
  text-align: right;
  line-height: 1;
  pointer-events: none;
}

/* Quand le statut est visible (Connexion / Bientôt de retour),
   on masque le bouton son et le logo — pas de pertinence offline. */
#status:not([hidden]) ~ #sound,
#status:not([hidden]) ~ #channel { display: none; }


/* --- Page CV : affichage à l'écran ---
   Corps CV (p/li) à la même taille visuelle que les h2 utilisés comme
   corps sur les pages projet (1.5em). La hiérarchie tient via le poids :
   h2 reste bold, p/li sont normal. */

#cv p,
#cv li {
  font-size: 1.5em;
  max-width: var(--read-width);
}

#cv-source { display: none; }   /* CV complet : uniquement export PDF */
#cv-nav { display: contents; }  /* h1 alignés sur le body */
.pdf-only { display: none; }


/* --- Impression PDF du CV --- */

@media print {
  @page { size: A4; margin: 0; }

  /* Masque tout sauf le CV ciblé */
  body > h1,
  body > header,
  #cv-nav,
  .screen-only { display: none !important; }

  body:has(#cv) > header { position: static; }
  #cv > .cv-doc { display: none !important; }

  body[data-printing="global"]  #cv-global,
  body[data-printing="product"] #cv-product,
  body[data-printing="art"]     #cv-art,
  body[data-printing="source"]  #cv-source { display: block !important; }

  /* Tailles standard pour un CV A4 */
  #cv p,
  #cv li {
    font-size: 1em;
    font-weight: normal;
    max-width: none;
  }
  #cv h2 { max-width: none; }

  .pdf-only { display: block; }
}