/* ============================================================
   Tykka Lab — page publique
   Palette tirée du logo : trait noir sur blanc.
   L'emphase vient de l'inversion et du filet, jamais de la couleur.
   ============================================================ */

:root{
  --paper:#FBFBFA;
  --paper-2:#F2F2F0;
  --card:#FFFFFF;
  --ink:#0D0D0C;
  --ink-2:#3A3A38;
  --ink-3:#5C5A57;
  --hair:#DCDBD7;
  --hair-2:#EAE9E5;
  --inverse-bg:#0D0D0C;
  --inverse-ink:#FBFBFA;
  --inverse-ink-2:rgba(251,251,250,.68);
  --inverse-hair:rgba(251,251,250,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D0D0C;
    --paper-2:#141413;
    --card:#141413;
    --ink:#F4F3F0;
    --ink-2:#C3C1BC;
    --ink-3:#8B8985;
    --hair:#2B2A28;
    --hair-2:#1F1E1D;
    --inverse-bg:#F4F3F0;
    --inverse-ink:#0D0D0C;
    --inverse-ink-2:rgba(13,13,12,.7);
    --inverse-hair:rgba(13,13,12,.16);
  }
}
:root[data-theme="dark"]{
  --paper:#0D0D0C;
  --paper-2:#141413;
  --card:#141413;
  --ink:#F4F3F0;
  --ink-2:#C3C1BC;
  --ink-3:#8B8985;
  --hair:#2B2A28;
  --hair-2:#1F1E1D;
  --inverse-bg:#F4F3F0;
  --inverse-ink:#0D0D0C;
  --inverse-ink-2:rgba(13,13,12,.7);
  --inverse-hair:rgba(13,13,12,.16);
}

*{box-sizing:border-box}

/* L'attribut hidden doit toujours l'emporter : une classe qui pose un
   display prime sinon sur la règle du navigateur, et l'élément reste à
   l'écran alors qu'il est censé être masqué. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Jost","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-weight:300;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:12px 20px;z-index:100;
}
.skip:focus{left:0}

/* Texte présent pour les lecteurs d'écran, retiré visuellement sans être masqué
   du DOM — utilisé pour annoncer un changement de contexte ou nommer un bouton
   qui ne porte qu'une icône. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
@media (max-width:600px){.wrap{padding:0 22px}}

.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--ink-3);
}

/* ---------------- nav ---------------- */
.nav{
  position:sticky;top:0;z-index:30;
  background:var(--paper);
  border-bottom:1px solid var(--hair-2);
}
@supports (backdrop-filter:blur(12px)){
  .nav{background:color-mix(in srgb, var(--paper) 90%, transparent);backdrop-filter:blur(12px)}
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:18px 0}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
/* Le logo est un trait noir sur disque blanc : on garde ce disque blanc dans les
   deux thèmes, comme sur Instagram. Le fond est légèrement agrandi (108 %) pour
   rogner un pourtour imparfait — une capture d'écran fait alors très bien l'affaire. */
.mark{
  width:40px;height:40px;border-radius:50%;flex:none;
  background-color:#FFFFFF;
  background-size:108%;
  background-position:center;
  background-repeat:no-repeat;
}
.mark-empty{
  background-color:var(--paper-2);border:1px dashed var(--hair);
  display:grid;place-items:center;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.brand-name{
  font-family:"Cormorant Garamond",Garamond,serif;
  font-size:22px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);line-height:1;
}
.nav-links{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:13.5px;letter-spacing:.05em}
.nav-links a{
  text-decoration:none;color:var(--ink-2);padding-bottom:3px;
  border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}

.nav-toggle{
  display:none;background:none;border:1px solid var(--hair);border-radius:6px;
  padding:8px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
}
.nav-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;display:block}
.nav-toggle:hover{border-color:var(--ink-2)}

@media (max-width:820px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--hair-2);
    padding:4px 0;
  }
  .nav-links.is-open{display:flex}
  .nav-links a{display:block;padding:14px 32px;border-bottom:1px solid var(--hair-2)}
  @media (max-width:600px){.nav-links a{padding:14px 22px}}
  .nav-links a:hover,.nav-links a:focus-visible{border-bottom-color:var(--hair-2)}
}

/* ---------------- hero ---------------- */
.hero{padding:120px 0 96px}
@media (max-width:820px){.hero{padding:76px 0 60px}}
.hero .eyebrow{margin-bottom:34px}
/* Plafond volontairement modéré : la dernière ligne de l'accroche est longue
   (« vers le job de vos rêves. ») et doit tenir sans se casser au milieu. */
h1{font-size:clamp(2.8rem,7vw,5.4rem);line-height:1.04;letter-spacing:-.015em}
h1 em{font-style:italic}
.hero-lede{margin-top:40px;max-width:33em;font-size:18px;color:var(--ink-2);line-height:1.75}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}

.btn{
  display:inline-block;text-decoration:none;font-size:13px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;padding:16px 32px;
  border:1px solid var(--ink);transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:transparent;color:var(--ink)}
