/* ============================================================
   Anjaramahasoa — styles (conversion HTML/CSS/JS du design Lovable)
   ============================================================ */

:root {
  --radius: 0.75rem;

  /* ----- Palette institutionnelle -----
     Fond / surfaces : #F8F9FA
     Texte           : #1A1A1A
     Primaire (actions fortes, titres) : #2C3E50  (bleu nuit)
     Secondaire (accents, CTA)         : #D4AF37  (or)            */

  --background: #F8F9FA;          /* fond général */
  --foreground: #1A1A1A;          /* texte principal (contraste ~17:1 sur le fond) */
  --card: #FFFFFF;                /* surfaces / cartes */
  --card-foreground: #1A1A1A;

  --primary: #2C3E50;             /* bleu nuit — boutons forts, titres */
  --primary-foreground: #FFFFFF;  /* texte sur primaire (contraste ~9.7:1) */
  --primary-dark: #233140;        /* variante foncée (hover) */

  --secondary: #EEF1F4;           /* surface secondaire douce (gris bleuté) */
  --secondary-foreground: #2C3E50;

  --muted: #EDEFF2;
  --muted-foreground: #4A5560;    /* texte secondaire (contraste ~7:1 sur le fond) */

  /* Accent OR : utilisé comme SURFACE (badges, boutons CTA, icônes) avec
     texte foncé par-dessus. Jamais comme texte de petite taille sur fond clair. */
  --accent: #D4AF37;              /* or */
  --accent-foreground: #1A1A1A;   /* texte foncé sur l'or (contraste ~9.8:1) */
  --accent-dark: #B8932B;         /* or foncé (hover / dégradé) */

  /* Pour les libellés / "eyebrows" lisibles sur fond clair : bleu nuit,
     pas l'or (l'or n'a pas un contraste suffisant comme texte fin). */
  --accent-orange: #2C3E50;

  --border: #DCE1E7;              /* bordures discrètes */
  --input: #D2D8DF;
  --ring: #2C3E50;
  --beige: #F1F3F5;               /* bandes claires alternées */
  --cream: #FBFCFD;

  /* Dégradé "doré" pour les boutons CTA et surfaces d'accent */
  --gradient-warm: linear-gradient(135deg, #D4AF37 0%, #B8932B 100%);
  /* Dégradé hero : bleu nuit institutionnel */
  --gradient-hero: linear-gradient(135deg, rgba(28,40,54,0.94) 0%, rgba(44,62,80,0.80) 100%);

  --shadow-soft: 0 10px 40px -10px color-mix(in oklab, var(--primary) 25%, transparent);
  --shadow-warm: 0 12px 40px -12px color-mix(in oklab, #B8932B 40%, transparent);

  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); }
html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 1 auto; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; }

/* ----- utilities ----- */
.container-page {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--gradient-warm); color: var(--accent-foreground); font-weight: 600;
  padding: 0.875rem 1.75rem; border-radius: 9999px; border: 0; cursor: pointer;
  box-shadow: var(--shadow-warm);
  transition: transform .2s ease, box-shadow .2s ease;
  font-family: var(--font-sans); font-size: 1rem;
}
.btn-primary:hover { transform: translateY(-2px); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 2px solid var(--primary); color: var(--primary); font-weight: 600;
  padding: 0.75rem 1.75rem; border-radius: 9999px; background: transparent; cursor: pointer;
  transition: all .2s ease; font-family: var(--font-sans); font-size: 1rem;
}
.btn-outline:hover { background: var(--primary); color: var(--primary-foreground); }

.btn-white {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; color: var(--primary); padding: .75rem 1.75rem;
  border-radius: 9999px; font-weight: 600; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  transition: box-shadow .2s ease;
}
.btn-white:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }

.btn-ghost-white {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 2px solid rgba(255,255,255,.7); color: #fff; padding: .75rem 1.75rem;
  border-radius: 9999px; font-weight: 600; transition: background .2s ease;
}
.btn-ghost-white:hover { background: rgba(255,255,255,.1); }

.icon { width: 1rem; height: 1rem; stroke-width: 2; }

