/* ==========================================================================
   Interface v2 — « Création » : Croquis et Médiathèque (enveloppes légères,
   25/08/2026)
   ==========================================================================
   Compagnon de ui-v2-crea.js. Tout est scopé html.ui-v2 et préfixé v2cr-
   (cr comme création) : sans la v2, ce fichier ne change RIEN. Jetons de
   design-tokens.css (thème clair posé par la coquille) et variables de
   ui-v2.css (--v2-bordure-douce). Règles du cahier : cartes blanches
   radius 12, boutons/champs radius 8, pastilles radius 4, grille 8 pt,
   cibles 44 px, un seul bouton primaire cuivre par écran, H1 PT Serif.

   Les deux écrans restent en LOGIQUE V1 (enveloppe légère assumée, patron
   de ui-v2-appels.js) : la peau v2cr-v1 éclaircit leurs cartes, boutons,
   champs et tableaux sans toucher leur structure. Les badges convertis en
   pastilles par ui-v2-crea.js reçoivent ici la palette pastel commune aux
   modules v2 (mêmes valeurs que v2ap) — jamais de classe « badge- ».
   ========================================================================== */

/* ------------------------------------------------------- en-tête d'écran */
html.ui-v2 .v2cr-entete {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
html.ui-v2 .v2cr-entete h1 {
  margin: 0;
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2cr-entete-meta {
  font-size: 13px;
  color: var(--texte-attenue);
}

/* Onglets soulignés cuivre — le même dessin que v2ap. La subnav des médias
   GARDE sa classe .subnav (sa délégation de clic vit sur ce nœud) et reçoit
   v2cr-onglets en plus : ces règles doivent donc l'emporter sur .subnav de
   style.css — html.ui-v2 + deux classes suffisent en spécificité. */
html.ui-v2 .v2cr-onglets {
  display: flex;
  gap: 22px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--v2-bordure-douce);
  flex-wrap: wrap;
}
html.ui-v2 .v2cr-onglets a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  margin-right: 0;               /* annule le margin-right:18px de .subnav a */
  font-size: 14px;
  color: var(--texte-attenue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
html.ui-v2 .v2cr-onglets a:hover { color: var(--sobria-nuit); }
html.ui-v2 .v2cr-onglets a.active,
html.ui-v2 .v2cr-onglets a.v2cr-onglet-actif {
  color: var(--sobria-nuit);
  font-weight: 600;
  border-bottom-color: var(--sobria-cuivre);
}

/* -------------------------------------------------------------- pastilles */
/* Posées par ui-v2-crea.js à la place des badges v1 (style en ligne retiré).
   Palette pastel commune aux modules v2 ; le motif reste dans le title. */
html.ui-v2 .v2cr-pastille {
  display: inline-block;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}
html.ui-v2 .v2cr-pastille-vert   { background: #eaf5ee; color: #3f8f5f; }
html.ui-v2 .v2cr-pastille-ambre  { background: #fdf3e3; color: #9a6b1a; }
html.ui-v2 .v2cr-pastille-bleu   { background: #eef3fb; color: #2f5fa8; }
html.ui-v2 .v2cr-pastille-rouge  { background: #fbeeec; color: #a3392b; }
html.ui-v2 .v2cr-pastille-neutre { background: #efeeec; color: #676d7c; }

/* Le feu tricolore du bandeau des médias : l'émoji est retiré par
   ui-v2-crea.js, le point est dessiné ici — pas d'émoji dans le chrome. */
html.ui-v2 .v2cr-point {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html.ui-v2 .v2cr-point::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
html.ui-v2 .v2cr-point-vert::before  { background: #3f8f5f; }
html.ui-v2 .v2cr-point-ambre::before { background: #d9962b; }
html.ui-v2 .v2cr-point-rouge::before { background: #a3392b; }

/* ==========================================================================
   Peau v2cr-v1 — restyle LÉGER des deux écrans restés en logique v1.
   Les variables inversées de la peau de compatibilité (ui-v2.css) rendent
   déjà ces écrans clairs ; ici on aligne cartes, boutons, champs et
   tableaux sur le dessin v2 — la structure et la logique v1 ne bougent pas.
   ========================================================================== */
html.ui-v2 #main.v2cr-v1 .card {
  background: var(--fond-surface, #fff);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: var(--ombre-1, 0 1px 2px rgba(20, 33, 59, .06));
}
html.ui-v2 #main.v2cr-v1 .card h2,
html.ui-v2 #main.v2cr-v1 .card h3,
html.ui-v2 #main.v2cr-v1 .card h4 {
  color: var(--sobria-nuit);
  font-size: 16px;
}
html.ui-v2 #main.v2cr-v1 .meta { color: var(--texte-attenue); }
html.ui-v2 #main.v2cr-v1 .empty { color: var(--texte-attenue); }

/* ----------------------------------------------------------------- boutons */
/* Un seul primaire cuivre par écran ; les autres blancs bordés. Les hauteurs
   v1 restent (44 px plein, 34 px compact — jetons --hauteur-bouton*). */
html.ui-v2 #main.v2cr-v1 .btn {
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-weight: 500;
}
html.ui-v2 #main.v2cr-v1 .btn:hover { filter: none; background: #faf8f3; }
html.ui-v2 #main.v2cr-v1 .btn:disabled {
  opacity: .45;
  cursor: default;
}
html.ui-v2 #main.v2cr-v1 .btn:disabled:hover { background: var(--fond-surface, #fff); }
html.ui-v2 #main.v2cr-v1 .btn-primary {
  border-color: transparent;
  background: var(--sobria-cuivre);
  color: #fff;
  font-weight: 600;
}
html.ui-v2 #main.v2cr-v1 .btn-primary:hover { background: #b06c33; }
/* Rétrogradés en secondaires — un seul cuivre par écran : sur « À
   arbitrer », le primaire est Accepter, pas « + Ajouter un dessin » ; en
   mode phrase des médias, le primaire reste « Déposer des médias ». Les ID
   l'emportent sur la règle .btn-primary ci-dessus. */
html.ui-v2 #main.v2cr-v1 #ca-ajouter,
html.ui-v2 #main.v2cr-v1 #med-phrase {
  border: 1px solid var(--v2-bordure-douce);
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-weight: 500;
}
html.ui-v2 #main.v2cr-v1 #ca-ajouter:hover,
html.ui-v2 #main.v2cr-v1 #med-phrase:hover { background: #faf8f3; }

/* ----------------------------------------------------------------- champs */
/* Les cases à cocher sont EXCLUES : la grille d'arbitrage en porte une par
   dessin (.ca-case) — un min-height de 40 px les déformerait. */
html.ui-v2 #main.v2cr-v1 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.ui-v2 #main.v2cr-v1 select,
html.ui-v2 #main.v2cr-v1 textarea {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
}
html.ui-v2 #main.v2cr-v1 input[type="checkbox"] { accent-color: var(--sobria-cuivre); }
html.ui-v2 #main.v2cr-v1 label {
  text-transform: none;          /* annule l'uppercase v1 */
  letter-spacing: 0;
  font-weight: 600;
  color: var(--texte);
}

/* --------------------------------------------------------------- tableaux */
/* <table class="table"> (catégories de croquis, vue liste des médias) n'a
   AUCUN style en v1 — mesuré dans style.css : seuls .list-table, .pf-table
   et table.lignes y existent. On lui donne ici le dessin v2. */
html.ui-v2 #main.v2cr-v1 .table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
html.ui-v2 #main.v2cr-v1 .table th {
  text-align: left;
  padding: 10px 12px;
  color: var(--texte-attenue);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  border-bottom: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 #main.v2cr-v1 .table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--v2-bordure-douce);
  vertical-align: middle;
}
html.ui-v2 #main.v2cr-v1 .table tr:last-child td { border-bottom: none; }
html.ui-v2 #main.v2cr-v1 .table tr[data-media]:hover { background: rgba(20, 33, 59, .04); }

/* ------------------------------------------------- vignettes des croquis */
/* LA MESURE QUI COMMANDE CE BLOC (détail en tête de ui-v2-crea.js) : les
   459 SVG de crm/assets/croquis/ tracent en SOMBRE (#373946 ×5 198,
   #14213B ×1 377, #C3793A ×1 063) sur fond transparent, avec 332 aplats
   crème #F4F1E9 en guise de papier. croquis.js pose
   background:var(--creme,#F4F1E9) sous chaque vignette — mais la peau de
   compatibilité v2 (ui-v2.css) inverse --creme en #1d2843 (nuit) : dans la
   coquille v2, les dessins sombres reposent sur fond nuit et disparaissent.
   Le fond juste est la CRÈME : on le rétablit via --sobria-creme (jeton
   jamais inversé), !important parce que le fond v1 est un style en ligne.
   Pas de blanc pur : les aplats #F4F1E9 s'y liraient en rectangles. */
html.ui-v2 #main.v2cr-v1 img[src*="/api/croquis/"] {
  background: var(--sobria-creme, #F4F1E9) !important;
  border: 1px solid var(--v2-bordure-douce);
}
/* Les modales des croquis (fiche, arbitrage) montrent les mêmes aperçus
   hors de #main : même fond crème, pour la même raison mesurée. */
html.ui-v2 .modal-back img[src*="/api/croquis/"] {
  background: var(--sobria-creme, #F4F1E9) !important;
}

/* ------------------------------------------ tuiles cliquables des grilles */
/* Vignettes de dessins (figure[data-croquis]) et tuiles de médias
   ([data-media]) : role="button", tabindex=0 — cible visible au survol et
   au clavier. Le damier des médias (transparences) reste tel quel. */
html.ui-v2 #main.v2cr-v1 [data-croquis]:hover,
html.ui-v2 #main.v2cr-v1 .card[data-media]:hover {
  box-shadow: 0 4px 14px rgba(20, 33, 59, .10);
}
html.ui-v2 #main.v2cr-v1 [data-croquis]:focus-visible,
html.ui-v2 #main.v2cr-v1 [data-media]:focus-visible {
  outline: 2px solid var(--sobria-cuivre);
  outline-offset: 2px;
}