Outiref

Code source de l'URL : https://bureauorto.fr

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Création de site internet à Paris pour artisans et commerçants · Bureau ORTO</title>
<meta name="description" content="Création de site internet sur mesure à Paris pour artisans, commerçants et indépendants : site vitrine en ligne en 72 h, 1 200 € tout compris, pensé pour Google et le référencement local. Devis gratuit.">
<link rel="canonical" href="https://bureauorto.fr/">
<meta name="robots" content="index, follow, max-image-preview:large">
<meta name="theme-color" content="#0a0a0a">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-96.png" type="image/png" sizes="96x96">
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta property="og:type" content="website">
<meta property="og:locale" content="fr_FR">
<meta property="og:site_name" content="Bureau ORTO">
<meta property="og:url" content="https://bureauorto.fr/">
<meta property="og:title" content="Création de site internet à Paris pour artisans et commerçants · Bureau ORTO">
<meta property="og:description" content="Un site vitrine sur mesure, en ligne en 72 h, 1 200 € tout compris. Un seul interlocuteur, du devis au suivi.">
<meta property="og:image" content="https://bureauorto.fr/images/og-partage.png">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/fonts/archivo-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="image" href="/img/thomas-hd.jpg?v=3" fetchpriority="high">
<link rel="preload" as="image" href="/img/thomas-hd-mask.png?v=3">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "ProfessionalService",
      "@id": "https://bureauorto.fr/#entreprise",
      "name": "Bureau ORTO",
 "logo": "https://bureauorto.fr/logo-512.png",
      "slogan": "Le digital au millimètre",
      "url": "https://bureauorto.fr/",
      "image": "https://bureauorto.fr/images/og-partage.png",
      "telephone": "+33781347233",
      "email": "contact@bureauorto.fr",
      "priceRange": "€€",
      "address": { "@type": "PostalAddress", "addressLocality": "Paris", "addressCountry": "FR" },
      "areaServed": { "@type": "City", "name": "Paris" },
      "founder": { "@id": "https://bureauorto.fr/#thomas" },
      "sameAs": ["https://www.instagram.com/bureau.orto/"],
      "hasOfferCatalog": {
        "@type": "OfferCatalog",
        "name": "Prestations",
        "itemListElement": [
          { "@type": "Offer", "name": "Site vitrine", "price": "1200", "priceCurrency": "EUR",
            "description": "Jusqu'à 5 pages, adapté au mobile, optimisé pour Google, hébergement et nom de domaine offerts la première année.",
            "itemOffered": { "@type": "Service", "name": "Création de site vitrine", "url": "/services/creation-site-vitrine" } },
          { "@type": "Offer", "name": "Refonte de site internet", "itemOffered": { "@type": "Service", "name": "Refonte de site internet", "url": "/services/refonte-site-internet" } },
          { "@type": "Offer", "name": "Référencement local", "itemOffered": { "@type": "Service", "name": "Référencement local et fiche Google", "url": "/services/referencement-local" } },
          { "@type": "Offer", "name": "Identité visuelle", "itemOffered": { "@type": "Service", "name": "Identité visuelle", "url": "/services/identite-visuelle" } }
        ]
      }
    },
    {
      "@type": "Person",
      "@id": "https://bureauorto.fr/#thomas",
      "name": "Thomas",
      "jobTitle": "Fondateur, développeur web",
      "worksFor": { "@id": "https://bureauorto.fr/#entreprise" }
    },
    {
      "@type": "FAQPage",
      "mainEntity": [
        { "@type": "Question", "name": "Combien coûte un site vitrine ?", "acceptedAnswer": { "@type": "Answer", "text": "1 200 € pendant l'offre de lancement, au lieu de 1 500 €. Jusqu'à 5 pages sur mesure, adaptation mobile, optimisation de base pour Google, 2 allers-retours de modifications, hébergement et nom de domaine la première année, mise en ligne et 30 jours de garantie corrective." } },
        { "@type": "Question", "name": "En combien de temps mon site est-il en ligne ?", "acceptedAnswer": { "@type": "Answer", "text": "En 48 à 72 heures à partir de la réception de vos textes et photos et de la validation de la maquette." } },
        { "@type": "Question", "name": "Mon site sera-t-il visible sur Google ?", "acceptedAnswer": { "@type": "Answer", "text": "Chaque site reçoit une optimisation de base pour Google. Le référencement local et l'optimisation de votre fiche d'établissement Google sont proposés en complément." } },
        { "@type": "Question", "name": "Pourrai-je modifier mon site moi-même ?", "acceptedAnswer": { "@type": "Answer", "text": "Votre site est développé sur mesure. Je vous accompagne pour modifier textes et images ou faire évoluer le site après la livraison." } },
        { "@type": "Question", "name": "Et après la mise en ligne ?", "acceptedAnswer": { "@type": "Answer", "text": "Ajout de pages, nouvelles fonctionnalités, mises à jour, gestion de la fiche Google. Une maintenance en forfait mensuel est proposée en option." } },
        { "@type": "Question", "name": "Le premier appel est-il payant ?", "acceptedAnswer": { "@type": "Answer", "text": "Non. L'appel découverte dure 20 minutes, il est gratuit et sans engagement." } }
      ]
    }
  ]
}
</script>

