/* Site shell — used by every inner page */

/* Helvetica Now Display — loaded from local fonts/ */
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('fonts/HelveticaNowDisplay-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('fonts/HelveticaNowDisplay-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('fonts/HelveticaNowDisplay-RegIta.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('fonts/HelveticaNowDisplay-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('fonts/HelveticaNowDisplay-MedIta.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('fonts/HelveticaNowDisplay-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('fonts/HelveticaNowDisplay-BoldIta.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}

html, body { margin: 0; padding: 0; }
body {
  background: #e7e3d4;
  font-family: 'Helvetica Now Display', Helvetica, 'Inter', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Deploy responsive shell ─────────────────────────────────────── */
/* Desktop track : the page components are full-bleed; we just cap the
   maximum width on very large monitors and center on a soft ground. */
.d-wrap {
  max-width: 1680px;
  margin: 0 auto;
  background: #fefef3;
  box-shadow: 0 0 80px rgba(0,0,0,0.10);
  min-height: 100vh;
}

/* Mobile track : the mobile components are designed ~390px wide. On phones
   the column fills the screen; on tablets it stays a centered phone column. */
.m-col {
  max-width: 480px;
  margin: 0 auto;
  background: #fefef3;
  position: relative;
  min-height: 100vh;
  box-shadow: 0 0 60px rgba(0,0,0,0.12);
}

/* En contexte « mis en ligne », les composants mobiles rendent un wrapper
   #top { height:100%; overflow:auto } pensé pour le cadre téléphone autonome.
   Ici, .m-col n'a pas de hauteur fixe : ce wrapper s'étire à toute la hauteur
   du contenu et devient un conteneur de défilement mort (ni lui ni la fenêtre
   ne défilent → les ancres de navigation rapide ne fonctionnent pas).
   On le laisse couler normalement pour que la FENÊTRE défile et que les
   ancres marchent. */
.m-col #top {
  height: auto !important;
  overflow: visible !important;
}

/* Conteneur de mise à l'échelle pour les pages sans version mobile
   (mentions légales, accessibilité, plan du site). */
.scale-outer {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Tiny loading hint while React + Babel compile the page */
.deploy-loading {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  color: #152b06; opacity: 0.5;
  font-family: 'Libre Baskerville', Georgia, serif; font-style: italic; font-size: 15px;
}
* { box-sizing: border-box; }
a { color: inherit; }
img { max-width: 100%; }

.workspace-bg {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(248,173,59,0.05), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(190,39,45,0.05), transparent 50%),
    #2a2820;
  min-height: 100vh;
  padding: 40px;
}

.page-frame {
  width: 1440px;
  margin: 0 auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.25);
  background: #fefef3;
  border-radius: 12px 12px 0 0;
  /* `clip` instead of `hidden` so position: sticky descendants still work */
  overflow: clip;
}

.chrome-bar {
  background: #ece9dd;
  border-bottom: 1px solid #d0ccbc;
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
}
.chrome-dots { display: flex; gap: 7px; }
.chrome-dots span { width: 12px; height: 12px; border-radius: 50%; display: block; }
.url-pill {
  flex: 1;
  height: 24px;
  background: #fefef3;
  border-radius: 6px;
  border: 1px solid #d8d4c2;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font: 11px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  color: #6a6856;
  gap: 8px;
}
.url-pill svg { flex-shrink: 0; }

/* Hide outer body scrollbar artefacts */
html { scroll-behavior: smooth; }

/* ── Global hover animations (sober, editorial) ────────────────────── */

/* Smooth transitions on all interactive elements */
a, button, input, select, textarea,
[role="button"] {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.25s ease, opacity 0.15s ease;
}

/* Buttons: very subtle lift + opacity micro-shift */
button:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
button:not(:disabled):active {
  transform: translateY(0);
  filter: brightness(0.96);
}

/* Card-like links (events, news, person cards…): subtle lift + accent border */
a[href]:not([href^="#"]):not(.no-hover) {
  position: relative;
}

/* Photo zoom inside any direct overflow:hidden parent */
a:hover > div > img,
button:hover > div > img {
  transform: scale(1.03);
}
img {
  transition: transform 0.5s ease;
}

/* Form fields focus ring */
input:focus, select:focus, textarea:focus {
  border-color: #be272d !important;
  box-shadow: 0 0 0 3px rgba(190, 39, 45, 0.12);
  outline: none;
}

/* Disabled state */
button:disabled { cursor: not-allowed !important; }

/* Underline-grow animation for text links (used selectively via class) */
.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease;
  padding-bottom: 1px;
}
.link-underline:hover { background-size: 100% 1px; }

/* iframe (map) subtle saturation lift on hover */
iframe { transition: filter 0.3s ease; }
iframe:hover { filter: saturate(1.15) !important; }

/* Reduce motion fallback */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Scroll-reveal animations (sober) ───────────────────────────────── */
/* Applied automatically by site-reveal.js to: section headers, cards,
   article blocks, etc. The base state is invisible + slightly down,
   reveal state slides up + fades in. */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Cascading delay variants for sibling elements (max ~6) */
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal][data-reveal-delay="5"] { transition-delay: 0.40s; }

/* Variant: from side (used for image columns) */
[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="left"].is-revealed,
[data-reveal="right"].is-revealed { transform: translateX(0); }

/* Variant: scale-up — for hero numbers / stats */
[data-reveal="zoom"] { transform: scale(0.94); }
[data-reveal="zoom"].is-revealed { transform: scale(1); }

/* Don't trigger on prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── Typographic stability ──────────────────────────────────────────
   Évite les artefacts de crénage / chevauchement de lettres sur les
   gros titres display pendant le chargement des polices. */
h1, h2, h3 {
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}