/* Conférences page (page-conferences.php). Loaded on that template only.
   Values trace to the theme tokens in src/input.css @theme (cacao, stone,
   azure ramp, Instrument Serif / Satoshi / JetBrains Mono, fluid type steps).
   Every class is cf- prefixed so nothing here can reach another template and
   no Tailwind utility can collide with it. Plain CSS on purpose: this file is
   not part of the Tailwind build. */

.cf-page{
  --cf-cacao:#3C1F19;
  --cf-cacao-light:#503129;
  --cf-cacao-body:#77625E;
  --cf-cacao-muted:#806D6A;
  --cf-stone:#FAFBFC;
  --cf-stone-dark:#EEF3F8;
  --cf-white:#FFFFFF;
  --cf-azure:#6D9CC3;
  --cf-azure-dark:#41759F;
  --cf-azure-darker:#2F5574;
  --cf-on-invert:#FAFBFC;
  --cf-on-invert-muted:#C1B9B8;
  --cf-line:rgba(60,31,25,.14);
  --cf-line-strong:rgba(60,31,25,.30);
  --cf-line-invert:rgba(250,251,252,.22);
  --cf-frame-1:rgba(109,156,195,.55);
  --cf-frame-2:rgba(109,156,195,.30);
  --cf-display:"Instrument Serif","Fraunces",Georgia,serif;
  --cf-body:"Satoshi","Cabinet Grotesk",system-ui,sans-serif;
  --cf-mono:"JetBrains Mono",ui-monospace,monospace;
  --cf-t-2xl:clamp(2.5rem,1.5rem + 5vw,5rem);
  --cf-t-xl:clamp(1.75rem,1.25rem + 2.5vw,3rem);
  --cf-t-lg:clamp(1.25rem,1rem + 1.25vw,1.75rem);
  --cf-ease:cubic-bezier(.16,1,.3,1);

  display:block;
  /* The site header is fixed and transparent at the top of the page, with
     cacao text: reserve its height on stone so it never sits on the cacao
     hero. Same 80/96px as the header's h-20 / md:h-24. */
  padding-top:80px;
  background:var(--cf-stone);
  color:var(--cf-cacao);
  font-family:var(--cf-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:clip;
}
@media (min-width:768px){.cf-page{padding-top:96px}}

.cf-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* In the base layer so the theme's Tailwind utilities (.hidden on the video
   testimonial's pause/muted icons) still win: unlayered CSS beats every
   @layer rule regardless of specificity. */
@layer base{.cf-page svg{display:block}}
.cf-page img{display:block;max-width:100%;height:auto}
.cf-page p{margin:0}
.cf-page h1,.cf-page h2,.cf-page h3{font-family:var(--cf-display);font-weight:400;margin:0;letter-spacing:-.01em;overflow-wrap:break-word}
.cf-page :focus-visible{outline:2px solid var(--cf-azure-dark);outline-offset:2px}
.cf-page [id]{scroll-margin-top:104px}

.cf-wrap{max-width:1184px;margin:0 auto;padding-inline:24px}
@media (min-width:768px){.cf-wrap{padding-inline:48px}}

/* ---------- shared atoms ---------- */
.cf-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--cf-mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cf-azure-dark);line-height:1.4}
.cf-eyebrow--on-dark{color:var(--cf-on-invert-muted)}
.cf-tick{width:16px;height:1px;background:var(--cf-azure);flex:0 0 auto}
.cf-h2{font-size:var(--cf-t-xl);line-height:1.1;margin-top:12px !important;max-width:20ch}
.cf-h3{font-size:var(--cf-t-lg);line-height:1.15;margin-top:12px !important}
.cf-body{color:var(--cf-cacao-body);margin-top:12px !important;max-width:44ch}
.cf-small{color:var(--cf-cacao-body);font-size:14px;margin-top:12px !important;max-width:44ch}