<link rel="stylesheet" href="/assets/site.css">
</head>
<body>
<a class="skip" href="#contenu">Aller au contenu</a>

<header class="top" id="top">
  <a class="brand" href="#" aria-label="Bureau ORTO, accueil"><span class="brand-word">Bureau ORTO</span></a>
  <nav class="nav" aria-label="Navigation principale">
    <a href="/realisations">Réalisations</a>
    <a href="#services">Services</a>
    <a href="#tarif">Tarif</a>
    <a href="#questions">Questions</a>
    <a class="btn" href="#contact">Devis gratuit</a>
  </nav>
</header>

<main id="contenu">

<!-- HERO -->
<section class="hero" data-tone="dark" aria-labelledby="h1">

  <div class="hero-stage">
    <div class="hero-name cond" aria-hidden="true"><span class="l1">Bureau</span><span class="l2">Orto</span></div>
    <div class="hero-ghost cond" aria-hidden="true"><span class="l1">Bureau</span><span class="l2">Orto</span></div>
    <img class="hero-me" src="/img/thomas-hd.jpg?v=3" width="580" height="1421" alt="Thomas, fondateur de Bureau ORTO, un ordinateur portable à la main" fetchpriority="high">
  </div>

  <div class="hero-copy">
    <h1 id="h1">Création de sites internet pour artisans et commerçants à Paris.</h1>
    <p>Un site sur mesure, <strong>en ligne en 72&nbsp;heures</strong>, conçu pour être trouvé sur Google. <strong>1&nbsp;200&nbsp;€ tout compris.</strong></p>
  </div>

  <div class="hero-act">
    <a class="btn" href="#contact">Parler de mon projet <span class="arr" aria-hidden="true">→</span></a>
    <a class="link" href="#realisations">Voir les réalisations</a>
  </div>

  <ul class="hero-proof" aria-label="Engagements">
    <li><span>Devis gratuit, sans engagement</span></li>
    <li><span>Réponse sous 48&nbsp;h</span></li>
    <li><span>Un seul interlocuteur</span></li>
  </ul>
</section>

<nav class="ticker" aria-label="Nos services">
  <div class="ticker-track cond">
    <span><a href="/services/creation-site-vitrine">Création de site internet à Paris</a></span><span><a href="/services/creation-site-vitrine">Site vitrine pour artisans</a></span><span><a href="/services/referencement-local">Référencement local</a></span><span><a href="/services/referencement-local">Fiche Google Business</a></span><span><a href="/services/refonte-site-internet">Refonte de site web</a></span><span><a href="/services/creation-site-vitrine">Site adapté au mobile</a></span><span><a href="/services/identite-visuelle">Identité visuelle et logo</a></span>
    <span aria-hidden="true"><a href="/services/creation-site-vitrine" tabindex="-1">Création de site internet à Paris</a></span><span aria-hidden="true"><a href="/services/creation-site-vitrine" tabindex="-1">Site vitrine pour artisans</a></span><span aria-hidden="true"><a href="/services/referencement-local" tabindex="-1">Référencement local</a></span><span aria-hidden="true"><a href="/services/referencement-local" tabindex="-1">Fiche Google Business</a></span><span aria-hidden="true"><a href="/services/refonte-site-internet" tabindex="-1">Refonte de site web</a></span><span aria-hidden="true"><a href="/services/creation-site-vitrine" tabindex="-1">Site adapté au mobile</a></span><span aria-hidden="true"><a href="/services/identite-visuelle" tabindex="-1">Identité visuelle et logo</a></span>
  </div>
