/* ==========================================================
   NUIT SANS LUNE — feuille de style de la version TABLEAU (style-tableau-v2.css)
   Esprit suisse : grille, filets fins, texte en Archivo,
   titres en Asul, aucun effet décoratif.
   ========================================================== */

/* 1. VARIABLES — couleurs, polices, espacements : tout se règle ici */
:root {
  --fond: #0B0C0E;     /* noir profond / nuit */
  --carte: #121418;    /* conteneurs, champs de formulaire */
  --ligne: #22252A;    /* filets et bordures */
  --texte: #E0E0E0;    /* texte courant */
  --titre: #FFFFFF;    /* titres, accents, survols */
  --tag: #888888;      /* tags, métadonnées */
  --titres: "Asul", Georgia, "Times New Roman", serif;          /* titres */
  --sans: "Archivo", Helvetica, Arial, sans-serif;               /* texte, libellés, tableau */
  --marge: clamp(1rem, 3vw, 2.5rem);
  --espace: clamp(3rem, 8vw, 6.5rem);
}

/* 2. BASE */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 .95rem/1.6 var(--sans); font-variant-numeric: tabular-nums; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; }
h1, h2, h3 { margin: 0; color: var(--titre); font-family: var(--titres); font-weight: 400; line-height: 1.15; }
.conteneur { max-width: 1500px; margin: 0 auto; padding: 0 var(--marge); }
section { padding: var(--espace) 0; border-top: 1px solid var(--ligne); }
.aller-au-contenu { position: absolute; left: -999px; }
.aller-au-contenu:focus { left: 1rem; top: 1rem; background: var(--titre); color: var(--fond); padding: .5rem 1rem; z-index: 20; }

/* Libellé en capitales espacées (barre, tags, en-têtes) */
.capitales { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 500; }

/* 3. BARRE UTILITAIRE */
.barre { border-bottom: 1px solid var(--ligne); color: var(--tag); }
.barre .conteneur { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
.barre a:hover, .barre [aria-current] { color: var(--titre); }

/* 4. EN-TÊTE */
header { position: sticky; top: 0; z-index: 10; background: var(--fond); border-bottom: 1px solid var(--ligne); }
header .conteneur { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: .75rem; padding-bottom: .75rem; }
.logo { display: flex; align-items: center; gap: .75rem; color: var(--titre); }
/* Logo rond déjà blanc sur noir : pas d'inversion (si le PNG est noir sur blanc, ajouter filter: invert(1)) */
.logo img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ligne); transform: rotate(var(--rot, 0deg)); }  /* tourne au défilement (script.js) */
nav ul { display: flex; gap: clamp(1rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
nav a { padding: .25rem 0; border-bottom: 1px solid transparent; }
nav a:hover { color: var(--titre); border-color: var(--titre); }
nav a span { color: var(--tag); margin-right: .4rem; }

/* 5. HERO : bannière + ligne de date + manifeste */
.hero { border-top: 0; padding-top: clamp(1rem, 3vw, 2rem); }
.banniere { margin: 0; line-height: 0; }
.banniere img { width: 100%; height: auto; mix-blend-mode: lighten; }  /* le noir de la bannière se fond dans le fond du site */
.hero-date { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding-top: .75rem; border-top: 1px solid var(--ligne); color: var(--tag); }
.hero-date strong { color: var(--titre); font-weight: 500; }
.manifeste { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(1.5rem, 5vw, 5rem); margin-top: var(--espace); }
.manifeste .exergue { font: 400 clamp(1.4rem, 2.6vw, 2.3rem)/1.3 var(--titres); color: var(--titre); margin: 0; }
.manifeste .suite { max-width: 46rem; }

/* 6. TITRES DE SECTION */
.titre-section { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 2.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--ligne); font-size: 1.6rem; }
.titre-section span { color: var(--tag); font-family: var(--sans); }
.sous-titre { margin: 5rem 0 1rem; color: var(--tag); font-family: var(--sans); font-weight: 400; }

/* 7. GRILLES : desktop 3 colonnes / tablette 2 / mobile 1 */
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; }
@media (max-width: 1000px) { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .grille { grid-template-columns: 1fr; } }