.cf-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.cf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;font-family:var(--cf-body);font-size:16px;font-weight:700;line-height:1.2;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background-color .2s var(--cf-ease),color .2s var(--cf-ease),border-color .2s var(--cf-ease)}
.cf-btn svg{width:18px;height:18px;flex:0 0 auto}
.cf-btn--primary{background:var(--cf-azure-dark);color:var(--cf-white)}
.cf-btn--primary:hover{background:var(--cf-azure-darker);color:var(--cf-white)}
.cf-btn--ghost{background:transparent;color:var(--cf-cacao);border-color:var(--cf-line-strong)}
.cf-btn--ghost:hover{border-color:var(--cf-azure-dark);color:var(--cf-azure-dark)}
@media (max-width:639px){.cf-btns .cf-btn{width:100%}}

.cf-band{padding:56px 0}
@media (min-width:900px){.cf-band{padding:96px 0}}
.cf-band--stone{background:var(--cf-stone)}
.cf-band--white{background:var(--cf-white)}
.cf-band--hairline{border-top:1px solid var(--cf-line)}

/* ---------- hero: the one cacao band ---------- */
.cf-hero{background:var(--cf-cacao);color:var(--cf-on-invert);padding:32px 0 56px}
@media (min-width:900px){.cf-hero{padding:72px 0 96px}}
.cf-hero :focus-visible{outline-color:var(--cf-on-invert)}
.cf-hero__grid{display:grid;gap:40px}
@media (min-width:900px){.cf-hero__grid{grid-template-columns:7fr 5fr;gap:64px;align-items:center}}
.cf-hero__title{font-size:var(--cf-t-2xl);line-height:1;margin-top:16px !important;max-width:none;text-wrap:balance;color:var(--cf-on-invert)}
.cf-hero__lede{margin-top:16px !important;max-width:46ch;color:var(--cf-on-invert-muted);font-size:16px;line-height:1.55}
@media (min-width:900px){.cf-hero__lede{font-size:20px;margin-top:24px !important}}

.cf-who{display:flex;align-items:center;gap:12px;margin-top:20px}
.cf-who__img{width:44px !important;height:44px !important;object-fit:cover;flex:0 0 auto}
.cf-who p{font-size:14px;line-height:1.4;color:var(--cf-on-invert-muted)}
.cf-who b{display:block;color:var(--cf-on-invert);font-weight:700}
@media (min-width:900px){.cf-who{margin-top:24px}.cf-who__img{width:56px !important;height:56px !important}}

/* the actions: a ruled programme list, not cards */
.cf-acts{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--cf-line-invert)}
@media (min-width:900px){.cf-acts{margin-top:32px}}
.cf-acts li{border-bottom:1px solid var(--cf-line-invert);margin:0}
.cf-act{display:grid;grid-template-columns:24px 1fr 18px;align-items:center;gap:12px;min-height:64px;padding:10px 12px;color:var(--cf-on-invert);text-decoration:none;transition:background-color .2s var(--cf-ease),color .2s var(--cf-ease)}
.cf-act__n{font-family:var(--cf-mono);font-size:12px;letter-spacing:.08em;color:var(--cf-on-invert-muted)}
.cf-act b{display:block;font-size:16px;font-weight:700;line-height:1.25}
.cf-act small{display:block;font-size:14px;line-height:1.35;color:var(--cf-on-invert-muted)}
.cf-act svg{width:18px;height:18px;transition:transform .25s var(--cf-ease)}
.cf-act:hover,.cf-act:focus-visible{background:var(--cf-cacao-light);color:var(--cf-on-invert)}
.cf-act:hover svg,.cf-act:focus-visible svg{transform:translateX(4px)}
.cf-act[data-cf-action="vcard"]:hover svg,.cf-act[data-cf-action="vcard"]:focus-visible svg{transform:translateY(3px)}
.cf-act--primary{background:var(--cf-azure-dark);color:var(--cf-white)}
.cf-act--primary .cf-act__n,.cf-act--primary small{color:var(--cf-white)}
.cf-act--primary:hover,.cf-act--primary:focus-visible{background:var(--cf-azure-darker);color:var(--cf-white)}
@media (min-width:900px){.cf-act{grid-template-columns:40px 1fr 20px;min-height:72px;padding:12px 16px}.cf-act b{font-size:20px}}

