<!--
  =============================================================================
   ampirezoya-bienvenue.html — Page d'accueil publique (refonte complète #2)
  =============================================================================
   FR : REVU (14 septembre 2026) — deuxième refonte complète, cette fois
        à partir de la maquette complète fournie par Jérémie (7 sections :
        Réseau social, Univers, Entreprendre, Sites web, Compte unique,
        CTA final, Footer), remplaçant l'intégration précédente qui ne
        touchait que le Hero (voir
        "ampirezoya-bienvenue.BACKUP-avant-refonte-complete.html" pour
        cette version précédente).

        DÉCISIONS VALIDÉES AVEC JÉRÉMIE (voir la conversation) :
        - Les sous-marques "AMPIREVEO"/"AMPIRESONG"/"AMPIREBOOK"/
          "AMPIRESCHOOL" sont conservées telles quelles, bien
          qu'inédites sur le reste du site — correspondent aux pages
          déjà existantes (ampirezoya-videos.html, -musique.html,
          -livres-audio.html, -cours.html).
        - Les photos Unsplash sont conservées telles quelles pour
          l'instant (remplacement par de vraies captures prévu plus
          tard, PAS fait ici).
        - Ce fichier a son propre système de couleurs autonome
          (--navy/--cyan...), volontairement SANS lien vers
          design-system.css (contrairement au reste du site) — reprendre
          fidèlement la maquette fournie plutôt que la faire cohabiter
          avec un deuxième système de variables.

        CE QUI A ÉTÉ ADAPTÉ PAR RAPPORT À LA MAQUETTE BRUTE :
        - Tous les liens "#" placeholder (qui ne faisaient qu'afficher
          un message via showToast) remplacés par les vraies routes du
          site (voir chaque commentaire "FR : route" au fil du fichier).
        - Le bouton "FR → EN", purement décoratif dans la maquette (aucun
          gestionnaire de clic), relié à "basculerLangue()" déjà
          utilisée partout ailleurs sur le site (voir i18n.js) — un seul
          système de traduction, pas deux.
        - "data-i18n" ajouté sur le Hero et la navigation (déjà couverts
          par i18n.js) ; le reste des nouvelles sections (Réseau social,
          Univers, Entreprendre, Sites web...) reste pour l'instant
          uniquement en français — un chantier de traduction à part,
          cohérent avec l'avancement progressif déjà en cours sur le
          reste du site (voir la conversation).
   EN : REVISED (September 14, 2026) — second full redesign, this time
        from the complete mockup Jérémie provided (7 sections: Social
        network, Universes, Entrepreneurship, Websites, One account,
        Final CTA, Footer), replacing the previous integration which
        only touched the Hero (see
        "ampirezoya-bienvenue.BACKUP-avant-refonte-complete.html" for
        that earlier version).

        DECISIONS VALIDATED WITH JÉRÉMIE (see the conversation):
        - The "AMPIREVEO"/"AMPIRESONG"/"AMPIREBOOK"/"AMPIRESCHOOL"
          sub-brands are kept as-is, even though new to the rest of the
          site — they map to already-existing pages
          (ampirezoya-videos.html, -musique.html, -livres-audio.html,
          -cours.html).
        - The Unsplash photos are kept as-is for now (replacing them with
          real screenshots is planned for later, NOT done here).
        - This file has its own self-contained color system
          (--navy/--cyan...), deliberately WITHOUT linking to
          design-system.css (unlike the rest of the site) — faithfully
          matching the provided mockup rather than making it coexist
          with a second variable system.

        WHAT WAS ADAPTED FROM THE RAW MOCKUP:
        - Every placeholder "#" link (which only showed a message via
          showToast) replaced with the site's real routes (see each
          "FR : route" comment throughout the file).
        - The "FR → EN" button, purely decorative in the mockup (no click
          handler at all), wired to "basculerLangue()" already used
          everywhere else on the site (see i18n.js) — one translation
          system, not two.
        - "data-i18n" added to the Hero and navigation (already covered
          by i18n.js); the rest of the new sections (Social network,
          Universes, Entrepreneurship, Websites...) stays French-only
          for now — a separate translation effort, consistent with the
          progressive pace already under way on the rest of the site
          (see the conversation).
  =============================================================================
