/* Atelier Sakira — l'arriere-boutique.
 *
 * Meme maison que songs.sakira.fr (encre #090a0c, papier #f4f1e8, or #d8a84e),
 * mais un autre lieu : ici on inventorie et on compte. D'ou la typographie de
 * registre — une serif de labeur pour les chiffres et les titres, une grotesque
 * pour les etiquettes — et une grille qui ne met rien devant les images.
 *
 * Les polices sont celles de la machine de Saray (macOS). Aucun fichier de
 * police n'est charge : ce site doit s'ouvrir vite meme en 4G, et une police
 * distante serait la seule chose lente de la page.
 */

:root {
  --encre: #090a0c;
  --nuit: #0e1014;
  --panneau: #14171c;
  --papier: #f4f1e8;
  --doux: #8a9099;
  --trait: #23272e;
  --or: #d8a84e;
  --vert: #59bd83;
  --rouge: #d4756a;
  --bleu: #6f9fd8;

  --serif: "Iowan Old Style", "Hoefler Text", "Palatino Linotype", Palatino, Georgia, serif;
  --grotesque: "Avenir Next", "Avenir", "Helvetica Neue", Helvetica, sans-serif;

  --ombre: 0 24px 80px rgba(0, 0, 0, .6);
  --rayon: 3px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--grotesque);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

.doux { color: var(--doux); font-size: 13px; }
.sur-titre {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--or);
}

/* ------------------------------------------------------------- connexion */

.connexion {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(216, 168, 78, .10), transparent 70%),
    var(--encre);
}
.carte-connexion {
  width: min(420px, 100%); display: grid; gap: 14px;
  padding: clamp(28px, 5vw, 44px);
  border: 1px solid var(--trait); background: var(--panneau); box-shadow: var(--ombre);
}
.carte-connexion h1 {
  font: 400 46px/1 var(--serif); margin: 6px 0 2px; letter-spacing: -.02em;
}
.carte-connexion .doux { margin: 0 0 10px; }
.carte-connexion label { display: grid; gap: 6px; font-size: 12px; color: var(--doux); }
.carte-connexion input {
  border: 1px solid var(--trait); background: #101318; padding: 11px 12px;
  border-radius: var(--rayon); outline: none;
}
.carte-connexion input:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(216, 168, 78, .12); }

.principal {
  background: var(--or); color: #14100a; font-weight: 700;
  padding: 12px 16px; border-radius: var(--rayon); margin-top: 4px;
}
.principal:hover { background: #e6bb69; }
.principal:disabled { opacity: .5; cursor: default; }
.secondaire {
  border: 1px solid var(--trait); background: var(--panneau); color: var(--papier);
  padding: 9px 14px; border-radius: var(--rayon); font-weight: 600;
}
.secondaire:hover { border-color: var(--doux); }
.lien { color: var(--doux); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.lien:hover { color: var(--or); }
.erreur { color: var(--rouge); font-size: 13px; margin: 0; }

/* ---------------------------------------------------------------- entete */

.entete {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 14px clamp(16px, 3vw, 32px);
  background: rgba(9, 10, 12, .86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--trait);
}
.marque { display: flex; align-items: center; gap: 10px; font: 400 19px var(--serif); }
.marque em { font-style: italic; color: var(--or); }
.sceau {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--or); box-shadow: 0 0 14px rgba(216, 168, 78, .7);
}
.onglets { display: flex; gap: 2px; justify-self: center; }
.onglet {
  padding: 8px 18px; color: var(--doux); font-size: 13px; font-weight: 600;
  border-bottom: 2px solid transparent;
}
.onglet:hover { color: var(--papier); }
.onglet.actif { color: var(--papier); border-bottom-color: var(--or); }
.compte { justify-self: end; display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--doux); }

/* Deux langues, deux boutons : discret dans l'en-tête, bien visible sur l'écran
   de connexion où l'on ne sait pas encore dans quelle langue on va tomber. */
/* Le retour vers l'outil de travail quotidien. Dans le même onglet : Songs
   ouvre l'atelier dans un onglet à part, donc l'onglet de Songs existe déjà et
   en ouvrir un second n'en ferait qu'empiler. */