</nav>

<!-- INTRO -->
<div class="light" data-tone="light">
<section class="intro" aria-labelledby="intro-t">
  <h2 id="intro-t" class="split">Visible, pas seulement présent.</h2>
  <p class="intro-say" data-words>Je dessine et je code des sites pour les commerces de Paris&nbsp;: rapides sur mobile, faciles à trouver sur Google, et à votre image.</p>
  <figure class="intro-fig rise">
    <img src="/img/atelier-esquisse-1000.jpg" srcset="/img/atelier-esquisse-800.jpg 800w, /img/atelier-esquisse-1000.jpg 1000w, /img/atelier-esquisse.jpg 1600w" sizes="(max-width: 900px) 100vw, 60vw" width="1600" height="1194" loading="lazy" alt="Main qui dessine au crayon la maquette d'un site sur papier quadrillé, le site terminé affiché sur un téléphone en arrière-plan">
    <figcaption>Chaque site commence au crayon</figcaption>
  </figure>
  <div class="intro-more rise">
    <a class="btn" href="#services">Ce que je fais <span class="arr" aria-hidden="true">→</span></a>
    <a class="link" href="#apropos">Qui je suis</a>
  </div>
  <div class="chrono" id="chrono" aria-labelledby="chrono-t">
    <div class="chrono-head">
      <p class="chrono-count cond" aria-hidden="true"><span id="chrono-n">72</span>&nbsp;h</p>
      <div>
        <h3 id="chrono-t">Votre site en ligne en 72&nbsp;heures</h3>
        <p class="chrono-note">Le compteur démarre quand la maquette est validée et vos textes et photos reçus.</p>
      </div>
    </div>
    <div class="chrono-track" aria-hidden="true"><span class="chrono-fill"></span></div>
    <ol class="chrono-steps">
      <li class="on"><b class="cond">0&nbsp;h</b><span>Maquette validée, contenus reçus</span></li>
      <li class="on"><b class="cond">24&nbsp;h</b><span>Construction des pages</span></li>
      <li class="on"><b class="cond">48&nbsp;h</b><span>Optimisation Google et mobile</span></li>
      <li class="on"><b class="cond">72&nbsp;h</b><span>Votre site est en ligne</span></li>
    </ol>
  </div>
</section>