/* stage photo: offset double-hairline frame (the signature element) */
.cf-stage{position:relative;isolation:isolate;margin:0 24px 24px 0;--o1:12px;--o2:24px}
.cf-stage::before,.cf-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1}
.cf-stage::before{--o:var(--o1);border:1px solid var(--cf-frame-1);transform:translate(var(--o1),var(--o1))}
.cf-stage::after{--o:var(--o2);border:1px solid var(--cf-frame-2);transform:translate(var(--o2),var(--o2))}
.cf-stage__clip{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--cf-cacao-light)}
.cf-stage__clip picture{display:contents}
.cf-stage__img{width:100% !important;height:100% !important;max-width:none !important;object-fit:cover;object-position:var(--cf-focus,42% 42%)}
/* Phone: a short band after the actions, cropped on Michel, never squashed. */
@media (max-width:899px){.cf-stage{--o1:8px;--o2:16px;margin:0 16px 16px 0}}
@media (min-width:600px) and (max-width:899px){.cf-stage__clip{aspect-ratio:16/10}}
@media (min-width:900px){.cf-stage__clip{aspect-ratio:4/5}.cf-stage__img{object-position:50% 40%}}

/* ---------- presentation form ---------- */
.cf-lead{display:grid;gap:40px}
@media (min-width:900px){.cf-lead{grid-template-columns:5fr 6fr;gap:64px;align-items:start}}
.cf-lead__list{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--cf-cacao-body)}
.cf-lead__list li{display:flex;gap:8px;margin:0}
.cf-lead__list li::before{content:"";width:12px;height:1px;background:var(--cf-azure-dark);margin-top:11px;flex:0 0 auto}
.cf-form{background:var(--cf-white);border:1px solid var(--cf-line);padding:24px}
@media (min-width:640px){.cf-form{padding:40px}}
.cf-form__head{margin:-24px -24px 24px !important;padding:12px 24px;background:var(--cf-stone-dark);border-bottom:1px solid var(--cf-line);font-family:var(--cf-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cf-cacao-body)}
@media (min-width:640px){.cf-form__head{margin:-40px -40px 32px !important;padding:12px 40px}}
.cf-form__embed{min-height:48px}
.cf-form__embed iframe{max-width:100%}

/* ---------- topics + bio ---------- */
.cf-topics{display:grid;gap:48px}
@media (min-width:900px){.cf-topics{grid-template-columns:7fr 4fr;gap:64px;align-items:start}.cf-topics--solo{grid-template-columns:1fr}}
.cf-topic-list{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--cf-line)}
.cf-topic-list li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--cf-line);margin:0}
.cf-topic-list__n{font-family:var(--cf-mono);font-size:12px;letter-spacing:.08em;color:var(--cf-azure-dark)}
.cf-topic-list__t{font-family:var(--cf-display);font-size:var(--cf-t-lg);line-height:1.15}
.cf-bio{background:var(--cf-stone);border:1px solid var(--cf-line);display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;padding:24px}
.cf-bio__img{width:72px !important;height:72px !important;object-fit:cover}
.cf-bio__name{font-family:var(--cf-display);font-size:var(--cf-t-lg);line-height:1.1}
.cf-bio__role{font-family:var(--cf-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cf-azure-dark);margin-top:4px !important}
.cf-bio__txt{grid-column:1/-1;border-top:1px solid var(--cf-line);padding-top:16px}
.cf-bio__txt p{font-size:14px;color:var(--cf-cacao-body)}
.cf-bio__txt p + p{margin-top:8px}
@media (min-width:900px){
  .cf-bio{grid-template-columns:1fr;gap:0;padding:0}
  .cf-bio__img{width:100% !important;height:auto !important;aspect-ratio:1/1}
  .cf-bio__id{padding:24px 24px 0}
  .cf-bio__txt{margin:16px 24px 0;padding:16px 0 24px}
}