/* eyebrow / labels */
.eyebrow { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-orange); }
.eyebrow-accent { color: var(--accent); }

.lead { font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.7; }
.muted { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(12px);
}
.header-inner { display: flex; height: 5rem; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brand img { height: 3.5rem; width: 3.5rem; flex-shrink: 0; }
.brand-name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--primary); line-height: 1.1; }
.brand-tag { font-size: .75rem; color: var(--muted-foreground); font-style: italic; }

.nav-desktop { display: none; align-items: center; gap: .25rem; }
.nav-desktop a.nav-link {
  border-radius: 9999px; padding: .5rem .75rem; font-size: .875rem; font-weight: 500;
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
  transition: background .2s, color .2s;
}
.nav-desktop a.nav-link:hover { background: var(--secondary); color: var(--primary); }
.nav-desktop a.nav-link.active { font-weight: 600; background: var(--secondary); color: var(--primary); }
.nav-cta { margin-left: .5rem; padding: .5rem 1.25rem !important; font-size: .875rem; }

.menu-toggle { display: inline-flex; padding: .5rem; color: var(--primary); background: none; border: 0; cursor: pointer; }
.menu-toggle .icon { width: 1.5rem; height: 1.5rem; }

.nav-mobile { display: none; border-top: 1px solid var(--border); background: var(--background); }
.nav-mobile.open { display: block; }
.nav-mobile nav { display: flex; flex-direction: column; padding-block: 1rem; }
.nav-mobile a {
  padding: .75rem .5rem; font-size: 1rem; font-weight: 500;
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile a.active { font-weight: 600; color: var(--primary); }

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .menu-toggle { display: none; }
  .nav-mobile { display: none !important; }
}

/* ============================================================
   HERO / SECTIONS
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero > img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: var(--gradient-hero); }
.hero-content { position: relative; padding-block: 6rem; color: var(--primary-foreground); }

.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; background: rgba(255,255,255,.1); backdrop-filter: blur(4px);
  padding: .375rem 1rem; font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}

.hero-title { margin-top: 1.5rem; max-width: 56rem; font-size: 2.25rem; font-weight: 700; }
.hero-title .accent { color: var(--accent); }
.hero-lead { margin-top: 1.5rem; max-width: 42rem; font-size: 1.125rem; color: rgba(255,255,255,.9); line-height: 1.7; }
.hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* page hero with image band */
.hero-band { position: relative; }
.hero-band > img { width: 100%; object-fit: cover; }
.hero-band .band-content {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
}
.hero-band .band-inner { padding-bottom: 2.5rem; color: var(--primary-foreground); }
.hero-band h1 { margin-top: .5rem; font-size: 2.25rem; font-weight: 700; }

.section { padding-block: 5rem; }
.section-tight { padding-block: 4rem; }
.section-title { margin-top: .75rem; font-size: 1.875rem; font-weight: 700; color: var(--primary); }
.section-lead { margin-top: 1.25rem; max-width: 42rem; }

.bg-secondary-soft { background: color-mix(in oklab, var(--secondary) 60%, transparent); }
.bg-secondary-50 { background: color-mix(in oklab, var(--secondary) 50%, transparent); }
.bg-cream-beige { background: linear-gradient(to bottom, var(--cream), var(--beige)); }

/* ============================================================
   GRID HELPERS
   ============================================================ */
.grid { display: grid; gap: 1.5rem; }
.gap-6 { gap: 1.5rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* ----- stats ----- */
.stat-card { border-radius: 1rem; background: var(--card); padding: 1.5rem; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.stat-value { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; color: var(--primary); }
.stat-label { margin-top: .25rem; font-size: .875rem; color: var(--muted-foreground); }

/* ----- mission feature pills ----- */
.feature {
  display: flex; align-items: center; gap: .75rem;
  border-radius: .75rem; border: 1px solid var(--border); background: var(--card); padding: 1rem;
}
.feature .ico {
  display: grid; place-items: center; height: 2.5rem; width: 2.5rem; flex-shrink: 0;
  border-radius: .5rem; background: var(--secondary); color: var(--primary);
}
.feature span { font-weight: 500; color: var(--foreground); }
.feature .icon { width: 1.25rem; height: 1.25rem; }

.rounded-img-lg { border-radius: 1.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); width: 100%; height: 100%; max-height: 30rem; object-fit: cover; object-position: center; }
.rounded-img-xl { border-radius: 1.5rem; }

.quote-float {
  position: absolute; bottom: -1.5rem; left: -1.5rem; max-width: 18rem;
  border-radius: 1rem; background: var(--card); padding: 1.25rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); box-shadow: 0 0 0 1px var(--border), 0 20px 25px -5px rgba(0,0,0,.1);
}
.quote-float p { font-size: .875rem; font-style: italic; color: var(--muted-foreground); }