<!-- WORK -->
<section class="work" id="realisations" aria-labelledby="work-t">
  <div class="work-head">
    <h2 id="work-t" class="cond split">Réalisations</h2>
    <div class="work-side rise"><p>Quatre projets concept&nbsp;: ce que je construis pour un restaurant, une boutique, un barbershop ou un salon.</p><a class="btn" href="/realisations" data-track-id="see_all_projects">Voir tous les projets <span class="arr" aria-hidden="true">→</span></a></div>
  </div>
  <ul class="cases">
    <li class="rise"><a class="case" href="/realisations/fiamma">
      <div class="case-img"><img src="/img/fiamma-1000.jpg" srcset="/img/fiamma-800.jpg 800w, /img/fiamma-1000.jpg 1000w, /img/fiamma.jpg 1400w" sizes="(max-width: 900px) 100vw, 60vw" width="1400" height="716" loading="lazy" alt="Page d'accueil du site de la pizzeria Fiamma : une margherita au feu de bois sur fond noir"></div>
      <div class="case-body"><h3>Fiamma</h3><p>Pizzeria napolitaine au feu de bois. Carte en ligne, commande et réservation.</p><span class="go" aria-hidden="true">↗</span>
        <ul class="tags"><li>Restaurant</li><li>Site vitrine</li><li>SEO local</li></ul></div>
    </a></li>
    <li class="rise"><a class="case" href="/realisations/nohr">
      <div class="case-img"><img src="/img/nohr-1000.jpg" srcset="/img/nohr-800.jpg 800w, /img/nohr-1000.jpg 1000w, /img/nohr.jpg 1400w" sizes="(max-width: 900px) 100vw, 60vw" width="1400" height="716" loading="lazy" alt="Page d'accueil de la boutique NOHR : flacons de soins sur une étagère en marbre"></div>
      <div class="case-body"><h3>NOHR</h3><p>Soins pour la peau. Boutique en ligne sobre, pensée pour vendre.</p><span class="go" aria-hidden="true">↗</span>
        <ul class="tags"><li>Cosmétique</li><li>E-commerce</li><li>Design</li></ul></div>
    </a></li>
    <li class="rise"><a class="case" href="/realisations/fade-club">
      <div class="case-img"><img src="/img/fade-club-1000.jpg" srcset="/img/fade-club-800.jpg 800w, /img/fade-club-1000.jpg 1000w, /img/fade-club.jpg 1400w" sizes="(max-width: 900px) 100vw, 60vw" width="1400" height="716" loading="lazy" alt="Page d'accueil du barbershop Fade Club : un barbier taille un dégradé à la tondeuse"></div>
      <div class="case-body"><h3>Fade Club</h3><p>Barbershop à Paris 11e. Tarifs clairs et prise de rendez-vous en ligne.</p><span class="go" aria-hidden="true">↗</span>
        <ul class="tags"><li>Barbershop</li><li>Rendez-vous</li><li>SEO local</li></ul></div>
    </a></li>
    <li class="rise"><a class="case" href="/realisations/maison-ines">
      <div class="case-img"><img src="/img/maison-ines-1000.jpg" srcset="/img/maison-ines-800.jpg 800w, /img/maison-ines-1000.jpg 1000w, /img/maison-ines.jpg 1400w" sizes="(max-width: 900px) 100vw, 60vw" width="1400" height="716" loading="lazy" alt="Page d'accueil du salon de coiffure Maison Inès : un brushing en cours"></div>
      <div class="case-body"><h3>Maison Inès</h3><p>Salon de coiffure. Un site chaleureux qui donne envie de réserver.</p><span class="go" aria-hidden="true">↗</span>
        <ul class="tags"><li>Coiffure</li><li>Site vitrine</li><li>SEO local</li></ul></div>
    </a></li>
  </ul>
</section>

<!-- SERVICES -->
<section class="services" id="services" aria-labelledby="serv-t">
  <h2 id="serv-t" class="cond split">Ce que je fais</h2>
  <ul class="rows">
    <li class="rise"><a class="row" href="/services/creation-site-vitrine" data-peek="/img/atelier-esquisse-800.jpg">
      <h3>Création de site vitrine</h3><p>Un site qui vous ressemble, jusqu'à 5 pages, rapide sur mobile. Je m'occupe aussi de ses modifications.</p><span class="go" aria-hidden="true">↗</span></a></li>
    <li class="rise"><a class="row" href="/services/referencement-local" data-peek="/img/fiche-google.jpg">
      <h3>Référencement local</h3><p>Votre site et votre fiche Google optimisés pour que les clients du quartier vous trouvent.</p><span class="go" aria-hidden="true">↗</span></a></li>
    <li class="rise"><a class="row" href="/services/identite-visuelle" data-peek="/img/services-identite-800.jpg">
      <h3>Identité visuelle</h3><p>Logo, couleurs et typographies qui vous rendent reconnaissable, de l'enseigne à Instagram.</p><span class="go" aria-hidden="true">↗</span></a></li>
    <li class="rise"><a class="row" href="#contact" data-peek="/img/services-supports-800.jpg">
      <h3>Supports de communication</h3><p>Cartes de visite, flyers, étiquettes et visuels réseaux qui gardent l'allure de votre site.</p><span class="go" aria-hidden="true">↗</span></a></li>
  </ul>
</section>

