<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=1280" />
  <meta name="color-scheme" content="light" />
  <meta name="theme-color" content="#F0F9F8" />
  <title>PLONARA — L'app des profs d'EPS</title>
  <link rel="icon" type="image/svg+xml" href="assets/logo/favicon.svg" />
  <link rel="icon" type="image/x-icon" href="assets/logo/favicon.ico" />
  <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=Outfit:wght@400;500;600;700;800;900&family=Cinzel:wght@600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css?v=20260610b" />
</head>
<body>

  <header class="nav">
    <a href="#" class="brand">
      <img src="assets/logo/logo-official.png" alt="PLONARA" class="brand-logo brand-logo-nav" />
      <span class="brand-text-block">
        <span class="brand-name">PLONARA</span>
        <span class="brand-tagline">plus qu'une app</span>
      </span>
    </a>
    <nav class="nav-links">
      <a href="#showcase">Aperçu</a>
      <a href="#pricing">Tarifs</a>
      <a href="#download">Télécharger</a>
    </nav>
    <a href="#pricing" class="btn btn-primary btn-sm">Les offres d'abonnement</a>
  </header>

  <!-- ============ PROMISE BANNER (LOGO + PROGRAMME) ============ -->
  <section class="promise">
    <div class="trial-ribbon">
      <span class="trial-ribbon-spark">★</span>
      <span class="trial-ribbon-main">30 jours</span>
      <span class="trial-ribbon-sub">d'abonnement gratuit</span>
    </div>
    <div class="promise-inner">
      <div class="promise-logo">
        <img src="assets/logo/logo-official.png" alt="PLONARA — Logo officiel" />
      </div>
      <h1 class="promise-title">
        <span class="grad">Plus qu'une app.</span><br/>
        Un véritable compagnon professionnel.
      </h1>
      <p class="promise-lede">
        Plus de <strong>100 cycles pédagogiques</strong> prêts à l'emploi, <strong>personnalisables aux besoins de chaque classe</strong> à partir d'un simple <strong>test diagnostique</strong>. En moins de <strong>quelques minutes</strong>, vous confirmez vos notes et les exportez directement vers <strong>Massar</strong>.
      </p>
      <p class="promise-lede promise-lede-italic">
        Nous ne faisons pas que faciliter votre travail — nous calculons avec une rigueur professionnelle pendant que vous restez maître de votre pédagogie.
      </p>

      <div class="promise-numbers">
        <div class="promise-num"><strong>100+</strong><span>cycles prêts</span></div>
        <div class="promise-num"><strong>507</strong><span>séances pré-rédigées</span></div>
        <div class="promise-num"><strong>22</strong><span>sports & niveaux</span></div>
        <div class="promise-num"><strong>1 clic</strong><span>vers Massar</span></div>
      </div>

      <p class="promise-tag">Gagnez du temps · Concentrez-vous sur l'essentiel · Obtenez de meilleurs résultats.</p>

      <div class="promise-cta">
        <a href="#download" class="btn btn-primary btn-lg">Télécharger gratuitement</a>
        <a href="#showcase" class="btn btn-ghost btn-lg">Voir l'app en action</a>
      </div>
    </div>
  </section>

  <!-- ============ HERO ============ -->
  <section class="hero">
    <div class="hero-text">
      <span class="kicker">Pour les profs d'EPS · Maroc</span>
      <h1>Toute votre classe.<br/><span class="grad">Dans une seule app.</span></h1>
      <p class="lede">Cycles, séances, notes, présences, fiches officielles — sur ordinateur, tablette et téléphone. Hors-ligne.</p>
      <div class="hero-cta">
        <a href="#download" class="btn btn-primary">Télécharger gratuitement</a>
        <a href="#showcase" class="btn btn-ghost">Voir l'app</a>
      </div>
      <div class="hero-meta">
        <div class="meta-item"><span class="dot"></span> 100% hors-ligne</div>
        <div class="meta-item"><span class="dot"></span> Données privées</div>
        <div class="meta-item"><span class="dot"></span> 30 jours gratuits</div>
      </div>
    </div>
    <div class="hero-art">
      <img src="assets/coach-tablet-field.png" alt="Enseignant d'EPS avec tablette PLONARA sur le terrain" />
      <div class="hero-glow"></div>
    </div>
  </section>