/* ---------- invite Michel (beside the homepage video testimonial) ---------- */
.cf-invite{background:var(--cf-white);border:1px solid var(--cf-line);padding:24px}
@media (min-width:640px){.cf-invite{padding:40px}}
@media (min-width:900px){
  .cf-invite--wide{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
  .cf-invite--wide .cf-btns{margin-top:0}
}

/* ---------- next conferences / socials ---------- */
.cf-socials{display:grid;gap:24px}
@media (min-width:900px){.cf-socials{grid-template-columns:5fr 7fr;align-items:center;gap:64px}}
.cf-soc-list{display:grid;gap:1px;background:var(--cf-line);border:1px solid var(--cf-line)}
@media (min-width:640px){.cf-soc-list--3{grid-template-columns:1.3fr 1fr 1fr}.cf-soc-list--2{grid-template-columns:1fr 1fr}}
.cf-soc{background:var(--cf-white);display:flex;align-items:center;gap:12px;padding:16px 24px;min-height:72px;color:var(--cf-cacao);text-decoration:none;transition:background-color .2s var(--cf-ease)}
.cf-soc svg{width:22px;height:22px;color:var(--cf-azure-dark);flex:0 0 auto}
.cf-soc b{display:block;font-size:16px}
.cf-soc small{display:block;font-family:var(--cf-mono);font-size:12px;color:var(--cf-cacao-muted)}
.cf-soc:hover{background:var(--cf-stone-dark)}
.cf-soc:hover b{color:var(--cf-azure-dark)}
.cf-soc--lead{padding:24px}
.cf-soc--lead b{font-family:var(--cf-display);font-weight:400;font-size:var(--cf-t-lg);line-height:1.1}

/* ---------- final CTA + coordinates ---------- */
.cf-close{display:grid;gap:40px}
@media (min-width:900px){.cf-close{grid-template-columns:7fr 5fr;gap:64px;align-items:end}}
.cf-close .cf-h2{max-width:18ch}
.cf-addr{margin:0;border-top:1px solid var(--cf-line)}
.cf-addr div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--cf-line)}
.cf-addr dt{font-family:var(--cf-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cf-cacao-muted);padding-top:3px}
.cf-addr dd{margin:0;font-size:16px}
/* 44px tap target without changing the row height (negative block margin). */
.cf-addr a{color:var(--cf-azure-dark);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin-block:calc((1.6em - 44px) / 2)}
.cf-addr a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- motion (Foundation tier): only when the visitor allows it ----------
   Every element's resting state is visible. The hero stagger is pure CSS with
   fill-mode both, so it ends visible with or without JS. The scroll reveal only
   hides an element after conferences.js has measured it below the fold
   (.cf-pre), so a script failure leaves everything on screen. */
@media (prefers-reduced-motion:no-preference){
  html:has(.cf-page){scroll-behavior:smooth}

  .cf-in{animation:cf-rise .6s var(--cf-ease) both;animation-delay:calc(60ms + var(--cf-i,0) * 70ms)}
  @keyframes cf-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  .cf-stage__clip{animation:cf-unmask 1.1s var(--cf-ease) .15s both}
  @keyframes cf-unmask{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  .cf-stage__img{animation:cf-settle 1.6s var(--cf-ease) .15s both}
  @keyframes cf-settle{from{transform:scale(1.08)}to{transform:none}}
  .cf-stage::before{animation:cf-frame .8s var(--cf-ease) .75s both}
  .cf-stage::after{animation:cf-frame .8s var(--cf-ease) .9s both}
  @keyframes cf-frame{from{opacity:0;transform:translate(0,0)}to{opacity:1;transform:translate(var(--o),var(--o))}}

  [data-cf-reveal]{transition:opacity .7s var(--cf-ease),transform .7s var(--cf-ease)}
  [data-cf-reveal].cf-pre{opacity:0;transform:translateY(16px)}
}
@media print{[data-cf-reveal].cf-pre{opacity:1 !important;transform:none !important}}
@media (prefers-reduced-motion:reduce){
  .cf-page *,.cf-page *::before,.cf-page *::after{animation:none !important;transition:none !important}
}

/* ---------- homepage video testimonial, rendered on this template ----------
   Undo what .cf-page sets for its own modules so the shared partial renders
   exactly as it does on the homepage (body line-height is 1.5 there). */
.cf-page [data-component="video-testimonial"]{line-height:1.5}