/* ══════════════════════════════════════════════════════════════
   KR Portfolio — front (rangées éditoriales)
   Porté de proto-portfolio-journal.html (24/08/2026).
   Titres en EB Garamond / corps en Inter pour rester cohérent avec le site.
   Les .woff2 sont déjà auto-hébergées par le socle (functions.php).
   ══════════════════════════════════════════════════════════════ */
.kr-pf-front{
  --pearl:#F8F5EF; --pearl-mid:#EDE8DF; --pearl-deep:#D8D2C6;
  --ink-deep:#0F0E0D; --ink:#252220; --ink-soft:#3C3835;
  --ink-mute:#57534E; --ink-min:#6B655E;
  --accent-deco:#B8975F; --accent-text:#7A6234;

  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;

  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:clamp(24px,5vw,80px);
  --w-brand:500px; --w-text:660px; --w-body:1100px; --w-wide:1440px;

  --d-fast:200ms; --d-base:300ms; --d-slow:600ms;
  --e-out-quart:cubic-bezier(.25,1,.5,1);
  --e-standard:cubic-bezier(.2,0,0,1);

  color:var(--ink); font-family:var(--sans);
  font-size:clamp(1rem,1.15vw,1.0625rem); font-weight:300; line-height:1.65;
}
/* les rangées débordent en 100vw : indispensable */
body.kr-pf-body{ overflow-x:clip; background:var(--pearl); }

/* height:auto OBLIGATOIRE dès qu'on pose width/height en attributs (anti-CLS) */
.kr-pf-front img{ max-width:100%; height:auto; display:block; }
.kr-pf-front a{ color:inherit; }
.kr-pf-front h1,.kr-pf-front h2,.kr-pf-front h3{ font-family:var(--serif); font-weight:300; margin:0; text-wrap:balance; }
.kr-pf-front h1{ font-size:clamp(2.75rem,6vw,5.5rem); line-height:.98; letter-spacing:-.015em; }
.kr-pf-front h2{ font-size:clamp(1.75rem,3vw,2.75rem); line-height:1.08; letter-spacing:-.012em; }
.kr-pf-front h3{ font-size:1.25rem; font-weight:400; line-height:1.2; letter-spacing:-.008em; }
.kr-pf-front p{ text-wrap:pretty; }

.kr-pf-front :focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.kr-pf-front :focus:not(:focus-visible){ outline:none; }

.kr-pf-front .t-eyebrow{
  font-size:.75rem; font-weight:400; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute); margin:0;
}
.kr-pf-front .wrap{ max-width:var(--w-wide); margin-inline:auto; padding-inline:var(--gutter); }
.kr-pf-front .section{ padding-block:clamp(56px,7vw,96px); }

/* ── HERO ── */
.kr-pf-front .hero{
  position:relative; width:100vw; margin-inline:calc(50% - 50vw);
  height:min(85vh,760px); min-height:420px; overflow:hidden; background:var(--ink-deep);
}
.kr-pf-front .hero img{ width:100%; height:100%; object-fit:cover; }
.kr-pf-front .hero::after{
  content:''; position:absolute; inset:auto 0 0 0; height:60%;
  background:linear-gradient(to top,rgba(15,14,13,.62),rgba(15,14,13,0)); pointer-events:none;
}
.kr-pf-front .hero__cap{
  position:absolute; left:0; right:0; bottom:clamp(28px,5vw,56px);
  padding-inline:var(--gutter); color:var(--pearl); z-index:1;
}
.kr-pf-front .hero__cap .t-eyebrow{ color:rgba(248,245,239,.72); margin-bottom:var(--s-3); }
.kr-pf-front .hero__cap h1{ color:var(--pearl); max-width:14ch; }
.kr-pf-front .hero__cap p{ max-width:46ch; margin:var(--s-4) 0 0; color:rgba(248,245,239,.86); font-size:1rem; }

