/* Bascuñana · Gabarits : les visuels à partager (15 novembre 2026).
   Une galerie de planches contact : chaque texte, ses deux vignettes côte à côte, l'affiche et la phrase.
   Le panneau de partage : la vignette à gauche, le message à droite (dessous sur téléphone). */

.bsc-visuels { --v-carte: var(--marbre); --v-filet: var(--filet); background: var(--papier); }

/* ---------------- L'en-tête et le mode d'emploi ---------------- */
.bsc-vis-tete { padding: clamp(48px, 7vw, 96px) 0 34px; background: var(--papier); }
.bsc-vis-tete .bsc-chapo { max-width: 50rem; }
:where(.bsc-visuels) ol, :where(.bsc-visuels) ul { list-style: none; margin: 0; padding: 0; }
:where(.bsc-visuels) li { margin: 0; padding: 0; }
.bsc-visuels .bsc-vis-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; counter-reset: none; }
.bsc-visuels .bsc-vis-mode li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px 74px; background: var(--marbre); border: 1px solid var(--filet); border-top: 3px solid var(--lave); }
.bsc-vis-mode-n { position: absolute; left: 18px; top: 6px; font: 600 54px/1 var(--titre); color: var(--lave); }
.bsc-vis-mode strong { font: 600 22px/1.15 var(--titre); color: var(--encre); }
.bsc-vis-mode li > span:last-child { font-size: 15px; line-height: 1.5; color: var(--texte); }

/* ---------------- La barre d'outils ---------------- */
.bsc-vis-galerie { padding: 0 0 clamp(56px, 8vw, 110px); }
.bsc-vis-outils { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; padding: 16px 0 14px; margin-bottom: 26px;
  background: color-mix(in srgb, var(--papier) 94%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--filet); }
.bsc-vis-cherche { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; max-width: 360px; }
.bsc-vis-cherche input { font: 400 16.5px/1.3 var(--lecture); color: var(--encre); background: var(--marbre); border: 1px solid var(--filet); border-radius: 2px; padding: 10px 14px; min-height: 44px; }
.bsc-vis-cherche input:focus { outline: 2px solid var(--lave); outline-offset: 1px; }
.bsc-vis-filtres, .bsc-vis-formats { display: flex; flex-wrap: wrap; gap: 6px; }
.bsc-vis-filtres button, .bsc-vis-formats button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; border: 1px solid var(--filet); border-radius: 999px; background: var(--marbre);
  font: 500 12px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--texte); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.bsc-vis-filtres button span, .bsc-vis-formats button span { color: var(--doux); letter-spacing: 0; text-transform: none; }
.bsc-vis-filtres button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--r, var(--lave)); }
.bsc-vis-filtres button:first-child::before { background: conic-gradient(var(--eprouver) 0 25%, var(--penser) 0 50%, var(--combattre) 0 75%, var(--batir) 0); }
.bsc-vis-filtres button:hover, .bsc-vis-formats button:hover { border-color: var(--encre); }
.bsc-vis-filtres button[aria-pressed="true"], .bsc-vis-formats button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--marbre); }
.bsc-vis-filtres button[aria-pressed="true"] span, .bsc-vis-formats button[aria-pressed="true"] span { color: color-mix(in srgb, var(--marbre) 70%, transparent); }
.bsc-vis-formats { margin-left: auto; }
.bsc-vis-ratio { display: inline-block; border: 1.5px solid currentColor; border-radius: 1px; }
.bsc-vis-ratio--fil { width: 10px; height: 12.5px; } .bsc-vis-ratio--story { width: 8px; height: 14px; } .bsc-vis-ratio--lien { width: 16px; height: 8.5px; }
.bsc-vis-etat { flex-basis: 100%; margin: 0; color: var(--doux); }
.bsc-vis-outils button:focus-visible { outline: 2px solid var(--lave); outline-offset: 2px; }

/* ---------------- La planche contact ---------------- */
.bsc-visuels .bsc-vis-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 30px 26px; align-items: start; }
.bsc-visuels .bsc-vis-carte { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; background: var(--marbre); border: 1px solid var(--filet); border-top: 3px solid var(--r, var(--lave));
  box-shadow: 0 1px 0 rgba(31, 28, 25, .04); transition: box-shadow .2s, transform .2s; }