/* Fiche film : filet blanc en haut, comme une entrée de programme */
.fiche { border-top: 1px solid var(--titre); padding-top: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.fiche h3 { font-size: 1.5rem; }
.fiche p { margin: 0; }
.meta { color: var(--tag); font-size: .78rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.tags li { border: 1px solid var(--ligne); color: var(--tag); padding: .1rem .5rem; }

/* Visuel fixe (illustration, still) avec légende */
.visuel { position: relative; margin: 0; aspect-ratio: 16 / 9; background: var(--carte); overflow: hidden; }
.visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visuel figcaption { position: absolute; left: 0; bottom: 0; padding: .35rem .7rem; background: rgba(11,12,14,.8); color: var(--tag); }

/* Lecteur vidéo responsive 16:9 (iframe Streamy Rabbit) */
.video { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--ligne); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Projets mis en avant (VIRAGES, Centre Pompidou) : vidéo + texte, puis galerie de stills */
.projet { border-top: 1px solid var(--titre); padding-top: 1.25rem; margin-bottom: 5rem; }
.projet-corps { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.projet h3 { font-size: clamp(1.8rem, 3.5vw, 3rem); margin-bottom: 1rem; }
.projet h3 small { font: 400 .9rem var(--sans); color: var(--tag); margin-left: .5rem; }
.projet .tags { margin-bottom: 1.25rem; }
@media (max-width: 800px) { .projet-corps { grid-template-columns: 1fr; } }

/* Galerie de stills : défilement horizontal, sans JavaScript */
.galerie { display: flex; gap: .75rem; margin-top: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galerie::-webkit-scrollbar { display: none; }  /* pas de barre de défilement */
.galerie img { flex: 0 0 min(78%, 480px); aspect-ratio: 16 / 9; object-fit: cover; scroll-snap-align: start; background: var(--carte); }

/* Flèches + compteur des galeries (ajoutés par le JavaScript) */
.galerie-nav { display: flex; align-items: center; gap: 1rem; color: var(--tag); margin-top: .75rem; }
.galerie-nav button { padding: 0 .2rem; font: inherit; font-size: 1.3rem; line-height: 1; background: none; border: 0; color: var(--titre); cursor: pointer; }  /* flèche seule, sans cadre */
.galerie-nav button:hover { background: none; color: var(--tag); }
.galerie-nav button:focus-visible { outline: 1px solid var(--titre); outline-offset: 3px; }
.detail .galerie-nav { grid-column: 1 / -1; }

/* 8. TABLEAU DES RÉALISATIONS PASSÉES : lignes dépliables, sans JavaScript */
.tableau { border-top: 1px solid var(--titre); }
.tableau-tete, .ligne summary { display: grid; grid-template-columns: 5.5rem 2.2fr 1.5fr 1.2fr 1.6fr 1.3fr 2rem; gap: 1rem; padding: 1rem .5rem; align-items: baseline; }
.tableau-tete { color: var(--tag); border-bottom: 1px solid var(--ligne); }
.ligne { border-bottom: 1px solid var(--ligne); }
.ligne summary { cursor: pointer; list-style: none; font-size: .9rem; line-height: 1.45; }
.ligne summary::-webkit-details-marker { display: none; }
.ligne summary::after { content: "+"; text-align: right; color: var(--tag); }
.ligne[open] summary::after { content: "−"; }
.ligne .a, .ligne .th { color: var(--tag); }
.ligne[hidden] { display: none; }
.ligne .t { color: var(--titre); }
.ligne summary:hover, .ligne[open] summary { background: var(--carte); }
.ligne summary:hover .t, .ligne summary:hover .a, .ligne summary:hover::after { color: var(--titre); }
.detail { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; padding: 1rem .5rem 2rem; background: var(--carte); }
.detail .galerie { grid-column: 1 / -1; margin-top: 0; }
.detail p { margin: 0 0 .75rem; }
.mobile-seulement { display: none; }
@media (max-width: 800px) {
  .tableau-tete { display: none; }
  .ligne summary { grid-template-columns: 4.5rem 1fr 1.5rem; }
  .ligne .n, .ligne .th, .ligne .p, .ligne .r { display: none; }
  .detail { grid-template-columns: 1fr; }
  .mobile-seulement { display: block; }
}

/* 9. COLLECTIF */
.texte-collectif { max-width: 54rem; font: 400 clamp(1.3rem, 2.2vw, 1.9rem)/1.4 var(--titres); color: var(--titre); }

/* 10. CONTACT */
.contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 6vw, 5rem); }
.contact h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 1rem; }
.mail { color: var(--titre); border-bottom: 1px solid var(--titre); }
form { display: grid; gap: 1.1rem; }
label { display: grid; gap: .4rem; color: var(--tag); }
input, select, textarea { width: 100%; font: inherit; color: var(--titre); background: var(--carte); border: 1px solid var(--ligne); border-radius: 0; padding: .7rem .8rem; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--titre); }
textarea { min-height: 9rem; resize: vertical; }
button { justify-self: start; font: inherit; cursor: pointer; padding: .85rem 1.5rem; color: var(--fond); background: var(--titre); border: 1px solid var(--titre); }
button:hover { background: transparent; color: var(--titre); }