.lien-songs {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid var(--trait); border-radius: 999px;
  color: var(--doux); text-decoration: none; font-size: 12px; font-weight: 600;
  transition: .16s;
}
.lien-songs:hover { color: var(--or); border-color: rgba(216, 168, 78, .5); background: rgba(216, 168, 78, .08); }
.lien-songs svg { width: 14px; height: 14px; }

.bascule-langue { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--trait); border-radius: 999px; }
.bascule-langue button {
  padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: var(--doux);
}
.bascule-langue button:hover { color: var(--papier); }
.bascule-langue button.actif { background: var(--or); color: #14100a; }
.carte-connexion .bascule-langue { justify-self: end; margin-left: auto; }

.vue { padding: clamp(20px, 3vw, 34px) clamp(16px, 3vw, 32px) 80px; max-width: 1680px; margin: auto; }

/* ----------------------------------------------------------- recherche */

.chercher { display: grid; gap: 14px; margin-bottom: 24px; }
#recherche {
  width: 100%; border: 0; border-bottom: 1px solid var(--trait); background: none;
  padding: 10px 2px 14px; font: 400 clamp(22px, 3.4vw, 34px) var(--serif);
  outline: none; transition: border-color .18s;
}
#recherche::placeholder { color: #4a5058; }
#recherche:focus { border-bottom-color: var(--or); }