.bsc-visuels .bsc-vis-carte[hidden] { display: none; }
.bsc-visuels .bsc-vis-carte:hover { box-shadow: 0 16px 34px -18px rgba(31, 28, 25, .35); }
.bsc-visuels .bsc-vis-carte.bsc-vis-cible { outline: 2px solid var(--lave); outline-offset: 4px; }
.bsc-vis-carte-oeil { margin: 0; font: 500 11px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--r, var(--lave)); }
.bsc-vis-carte-oeil span { color: var(--doux); }
.bsc .bsc-vis-carte-titre { margin: 0; padding: 0; font: 600 23px/1.08 var(--titre); color: var(--encre); text-wrap: balance; min-height: 2.16em; }
.bsc-vis-carte-titre a { color: inherit; text-decoration: none; }
.bsc-vis-carte-titre a:hover { color: var(--lave); }
.bsc-vis-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; margin-top: 4px; }
.bsc-vis-vignette { display: flex; flex-direction: column; gap: 7px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.bsc-vis-toile { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--velin); overflow: hidden; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(31, 28, 25, .14), 0 10px 22px -12px rgba(31, 28, 25, .45); transition: transform .25s cubic-bezier(.3, .7, .3, 1), box-shadow .25s; }
.bsc-vis-vignette[data-v="1"] .bsc-vis-toile { background: var(--bistre); }
.bsc-vis-grille[data-f="story"] .bsc-vis-toile { aspect-ratio: 9 / 16; }
.bsc-vis-grille[data-f="lien"] .bsc-vis-toile { aspect-ratio: 1200 / 630; }
.bsc-vis-grille[data-f="lien"] .bsc-vis-paire { grid-template-columns: 1fr; }
.bsc-vis-toile canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .35s; }
.bsc-vis-toile.pret canvas { opacity: 1; }
.bsc-vis-toile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%) -100% 0 / 200% 100% no-repeat; animation: bsc-vis-lueur 1.4s infinite; }
.bsc-vis-toile.pret::after { content: none; }
@keyframes bsc-vis-lueur { to { background-position: 100% 0; } }
.bsc-vis-legende { display: flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte); }
.bsc-vis-legende b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--encre); color: var(--marbre); font-weight: 500; letter-spacing: 0; font-size: 11px; }
.bsc-vis-legende i { font-style: normal; color: var(--doux); letter-spacing: 0; }
.bsc-vis-legende i::before { content: "· "; }
.bsc-vis-vignette:hover .bsc-vis-toile, .bsc-vis-vignette:focus-visible .bsc-vis-toile { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 2px 4px rgba(31, 28, 25, .14), 0 22px 34px -14px rgba(31, 28, 25, .55); }
.bsc-vis-vignette[data-v="2"]:hover .bsc-vis-toile, .bsc-vis-vignette[data-v="2"]:focus-visible .bsc-vis-toile { transform: translateY(-4px) rotate(.6deg); }
.bsc-vis-vignette:hover .bsc-vis-legende, .bsc-vis-vignette:focus-visible .bsc-vis-legende { color: var(--lave); }
.bsc-vis-vignette:hover .bsc-vis-legende b, .bsc-vis-vignette:focus-visible .bsc-vis-legende b { background: var(--lave); }
.bsc-vis-vignette:focus-visible { outline: none; }
.bsc-vis-vignette:focus-visible .bsc-vis-toile { outline: 3px solid var(--lave); outline-offset: 3px; }
.bsc-vis-vide { margin: 40px 0; font: italic 400 19px/1.5 var(--lecture); color: var(--doux); }

