{% load static %}
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>ESSIG — École Supérieure des Sciences de l'Ingénierie et de la Gestion </title>
  <link rel="shortcut icon" type="image/jpeg" href="{% static 'img/logo-removebg-preview.png' %}">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap" rel="stylesheet"/>
  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <!-- Bootstrap Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet"/>

  <style>
  /* ═══════════════════════════════════════════
     ROOT & RESET
  ═══════════════════════════════════════════ */
  :root {
    --primary:    #205397;
    --accent:     #e90707;
    --dark:       #0f1923;
    --dark-mid:   #1a2a3a;
    --light-blue: #4A90E2;
    --white:      #FFFFFF;
    --bg:         #f0f4f9;
    --font-d: 'Playfair Display', serif;
    --font-b: 'DM Sans', sans-serif;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: var(--font-b); background: var(--bg); color: var(--dark); overflow-x: hidden; }

  /* ═══════════════════════════════════════════
     ANIMATIONS
  ═══════════════════════════════════════════ */
  @keyframes fadeUp   { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
  @keyframes fadeLeft { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
  @keyframes fadeRight{ from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
  @keyframes pulse    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
  @keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
  @keyframes spin     { from{transform:rotate(0)} to{transform:rotate(360deg)} }

  .anim-up   { opacity:0; animation: fadeUp   0.75s ease forwards; }
  .anim-left { opacity:0; animation: fadeLeft  0.75s ease forwards; }
  .anim-right{ opacity:0; animation: fadeRight 0.75s ease forwards; }
  .d1{animation-delay:.1s} .d2{animation-delay:.2s} .d3{animation-delay:.35s}
  .d4{animation-delay:.5s} .d5{animation-delay:.65s}

  /* scroll-reveal */
  .reveal { opacity:0; transform:translateY(30px); transition: opacity .65s ease, transform .65s ease; }
  .reveal.visible { opacity:1; transform:translateY(0); }

  /* ═══════════════════════════════════════════
     SHARED COMPONENTS
  ═══════════════════════════════════════════ */
  .section-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: .75rem;
  }
  .section-eyebrow::before {
    content: ''; width: 28px; height: 2px;
    background: var(--accent); border-radius: 2px;
  }
  .section-heading {
    font-family: var(--font-d); font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900; line-height: 1.15; color: var(--dark);
  }
  .section-heading span { color: var(--primary); }
  .section-divider {
    width: 44px; height: 3px;
    background: var(--accent); border-radius: 2px;
    margin: .75rem 0 0;
  }
  .btn-primary-essig {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--primary); color: #fff;
    padding: 12px 28px; border-radius: 50px;
    font-size: 14px; font-weight: 600;
    text-decoration: none; border: none; cursor: pointer;
    transition: background .25s, transform .25s, box-shadow .25s;
    box-shadow: 0 6px 22px rgba(32,83,151,.32);
  }
  .btn-primary-essig:hover { background:#1a4480; color:#fff; transform:translateY(-2px); box-shadow:0 10px 28px rgba(32,83,151,.4); }
  .btn-accent-essig {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--accent); color: #fff;
    padding: 12px 28px; border-radius: 50px;
    font-size: 14px; font-weight: 600;
    text-decoration: none; border: none; cursor: pointer;
    transition: background .25s, transform .25s, box-shadow .25s;
    box-shadow: 0 6px 22px rgba(233,7,7,.3);
  }
  .btn-accent-essig:hover { background:#c50606; color:#fff; transform:translateY(-2px); }
  .btn-outline-essig {
    display: inline-flex; align-items: center; gap: 9px;
    background: transparent; color: #fff;
    padding: 11px 26px; border-radius: 50px;
    font-size: 14px; font-weight: 600;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,.6);
    transition: background .25s, border-color .25s, color .25s, transform .25s;
  }
  .btn-outline-essig:hover { background:#fff; color:var(--primary); border-color:#fff; transform:translateY(-2px); }

  /* ═══════════════════════════════════════════
     ①  HERO
  ═══════════════════════════════════════════ */
  .hero {
    position: relative;
    min-height: 100svh;
    background: linear-gradient(145deg, #fdf7f0 0%, #f3eef5 45%, #eaf0f9 100%);
    display: flex; align-items: center;
    overflow: hidden;
    padding: 120px 0 0;
  }
  /* Diagonale bleue */
  .hero::after {
    content: '';
    position: absolute; top:0; right:0;
    width: 58%; height: 100%;
    background: repeating-linear-gradient(
      -52deg,
      rgba(32,83,151,.06) 0px,
      rgba(32,83,151,.06) 16px,
      transparent 16px, transparent 40px
    );
    clip-path: polygon(18% 0%,100% 0%,100% 100%,0% 100%);
    pointer-events: none;
  }
  .hero-blob-tl {
    position: absolute; top:-60px; left:-60px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, #e8c99a 30%, transparent 70%);
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    opacity: .45; pointer-events: none;
  }
  .hero-dots {
    position: absolute; top:80px; right:28%;
    width: 86px; height: 86px;
    background-image: radial-gradient(circle, rgba(233,7,7,.4) 1.5px, transparent 1.5px);
    background-size: 9px 9px;
    border-radius: 50%; pointer-events: none;
  }
  .hero-ring {
    position: absolute; bottom:-100px; left:36%;
    width: 300px; height: 300px;
    border: 48px solid rgba(32,83,151,.06);
    border-radius: 50%; pointer-events: none;
  }
  .hero-content { position: relative; z-index: 3; }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--primary); font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: 1.25rem;
  }
  .hero-eyebrow-line { width: 32px; height: 2.5px; background: var(--primary); border-radius: 2px; }
  .hero-title {
    font-family: var(--font-d);
    font-size: clamp(1.4rem, 1.5vw, rem);
    font-weight: 900; line-height: 1.08;
    color: var(--dark); margin-bottom: 1.25rem;
  }
  .hero-title .hl { color: var(--primary); }
  .hero-desc {
    font-size: 15.5px; color: #555; line-height: 1.8;
    max-width: 480px; margin-bottom: 2.25rem;
  }
  .hero-desc strong { color: var(--primary); }
  .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

  /* stats floats */
  .hero-stats {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    margin-top: 3rem;
  }
  .hstat {
    display: flex; flex-direction: column;
    gap: 2px;
  }
  .hstat-n {
    font-family: var(--font-d); font-size: 1.8rem; font-weight: 900;
    color: var(--dark); line-height: 1;
  }
  .hstat-n span { color: var(--accent); }
  .hstat-l { font-size: 11px; color: #888; letter-spacing: 1px; text-transform: uppercase; }
  .hstat-sep { width: 1px; background: #d5dfe8; align-self: stretch; margin: 4px 0; }

  /* hero image column — IMAGE POUSSÉE VERS LE HAUT */
  .hero-img-col {
    position: relative; z-index: 3;
    display: flex; justify-content: flex-end;
    align-items: flex-start;       /* ancienne valeur : flex-end → maintenant flex-start = vers le haut */
    padding-bottom: 0;
    padding-top: 0;                /* on supprime tout padding top pour coller au sommet */
    margin-top: -60px;             /* remonte la colonne image par rapport au conteneur flex */
  }
  .hero-img-wrap {
    position: relative;
    width: 100%;
  }
  .hero-img {
    width: 100%; height: auto;
    display: block; object-fit: contain;
    object-position: top right;    /* ancienne valeur : bottom right → top right */
    filter: drop-shadow(0 30px 60px rgba(32,83,151,.14));
    animation: float 5s ease-in-out infinite;
  }
  .hero-badge-float {
    position: absolute; bottom: 30px; left: -20px;
    background: var(--dark); color: #fff;
    border-radius: 14px; padding: 14px 18px;
    box-shadow: 0 14px 36px rgba(0,0,0,.3);
    display: flex; align-items: center; gap: 12px;
    min-width: 190px;
  }
  .hero-badge-float .icon-wrap {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff; flex-shrink: 0;
  }
  .hero-badge-float .text p { margin: 0; }
  .hero-badge-float .text .n { font-size: 18px; font-weight: 800; color: #fff; line-height: 1; }
  .hero-badge-float .text .l { font-size: 11px; color: rgba(255,255,255,.5); }

  /* ═══════════════════════════════════════════
     ②  STATS BAR
  ═══════════════════════════════════════════ */
  .stats-strip {
    background: var(--dark); padding: 1.4rem 0;
    border-bottom: 3px solid var(--accent);
  }
  .sstrip-item { text-align: center; padding: .5rem 1rem; border-right: 1px solid rgba(255,255,255,.08); }
  .sstrip-item:last-child { border-right: none; }
  .sstrip-n { font-family: var(--font-d); font-size: 1.9rem; font-weight: 700; color:#fff; line-height:1; }
  .sstrip-n span { color: var(--accent); }
  .sstrip-l { font-size: 11px; color: rgba(255,255,255,.42); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; }

  /* ═══════════════════════════════════════════
     ③  MOT DU DIRECTEUR
  ═══════════════════════════════════════════ */
  .directeur-section { padding: 6rem 0; background: #fff; }
  .directeur-photo-wrap {
    position: relative;
  }
  .directeur-photo-frame {
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    border-radius: 24px; padding: 10px;
    box-shadow: 0 24px 56px rgba(0,0,0,.15);
  }
  .directeur-photo-frame img {
    width: 100%; border-radius: 16px; display: block;
    object-fit: cover; transition: transform .5s;
  }
  .directeur-photo-frame:hover img { transform: scale(1.02); }
  .dir-badge {
    position: absolute; bottom: 24px; right: -16px;
    background: var(--accent); color: #fff;
    border-radius: 14px; padding: 12px 18px;
    box-shadow: 0 10px 28px rgba(233,7,7,.3);
    text-align: center;
  }
  .dir-badge .n { font-size: 18px; font-weight: 800; line-height: 1; }
  .dir-badge .l { font-size: 11px; opacity: .8; }
  .dir-deco1 { position: absolute; top:-18px; left:-18px; width:72px; height:72px; background:rgba(32,83,151,.08); border-radius:50%; }
  .dir-deco2 { position: absolute; bottom:-18px; left:24px; width:52px; height:52px; background:rgba(233,7,7,.08); border-radius:50%; }

  .dir-quote-icon { font-size: 3rem; color: var(--primary); opacity: .18; margin-bottom: .5rem; line-height: 1; }
  .dir-body p { font-size: 15px; line-height: 1.8; color: #555; margin-bottom: 1rem; }
  .dir-body strong { color: var(--primary); }
  .dir-mission {
    background: linear-gradient(135deg,rgba(32,83,151,.04),rgba(74,144,226,.06));
    border-radius: 16px; padding: 1.5rem;
    display: flex; gap: 1rem; align-items: flex-start;
    border-left: 3px solid var(--primary);
    margin-top: 1.5rem;
  }
  .dir-mission-icon {
    width: 46px; height: 46px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
  }
  .dir-mission h5 { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: .4rem; }
  .dir-mission p { font-size: 13.5px; color: #555; margin: 0; line-height: 1.6; }

  /* ═══════════════════════════════════════════
     ④  PARCOURS / FORMATIONS
  ═══════════════════════════════════════════ */
  .parcours-section {
    display: flex; align-items: stretch;
    min-height: 100vh;
    background: #f0f4f9;
    position: relative;
  }
  .parcours-left {
    width: 40%; flex-shrink: 0;
    position: sticky; top: 0;
    height: 100vh;
    overflow: hidden;
  }
  .parcours-left::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1400&q=80");
    background-size: cover; background-position: center;
    z-index: 0;
  }
  .parcours-left::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(15,25,35,.2) 0%, rgba(15,25,35,.55) 100%);
    z-index: 1;
  }
  .parcours-left-content {
    position: relative; z-index: 2;
    height: 100%; display: flex; flex-direction: column;
    justify-content: flex-end; padding: 3rem 2.5rem;
  }
  .parcours-left-content .section-eyebrow { color: rgba(255,255,255,.6); }
  .parcours-left-content .section-eyebrow::before { background: rgba(255,255,255,.4); }
  .parcours-left-content h2 { font-family: var(--font-d); font-size: 2.4rem; font-weight: 900; color:#fff; line-height:1.1; }
  .parcours-left-content p { color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.7; margin-top: .75rem; }

  .parcours-right {
    flex: 1; padding: 4rem 3rem 5rem;
    background: #f0f4f9;
  }

  /* card parcours */
  .pcard {
    background: var(--dark); border-radius: 16px;
    margin-bottom: 1.5rem; overflow: hidden;
    box-shadow: 0 8px 32px rgba(15,25,35,.22);
    transition: transform .3s, box-shadow .3s;
  }
  .pcard:hover { transform: translateY(-5px); box-shadow: 0 18px 52px rgba(15,25,35,.3); }
  .pcard-inner { display: flex; align-items: stretch; }
  .pcard-info {
    flex: 0 0 240px; padding: 2rem 1.75rem;
    display: flex; flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.06);
  }
  .pcard-icon {
    width: 46px; height: 46px; border-radius: 12px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--light-blue);
    margin-bottom: 1rem;
  }
  .pcard-title { font-family: var(--font-d); font-size: 1.4rem; font-weight: 900; color:#fff; margin-bottom: .3rem; line-height:1.15; }
  .pcard-duration { color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .75rem; }
  .pcard-desc { color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.65; flex: 1; margin-bottom: 1.25rem; }
  .pcard-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--accent); color: #fff;
    padding: 9px 20px; border-radius: 40px;
    font-size: 12px; font-weight: 700; letter-spacing: .05em;
    text-decoration: none; text-transform: uppercase;
    transition: background .2s, transform .2s;
    align-self: flex-start;
  }
  .pcard-btn:hover { background: #c40606; color:#fff; transform:translateY(-2px); }

  .pcard-list { flex: 1; padding: 2rem 1.75rem; background: rgba(255,255,255,.025); }
  .pcard-list ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 9px 20px; align-content: start;
  }
  .pcard-list ul li {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 12px; font-weight: 500; line-height: 1.4;
    color: rgba(255,255,255,.78); text-transform: uppercase; letter-spacing: .02em;
  }
  .pcard-list ul li i { color: var(--accent); font-size: 11px; margin-top: 2px; flex-shrink: 0; }

  .parcours-cta { text-align: center; margin-top: 2.5rem; }

  /* ═══════════════════════════════════════════
     ⑤  POURQUOI ESSIG
  ═══════════════════════════════════════════ */
  .why-section {
    padding: 7rem 0;
    background-image:
      linear-gradient(135deg, rgba(10,17,27,.88), rgba(10,17,27,.82)),
      url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=1600&h=900&fit=crop');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative; overflow: hidden;
  }
  .why-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--logo-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 500px;
    opacity: .04; pointer-events: none;
  }
  .why-card {
    background: rgba(255,255,255,.93);
    border-radius: 20px; padding: 2.5rem 2rem;
    text-align: center; height: 100%;
    transition: transform .3s, box-shadow .3s;
    border: 1px solid rgba(255,255,255,.2);
  }
  .why-card:hover { transform: translateY(-10px); box-shadow: 0 24px 50px rgba(0,0,0,.25); background: #fff; }
  .why-icon {
    width: 88px; height: 88px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--light-blue));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 24px rgba(32,83,151,.28);
    font-size: 2.4rem; color: #fff;
  }
  .why-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--dark); margin-bottom: .75rem; }
  .why-card p { font-size: 14px; color: #555; line-height: 1.7; margin: 0; }

  .why-cta-banner {
    background: rgba(255,255,255,.12); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 28px; padding: 2.5rem;
    margin-top: 4rem;
  }
  .why-cta-banner h4 { font-weight: 700; color: #fff; margin-bottom: .25rem; font-size: 1.15rem; }
  .why-cta-banner p { color: rgba(255,255,255,.75); margin: 0; font-size: 14px; }

  /* ═══════════════════════════════════════════
     ⑥  ACTUALITÉS
  ═══════════════════════════════════════════ */
  .actu-section { padding: 7rem 0; background: #fff; }
  .news-card {
    background: #fff; border-radius: 20px; overflow: hidden;
    border: 1px solid #e8edf5;
    box-shadow: 0 5px 20px rgba(0,0,0,.05);
    transition: transform .3s, box-shadow .3s;
    height: 100%; display: flex; flex-direction: column;
    position: relative;
  }
  .news-card:hover { transform: translateY(-8px); box-shadow: 0 20px 45px rgba(0,0,0,.1); }
  .news-card:hover .news-thumb img { transform: scale(1.05); }
  .news-date-badge {
    position: absolute; top: 18px; left: 18px; z-index: 2;
    border-radius: 12px; padding: 8px 14px;
    text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.2);
    min-width: 52px;
  }
  .news-date-badge .day { font-size: 1.25rem; font-weight: 900; color: #fff; display: block; line-height: 1; }
  .news-date-badge .mo  { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.85); display: block; text-transform: uppercase; }
  .news-thumb { height: 200px; overflow: hidden; }
  .news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
  .news-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
  .news-meta { display: flex; gap: 1rem; font-size: 12px; color: var(--primary); margin-bottom: .75rem; }
  .news-meta i { margin-right: 4px; }
  .news-body h3 { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: .6rem; line-height: 1.3; }
  .news-body p { font-size: 13.5px; color: #666; line-height: 1.65; flex: 1; margin-bottom: 1.25rem; }
  .news-footer { display: flex; justify-content: space-between; align-items: center; }
  .news-tag { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px; background: #eef3fb; color: var(--primary); }
  .news-link { font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; transition: gap .2s; display: flex; align-items: center; gap: 5px; }
  .news-link:hover { gap: 9px; color: var(--primary); }

  /* ═══════════════════════════════════════════
     ⑦  CTA FINAL
  ═══════════════════════════════════════════ */
  .cta-section {
    padding: 6rem 0;
    background-image: linear-gradient(135deg, rgba(10,17,27,.93), rgba(10,17,27,.88)),
      url('{% static "img/cta.jpg" %}');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
  }
  .cta-section::before {
    content:''; position:absolute; top:-60px; right:-60px;
    width:260px; height:260px;
    background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
    border-radius: 50%; pointer-events:none;
  }
  .cta-section::after {
    content:''; position:absolute; bottom:-50px; left:-50px;
    width:220px; height:220px;
    background: radial-gradient(circle, rgba(233,7,7,.1) 0%, transparent 70%);
    border-radius: 50%; pointer-events:none;
  }
  .cta-inner { position: relative; z-index: 2; text-align: center; }
  .cta-inner h2 { font-family: var(--font-d); font-size: clamp(1.8rem,4vw,2.8rem); font-weight:900; color:#fff; margin-bottom:1rem; }
  .cta-inner h2 em { font-style:normal; color:var(--accent); }
  .cta-inner p { font-size: 15.5px; color:rgba(255,255,255,.8); max-width:520px; margin:0 auto 2.5rem; line-height:1.7; }
  .cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
  .cta-contact { margin-top: 2rem; font-size: 13px; color:rgba(255,255,255,.55); }
  .cta-contact i { margin: 0 3px; }

  /* ═══════════════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════════════ */
  @media (max-width: 991px) {
    .hero { padding: 100px 0 40px; }
    .hero-img-col {
      margin-top: 0;
      align-items: flex-start;
    }
    .hero-img-wrap { margin-top: 2rem; }
    .hero-badge-float { left:0; }
    .parcours-section { flex-direction: column; }
    .parcours-left { width: 100%; height: 320px; position: relative; }
    .parcours-right { padding: 2.5rem 1.5rem 4rem; }
    .pcard-inner { flex-direction: column; }
    .pcard-info { flex: none; border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
    .pcard-list ul { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 768px) {
    .why-section { background-attachment: scroll; }
    .cta-section { background-attachment: scroll; }
    .sstrip-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
    .sstrip-item:last-child { border-bottom: none; }
  }
  @media (max-width: 576px) {
    .hero-title { font-size: 2.2rem; }
    .hero-btns { flex-direction: column; }
    .hero-img-wrap { display: none; }
    .pcard-list ul { grid-template-columns: 1fr; }
    .dir-badge { right:0; }
    .parcours-right { padding: 2rem 1rem 3rem; }
  }
  </style>
</head>
<body>

{% include 'includes/navbar.html' %}

<main>

<!-- ═══════════════════════════════════════════
     ①  HERO
═══════════════════════════════════════════ -->
<section class="hero">
  <div class="hero-blob-tl"></div>
  <div class="hero-dots"></div>
  <div class="hero-ring"></div>

  <div class="container">
    <div class="row align-items-stretch">

      <!-- LEFT -->
      <div class="col-lg-6 hero-content d-flex flex-column justify-content-center">
        <div class="hero-eyebrow anim-left">
          <span class="hero-eyebrow-line"></span>
          L'EXPÉRIENCE AU SERVICE DE L'ÉDUCATION
        </div>
        <h1 class="hero-title anim-up d1">
          Former aujourd'hui les<br>
          <span class="hl">professionnels</span> de demain
        </h1>
        <p class="hero-desc anim-up d2">
          Construit avec <strong>+36 ans d'expérience</strong>, l'ESSIG prône un enseignement
          d'excellence dans un cadre propice aux études, formant des compétences
          parmi les plus recherchées sur le marché de l'emploi.
        </p>
      </div>

      <!-- RIGHT — image poussée vers le haut -->
      <div class="col-lg-6 hero-img-col anim-right d2">
        <div class="hero-img-wrap">
          <img src="{% static 'img/hero.png' %}" alt="Étudiante diplômée ESSIG" class="hero-img"/>
          <div class="hero-badge-float">
            <div class="icon-wrap"><i class="bi bi-mortarboard-fill"></i></div>
            <div class="text">
              <p class="n">95%</p>
              <p class="l">Taux d'insertion</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════
     ②  STATS STRIP
═══════════════════════════════════════════ -->
<div class="stats-strip">
  <div class="container">
    <div class="row g-0">
      <div class="col-6 col-md-3">
        <div class="sstrip-item reveal">
          <div class="sstrip-n">5<span>+</span></div>
          <div class="sstrip-l">Parcours de formation</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="sstrip-item reveal">
          <div class="sstrip-n">BAC<span>+5</span></div>
          <div class="sstrip-l">Niveau maximal</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="sstrip-item reveal">
          <div class="sstrip-n">20<span>+</span></div>
          <div class="sstrip-l">Filières disponibles</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="sstrip-item reveal">
          <div class="sstrip-n">100<span>%</span></div>
          <div class="sstrip-l">Pratique & Terrain</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ═══════════════════════════════════════════
     ③  MOT DU DIRECTEUR
═══════════════════════════════════════════ -->
<section class="directeur-section" id="directeur">
  <div class="container">
    <!-- header -->
    <div class="text-center mb-5 reveal">
      <div class="section-eyebrow" style="justify-content:center">Mot du Directeur</div>
      <h2 class="section-heading">Une vision, une mission, <span>une excellence</span></h2>
      <div class="section-divider mx-auto"></div>
    </div>

    <div class="row align-items-center g-5">
      <!-- PHOTO -->
      <div class="col-lg-5 reveal">
        <div class="directeur-photo-wrap">
          <div class="dir-deco1"></div>
          <div class="dir-deco2"></div>
          <div class="directeur-photo-frame">
            <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=1200&auto=format&fit=crop" alt="Directeur ESSIG"/>
          </div>
          <div class="dir-badge">
            <div class="n">+36</div>
            <div class="l">ans d'excellence</div>
          </div>
        </div>
      </div>

      <!-- TEXTE -->
      <div class="col-lg-7 reveal">
        <div class="dir-body">
          <div class="dir-quote-icon"><i class="bi bi-quote"></i></div>
          <p><strong>Chers futurs étudiants, chers parents,</strong></p>
          <p>
            Bienvenue à <strong>l'ESSIG</strong>, une institution qui incarne l'excellence,
            l'innovation et l'entrepreneuriat. Notre conviction est simple mais puissante&nbsp;:
            <strong>« Un étudiant, une micro-entreprise »</strong>. Nous ne formons pas seulement
            des diplômés, nous formons des battants prêts à conquérir le monde professionnel.
          </p>
          <p>
            Chez l'ESSIG, chaque étudiant est accompagné pour développer son propre projet
            entrepreneurial. Notre pédagogie unique allie théorie de pointe et pratique terrain,
            avec des mentors expérimentés et un réseau de partenaires prestigieux.
            Ensemble, nous bâtissons l'Afrique de demain.
          </p>
          <div class="dir-mission">
            <div class="dir-mission-icon"><i class="bi bi-bullseye"></i></div>
            <div>
              <h5>Notre Mission</h5>
              <p>
                Former des professionnels compétents, innovants et entrepreneurs, capables
                de créer de la valeur ajoutée et de contribuer au développement économique
                et social de leur pays.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════
     ④  NOS PARCOURS
═══════════════════════════════════════════ -->
<section class="parcours-section" id="formations">

  <!-- COLONNE GAUCHE sticky -->
  <div class="parcours-left">
    <div class="parcours-left-content">
      <div class="section-eyebrow">Cursus disponibles</div>
      <h2>Nos<br>Parcours</h2>
      <p>Du cycle préparatoire au Master professionnel, l'ESSIG vous accompagne à chaque étape de votre parcours académique.</p>
    </div>
  </div>

  <!-- COLONNE DROITE scrollable -->
  <div class="parcours-right">

    <!-- ── CLASSE PRÉPARATOIRE ── -->
    <div class="pcard reveal">
      <div class="pcard-inner">
        <div class="pcard-info">
          <div class="pcard-icon"><i class="bi bi-stars"></i></div>
          <h3 class="pcard-title">Classe Préparatoire</h3>
          <p class="pcard-duration">Durée : 2 an</p>
          <p class="pcard-desc">
            Année de consolidation et de mise à niveau académique pour intégrer sereinement
            les formations supérieures de l'ESSIG.
          </p>
          <a href="{% url 'classe_preparatoire' %}" class="pcard-btn">En savoir plus <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="pcard-list">
          <ul>
            <li><i class="bi bi-check2"></i> Mathématiques & Algorithmique</li>
            <li><i class="bi bi-check2"></i> Expression écrite & orale</li>
            <li><i class="bi bi-check2"></i> Initiation à l'informatique</li>
            <li><i class="bi bi-check2"></i> Anglais professionnel</li>
            <li><i class="bi bi-check2"></i> Méthodologie universitaire</li>
            <li><i class="bi bi-check2"></i> Culture générale & citoyenneté</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- ── BTS ── -->
    <div class="pcard reveal">
      <div class="pcard-inner">
        <div class="pcard-info">
          <div class="pcard-icon"><i class="bi bi-patch-check"></i></div>
          <h3 class="pcard-title">BTS</h3>
          <p class="pcard-duration">Durée : 2 ans</p>
          <p class="pcard-desc">
            Travaillez le jour, étudiez le soir. Obtenez votre Brevet de Technicien Supérieur
            avec une formation pratique et professionnelle adaptée au marché de l'emploi.
          </p>
          <a href="{% url 'bts' %}" class="pcard-btn">En savoir plus <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="pcard-list">
          <ul>
            <li><i class="bi bi-check2"></i> Génie Logiciel</li>
            <li><i class="bi bi-check2"></i> Systèmes & Réseaux</li>
            <li><i class="bi bi-check2"></i> Comptabilité & Gestion</li>
            <li><i class="bi bi-check2"></i> Assistant Administratif</li>
            <li><i class="bi bi-check2"></i> Transport & Logistique</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- ── LICENCE ── -->
    <div class="pcard reveal">
      <div class="pcard-inner">
        <div class="pcard-info">
          <div class="pcard-icon"><i class="bi bi-mortarboard"></i></div>
          <h3 class="pcard-title">Licence</h3>
          <p class="pcard-duration">Durée : 3 ans · 180 crédits</p>
          <p class="pcard-desc">
            Programme de 3 ans réparti en 6 semestres de 30 crédits chacun,
            conjuguant théorie et mises en situation professionnelle.
          </p>
          <a href="{% url 'licence' %}" class="pcard-btn">En savoir plus <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="pcard-list">
          <ul>
            <li><i class="bi bi-check2"></i> IA & Big Data</li>
            <li><i class="bi bi-check2"></i> Systèmes & Réseaux</li>
            <li><i class="bi bi-check2"></i> Génie Logiciel</li>
            <li><i class="bi bi-check2"></i> Génie Civil</li>
            <li><i class="bi bi-check2"></i> Génie Électrique</li>
            <li><i class="bi bi-check2"></i> Logistique & Transport</li>
            <li><i class="bi bi-check2"></i> Comptabilité Finance</li>
            <li><i class="bi bi-check2"></i> Gestion Commerciale</li>
            <li><i class="bi bi-check2"></i> Communication Digitale</li>
            <li><i class="bi bi-check2"></i> Publicité & Arts Graphiques</li>
            <li><i class="bi bi-check2"></i> Assistant Administratif</li>
            <li><i class="bi bi-check2"></i> Communication des Orgs</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- ── MASTER ── -->
    <div class="pcard reveal">
      <div class="pcard-inner">
        <div class="pcard-info">
          <div class="pcard-icon"><i class="bi bi-award"></i></div>
          <h3 class="pcard-title">Master</h3>
          <p class="pcard-duration">Durée : 2 ans · 4 semestres</p>
          <p class="pcard-desc">
            Formation de haut niveau orientée vers l'expertise sectorielle et
            le leadership en entreprise ou en recherche appliquée.
          </p>
          <a href="{% url 'master' %}" class="pcard-btn">En savoir plus <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="pcard-list">
          <ul>
            <li><i class="bi bi-check2"></i> Génie Logiciel</li>
            <li><i class="bi bi-check2"></i> Systèmes & Réseaux</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- CTA -->
    <div class="parcours-cta reveal">
      <a href="{% url 'formations' %}" class="btn-primary-essig" style="font-size:15px; padding:14px 36px;">
        <i class="bi bi-grid-3x3-gap"></i> Voir toutes nos formations
      </a>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════
     ⑤  POURQUOI ESSIG
═══════════════════════════════════════════ -->
<section class="why-section">
  <div class="container">
    <!-- header -->
    <div class="text-center mb-5 reveal">
      <div class="section-eyebrow" style="justify-content:center; color:rgba(255,255,255,.5);">Pourquoi ESSIG ?</div>
      <h2 class="section-heading" style="color:#fff;">Pourquoi nous <em style="font-style:normal;color:var(--accent);">choisir</em> ?</h2>
      <div class="section-divider mx-auto"></div>
    </div>

    <div class="row g-4 justify-content-center">
      <div class="col-lg-4 col-md-6 reveal">
        <div class="why-card">
          <div class="why-icon"><i class="bi bi-translate"></i></div>
          <h3>Enseignement Bilingue</h3>
          <p>Cours en français et anglais avec certification internationale pour une meilleure employabilité à l'international.</p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 reveal">
        <div class="why-card">
          <div class="why-icon"><i class="bi bi-trophy"></i></div>
          <h3>Activités Sportives</h3>
          <p>Complexe sportif moderne, équipes compétitives et activités extrascolaires pour un équilibre corps-esprit.</p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 reveal">
        <div class="why-card">
          <div class="why-icon"><i class="bi bi-laptop"></i></div>
          <h3>Outils Numériques</h3>
          <p>Plateforme e-learning, laboratoires informatiques et bibliothèque numérique accessible 24h/24.</p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 reveal">
        <div class="why-card">
          <div class="why-icon"><i class="bi bi-briefcase"></i></div>
          <h3>Stages en Entreprise</h3>
          <p>Un réseau dense de 50+ entreprises partenaires pour des stages immersifs dès la première année.</p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 reveal">
        <div class="why-card">
          <div class="why-icon"><i class="bi bi-person-badge"></i></div>
          <h3>Experts Encadrants</h3>
          <p>Professeurs issus du monde professionnel et académique pour un enseignement ancré dans la réalité.</p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 reveal">
        <div class="why-card">
          <div class="why-icon"><i class="bi bi-graph-up-arrow"></i></div>
          <h3>Insertion Rapide</h3>
          <p>95% de nos diplômés trouvent un emploi dans les 6 mois suivant l'obtention de leur diplôme.</p>
        </div>
      </div>
    </div>

    <!-- CTA banner -->
    <div class="why-cta-banner reveal">
      <div class="row align-items-center">
        <div class="col-md-8 text-md-start text-center mb-3 mb-md-0">
          <h4><i class="bi bi-mortarboard-fill" style="color:var(--accent);margin-right:10px;"></i>
            Une école qui vous accompagne vers la réussite</h4>
          <p>Rejoignez une communauté dynamique, bienveillante et tournée vers l'excellence.</p>
        </div>
        <div class="col-md-4 text-md-end text-center">
          <a href="#" class="btn-accent-essig">
            <i class="bi bi-calendar-check"></i> Visiter notre campus
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════
     ⑥  ACTUALITÉS & ÉVÉNEMENTS
═══════════════════════════════════════════ -->
<section class="actu-section">
  <div class="container">
    <div class="text-center mb-5 reveal">
      <div class="section-eyebrow" style="justify-content:center">Actualités</div>
      <h2 class="section-heading">Actualités &amp; <span>Événements</span></h2>
      <div class="section-divider mx-auto"></div>
      <p style="color:#666; max-width:520px; margin:1rem auto 0; font-size:14.5px;">Restez connectés avec la vie dynamique de notre campus.</p>
    </div>

    <div class="row g-4">
      <!-- Card 1 -->
      <div class="col-lg-4 col-md-6 reveal">
        <div class="news-card">
          <div class="news-date-badge" style="background:var(--accent);">
            <span class="day">15</span><span class="mo">Mai</span>
          </div>
          <div class="news-thumb">
            <img src="https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=600&h=400&fit=crop" alt="Portes Ouvertes"/>
          </div>
          <div class="news-body">
            <div class="news-meta">
              <span><i class="bi bi-calendar3"></i>15 Mai 2026</span>
              <span><i class="bi bi-clock"></i>9h – 17h</span>
            </div>
            <h3>Journées Portes Ouvertes 2026</h3>
            <p>Venez découvrir notre campus, rencontrer nos professeurs et explorer toutes nos formations.</p>
            <div class="news-footer">
              <span class="news-tag"><i class="bi bi-geo-alt me-1"></i>Campus Principal</span>
              <a href="#" class="news-link">S'inscrire <i class="bi bi-arrow-right"></i></a>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="col-lg-4 col-md-6 reveal">
        <div class="news-card">
          <div class="news-date-badge" style="background:var(--primary);">
            <span class="day"><i class="bi bi-mortarboard" style="font-size:1.1rem;"></i></span>
          </div>
          <div class="news-thumb">
            <img src="https://images.unsplash.com/photo-1606761568499-6d2451b23c66?w=600&h=400&fit=crop" alt="Bachelor IA"/>
          </div>
          <div class="news-body">
            <div class="news-meta">
              <span><i class="bi bi-calendar3"></i>10 Avr 2026</span>
              <span><i class="bi bi-person"></i>Administration</span>
            </div>
            <h3>Nouveau programme : Bachelor en Intelligence Artificielle</h3>
            <p>L'ESSIG lance une nouvelle formation innovante pour former les experts en IA de demain.</p>
            <div class="news-footer">
              <span class="news-tag"><i class="bi bi-tag me-1"></i>Innovation</span>
              <a href="#" class="news-link">Lire plus <i class="bi bi-arrow-right"></i></a>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="col-lg-4 col-md-6 reveal">
        <div class="news-card">
          <div class="news-date-badge" style="background:linear-gradient(135deg,var(--primary),var(--light-blue));">
            <span class="day">25</span><span class="mo">Juin</span>
          </div>
          <div class="news-thumb">
            <img src="https://images.unsplash.com/photo-1523580494863-6f3031224c94?w=600&h=400&fit=crop" alt="Fête fin d'année"/>
          </div>
          <div class="news-body">
            <div class="news-meta">
              <span><i class="bi bi-calendar3"></i>25 Juin 2026</span>
              <span><i class="bi bi-clock"></i>18h – 23h</span>
            </div>
            <h3>Grande Fête de Fin d'Année ESSIG</h3>
            <p>Soirée mémorable avec animations, concerts et remise des prix aux meilleurs étudiants.</p>
            <div class="news-footer">
              <span class="news-tag"><i class="bi bi-music-note me-1"></i>Célébration</span>
              <a href="#" class="news-link">Participer <i class="bi bi-arrow-right"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="text-center mt-5 reveal">
      <a href="{% url 'blog' %}" class="btn-outline-essig" style="color:var(--primary); border-color:rgba(32,83,151,.35);">
        <i class="bi bi-eye"></i> Voir toutes les actualités
      </a>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════
     ⑦  CTA FINAL
═══════════════════════════════════════════ -->
<section class="cta-section">
  <div class="container">
    <div class="cta-inner reveal">
      <h2>Prêt à rejoindre <em>l'aventure ESSIG</em> ?</h2>
      <p>Inscrivez-vous dès maintenant ou planifiez une visite de notre campus pour découvrir nos installations et rencontrer notre équipe pédagogique.</p>
      <div class="cta-btns">
        <a href="#" class="btn-accent-essig" style="font-size:15px; padding:14px 36px;">
          <i class="bi bi-person-plus"></i> Inscrire mon enfant
        </a>
        <a href="#" class="btn-outline-essig" style="font-size:15px; padding:14px 36px;">
          <i class="bi bi-calendar-event"></i> Prendre rendez-vous
        </a>
      </div>
      <p class="cta-contact">
        <i class="bi bi-telephone"></i> +228 71 19 05 05 / 96 14 86 87
        &nbsp;·&nbsp;
        <i class="bi bi-envelope"></i> info@essig.tg
      </p>
    </div>
  </div>
</section>

</main>

{% include 'includes/footer.html' %}

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // Logo watermark
  const logoB64 = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCACvAb4DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9U6KKKACiiigAooooAKKKKACiiigAoqtqOp2ekWcl3f3UNlaxjLz3EgjRR7seBXzz8R/28/hj4FlmtdPu7nxXfRnayaUg8kH3lbCke67q7cNgsTjJcuHpuT8kcmIxdDCx5q81FebPo+m71DBcjcRkDPNfm78TP+CjPjbxGJbXwnptp4UtHXHnv/pV19QzAIP++CR61816h8UPF2peIF1y58UaxNrCH5L5r6UzJ7K27IHbAxX2eE4Mx1aPNXkqfZbv520X3nyuI4qwlOXLRi5+ey/Hc/biivzG+GH/AAUU8e+DWit/E0Nv4x05F25mxb3Q6Y/eqCD77lJPrX078Nf+Cg/wy8bzxWmsSXXg+9kO0HU1DW5Pp5yZA+rBRXi4zhzMcE25U+aK6x1/4P4HrYTPMDi7KM+V9np/wPxPp2iqelavY67YRX2m3tvqFnKMx3FrKskbj2ZSQaqV8001oz3k76oKKKKQwooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiqGt69pnhrT5L/V9RtNLsY/v3N7OsMa/VmIArxL4h/tufC3wGjR2+sHxNfbSVt9FAmXPbMpIQD6En2rsw+DxGLly4em5PyRy18VQw0eatNRXmz3yqWrazp+gWMl7qd9badZx8vcXUqxRr9WYgV+dHj//AIKIePdfuivhmzsvC9kMgZjF1O2ehZnG0Y9Av4mvnjxp8SvFPxFvftXiXX7/AFmUElRdTFkTP91PuqPYACvucHwTjq1pYmSgvvf+X4nx+L4uwdK6w8XN/cv8/wAD9JfG/wC3X8KvCJuYLPVLjxJfQ5UQ6XAzIzYOB5rYTHHUE18wfE3/AIKGeOfFO6DwpZ2/hCzIIMg23Vy3/A3XavHouR618pluOvH1/wA+9RNJ6k979+mr6V9ng+E8swbUpRdR/wB7T7tr/M+UxXEuYYrSMuRf3f8APc6LxX4/8SeNbx7rxHrl/rNwzElr25aUDPXaCcDpgDpXNGUn0P0/yKZ5h9c06yt7i/nSC1hluZnIVYokLsT6ADk19VGEKMeWmkl2WiPnZ1J1ZXm2/V3GGUj/ABpwkBHX8fSve/BP7C/xa8dRrcf2JH4esicPLrcotyVP92M/vCffZg9ia+kPhp/wTZ+HXhiGKfxnqN74xvgATBGetqenSNB5jDPZ2U+mOteTis2wOEv7SorrrX36nqYfLcZirKnTbXfZfifBwkJJz19f8/0pw9fpX6hfD39jf4S/C1ra60vwtDqGpRclCR0HIwM5AxjpX0db28NpAkMESQQoAqRxqFVR6ADpXyeK4vjFuOFp382/wBP+HPoqHD0npXqW9F/n/kfm/8As5f8E8rzx0Lfxb8QIbnQtOYB7bRBuiup1PTzD96JT6DLHH8Pr9vfD74WeFfhjpCad4X0W10a3AAkEEY8yQjP35PvMeSckk11NFfCY3MsVmcr1Z6dl0/4c+sw+CoYNWpR18+oUUUV55sCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAKmsaRZ6/ptzp2oW0d5Y3MTQzwSLlZEYEFSPcGuC+Cf7Pug/ArRprDSdQ1fUVuJPNkm1G5DiRhx8yqiqPyya9IorSnWqUoShCVlLc56tGnWkp1I3aPJ/G37K/gfx14vvPE2oQX8OsXW3zp7a9kj3bVCjI6dAOlcX8Qf2Gvh94v8P3Wn6ZbLoN9P8ALHfQTOxiOOcRsWTqehGOnGOa+h6K3hjMTTlyRm7eZz1MFh6tP2c4Jr0Pz48X/wDBPD4jaJcs3h/UdM8QWxJCiWQ2sv8A3yy7f1Y18l+LfD2s+FtWn0vXbCfTdRgJWS3ukKuuO+D2PYjrX9ANZeu+HNH8T2TWetalp+oWjDDQ3lskqH8GDAV9Rg+K8ZSajXipr8f8/wAT5bFcMYWo26EuV9uq/wAj8AhJxwMfl+H+fqK9N+FP7MvxH+MiQzeHfDs8elSBX/tW7HkWoU9CHb7w77VDMPSv1T8Y/sifBvx1Y3NtqHgfTbSSdTi60eP7DNCcdUMWAD9cqfSvE5P2AItJuXfwz8V/F+hwFiVt2mWTH0KNEQPfJNe1W4rwuJp8lSD+TT/AER5FPhevQm504NfM+KPA/7FHxe8dXJl1DRF8MaQpIub3XpPKVe/+q+8/HZVIOOtfZXwJ/4J1+FvBLi/8dXP/CX6muNlmqmGxj49Gb94RjupXjoK+l/DHhXTPBujwaVpEcqWsOSGmmaaR2JyXd3JZmJ5yT/9atuvjMZn+MxdXnTUV2S/V7n2GFyvDYanzpNy7s5Dwp8LPB3grRxpWjeGdL0zT1GBb29qqofr3/OtzS9LstFso7PT7OCytY+Egt4ljRfoFAFWqK+dlUlP4ndnswpxh8KsFFFFK4BRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAB//2Q==';
  document.documentElement.style.setProperty('--logo-url', `url("${logoB64}")`);

  // Scroll reveal
  const revObs = new IntersectionObserver(entries => {
    entries.forEach(e => {
      if (e.isIntersecting) { e.target.classList.add('visible'); revObs.unobserve(e.target); }
    });
  }, { threshold: 0.1 });
  document.querySelectorAll('.reveal').forEach(el => revObs.observe(el));
</script>
</body>
</html>