/* ── RANGÉE ── */
/* Plein cadre : hauteur de rangée uniforme, largeur de carte libre selon le ratio natif. */
.kr-pf-front .shelf{ margin-block:clamp(48px,6vw,80px); --film-h:clamp(300px,32vw,520px); }
.kr-pf-front .shelf__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-5); max-width:var(--w-wide); margin-inline:auto;
  padding-inline:var(--gutter); margin-bottom:var(--s-5);
}
.kr-pf-front .shelf__title h2{ font-size:clamp(1.5rem,2.2vw,2rem); }
.kr-pf-front .shelf__all{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid var(--pearl-deep); padding-bottom:2px;
  display:inline-flex; align-items:center; min-height:44px;
  transition:color var(--d-fast) var(--e-standard),border-color var(--d-fast) var(--e-standard);
}
.kr-pf-front .shelf__all:hover{ color:var(--ink-deep); border-bottom-color:var(--ink-deep); }
.kr-pf-front .shelf__viewport{ position:relative; }
.kr-pf-front .shelf__track{
  display:flex; flex-flow:row nowrap; align-items:flex-start;
  gap:clamp(12px,1.6vw,24px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  padding-inline:var(--gutter); scroll-padding-inline:var(--gutter);
  padding-block:2px; scrollbar-width:none; -ms-overflow-style:none;
}
.kr-pf-front .shelf__track::-webkit-scrollbar{ display:none; }
@media (min-width:1600px){
  .kr-pf-front .shelf__track{ padding-inline:max(var(--gutter),calc((100vw - var(--w-wide))/2 + var(--gutter))); }
}
/* carte = image plein cadre à hauteur fixe, largeur libre (portraits et paysages alignés) */
.kr-pf-front .card{ scroll-snap-align:start; text-decoration:none; flex:0 0 auto; max-width:88vw; }
.kr-pf-front .card__media{ height:var(--film-h); overflow:hidden; background:var(--pearl-mid); }
.kr-pf-front .card__media img{
  height:100%; width:auto; max-width:none; display:block;
  opacity:.9; transition:opacity 400ms var(--e-out-quart);
}
.kr-pf-front .card:hover .card__media img,
.kr-pf-front .card:focus-visible .card__media img{ opacity:1; }
.kr-pf-front .card__meta{ padding-top:var(--s-3); max-width:100%; }
.kr-pf-front .card__place{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin:0; }
.kr-pf-front .card__name{ font-family:var(--serif); font-size:1.0625rem; font-weight:400; line-height:1.25; color:var(--ink-deep); margin:6px 0 0; }
/* rangée « ample » (lieux, panoramiques) : cadres plus hauts */
.kr-pf-front .shelf--wide{ --film-h:clamp(340px,42vw,620px); }

/* flèches : filets, pas de rond ni d'ombre */
.kr-pf-front .shelf__nav{
  position:absolute; top:0; bottom:38px; width:clamp(40px,var(--gutter),80px);
  display:none; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; padding:0; color:var(--ink-mute); z-index:2;
  transition:color var(--d-fast) var(--e-standard),opacity var(--d-fast) linear;
}
@media (hover:hover) and (pointer:fine){ .kr-pf-front .shelf__nav{ display:flex; } }
.kr-pf-front .shelf__nav:hover{ color:var(--ink-deep); }
.kr-pf-front .shelf__nav[hidden]{ display:none; }
.kr-pf-front .shelf__nav--prev{ left:0; background:linear-gradient(to right,var(--pearl) 40%,transparent); }
.kr-pf-front .shelf__nav--next{ right:0; background:linear-gradient(to left,var(--pearl) 40%,transparent); }
.kr-pf-front .shelf__nav svg{ width:22px; height:22px; }

/* ── RESPIRATION ── */
.kr-pf-front .breath{ padding-block:clamp(72px,10vw,144px); display:grid; justify-items:center; text-align:center; gap:var(--s-6); }
.kr-pf-front .breath figure{ margin:0; max-width:min(560px,72vw); }
.kr-pf-front .breath img{ aspect-ratio:2/3; object-fit:cover; width:100%; }
.kr-pf-front .breath--land figure{ max-width:min(1040px,90vw); width:100%; }
.kr-pf-front .breath--land img{ aspect-ratio:auto; width:100%; height:auto; max-height:78vh; object-fit:contain; }
.kr-pf-front .breath p{ font-family:var(--serif); font-size:clamp(1.25rem,2.2vw,1.75rem); font-weight:300; line-height:1.4; max-width:38ch; margin:0; color:var(--ink-soft); }
.kr-pf-front .breath--dark{ background:var(--ink-deep); width:100vw; margin-inline:calc(50% - 50vw); padding-inline:var(--gutter); }
.kr-pf-front .breath--dark p{ color:rgba(248,245,239,.82); }

/* ── REPORTAGES ── */
.kr-pf-front .reports{ display:grid; gap:clamp(40px,5vw,72px); }
.kr-pf-front .report{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(24px,4vw,56px); align-items:center; text-decoration:none; }
.kr-pf-front .report:nth-child(even){ grid-template-columns:5fr 7fr; }
.kr-pf-front .report:nth-child(even) .report__media{ order:2; }
.kr-pf-front .report__media{ aspect-ratio:3/2; overflow:hidden; background:var(--pearl-mid); }
.kr-pf-front .report__media img{ width:100%; height:100%; object-fit:cover; opacity:.9; transition:opacity 400ms var(--e-out-quart); }
.kr-pf-front .report:hover .report__media img,.kr-pf-front .report:focus-visible .report__media img{ opacity:1; }
.kr-pf-front .report__body{ max-width:44ch; }
.kr-pf-front .report__body h3{ font-size:clamp(1.5rem,2.4vw,2rem); font-weight:300; margin:var(--s-3) 0 var(--s-4); }
.kr-pf-front .report__body p{ color:var(--ink-soft); margin:0 0 var(--s-4); }
.kr-pf-front .report__more{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); border-bottom:1px solid var(--pearl-deep); padding-bottom:3px; }
.kr-pf-front .report:hover .report__more{ color:var(--ink-deep); border-bottom-color:var(--ink-deep); }
@media (max-width:820px){
  .kr-pf-front .report,.kr-pf-front .report:nth-child(even){ grid-template-columns:1fr; }
  .kr-pf-front .report:nth-child(even) .report__media{ order:0; }
}
.kr-pf-front .reports--more{ margin-top:clamp(40px,5vw,72px); }
.kr-pf-front .reports--more[hidden]{ display:none; }
.kr-pf-front .reports__toggle{ display:flex; justify-content:center; margin-top:clamp(48px,6vw,80px); }
.kr-pf-front .btn-line{
  font-family:var(--sans); font-size:.8125rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); background:none; border:0; border-bottom:1px solid var(--pearl-deep);
  padding:0 0 6px; min-height:44px; cursor:pointer;
  transition:color var(--d-fast) var(--e-standard),border-color var(--d-fast) var(--e-standard);
}
.kr-pf-front .btn-line:hover{ color:var(--ink-deep); border-bottom-color:var(--ink-deep); }
.kr-pf-front .btn-line:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.kr-pf-front .btn-line__off{ display:none; }
.kr-pf-front .btn-line[aria-expanded="true"] .btn-line__on{ display:none; }
.kr-pf-front .btn-line[aria-expanded="true"] .btn-line__off{ display:inline; }