<!-- NUMBERS -->
<div class="numbers-wrap">
<section class="numbers rise" aria-labelledby="num-t">
  <h2 id="num-t">Des engagements écrits dans le devis.</h2>
  <dl>
    <div><dt class="cond"><span data-count="72">72</span><small> h</small></dt><dd>pour mettre votre site en ligne, une fois vos contenus reçus</dd></div>
    <div><dt class="cond"><span data-count="1200" data-sep>1 200</span><small> €</small></dt><dd>tout compris, hébergement de la première année inclus</dd></div>
    <div><dt class="cond"><span data-count="48">48</span><small> h</small></dt><dd>au plus pour une première réponse à votre message</dd></div>
    <div><dt class="cond"><span data-count="30">30</span><small> j</small></dt><dd>de suivi après la livraison pour corriger le moindre souci</dd></div>
  </dl>
</section>
</div>
</div>

<!-- PRICING -->
<section class="accent pricing" id="tarif" data-tone="accent" aria-labelledby="price-t">
  <h2 id="price-t" class="cond split">Site vitrine, <span class="price">1 200&nbsp;€</span></h2>
  <div class="price-grid">
    <div class="rise">
      <ul class="perks" aria-label="Ce que comprend le site vitrine">
        <li><b class="cond">5<small> pages</small></b><span>Accueil, services, réalisations, à propos et contact.</span></li>
        <li><b class="cond">100<small> %</small></b><span>Pensé pour le téléphone, la tablette et l'ordinateur.</span></li>
        <li><b class="cond">Google</b><span>Conçu pour être trouvé, avec un contact en un clic.</span></li>
        <li><b class="cond">1<small> an</small></b><span>Hébergement et nom de domaine offerts la première année.</span></li>
        <li><b class="cond">2<small> retouches</small></b><span>Allers-retours de modifications inclus.</span></li>
        <li><b class="cond">30<small> jours</small></b><span>De suivi après la mise en ligne, puis un accompagnement pour faire évoluer le site.</span></li>
      </ul>
      <div class="launch rise" aria-label="Offre de lancement">
        <div class="launch-l">
          <p class="launch-tag">Offre de lancement</p>
          <p class="launch-prices"><s class="cond" aria-label="Prix habituel 1 500 euros">1&nbsp;500&nbsp;€</s><span class="launch-arrow" aria-hidden="true">→</span><b class="cond">1&nbsp;200&nbsp;€</b></p>
          <p class="launch-sub">net, tout compris</p>
        </div>
        <div class="launch-r">
          <p class="launch-save cond">−300&nbsp;€</p>
          <p class="launch-note">Dès la 2<sup>e</sup> année, l'hébergement et le nom de domaine sont à votre charge&nbsp;: le montant annuel est indiqué dans le devis.</p>
        </div>
      </div>
    </div>
    <div class="clock rise" aria-labelledby="clock-t">
      <h3 id="clock-t">Quand votre site peut-il être en ligne&nbsp;?</h3>
      <label id="days-l">J'envoie mes textes et photos…</label>
      <div class="days" role="group" aria-labelledby="days-l">
        <button type="button" data-add="0" aria-pressed="true">Aujourd'hui</button>
        <button type="button" data-add="1" aria-pressed="false">Demain</button>
        <button type="button" data-add="7" aria-pressed="false">Dans une semaine</button>
      </div>
      <output class="cond" id="eta" aria-live="polite">sous 72 h</output>
      <p class="note">Délai de 48 à 72 h après réception de vos contenus et validation de la maquette.</p>
      <div class="clock-acts">
        <a class="btn" id="eta-cta" href="mailto:contact@bureauorto.fr?subject=Mon%20site%20vitrine">Réserver ce créneau <span class="arr" aria-hidden="true">→</span></a>
        <a class="btn ghost" href="tel:+33781347233" aria-label="Appeler Thomas au 07 81 34 72 33">07 81 34 72 33</a>
      </div>
    </div>
  </div>
  <div class="other">
    <a class="opt rise" href="/services/refonte-site-internet" data-track-id="option_refonte">
      <span class="opt-img"><img src="/img/refonte-calque-1000.jpg" srcset="/img/refonte-calque-800.jpg 800w, /img/refonte-calque-1000.jpg 1000w, /img/refonte-calque.jpg 1400w" sizes="(max-width: 900px) 100vw, 60vw" width="1400" height="1045" loading="lazy" alt="Main qui redessine au crayon, sur un calque, la maquette d'un ancien site internet"></span>
      <span class="opt-body">
        <span class="opt-price">Sur devis</span>
        <h3 class="cond">Refonte de site</h3>
        <span class="opt-text">Votre site est lent, daté ou difficile à modifier&nbsp;? Je le reprends en gardant ce qui fonctionne.</span>
        <span class="opt-tags"><span>Audit</span><span>Nouveau design</span><span>Contenus repris</span></span>
        <span class="opt-go" aria-hidden="true">↗</span>
      </span>
    </a>
    <a class="opt rise" href="#contact" data-track-id="option_extras">
      <span class="opt-img"><img src="/img/fiche-google.jpg" width="1200" height="896" loading="lazy" alt="Téléphone affichant la fiche Google d'une boutique, avec les avis, l'itinéraire et le bouton Appeler"></span>
      <span class="opt-body">
        <span class="opt-price">Sur devis</span>
        <h3 class="cond">Prestations complémentaires</h3>
        <span class="opt-text">Faire évoluer votre site après sa mise en ligne, ou gérer votre fiche Google.</span>
        <span class="opt-tags"><span>Ajout de pages</span><span>Fonctionnalités</span><span>Maintenance</span><span>Fiche Google</span></span>
        <span class="opt-go" aria-hidden="true">↗</span>
      </span>
    </a>
  </div>

