/* 29.09.2026 V1.8
PROJET HAZAE
CSS mini: CSS3
pages/tableau.css
mise en page de la page dediee a un tableau (pages/tableau.php) - reprend les
variables de couleur de ../style.css (fond, degrade du titre, tags) mais sans
les unites cqw du diaporama principal (pas de conteneur .stage-outer ici)

Liste des modifications faites :
06.09.2026 Creation
06.09.2026 Ajout du bouton .tableau-main-link (champ 'url' du tableau)
06.09.2026 Retrait de .tableau-body (centrage flex sur le body, qui etirait
           la page sur toute la hauteur et collait le contenu en haut) ;
           ajout de .tableau-header (titre + bouton, espacement genereux)
06.09.2026 Retrait de .tableau-main-link (bouton "Voir le lien" supprime)
07.09.2026 Layout large (container-fluid) : .tableau-fluid remplace
           l'ancien empilement vertical - colonne .tableau-sidebar (retour +
           liens) a gauche, diaporama de la galerie au centre,
           .tableau-main-image (image du cadre, sortie du diaporama) a
           droite ; .tableau-video-frame passe d'un iframe YouTube en
           position absolue a une balise <video> autohebergee en flux normal
29.09.2026 Diaporama en ratio d'origine des photos : le cadre n'est plus
           force en carre (aspect-ratio 1/1 + object-fit cover qui rognait),
           il s'ajuste a l'image (largeur max 34rem, hauteur max 75vh)
29.09.2026 Retrait de la limite 34rem sur l'image : le cadre (fit-content)
           prenait la largeur native de la photo et laissait un grand vide
           a droite ; la taille n'est plus bornee que par la colonne et 75vh
29.09.2026 Nettoyage : degrade du titre repris de ../style.css (regle commune aux
           titres), police mono via var(--font-mono)
29.09.2026 Diaporama : lecteur .tableau-slide-video (videos de la galerie), compteur
           remonte en haut pour ne pas masquer les commandes de lecture

*/

.tableau-page{
  width:100%;
  max-width:56rem;
  margin:0 auto;
  padding:clamp(2rem,6vw,4rem) clamp(1rem,4vw,2rem) 5rem;
}
.tableau-page-head{padding-bottom:0}
.tableau-page-foot{padding-top:0}

.tableau-back{
  display:inline-block;
  color:var(--ink);
  text-decoration:none;
  font-size:.85rem;
  letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:.5em 1.1em;
  transition:border-color .2s ease,color .2s ease;
}
.tableau-back:hover{border-color:var(--glow);color:var(--glow)}

.tableau-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.6rem;
  text-align:center;
}

.tableau-title{
  margin:0;
  font-size:clamp(1.8rem,5vw,3rem);
  display:inline-block;
}

.tableau-empty{color:var(--muted);text-align:center;flex:1 1 320px}

.tableau-fluid{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:clamp(1.2rem,3vw,2.4rem);
  width:100%;
  padding:clamp(1.6rem,4vw,2.4rem) clamp(1rem,4vw,3rem);
  margin-bottom:clamp(2.4rem,6vw,3.6rem);
}

.tableau-sidebar{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.2rem;
  flex:0 0 220px;
}

.tableau-links{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  width:100%;
}

.tableau-link-item{
  display:flex;
  align-items:center;
  gap:.5em;
  color:var(--ink);
  text-decoration:none;
  font-size:.9rem;
  transition:border-color .2s ease;
}
.tableau-link-item:hover{border-color:var(--glow)}

.tableau-main-image{
  flex:0 0 auto;
  margin-left:auto;
}
.tableau-main-image img{
  display:block;
  max-width:220px;
  width:100%;
  height:auto;
  border-radius:.9rem;
  border:1px solid var(--glow);
  box-shadow:0 0 .5rem var(--glow), 0 0 3.4vw rgba(255,255,255,.35);
}

.tableau-slideshow{flex:1 1 320px}
.tableau-slide-frame{
  position:relative;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  border-radius:.9rem;
  overflow:hidden;
  background:#0a0813;
  border:1px solid var(--glow);
  box-shadow:0 0 .5rem var(--glow), 0 0 3.4vw rgba(255,255,255,.35);
}
.tableau-slide-img{display:block;width:auto;height:auto;max-width:100%;max-height:75vh}
.tableau-slide-img[hidden]{display:none}
.tableau-slide-video{background:#000;min-width:min(34rem,100%)}
.tableau-slide-video:not([hidden]) ~ .tableau-slide-counter{bottom:auto;top:.6rem}

.tableau-slide-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:2.4rem;height:2.4rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(7,6,12,.55);
  border:1px solid rgba(255,255,255,.5);
  color:var(--ink);
  font-size:1.4rem;line-height:1;
  cursor:pointer;
}
.tableau-slide-nav:hover{background:var(--glow);color:var(--frame-dark)}
.tableau-slide-prev{left:.6rem}
.tableau-slide-next{right:.6rem}
.tableau-slide-counter{
  position:absolute;bottom:.6rem;right:.8rem;
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.05em;
  color:var(--ink);
  background:rgba(7,6,12,.55);
  border-radius:999px;
  padding:.25em .7em;
}

.tableau-extras-title{
  margin:0 0 1rem;
  font-size:1.1rem;
  color:var(--cyan);
}

.tableau-extras-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.2rem;
}

.tableau-extra{
  background:linear-gradient(180deg,#170810,#0a060b 70%);
  border:1px solid rgba(255,255,255,.25);
  border-radius:.7rem;
  padding:1rem;
}

.tableau-extra-title{margin:0 0 .6em;font-size:.85rem;color:var(--muted)}
.tableau-video-frame{border-radius:.4rem;overflow:hidden;background:#000}
.tableau-video-frame video{display:block;width:100%;max-height:60vh}