/* 11. PIED DE PAGE */
footer { border-top: 1px solid var(--ligne); padding: 2.5rem 0; color: var(--tag); }
footer .conteneur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
footer p { margin: 0; }
footer a:hover { color: var(--titre); }
@media (max-width: 1000px) { footer .conteneur { grid-template-columns: repeat(2, 1fr); } }

/* 12. RESPONSIVE */
@media (max-width: 800px) { .manifeste, .contact { grid-template-columns: 1fr; } }
@media (max-width: 600px) { footer .conteneur { grid-template-columns: 1fr; } }

/* 13. FILTRES, TRI ET ANIMATIONS du tableau (barre ajoutée par le JavaScript) */
.filtres { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; align-items: baseline; margin-bottom: 1.25rem; }
.filtre-groupe { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: baseline; }
.filtre-groupe > span { color: var(--tag); }
.filtres button { padding: 0; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--tag); font: inherit; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 500; cursor: pointer; }
.filtres button:hover, .filtres button[aria-pressed="true"] { background: none; color: var(--titre); border-bottom-color: var(--titre); }
.filtres button[data-vide] { opacity: .35; }  /* aucune correspondance avec l'autre filtre en cours */
.filtres button[data-vide]:hover { opacity: 1; }
.filtres .compte { margin-left: auto; color: var(--tag); }
/* Tri : en-têtes de colonnes cliquables (ordinateur) ou liste déroulante (mobile) */
.tableau-tete button { padding: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-align: left; }
.tableau-tete button:hover, .tableau-tete button[data-sens] { background: none; color: var(--titre); }
.tableau-tete button[data-sens="1"]::after { content: " ↑"; }
.tableau-tete button[data-sens="-1"]::after { content: " ↓"; }
.tri-mobile { display: none; }
.tri-mobile select { width: auto; padding: .3rem .5rem; font-size: .8rem; }
@media (max-width: 800px) { .tri-mobile { display: flex; } }
/* Ouverture d'une ligne : le contenu apparaît en douceur */
@keyframes apparition { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ligne[open] .detail { animation: apparition .4s ease; }
@media (prefers-reduced-motion: reduce) { .ligne[open] .detail { animation: none; } }

/* 14. HAUT DE PAGE (résumé) ET SECTION COLLECTIF (manifeste + mini-bios côte à côte) */
.manifeste .suite p { font-size: 1.05rem; }
.collectif-corps { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.etiquette { margin: 0 0 1rem; color: var(--tag); }
.manifeste-long p { max-width: 44rem; }
.manifeste-long .amorce { font: 400 clamp(1.25rem, 2vw, 1.6rem)/1.4 var(--titres); color: var(--titre); }
.bio { border-top: 1px solid var(--titre); padding-top: 1rem; margin-bottom: 1.75rem; }
.bio h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.bio p { margin: 0; font-size: .9rem; }
@media (max-width: 800px) { .collectif-corps { grid-template-columns: 1fr; } }

/* 15. VIRAGES : en-tête, texte sur deux colonnes, bloc « à venir » */
.projet-entete { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .75rem 2rem; margin-bottom: 1.5rem; }
.projet-entete h3 { margin: 0; }
.projet-entete .tags { margin: 0; }
.projet-entete + .galerie { margin-top: 0; }
.projet-texte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.5rem, 5vw, 4rem); margin-top: 3rem; align-items: start; }
.projet-texte-intro { position: sticky; top: 7rem; }
.projet-texte .exergue { margin: 0 0 1.5rem; font: 400 clamp(1.3rem, 2.2vw, 1.9rem)/1.3 var(--titres); color: var(--titre); }
.annonce { margin: 0 0 1.5rem; padding-top: .75rem; border-top: 1px solid var(--ligne); color: var(--tag); font-size: .88rem; }
.annonce .capitales { color: var(--titre); }
.deux-colonnes { columns: 2; column-gap: clamp(1.5rem, 3vw, 3rem); }
.deux-colonnes p { orphans: 3; widows: 3; }
.deux-colonnes p:last-child { margin-bottom: 0; }
@media (max-width: 1000px) { .projet-texte { grid-template-columns: 1fr; margin-top: 2rem; } .projet-texte-intro { position: static; } }
@media (max-width: 700px)  { .deux-colonnes { columns: 1; } }
.detail.sans-video { grid-template-columns: 1fr; }