.aide { margin: -6px 0 0; font-size: 12px; color: var(--doux); line-height: 1.5; }
.aide strong { color: #b9b5aa; }

.reglages { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12px; padding: 6px 11px; border: 1px solid var(--trait);
  border-radius: 999px; background: var(--panneau); color: var(--doux);
}
.chip:hover { color: var(--papier); border-color: var(--doux); }
.chip.actif { background: rgba(216, 168, 78, .14); border-color: var(--or); color: var(--or); }
.chip small { opacity: .6; margin-left: 5px; }
.bascule { display: inline-flex; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.bascule button { padding: 8px 13px; font-size: 12px; font-weight: 600; color: var(--doux); }
.bascule button + button { border-left: 1px solid var(--trait); }
.bascule button:hover { color: var(--papier); }
.bascule button.actif { background: var(--or); color: #14100a; }

/* -------------------------------------------------------------- grille */

.grille {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}

.tuile {
  position: relative; display: block; padding: 0; overflow: hidden;
  aspect-ratio: 16 / 9; background: #0b0d10; border: 1px solid var(--trait);
  border-radius: var(--rayon); text-align: left;
  animation: apparait .32s both;
}
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tuile img, .tuile video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1), opacity .25s;
}
.tuile video { opacity: 0; }
.tuile.joue video { opacity: 1; }
.tuile.joue img { opacity: 0; }
.tuile:hover img { transform: scale(1.04); }

/* Le bandeau ne se leve qu'au survol : la grille doit se lire comme une
   planche-contact, pas comme un tableau de texte. */
.tuile figcaption {
  position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px;
  background: linear-gradient(transparent, rgba(6, 7, 9, .93) 55%);
  font-size: 12px; line-height: 1.35; color: #d8d5cc;
  opacity: 0; transform: translateY(6px); transition: .22s;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tuile:hover figcaption, .tuile:focus-visible figcaption { opacity: 1; transform: none; }
.tuile:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

.pastilles { position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; z-index: 2; }
.pastille {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; background: rgba(9, 10, 12, .78);
  border: 1px solid var(--trait); color: var(--doux); backdrop-filter: blur(6px);
}
/* Le registre se corrige SUR l'image, sans ouvrir le detail : c'est un jugement
   a l'oeil, il doit se poser en regardant la vignette, pas dans un formulaire.
   En pointille tant qu'il n'est qu'une supposition de l'import. */
.registre {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: rgba(9, 10, 12, .82);
  border: 1px solid var(--trait); color: var(--doux); backdrop-filter: blur(6px);
}
.registre:hover { border-color: var(--or); color: var(--or); }
.registre.suppose { border-style: dashed; }
.registre.juge { color: var(--or); border-color: rgba(216, 168, 78, .5); background: rgba(216, 168, 78, .12); }
.registre::after { content: "▾"; font-size: 9px; opacity: .7; }

/* Posé sur la page, pas dans la vignette : la tuile coupe ce qui dépasse (c'est
   ce qui permet le zoom de l'image au survol), et le menu s'y trouvait amputé de
   sa dernière ligne. En `fixed`, il se place sous l'étiquette et se retourne
   au-dessus quand il n'y a plus de place en bas de l'écran. */
.menu-registre {
  position: fixed; z-index: 40; min-width: 148px;
  padding: 5px; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--nuit); box-shadow: var(--ombre);
  animation: fondu .14s both;
}
.menu-registre button {
  display: flex; width: 100%; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 2px; font-size: 12px; color: var(--papier); text-align: left;
}
.menu-registre button:hover { background: #1b1f26; }
.menu-registre button.actif { color: var(--or); }
.menu-registre .separateur { height: 1px; background: var(--trait); margin: 4px 2px; }
.menu-registre .effacer { color: var(--doux); font-size: 11px; }

/* Écarter, en face du registre : les deux gestes du passage en revue sont aux
   deux coins hauts de la vignette. Discret tant qu'on ne survole pas, pour ne pas
   couvrir l'image d'une planche-contact ; toujours visible sur une vidéo déjà
   écartée, sinon on ne saurait pas comment la remettre. */
.ecarter {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(9, 10, 12, .82); border: 1px solid var(--trait);
  color: var(--doux); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.9); transition: .16s;
}
.tuile:hover .ecarter, .tuile:focus-within .ecarter { opacity: 1; transform: none; }
.ecarter:hover { color: var(--rouge); border-color: rgba(212, 117, 106, .55); }
.ecarter svg { width: 14px; height: 14px; display: block; }
.tuile.est-ecartee .ecarter {
  opacity: 1; transform: none;
  color: var(--rouge); border-color: rgba(212, 117, 106, .55); background: rgba(60, 22, 20, .8);
}
.tuile.est-ecartee .ecarter:hover { color: var(--vert); border-color: rgba(89, 189, 131, .55); }

.pastille.anime { color: var(--bleu); border-color: rgba(111, 159, 216, .4); }
.pastille.corrigee { color: var(--or); border-color: rgba(216, 168, 78, .45); }
.pastille.ecartee { color: var(--rouge); border-color: rgba(212, 117, 106, .45); }
.tuile.est-ecartee img, .tuile.est-ecartee video { filter: grayscale(1) brightness(.55); }

.fin-de-grille { display: grid; place-items: center; padding: 32px 0; gap: 10px; }

/* -------------------------------------------------------------- tiroir */

.voile {
  position: fixed; inset: 0; z-index: 30; background: rgba(5, 6, 8, .62);
  backdrop-filter: blur(3px); animation: fondu .2s both;
}
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

.tiroir {
  position: fixed; z-index: 31; top: 0; right: 0; height: 100vh;
  width: min(520px, 100%); overflow-y: auto;
  background: var(--nuit); border-left: 1px solid var(--trait); box-shadow: var(--ombre);
  animation: glisse .26s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes glisse { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }

.fermer {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  width: 34px; height: 34px; font-size: 22px; line-height: 1; color: var(--doux);
  background: rgba(9, 10, 12, .7); border: 1px solid var(--trait); border-radius: 50%;
}
.fermer:hover { color: var(--papier); }

.tiroir video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; }
.tiroir-corps { padding: 20px 22px 40px; display: grid; gap: 20px; }
.tiroir h2 { font: 400 24px/1.25 var(--serif); margin: 0; }
.tiroir .description { margin: 0; color: #c6c3ba; line-height: 1.6; }

.champ { display: grid; gap: 7px; }
.champ > span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.champ select, .champ input {
  border: 1px solid var(--trait); background: #101318; padding: 9px 11px;
  border-radius: var(--rayon); outline: none;
}
.champ select:focus, .champ input:focus { border-color: var(--or); }

.mots { display: flex; flex-wrap: wrap; gap: 6px; }
.mot {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  padding: 5px 9px; border: 1px solid var(--trait); border-radius: 999px; background: var(--panneau);
}
.mot button { color: var(--doux); font-size: 15px; line-height: 1; padding: 0 1px; }
.mot button:hover { color: var(--rouge); }
.mot.propose { border-style: dashed; color: var(--doux); }

.interrupteur { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid var(--trait); background: var(--panneau); border-radius: var(--rayon); }
.interrupteur input { margin-top: 3px; accent-color: var(--or); width: 16px; height: 16px; }
.interrupteur strong { display: block; font-size: 13px; }
.interrupteur em { font-style: normal; color: var(--doux); font-size: 12px; line-height: 1.45; }

.actions-tiroir { display: flex; gap: 10px; align-items: center; }
.note-correction { font-size: 12px; color: var(--or); margin: 0; }

/* ----------------------------------------------------- tableau de bord */

.blocs { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.bloc { border: 1px solid var(--trait); background: var(--panneau); padding: 22px 24px 26px; }
.bloc > h2 {
  font: 400 21px var(--serif); margin: 0 0 2px;
}
.bloc > .doux { margin: 0 0 18px; }

.mesures { display: grid; gap: 0; }
.mesure {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--trait);
}
.mesure:last-child { border-bottom: 0; }
.mesure .quoi { font-size: 13px; color: #c6c3ba; }
.mesure .total { font: 400 26px/1 var(--serif); font-variant-numeric: tabular-nums; }
.mesure .semaine { font-size: 11px; font-weight: 700; color: var(--vert); min-width: 46px; text-align: right; }
.mesure .semaine.zero { color: #4a5058; }

.grand-chiffre { font: 400 clamp(38px, 5vw, 54px)/1 var(--serif); font-variant-numeric: tabular-nums; }
.grand-chiffre small { font-size: 16px; color: var(--doux); margin-left: 6px; }

.avertissement {
  margin: 16px 0 0; padding: 11px 13px; font-size: 12px; line-height: 1.5;
  border-left: 2px solid var(--or); background: rgba(216, 168, 78, .07); color: #cfc9bb;
}
.limite { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--doux); border-left: 2px solid var(--trait); padding-left: 11px; }

.liste-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.liste-simple li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px solid var(--trait); padding-bottom: 9px; }
.liste-simple li:last-child { border-bottom: 0; }
.liste-simple a { color: var(--papier); text-decoration: none; }
.liste-simple a:hover { color: var(--or); text-decoration: underline; }
.liste-simple .quand { color: var(--doux); font-size: 12px; white-space: nowrap; }

.alerte { color: var(--rouge); }
.calme { color: var(--vert); }

/* ------------------------------------------------------------- message */

.message {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); z-index: 60;
  padding: 11px 18px; background: var(--papier); color: var(--encre);
  font-size: 13px; font-weight: 600; border-radius: var(--rayon);
  opacity: 0; pointer-events: none; transition: .22s;
}
.message.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  /* Flex et non grille : en grille, la marque et le bloc de compte imposaient
     ensemble une largeur minimale plus grande que l'écran, et toute la page
     défilait de deux pixels vers la droite. En flex qui passe à la ligne,
     chaque élément se replie tout seul. */
  .entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
  .marque { font-size: 17px; min-width: 0; }
  .onglets { order: 3; flex: 1 0 100%; justify-content: flex-start; }
  /* Sur petit écran on laisse tomber l'adresse : savoir qui est connecté n'a pas
     d'intérêt sur un site à une seule utilisatrice. Le retour vers Songs, la
     langue et surtout la déconnexion restent : ne pas pouvoir se déconnecter
     depuis un téléphone serait un vrai manque, pas un gain de place. */
  .compte { gap: 8px; }
  #operateur { display: none; }
  .lien-songs span { display: none; }
  .lien-songs { padding: 6px 9px; }
  /* Six boutons de registre côte à côte dépassaient de 18 px sur un écran de
     390 : c'était ça, et rien d'autre, qui faisait défiler toute la page vers
     la droite. Ils passent à la ligne. */
  .bascule { flex-wrap: wrap; }
  .bascule button { padding: 7px 10px; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}