</section>

<!-- METHOD -->
<section class="method" data-tone="dark" aria-labelledby="meth-t">
  <div class="method-head">
    <h2 id="meth-t" class="cond split">Ma méthode</h2>
    <p class="rise">Votre projet en quatre temps, et vous voyez votre site avant la moindre ligne de code.</p>
  </div>
  <div class="panel"><img src="/img/services-google-1000.jpg" srcset="/img/services-google-800.jpg 800w, /img/services-google-1000.jpg 1000w, /img/services-google.jpg 1500w" sizes="(max-width: 900px) 100vw, 60vw" width="1500" height="1000" loading="lazy" alt="Plan de quartier avec une épingle orange et un téléphone affichant une fiche Google">
    <p class="verb cond" aria-hidden="true">Écouter</p>
    <p class="panel-txt"><strong>Premier échange</strong>Votre métier, vos clients, vos objectifs. Vous repartez avec un devis clair et un planning.</p></div>
  <div class="panel"><img src="/img/services-identite-1000.jpg" srcset="/img/services-identite-800.jpg 800w, /img/services-identite-1000.jpg 1000w, /img/services-identite.jpg 1500w" sizes="(max-width: 900px) 100vw, 60vw" width="1500" height="999" loading="lazy" alt="Logo de Maison Inès sur ses tracés de construction, avec nuancier et typographie">
    <p class="verb cond" aria-hidden="true">Dessiner</p>
    <p class="panel-txt"><strong>Conception</strong>Je dessine votre site. Vous le voyez et l'ajustez avant la moindre ligne de code.</p></div>
  <div class="panel"><img src="/img/atelier-esquisse-1000.jpg" srcset="/img/atelier-esquisse-800.jpg 800w, /img/atelier-esquisse-1000.jpg 1000w, /img/atelier-esquisse.jpg 1600w" sizes="(max-width: 900px) 100vw, 60vw" width="1600" height="1194" loading="lazy" alt="Main qui dessine au crayon la maquette d'un site sur papier quadrillé, le site terminé affiché sur un téléphone en arrière-plan">
    <p class="verb cond" aria-hidden="true">Construire</p>
    <p class="panel-txt"><strong>Construction</strong>Vos textes et vos images prennent vie, sur tous les écrans, prêts pour Google.</p></div>
  <div class="panel"><img src="/img/services-supports-1000.jpg" srcset="/img/services-supports-800.jpg 800w, /img/services-supports-1000.jpg 1000w, /img/services-supports.jpg 1500w" sizes="(max-width: 900px) 100vw, 60vw" width="1500" height="1040" loading="lazy" alt="Supports imprimés assortis : boîte étiquetée, cartes de visite, affiche et publication">
    <p class="verb cond" aria-hidden="true">Livrer</p>
    <p class="panel-txt"><strong>Livraison</strong>Votre site est en ligne. Je reste là pour le faire évoluer.</p></div>
</section>