/* 16. GALERIES « GRANDE IMAGE + VIGNETTES » (classe .vignettes ajoutée par le JavaScript)
   Ordinateur : image 1 en grand, vignettes en colonne à droite (défilement vertical s'il y en a beaucoup).
   Mobile (≤ 800px) : grande image, vignettes en bande horizontale dessous. */
.galerie.vignettes { display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 19%, 280px); gap: .75rem; overflow: visible; scroll-snap-type: none; }
.galerie-principale { aspect-ratio: 16 / 9; background: var(--carte); overflow: hidden; touch-action: pan-y; }
.galerie .galerie-principale img { flex: none; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.galerie-colonne { position: relative; min-height: 0; }
.galerie-liste { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; scrollbar-width: none; }
.galerie-liste::-webkit-scrollbar { display: none; }
.galerie .vignette { flex: none; width: 100%; aspect-ratio: 16 / 9; padding: 0; background: var(--carte); border: 1px solid transparent; color: inherit; opacity: .5; cursor: pointer; transition: opacity .2s; }
.galerie .vignette:hover { background: var(--carte); color: inherit; opacity: 1; }
.galerie .vignette[aria-current="true"] { opacity: 1; border-color: var(--titre); }
.galerie .vignette:focus-visible { outline: 1px solid var(--titre); outline-offset: 2px; opacity: 1; }
.galerie .vignette img { flex: none; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (max-width: 800px) {
  .galerie.vignettes { grid-template-columns: 1fr; gap: .5rem; }
  .galerie-liste { position: relative; inset: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .galerie .vignette { width: auto; flex: 0 0 28%; }
}


/* ==========================================================
   PAGE DE VERROUILLAGE (site en construction) — à supprimer à la mise en ligne publique
   ========================================================== */
html.verrouille body > *:not(#barriere) { display: none !important; }   /* tant que verrouillé : seule la barrière s'affiche */
html:not(.verrouille) #barriere { display: none; }
#barriere { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--marge); }
.barriere-boite { width: 100%; max-width: 34rem; text-align: center; }
.barriere-logo { margin: 0 auto 1.5rem; border-radius: 50%; box-shadow: 0 0 0 1px var(--ligne); }
.barriere-sur { color: var(--tag); margin-bottom: 1.25rem; }
.barriere-boite h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: 1.25rem; }
.barriere-boite form { margin: 2rem 0; text-align: left; }
.barriere-boite label { display: block; margin-bottom: .5rem; color: var(--tag); }
.barriere-champ { display: flex; gap: .5rem; }
.barriere-champ input { flex: 1; }
.barriere-erreur { min-height: 1.5rem; margin: .6rem 0 0; color: var(--titre); font-size: .85rem; }
.barriere-contact { padding-top: 1.5rem; border-top: 1px solid var(--ligne); }
.barriere-contact .capitales { color: var(--tag); margin-bottom: .5rem; }
.barriere-lieux { margin-top: 1rem; margin-bottom: 0; }