-->
<!DOCTYPE html>
<!-- FR : CORRECTION (15 septembre 2026) — le site affichait parfois de
     l'anglais (préférence de langue mémorisée), et Chrome, réglé en
     français, proposait ALORS de "traduire" cette page déjà
     multilingue. Cette double traduction cassait la mise en page : le
     titre forcé sur 2 lignes se retrouvait étalé sur 4-5 lignes avec un
     texte mal formé ("Développez votre entreprise" au lieu
     d'"Entreprenez"). "translate=no" + la balise meta empêchent
     Chrome de toucher à cette page — le site gère déjà lui-même sa
     traduction (voir i18n.js), Chrome n'a plus à s'en mêler.
   EN : FIX (September 15, 2026) — the site sometimes displayed in
     English (remembered language preference), and Chrome, set to
     French, would THEN offer to "translate" this already-multilingual
     page. This double translation broke the layout: the title forced
     onto 2 lines ended up spread across 4-5 lines with malformed text
     ("Développez votre entreprise" instead of "Entreprenez").
     "translate=no" + the meta tag stop Chrome from touching this page
     — the site already handles its own translation (see i18n.js),
     Chrome doesn't need to get involved. -->
<html lang="fr" translate="no">
<head>
  <meta name="google" content="notranslate">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#020f1d">

  <title>AMPIREZOYA — Réseau social, création, communautés & outils professionnels</title>
  <meta name="description" content="AMPIREZOYA réunit réseau social, création de contenu, communautés et outils professionnels dans un même écosystème numérique. Connectez-vous. Créez. Entreprenez.">
  <link rel="canonical" href="https://ampirezoya.com/">
  <meta property="og:title" content="AMPIREZOYA — Everything. Connected.">
  <meta property="og:description" content="Réseau social, création, communautés et outils professionnels dans un même écosystème.">
  <meta property="og:image" content="/assets/partage-defaut.png">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://ampirezoya.com/">
  <link rel="icon" href="/icons/favicon-32.png" sizes="32x32">
  <link rel="icon" href="/icons/favicon-16.png" sizes="16x16">
  <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "AMPIREZOYA",
    "url": "https://ampirezoya.com/",
    "logo": "https://ampirezoya.com/assets/logo-on-dark.png"
  }
  </script>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link
    href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;500;600;700;800&display=swap"
    rel="stylesheet"
  >

  <style>
    :root {
      --navy: #020f1d;
      --navy-light: #071c31;
      --surface: #0a2138;
      --surface-light: #102b47;
      --cyan: #08c7ff;
      --cyan-dark: #0788e8;
      --white: #ffffff;
      --muted: #a9b8c8;
      --border: rgba(255, 255, 255, 0.15);
      --shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
      --radius: 24px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      overflow-x: hidden;
      color: var(--white);
      background: var(--navy);
      font-family: "Inter", Arial, sans-serif;
    }

    body.menu-open {
      overflow: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      color: inherit;
      font: inherit;
      cursor: pointer;
    }

    img {
      display: block;
      max-width: 100%;
    }

    .container {
      width: min(1180px, calc(100% - 40px));
      margin-inline: auto;
    }

    .section {
      position: relative;
      padding: 110px 0;
    }

    .section-heading {
      max-width: 760px;
      margin-bottom: 48px;
    }

    .eyebrow {
      display: inline-block;
      margin-bottom: 18px;
      color: var(--cyan);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
    }

    .section-title {
      margin-bottom: 20px;
      font-family: "Archivo Black", sans-serif;
      font-size: clamp(32px, 5vw, 58px);
      line-height: 1.05;
      letter-spacing: -0.04em;
    }

    .section-description {
      color: var(--muted);
      font-size: clamp(16px, 2vw, 19px);
      line-height: 1.75;
    }

    .button {
      min-height: 58px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      padding: 0 28px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: transparent;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      transition:
        transform 0.25s,
        border-color 0.25s,
        box-shadow 0.25s,
        background 0.25s;
    }

    .button:hover {
      transform: translateY(-3px);
      border-color: var(--cyan);
    }

    .button-primary {
      border-color: var(--cyan);
      color: #00101d;
      background: linear-gradient(135deg, #3bd9ff, #0799ed);
      box-shadow: 0 0 32px rgba(8, 199, 255, 0.35);
    }

    .button-primary:hover {
      box-shadow: 0 0 50px rgba(8, 199, 255, 0.55);
    }

    .arrow {
      font-size: 22px;
      transition: transform 0.25s;
    }

    .button:hover .arrow {
      transform: translateX(6px);
    }

    /* Navigation */

    .header {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      width: 100%;
      padding: 30px 0;
    }

    .navigation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
    }

    .brand {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      font-family: "Archivo Black", sans-serif;
      font-size: clamp(21px, 3vw, 32px);
      letter-spacing: -0.04em;
    }

    .brand::after {
      width: 100%;
      height: 5px;
      margin-top: 5px;
      border-radius: 10px;
      background: var(--cyan);
      content: "";
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 28px;
      color: #d9e3ee;
      font-size: 13px;
      font-weight: 600;
    }

    .desktop-nav a {
      transition: color 0.2s;
    }

    .desktop-nav a:hover {
      color: var(--cyan);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .header-button {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 21px;
      border: 1px solid rgba(255, 255, 255, 0.42);
      border-radius: 999px;
      background: rgba(3, 16, 30, 0.28);
      backdrop-filter: blur(10px);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .menu-button {
      width: 46px;
      height: 46px;
      display: none;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: rgba(3, 16, 30, 0.4);
      font-size: 20px;
    }

    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 99;
      display: grid;
      align-content: center;
      gap: 24px;
      padding: 40px;
      visibility: hidden;
      opacity: 0;
      background: rgba(2, 15, 29, 0.98);
      transition: 0.25s;
    }

    .mobile-menu.visible {
      visibility: visible;
      opacity: 1;
    }

    .mobile-menu a {
      font-family: "Archivo Black", sans-serif;
      font-size: 27px;
    }

    /* Hero */

    .hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      isolation: isolate;
      overflow: hidden;
      /* FR : CORRECTION (14 septembre 2026) — sur demande explicite,
             plus aucune photo d'arrière-plan dans le Hero (voir la
             conversation) — dégradés seuls, comme sur le reste du site.
         EN : FIX (September 14, 2026) — per explicit request, no more
             background photo in the Hero (see the conversation) —
             gradients only, like the rest of the site. */
      background:
        linear-gradient(
          90deg,
          rgba(1, 12, 24, 0.97) 0%,
          rgba(2, 15, 29, 0.82) 43%,
          rgba(2, 15, 29, 0.15) 100%
        ),
        linear-gradient(
          0deg,
          rgba(2, 15, 29, 0.8),
          transparent 40%
        ),
        var(--navy);
    }

    .hero::before,
    .hero::after {
      position: absolute;
      z-index: -1;
      width: 700px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--cyan), transparent);
      content: "";
      opacity: 0.55;
      transform: rotate(45deg);
    }

    .hero::before {
      top: 30%;
      left: -240px;
    }

    .hero::after {
      right: -220px;
      bottom: 17%;
    }

    .hero-content {
      width: min(840px, 72%);
      padding-top: 100px;
    }

    .hero-slogan {
      margin-bottom: 24px;
      color: #c5ced9;
      font-size: clamp(13px, 1.5vw, 18px);
      font-weight: 300;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    .hero h1 {
      margin-bottom: 26px;
      font-family: "Archivo Black", sans-serif;
      font-size: clamp(42px, 5.6vw, 76px);
      line-height: 1.02;
      letter-spacing: -0.055em;
      text-transform: uppercase;
    }

    .hero h1 span {
      display: block;
      white-space: nowrap;
    }

    .hero h1 .cyan {
      color: var(--cyan);
      text-shadow: 0 0 30px rgba(8, 199, 255, 0.25);
    }

    .hero-text {
      max-width: 690px;
      color: #d2d9e2;
      font-size: clamp(16px, 1.8vw, 20px);
      font-weight: 300;
      line-height: 1.65;
      letter-spacing: 0.04em;
    }

    .hero-actions {
      display: flex;
      gap: 16px;
      margin-top: 36px;
    }

    .scroll-indicator {
      position: absolute;
      right: 35px;
      bottom: 35px;
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--muted);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      transform: rotate(90deg);
      transform-origin: right center;
    }

    /* Réseau social */

    .social-section {
      background:
        radial-gradient(circle at 80% 25%, rgba(8, 199, 255, 0.12), transparent 30%),
        var(--navy);
    }

    .social-layout {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 65px;
      align-items: center;
    }

    .social-visual {
      position: relative;
      min-height: 570px;
      display: grid;
      place-items: center;
    }

    .social-card {
      position: absolute;
      width: min(390px, 88%);
      padding: 22px;
      border: 1px solid var(--border);
      border-radius: 28px;
      background: rgba(12, 38, 62, 0.83);
      box-shadow: var(--shadow);
      backdrop-filter: blur(15px);
    }

    .social-card:nth-child(1) {
      top: 0;
      left: 0;
      transform: rotate(-4deg);
    }

    .social-card:nth-child(2) {
      right: 0;
      bottom: 10px;
      transform: rotate(3deg);
    }

    .social-avatar {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--cyan), #844cff);
      font-weight: 800;
    }

    .social-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .social-card small,
    .social-card p {
      color: var(--muted);
      line-height: 1.5;
    }

    .social-picture {
      height: 190px;
      margin-top: 16px;
      border-radius: 18px;
      background:
        linear-gradient(rgba(2, 15, 29, 0.15), rgba(2, 15, 29, 0.15)),
        url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=900&q=80")
        center/cover;
    }

    .feature-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin: 32px 0;
    }

    .feature-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 15px;
      border: 1px solid var(--border);
      border-radius: 14px;
      color: #dfe8f1;
      background: rgba(255, 255, 255, 0.025);
    }

    .feature-icon {
      color: var(--cyan);
      font-size: 20px;
    }

    /* Univers */

    .universes-section {
      background: #041526;
    }

    .universe-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }

    .universe-card {
      position: relative;
      min-height: 360px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      padding: 32px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      isolation: isolate;
      box-shadow: var(--shadow);
      transition: transform 0.3s, border-color 0.3s;
    }

    .universe-card:hover {
      transform: translateY(-7px);
      border-color: rgba(8, 199, 255, 0.65);
    }

    .universe-card::before {
      position: absolute;
      inset: 0;
      z-index: -2;
      background: var(--card-image) center/cover;
      content: "";
      transition: transform 0.6s;
    }

    .universe-card:hover::before {
      transform: scale(1.05);
    }

    .universe-card::after {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(0deg, rgba(1, 12, 24, 0.98), rgba(1, 12, 24, 0.12));
      content: "";
    }

    .universe-card h3 {
      margin-bottom: 10px;
      font-family: "Archivo Black", sans-serif;
      font-size: clamp(25px, 4vw, 39px);
    }

    .universe-card h3 span {
      color: var(--cyan);
    }

    .universe-card p {
      max-width: 470px;
      margin-bottom: 22px;
      color: #d2dbe6;
      line-height: 1.6;
    }

    .text-link {
      color: var(--cyan);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    /* Entreprendre */

    .business-section {
      background:
        radial-gradient(circle at 20% 60%, rgba(25, 110, 255, 0.15), transparent 30%),
        var(--navy);
    }

    .business-intro {
      display: grid;
      grid-template-columns: 1fr 0.8fr;
      gap: 60px;
      align-items: end;
      margin-bottom: 48px;
    }

    .business-intro .section-heading {
      margin-bottom: 0;
    }

    .business-quote {
      padding: 26px;
      border-left: 3px solid var(--cyan);
      color: #d3deea;
      background: rgba(255, 255, 255, 0.03);
      font-size: 18px;
      line-height: 1.65;
    }

    .business-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .business-card {
      min-height: 245px;
      padding: 27px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: linear-gradient(145deg, rgba(16, 43, 71, 0.85), rgba(5, 23, 40, 0.8));
      transition: 0.25s;
    }

    .business-card:hover {
      transform: translateY(-5px);
      border-color: var(--cyan);
    }

    .business-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      margin-bottom: 24px;
      border-radius: 15px;
      color: #00101d;
      background: var(--cyan);
      font-size: 24px;
    }

    .business-card h3 {
      margin-bottom: 12px;
      font-size: 21px;
    }

    .business-card p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }

    /* Templates */

    .templates-section {
      background: #f4f7fb;
      color: #071526;
    }

    .templates-section .eyebrow {
      color: #087ccf;
    }

    .templates-section .section-description {
      color: #627083;
    }

    .template-filters {
      display: flex;
      gap: 10px;
      margin-bottom: 30px;
      padding-bottom: 8px;
      overflow-x: auto;
    }

    .filter-button {
      flex: 0 0 auto;
      min-height: 42px;
      padding: 0 20px;
      border: 1px solid #d8e0e9;
      border-radius: 999px;
      color: #344154;
      background: white;
      font-size: 13px;
      font-weight: 700;
    }

    .filter-button.active {
      border-color: #0689e5;
      color: white;
      background: #0689e5;
    }

    .template-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .template-card {
      overflow: hidden;
      border: 1px solid #dde5ee;
      border-radius: 18px;
      background: white;
      box-shadow: 0 12px 30px rgba(13, 35, 60, 0.08);
      transition: 0.25s;
    }

    .template-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 45px rgba(13, 35, 60, 0.16);
    }

    .template-image {
      height: 210px;
      background: var(--template-image) center/cover;
    }

    .template-content {
      padding: 20px;
    }

    .template-category {
      color: #087ccf;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .template-card h3 {
      margin: 9px 0;
      font-size: 19px;
    }

    .template-card p {
      min-height: 44px;
      color: #68768a;
      font-size: 13px;
      line-height: 1.55;
    }

    .template-actions {
      display: flex;
      gap: 8px;
      margin-top: 17px;
    }

    .small-button {
      flex: 1;
      min-height: 40px;
      border: 1px solid #0788e8;
      border-radius: 9px;
      color: #0871bf;
      background: white;
      font-size: 11px;
      font-weight: 800;
    }

    .small-button.primary {
      color: white;
      background: #0788e8;
    }

    .templates-cta {
      display: flex;
      justify-content: center;
      margin-top: 42px;
    }

    /* Compte unique */

    .connected-section {
      overflow: hidden;
      background:
        radial-gradient(circle at center, rgba(8, 199, 255, 0.18), transparent 35%),
        #041526;
      text-align: center;
    }

    .connected-section .section-heading {
      margin-inline: auto;
    }

    .connected-wheel {
      width: min(760px, 100%);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      margin: 50px auto 0;
    }

    .connected-item {
      padding: 24px 12px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.035);
    }

    .connected-item span {
      display: block;
      margin-bottom: 12px;
      color: var(--cyan);
      font-size: 27px;
    }

    .connected-item strong {
      font-size: 13px;
    }

    /* CTA final */

    .final-cta {
      padding: 100px 0;
      text-align: center;
      background:
        linear-gradient(rgba(1, 13, 25, 0.78), rgba(1, 13, 25, 0.94)),
        url("https://images.unsplash.com/photo-1529390079861-591de354faf5?auto=format&fit=crop&w=1900&q=85")
        center/cover;
    }

    .final-cta h2 {
      max-width: 850px;
      margin: 0 auto 22px;
      font-family: "Archivo Black", sans-serif;
      font-size: clamp(35px, 6vw, 65px);
      line-height: 1.04;
    }

    .final-cta p {
      max-width: 700px;
      margin: 0 auto 35px;
      color: #d0dae5;
      font-size: 18px;
      line-height: 1.6;
    }

    .final-actions {
      display: flex;
      justify-content: center;
      gap: 14px;
    }

    /* Footer */

    .footer {
      padding: 65px 0 30px;
      border-top: 1px solid var(--border);
      background: #010b15;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr repeat(3, 1fr);
      gap: 45px;
      margin-bottom: 50px;
    }

    .footer-brand p {
      max-width: 330px;
      margin-top: 20px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }

    .footer h3 {
      margin-bottom: 18px;
      font-size: 14px;
    }

    .footer-links {
      display: grid;
      gap: 12px;
      color: var(--muted);
      font-size: 13px;
    }

    .footer-links a:hover {
      color: var(--cyan);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 25px;
      padding-top: 25px;
      border-top: 1px solid var(--border);
      color: #718095;
      font-size: 12px;
    }

    /* Apparition */

    .reveal {
      opacity: 0;
      transform: translateY(35px);
      transition: opacity 0.7s, transform 0.7s;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .toast {
      position: fixed;
      right: 25px;
      bottom: 25px;
      z-index: 500;
      max-width: 360px;
      padding: 16px 20px;
      border: 1px solid rgba(8, 199, 255, 0.4);
      border-radius: 13px;
      background: #071c31;
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(100px);
      transition: 0.3s;
    }

    .toast.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* FR : NOUVEAU — bouton de langue (voir basculerLangue() dans le
           script, en bas de fichier) : affiche l'un ou l'autre libellé
           selon la langue actuellement active, jamais les deux à la
           fois.
       EN : NEW — language button (see basculerLangue() in the script,
           at the bottom of the file): shows one label or the other
           depending on the currently active language, never both at
           once. */
    .lang-en { display: none; }

    /* Responsive */

    @media (max-width: 1050px) {
      .desktop-nav {
        display: none;
      }

      .menu-button {
        display: block;
      }

      .social-layout,
      .business-intro {
        grid-template-columns: 1fr;
      }

      .business-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .template-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 720px) {
      .container {
        width: min(100% - 32px, 1180px);
      }

      .section {
        padding: 78px 0;
      }

      .header {
        padding: 22px 0;
      }

      .language-button {
        display: none;
      }

      .header-button {
        min-height: 42px;
        padding-inline: 15px;
        font-size: 10px;
      }

      .hero {
        min-height: 100svh;
        align-items: center;
      }

      /* FR : NOUVEAU (14 septembre 2026) — cette règle assombrissait
             l'ancienne photo de fond sur mobile ; sans photo, elle
             masquait par erreur les 2 traits diagonaux cyan — retirée.
         EN : NEW (September 14, 2026) — this rule darkened the old
             background photo on mobile; without a photo, it was
             mistakenly hiding the 2 diagonal cyan lines — removed. */

      .hero-content {
        width: 100%;
        /* FR : REVU (15 septembre 2026) — sur signalement direct
             ("boutons trop remontés") : mesuré précisément — le contenu
             était déjà parfaitement centré (≈198px d'espace vide en
             haut ET en bas, sur un écran de 844px), mais ce vide en bas
             donnait une impression de boutons "trop hauts". Augmenté de
             95px à 130px pour redescendre le bloc visible d'environ
             35px, réduisant l'espace mort en dessous des boutons.
           EN : REVISED (September 15, 2026) — per direct report
             ("buttons too high up"): measured precisely — the content
             was already perfectly centered (≈198px of empty space at
             both top AND bottom, on an 844px screen), but that gap
             below gave an impression of the buttons sitting "too high
             up". Increased from 95px to 130px to move the visible block
             down by roughly 35px, reducing the dead space below the
             buttons. */
        padding-top: 130px;
      }

      .hero h1 {
        /* FR : CORRECTION (15 septembre 2026) — malgré un calcul précis
             qui tenait dans mes propres tests (y compris avec la police
             de repli simulée), un débordement réel a été signalé sur un
             vrai téléphone. Les moteurs de rendu de police varient
             selon l'appareil/le navigateur (Chrome, Samsung Internet,
             hinting différent...) d'une façon qu'un test isolé ne peut
             pas toujours reproduire à l'identique. Plutôt que de
             continuer à ajuster au pixel près, marge de sécurité bien
             plus généreuse ici (multiplicateur "vw" nettement réduit)
             pour que ça tienne de façon fiable, quel que soit
             l'appareil réel.
           EN : FIX (September 15, 2026) — despite a precise calculation
             that fit in my own tests (including with the fallback font
             simulated), a real overflow was reported on an actual
             phone. Font rendering engines vary by device/browser
             (Chrome, Samsung Internet, different hinting...) in ways an
             isolated test can't always reproduce exactly. Rather than
             keep fine-tuning to the pixel, a much more generous safety
             margin here (significantly reduced "vw" multiplier) so it
             holds up reliably regardless of the real device. */
        font-size: clamp(18px, 6.2vw, 52px);
      }

      /* FR : CORRECTION (15 septembre 2026) — "white-space:normal"
           laissait "CONNECTEZ-VOUS. CRÉEZ." retomber sur 2 lignes à lui
           seul sur mobile (donc 3 lignes au total avec "ENTREPRENEZ."),
           alors que la consigne d'origine impose exactement 2 lignes.
           Rétabli "nowrap" et réduit la taille de police pour que la
           ligne la plus longue tienne réellement sur une seule ligne à
           partir de 360px de large.
         EN : FIX (September 15, 2026) — "white-space:normal" let
           "CONNECTEZ-VOUS. CRÉEZ." wrap into 2 lines on its own on
           mobile (so 3 lines total with "ENTREPRENEZ."), while the
           original requirement calls for exactly 2 lines. Restored
           "nowrap" and reduced the font size so the longest line
           actually fits on one line from 360px width up. */
      .hero h1 span {
        white-space: nowrap;
      }

      .hero-slogan {
        font-size: 11px;
        letter-spacing: 0.2em;
      }

      .hero-actions,
      .final-actions {
        flex-direction: column;
      }

      .hero-actions .button,
      .final-actions .button {
        width: 100%;
      }

      .scroll-indicator {
        display: none;
      }

      .social-layout {
        gap: 35px;
      }

      .social-visual {
        min-height: 440px;
      }

      .social-card {
        width: 86%;
      }

      .social-picture {
        height: 145px;
      }

      .feature-list,
      .universe-grid,
      .business-grid,
      .template-grid {
        grid-template-columns: 1fr;
      }

      .universe-card {
        min-height: 310px;
      }

      .connected-wheel {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }

      .footer-brand {
        grid-column: 1 / -1;
      }

      .footer-bottom {
        flex-direction: column;
      }
    }

    @media (max-width: 420px) {
      .brand {
        font-size: 20px;
      }

      .header-button {
        display: none;
      }

      /* FR : CORRECTION (15 septembre 2026) — cette taille FIXE (34px)
           écrasait le calcul continu de ".hero h1" ci-dessus (voir plus
           haut dans le fichier) sur toute la plage 320-420px, provoquant
           un vrai débordement de "CRÉEZ." (invisible, "overflow-x:hidden"
           sur le corps de page le masquait plutôt que de créer une
           barre de défilement). Retirée : le calcul continu gère
           maintenant cette largeur aussi, sans interruption brutale.
         EN : FIX (September 15, 2026) — this FIXED size (34px) was
           overriding the continuous calculation for ".hero h1" above
           (see further up in the file) across the whole 320-420px
           range, causing a real overflow of "CRÉEZ." (invisible,
           "overflow-x:hidden" on the page body hid it rather than
           creating a scrollbar). Removed: the continuous calculation
           now handles this width too, with no abrupt jump. */

      .hero-text {
        font-size: 15px;
      }

      .feature-list,
      .connected-wheel,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .social-visual {
        min-height: 410px;
      }
    }
  </style>
</head>

<body>

  <header class="header">
    <div class="container navigation">
      <a href="#accueil" class="brand">AMPIREZOYA</a>

      <nav class="desktop-nav">
        <a href="#reseau">Réseau social</a>
        <a href="#univers">Univers</a>
        <a href="#entreprendre">Entreprendre</a>
        <a href="#apropos">À propos</a>
      </nav>

      <div class="header-actions">
        <a href="/auth" class="header-button" data-i18n="accueil.seConnecter">SE CONNECTER</a>
        <button class="header-button language-button lang-toggle" onclick="basculerLangue()">
          <span class="lang-fr">FR&nbsp;→&nbsp;EN</span>
          <span class="lang-en">EN&nbsp;→&nbsp;FR</span>
        </button>
        <button class="menu-button" id="menuButton" aria-label="Ouvrir le menu">
          ☰
        </button>
      </div>
    </div>
  </header>

  <nav class="mobile-menu" id="mobileMenu">
    <a href="#accueil">Accueil</a>
    <a href="#reseau">Réseau social</a>
    <a href="#univers">Univers</a>
    <a href="#entreprendre">Entreprendre</a>
    <a href="/auth">Se connecter</a>
  </nav>

  <main>

    <!-- ACCUEIL -->
    <section class="hero" id="accueil">
      <div class="container">
        <div class="hero-content">
          <p class="hero-slogan" data-i18n="accueil.signature">EVERYTHING. CONNECTED.</p>

          <h1>
            <span data-i18n="accueil.h1Ligne1">Connectez-vous. Créez.</span>
            <span class="cyan" data-i18n="accueil.h1Ligne2">Entreprenez.</span>
          </h1>

          <p class="hero-text" data-i18n="accueil.sousTitre">
            AMPIREZOYA réunit réseau social, création, communautés,
            business et divertissement sur une seule plateforme.
          </p>

          <div class="hero-actions">
            <a href="/auth?inscription=1" class="button button-primary">
              <span data-i18n="accueil.commencer">REJOINDRE AMPIREZOYA</span>
              <span class="arrow">→</span>
            </a>

            <a href="#univers" class="button">
              <span data-i18n="accueil.decouvrirUnivers">Découvrir l’univers</span>
              <span class="arrow">→</span>
            </a>
          </div>
        </div>
      </div>

      <span class="scroll-indicator">Découvrir · Faites défiler</span>
    </section>

    <!-- RÉSEAU SOCIAL -->
    <section class="section social-section" id="reseau">
      <div class="container social-layout">
        <div class="social-visual reveal">
          <article class="social-card">
            <div class="social-card-header">
              <span class="social-avatar">AK</span>

              <div>
                <strong>Amara Kalonji</strong>
                <small>Entrepreneur · Créateur</small>
              </div>
            </div>

            <p>
              Un nouveau projet commence toujours par une vision.
              Bienvenue dans l’univers AMPIREZOYA.
            </p>

            <div class="social-picture"></div>
          </article>

          <article class="social-card">
            <div class="social-card-header">
              <span class="social-avatar">AZ</span>

              <div>
                <strong>AMPIREZOYA</strong>
                <small>Communauté officielle</small>
              </div>
            </div>

            <p>
              Partagez vos idées, développez votre communauté et donnez
              vie à vos projets.
            </p>
          </article>
        </div>

        <div class="reveal">
          <span class="eyebrow">Le réseau social</span>

          <h2 class="section-title">
            Tout commence par une connexion.
          </h2>

          <p class="section-description">
            Partagez vos contenus, échangez avec vos proches, développez
            votre communauté et construisez de nouvelles opportunités.
          </p>

          <div class="feature-list">
            <div class="feature-item">
              <span class="feature-icon">✦</span>
              Publications et stories
            </div>

            <div class="feature-item">
              <span class="feature-icon">▶</span>
              Vidéos et directs
            </div>

            <div class="feature-item">
              <span class="feature-icon">●</span>
              Groupes et communautés
            </div>

            <div class="feature-item">
              <span class="feature-icon">✉</span>
              Messages et appels
            </div>

            <div class="feature-item">
              <span class="feature-icon">◎</span>
              Profils et Espaces
            </div>

            <div class="feature-item">
              <span class="feature-icon">文</span>
              Traduction des contenus
            </div>
          </div>

          <a href="#accueil" class="button">
            Découvrir le réseau
            <span class="arrow">→</span>
          </a>
        </div>
      </div>
    </section>

    <!-- UNIVERS -->
    <section class="section universes-section" id="univers">
      <div class="container">
        <div class="section-heading reveal">
          <span class="eyebrow">L’univers AMPIREZOYA</span>

          <h2 class="section-title">Un compte. Plusieurs univers.</h2>

          <p class="section-description">
            Retrouvez vos contenus, votre communauté, votre apprentissage
            et vos activités professionnelles depuis une seule identité.
          </p>
        </div>

        <div class="universe-grid">
          <article
            class="universe-card reveal"
            style="--card-image:url('https://images.unsplash.com/photo-1492619375914-88005aa9e8fb?auto=format&fit=crop&w=1200&q=85')"
          >
            <div>
              <h3>AMPIRE<span>VEO</span></h3>
              <p>
                Regardez, publiez et partagez des vidéos avec le monde.
              </p>
              <a class="text-link" href="/videos">Explorer les vidéos →</a>
            </div>
          </article>

          <article
            class="universe-card reveal"
            style="--card-image:url('https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?auto=format&fit=crop&w=1200&q=85')"
          >
            <div>
              <h3>AMPIRE<span>SONG</span></h3>
              <p>
                Écoutez de la musique et découvrez de nouveaux artistes.
              </p>
              <a class="text-link" href="/musique">Écouter maintenant →</a>
            </div>
          </article>

          <article
            class="universe-card reveal"
            style="--card-image:url('https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?auto=format&fit=crop&w=1200&q=85')"
          >
            <div>
              <h3>AMPIRE<span>BOOK</span></h3>
              <p>
                Découvrez des livres audio, des auteurs et des narrateurs.
              </p>
              <a class="text-link" href="/livres-audio">Découvrir les livres →</a>
            </div>
          </article>

          <article
            class="universe-card reveal"
            style="--card-image:url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&q=85')"
          >
            <div>
              <h3>AMPIRE<span>SCHOOL</span></h3>
              <p>
                Apprenez avec des cours, des coachs et un professeur IA.
              </p>
              <a class="text-link" href="/cours">Commencer à apprendre →</a>
            </div>
          </article>
        </div>
      </div>
    </section>

    <!-- ENTREPRENDRE -->
    <section class="section business-section" id="entreprendre">
      <div class="container">
        <div class="business-intro">
          <div class="section-heading reveal">
            <span class="eyebrow">Entreprendre</span>

            <h2 class="section-title">
              Votre activité mérite plus qu’un simple profil.
            </h2>

            <p class="section-description">
              Créez un véritable environnement professionnel pour
              présenter votre activité et développer votre clientèle.
            </p>
          </div>

          <blockquote class="business-quote reveal">
            Un profil représente une personne. Un Espace représente une
            marque, une entreprise, un artiste, une association ou une
            organisation.
          </blockquote>
        </div>

        <div class="business-grid">
          <article class="business-card reveal">
            <span class="business-icon">◎</span>
            <h3>Espaces professionnels</h3>
            <p>
              Créez et gérez plusieurs activités professionnelles depuis
              votre compte AMPIREZOYA.
            </p>
          </article>

          <article class="business-card reveal">
          </article>

          <article class="business-card reveal">
            <span class="business-icon">▤</span>
            <h3>Réservations</h3>
            <p>
              Permettez à vos clients de prendre un rendez-vous ou de
              réserver une prestation.
            </p>
          </article>

          <article class="business-card reveal">
            <span class="business-icon">◇</span>
            <h3>Services</h3>
            <p>
              Présentez vos offres, vos tarifs, vos disponibilités et vos
              conditions.
            </p>
          </article>

          <article class="business-card reveal">
            <span class="business-icon">🛒</span>
            <h3>Boutique en ligne</h3>
            <p>
              Vendez des produits physiques ou numériques directement à
              votre communauté.
            </p>
          </article>

          <article class="business-card reveal">
            <span class="business-icon">↗</span>
            <h3>Statistiques</h3>
            <p>
              Suivez votre audience, vos clients et les performances de
              vos activités.
            </p>
          </article>
        </div>
      </div>
    </section>

    <!-- UN COMPTE -->
    <section class="section connected-section" id="apropos">
      <div class="container">
        <div class="section-heading reveal">
          <span class="eyebrow">Everything. Connected.</span>

          <h2 class="section-title">Un seul compte pour tout.</h2>

          <p class="section-description">
            Votre identité AMPIREZOYA vous accompagne dans tous vos
            univers personnels, créatifs, éducatifs et professionnels.
          </p>
        </div>

        <div class="connected-wheel">
          <div class="connected-item reveal"><span>◎</span><strong>Votre profil</strong></div>
          <div class="connected-item reveal"><span>▣</span><strong>Vos Espaces</strong></div>
          <div class="connected-item reveal"><span>▶</span><strong>Vos vidéos</strong></div>
          <div class="connected-item reveal"><span>♫</span><strong>Votre musique</strong></div>
          <div class="connected-item reveal"><span>▤</span><strong>Vos livres</strong></div>
          <div class="connected-item reveal"><span>✦</span><strong>Vos cours</strong></div>
          <div class="connected-item reveal"><span>◇</span><strong>Vos services</strong></div>
          <div class="connected-item reveal"><span>✉</span><strong>Vos messages</strong></div>
        </div>
      </div>
    </section>

    <!-- CTA FINAL -->
    <section class="final-cta" id="inscription">
      <div class="container reveal">
        <h2>Connectez-vous à un monde de possibilités.</h2>

        <p>
          Partagez, apprenez, divertissez-vous et développez vos projets
          depuis une seule plateforme.
        </p>

        <div class="final-actions">
          <a href="/auth?inscription=1" class="button button-primary">
            Créer un compte gratuit
            <span class="arrow">→</span>
          </a>

          <a href="/auth" class="button" id="connexion">
            Se connecter
            <span class="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <a href="#accueil" class="brand">AMPIREZOYA</a>

          <p>
            Réseau social, création, communautés, business et
            divertissement réunis sur une seule plateforme.
          </p>
        </div>

        <div>
          <h3>Univers</h3>

          <div class="footer-links">
            <a href="/videos">AMPIREVEO</a>
            <a href="/musique">AMPIRESONG</a>
            <a href="/livres-audio">AMPIREBOOK</a>
            <a href="/cours">AMPIRESCHOOL</a>
          </div>
        </div>

        <div>
          <h3>Entreprendre</h3>

          <div class="footer-links">
            <a href="#entreprendre">Espaces</a>
            <a href="#entreprendre">Réservations</a>
            <a href="#entreprendre">Services</a>
          </div>
        </div>

        <div>
          <h3>Informations</h3>

          <div class="footer-links">
            <a href="#apropos">À propos</a>
            <a href="/support">Aide</a>
            <a href="/confidentialite">Confidentialité</a>
            <a href="/cgu">Conditions d’utilisation</a>
          </div>
        </div>
      </div>

      <div class="footer-bottom">
        <span>© <span id="currentYear"></span> AMPIREZOYA</span>
        <span>Everything. Connected.</span>
      </div>
    </div>
  </footer>

  <div class="toast" id="toast"></div>

  <script>
    const menuButton = document.getElementById("menuButton");
    const mobileMenu = document.getElementById("mobileMenu");
    const toast = document.getElementById("toast");

    function closeMobileMenu() {
      mobileMenu.classList.remove("visible");
      document.body.classList.remove("menu-open");
      menuButton.textContent = "☰";
    }

    menuButton.addEventListener("click", () => {
      const isVisible = mobileMenu.classList.toggle("visible");

      document.body.classList.toggle("menu-open", isVisible);
      menuButton.textContent = isVisible ? "×" : "☰";
    });

    mobileMenu.querySelectorAll("a").forEach((link) => {
      link.addEventListener("click", closeMobileMenu);
    });

    function showToast(message) {
      toast.textContent = message;
      toast.classList.add("visible");

      window.clearTimeout(showToast.timer);

      showToast.timer = window.setTimeout(() => {
        toast.classList.remove("visible");
      }, 2800);
    }

    const revealObserver = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("visible");
            revealObserver.unobserve(entry.target);
          }
        });
      },
      {
        threshold: 0.12
      }
    );

    document.querySelectorAll(".reveal").forEach((element) => {
      revealObserver.observe(element);
    });

    const filterButtons = document.querySelectorAll(".filter-button");
    const templateCards = document.querySelectorAll(".template-card");

    filterButtons.forEach((button) => {
      button.addEventListener("click", () => {
        filterButtons.forEach((item) => {
          item.classList.remove("active");
        });

        button.classList.add("active");

        const selectedFilter = button.dataset.filter;

        templateCards.forEach((card) => {
          const isVisible =
            selectedFilter === "all" ||
            card.dataset.category === selectedFilter;

          card.style.display = isVisible ? "block" : "none";
        });
      });
    });

    document.querySelectorAll(".preview-template, .use-template").forEach((button) => {
      button.addEventListener("click", () => {
        window.location.href = "/auth?inscription=1";
      });
    });

    document.getElementById("currentYear").textContent =
      new Date().getFullYear();

    /**
     * FR : NOUVEAU (15 septembre 2026) — FILET DE SÉCURITÉ, en plus du
     *      calcul CSS ci-dessus. Un débordement réel a été signalé sur
     *      un téléphone précis malgré un calcul qui tenait dans les
     *      tests — les moteurs de rendu de police varient trop d'un
     *      appareil à l'autre pour s'y fier à 100% avec une seule
     *      valeur statique.
     *
     *      Ce script MESURE la largeur réellement affichée (une fois
     *      que la vraie police a fini de charger, via
     *      "document.fonts.ready") et réduit encore la taille, petit à
     *      petit, jusqu'à ce que ça tienne VRAIMENT sur l'écran de la
     *      personne qui regarde — quel que soit son appareil,
     *      navigateur, ou moteur de rendu.
     * EN : NEW (September 15, 2026) — SAFETY NET, on top of the CSS
     *      calculation above. A real overflow was reported on a
     *      specific phone despite a calculation that held up in
     *      testing — font rendering engines vary too much across
     *      devices to fully rely on a single static value.
     *
     *      This script MEASURES the actually-displayed width (once the
     *      real font has finished loading, via "document.fonts.ready")
     *      and shrinks the size further, little by little, until it
     *      truly fits on the screen of the person looking at it —
     *      whatever their device, browser, or rendering engine.
     */
    function ajusterTailleTitreSiDebordement() {
      const conteneur = document.querySelector(".hero-content");
      const spans = document.querySelectorAll(".hero h1 span");
      const h1 = document.querySelector(".hero h1");
      if (!conteneur || !h1 || spans.length === 0) return;
      let tentatives = 0;
      const reduire = () => {
        const largeurDisponible = conteneur.clientWidth;
        let debordeQuelquePart = false;
        spans.forEach((span) => {
          if (span.scrollWidth > largeurDisponible + 1) debordeQuelquePart = true;
        });
        if (!debordeQuelquePart || tentatives >= 12) return;
        const tailleActuelle = parseFloat(getComputedStyle(h1).fontSize);
        h1.style.fontSize = (tailleActuelle - 1) + "px";
        tentatives++;
        requestAnimationFrame(reduire);
      };
      reduire();
    }
    if (document.fonts && document.fonts.ready) {
      document.fonts.ready.then(ajusterTailleTitreSiDebordement);
    }
    window.addEventListener("resize", ajusterTailleTitreSiDebordement);
    // FR : au cas où "document.fonts" ne serait pas disponible (très
    //      vieux navigateur) — vérifie quand même après un court délai.
    // EN : in case "document.fonts" isn't available (very old
    //      browser) — checks anyway after a short delay.
    setTimeout(ajusterTailleTitreSiDebordement, 800);
  </script>
  <script src="/i18n.js"></script>
</body>
</html>