/* ── ARCHIVE (journal) ── */
.kr-pf-front .archive{ max-width:var(--w-text); margin-inline:auto; }
.kr-pf-front .archive__item{ display:grid; grid-template-columns:96px 1fr; gap:var(--s-5); padding-block:var(--s-5); border-bottom:1px solid var(--pearl-deep); text-decoration:none; align-items:baseline; }
.kr-pf-front .archive__item:first-of-type{ border-top:1px solid var(--pearl-deep); }
.kr-pf-front .archive__date{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-min); }
.kr-pf-front .archive__ttl{ font-family:var(--serif); font-size:1.25rem; font-weight:400; line-height:1.3; color:var(--ink-deep); }
.kr-pf-front .archive__item:hover .archive__ttl{ color:var(--accent-text); }
@media (max-width:600px){ .kr-pf-front .archive__item{ grid-template-columns:1fr; gap:6px; } }

/* ── GALERIE « Tout voir » ── */
.kr-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:clamp(8px,1.2vw,16px); padding-inline:var(--gutter,24px); }
.kr-gallery__item{ display:block; overflow:hidden; background:var(--pearl-mid,#EDE8DF); }
.kr-gallery__item img{ width:100%; height:auto; display:block; opacity:.9; transition:opacity 400ms var(--e-out-quart,ease); }
.kr-gallery__item:hover img{ opacity:1; }

/* ── CTA ── */
.kr-pf-front .cta{ background:var(--ink-deep); color:var(--pearl); text-align:center; }
.kr-pf-front .cta h2{ color:var(--pearl); }
.kr-pf-front .cta p{ color:rgba(248,245,239,.72); max-width:44ch; margin:var(--s-4) auto var(--s-6); }
.kr-pf-front .btn{
  display:inline-block; font-size:.8125rem; letter-spacing:.18em; text-transform:uppercase;
  padding:20px 48px; min-height:48px; border-radius:0; text-decoration:none;
  background:var(--pearl); color:var(--ink-deep); border:1px solid var(--pearl);
  transition:background var(--d-fast) var(--e-standard),color var(--d-fast) var(--e-standard);
}
.kr-pf-front .btn:hover{ background:transparent; color:var(--pearl); }

/* ── révélation au scroll ── */
.kr-pf-front [data-reveal]{ opacity:0; transform:translate3d(0,20px,0); transition:opacity var(--d-slow) var(--e-out-quart),transform var(--d-slow) var(--e-out-quart); }
.kr-pf-front [data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .kr-pf-front *,.kr-pf-front *::before,.kr-pf-front *::after{ animation-duration:1ms!important; transition-duration:1ms!important; scroll-behavior:auto!important; }
  .kr-pf-front .shelf__track{ scroll-behavior:auto; }
  .kr-pf-front [data-reveal]{ opacity:1!important; transform:none!important; }
}

/* carte non cliquable : ajout manuel sans reportage source (balise <figure>) */
.kr-pf-front .card--static{ margin:0; cursor:default; }
.kr-pf-front .kr-gallery__item{ cursor:pointer; }