.btn-ghost{border-color:var(--ink-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

.facts{margin:104px 0 0;border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr)}
@media (max-width:820px){.facts{grid-template-columns:repeat(2,1fr);margin-top:64px}}
@media (max-width:460px){.facts{grid-template-columns:1fr}}
.facts > div{padding:24px 26px 28px 0;border-bottom:1px solid var(--hair)}
.facts dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.facts dd{margin:0;font-family:"Cormorant Garamond",Garamond,serif;font-size:30px;line-height:1.1;color:var(--ink)}
.facts dd small{display:block;font-family:"Jost",sans-serif;font-size:13px;color:var(--ink-3);margin-top:7px}

/* ---------------- sections ---------------- */
section{padding:104px 0}
@media (max-width:820px){section{padding:68px 0}}
.sec-head{margin-bottom:58px}
.sec-head h2{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.012em;margin-top:20px}
.sec-head h2 em{font-style:italic}
.sec-head p{margin-top:22px;color:var(--ink-2);max-width:34em}

.approach{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.approach > div{padding:34px 34px 42px 0;border-bottom:1px solid var(--hair)}
.approach > div + div{padding-left:34px;border-left:1px solid var(--hair-2)}
.approach h3{font-size:1.65rem;line-height:1.15;margin-bottom:14px}
.approach p{font-size:15px;color:var(--ink-2);line-height:1.7}
@media (max-width:900px){
  .approach{grid-template-columns:1fr}
  .approach > div + div{padding-left:0;border-left:0}
}

.steps{border-top:1px solid var(--ink);list-style:none;margin:0;padding:0}
.step{
  display:grid;grid-template-columns:110px 1fr;gap:32px;
  padding:34px 0;border-bottom:1px solid var(--hair);align-items:start;
}
.step-n{
  font-family:"Cormorant Garamond",Garamond,serif;font-size:2.7rem;line-height:.9;
  color:var(--ink-3);font-variant-numeric:tabular-nums;font-style:italic;
}
.step h3{font-size:1.55rem;margin-bottom:8px;line-height:1.2}
.step p{color:var(--ink-2);font-size:15.5px;max-width:46em}
@media (max-width:640px){
  .step{grid-template-columns:64px 1fr;gap:20px;padding:26px 0}
  .step-n{font-size:2rem}
}

/* donation — le seul moment fort, en inversion */
.donation{background:var(--inverse-bg);color:var(--inverse-ink);padding:112px 0}
@media (max-width:820px){.donation{padding:72px 0}}
.donation .eyebrow{color:var(--inverse-ink-2)}
.don-quote{
  font-family:"Cormorant Garamond",Garamond,serif;font-weight:300;
  font-size:clamp(2.1rem,5.2vw,3.9rem);line-height:1.1;letter-spacing:-.015em;
  margin-top:24px;max-width:16em;
}
.don-quote em{font-style:italic}
.don-cols{
  display:grid;grid-template-columns:repeat(2,1fr);gap:56px;
  margin-top:56px;padding-top:40px;border-top:1px solid var(--inverse-hair);
}
@media (max-width:820px){.don-cols{grid-template-columns:1fr;gap:26px;margin-top:40px}}
.don-cols p{color:var(--inverse-ink-2);font-size:15.5px;line-height:1.75}

/* à propos */
.about{display:grid;grid-template-columns:.72fr 1.28fr;gap:72px;align-items:start}
@media (max-width:900px){.about{grid-template-columns:1fr;gap:36px}}
.portrait{aspect-ratio:4/5;width:100%;object-fit:cover;border:1px solid var(--hair)}
.portrait-empty{
  background:var(--paper-2);display:grid;place-items:center;text-align:center;padding:26px;
}
.portrait-empty span{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);line-height:2;
}
.about h2{font-size:clamp(2.1rem,4.6vw,3.2rem);line-height:1.08;margin:18px 0 26px;letter-spacing:-.012em}
.about-body p{color:var(--ink-2);font-size:16.5px;line-height:1.78}
.about-body p + p{margin-top:20px}
.about-body .eyebrow{color:var(--ink-3)}
.signature{
  font-family:"Cormorant Garamond",Garamond,serif;font-style:italic;font-size:1.7rem;
  color:var(--ink);margin-top:32px;
}

/* actualités */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media (max-width:820px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.posts{grid-template-columns:1fr}}
.post{background:var(--card);text-decoration:none;display:block;transition:background .2s ease}
.post:hover{background:var(--paper-2)}
.post-img{aspect-ratio:1/1;width:100%;object-fit:cover;background:var(--paper-2)}
.post-img-empty{display:grid;place-items:center}
.post-img-empty span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.post-txt{padding:20px 22px 26px}
.post-txt time{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.post-txt p{margin-top:10px;font-size:15px;color:var(--ink-2);line-height:1.6}
.posts-empty{
  grid-column:1/-1;background:var(--card);padding:56px 32px;text-align:center;color:var(--ink-3);
}

/* contact — clôture inversée */
.contact{background:var(--inverse-bg);color:var(--inverse-ink);padding:112px 0 96px}
@media (max-width:820px){.contact{padding:72px 0 60px}}
.contact .eyebrow{color:var(--inverse-ink-2)}
.contact h2{font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.06;margin-top:22px;letter-spacing:-.015em}
.contact h2 em{font-style:italic}
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:end}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:44px;align-items:start}}
.contact-lede{color:var(--inverse-ink-2);margin-top:26px;max-width:30em;font-size:16px}
.chan{list-style:none;margin:0;padding:0}
.chan li{border-bottom:1px solid var(--inverse-hair)}
.chan li:first-child{border-top:1px solid var(--inverse-hair)}
.chan a,.chan .row{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:19px 0;text-decoration:none;color:inherit;transition:padding .2s ease;
}
.chan a:hover{padding-left:8px}
.chan .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--inverse-ink-2)}
.chan .v{font-family:"Cormorant Garamond",Garamond,serif;font-size:21px;color:var(--inverse-ink)}

footer{
  padding:30px 0;font-size:12.5px;color:var(--ink-3);letter-spacing:.03em;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
}

/* apparition au défilement — la classe .js n'est posée que si le script
   s'exécute réellement (voir lib/page.php) : sans elle, tout reste visible
   d'emblée au lieu de rester caché si main.js est bloqué, en erreur ou lent
   à charger. */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .post,.chan a,.btn,.nav-links a{transition:none}
}