<!-- ABOUT + FAQ -->
<div class="light" data-tone="light">
<section class="about" id="apropos" aria-labelledby="about-t">
  <figure class="about-photo rise">
    <img data-drift src="/img/thomas-atelier.jpg" width="848" height="1264" loading="lazy" alt="Thomas, fondateur de Bureau ORTO, debout devant un rideau métallique">
    <figcaption>Thomas, fondateur · Paris</figcaption>
  </figure>
  <div class="about-body">
    <h2 id="about-t" class="cond split">Un seul interlocuteur</h2>
    <p class="about-say" data-words>Du premier trait à la mise en ligne, c'est moi qui vous accompagne. Pas de commercial, pas de standard.</p>
    <p class="about-bio rise">Développeur web, j'ai conçu des applications en entreprise pendant trois ans avant de créer Bureau ORTO. Je mets cette rigueur au service des artisans, commerçants et indépendants&nbsp;: chaque site est dessiné et codé sur mesure, selon votre activité.</p>
    <dl class="about-facts">
      <div class="rise"><dt class="cond">3 ans</dt><dd>de développement web en entreprise</dd></div>
      <div class="rise"><dt class="cond">1</dt><dd>même interlocuteur, du devis au suivi</dd></div>
      <div class="rise"><dt class="cond">48 h</dt><dd>au plus pour vous répondre</dd></div>
    </dl>
    <div class="orto-card rise">
      <svg class="angle" viewBox="0 0 120 120" aria-hidden="true"><path d="M10 10 V110 H110" /><path d="M10 84 H36 V110" /></svg>
      <p><strong class="cond">ORTO</strong> vient d'orthogonal&nbsp;: des angles justes, des lignes droites, rien laissé au hasard.</p>
    </div>
    <div class="about-acts rise">
      <a class="btn" href="tel:+33781347233">Appeler Thomas <span class="arr" aria-hidden="true">→</span></a>
      <a class="link" href="mailto:contact@bureauorto.fr">contact@bureauorto.fr</a>
    </div>
  </div>
</section>

<section class="faq" id="questions" aria-labelledby="faq-t">
  <div class="faq-head">
    <h2 id="faq-t" class="cond split">Questions fréquentes</h2>
    <div class="faq-side rise"><p>Tout ce qu’on me demande avant de se lancer. Une autre question&nbsp;?</p><a class="btn" href="tel:+33781347233" data-track-id="faq_call">Appeler le 07&nbsp;81&nbsp;34&nbsp;72&nbsp;33 <span class="arr" aria-hidden="true">→</span></a></div>
  </div>
  <div class="faq-list">
    <details class="qa rise" open>
      <summary><h3>Combien coûte un site vitrine&nbsp;?</h3><span class="qa-icon" aria-hidden="true"></span></summary>
      <div class="qa-a"><p>1 200 € pendant l'offre de lancement, au lieu de 1 500 €. Jusqu'à 5 pages sur mesure, adaptation mobile, optimisation pour Google, 2 allers-retours, hébergement et domaine la première année, mise en ligne et 30 jours de garantie.</p></div>
    </details>
    <details class="qa rise">
      <summary><h3>En combien de temps est-il en ligne&nbsp;?</h3><span class="qa-icon" aria-hidden="true"></span></summary>
      <div class="qa-a"><p>En 48 à 72 heures à partir de la réception de vos textes et photos et de la validation de la maquette, selon la complexité du projet.</p></div>
    </details>
    <details class="qa rise">
      <summary><h3>Mon site sera-t-il visible sur Google&nbsp;?</h3><span class="qa-icon" aria-hidden="true"></span></summary>
      <div class="qa-a"><p>Chaque site reçoit une optimisation de base. Je peux aussi travailler votre visibilité locale et votre fiche d'établissement Google pour que les clients du quartier vous trouvent.</p></div>
    </details>
    <details class="qa rise">
      <summary><h3>Pourrai-je modifier mon site moi-même&nbsp;?</h3><span class="qa-icon" aria-hidden="true"></span></summary>
      <div class="qa-a"><p>Le site est développé sur mesure. Pour changer un texte, une photo ou ajouter une page, je vous accompagne après la livraison.</p></div>
    </details>
    <details class="qa rise">
      <summary><h3>Et après la mise en ligne&nbsp;?</h3><span class="qa-icon" aria-hidden="true"></span></summary>
      <div class="qa-a"><p>Ajout de pages, nouvelles fonctionnalités, mises à jour ou gestion de votre fiche Google. Une maintenance en forfait mensuel est proposée en option.</p></div>
    </details>
    <details class="qa rise">
      <summary><h3>Le premier appel est-il payant&nbsp;?</h3><span class="qa-icon" aria-hidden="true"></span></summary>
      <div class="qa-a"><p>Non. L'appel découverte dure 20 minutes, il est gratuit et sans engagement. C'est moi qui vous réponds&nbsp;: pas de commercial, pas de standard.</p></div>
    </details>
  </div>
