/* Foliocast · pages métiers : exemple de grille et de Reel dessiné en CSS (aucune image, aucune animation).
   Les aplats remplacent les photos d'un projet fictif ; les étiquettes disent ce que Foliocast prépare. */
.fc-ex{margin:6px 0 2px;display:grid;grid-template-columns:minmax(0,1fr) minmax(118px,.38fr);gap:14px;align-items:start}
.fc-ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0;padding:0;list-style:none}
.fc-ex-grid li{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:2px;overflow:hidden;background:var(--ink-2,#171614);box-shadow:inset 0 0 0 1px rgba(237,230,214,.08)}
.fc-ex-grid li span{position:absolute;left:6px;right:6px;bottom:6px;font:500 10.5px/1.25 var(--mono);color:var(--cream);background:rgba(12,12,11,.78);padding:3px 5px;border-radius:3px;width:fit-content;max-width:calc(100% - 12px)}
.fc-ex-reel{position:relative;aspect-ratio:9/16;max-width:100%;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:12px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(12,12,11,0) 35%,rgba(12,12,11,.86) 100%),linear-gradient(160deg,#3b362f 0%,#1a1916 62%,#e07a3f 62.4%,#e07a3f 64%,#14130f 64.4%)}
.fc-ex-reel small{font:500 10.5px/1.3 var(--mono);color:var(--cream-dim)}
.fc-ex-reel small:first-child{position:absolute;top:10px;left:12px;color:var(--cream);background:rgba(12,12,11,.6);padding:2px 6px;border-radius:999px}
.fc-ex-reel b{font:400 clamp(20px,3.2vw,30px)/.98 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--cream);overflow-wrap:anywhere}
.fc-ex-reel i{display:block;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent) 0 38%,rgba(237,230,214,.25) 38%)}
.fc-ex figcaption{grid-column:1/-1;font-size:14px;line-height:1.5;color:var(--cream-dim)}
.fc-note{font-size:15px}
/* aplats : façade, intérieur, détail, voûte, accent, croquis, série, objet, nuit */
.fc-ex-grid .p1{background:linear-gradient(90deg,transparent 40%,rgba(224,122,63,.9) 40% 47%,transparent 47%),linear-gradient(180deg,#d9d0be 0 52%,#2a2722 52% 100%)}
.fc-ex-grid .p2{background:radial-gradient(circle at 72% 28%,#ede6d6 0 11%,transparent 12%),linear-gradient(165deg,#3d3831 0%,#15140f 100%)}
.fc-ex-grid .p3{background:repeating-linear-gradient(90deg,#2d2b27 0 9px,#3c3831 9px 18px)}
.fc-ex-grid .p4{background:radial-gradient(ellipse 60% 48% at 50% 100%,#ede6d6 0 98%,transparent 100%),#1d1b18}
.fc-ex-grid .p5{background:linear-gradient(135deg,#e07a3f 0%,#8a4523 100%)}
.fc-ex-grid .p6{background:repeating-linear-gradient(0deg,transparent 0 13px,rgba(237,230,214,.16) 13px 14px),repeating-linear-gradient(90deg,transparent 0 13px,rgba(237,230,214,.16) 13px 14px),#1c1a17}
.fc-ex-grid .p7{background:linear-gradient(180deg,#aca596 0 30%,#5b564c 30% 64%,#22201c 64%)}
.fc-ex-grid .p8{background:radial-gradient(circle at 50% 46%,#e07a3f 0 20%,#ede6d6 20.5% 23%,transparent 23.5%),#2a2722}
.fc-ex-grid .p9{background:radial-gradient(circle at 70% 30%,rgba(224,122,63,.55) 0 7%,transparent 7.5%),linear-gradient(20deg,#211f1b 0 55%,#4a443a 55% 57%,#2b2823 57%)}
@media (max-width:560px){.fc-ex{grid-template-columns:minmax(0,1fr)}.fc-ex-reel{max-width:190px}.fc-ex-grid li span{font-size:9.5px;left:4px;right:4px;bottom:4px;max-width:calc(100% - 8px)}}