/* ----- project highlight cards ----- */
.card-img {
  overflow: hidden; border-radius: 1rem; background: var(--card);
  box-shadow: 0 1px 2px rgba(0,0,0,.05); outline: 1px solid var(--border);
}
.card-img > img { height: 13rem; width: 100%; object-fit: cover; }
.card-img .body { padding: 1.5rem; }
.card-img h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--primary); }
.card-img p { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; }

/* ----- CTA block ----- */
.cta-block {
  overflow: hidden; border-radius: 1.5rem; background: var(--primary);
  padding: 2.5rem; color: var(--primary-foreground); position: relative;
}
.cta-glow { position: absolute; right: -5rem; top: -5rem; height: 18rem; width: 18rem; border-radius: 9999px; background: var(--accent); opacity: .18; }
.cta-block .inner { position: relative; max-width: 42rem; }
.cta-block h2 { font-size: 1.875rem; font-weight: 700; }
.cta-block h2 .accent { color: var(--accent); }
.cta-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .5rem; color: rgba(255,255,255,.9); }
.cta-list li { display: flex; align-items: flex-start; gap: .5rem; }
.cta-list .icon { color: var(--accent); margin-top: .125rem; flex-shrink: 0; width: 1.25rem; height: 1.25rem; }

/* ----- value cards (about) ----- */
.value-card { border-radius: 1rem; background: var(--card); padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.value-card .ico { display: grid; place-items: center; height: 3rem; width: 3rem; border-radius: .75rem; color: var(--accent-foreground); background: var(--gradient-warm); }
.value-card h3 { margin-top: 1rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--primary); }
.value-card p { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; }
.value-card .icon { width: 1.5rem; height: 1.5rem; }

/* ----- project info cards ----- */
.info-card { border-radius: 1rem; border: 1px solid var(--border); background: var(--card); padding: 1.5rem; }
.info-card .ico { display: grid; place-items: center; height: 2.75rem; width: 2.75rem; border-radius: .5rem; background: var(--secondary); color: var(--primary); }
.info-card .icon { width: 1.25rem; height: 1.25rem; }
.info-card .lbl { margin-top: 1rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-orange); }
.info-card p { margin-top: .25rem; color: var(--foreground); line-height: 1.6; }

/* ----- component cards (project) ----- */
.comp-card {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 1.25rem;
  border-radius: 1.5rem; background: var(--card); padding: 1.25rem; outline: 1px solid var(--border);
}
.comp-card > img { height: 11rem; width: 100%; object-fit: cover; border-radius: 1rem; }
.comp-card .meta { display: flex; align-items: center; gap: .5rem; color: var(--accent-orange); }
.comp-card .meta .icon { width: 1.25rem; height: 1.25rem; }
.comp-card .meta span { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.comp-card h3 { margin-top: .25rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--primary); }
.comp-card p { margin-top: .5rem; color: var(--muted-foreground); line-height: 1.6; }

/* ----- accomplished tiles ----- */
.tile { border-radius: 1rem; background: var(--card); padding: 1.25rem; outline: 1px solid var(--border); }
.tile .check { font-size: 1.5rem; }
.tile p { margin-top: .5rem; font-weight: 500; color: var(--foreground); }

/* ----- before/after ----- */
figure img { border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); width: 100%; height: 22rem; object-fit: cover; object-position: center; }
figure figcaption { margin-top: .75rem; font-size: .875rem; color: var(--muted-foreground); }
figure figcaption strong { color: var(--primary); }