</section>
</div>

<!-- CONTACT -->
<section class="contact" id="contact" data-tone="dark" aria-labelledby="contact-t">
  <h2 id="contact-t" class="cond split">Votre site, on en <span style="white-space:nowrap">parle&nbsp;?</span></h2>
  <p class="contact-lead rise">Appelez-moi ou écrivez-moi&nbsp;: devis gratuit, réponse sous 48&nbsp;h.</p>
  <div class="contact-grid">
    <ol class="steps rise" aria-label="Comment ça se passe">
      <li><b>Vous m'écrivez ou m'appelez</b><span>Quelques mots sur votre activité suffisent.</span></li>
      <li><b>Premier retour sous 48 h</b><span>Puis un appel découverte gratuit de 20 minutes.</span></li>
      <li><b>Un devis clair</b><span>Sans engagement, construit autour de votre projet.</span></li>
    </ol>
    <div class="contact-side rise">
      <a class="mail" href="mailto:contact@bureauorto.fr?subject=Mon%20projet%20de%20site">contact@<wbr>bureauorto.fr</a>
      <a class="tel" href="tel:+33781347233">07 81 34 72 33</a>
    </div>
  </div>

  <footer class="foot">
    <div><h3>Bureau ORTO</h3><p>Le digital au millimètre. Création de sites internet à Paris pour artisans, commerçants et indépendants.</p></div>
    <div><h3>Services</h3><ul><li><a href="/services/creation-site-vitrine">Création de site vitrine</a></li><li><a href="/services/refonte-site-internet">Refonte de site internet</a></li><li><a href="/services/referencement-local">Référencement local</a></li><li><a href="/services/identite-visuelle">Identité visuelle</a></li></ul></div>
    <div><h3><a href="/realisations">Réalisations</a></h3><ul><li><a href="/realisations/fiamma">Fiamma</a></li><li><a href="/realisations/nohr">NOHR</a></li><li><a href="/realisations/fade-club">Fade Club</a></li><li><a href="/realisations/maison-ines">Maison Inès</a></li></ul></div>
    <div><h3>Suivre</h3><ul><li><a href="https://www.instagram.com/bureau.orto/">Instagram @bureau.orto</a></li><li><a href="/mentions-legales">Mentions légales</a></li><li><a href="/politique-de-confidentialite">Confidentialité</a></li><li><a href="/declaration-accessibilite">Accessibilité</a></li><li><button type="button" class="foot-btn" data-cookies>Gestion des cookies</button></li><li><a href="#top">Retour en haut ↑</a></li></ul></div>
  </footer>
  <p class="giant cond" aria-hidden="true" data-fit2>Bureau Orto</p>
  <p class="legal"><span>© 2026 Bureau ORTO · Paris</span><span>Conçu et codé à la main</span></p>
</section>
</main>

<div class="callbar" aria-label="Contact rapide">
  <a class="btn ghost" href="tel:+33781347233">Appeler</a>
  <a class="btn" href="#contact">Devis gratuit</a>
</div>
<div class="peek" aria-hidden="true"><img alt="" data-nosrcset src="/img/atelier-esquisse-800.jpg"></div>

<script defer src="/assets/vendor/gsap.min.js"></script>
<script defer src="/assets/vendor/ScrollTrigger.min.js"></script>
<script defer src="/assets/site.js"></script>
<script defer src="/assets/tracking.js"></script>
</body>
</html>