/*
 * Kozman — études de cas (gabarit B-Etude de la maquette validée, doc 18).
 * Chargée en plus de main.css sur les pages des réalisations (single-kk_realisation.php).
 * Règles rattachées à body.kz-etude ; cadre, boutons, bloc final et toucan viennent de main.css.
 */
.kz-etude .hero{padding:44px 0 56px;position:relative;overflow:hidden}
.kz-etude .hero h1{font-size:clamp(36px,4.8vw,64px);font-weight:600;line-height:1.08;letter-spacing:-.02em;max-width:980px}
.kz-etude .crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--gris)}
.kz-etude .crumbs a{color:inherit;text-decoration:none}
.kz-etude .crumbs a:hover{text-decoration:underline}
.kz-etude .tags{display:flex;flex-wrap:wrap;gap:8px}
.kz-etude .tag{display:inline-flex;align-items:center;gap:8px;min-height:34px;font-family:Lexend,sans-serif;font-size:13px;font-weight:500;padding:0 14px;border-radius:999px;text-decoration:none}
.kz-etude .tag i{width:8px;height:8px;border-radius:50%;display:inline-block}
.kz-etude .t-presta{background:#fff;color:var(--nuit);box-shadow:0 1px 3px rgba(20,57,74,.12)}.kz-etude .t-presta i{background:var(--terra-f)}
.kz-etude .t-cible{background:#D9EFEE;color:#0B5554}.kz-etude .t-cible i{background:var(--turq-f)}
.kz-etude .t-region{background:var(--peche-l);color:#8A3412}.kz-etude .t-region i{background:#8A3412}
.kz-etude a.tag:hover{outline:2px solid currentColor}
.kz-etude .shot{border-radius:24px;overflow:hidden;aspect-ratio:16/10;position:relative}
.kz-etude .shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.kz-etude .fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0;margin:-56px 40px 0;position:relative;z-index:2}
.kz-etude .fiche div{padding:24px 28px;display:flex;flex-direction:column;gap:4px;border-right:1px solid rgba(20,57,74,.08)}
.kz-etude .fiche div:last-child{border-right:0}
.kz-etude .fiche dt{font-family:Lexend,sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.kz-etude .fiche dd{margin:0;font-family:Lexend,sans-serif;font-weight:600;color:var(--nuit);font-size:17px;line-height:1.4;overflow-wrap:anywhere}
.kz-etude .fiche dd a{color:var(--terra-f);text-decoration:underline;text-underline-offset:3px}
.kz-etude .story{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px 64px;align-items:start;padding:40px 0;border-top:1px solid rgba(20,57,74,.1)}
.kz-etude .story:first-child{border-top:0;padding-top:0}
.kz-etude .story h2{font-size:28px;font-weight:600;line-height:1.2;position:sticky;top:110px}
.kz-etude .story h2 span{display:block;font-size:15px;color:var(--terra-f);margin-bottom:6px}
.kz-etude .story p{color:var(--gris);font-size:17px;line-height:1.6}
.kz-etude .story p+p{margin-top:16px}
.kz-etude .did{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.kz-etude .did li{padding:22px 24px;display:flex;flex-direction:column;gap:4px}
.kz-etude .did strong{font-family:Lexend,sans-serif;color:var(--nuit);font-size:17px}
.kz-etude .did p{font-size:15px;color:var(--gris);line-height:1.5}
.kz-etude .gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;margin-top:36px}
.kz-etude .gal .ph-img{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:16/10}
.kz-etude .gal .ph-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.kz-etude .credit{margin-top:14px;font-size:13px;color:var(--gris);text-align:right}
.kz-etude .next{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));overflow:hidden;align-items:center}
.kz-etude .next .ph{aspect-ratio:16/10;overflow:hidden}
.kz-etude .next img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.kz-etude .next:hover img{transform:scale(1.05)}
.kz-etude .next .bd{padding:44px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.kz-etude .next h3{font-size:32px;font-weight:600;line-height:1.15}
.kz-etude .mbar{display:none}
@media (prefers-reduced-motion:no-preference){
.kz-etude:not(.kz-still) .hero .tags{animation:fade .9s .15s cubic-bezier(.2,.8,.2,1) both}
.kz-etude:not(.kz-still) .shot{animation:rideau 1.2s .25s cubic-bezier(.7,0,.2,1) both}
.kz-etude:not(.kz-still) .shot img{animation:dezoom 1.6s .25s cubic-bezier(.2,.8,.2,1) both}
.kz-etude:not(.kz-still) .fiche{animation:pop .9s .7s cubic-bezier(.2,.8,.2,1) both}
@supports (animation-timeline:view()){
.kz-etude:not(.kz-still) .gal .ph-img img{animation:devoile linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
}
@keyframes rideau{from{clip-path:inset(0 0 100% 0 round 24px)}to{clip-path:inset(0 0 0 0 round 24px)}}
@keyframes dezoom{from{transform:scale(1.18)}}
@media (max-width:900px){.kz-etude .story{grid-template-columns:minmax(0,1fr)}.kz-etude .story h2{position:static}.kz-etude .fiche{margin-inline:16px}.kz-etude .fiche div{border-right:0;border-bottom:1px solid rgba(20,57,74,.08)}.kz-etude .fiche div:last-child{border-bottom:0}}
@media (max-width:720px){
.kz-etude .shot{border-radius:18px}
.kz-etude .fiche{margin-top:-28px}
.kz-etude .next .bd{padding:28px 24px}
.kz-etude .next h3{font-size:26px}
.kz-etude .mbar{display:flex;position:sticky;bottom:12px;z-index:25;margin:0 12px;padding:8px;border-radius:999px;background:var(--nuit);box-shadow:0 12px 30px rgba(20,57,74,.3)}
.kz-etude .mbar .btn{flex:1}
}