/* ----- warm panel (surface OR : texte foncé pour le contraste) ----- */
.warm-panel { border-radius: 1.5rem; padding: 2.5rem; color: var(--accent-foreground); background: var(--gradient-warm); }
.warm-panel h2, .warm-panel h3 { font-weight: 700; color: var(--accent-foreground); }
.warm-panel p { margin-top: .75rem; color: color-mix(in oklab, var(--accent-foreground) 80%, transparent); }

/* ----- impact cards ----- */
.impact-warm { border-radius: 1.5rem; padding: 2rem; color: var(--accent-foreground); background: var(--gradient-warm); }
.impact-warm .icon { width: 2rem; height: 2rem; }
.impact-warm .big { margin-top: 1rem; font-family: var(--font-display); font-size: 3rem; font-weight: 700; }
.impact-warm p { margin-top: .5rem; font-weight: 500; }

.impact-primary { border-radius: 1.5rem; background: var(--primary); padding: 2rem; color: var(--primary-foreground); }
.impact-primary .icon { width: 2rem; height: 2rem; color: var(--accent); }
.impact-primary h3 { margin-top: 1rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.impact-primary ul { margin-top: .75rem; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; color: rgba(255,255,255,.9); }

.impact-card { border-radius: 1.5rem; background: var(--card); padding: 2rem; outline: 1px solid var(--border); }
.impact-card .icon { width: 2rem; height: 2rem; color: var(--primary); }
.impact-card h3 { margin-top: 1rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--primary); }
.impact-card p { margin-top: .75rem; color: var(--muted-foreground); line-height: 1.6; }
/* ----- gallery carousel (mobile) / grille (desktop) ----- */
.gallery-wrap { margin-top: 2rem; overflow: hidden; position: relative; }

