/* Bureau (src/pages/bureau/index.astro) : choisir les fiches d'un patient, un seul QR code.
   Mêmes boîtes et mêmes couleurs que la planche du bureau et que « Mes fiches » (carnet.css) :
   ciel (phase interceptive), bleu (phase orthodontique), bleu profond (contention), bleu pâle (au quotidien), bleu nuit (applications). */
@font-face { font-family: "Overused Grotesk"; src: url(/theme/assets/fonts/OverusedGrotesk/OverusedGrotesk-Roman.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "Overused Grotesk"; src: url(/theme/assets/fonts/OverusedGrotesk/OverusedGrotesk-Medium.woff2) format("woff2"); font-weight: 500; }
@font-face { font-family: "Overused Grotesk"; src: url(/theme/assets/fonts/OverusedGrotesk/OverusedGrotesk-SemiBold.woff2) format("woff2"); font-weight: 600 700; }

:root { --bleu: #0177ca; --bleu-vif: #0181dc; --bleu-fonce: #0167b0; --nuit: #0d2c45; --ciel: #39bbfc; --pale: #ace0f9; --fond: #f3f9fe; --trait: #e3eef7; --texte: #3f4a59; --gris: #6b7686; }
.bu-boite--interceptif, .bu-sel--interceptif { --b-fond: #39bbfc; --b-txt: #0d2c45; --b-num: #fff; --b-num-txt: #0177ca; }
.bu-boite--multi-attaches, .bu-sel--multi-attaches { --b-fond: #0177ca; --b-txt: #fff; --b-num: #39bbfc; --b-num-txt: #0d2c45; }
.bu-boite--contention, .bu-sel--contention { --b-fond: #01579a; --b-txt: #fff; --b-num: #39bbfc; --b-num-txt: #0d2c45; }
.bu-boite--quotidien, .bu-sel--quotidien { --b-fond: #ace0f9; --b-txt: #0d2c45; --b-num: #fff; --b-num-txt: #0177ca; }
.bu-boite--pratique, .bu-sel--pratique { --b-fond: #5ab6ec; --b-txt: #0d2c45; --b-num: #fff; --b-num-txt: #0177ca; }
.bu-boite--videos, .bu-sel--videos { --b-fond: linear-gradient(120deg, #0181dc, #0d2c45); --b-txt: #fff; --b-num: rgba(255, 255, 255, .14); --b-num-txt: #39bbfc; }
.bu-boite--applis, .bu-sel--applis { --b-fond: #0d2c45; --b-txt: #fff; --b-num: rgba(255, 255, 255, .12); --b-num-txt: #39bbfc; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; background: var(--fond); color: var(--texte); font-family: "Overused Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; }
a { color: inherit; }

/* ===== Bandeau ===== */
.bu-bandeau { position: relative; padding: 26px 40px 66px; color: #fff;
  background: radial-gradient(60% 160% at 100% 0%, rgba(57, 187, 252, .38) 0%, rgba(57, 187, 252, 0) 55%), linear-gradient(160deg, var(--bleu-vif) 0%, var(--bleu-fonce) 48%, var(--nuit) 100%); }
.bu-bandeau-in { display: flex; align-items: center; gap: 28px; max-width: 1500px; margin: 0 auto; }
.bu-logo { width: 104px; height: auto; }
.bu-titre { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .35); }
.bu-sur { color: var(--pale); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.bu-titre h1 { margin: 2px 0 0; font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -.02em; }
.bu-liens { display: flex; gap: 10px; margin-left: auto; }
.bu-liens a { padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; color: #fff; font-size: 14.5px; line-height: 19px; font-weight: 600; text-decoration: none; transition: background-color .2s; }
.bu-liens a:hover { background: rgba(255, 255, 255, .14); }
.bu-vagues { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 46px; }

/* ===== Corps : les boîtes à gauche, le code à droite ===== */
.bu-corps { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 30px; align-items: start; max-width: 1580px; margin: 0 auto; padding: 4px 40px 60px; }
.bu-consigne { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 18px; }
.bu-consigne p { max-width: 640px; margin: 0; color: var(--gris); font-size: 16px; line-height: 23px; }
.bu-consigne strong { color: var(--nuit); font-weight: 600; }
.bu-essentiels { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; flex-shrink: 0; margin: 0; padding: 10px 20px 10px 16px; border: 0; border-radius: 18px; background: #fff; color: var(--nuit); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--pale), 0 14px 26px -22px rgba(1, 50, 92, .6); transition: box-shadow .2s, background-color .2s, transform .2s; }
.bu-essentiels svg { grid-row: span 2; color: var(--ciel); }
.bu-essentiels span { font-size: 16px; line-height: 20px; font-weight: 600; }
.bu-essentiels small { color: var(--gris); font-size: 13px; line-height: 17px; }
.bu-essentiels:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--ciel), 0 16px 28px -20px rgba(1, 50, 92, .6); }
.bu-essentiels--actif { background: var(--nuit); color: #fff; box-shadow: none; }
.bu-essentiels--actif small { color: #a9c4da; }

.bu-boites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bu-boite { grid-column: span 4; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--trait), 0 24px 44px -40px rgba(1, 50, 92, .6); }
.bu-boite--contention, .bu-boite--pratique { grid-column: span 1; }
.bu-boite--quotidien, .bu-boite--applis { grid-column: span 3; }
.bu-boite-tete { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px; background: var(--b-fond); color: var(--b-txt); font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.bu-boite-tete b, .bu-boite-picto { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--b-num); color: var(--b-num-txt); font-size: 14px; letter-spacing: 0; }
.bu-boite-picto svg { width: 17px; height: 17px; }
.bu-boite-detail { overflow: hidden; opacity: .78; font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; text-overflow: ellipsis; }
.bu-boite-detail::before { content: "·"; margin-right: 8px; }
.bu-boite--contention .bu-boite-detail, .bu-boite--pratique .bu-boite-detail { display: none; }
.bu-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.bu-boite--contention .bu-tuiles, .bu-boite--pratique .bu-tuiles { grid-template-columns: minmax(0, 1fr); }
.bu-boite--videos .bu-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bu-boite--quotidien .bu-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bu-boite--applis .bu-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bu-tuile { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-auto-rows: min-content; align-content: center; column-gap: 12px; row-gap: 2px; min-height: 86px; margin: 0; padding: 10px 12px 10px 10px; border: 0; border-radius: 16px; background: var(--fond); color: inherit; text-align: left; cursor: pointer;
  transition: background-color .2s, box-shadow .2s, transform .2s; }
.bu-tuile:hover { background: #e8f4fd; transform: translateY(-1px); }
.bu-tuile:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.bu-vignette { grid-row: 1 / span 4; align-self: center; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; overflow: hidden; border-radius: 12px; background: #fff; }
.bu-vignette img { width: 100%; height: 100%; object-fit: cover; }
.bu-tuile--appli .bu-vignette img { object-fit: contain; padding: 5px; }
.bu-vignette--picto { background: linear-gradient(135deg, var(--ciel), var(--bleu-fonce)); color: #fff; }
.bu-vignette--picto svg { width: 30px; height: 30px; }
.bu-nom { color: var(--nuit); font-size: 15.5px; line-height: 19px; font-weight: 600; text-wrap: balance; }
.bu-sous { color: var(--gris); font-size: 13px; line-height: 17px; }
.bu-video { display: inline-flex; align-items: center; gap: 5px; color: var(--bleu); font-size: 12.5px; line-height: 16px; font-weight: 600; }
.bu-video svg { width: 15px; height: 15px; padding: 3px; border-radius: 50%; background: var(--bleu); color: #fff; }
.bu-coche { position: absolute; top: 4px; left: 4px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: transparent; box-shadow: inset 0 0 0 1.5px #b9d0e2, 0 2px 6px -2px rgba(13, 44, 69, .4); transition: background-color .2s, box-shadow .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.bu-coche svg { width: 14px; height: 14px; }
.bu-tuile[aria-pressed="true"] { background: #e3f2fd; box-shadow: inset 0 0 0 2px var(--bleu); }
.bu-tuile[aria-pressed="true"] .bu-coche { background: var(--bleu); color: #fff; box-shadow: 0 0 0 2px #fff; transform: scale(1.12); }

/* ===== Panneau du code ===== */
.bu-panneau { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; border-radius: 26px; }
.bu-panneau-in { display: flex; flex-direction: column; padding: 22px; border-radius: 26px; background: var(--nuit); color: #dbe9f5; box-shadow: 0 30px 60px -40px rgba(13, 44, 69, .9); }
.bu-etiquette { color: var(--ciel); font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.bu-qr { position: relative; align-self: center; width: 100%; max-width: max(220px, calc(100vh - 600px)); aspect-ratio: 1; margin: 12px 0 14px; overflow: hidden; border-radius: 18px; background: #fff; }
.bu-qr-code, .bu-qr-code svg { display: block; width: 100%; height: 100%; }
.bu-qr-code svg { animation: bu-qr .35s ease-out; }
@keyframes bu-qr { from { opacity: .3; transform: scale(.97); } to { opacity: 1; transform: none; } }
.bu-qr-vide { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; border: 2px dashed rgba(255, 255, 255, .22); border-radius: 18px; background: rgba(255, 255, 255, .04); color: #a9c4da; text-align: center; }
.bu-qr[data-vide] { background: transparent; }
.bu-qr[data-vide] .bu-qr-vide { display: flex; }
.bu-qr-vide svg { width: 46px; height: 46px; color: var(--ciel); }
.bu-qr-vide p { margin: 0; font-size: 15px; line-height: 21px; }
.bu-compte { margin: 0 0 12px; color: #a9c4da; font-size: 14px; line-height: 20px; }
.bu-compte strong { color: #fff; font-size: 16px; font-weight: 600; }
.bu-selection { display: flex; flex-wrap: wrap; gap: 6px; max-height: 26vh; margin: 0 0 16px; padding: 0; overflow: auto; list-style: none; }
.bu-selection:empty { display: none; }
.bu-sel { display: inline-flex; align-items: center; gap: 7px; padding: 3px 3px 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 13.5px; line-height: 18px; }
.bu-sel::before { content: ""; flex-shrink: 0; width: 9px; height: 9px; background: var(--b-fond); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.bu-sel span { min-width: 0; }
.bu-sel button { width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: #a9c4da; font-size: 17px; line-height: 1; cursor: pointer; }
.bu-sel button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.bu-actions { display: flex; flex-direction: column; gap: 10px; }
.bu-actions-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bu-bouton { margin: 0; padding: 12px 16px; border: 0; border-radius: 999px; background: transparent; color: #fff; font-size: 15px; line-height: 20px; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); transition: background-color .2s, color .2s, opacity .2s; }
.bu-bouton:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.bu-bouton--grand { background: var(--ciel); color: var(--nuit); box-shadow: none; font-size: 16px; }
.bu-bouton--grand:hover:not(:disabled) { background: #fff; }
.bu-bouton:disabled { opacity: .35; cursor: default; }
.bu-bouton:focus-visible, .bu-nouveau:focus-visible, .bu-essentiels:focus-visible, .bu-liens a:focus-visible { outline: 2px solid var(--ciel); outline-offset: 3px; }
.bu-nouveau { margin: 4px 0 0; padding: 6px; border: 0; background: none; color: #a9c4da; font-size: 14px; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bu-nouveau:hover { color: #fff; }

/* ===== Grand format, montré au patient ===== */
.bu-plein { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; color: #fff;
  background: radial-gradient(70% 90% at 100% 0%, rgba(57, 187, 252, .35) 0%, rgba(57, 187, 252, 0) 60%), linear-gradient(160deg, var(--bleu-vif) 0%, var(--bleu-fonce) 45%, var(--nuit) 100%); }
.bu-plein::backdrop { background: var(--nuit); }
.bu-plein[open] { display: flex; animation: bu-plein .3s ease-out; }
@keyframes bu-plein { from { opacity: 0; } to { opacity: 1; } }
.bu-plein-in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 3vh 24px; text-align: center; }
.bu-plein-logo { width: 96px; margin-bottom: 4px; }
.bu-plein h2 { max-width: 900px; margin: 0; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; }
.bu-plein-sous { margin: 0; color: #d6ecfb; font-size: clamp(16px, 1.6vw, 20px); }
.bu-plein-qr { width: min(56vh, 78vw); aspect-ratio: 1; margin: 8px 0 4px; padding: 10px; border-radius: 26px; background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.bu-plein-qr svg { display: block; width: 100%; height: 100%; }
.bu-plein-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1000px; margin: 0; padding: 0; list-style: none; }
.bu-plein-liste li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 15px; line-height: 20px; }
.bu-plein-liste li::before { content: ""; width: 9px; height: 9px; background: var(--b-fond); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.bu-plein-fermer { margin: 8px 0 0; padding: 10px 20px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.bu-plein-fermer:hover { background: rgba(255, 255, 255, .24); }
.bu-plein-fermer kbd { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .2); font: inherit; font-size: 12px; }

/* ===== Écrans plus étroits ===== */
@media (max-width: 1280px) {
  .bu-corps { grid-template-columns: minmax(0, 1fr) 320px; padding-left: 24px; padding-right: 24px; }
  .bu-bandeau { padding-left: 24px; padding-right: 24px; }
  .bu-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bu-boite--contention, .bu-boite--quotidien, .bu-boite--pratique, .bu-boite--applis { grid-column: span 4; }
  .bu-boite--quotidien .bu-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .bu-corps { grid-template-columns: minmax(0, 1fr); }
  .bu-panneau { position: static; order: -1; }
  .bu-qr { max-width: 300px; }
  .bu-consigne { flex-direction: column; align-items: flex-start; }
  .bu-tuiles, .bu-boite--quotidien .bu-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bu-liens { display: none; }
}

/* ===== Feuille imprimée pour le patient (A4) ===== */
.bu-feuille { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bu { display: none; }
  .bu-feuille { display: flex; flex-direction: column; width: 210mm; height: 296mm; overflow: hidden; }
  .bu-feuille-bandeau { display: flex; align-items: center; gap: 6mm; padding: 10mm 14mm 9mm; color: #fff; background: linear-gradient(150deg, var(--bleu-vif) 0%, var(--bleu-fonce) 48%, var(--nuit) 100%); }
  .bu-feuille-bandeau img { width: 26mm; }
  .bu-feuille-bandeau div { display: flex; flex-direction: column; gap: .5mm; padding-left: 6mm; border-left: .3mm solid rgba(255, 255, 255, .4); font-size: 9pt; color: rgba(255, 255, 255, .85); }
  .bu-feuille-bandeau strong { color: #fff; font-size: 12pt; font-weight: 600; }
  .bu-feuille-date { margin-left: auto; font-size: 9pt; color: rgba(255, 255, 255, .85); }
  .bu-feuille-corps { display: flex; align-items: center; gap: 10mm; margin: 14mm 14mm 10mm; }
  .bu-feuille-qr { flex-shrink: 0; width: 70mm; height: 70mm; padding: 2mm; border: .4mm solid var(--trait); }
  .bu-feuille-qr svg { display: block; width: 100%; height: 100%; }
  .bu-feuille-txt h1 { margin: 2mm 0 4mm; color: var(--nuit); font-size: 24pt; line-height: 1.08; font-weight: 600; letter-spacing: -.02em; }
  .bu-feuille-txt p { margin: 0; font-size: 11.5pt; line-height: 1.45; color: var(--texte); }
  .bu-feuille-txt .bu-etiquette { color: var(--bleu); font-size: 9pt; }
  .bu-feuille-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5mm; margin: 0 14mm; padding: 0; list-style: none; }
  .bu-feuille-liste li { display: flex; flex-direction: column; gap: 1mm; padding: 4mm 5mm 4mm 9mm; position: relative; background: var(--fond); }
  .bu-feuille-liste li::before { content: ""; position: absolute; left: 4mm; top: 5.2mm; width: 2.4mm; height: 2.4mm; background: var(--b-fond); }
  .bu-feuille-liste strong { color: var(--nuit); font-size: 12pt; font-weight: 600; }
  .bu-feuille-liste span { color: var(--bleu); font-size: 9.5pt; }
  .bu-feuille-pied { margin: auto 14mm 0; padding: 4mm 0 7mm; border-top: .3mm solid var(--trait); color: #8b95a3; font-size: 8pt; }
}