/* ---------------- Le panneau de partage ---------------- */
html.bsc-vis-ouvert { overflow: hidden; }
.bsc-vis-panneau { width: min(1180px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 6px; background: var(--marbre); color: var(--texte);
  box-shadow: 0 40px 90px rgba(10, 8, 6, .5); overflow: hidden; font-family: var(--lecture); }
.bsc-vis-panneau::backdrop { background: rgba(20, 17, 14, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.bsc-vis-panneau[open] { display: flex; animation: bsc-vis-entree .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes bsc-vis-entree { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.bsc-vis-p { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.bsc-vis-p-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 24px 16px; border-bottom: 1px solid var(--filet); border-top: 4px solid var(--r, var(--lave)); }
.bsc-vis-panneau p { margin: 0; padding: 0; }
.bsc-vis-p-oeil { font: 500 11.5px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--r, var(--lave)); }
.bsc-vis-panneau .bsc-vis-p-titre { margin: 6px 0 0; padding: 0; font: 600 clamp(24px, 2.6vw, 32px)/1.08 var(--titre); color: var(--encre); }
.bsc-vis-p-titre a { color: inherit; text-decoration: none; }
.bsc-vis-p-titre a:hover { color: var(--lave); }
.bsc-vis-p-fermer { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--filet); border-radius: 50%; background: var(--marbre); font: 400 26px/1 var(--titre); color: var(--encre); cursor: pointer; }
.bsc-vis-p-fermer:hover { background: var(--encre); color: var(--marbre); }
.bsc-vis-p-corps { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 0; flex: 1 1 auto; overflow: auto; }
.bsc-vis-p-scene { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px 22px; background: var(--velin); border-right: 1px solid var(--filet); min-width: 0; }
.bsc-vis-p-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bsc-vis-p-choix button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--filet); border-radius: 4px; background: var(--marbre); cursor: pointer; text-align: left;
  font: 500 12px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--texte); transition: border-color .15s, box-shadow .15s; }
.bsc-vis-p-choix b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--doux); color: var(--marbre); font-weight: 500; font-size: 11px; margin-right: 4px; }
.bsc-vis-p-choix button[aria-checked="true"] { border-color: var(--lave); box-shadow: 0 0 0 1px var(--lave); color: var(--encre); }
.bsc-vis-p-choix button[aria-checked="true"] b { background: var(--lave); }
.bsc-vis-p-mini { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; }
.bsc-vis-p-mini canvas { max-width: 46px; max-height: 46px; width: auto; height: auto; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.bsc-vis-p-apercu { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 6px 0; }
.bsc-vis-p-apercu canvas { display: block; max-width: 100%; max-height: min(56vh, 620px); width: auto; height: auto; box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 24px 44px -18px rgba(0, 0, 0, .55); border-radius: 2px; }
.bsc-vis-p-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bsc-vis-p-formats { display: flex; gap: 6px; }
.bsc-vis-p-formats button, .bsc-vis-p-autre, .bsc-vis-p-types button { min-height: 38px; padding: 0 12px; border: 1px solid var(--filet); border-radius: 999px; background: var(--marbre); cursor: pointer;
  font: 500 11.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--texte); }
.bsc-vis-p-formats button span { color: var(--doux); letter-spacing: 0; }
.bsc-vis-p-formats button[aria-pressed="true"], .bsc-vis-p-types button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--marbre); }
.bsc-vis-p-formats button[aria-pressed="true"] span { color: color-mix(in srgb, var(--marbre) 70%, transparent); }
.bsc-vis-p-autre { color: var(--lave); border-color: color-mix(in srgb, var(--lave) 45%, var(--filet)); }
.bsc-vis-p-autre span { color: var(--doux); margin-left: 4px; letter-spacing: 0; }
.bsc-vis-p-autre:hover { background: var(--lave); color: var(--marbre); }
.bsc-vis-p-autre:hover span { color: inherit; }
.bsc-vis-p-message { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 24px; min-width: 0; }
.bsc-vis-p-etiq { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.bsc-vis-p-types { display: flex; flex-wrap: wrap; gap: 6px; }
.bsc-vis-p-types button:hover, .bsc-vis-p-formats button:hover { border-color: var(--encre); }
.bsc-vis-p-texte { width: 100%; box-sizing: border-box; min-height: 190px; resize: vertical; padding: 14px 16px; border: 1px solid var(--filet); border-radius: 3px; background: var(--papier);
  font: 400 16px/1.55 var(--lecture); color: var(--encre); }
.bsc-vis-p-texte:focus { outline: 2px solid var(--lave); outline-offset: 1px; }
.bsc-vis-p-sous { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-top: -4px; }
.bsc-vis-p-compte { font: 400 12.5px/1.5 var(--mono); color: var(--doux); }
.bsc-vis-p-compte strong { font-weight: 500; color: var(--encre); }
.bsc-vis-p-compte em { font-style: normal; color: var(--lave); }
.bsc-vis-p-retablir { border: 0; background: none; padding: 0; cursor: pointer; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lave); text-decoration: underline; text-underline-offset: .25em; }
.bsc-vis-p-retablir[hidden] { display: none; }
.bsc-vis-p-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.bsc-vis-p-act { min-height: 44px; padding: 0 16px; border: 1px solid var(--encre); border-radius: 2px; background: transparent; cursor: pointer; font: 500 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--encre); }
.bsc-vis-p-act.principal { background: var(--lave); border-color: var(--lave); color: var(--marbre); }
.bsc-vis-p-act:hover { filter: brightness(1.08); background: var(--encre); color: var(--marbre); }
.bsc-vis-p-act.principal:hover { background: var(--lave); }
.bsc-vis-p-act[hidden] { display: none; }
.bsc-vis-p-reseaux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bsc-vis-p-reseaux button { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px; border: 1px solid var(--filet); border-radius: 999px; background: var(--marbre); cursor: pointer;
  font: 500 11.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--encre); white-space: nowrap; overflow: hidden; transition: border-color .15s, transform .15s; }