<!-- ============ SHOWCASE (ALBUM) ============ -->
  <section id="showcase" class="showcase">
    <div class="section-head">
      <span class="kicker">Aperçu</span>
      <h2>Tout votre travail<br/><span class="grad">au même endroit.</span></h2>
      <p class="muted">Faites défiler — ou laissez l'album avancer automatiquement.</p>
    </div>

    <div class="carousel">
      <button class="carousel-arrow carousel-prev" aria-label="Précédent">‹</button>
      <button class="carousel-arrow carousel-next" aria-label="Suivant">›</button>

      <div class="carousel-track">

        <article class="carousel-slide active">
          <div class="carousel-img"><img src="screenshots/dashboard.png" alt="Tableau de bord" /></div>
          <div class="carousel-caption">
            <span class="carousel-tag">1 / 9</span>
            <h3>Tableau de bord</h3>
            <p>Aperçu instantané de votre semaine : emploi du temps hebdomadaire avec couleurs par classe, météo locale en temps réel, to-do list interactive, et raccourcis vers vos classes et cycles. Tout ce qu'il faut pour démarrer la journée.</p>
            <span class="dl-badge">Récap journalier exportable en PDF</span>
          </div>
        </article>

        <article class="carousel-slide">
          <div class="carousel-img"><img src="screenshots/cycles.png" alt="Répartition cyclique" /></div>
          <div class="carousel-caption">
            <span class="carousel-tag">2 / 9</span>
            <h3>Répartition cyclique</h3>
            <p>6 cycles annuels (3 par semestre), cartes colorées par sport, statuts (brouillon, actif, terminé), navigation rapide entre TCS, 1BAC et 2BAC. Plus de 22 sports et niveaux pré-configurés selon le programme officiel.</p>
            <span class="dl-badge">Répartition complète téléchargeable en PDF</span>
          </div>
        </article>

        <article class="carousel-slide">
          <div class="carousel-img"><img src="screenshots/notes.png" alt="Notes et évaluations" /></div>
          <div class="carousel-caption">
            <span class="carousel-tag">3 / 9</span>
            <h3>Notes & évaluations</h3>
            <p>Une seule grille pour procédural, conceptuel et comportemental. Calcul automatique de la note finale, bonus Excellent, classifications Médiocre / Insuffisant, et mise en avant des meilleurs élèves de la classe.</p>
            <span class="dl-badge">Bulletin de notes téléchargeable en PDF</span>
          </div>
        </article>

        <article class="carousel-slide">
          <div class="carousel-img"><img src="screenshots/cycle-modal.png" alt="Génération IA d'un cycle" /></div>
          <div class="carousel-caption">
            <span class="carousel-tag">4 / 9</span>
            <h3>Génération IA des fiches</h3>
            <p>Choisissez un sport, un niveau et un cycle — l'IA locale (Qwen) compose une fiche de séance complète, avec échauffement, corps de séance, retour au calme, durée, intensité et matériel. 507 séances pré-rédigées par des profs EPS marocains.</p>
            <span class="dl-badge">Fiche de séance complète en PDF</span>
          </div>
        </article>

        <article class="carousel-slide">
          <div class="carousel-img"><img src="screenshots/register.png" alt="Registre officiel" /></div>
          <div class="carousel-caption">
            <span class="carousel-tag">5 / 9</span>
            <h3>Registre officiel</h3>
            <p>Cahier journalier conforme aux exigences du Ministère de l'Éducation : en-tête établissement + enseignant + année scolaire, présences et grades par séance, espace signature. Prêt pour l'inspection.</p>
            <span class="dl-badge">Registre PDF officiel prêt à imprimer</span>
          </div>
        </article>

        <article class="carousel-slide">
          <div class="carousel-img"><img src="screenshots/documents.png" alt="Documents pédagogiques" /></div>
          <div class="carousel-caption">
            <span class="carousel-tag">6 / 9</span>
            <h3>Documents pédagogiques</h3>
            <p>Importez vos fiches Word, PDF, HTML, vos agendas, votre projet pédagogique. Organisez par classe ou par sport, recherche plein-texte, prévisualisation rapide. Tout reste sur votre appareil, chiffré.</p>
            <span class="dl-badge">Tous vos documents archivés et téléchargeables en PDF</span>
          </div>
        </article>

        <article class="carousel-slide">
          <div class="carousel-img"><img src="screenshots/association.png" alt="Association sportive" /></div>
          <div class="carousel-caption">
            <span class="carousel-tag">7 / 9</span>
            <h3>Association sportive</h3>
            <p>Gérez vos équipes par sport, vos tournois, vos calendriers de matchs, les classements et les inscriptions élèves. Suivi des résultats et historique sur plusieurs années scolaires.</p>
            <span class="dl-badge">Listes, règlements et calendriers en PDF</span>
          </div>
        </article>

        <article class="carousel-slide">
          <div class="carousel-img"><img src="screenshots/outils.png" alt="Outils pédagogiques" /></div>
          <div class="carousel-caption">
            <span class="carousel-tag">8 / 9</span>
            <h3>Outils du prof EPS</h3>
            <p>Inventaire des terrains et équipements, sport-types préconfigurés, calcul des moyennes par classe et par sport, statistiques de progression, exports Excel et Massar en un clic.</p>
            <span class="dl-badge">Inventaires et rapports en PDF</span>
          </div>
        </article>

        <article class="carousel-slide">
          <div class="carousel-img"><img src="screenshots/test-vma.png" alt="Test VMA" /></div>
          <div class="carousel-caption">
            <span class="carousel-tag">9 / 9</span>
            <h3>Test VMA & condition physique</h3>
            <p>Test VMA, course navette, mesures (poids, taille, IMC), évaluations diagnostiques, suivi de la condition physique sur tout le cycle. Profil santé complet pour chaque élève.</p>
            <span class="dl-badge">Bilan condition physique en PDF</span>
          </div>
        </article>

      </div>

      <div class="carousel-dots" id="carouselDots"></div>
    </div>
  </section>

  <!-- ============ SPLIT ON FIELD ============ -->
  <section class="split">
    <div class="split-art">
      <img src="assets/coach-tablet-grades.png" alt="PLONARA sur tablette en cours" />
    </div>
    <div class="split-text">
      <span class="kicker">Mobile & Tablette</span>
      <h2>Notez en direct.<br/>Sur le terrain.</h2>
      <p>Présences, évaluations, comportement — tout depuis votre tablette ou téléphone, même sans réseau.</p>
      <ul class="checks">
        <li>Synchronisation automatique entre appareils</li>
        <li>Données stockées localement et chiffrées</li>
        <li>Fonctionne sans Wi-Fi ni données mobiles</li>
      </ul>
    </div>
  </section>

  <!-- ============ SPLIT — NOTES → MASSAR (MIZA L2AHAM) ============ -->
  <section class="split split-reverse split-massar">
    <div class="split-art">
      <img src="assets/coach-laptop-bench.png" alt="PLONARA — Notes prêtes pour Massar" />
      <div class="massar-stamp">
        <span class="massar-stamp-mark">XLS</span>
        <span class="massar-stamp-text">Prêt pour Massar</span>
      </div>
    </div>
    <div class="split-text">
      <h2>Sortez du terrain.<br/><span class="grad">Vos notes sont déjà prêtes pour Massar.</span></h2>
      <p class="lede-strong">
        Dès que vous terminez l'évaluation sur le terrain, <strong>vos notes sont calculées instantanément</strong> et un <strong>fichier Excel au format Massar</strong> est généré automatiquement. Plus aucune ressaisie. Plus aucune erreur.
      </p>
      <ul class="checks checks-strong">
        <li><strong>Export Massar (.xls)</strong> en 1 clic — format officiel reconnu par le Ministère</li>
        <li>Notes <strong>consolidées par classe, sport et semestre</strong></li>
        <li>Procédural + conceptuel + comportemental, <strong>calculés selon le barème EPS</strong></li>
        <li>Aucune ressaisie sur Massar — <strong>directement importable</strong></li>
      </ul>
      <div class="massar-badge">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2v-5h2v5zm4 0h-2v-9h2v9z"/></svg>
        Fichier .xls compatible Massar — format ministériel certifié
      </div>
    </div>
  </section>

  <!-- ============ PRICING ============ -->
  <section id="pricing" class="pricing">
    <div class="section-head">
      <span class="kicker">Tarifs</span>
      <h2>Simple. <span class="grad">Un seul prix.</span></h2>
      <p class="muted">Achetez une fois. Utilisez sur tous vos appareils.</p>
    </div>

    <div class="price-grid">

      <div class="price-card" data-pack="monthly" data-price="190" data-label="1 mois">
        <div class="promo-flag">-36%</div>
        <div class="price-head">
          <h3>1 mois</h3>
          <p class="muted">Découvrir sans engagement</p>
        </div>
        <div class="price-amount">
          <span class="old-price">299 DH</span>
          <span class="amount amount-promo">190 DH</span>
          <span class="period">/ 30 jours</span>
        </div>
        <ul class="price-features">
          <li>Toutes les fonctionnalités</li>
          <li>Mises à jour incluses</li>
          <li>Support par email</li>
          <li>Sur tous vos appareils</li>
        </ul>
        <a href="#checkout" class="btn btn-primary btn-block js-pick-pack">Payer maintenant</a>
      </div>

      <div class="price-card" data-pack="quarterly" data-price="450" data-label="3 mois">
        <div class="promo-flag">-21%</div>
        <div class="price-head">
          <h3>3 mois</h3>
          <p class="muted">Le trimestre complet</p>
        </div>
        <div class="price-amount">
          <span class="old-price">570 DH</span>
          <span class="amount amount-promo">450 DH</span>
          <span class="period">/ 90 jours</span>
        </div>
        <ul class="price-features">
          <li>Toutes les fonctionnalités</li>
          <li>Mises à jour incluses</li>
          <li>Support prioritaire</li>
          <li>Sur tous vos appareils</li>
        </ul>
        <a href="#checkout" class="btn btn-primary btn-block js-pick-pack">Payer maintenant</a>
      </div>

      <div class="price-card" data-pack="yearly" data-price="1190" data-label="1 an">
        <div class="ribbon">Meilleure offre</div>
        <div class="promo-flag promo-flag-strong">-48%</div>
        <div class="price-head">
          <h3>1 an</h3>
          <p class="muted">L'année scolaire entière</p>
        </div>
        <div class="price-amount">
          <span class="old-price">2299 DH</span>
          <span class="amount amount-promo">1190 DH</span>
          <span class="period">/ 365 jours</span>
        </div>
        <ul class="price-features">
          <li><strong>Tout</strong>, sans limite</li>
          <li>Mises à jour incluses</li>
          <li>Support prioritaire WhatsApp</li>
          <li>Sync multi-appareils</li>
          <li>Annulation à tout moment</li>
        </ul>
        <a href="#checkout" class="btn btn-primary btn-block js-pick-pack">Payer maintenant</a>
      </div>

    </div>

    <!-- ============ CHECKOUT (NAFS TARI9A DIAL LBARNAMAJ) ============ -->
    <div id="checkout" class="checkout">
      <div class="checkout-card">
        <div class="checkout-left">
          <span class="kicker">Paiement rapide</span>
          <h3>Activation en ligne après vérification.</h3>
          <p>Envoyez uniquement la capture ou le reçu de votre paiement par WhatsApp. Après vérification, votre compte est activé directement en ligne : aucun fichier de licence n’est envoyé et aucune action n’est demandée au client.</p>

          <div class="pay-methods">
            <button type="button" class="pay-method-tab pay-method-active">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12 2L1 7v2h22V7L12 2zM2 10v8h2v-8H2zm6 0v8h2v-8H8zm6 0v8h2v-8h-2zm6 0v8h2v-8h-2zM1 20v2h22v-2H1z"/></svg>
                <span class="pm-body">
                <span class="pm-name">Virement instantané</span>
                <span class="pm-sub">Instantané uniquement · délai de 48 h refusé</span>
              </span>
            </button>
            <button type="button" class="pay-method-tab pay-method-soon" disabled>
              <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg>
              <span class="pm-body">
                <span class="pm-name">Carte bancaire</span>
                <span class="pm-sub">Bientôt</span>
              </span>
              <span class="pm-pill">BIENTÔT</span>
            </button>
          </div>

          <div class="trust-line">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>
            Envoyez le reçu par WhatsApp · votre compte sera activé en ligne après vérification.
          </div>
        </div>

        <div class="virement-panel">
          <div class="vir-row vir-amount-row">
            <span class="vir-label">Montant à virer</span>
            <strong class="vir-amount"><span id="checkout-total">1190</span> DH</strong>
          </div>
          <div class="vir-row">
            <span class="vir-label">Pack</span>
            <span class="vir-pack"><em id="checkout-pack-label">1 an</em></span>
          </div>
          <div class="vir-row vir-rib-row">
            <span class="vir-label">RIB du bénéficiaire</span>
            <div class="vir-value">
              <code id="rib-code">360190000003417846001571</code>
              <button class="vir-copy" data-copy="rib-code" type="button">Copier</button>
            </div>
          </div>
          <div class="vir-row vir-ref-row">
            <span class="vir-label">Référence à inclure</span>
            <div class="vir-value">
              <code id="ref-code">PLNR-CLIENT-YEARLY</code>
              <button class="vir-copy" data-copy="ref-code" type="button">Copier</button>
            </div>
          </div>
          <p class="vir-hint">
            Effectuez uniquement un virement instantané depuis votre banque ou application mobile, avec la référence ci-dessus. Les virements classiques avec un délai de 48 h ne sont pas acceptés. Envoyez ensuite la capture ou le reçu par WhatsApp.
          </p>

          <div class="vir-warn">
            <span class="vir-warn-icon">⚠</span>
            <span class="vir-warn-text">Virement instantané obligatoire. Les virements classiques ou différés (jusqu’à 48 h) sont refusés. Utilisez l’email exact de votre compte pour permettre son activation en ligne.</span>
          </div>

          <div class="vir-fields">
            <label class="vir-field">
              <span class="vir-field-label">Nom complet</span>
              <input type="text" id="buyerName" placeholder="Votre nom complet" autocomplete="name" />
            </label>
            <label class="vir-field">
              <span class="vir-field-label">Email</span>
              <input type="email" id="buyerEmail" placeholder="exemple@email.com" autocomplete="email" />
            </label>
            <label class="vir-field">
              <span class="vir-field-label">Confirmer l'email (retapez)</span>
              <input type="email" id="buyerEmailConfirm" placeholder="Retapez votre email" autocomplete="off" />
              <span class="vir-field-error" id="emailMismatchMsg">Les emails ne correspondent pas.</span>
            </label>
          </div>

          <a href="#" id="proofBtn" class="btn btn-primary btn-block btn-lg btn-whatsapp">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.002-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
            J'ai payé — envoyer le reçu sur WhatsApp
          </a>
          <p class="vir-hint" style="text-align:center;margin-top:6px;">Ajoutez uniquement la capture ou le reçu du virement instantané.</p>
          <p class="price-note">Activation en ligne après vérification · aucun fichier de licence à installer.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ DOWNLOAD ============ -->
  <section id="download" class="download">
    <div class="section-head">
      <span class="kicker">Téléchargement</span>
      <h2>Téléchargez <span class="grad">PLONARA</span></h2>
      <p class="muted">Choisissez votre plateforme</p>
    </div>

    <div class="dl-grid">

      <a href="#" class="dl-card dl-win">
        <div class="dl-icon">
          <svg viewBox="0 0 24 24" width="40" height="40" fill="currentColor"><path d="M3 5.5L10.5 4.4v7.1H3V5.5zm0 13l7.5 1.1v-7.1H3v6zm8.5 1.2l9.5 1.3V12.5h-9.5v7.2zm0-15.4v7.2H21V3l-9.5 1.3z"/></svg>
        </div>
        <div class="dl-body">
          <span class="dl-os">Windows</span>
          <span class="dl-sub">Disponible</span>
        </div>
        <span class="dl-arrow">↓</span>
      </a>

      <a href="#" class="dl-card dl-mac">
        <div class="dl-icon">
          <svg viewBox="0 0 24 24" width="40" height="40" fill="currentColor"><path d="M16.5 2.5c0 1.4-.6 2.7-1.5 3.6-1 1-2.3 1.7-3.5 1.6-.1-1.4.6-2.8 1.5-3.6 1-1 2.4-1.6 3.5-1.6zM20.5 17.4c-.6 1.3-.9 1.9-1.6 3.1-1 1.6-2.4 3.6-4.1 3.6-1.5 0-1.9-1-4-1-2 0-2.4 1-3.9 1-1.7 0-3-1.9-4-3.5-2.8-4.4-3.1-9.5-1.4-12.2 1.2-1.9 3.1-3.1 4.9-3.1 1.8 0 3 1 4.5 1 1.5 0 2.4-1 4.5-1 1.6 0 3.3.9 4.5 2.4-4 2.2-3.3 7.9.6 9.7z"/></svg>
        </div>
        <div class="dl-body">
          <span class="dl-os">macOS</span>
          <span class="dl-sub">Bientôt disponible</span>
        </div>
        <span class="dl-arrow">↓</span>
      </a>

      <a href="#" class="dl-card dl-android">
        <div class="dl-icon">
          <svg viewBox="0 0 24 24" width="40" height="40" fill="currentColor"><path d="M17.5 9.5l1.7-2.9c.1-.2 0-.4-.1-.5-.2-.1-.4 0-.5.1L16.8 9.1c-1.5-.7-3.1-1.1-4.8-1.1s-3.3.4-4.8 1.1L5.4 6.2c-.1-.2-.3-.2-.5-.1-.2.1-.2.3-.1.5l1.7 2.9C3.6 11 1.9 13.6 1.6 16.5h20.8c-.3-2.9-2-5.5-4.9-7zM7 14.3c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9zm10 0c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9z"/></svg>
        </div>
        <div class="dl-body">
          <span class="dl-os">Android</span>
          <span class="dl-sub">Disponible</span>
        </div>
        <span class="dl-arrow">↓</span>
      </a>

      <a href="#" class="dl-card dl-ios">
        <div class="dl-icon">
          <svg viewBox="0 0 24 24" width="40" height="40" fill="currentColor"><path d="M17 1.5H7C5.3 1.5 4 2.8 4 4.5v15c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-15c0-1.7-1.3-3-3-3zM12 21.3c-.7 0-1.3-.6-1.3-1.3s.6-1.3 1.3-1.3 1.3.6 1.3 1.3-.6 1.3-1.3 1.3zM18 17.5H6V5h12v12.5z"/></svg>
        </div>
        <div class="dl-body">
          <span class="dl-os">iPhone</span>
          <span class="dl-sub">Bientôt disponible</span>
        </div>
        <span class="dl-arrow">↓</span>
      </a>

    </div>
  </section>

  <!-- ============ FOOTER ============ -->
  <footer class="footer">
    <div class="footer-top">
      <div class="footer-brand">
        <img src="assets/logo/logo-official.png" alt="PLONARA" />
        <div>
          <div class="footer-brand-name">PLONARA<sup>®</sup></div>
          <div class="footer-brand-tagline">plus qu'une app</div>
        </div>
      </div>

      <div class="footer-cols">
        <div class="footer-col">
          <h4>Produit</h4>
          <a href="#showcase">Aperçu</a>
          <a href="#pricing">Tarifs</a>
          <a href="#download">Télécharger</a>
        </div>
        <div class="footer-col">
          <h4>Contact</h4>
          <a href="https://wa.me/212760898075" target="_blank" rel="noopener">WhatsApp · +212 760 898 075</a>
          <a href="/cdn-cgi/l/email-protection#aedec2c1c0cfdccfeec6c1dac3cfc7c280cdc1c3"><span class="__cf_email__" data-cfemail="88f8e4e7e6e9fae9c8e0e7fce5e9e1e4a6ebe7e5">[email&#160;protected]</span></a>
          <a href="/cdn-cgi/l/email-protection#7f0f1310111e0d1e3f17100b121e1613511c1012400c0a1d151a1c0b422c0a0f0f100d0b5a4d4f2f3330313e2d3e">Support technique</a>
          <a href="/cdn-cgi/l/email-protection#bfcfd3d0d1decddeffd7d0cbd2ded6d391dcd0d280cccaddd5dadccb82ecdacdc9d6dcda9a8d8fdcd0d2d2dacddcd6ded3">Service commercial</a>
        </div>
        <div class="footer-col">
          <h4>Légal</h4>
          <a href="#">Mentions légales</a>
          <a href="#">Conditions d'utilisation</a>
          <a href="#">Politique de confidentialité</a>
          <a href="#">Marque déposée</a>
        </div>
      </div>
    </div>

    <div class="footer-links">
      <div class="footer-links-row">

        <a href="https://wa.me/212760898075" target="_blank" rel="noopener" class="lnk lnk-wa" aria-label="WhatsApp" title="WhatsApp · +212 760 898 075">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.002-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
        </a>

        <a href="https://instagram.com/plonaraa" target="_blank" rel="noopener" class="lnk lnk-ig" aria-label="Instagram" title="@plonaraa">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
        </a>

        <a href="https://facebook.com/plonara" target="_blank" rel="noopener" class="lnk lnk-fb" aria-label="Facebook" title="facebook.com/plonara">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
        </a>

        <a href="https://tiktok.com/@plonara" target="_blank" rel="noopener" class="lnk lnk-tt" aria-label="TikTok" title="@plonara">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-5.2 1.74 2.89 2.89 0 012.31-4.64 2.93 2.93 0 01.88.13V9.4a6.84 6.84 0 00-1-.05A6.33 6.33 0 005.66 20.1a6.34 6.34 0 0010.86-4.43v-7a8.16 8.16 0 004.77 1.52v-3.4a4.85 4.85 0 01-1.7 0z"/></svg>
        </a>

        <a href="https://x.com/plonara_" target="_blank" rel="noopener" class="lnk lnk-x" aria-label="X (Twitter)" title="@plonara_">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
        </a>

        <a href="https://www.threads.com/@plonaraa" target="_blank" rel="noopener" class="lnk lnk-th" aria-label="Threads" title="@plonaraa">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.838 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"/></svg>
        </a>

        <a href="https://www.youtube.com/@plonara" target="_blank" rel="noopener" class="lnk lnk-yt" aria-label="YouTube" title="@plonara">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
        </a>

        <a href="https://t.me/plonara" target="_blank" rel="noopener" class="lnk lnk-tg" aria-label="Telegram" title="t.me/plonara">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
        </a>

      </div>
    </div>

    <div class="footer-legal">
      <div class="legal-warning">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L1 21h22L12 2zm0 4.99L19.53 19H4.47L12 6.99zM11 16h2v2h-2zm0-6h2v5h-2z"/></svg>
        <div class="legal-warning-body">
          <strong>Marque déposée — Tous droits réservés.</strong>
          <p>
            « <em>PLONARA</em> », le logo PLONARA et l'ensemble de l'application (code source, interfaces, contenu pédagogique, base de séances, génération IA, formats d'export) sont la <strong>propriété exclusive de Plonara Software</strong> et sont protégés au titre de la marque déposée et du droit d'auteur. Toute <strong>reproduction, imitation, copie partielle ou totale, modification, décompilation, ingénierie inverse, redistribution, revente ou exploitation</strong> non autorisée — sous quelque forme, support ou dénomination que ce soit — est strictement interdite et expose son auteur à des <strong>poursuites civiles et pénales</strong> conformément à la <strong>loi marocaine n° 17-97</strong> relative à la protection de la propriété industrielle, à la <strong>loi n° 2-00</strong> sur les droits d'auteur et droits voisins, ainsi qu'aux conventions internationales (Berne, OMPI, ADPIC).
          </p>
        </div>
      </div>

      <div class="footer-bottom">
        <span class="footer-copy">© 2026 PLONARA<sup>®</sup> — Plonara Software. Tous droits réservés.</span>
        <span class="footer-meta">Marque déposée · Code source protégé · RC Maroc</span>
      </div>
    </div>
  </footer>

  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
    /* ===== Carousel (album auto-play + arrows + dots) ===== */
    (function () {
      var slides = document.querySelectorAll('.carousel-slide');
      var dotsContainer = document.getElementById('carouselDots');
      var prev = document.querySelector('.carousel-prev');
      var next = document.querySelector('.carousel-next');
      if (!slides.length || !dotsContainer) return;

      var current = 0;
      var timer = null;
      var INTERVAL = 5000;

      for (var i = 0; i < slides.length; i++) {
        (function (idx) {
          var dot = document.createElement('button');
          dot.className = 'carousel-dot' + (idx === 0 ? ' active' : '');
          dot.setAttribute('aria-label', 'Image ' + (idx + 1));
          dot.addEventListener('click', function () { go(idx); });
          dotsContainer.appendChild(dot);
        })(i);
      }
      var dots = dotsContainer.querySelectorAll('.carousel-dot');

      function go(idx) {
        slides[current].classList.remove('active');
        dots[current].classList.remove('active');
        current = (idx + slides.length) % slides.length;
        slides[current].classList.add('active');
        dots[current].classList.add('active');
        reset();
      }
      function nextSlide() { go(current + 1); }
      function prevSlide() { go(current - 1); }
      function reset() {
        if (timer) clearInterval(timer);
        timer = setInterval(nextSlide, INTERVAL);
      }

      if (prev) prev.addEventListener('click', prevSlide);
      if (next) next.addEventListener('click', nextSlide);

      var carousel = document.querySelector('.carousel');
      if (carousel) {
        carousel.addEventListener('mouseenter', function () { if (timer) clearInterval(timer); });
        carousel.addEventListener('mouseleave', reset);
      }
      reset();
    })();

    /* ===== Pricing + Virement reference + Mailto proof ===== */
    (function () {
      var cards = document.querySelectorAll('.price-card');
      var totalEl = document.getElementById('checkout-total');
      var labelEl = document.getElementById('checkout-pack-label');
      var refEl = document.getElementById('ref-code');
      var proofBtn = document.getElementById('proofBtn');
      var nameInput = document.getElementById('buyerName');
      var emailInput = document.getElementById('buyerEmail');
      var emailConfirmInput = document.getElementById('buyerEmailConfirm');
      var emailMismatchMsg = document.getElementById('emailMismatchMsg');
      var WHATSAPP_NUMBER = '212760898075';
      var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

      var state = { price: 1190, label: '1 an', packId: 'YEARLY' };

      function buyer() {
        var name = (nameInput && nameInput.value || '').trim();
        var email = (emailInput && emailInput.value || '').trim();
        var emailC = (emailConfirmInput && emailConfirmInput.value || '').trim();
        var nameOk = name.length >= 2;
        var emailOk = EMAIL_RE.test(email);
        var matchOk = email.length > 0 && email.toLowerCase() === emailC.toLowerCase();
        return { name: name, email: email, nameOk: nameOk, emailOk: emailOk, matchOk: matchOk, allOk: nameOk && emailOk && matchOk };
      }
      function buildRef() {
        return 'PLNR-CLIENT-' + state.packId;
      }
      function buildWhatsapp() {
        var b = buyer();
        var msg = [
          'Bonjour PLONARA,',
          '',
          "J'ai effectué un virement instantané pour l'activation en ligne de mon compte :",
          '',
          '• Nom complet : ' + (b.name || '—'),
          '• Email du compte : ' + (b.email || '—'),
          '• Pack : ' + state.label + ' — ' + state.price + ' DH',
          '• Référence virement : ' + buildRef(),
          '',
          'Je joins juste après ce message la capture / le reçu du virement.',
          '',
          "Merci de vérifier le paiement et d'activer mon compte directement en ligne."
        ].join('\n');
        return 'https://wa.me/' + WHATSAPP_NUMBER + '?text=' + encodeURIComponent(msg);
      }
      function refreshButton() {
        if (!proofBtn) return;
        var b = buyer();
        if (b.allOk) {
          proofBtn.setAttribute('href', buildWhatsapp());
          proofBtn.setAttribute('target', '_blank');
          proofBtn.setAttribute('rel', 'noopener');
          proofBtn.classList.remove('is-disabled');
          proofBtn.removeAttribute('aria-disabled');
        } else {
          proofBtn.setAttribute('href', '#checkout');
          proofBtn.classList.add('is-disabled');
          proofBtn.setAttribute('aria-disabled', 'true');
        }
      }
      function refreshValidationUi() {
        var b = buyer();
        if (nameInput) {
          nameInput.classList.toggle('is-invalid', nameInput.value.length > 0 && !b.nameOk);
        }
        if (emailInput) {
          emailInput.classList.toggle('is-invalid', emailInput.value.length > 0 && !b.emailOk);
        }
        if (emailConfirmInput) {
          var showMismatch = emailConfirmInput.value.length > 0 && !b.matchOk;
          emailConfirmInput.classList.toggle('is-invalid', showMismatch);
          if (emailMismatchMsg) emailMismatchMsg.classList.toggle('is-visible', showMismatch);
        }
      }
      function sync() {
        if (totalEl) totalEl.textContent = state.price;
        if (labelEl) labelEl.textContent = state.label;
        if (refEl) refEl.textContent = buildRef();
        refreshButton();
      }

      [nameInput, emailInput, emailConfirmInput].forEach(function (el) {
        if (!el) return;
        el.addEventListener('input', function () { refreshValidationUi(); refreshButton(); });
        el.addEventListener('blur', refreshValidationUi);
      });
      if (emailConfirmInput) {
        var block = function (e) { e.preventDefault(); };
        emailConfirmInput.addEventListener('paste', block);
        emailConfirmInput.addEventListener('drop', block);
        emailConfirmInput.addEventListener('contextmenu', block);
      }
      if (proofBtn) {
        proofBtn.addEventListener('click', function (e) {
          if (!buyer().allOk) {
            e.preventDefault();
            refreshValidationUi();
            if (nameInput && !buyer().nameOk) nameInput.focus();
            else if (emailInput && !buyer().emailOk) emailInput.focus();
            else if (emailConfirmInput) emailConfirmInput.focus();
          }
        });
      }

      function selectCard(card) {
        cards.forEach(function (c) { c.classList.remove('is-selected'); });
        card.classList.add('is-selected');
        state.price = card.getAttribute('data-price');
        state.label = card.getAttribute('data-label');
        state.packId = (card.getAttribute('data-pack') || 'yearly').toUpperCase();
        sync();
      }

      cards.forEach(function (card) {
        card.addEventListener('click', function (e) {
          if (e.target.closest('.js-pick-pack')) return;
          selectCard(card);
        });
        var btn = card.querySelector('.js-pick-pack');
        if (!btn) return;
        btn.addEventListener('click', function (e) {
          e.preventDefault();
          selectCard(card);
          var target = document.getElementById('checkout');
          if (target) {
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            target.classList.remove('checkout-flash');
            void target.offsetWidth;
            target.classList.add('checkout-flash');
          }
        });
      });
      sync();
    })();

    /* ===== Copy buttons (RIB, reference) ===== */
    (function () {
      var btns = document.querySelectorAll('.vir-copy');
      btns.forEach(function (btn) {
        btn.addEventListener('click', function () {
          var target = document.getElementById(btn.getAttribute('data-copy'));
          if (!target) return;
          var text = target.textContent.trim();
          if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text);
          } else {
            var ta = document.createElement('textarea');
            ta.value = text; document.body.appendChild(ta); ta.select();
            try { document.execCommand('copy'); } catch (e) {}
            document.body.removeChild(ta);
          }
          var old = btn.textContent;
          btn.textContent = 'Copié ✓';
          btn.classList.add('copied');
          setTimeout(function () {
            btn.textContent = old;
            btn.classList.remove('copied');
          }, 1500);
        });
      });
    })();
  </script>

<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4513226cdae34746b4dedf0b4dfa099e1781791509496" integrity="sha512-ZE9pZaUXND66v380QUtch/5sE9tPFh2zg45pR2PB0CVkCtOREv2AJKkSidISWkysEuQ0EH8faUU5du78bx87UQ==" data-cf-beacon='{"version":"2024.11.0","token":"8aeff0e6d9714b5fa6f72df9ab297dc8","r":1}' crossorigin="anonymous"></script>
</body>
</html>
