Concevoir & modéliser une application web (3–5 jours) | ASTERNOVA


<link rel="preconnect" href="https://images.unsplash.com" crossorigin>
<style>
  :root{
    --bg:#0b1022; --ink:#eaf1ff; --muted:#a9b6d6;
    --paper:#0f172a; --panel:#0e1530;
    --brand:#22c55e; --brand2:#2563eb; --accent:#60a5fa;
    --ok:#22c55e; --border:rgba(149,168,255,.16); --border-strong:rgba(149,168,255,.28);
    --radius:18px; --shadow:0 24px 60px rgba(2,6,23,.45), inset 0 1px 0 rgba(255,255,255,.02);
    --wrap:1180px;
  }
  @media (prefers-color-scheme: light){
    :root{
      --bg:#f6f8ff; --ink:#0f172a; --muted:#58657d;
      --paper:#ffffff; --panel:#ffffff;
      --brand:#16a34a; --brand2:#2563eb; --accent:#4f46e5;
      --border:rgba(11,28,80,.10); --border-strong:rgba(11,28,80,.18);
      --shadow:0 18px 48px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.6);
    }
  }

  html,body{background:radial-gradient(900px 420px at 90% -10%, rgba(37,99,235,.12), transparent 50%), var(--bg);color:var(--ink)}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

  /* ========== SURFACES MODERNES ========== */
  .surface{
    position:relative;border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
    box-shadow:var(--shadow);
  }
  .surface::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    padding:1px;background:
      linear-gradient(180deg, rgba(96,165,250,.55), rgba(34,197,94,.55)) border-box;
    -webkit-mask:
      linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity:.35;
  }
  .surface:hover{transform:translateY(-1px);transition:transform .2s ease}
  .inner{padding:18px}

  /* ========== HERO ========== */
  #hero-webapp{position:relative;isolation:isolate}
  #hero-webapp .hero-media{position:relative;height:380px;overflow:hidden;border-radius:22px}
  #hero-webapp .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  #hero-webapp .hero-media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(0deg, rgba(7,12,26,.92), rgba(7,12,26,.55));
  }
  #hero-webapp .hero-content{margin-top:-120px;position:relative}
  #hero-webapp .brand{display:flex;align-items:center;gap:12px}
  #hero-webapp .brand img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
  #hero-webapp h1{
    margin:12px 0 8px;font-size:clamp(26px,4vw,38px);line-height:1.15;color:#fff;
    display:inline-block;padding:10px 14px;border-radius:14px;
    background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
    text-shadow:0 2px 10px rgba(0,0,0,.35);
  }
  #hero-webapp .lead{max-width:980px;color:#e9f2ff;line-height:1.6;text-shadow:0 1px 6px rgba(0,0,0,.25)}
  #hero-webapp .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
  .badge{
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.26);
    color:#fff;padding:.4rem .75rem;border-radius:999px;font-weight:800;font-size:.9rem
  }
  .kpis{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
  .kpi{
    flex:1 1 180px;text-align:center;padding:12px;border-radius:14px;
    background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.26);
    color:#fff;backdrop-filter:blur(8px)
  }
  .kpi strong{display:block;font-size:22px;font-weight:900}
  .hero-note{margin-top:6px;color:#cfe6ff;font-size:12.5px}

  /* ========== LAYOUT ========== */
  .container{max-width:var(--wrap);margin:-20px auto 80px;padding:0 20px}
  .shell{display:grid;grid-template-columns:1.08fr .92fr;gap:22px}
  @media (max-width:1024px){.shell{grid-template-columns:1fr}}

  h2{margin:0 0 8px;color:#cfe0ff}
  @media (prefers-color-scheme: light){ h2{color:#0a3a60} }

  /* Tabs */
  .tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding:0 10px}
  .tab{appearance:none;background:transparent;border:0;border-bottom:3px solid transparent;padding:.8rem 1rem;font-weight:900;color:#a8baff;cursor:pointer}
  .tab[aria-selected="true"]{border-color:var(--accent);color:#e6f0ff}
  @media (prefers-color-scheme: light){ .tab{color:#214161}.tab[aria-selected="true"]{color:#0a3a60} }
  .panel{padding:18px}

  /* Lists */
  .list-check{display:grid;gap:8px;margin:10px 0}
  .list-check li{list-style:none;position:relative;padding-left:26px}
  .list-check li::before{
    content:"";position:absolute;left:0;top:.35rem;width:16px;height:16px;border-radius:50%;
    background:conic-gradient(var(--ok) 0 75%, transparent 75% 100%);box-shadow:inset 0 0 0 2px rgba(34,197,94,.25)
  }

  /* ========== PRICING ========== */
  .duration-toggle,.vat-toggle{display:flex;align-items:center;gap:.45rem;margin:6px 0 12px}
  .dur-btn,.toggle-btn{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--border);padding:.38rem .7rem;border-radius:.7rem;font-weight:800;cursor:pointer;color:var(--ink)
  }
  .dur-btn.is-active,.toggle-btn.is-active{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#041226;border-color:transparent}

  .pricing{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media (max-width:900px){.pricing{grid-template-columns:1fr}}
  .plan{position:relative;border-radius:16px;overflow:hidden}
  .plan .card{
    border-radius:inherit;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
    border:1px solid var(--border);box-shadow:var(--shadow)
  }
  .plan .card::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    padding:1px;background:linear-gradient(180deg, rgba(96,165,250,.55), rgba(34,197,94,.55)) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;
  }
  .plan header{padding:16px 16px 8px}
  .plan header h3{margin:.2rem 0 .2rem;font-size:1.1rem}
  .subtitle{margin:0;color:var(--muted);font-size:.95rem}

  .price{display:flex;flex-direction:column;gap:.2rem;margin:8px 0 8px;padding:0 16px}
  .price-row{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:nowrap}
  .label{color:var(--muted);white-space:nowrap}
  .amount{
    font-size:clamp(1.25rem,4.2vw,1.7rem);font-weight:900;color:var(--brand2);
    white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums lining-nums;
    font-feature-settings:"tnum" 1,"lnum" 1;line-height:1.05;
  }
  .note{color:var(--muted);font-size:.9rem;padding:0 16px}

  .features{list-style:none;margin:10px 0;padding:0 16px 12px;display:grid;gap:.35rem}
  .features li{padding-left:1.1rem;position:relative}
  .features li::before{content:"";position:absolute;left:0;top:.45rem;width:.6rem;height:.6rem;border-radius:50%;background:conic-gradient(var(--ok) 0 75%, transparent 75% 100%)}

  .actions{display:flex;gap:.6rem;flex-wrap:wrap;padding:0 16px 16px}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:.7rem 1rem;border-radius:12px;font-weight:900;cursor:pointer;text-decoration:none;border:0}
  .btn-primary{background:linear-gradient(100deg,var(--brand),var(--brand2));color:#041226}
  .btn-outline{background:transparent;color:var(--ink);border:1px solid var(--border)}

  .highlight .card{border-color:var(--border-strong)}
  .ribbon{
    position:absolute;top:10px;right:10px;background:linear-gradient(90deg,var(--brand),var(--brand2));
    color:#041226;font-size:.75rem;font-weight:900;padding:.25rem .5rem;border-radius:.5rem
  }

  /* Helper spacing */
  .stack{display:grid;gap:12px}
  /* 1) La ligne de prix passe en grid: 1fr pour le libellé, auto pour le montant */
.price-row{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:baseline;
  column-gap:.6rem;
  /* plus de wrap anarchique */
  grid-auto-flow:column;
}

/* 2) Le libellé peut s'élider, le montant ne se casse jamais */
.price-row .label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.price-row .amount{
  justify-self:end;
  white-space:nowrap;
  flex-shrink:0;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  line-height:1.05;
  /* on laisse un peu plus de marge pour les écrans étroits */
  font-size:clamp(1.15rem, 3.8vw, 1.55rem);
}

/* 3) Dans la colonne latérale, on force 1 carte par ligne plus tôt
   (sinon 2 colonnes trop serrées, et le prix se fait écraser) */
@media (max-width:1200px){
  aside .pricing{ grid-template-columns:1fr !important; }
}

/* 4) Micro-ajustement mobile: resserrer l'espace, garder le montant entier */
@media (max-width:420px){
  .price-row{ column-gap:.4rem; }
  .price .note.perday{ font-size:.85rem; }
}

</style>




<header class="wrap" id="hero-webapp" role="banner">
  <div class="hero-media surface" aria-hidden="true">
    <img src="/static/img/mod%C3%A9liser-app.png" alt="modéliser">
  </div>

  <div class="hero-content">
    <div class="brand">
      <img src="/static/img/logo-asternova.png" alt="Logo ASTERNOVA">
      <div>
        <strong>ASTERNOVA ENGINEERING</strong><br>
        <small>Formations & Compétences Digitales</small>
      </div>
    </div>

    <div class="badges" aria-label="Réassurance">
      <span class="badge">Groupes réduits</span>
      <span class="badge">Livrables concrets</span>
      <span class="badge">User stories & MCD</span>
      <span class="badge">Architecture cible</span>
      <span class="badge">Prototype</span>
    </div>

    <h1>Concevoir & modéliser une application web — formation-action (3–5 jours)</h1>

    <p class="lead">
      De l’idée au schéma d’architecture: <strong>recueil et formalisation du besoin, user stories, modèle de données et processus</strong>,
      <strong>architecture cible</strong> et prototype. Vous repartez avec une <strong>documentation exploitable</strong> et des
      <strong>diagrammes prêts pour le développement</strong>.
    </p>

    <div class="kpis" aria-label="Indicateurs">
      <div class="kpi"><strong>3–5 j</strong><span>format au choix</span></div>
      <div class="kpi"><strong>100%</strong><span>cas réel</span></div>
      <div class="kpi"><strong>PDF</strong><span>spécifications</span></div>
      <div class="kpi"><strong>MCD</strong><span>diagrammes livrés</span></div>
    </div>
    <p class="hero-note">*Exemple indicatif. Livrables adaptés au contexte.</p>
  </div>
</header>

<main class="container">
  <div class="shell">
    <!-- Colonne principale -->
    <section class="surface stack" aria-labelledby="obj">
      <div class="inner">
        <h2 id="obj">Objectifs pédagogiques</h2>
        <ul class="list-check">
          <li>Formaliser le besoin avec <strong>user stories</strong>, cas d’usage et critères d’acceptation.</li>
          <li>Modéliser les <strong>données</strong> (MCD) et les <strong>processus métiers</strong>.</li>
          <li>Définir une <strong>architecture cible</strong> claire et argumentée.</li>
          <li>Produire un <strong>prototype</strong> illustrant les parcours clés.</li>
          <li>Constituer un <strong>dossier de spécifications</strong> prêt pour AO ou dev.</li>
        </ul>
      </div>

      <div class="tabs" role="tablist" aria-label="Programme détaillé">
        <button class="tab" role="tab" aria-selected="true" aria-controls="p1" id="t1">Jour 1 — Besoin & Story mapping</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="p2" id="t2">Jour 2 — Données & Processus</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="p3" id="t3">Jour 3 — Architecture & Prototype</button>
      </div>

      <div id="p1" class="panel" role="tabpanel" aria-labelledby="t1">
        <h3 style="margin:0 0 6px">Matin — Cadrage & recueil</h3>
        <ul>
          <li>Objectifs métier, périmètre, parties prenantes.</li>
          <li>User stories, story mapping, critères d’acceptation (Gherkin).</li>
        </ul>
        <h3>Après-midi — Atelier fil rouge</h3>
        <ul>
          <li>Cartographie des acteurs et parcours clé.</li>
          <li>Priorisation (MoSCoW) et risques.</li>
        </ul>
      </div>

      <div id="p2" class="panel" role="tabpanel" aria-labelledby="t2" hidden>
        <h3>Matin — Modèle de données & processus</h3>
        <ul>
          <li>MCD (entités, attributs, cardinalités), glossaire.</li>
          <li>Processus BPMN simplifié ou flowchart.</li>
        </ul>
        <h3>Après-midi — Atelier outillé</h3>
        <ul>
          <li>ER diagram avec Mermaid, itérations guidées.</li>
          <li>Alignement données ↔ parcours utilisateur.</li>
        </ul>
      </div>

      <div id="p3" class="panel" role="tabpanel" aria-labelledby="t3" hidden>
        <h3>Matin — Architecture cible</h3>
        <ul>
          <li>Fonctionnelle vs technique, contraintes, intégrations.</li>
          <li>Schéma de composants, exposition API, sécurité (haut niveau).</li>
        </ul>
        <h3>Après-midi — Prototype & restitution</h3>
        <ul>
          <li>Wireframes essentiels (Figma/Miro).</li>
          <li>Restitution finale et plan d’actions 30/60 jours.</li>
        </ul>
      </div>
    </section>

    <!-- Colonne latérale -->
    <aside class="surface" aria-label="Résumé & tarifs">
      <div class="inner stack">
        <div>
          <h2 style="margin:0 0 6px">Conception & modélisation — 3–5 jours</h2>
          <p class="note" style="margin:0 0 12px">User stories, MCD, processus, architecture, prototype.</p>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
            <div class="kv"><b>Durée</b> 3 à 5 jours</div>
            <div class="kv"><b>Format</b> Groupe / 1:1</div>
            <div class="kv"><b>Niveau</b> Débutant → Intermédiaire</div>
            <div class="kv"><b>Capacité</b> 4–8 pers.</div>
            <div class="kv"><b>Public</b> MOA/PO, porteurs de projet</div>
            <div class="kv"><b>Outils</b> Mermaid, Figma/Miro</div>
          </div>
        </div>

        <!-- TARIFS -->
        <section id="tarifs-app" aria-labelledby="tarifs_app_titre" class="stack">
          <h2 id="tarifs_app_titre">Tarifs</h2>

          <div class="duration-toggle" role="tablist" aria-label="Durée de la formation">
            <button class="dur-btn is-active" data-days="3" type="button" role="tab" aria-selected="true">3 jours</button>
            <button class="dur-btn" data-days="4" type="button" role="tab" aria-selected="false">4 jours</button>
            <button class="dur-btn" data-days="5" type="button" role="tab" aria-selected="false">5 jours</button>
          </div>

          <div class="pricing">
            <!-- Inter -->
            <article class="plan">
              <div class="card">
                <header>
                  <h3>Inter-entreprises</h3>
                  <p class="subtitle"><span class="dur-label">3 jours</span> • dates fixes</p>
                </header>
                <div class="price">
                  <div class="price-row">
                    <span class="label">Par personne</span>
                    <span class="amount"
                          data-base-3="1290"
                          data-base-4="1690"
                          data-base-5="1950">1 290 € HT</span>
                  </div>
                  <span class="note perday">soit ~430 € / jour</span>
                </div>
                <ul class="features">
                  <li>Ateliers (user stories, parcours, maquettes)</li>
                  <li>MCD/ERD + schéma d’architecture</li>
                  <li>Kit livrables réutilisables</li>
                </ul>
                <div class="actions">
                  <a class="btn btn-primary js-auto-link" href="/reservation-formation/">S’inscrire</a>
                  <a class="btn btn-outline" href="/financement/">Financement</a>
                </div>
              </div>
            </article>

            <!-- Intra -->
            <article class="plan highlight">
              <div class="ribbon">Le + demandé</div>
              <div class="card">
                <header>
                  <h3>Intra-entreprise</h3>
                  <p class="subtitle">planning flexible • groupe privé</p>
                </header>
                <div class="price">
                  <div class="price-row">
                    <span class="label">Forfait groupe (jusqu’à 10)</span>
                    <span class="amount"
                          data-base-3="5200"
                          data-base-4="6600"
                          data-base-5="8500">5 200 € HT</span>
                  </div>
                  <span class="note">au-delà de 10 pers. +300 € / pers. (3–4 j) • +350 € (5 j)</span>
                </div>
                <ul class="features">
                  <li>Cas et maquettes sur votre contexte</li>
                  <li>Revue architecture + données</li>
                  <li>Coaching post-formation 1 h inclus</li>
                </ul>
                <div class="actions">
                  <a class="btn btn-primary js-auto-link" href="/reservation-formation/">S’inscrire</a>
                  <a class="btn btn-outline" href="/contacts/">Nous contacter</a>
                </div>
              </div>
            </article>
          </div>

          <p class="note">Affichage en HT. TTC = HT × 1,20. Présentiel ou distanciel. Éligible financement.</p>
        </section>

        <div class="stack">
          <a class="btn btn-primary js-auto-link" href="/reservation-formation/">S’inscrire</a>
          <a class="btn btn-outline" href="/financement/">Options de financement</a>
          <p class="note" style="margin:0">Confirmation sous 24–48h · groupes réduits.</p>
        </div>
      </div>
    </aside>
  </div>
</main>



<script>
  // Tabs
  (function(){
    const tabs=[...document.querySelectorAll('.tab')];
    const panels=tabs.map(t=>document.getElementById(t.getAttribute('aria-controls')));
    function select(i){tabs.forEach((t,k)=>t.setAttribute('aria-selected',k===i)); panels.forEach((p,k)=>p.hidden=k!==i)}
    tabs.forEach((t,i)=>t.addEventListener('click',()=>select(i)));
    select(0);
  })();

  // CTAs auto-complétés
  (function(){
    const base = "/reservation-formation/";
    const enc = s => encodeURIComponent(s).replace(/%20/g,'+');
    const title = "Concevoir & modéliser une application web (3–5 jours)";
    const days  = "Lundi–Mercredi · 9h30–17h";
    document.querySelectorAll('.js-auto-link').forEach(a=>{
      a.href = `${base}?formation=${enc(title)}&jours=${enc(days)}`;
      a.setAttribute('aria-label', `S’inscrire à « ${title} » – ${days}`);
    });
  })();

  // Tarifs: gestion 3/4/5 jours + formatage FR insécable
  (function(){
    const section = document.getElementById('tarifs-app'); if(!section) return;
    const nbspNarrow = '\u202F'; // espace fine insécable
    const fmt = n => new Intl.NumberFormat('fr-FR').format(n).replace(/\s/g, nbspNarrow);
    const durBtns = section.querySelectorAll('.dur-btn');
    const amounts = section.querySelectorAll('.amount');
    const durLabels = section.querySelectorAll('.dur-label');
    const perday = section.querySelectorAll('.perday');
    let days = 3;

    function render(){
      durLabels.forEach(el => el.textContent = days + ' jours');
      amounts.forEach(el=>{
        const base = parseFloat(el.dataset['base'+(days===3?'-3':days===4?'-4':'-5')]||'0');
        el.innerText = fmt(base) + `${nbspNarrow}€${nbspNarrow}HT`;
      });
      const inter = section.querySelector('.amount[data-base-3]');
      if(inter){
        const baseInter = parseFloat(inter.dataset['base'+(days===3?'-3':days===4?'-4':'-5')]||'0');
        const per = Math.round(baseInter/days);
        perday.forEach(p=>p.textContent = 'soit ~' + fmt(per) + ' € / jour');
      }
    }
    durBtns.forEach(b=>b.addEventListener('click',()=>{
      durBtns.forEach(x=>x.classList.toggle('is-active', x===b));
      days = parseInt(b.dataset.days,10); render();
    }));
    render();
  })();
</script>