Outiref

Code source de l'URL : https://www.dlcscan.fr/index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="DLCScan — Le SaaS qui contrôle les DLC/DDM et dates de péremption en magasin grâce à l'IA. Alimentaire, pharmacie, animalerie, boulangerie… Une photo suffit." />
  <meta name="theme-color" content="#0b0a1a" />
  <title>DLCScan — Une photo. Vos DLC sous contrôle.</title>
  <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=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
  <script src="https://unpkg.com/lucide@0.511.0/dist/umd/lucide.min.js" defer></script>
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237c3aed'/%3E%3Cstop offset='1' stop-color='%233b82f6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='8' fill='url(%23g)'/%3E%3Cpath d='M9 12h14M9 16h14M9 20h8' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SPXQP4XF80"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-SPXQP4XF80');
</script>
</head>
<body>

  <!-- NAV -->
  <header class="nav">
    <div class="container nav__inner">
      <a href="#" class="logo">
        <span class="logo__mark" aria-hidden="true">
          <svg viewbox="0 0 32 32" width="28" height="28"><defs><lineargradient id="lg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#a78bfa"/><stop offset="1" stop-color="#60a5fa"/></lineargradient></defs><rect width="32" height="32" rx="9" fill="url(#lg)"/><path d="M8 11l4 4 12-8" stroke="#0b0a1a" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="22" cy="22" r="4" fill="none" stroke="#0b0a1a" stroke-width="2.5"/><path d="M25 25l3 3" stroke="#0b0a1a" stroke-width="2.5" stroke-linecap="round"/></svg>
        </span>
        <span class="logo__text">DLC<span>Scan</span></span>
      </a>

      <nav class="nav__links" aria-label="Navigation principale">
        <a href="#fonctionnalites">Fonctionnalités</a>
        <a href="#fonctionnement">Comment ça marche</a>
        <a href="#tarifs">Tarifs</a>
        <a href="#faq">FAQ</a>
      </nav>

      <button class="nav__burger" aria-label="Ouvrir le menu" aria-expanded="false">
        <span></span><span></span><span></span>
      </button>
    </div>
  </header>

  <!-- HERO -->
  <section class="hero">
    <div class="hero__bg" aria-hidden="true">
      <div class="hero__glow hero__glow--1"></div>
      <div class="hero__glow hero__glow--2"></div>
      <div class="hero__grid"></div>
    </div>

    <div class="container hero__inner">
      <div class="hero__copy">
        <span class="pill">
          <i data-lucide="sparkles" class="icon icon--pill" aria-hidden="true"></i>
          <span class="pill__dot"></span>
          Propulsé par IA 
        </span>

        <h1 class="hero__title">
          Une photo suffit<br />
          et vos <span class="gradient-text">DLC sont sous contrôle.</span>
        </h1>

        <p class="hero__lead">
          Photographiez l'étiquette : l'IA lit la DLC/DDM, vous validez, c'est enregistré.
          Plus de saisie manuelle, plus d'oublis. Votre équipe gagne du temps,
          votre magasin réduit les pertes.
        </p>

        <div class="hero__cta availability-block" aria-label="Disponibilité des applications">
          <p class="availability-block__status">
            <i data-lucide="clock" class="icon icon--status" aria-hidden="true"></i>
            Bientôt disponible
          </p>
           <div class="app-stores">
            <div class="app-store-badge" aria-disabled="true">
              <i data-lucide="apple" class="app-store-badge__icon" aria-hidden="true"></i>
              <span>
                <span class="app-store-badge__label">App Store</span>
                <span class="app-store-badge__status">Bientôt disponible</span>
              </span>
            </div>
            <div class="app-store-badge" aria-disabled="true">
              <i data-lucide="play" class="app-store-badge__icon" aria-hidden="true"></i>
              <span>
                <span class="app-store-badge__label">Google Play</span>
                <span class="app-store-badge__status">Bientôt disponible</span>
              </span>
            </div>
          </div>
        </div>

        <ul class="hero__bullets">
          <li><i data-lucide="badge-check" class="icon icon--bullet" aria-hidden="true"></i> Sans engagement</li>
          <li><i data-lucide="smartphone" class="icon icon--bullet" aria-hidden="true"></i> Mobile, tablette, ordinateur</li>
          <li><i data-lucide="zap" class="icon icon--bullet" aria-hidden="true"></i> Installation en 5 min</li>
        </ul>
      </div>

      <!-- HERO — aperçu illustré (non interactif, sans caméra ni IA en direct) -->
      <figure class="hero__demo" id="apercu" aria-labelledby="hero-mockup-caption">
        <span class="phone-mockup-badge">Aperçu illustré</span>
        <div class="phone">
          <div class="phone__notch"></div>

          <div class="phone__screen phone__screen--app">
            <div class="app-flow" id="heroAppFlow" aria-live="polite">
              <div class="app-slide is-active" data-slide="camera">
                <img
                  class="app-slide__img"
                  src="screenshots/Screenshot_2026-06-04-18-18-19-805_com.android.camera.jpg"
                  alt=""
                  width="292"
                  height="520"
                  decoding="async"
                />
                <div class="app-slide__flash" id="shutterFlash" aria-hidden="true"></div>
              </div>
              <div class="app-slide" data-slide="burst">
                <img
                  class="app-slide__img"
                  src="screenshots/Screenshot_2026-06-04-18-16-05-971_com.dlcscan.app.jpg"
                  alt=""
                  width="292"
                  height="520"
                  decoding="async"
                />
              </div>
              <div class="app-slide" data-slide="form">
                <img
                  class="app-slide__img"
                  src="screenshots/Screenshot_2026-06-04-18-16-21-000_com.dlcscan.app.jpg"
                  alt=""
                  width="292"
                  height="520"
                  decoding="async"
                />
              </div>
            </div>
            <p class="app-flow__step" id="flowStep">1. Photographiez l'étiquette</p>
          </div>
        </div>

        <!-- Floating cards -->
        <div class="float-card float-card--metric">
          <div class="float-card__icon float-card__icon--green">
            <i data-lucide="trending-down" aria-hidden="true"></i>
          </div>
          <div>
            <div class="float-card__value">-38%</div>
            <div class="float-card__label">de produits périmés en moins</div>
          </div>
        </div>

        <div class="float-card float-card--time">
          <div class="float-card__icon float-card__icon--blue">
            <i data-lucide="timer" aria-hidden="true"></i>
          </div>
          <div>
            <div class="float-card__value">2–5 s</div>
            <div class="float-card__label">après la photo</div>
          </div>
        </div>

        <figcaption id="hero-mockup-caption" class="hero__mockup-caption">
          Comme dans l'app : <strong>photo</strong> de l'étiquette, envoi en <strong>rafale</strong>, puis fiche préremplie par l'IA que vous <strong>validez</strong> avant enregistrement.
        </figcaption>
      </figure>
    </div>
  </section>

  <!-- LOGO STRIP / TRUST -->
  <section class="trust">
    <div class="container trust__inner">
      <p class="trust__label">Pensé pour tout commerce avec des dates de péremption à surveiller</p>
      <p class="trust__lead">Alimentaire, santé, animalerie, boulangerie… une seule application pour vos équipes en rayon.</p>
      <div class="trust__logos" role="list">
        <span role="listitem">Supérette</span>
        <span role="listitem">Bio shop</span>
        <span role="listitem">Épicerie fine</span>
        <span role="listitem">Primeur</span>
        <span role="listitem">Boucherie</span>
        <span role="listitem">Boulangerie</span>
        <span role="listitem">Pâtisserie</span>
        <span role="listitem">Caviste</span>
        <span role="listitem">Pharmacie</span>
        <span role="listitem">Animalerie</span>
      </div>
    </div>
  </section>

  <!-- PROBLEM -->
  <section class="problem">
    <div class="container problem__inner">
      <div class="section-head">
        <span class="eyebrow">Le problème</span>
        <h2>La gestion des DLC vous fait perdre <span class="gradient-text">temps et argent</span>.</h2>
      </div>

      <div class="problem__grid">
        <article class="problem-card">
          <div class="problem-card__icon problem-card__icon--amber">
            <i data-lucide="keyboard" aria-hidden="true"></i>
          </div>
          <h3>Saisie manuelle interminable</h3>
          <p>Chaque date tapée à la main, chaque produit, chaque jour. Une perte de temps quotidienne pour vos équipes.</p>
        </article>
        <article class="problem-card">
          <div class="problem-card__icon problem-card__icon--rose">
            <i data-lucide="trending-down" aria-hidden="true"></i>
          </div>
          <h3>Gaspillage alimentaire et réduction de marge inévitables</h3>
          <p>
            En France, la distribution représente environ 1,39&nbsp;million de tonnes de gaspillage alimentaire par an,
            souvent liées aux dates de péremption et aux stocks frais (baromètre Comerso, 2025).
            Sans suivi, les produits périmés s'accumulent en rayon et grèvent votre marge.
          </p>
        </article>
        <article class="problem-card">
          <div class="problem-card__icon problem-card__icon--red">
            <i data-lucide="shield-alert" aria-hidden="true"></i>
          </div>
          <h3>Risque de non-conformité</h3>
          <p>Un produit périmé encore en vente, et c'est votre réputation (et, selon votre secteur, votre conformité réglementaire) qui en pâtit.</p>
        </article>
      </div>
      <p class="problem__sources">
        Chiffres nationaux : synthèse
        <a href="https://greenly.earth/blog/secteurs/gaspillage-alimentaire-chiffres-enjeux-et-conseils" target="_blank" rel="noopener noreferrer">Greenly</a>
        (ADEME, Assemblée nationale, Comerso).
      </p>
    </div>
  </section>

  <!-- FEATURES -->
  <section class="features" id="fonctionnalites">
    <div class="container">
      <div class="section-head section-head--center">
        <span class="eyebrow">Fonctionnalités</span>
        <h2>Tout ce qu'il faut pour <span class="gradient-text">piloter vos DLC</span>.</h2>
        <p class="section-head__lead">
          Une plateforme complète, simple et professionnelle. Conçue avec et pour les équipes en magasin.
        </p>
      </div>

      <div class="features__grid">

        <article class="feature feature--lg">
          <div class="feature__head">
            <span class="feature__tag"><i data-lucide="camera" aria-hidden="true"></i> Exclusivité IA</span>
            <h3>Saisie par photo, validée par vous</h3>
            <p>Photographiez l'étiquette. L'IA propose la date DLC, le nom et le code barre: vous relisez et validez avant enregistrement.</p>
          </div>
          <div class="feature__visual feature__visual--flow">
            <p class="feature__visual-note">Schéma illustratif</p>
            <div class="mini-flow">
              <div class="mini-flow__step">
                <span class="mini-flow__icon" aria-hidden="true"><i data-lucide="camera"></i></span>
                <span class="mini-flow__label">Photo</span>
              </div>
              <div class="mini-flow__arrow" aria-hidden="true"><i data-lucide="arrow-right"></i></div>
              <div class="mini-flow__step">
                <span class="mini-flow__icon" aria-hidden="true"><i data-lucide="send"></i></span>
                <span class="mini-flow__label">Envoi rafale</span>
              </div>
              <div class="mini-flow__arrow" aria-hidden="true"><i data-lucide="arrow-right"></i></div>
              <div class="mini-flow__step mini-flow__step--form">
                <div class="mini-flow__field"><span>Nom</span><strong>Rull de cabra</strong></div>
                <div class="mini-flow__field"><span>DLC</span><strong>21/07/2026</strong></div>
                <div class="mini-flow__field"><span>Code</span><strong>120212726</strong></div>
              </div>
            </div>
          </div>
        </article>

        <article class="feature">
          <div class="feature__icon">
            <i data-lucide="calendar-days" aria-hidden="true"></i>
          </div>
          <h3>Page "DLC"</h3>
          <p>Tous les produits à contrôler en un coup d'œil, classés par urgence avec l'affichage du rayon, le nom du produit et la date DLC.
            <br>Il est possible de modifier les quantités ou de retirer le produit.
          </p>
        </article>

        <article class="feature feature--colors">
          <div class="feature__icon">
            <i data-lucide="palette" aria-hidden="true"></i>
          </div>
          <h3>Code couleur par plages</h3>
          <p>
            Chaque produit est classé selon le nombre de jours avant la DLC/DDM.
            Du rouge (périmé) au vert (sous contrôle), en passant par les urgences J0, J+1, J+2…
          </p>
          <ul class="color-scale" aria-label="Échelle des couleurs DLCScan">
            <li class="color-scale__item color-scale__item--red">
              <span class="color-scale__dot" aria-hidden="true"></span>
              <span class="color-scale__label"><strong>Rouge</strong> — périmé (avant J0)</span>
              <span class="color-scale__hint">À retirer</span>
            </li>
            <li class="color-scale__item color-scale__item--orange">
              <span class="color-scale__dot" aria-hidden="true"></span>
              <span class="color-scale__label"><strong>Orange</strong> — J0 (aujourd'hui)</span>
              <span class="color-scale__hint">Urgence immédiate</span>
            </li>
            <li class="color-scale__item color-scale__item--yellow">
              <span class="color-scale__dot" aria-hidden="true"></span>
              <span class="color-scale__label"><strong>Jaune</strong> — J+1 (demain)</span>
              <span class="color-scale__hint">À traiter en priorité</span>
            </li>
            <li class="color-scale__item color-scale__item--lime">
              <span class="color-scale__dot" aria-hidden="true"></span>
              <span class="color-scale__label"><strong>Vert clair</strong> — J+2 à J+3</span>
              <span class="color-scale__hint">Surveillance rapprochée</span>
            </li>
            <li class="color-scale__item color-scale__item--green">
              <span class="color-scale__dot" aria-hidden="true"></span>
              <span class="color-scale__label"><strong>Vert</strong> — J+4 et au-delà</span>
              <span class="color-scale__hint">Sous contrôle</span>
            </li>
          </ul>
          
        </article>


        <article class="feature">
          <div class="feature__icon">
            <i data-lucide="chart-column-increasing" aria-hidden="true"></i>
          </div>
          <h3>Stats & comparatifs</h3>
          <p>Mois N vs N-1, année N vs N-1. Pilotez à la donnée.</p>
        </article>

        <article class="feature">
          <div class="feature__icon">
            <i data-lucide="file-text" aria-hidden="true"></i>
          </div>
          <h3>Exports PDF</h3>
          <p>Rapports journaliers, mensuels, comparatifs. Prêts à transmettre.</p>
        </article>

        <article class="feature">
          <div class="feature__icon">
            <i data-lucide="monitor-smartphone" aria-hidden="true"></i>
          </div>
          <h3>Multi-supports</h3>
          <p>PWA disponible sur navigateur (mobile, tablette, ordinateur). Apps iOS et Android : <strong>bientôt</strong> sur les stores.</p>
        </article>

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

  <!-- HOW IT WORKS -->
  <section class="how" id="fonctionnement">
    <div class="container">
      <div class="section-head section-head--center">
        <span class="eyebrow">Comment ça marche</span>
        <h2>Trois étapes. <span class="gradient-text">5 secondes maximum.</span></h2>
      </div>

      <div class="how__grid">
        <article class="step">
          <div class="step__number">01</div>
          <div class="step__icon">
            <i data-lucide="camera" aria-hidden="true"></i>
          </div>
          <h3>Photographiez l'étiquette</h3>
          <p>Depuis le mobile ou la tablette de votre équipe, en rayon, à l'arrivée du produit. vous pouvez prendre jusqu'à 2 photos pour un même produit: Par exemple une photo de la date DLC et une photo du code barre pour extraire le nom du produit automatiquement.</p>
        </article>

        <div class="step-arrow" aria-hidden="true"><i data-lucide="arrow-right"></i></div>

        <article class="step">
          <div class="step__number">02</div>
          <div class="step__icon">
            <i data-lucide="sparkles" aria-hidden="true"></i>
          </div>
          <h3>Envoyez — l'IA remplit la fiche</h3>
          <p>En mode rafale, regroupez vos photos puis envoyez. Nom, DLC/DDM, code-barres : vous relisez et enregistrez en 1 clic.</p>
        </article>

        <div class="step-arrow" aria-hidden="true"><i data-lucide="arrow-right"></i></div>

        <article class="step">
          <div class="step__number">03</div>
          <div class="step__icon">
            <i data-lucide="layout-dashboard" aria-hidden="true"></i>
          </div>
          <h3>Pilotez vos rayons</h3>
          <p>Alertes, code couleur, actions, stats. Tout est en place pour décider vite.</p>
        </article>
      </div>
    </div>
  </section>

  <!-- COMPARISON -->
  <section class="compare">
    <div class="container">
      <div class="section-head section-head--center">
        <span class="eyebrow">Avant / Après</span>
        <h2>Ce que change <span class="gradient-text">DLCScan</span> au quotidien.</h2>
      </div>

      <div class="compare__grid">
        <div class="compare-col compare-col--before">
          <div class="compare-col__head">Sans DLCScan</div>
          <ul>
            <li><span class="compare-icon compare-icon--x"><i data-lucide="circle-x" aria-hidden="true"></i></span> Saisie manuelle de chaque date</li>
            <li><span class="compare-icon compare-icon--x"><i data-lucide="circle-x" aria-hidden="true"></i></span> Contrôle visuel rayon par rayon</li>
            <li><span class="compare-icon compare-icon--x"><i data-lucide="circle-x" aria-hidden="true"></i></span> Produits périmés non suivis</li>
            <li><span class="compare-icon compare-icon--x"><i data-lucide="circle-x" aria-hidden="true"></i></span> Décisions de remise au pifomètre</li>
            <li><span class="compare-icon compare-icon--x"><i data-lucide="circle-x" aria-hidden="true"></i></span> Rapports inexistants</li>
          </ul>
        </div>

        <div class="compare-col compare-col--after">
          <div class="compare-col__head">Avec DLCScan</div>
          <ul>
            <li><span class="compare-icon compare-icon--check"><i data-lucide="circle-check-big" aria-hidden="true"></i></span> Une photo, l'IA fait le reste</li>
            <li><span class="compare-icon compare-icon--check"><i data-lucide="circle-check-big" aria-hidden="true"></i></span> Page "DLC" priorisée</li>
            <li><span class="compare-icon compare-icon--check"><i data-lucide="circle-check-big" aria-hidden="true"></i></span> Produits périmés mesurés, en baisse</li>
            <li><span class="compare-icon compare-icon--check"><i data-lucide="circle-check-big" aria-hidden="true"></i></span> Statistiques et comparatifs</li>
            <li><span class="compare-icon compare-icon--check"><i data-lucide="circle-check-big" aria-hidden="true"></i></span> Exports PDF en un clic</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- PRICING -->
  <section class="pricing" id="tarifs">
    <div class="container">
      <div class="section-head section-head--center">
        <span class="eyebrow">Tarifs</span>
        <h2>Magasin ou <span class="gradient-text">frigo à la maison</span>.</h2>
        <p class="section-head__lead">
          Les commerçants s'abonnent pour des scans illimités. Les particuliers achètent un pack de scans quand ils en ont besoin.
        </p>
      </div>

      <div class="pricing__stack">
        <div class="pricing__grid">
          <div class="price-card">
            <div class="price-card__badge">Professionnels</div>
            <div class="price-card__price">
              <span class="price-card__amount">29 €</span>
              <span class="price-card__unit">HT / mois / magasin</span>
            </div>
            <p class="price-card__desc">
              Supérette, bio, épicerie, boucherie, caviste… Tout DLCScan, sans limite d'utilisateurs ni de produits.
              <span class="price-card__launch-note">Offre de lancement, limitée dans le temps.</span>
            </p>

            <ul class="price-card__list">
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> <strong>20 scans IA offerts</strong> pour tester</li>
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> Scan IA illimité (abonné)</li>
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> Utilisateurs illimités</li>
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> Mobile, tablette, ordinateur (PWA · apps iOS/Android)</li>
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> Stats, comparatifs, exports PDF</li>
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> Synchronisation cloud</li>
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> Support inclus</li>
            </ul>

            <p class="price-card__footnote">20 scans gratuits · Puis 29 € HT/mois · Sans engagement</p>
          </div>

          <div class="price-card price-card--b2c">
            <div class="price-card__badge price-card__badge--b2c">Particuliers</div>
            <div class="price-card__price">
              <span class="price-card__amount">4,99 €</span>
              <span class="price-card__unit">TTC · pack 100 scans</span>
            </div>
            <p class="price-card__desc">
              Gérez les DLC de votre frigo ou placard : photo de l'étiquette, l'IA extrait la date, vous validez.
              <span class="price-card__launch-note">Pas d'abonnement — rachetez un pack quand vous voulez.</span>
            </p>

            <ul class="price-card__list">
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> <strong>20 scans IA offerts</strong> à l'inscription</li>
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> Pack <strong>100 scans</strong> (achat unique dans l'app)</li>
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> Crédits <strong>sans expiration</strong></li>
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> Code couleur (J0, J+1, alertes…)</li>
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> App iOS &amp; Android (Google Play / App Store)</li>
              <li><i data-lucide="check" class="icon icon--list" aria-hidden="true"></i> Synchronisation cloud</li>
            </ul>

            <p class="price-card__footnote">Idéal pour un usage occasionnel · Pas de prélèvement mensuel</p>
          </div>
        </div>

        <div class="pricing__reassurance">
          <h4><i data-lucide="shield-check" class="icon icon--heading" aria-hidden="true"></i> Tranquillité d'esprit</h4>
          <p>Vos données sont conservées sur nos serveurs en France, chiffrement TLS, RGPD-compliant et ne sont jamais vendues ou partagées à des tiers.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section class="faq" id="faq">
    <div class="container">
      <div class="section-head section-head--center">
        <span class="eyebrow">FAQ</span>
        <h2>Vos questions, <span class="gradient-text">nos réponses</span>.</h2>
      </div>

      <div class="faq__list">
        <details class="faq-item">
          <summary>L'IA fonctionne-t-elle sur tous les types d'étiquettes ?</summary>
          <p>Oui. DLCScan reconnaît les étiquettes industrielles standards comme les étiquettes imprimées en magasin. L'IA est entraînée à lire les formats de dates français (JJ/MM/AAAA, JJ.MM.AA, "À consommer jusqu'au…", "DDM…").</p>
        </details>

        <details class="faq-item">
          <summary>Comment fonctionne le code couleur (J0, J+2, vert…) ?</summary>
          <p>
            DLCScan calcule automatiquement l'écart entre aujourd'hui et la date DLC/DDM du produit.
            <strong>Rouge</strong> : date dépassée — à retirer.
            <strong>Orange</strong> : expire aujourd'hui (J0).
            <strong>Jaune</strong> : expire demain (J+1).
            <strong>Vert clair</strong> : J+2 à J+3 — à surveiller.
            <strong>Vert</strong> : J+4 et au-delà — pas d'urgence immédiate.
           
          </p>
        </details>

        <details class="faq-item">
          <summary>Et si la photo est mal cadrée ou floue ?</summary>
          <p>L'application vous alerte et propose une correction manuelle rapide. Toutes les données extraites par l'IA sont relisibles et corrigibles avant validation finale.</p>
        </details>

        <details class="faq-item">
          <summary>Mes équipes vont-elles s'y retrouver ?</summary>
          <p>L'interface est conçue pour des équipes en magasin : code couleur par plages (rouge → vert), actions rapides et page "DLC" qui remonte l'urgent en premier. Prise en main en moins de 10 minutes, sans formation longue.</p>
        </details>

        <details class="faq-item">
          <summary>Comment fonctionne le paiement ?</summary>
          <p>
            À l'inscription, tout le monde bénéficie de <strong>20 scans IA gratuits</strong> pour tester.
            <strong>Commerçants</strong> : abonnement à <strong>29 € HT</strong> par magasin et par mois (offre de lancement),
            scans illimités, sans engagement — paiement via l'app (App Store / Google Play) ou la version web.
            <strong>Particuliers</strong> : pas d'abonnement ; vous achetez un <strong>pack de 100 scans à 4,99 € TTC</strong>
            dans l'application quand vous en avez besoin. Les crédits ne expirent pas.
            En cas d'impayé (pro), le compte est bloqué puis réactivé dès régularisation, sans perte de données.
          </p>
        </details>

        <details class="faq-item">
          <summary>Puis-je utiliser DLCScan pour mon frigo à la maison ?</summary>
          <p>
            Oui. Créez un compte <strong>particulier</strong> dans l'app : vous disposez de 20 scans gratuits,
            puis vous pouvez acheter un pack de 100 scans IA (4,99 €) sans abonnement mensuel.
            Pratique pour suivre les dates sur les produits de votre cuisine.
          </p>
        </details>

        <details class="faq-item">
          <summary>Mes données sont-elles en sécurité ?</summary>
          <p>Hébergement en France, chiffrement TLS, RGPD-compliant. Vos données restent les vôtres et sont exportables à tout moment.</p>
        </details>

        <details class="faq-item">
          <summary>Faut-il une connexion permanente ?</summary>
          <p>Pour cette v1, une connexion internet est requise mais nous prévoyons de rendre l'application hors-ligne dans une prochaine version (sauf l'analyse IA).</p>
        </details>
      </div>
    </div>
  </section>

  <!-- FINAL CTA -->
  <section class="cta-final" id="contact">
    <div class="container">
      <div class="cta-final__card">
        <div class="cta-final__copy">
          <h2>Prenez 10 secondes. <span class="gradient-text">Réduisez les produits périmés en rayon.</span></h2>
          <p>DLCScan arrive bientôt sur mobile. Contactez-nous pour une démo ou pour être informé de la mise en ligne.</p>
        </div>
        <div class="cta-final__actions availability-block availability-block--card">
          <p class="availability-block__status">
            <i data-lucide="clock" class="icon icon--status" aria-hidden="true"></i>
            Bientôt disponible
          </p>
          <div class="app-stores">
            <div class="app-store-badge" aria-disabled="true">
              <i data-lucide="apple" class="app-store-badge__icon" aria-hidden="true"></i>
              <span>
                <span class="app-store-badge__label">App Store</span>
                <span class="app-store-badge__status">Bientôt disponible</span>
              </span>
            </div>
            <div class="app-store-badge" aria-disabled="true">
              <i data-lucide="play" class="app-store-badge__icon" aria-hidden="true"></i>
              <span>
                <span class="app-store-badge__label">Google Play</span>
                <span class="app-store-badge__status">Bientôt disponible</span>
              </span>
            </div>
          </div>
          <a href="mailto:contact@DLCScan.fr" class="btn btn--ghost btn--lg btn--block">
            <i data-lucide="messages-square" class="icon icon--btn" aria-hidden="true"></i>
            Demander une démo
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- FOOTER -->
  <footer class="footer">
    <div class="container footer__inner">
      <div class="footer__brand">
        <a href="#" class="logo">
          <span class="logo__mark" aria-hidden="true">
            <svg viewbox="0 0 32 32" width="24" height="24"><defs><lineargradient id="lg2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#a78bfa"/><stop offset="1" stop-color="#60a5fa"/></lineargradient></defs><rect width="32" height="32" rx="9" fill="url(#lg2)"/><path d="M8 11l4 4 12-8" stroke="#0b0a1a" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="22" cy="22" r="4" fill="none" stroke="#0b0a1a" stroke-width="2.5"/><path d="M25 25l3 3" stroke="#0b0a1a" stroke-width="2.5" stroke-linecap="round"/></svg>
          </span>
          <span class="logo__text">DLC<span>Scan</span></span>
        </a>
        <p>Le contrôle DLC/DDM pour votre magasin.</p>
        <p class="footer__availability">
          <i data-lucide="clock" class="icon icon--status" aria-hidden="true"></i>
          Bientôt disponible sur l'App Store et Google Play
        </p>
      </div>

      <div class="footer__cols">
        <div>
          <h5>Produit</h5>
          <a href="#fonctionnalites">Fonctionnalités</a>
          <a href="#fonctionnement">Comment ça marche</a>
          <a href="#tarifs">Tarifs</a>
          <a href="#faq">FAQ</a>
        </div>
       
        <div>
          <h5>Légal</h5>
          <a href="mentions-legales.html">Mentions légales</a>
          <a href="cgu.html">CGU / CGV</a>
          <a href="privacy.html">Politique de confidentialité</a>
        </div>
      </div>
    </div>

    <div class="container footer__bottom">
      <span>© <span id="year"></span> DLCScan. Tous droits réservés.</span>
      <span>Conçu en France · Hébergement français · Propulsé par Mistral AI</span>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>