.bsc-vis-p-reseaux button i { width: 10px; height: 10px; border-radius: 50%; background: var(--marque); flex: 0 0 auto; }
.bsc-vis-p-reseaux button:hover { border-color: var(--marque); transform: translateY(-2px); }
.bsc-vis-p-aide { font: italic 400 14px/1.5 var(--lecture); color: var(--doux); }
.bsc-vis-panneau button:focus-visible { outline: 2px solid var(--lave); outline-offset: 2px; }
.bsc-vis-avis { z-index: 2; }
.bsc-vis-avis-btn { margin-left: 8px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; padding: 4px 10px; cursor: pointer; font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

/* ---------------- La nuit ---------------- */
html.insomnie .bsc-vis-panneau, html.insomnie .bsc-visuels .bsc-vis-carte { box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
html.insomnie .bsc-vis-panneau { box-shadow: 0 40px 90px rgba(0, 0, 0, .7); }
html.insomnie .bsc-vis-toile, html.insomnie .bsc-vis-p-apercu canvas { box-shadow: 0 0 0 1px rgba(255, 248, 236, .08), 0 18px 30px -14px rgba(0, 0, 0, .8); }
@media (prefers-color-scheme: dark) {
  html:not(.jour) .bsc-vis-panneau { box-shadow: 0 40px 90px rgba(0, 0, 0, .7); }
  html:not(.jour) .bsc-vis-toile, html:not(.jour) .bsc-vis-p-apercu canvas { box-shadow: 0 0 0 1px rgba(255, 248, 236, .08), 0 18px 30px -14px rgba(0, 0, 0, .8); }
}

/* ---------------- Écrans moyens et téléphones ---------------- */
@media (max-width: 960px) {
  .bsc-visuels .bsc-vis-mode { grid-template-columns: 1fr; gap: 10px; }
  .bsc-vis-formats { margin-left: 0; }
  .bsc-vis-p-corps { grid-template-columns: 1fr; }
  .bsc-vis-p-scene { border-right: 0; border-bottom: 1px solid var(--filet); }
  .bsc-vis-p-apercu canvas { max-height: 46vh; }
}
@media (max-width: 640px) {
  .bsc-vis-outils { position: static; }
  .bsc-vis-filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere); width: calc(100% + 2 * var(--gouttiere)); }
  .bsc-vis-filtres button { flex: 0 0 auto; }
  .bsc-vis-panneau { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .bsc-vis-p-tete { padding: 14px 16px 12px; }
  .bsc-vis-p-scene, .bsc-vis-p-message { padding: 14px 16px 18px; }
  .bsc-vis-p-reseaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bsc-vis-p-choix button { padding: 6px 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .bsc-vis-toile, .bsc-vis-toile canvas, .bsc-visuels .bsc-vis-carte { transition: none; }
  .bsc-vis-toile::after { animation: none; }
  .bsc-vis-panneau[open] { animation: none; }
}