/* Page Beacon : étude de cas. Charte du portfolio, avec le vert de Beacon réservé à ses propres pièces. */
@font-face { font-family:"Inter Beacon"; src:url("assets/beacon/inter.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
.bc-hero { padding-block:64px 0; }
.bc-fil { display:flex; gap:10px; color:var(--muted); font-size:14px; margin-bottom:32px; }
.bc-fil a:hover { color:var(--text); text-decoration:underline; }
.bc-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:54px; align-items:end; }
.bc-hero h1 { margin-bottom:0; }
.bc-hero-grid>p { color:var(--muted); font-size:20px; line-height:1.55; }
.bc-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 36px; margin:48px 0 0; }
.bc-meta>div { display:block; padding-block:18px 0; }
.bc-meta dt { color:var(--muted); font-size:14px; font-weight:400; margin-bottom:6px; }
.bc-film { position:relative; margin-top:56px; aspect-ratio:16/9; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#0a0b0d; }
.bc-film video { display:block; width:100%; height:100%; object-fit:cover; }
.bc-rejouer { position:absolute; right:20px; bottom:20px; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px 0 14px; border:1px solid #ffffff2b; border-radius:8px; background:#101114c7; color:var(--text); cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.bc-rejouer:hover { background:var(--text); color:var(--bg); }
.bc-rejouer svg { width:16px; height:16px; }

.bc-section { border-top:1px solid var(--line); padding-block:88px; }
.bc-section:first-of-type { margin-top:88px; }
.bc-legende { color:var(--muted); font-size:14px; margin-top:28px; }

/* Vues : mock-up PSD MacBook Pro détouré (fond blanc et fond noir), en WebP transparent : la page apparaît à travers */
.bc-vue { display:block; width:100%; height:auto; }
.bc-grande { margin:0 auto; max-width:1040px; }
.bc-media { display:flex; justify-content:center; }
.bc-media .bc-vue { width:auto; max-width:100%; max-height:620px; }
.bc-atout { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.42fr); gap:64px; align-items:center; padding-block:64px; border-top:1px solid var(--line); }
.bc-atout:last-child { padding-bottom:0; }
.bc-atout.inverse { grid-template-columns:minmax(0,1.42fr) minmax(0,.78fr); }
.bc-atout.inverse>div:first-child { order:2; }
.bc-atout h3 { font-family:var(--display); font-size:clamp(30px,3vw,38px); font-weight:400; line-height:1.12; letter-spacing:-.015em; margin-bottom:20px; }
.bc-atout p { color:var(--muted); line-height:1.65; }

/* Planche d'identité */
.bc-planche { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.bc-cellule { position:relative; display:flex; flex-direction:column; gap:20px; min-height:260px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.bc-cellule.l3 { grid-column:span 3; } .bc-cellule.l2 { grid-column:span 2; } .bc-cellule.l4 { grid-column:span 4; }
.bc-cellule.fin-ligne { border-right:0; } .bc-cellule.bas { border-bottom:0; }
.bc-etiquette { font-size:14px; color:var(--muted); }
.bc-cellule.clair { background:#fff; color:#101418; } .bc-cellule.clair .bc-etiquette { color:#59616b; }
.bc-cellule.nuit { background:#08090a; }
.bc-mot { display:block; width:min(78%,420px); height:auto; margin:auto; }
.bc-note { color:var(--muted); font-size:14px; line-height:1.55; margin-top:auto; }
.bc-construit { display:block; width:100%; max-width:300px; height:auto; margin:auto; overflow:visible; }
.bc-construit .guide { stroke:#3a3d43; stroke-width:1; stroke-dasharray:3 5; }
.bc-construit .lettre { fill:#22c55e; }
.bc-construit .repere { fill:#08090a; stroke:#22c55e; stroke-width:1.4; }
.bc-teintes { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.bc-teinte span { display:block; aspect-ratio:1; border-radius:4px; margin-bottom:10px; }
.bc-teinte b { display:block; font-weight:500; font-size:14px; }
.bc-teinte small { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.bc-type { font-family:"Inter Beacon",var(--reading); }
.bc-type .aa { font-size:96px; font-weight:650; letter-spacing:-.03em; line-height:1; }
.bc-type ul { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.bc-type li { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:8px; font-size:15px; }
.bc-type li span:last-child { color:var(--muted); font-size:13px; }
.bc-composants { font-family:"Inter Beacon",var(--reading); display:flex; flex-direction:column; gap:16px; margin-block:auto; }
.bc-composants>div { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.bc-bouton { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:10px; font-size:13px; font-weight:550; border:1px solid #25272b; background:#18191c; color:#f2f4f5; }
.bc-bouton.primaire { border-color:transparent; background:linear-gradient(180deg,#2bd068,#16a34a); color:#fff; box-shadow:0 1px 0 #ffffff40 inset; }
.bc-pastille { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:7px; font-size:11.5px; font-weight:550; letter-spacing:.01em; }
.bc-pastille.vert { background:#22c55e1f; color:#22c55e; } .bc-pastille.ambre { background:#fbbf241f; color:#fbbf24; }
.bc-pastille.violet { background:#c084fc24; color:#c084fc; } .bc-pastille.rouge { background:#f871711f; color:#f87171; }
.bc-pastille.vert::before { width:6px; height:6px; border-radius:50%; background:currentColor; content:""; }

/* Beacon dans Claude : la fenêtre garde les couleurs de Claude */
.bc-mcp { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:56px; align-items:start; }
.claude { margin:0; border:1px solid #3a3a37; border-radius:16px; background:#262624; color:#f5f4ef; overflow:hidden; box-shadow:0 50px 90px -40px #000; }
.cl-barre { display:flex; align-items:center; justify-content:space-between; gap:12px; height:48px; padding:0 18px; border-bottom:1px solid #ffffff17; font-size:14px; }
.cl-connecte { display:inline-flex; align-items:center; gap:7px; color:#a3a097; font-size:13px; }
.cl-connecte::before { width:6px; height:6px; border-radius:50%; background:#22c55e; content:""; }
.cl-fil { display:flex; flex-direction:column; gap:18px; padding:28px 28px 6px; }
.cl-moi { align-self:flex-end; max-width:85%; padding:10px 15px; border-radius:16px; background:#141413; font-size:15px; line-height:1.5; }
.cl-outil { align-self:flex-start; max-width:100%; }
.cl-outil summary { display:inline-flex; align-items:center; gap:8px; padding:6px 11px 6px 7px; border:1px solid #ffffff1f; border-radius:10px; color:#a3a097; font-size:14px; cursor:pointer; list-style:none; }
.cl-outil summary::-webkit-details-marker { display:none; }
.cl-outil summary:hover { color:#f5f4ef; }
.cl-outil b { color:#f5f4ef; font-weight:500; }
.cl-icone { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:#22c55e; }
.cl-icone svg { width:13px; height:13px; fill:#fff; }
.cl-chevron { width:14px; height:14px; transition:transform .18s; }
.cl-outil[open] .cl-chevron { transform:rotate(180deg); }
.cl-outil pre { margin:8px 0 0; padding:12px 14px; border:1px solid #ffffff17; border-radius:10px; background:#1f1e1d; color:#a3a097; font:12px/1.55 ui-monospace,Menlo,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.cl-outil pre span { color:#f5f4ef; }
.cl-claude { font-family:ui-serif,"Iowan Old Style",Georgia,serif; font-size:16.5px; line-height:1.65; }
.cl-claude ol { margin:8px 0 0; padding-left:1.3em; }
.cl-claude p+p,.cl-claude ol+p { margin-top:10px; }
.cl-saisie { margin:18px 22px 22px; padding:14px 14px 10px 18px; border:1px solid #ffffff1f; border-radius:18px; background:#30302e; }
.cl-saisie>span { color:#a3a097; font-size:15px; }
.cl-saisie div { display:flex; justify-content:space-between; margin-top:14px; }
.cl-saisie i { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; }
.cl-saisie i:first-child { border:1px solid #ffffff24; color:#a3a097; } .cl-saisie i:last-child { background:#c6613f; color:#fff; }
.cl-saisie svg { width:16px; height:16px; }
.bc-outils h3 { margin-bottom:14px; font-size:14px; font-weight:400; color:var(--muted); }
.bc-outils ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 28px; padding:0; }
.bc-outils li { padding:6px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.bc-outils .ecrit li { border-color:#22c55e55; color:#7ee2a2; }
.bc-outils p { color:var(--muted); border-top:1px solid var(--line); padding-top:20px; }

.bc-projet { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:54px; }
.bc-projet dl { margin:0; }
.bc-projet dl>div { grid-template-columns:140px 1fr; }
.bc-projet dd { color:var(--muted); }

@media(max-width:1000px) { .bc-mcp { grid-template-columns:1fr; } .bc-atout { gap:40px; } }
@media(max-width:900px) { .bc-hero-grid,.bc-atout,.bc-atout.inverse,.bc-projet { grid-template-columns:1fr; gap:28px; } .bc-atout.inverse>div:first-child { order:0; } .bc-planche { grid-template-columns:1fr 1fr; } .bc-cellule.l2,.bc-cellule.l3 { grid-column:span 1; } .bc-cellule.l4 { grid-column:span 2; } .bc-cellule { border-right:1px solid var(--line); } .bc-teintes { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:650px) {
  .bc-hero { padding-block:40px 0; } .bc-hero-grid>p { font-size:18px; } .bc-meta { grid-template-columns:1fr; margin-top:28px; } .bc-meta>div { border-top:1px solid var(--line); padding-block:14px; }
  .bc-film { margin-top:36px; } .bc-rejouer { right:12px; bottom:12px; min-height:40px; }
  .bc-section { padding-block:56px; } .bc-section:first-of-type { margin-top:56px; }
  .bc-media .bc-vue { max-height:440px; }
  .bc-atout { padding-block:44px; }
  .bc-planche { grid-template-columns:1fr; } .bc-cellule.l2,.bc-cellule.l3,.bc-cellule.l4 { grid-column:auto; } .bc-cellule,.bc-cellule.bas { min-height:0; padding:22px; border-right:0; border-bottom:1px solid var(--line); } .bc-cellule:last-child { border-bottom:0; } .bc-mot { margin-block:24px; }
  .bc-type .aa { font-size:72px; } .cl-fil { padding:20px 16px 4px; } .cl-saisie { margin:14px 12px 12px; } .cl-moi { max-width:92%; }
  .bc-projet dl>div { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .cl-chevron { transition:none; } }