/* Contrôles carousel */
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.gallery-btn { background: var(--primary); color: #fff; border: none; border-radius: 50%; width: 2.25rem; height: 2.25rem; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .15s; flex-shrink: 0; }
.gallery-btn:hover { background: var(--primary-dark, #2a6b42); transform: scale(1.08); }
.gallery-dots { display: flex; gap: .45rem; align-items: center; }
.gallery-dot { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(0,0,0,.2); border: none; padding: 0; cursor: pointer; transition: background .2s, transform .2s; }
.gallery-dot.active { background: var(--primary); transform: scale(1.3); }

/* Mobile : carousel horizontal scroll natif */
.gallery-track {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.gallery-track::-webkit-scrollbar { display: none; }

.gallery-slide {
  flex: 0 0 80vw;
  max-width: 300px;
  scroll-snap-align: start;
}
.gallery-slide img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  display: block;
}
/* ----- blockquote ----- */
.bq { margin-inline: auto; max-width: 48rem; border-radius: 1.5rem; background: var(--card); padding: 2.5rem; text-align: center; outline: 1px solid var(--border); }
.bq p { font-family: var(--font-display); font-size: 1.5rem; font-style: italic; color: var(--primary); line-height: 1.3; }
.bq footer { margin-top: 1rem; font-size: .875rem; color: var(--muted-foreground); }

/* ----- support cards ----- */
.support-card { border-radius: 1.5rem; background: var(--card); padding: 2rem; outline: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.support-card .ico { display: grid; place-items: center; height: 3rem; width: 3rem; border-radius: .75rem; color: var(--accent-foreground); background: var(--gradient-warm); }
.support-card .icon { width: 1.5rem; height: 1.5rem; }
.support-card h2 { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--primary); }
.support-card p { margin-top: .5rem; color: var(--muted-foreground); line-height: 1.6; }

.check-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.check-list li { display: flex; align-items: flex-start; gap: .75rem; }
.check-list .icon { color: var(--accent-orange); margin-top: .125rem; flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.check-list span { color: var(--foreground); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-info { display: flex; flex-direction: column; gap: 1rem; }
.contact-item { display: flex; align-items: flex-start; gap: 1rem; border-radius: 1rem; background: var(--card); padding: 1.25rem; outline: 1px solid var(--border); }
.contact-item .ico { display: grid; place-items: center; height: 2.75rem; width: 2.75rem; flex-shrink: 0; border-radius: .75rem; background: var(--secondary); color: var(--primary); }
.contact-item .icon { width: 1.25rem; height: 1.25rem; }
.contact-item .lbl { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-orange); }
.contact-item .val { margin-top: .25rem; color: var(--foreground); word-break: break-word; }
.contact-note { border-radius: 1rem; background: var(--primary); padding: 1.5rem; color: var(--primary-foreground); }
.contact-note p:first-child { font-family: var(--font-display); font-size: 1.125rem; font-style: italic; }
.contact-note p:last-child { margin-top: .5rem; font-size: .875rem; color: rgba(255,255,255,.85); }

.form-card { border-radius: 1.5rem; background: var(--card); padding: 2rem; outline: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.form-row { display: grid; gap: 1.25rem; align-items: start; }
.field { display: flex; flex-direction: column; }
.field label { display: block; font-size: .875rem; font-weight: 600; color: var(--primary); line-height: 1.4; min-height: 1.25rem; }
.field label .req { color: var(--accent-orange); }
.field input, .field select, .field textarea {
  margin-top: .375rem; width: 100%; border-radius: .75rem; border: 1px solid var(--input);
  background: var(--background); padding: .75rem 1rem; color: var(--foreground);
  outline: none; font-family: var(--font-sans); font-size: 1rem;
  box-sizing: border-box;
}
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 2px var(--primary); }
.form-card .field + .field, .form-card .form-row + .field, .form-card .form-row + .form-row, .form-card .field + .form-row { margin-top: 1.25rem; }
.form-success { text-align: center; padding-block: 2rem; }
.form-success .ico { margin-inline: auto; display: grid; height: 3.5rem; width: 3.5rem; place-items: center; border-radius: 9999px; color: var(--accent-foreground); background: var(--gradient-warm); }
.form-success h2 { margin-top: 1rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.form-success p { margin-top: .5rem; color: var(--muted-foreground); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { margin-top: 6rem; background: var(--primary); color: var(--primary-foreground); }
.footer-grid { display: grid; gap: 2.5rem; padding-block: 3.5rem; }
.footer-brand .row { display: flex; align-items: center; gap: .75rem; }
.footer-brand img { height: 3.5rem; width: 3.5rem; background: rgba(255,255,255,.95); border-radius: 9999px; padding: .25rem; }
.footer-brand .name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.footer-brand .tag { font-size: .875rem; color: rgba(255,255,255,.7); font-style: italic; }
.footer-brand p.desc { margin-top: 1rem; max-width: 28rem; font-size: .875rem; color: rgba(255,255,255,.8); line-height: 1.7; }
.footer-col h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: .75rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; color: rgba(255,255,255,.8); }
.footer-col a:hover { color: var(--accent); }
.footer-contact li { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; color: rgba(255,255,255,.85); margin-bottom: .75rem; }
.footer-contact .icon { width: 1rem; height: 1rem; margin-top: .125rem; flex-shrink: 0; color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); }
.footer-bottom .row { display: flex; flex-direction: column; gap: .5rem; padding-block: 1.25rem; font-size: .875rem; color: rgba(255,255,255,.7); }
.footer-bottom .row .ital { font-style: italic; font-family: var(--font-display); }

/* 404 / error */
.center-screen { display: flex; min-height: 60vh; align-items: center; justify-content: center; padding-inline: 1rem; }
.center-screen .box { max-width: 28rem; text-align: center; }
.center-screen h1 { font-size: 4.5rem; font-weight: 700; color: var(--primary); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 640px) {
  .hero-title { font-size: 3rem; }
  .sm\:grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Desktop : grille 3 colonnes */
  .gallery-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .gallery-slide {
    flex: none;
    max-width: none;
  }
  .gallery-slide img {
    aspect-ratio: 4/3;
    transition: transform .2s, box-shadow .2s;
  }
  .gallery-slide img:hover {
    transform: translateY(-.25rem);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
  }
  .gallery-controls { display: none; }
  .comp-card { grid-template-columns: 180px minmax(0,1fr); }
  .comp-card > img { height: 100%; }
  .form-row { grid-template-columns: repeat(2, minmax(0,1fr)); }}

@media (min-width: 768px) {
  .hero-content { padding-block: 9rem; }
  .hero-title { font-size: 3.75rem; }
  .section-title { font-size: 2.25rem; }
  .md\:grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .md\:grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .md\:grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .md\:items-center { align-items: center; }
  .quote-float { display: block; }
  .cta-block { padding: 4rem; }
  .footer-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .footer-brand { grid-column: span 2; }
  .footer-bottom .row { flex-direction: row; align-items: center; justify-content: space-between; }
  .hero-band h1 { font-size: 3rem; }
  .impact-big-title { font-size: 3rem; }
}

@media (min-width: 1024px) {
  .lg\:grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lg\:contact { grid-template-columns: 1fr 1.4fr; }
}

@media (max-width: 767px) {
  .quote-float { display: none; }
}

/* ============================================================
   ANIMATIONS (pro, sobres) — activées via js/animations.js
   ============================================================ */

/* État initial des éléments à révéler au scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Variantes directionnelles */
.reveal.from-left  { transform: translateX(-32px); }
.reveal.from-right { transform: translateX(32px); }
.reveal.zoom-in    { transform: scale(.96); }
.reveal.from-left.is-visible,
.reveal.from-right.is-visible,
.reveal.zoom-in.is-visible { transform: none; }

/* Délais d'apparition échelonnés (stagger) pour les grilles */
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }

/* Header : ombre + opacité accrue une fois scrollé */
.site-header { transition: background .3s ease, box-shadow .3s ease; }
.site-header.scrolled {
  background: color-mix(in oklab, var(--background) 96%, transparent);
  box-shadow: 0 4px 24px -12px rgba(0,0,0,.25);
}

/* Parallax hero : zoom/translation pilotés en JS via --py */
.hero > img { will-change: transform; transform: translateY(var(--py, 0px)) scale(1.06); }

/* Micro-interaction : élévation douce au survol des cartes */
.card-img, .value-card, .support-card, .stat-card,
.comp-card, .info-card, .impact-card, .tile {
  transition: transform .3s cubic-bezier(.22,.61,.36,1),
              box-shadow .3s cubic-bezier(.22,.61,.36,1);
}
.card-img:hover, .value-card:hover, .support-card:hover,
.comp-card:hover, .info-card:hover, .impact-card:hover, .tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -22px rgba(28,40,54,.45);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -20px rgba(28,40,54,.4); }

/* Boutons : ressort léger + ombre à l'appui */
.btn-primary, .btn-white, .btn-outline, .btn-ghost-white {
  transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary:active, .btn-white:active, .btn-outline:active, .btn-ghost-white:active { transform: translateY(1px) scale(.985); }

/* Zoom doux des images dans les cartes au survol */
.card-img > img, .comp-card > img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.card-img:hover > img, .comp-card:hover > img { transform: scale(1.05); }

/* Liens de navigation : soulignement animé */
.nav-desktop a.nav-link { position: relative; }
.nav-desktop a.nav-link::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem;
  height: 2px; background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav-desktop a.nav-link:hover::after,
.nav-desktop a.nav-link.active::after { transform: scaleX(1); }

/* Pastille / badge hero : légère pulsation d'entrée */
@keyframes pop-in { 0% { opacity:0; transform: translateY(10px) scale(.96);} 100% { opacity:1; transform:none; } }
.hero-content .pill { animation: pop-in .6s cubic-bezier(.22,.61,.36,1) both; }
.hero-content .hero-title { animation: pop-in .7s .1s cubic-bezier(.22,.61,.36,1) both; }
.hero-content .hero-lead  { animation: pop-in .7s .2s cubic-bezier(.22,.61,.36,1) both; }
.hero-content .hero-actions { animation: pop-in .7s .3s cubic-bezier(.22,.61,.36,1) both; }

/* Galerie impact : zoom doux au survol (déjà présent, on renforce la transition) */
.gallery img { transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }

/* Accessibilité : on désactive tout si l'utilisateur préfère moins d'animations */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero > img { transform: scale(1.04) !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}