✦ Todo Portfolio

Coche au fur et à mesure — la progression se sauvegarde dans ton navigateur.
0 / 20 contenus prêts
✦ Code portfolio prêt à coller
Quand tous tes visuels sont prêts, remplace le contenu de ta page portfolio WordPress par ce code complet — couleurs déjà mises à jour, URLs à remplacer aux emplacements images.design dans le JS.
portfolio-lojona-nouvelle-palette.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio — Lojona Studio</title>
  <style>
    @font-face{font-family:'Caprasimo';src:url('Caprasimo-Regular.ttf') format('truetype')}
    @font-face{font-family:'Nunito';src:url('Nunito-VariableFont_wght.ttf') format('truetype');font-weight:100 900}
    *{box-sizing:border-box;margin:0;padding:0}
    .pf{font-family:'Nunito',sans-serif;background:#FFF5F7;color:#2C1A0E;overflow-x:hidden}
    .pf-nav{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 2.5rem;background:#FFF5F7;border-bottom:0.5px solid rgba(201,0,24,0.1)}
    .pf-nav-links{display:flex;gap:2rem}
    .pf-nav-links a{color:#7a2030 !important;text-decoration:none;font-size:13px;letter-spacing:1px;text-transform:uppercase;transition:color 0.2s}
    .pf-nav-links a:hover{color:#C90018 !important}
    .pf-nav-cta{background:#C90018 !important;color:#fff !important;padding:9px 22px;border-radius:40px;text-decoration:none;font-size:13px;font-weight:700;transition:background 0.2s}
    .pf-nav-cta:hover{background:#7B5EA7 !important;color:#fff !important}
    .pf-hero{padding:3.5rem 2.5rem 2rem;text-align:center;background:#FFF5F7}
    .pf-hero-eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#7B5EA7;margin-bottom:1rem}
    .pf-hero-h1{font-family:'Caprasimo',cursive;font-size:clamp(34px,5vw,58px);color:#1a0005;line-height:1.1;margin-bottom:1rem}
    .pf-hero-h1 em{color:#C90018;font-style:italic}
    .pf-hero-sub{font-size:15px;color:#7a2030;max-width:480px;margin:0 auto}
    .pf-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:2rem 2.5rem}
    .pf-tab{background:#fff;border:1.5px solid #FFD6E7;color:#7a2030;padding:8px 20px;border-radius:40px;font-size:13px;font-family:'Nunito',sans-serif;font-weight:700;cursor:pointer;transition:all 0.2s}
    .pf-tab:hover{border-color:#C90018;color:#C90018 !important}
    .pf-tab.active{background:#C90018 !important;border-color:#C90018;color:#fff !important}
    .pf-slider-wrap{position:relative;overflow:hidden;background:#FFF5F7;padding:0 2.5rem 3rem}
    .pf-slider{display:none;animation:fadeSlide 0.4s ease}
    .pf-slider.active{display:block}
    @keyframes fadeSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    .pf-slider-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}
    .pf-slide-item{border-radius:16px;overflow:hidden;position:relative;cursor:pointer;aspect-ratio:4/3;background:#FFD6E7;transition:transform 0.25s,box-shadow 0.25s}
    .pf-slide-item:hover{transform:scale(1.02);box-shadow:0 12px 32px rgba(201,0,24,0.15)}
    .pf-slide-item.tall{aspect-ratio:3/4}
    .pf-slide-item.wide{grid-column:span 2;aspect-ratio:16/9}
    .pf-slide-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
    .pf-slide-placeholder svg{opacity:0.2}
    .pf-slide-placeholder span{font-size:11px;color:rgba(201,0,24,0.3);letter-spacing:1px;text-transform:uppercase}
    .pf-slide-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,0,5,0.7) 0%,transparent 50%);opacity:0;transition:opacity 0.3s;display:flex;align-items:flex-end;padding:1.2rem}
    .pf-slide-item:hover .pf-slide-overlay{opacity:1}
    .pf-slide-info{color:#fff}
    .pf-slide-title{font-family:'Caprasimo',cursive;font-size:15px;margin-bottom:2px}
    .pf-slide-cat{font-size:11px;color:rgba(255,255,255,0.7);letter-spacing:1px;text-transform:uppercase}
    .pf-zoom-icon{position:absolute;top:12px;right:12px;width:32px;height:32px;background:rgba(255,255,255,0.9);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s}
    .pf-slide-item:hover .pf-zoom-icon{opacity:1}
    .pf-slider-nav{display:flex;justify-content:center;align-items:center;gap:1rem}
    .pf-arrow{width:40px;height:40px;border-radius:50%;border:1.5px solid #FFD6E7;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;font-size:18px;color:#C90018}
    .pf-arrow:hover{background:#C90018;border-color:#C90018;color:#fff}
    .pf-dots{display:flex;gap:6px;align-items:center}
    .pf-dot{width:8px;height:8px;border-radius:50%;background:#FFD6E7;cursor:pointer;transition:all 0.2s}
    .pf-dot.active{background:#C90018;width:20px;border-radius:4px}
    .pf-slide-counter{font-size:12px;color:#d4a0b0;min-width:50px;text-align:center}
    .pf-lightbox{display:none;position:fixed;inset:0;background:rgba(26,0,5,0.92);z-index:2000;align-items:center;justify-content:center;padding:1rem}
    .pf-lightbox.open{display:flex;animation:lbIn 0.3s ease}
    @keyframes lbIn{from{opacity:0}to{opacity:1}}
    .pf-lb-content{position:relative;max-width:800px;width:100%;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:1rem}
    .pf-lb-placeholder{width:100%;min-height:400px;background:#FFD6E7;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
    .pf-lb-placeholder span{font-size:13px;color:rgba(201,0,24,0.4);letter-spacing:1px;text-transform:uppercase;text-align:center;padding:0 2rem}
    .pf-lb-img-wrap{width:100%;min-height:400px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#FFF5F7;overflow:hidden}
    .pf-lb-img-wrap img{max-width:100%;max-height:60vh;object-fit:contain;padding:1.5rem}
    .pf-lb-info{text-align:center;color:#fff}
    .pf-lb-title{font-family:'Caprasimo',cursive;font-size:20px;margin-bottom:4px}
    .pf-lb-desc{font-size:13px;color:rgba(255,255,255,0.6);max-width:400px}
    .pf-lb-close{position:absolute;top:-48px;right:0;background:rgba(255,255,255,0.15);border:none;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}
    .pf-lb-close:hover{background:rgba(255,255,255,0.3)}
    .pf-lb-prev,.pf-lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.15);border:none;color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
    .pf-lb-prev{left:-60px}
    .pf-lb-next{right:-60px}
    .pf-lb-prev:hover,.pf-lb-next:hover{background:rgba(201,0,24,0.6)}
    .pf-cta{background:#C90018;padding:4rem 2.5rem;text-align:center}
    .pf-cta-title{font-family:'Caprasimo',cursive;font-size:clamp(26px,4vw,40px);color:#fff;margin-bottom:1rem}
    .pf-cta-title em{font-style:italic;color:#FF9FCD}
    .pf-cta-sub{font-size:14px;color:rgba(255,255,255,0.8);max-width:420px;margin:0 auto 2rem;line-height:1.7}
    .pf-cta-btn{display:inline-block;background:#fff !important;color:#C90018 !important;padding:13px 30px;border-radius:40px;text-decoration:none;font-size:14px;font-weight:700;transition:background 0.2s,transform 0.15s}
    .pf-cta-btn:hover{background:#FFD6E7 !important;color:#C90018 !important;transform:translateY(-2px)}
    .pf-footer{background:#FFD6E7;padding:1.5rem 2.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
    .pf-footer-copy{font-size:12px;color:#7a2030}
    .pf-footer-links{display:flex;gap:1rem}
    .pf-footer-links a{font-size:11px;color:#C90018 !important;text-decoration:none}
    .pf-footer-links a:hover{color:#7B5EA7 !important}
    @media(max-width:600px){
      .pf-slider-inner{grid-template-columns:1fr 1fr}
      .pf-slide-item.wide{grid-column:span 2}
      .pf-nav-links{display:none}
      .pf-lb-prev{left:-10px}
      .pf-lb-next{right:-10px}
    }
  </style>
</head>
<body>
<div class="pf">
<nav class="pf-nav">
  <a href="/"><img src="https://lojona.fr/wp-content/uploads/2026/05/e.png" alt="Lojona Studio" style="display:block;height:80px;width:auto"></a>
  <div class="pf-nav-links">
    <a href="/">Accueil</a>
    <a href="/mes-services/">Services</a>
  </div>
  <a href="/devis-gratuit/" class="pf-nav-cta">Devis gratuit</a>
</nav>
<section class="pf-hero">
  <p class="pf-hero-eyebrow">Portfolio</p>
  <h1 class="pf-hero-h1">Mes <em>créations.</em></h1>
  <p class="pf-hero-sub">Chaque projet raconte une histoire. Parcours mes univers et trouve celui qui te ressemble.</p>
</section>
<div class="pf-tabs">
  <button class="pf-tab active" onclick="showCat('cm', this)">Community Management</button>
  <button class="pf-tab" onclick="showCat('photo', this)">Photo corporate</button>
  <button class="pf-tab" onclick="showCat('video', this)">Vidéo</button>
  <button class="pf-tab" onclick="showCat('mariage', this)">Mariage</button>
  <button class="pf-tab" onclick="showCat('design', this)">Design graphique</button>
</div>
<div class="pf-slider-wrap">
  <!-- CM -->
  <div class="pf-slider active" id="slider-cm" data-page="0" data-total="2">
    <div class="pf-slider-inner" id="grid-cm-0">
      <div class="pf-slide-item wide" onclick="openLightbox('cm',0)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Feed Instagram</p><p class="pf-slide-cat">Community Management</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item" onclick="openLightbox('cm',1)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Stories animées</p><p class="pf-slide-cat">Community Management</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item" onclick="openLightbox('cm',2)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Carrousel LinkedIn</p><p class="pf-slide-cat">Community Management</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
    </div>
    <div class="pf-slider-inner" id="grid-cm-1" style="display:none">
      <div class="pf-slide-item" onclick="openLightbox('cm',3)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Reels court format</p><p class="pf-slide-cat">Community Management</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item wide" onclick="openLightbox('cm',4)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Calendrier éditorial</p><p class="pf-slide-cat">Community Management</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
    </div>
    <div class="pf-slider-nav">
      <button class="pf-arrow" onclick="prevSlide('cm')">←</button>
      <div class="pf-dots" id="dots-cm"><span class="pf-dot active" onclick="goSlide('cm',0)"></span><span class="pf-dot" onclick="goSlide('cm',1)"></span></div>
      <span class="pf-slide-counter" id="counter-cm">1 / 2</span>
      <button class="pf-arrow" onclick="nextSlide('cm')">→</button>
    </div>
  </div>
  <!-- PHOTO -->
  <div class="pf-slider" id="slider-photo" data-page="0" data-total="2">
    <div class="pf-slider-inner" id="grid-photo-0">
      <div class="pf-slide-item tall" onclick="openLightbox('photo',0)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Portrait équipe</p><p class="pf-slide-cat">Photo corporate</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item" onclick="openLightbox('photo',1)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Photo produits</p><p class="pf-slide-cat">Photo corporate</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item" onclick="openLightbox('photo',2)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Ambiance boutique</p><p class="pf-slide-cat">Photo corporate</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
    </div>
    <div class="pf-slider-inner" id="grid-photo-1" style="display:none">
      <div class="pf-slide-item wide" onclick="openLightbox('photo',3)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Photo culinaire</p><p class="pf-slide-cat">Photo corporate</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item tall" onclick="openLightbox('photo',4)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Portrait professionnel</p><p class="pf-slide-cat">Photo corporate</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
    </div>
    <div class="pf-slider-nav">
      <button class="pf-arrow" onclick="prevSlide('photo')">←</button>
      <div class="pf-dots" id="dots-photo"><span class="pf-dot active" onclick="goSlide('photo',0)"></span><span class="pf-dot" onclick="goSlide('photo',1)"></span></div>
      <span class="pf-slide-counter" id="counter-photo">1 / 2</span>
      <button class="pf-arrow" onclick="nextSlide('photo')">→</button>
    </div>
  </div>
  <!-- VIDEO -->
  <div class="pf-slider" id="slider-video" data-page="0" data-total="1">
    <div class="pf-slider-inner" id="grid-video-0">
      <div class="pf-slide-item wide" onclick="openLightbox('video',0)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><path d="M17 14l10 6-10 6V14Z" fill="#C90018" opacity="0.4"/></svg><span>Miniature vidéo ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Vidéo institutionnelle</p><p class="pf-slide-cat">Vidéo</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item" onclick="openLightbox('video',1)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><path d="M17 14l10 6-10 6V14Z" fill="#C90018" opacity="0.4"/></svg><span>Miniature vidéo ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Reel court format</p><p class="pf-slide-cat">Vidéo</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item" onclick="openLightbox('video',2)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><path d="M17 14l10 6-10 6V14Z" fill="#C90018" opacity="0.4"/></svg><span>Miniature vidéo ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Témoignage client</p><p class="pf-slide-cat">Vidéo</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
    </div>
    <div class="pf-slider-nav">
      <button class="pf-arrow" onclick="prevSlide('video')">←</button>
      <div class="pf-dots" id="dots-video"><span class="pf-dot active"></span></div>
      <span class="pf-slide-counter" id="counter-video">1 / 1</span>
      <button class="pf-arrow" onclick="nextSlide('video')">→</button>
    </div>
  </div>
  <!-- MARIAGE -->
  <div class="pf-slider" id="slider-mariage" data-page="0" data-total="2">
    <div class="pf-slider-inner" id="grid-mariage-0">
      <div class="pf-slide-item tall" onclick="openLightbox('mariage',0)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Préparatifs</p><p class="pf-slide-cat">Mariage</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item" onclick="openLightbox('mariage',1)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Cérémonie</p><p class="pf-slide-cat">Mariage</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item" onclick="openLightbox('mariage',2)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Portraits mariés</p><p class="pf-slide-cat">Mariage</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
    </div>
    <div class="pf-slider-inner" id="grid-mariage-1" style="display:none">
      <div class="pf-slide-item wide" onclick="openLightbox('mariage',3)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Réception &amp; fête</p><p class="pf-slide-cat">Mariage</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item" onclick="openLightbox('mariage',4)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Détails fleurs</p><p class="pf-slide-cat">Mariage</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
    </div>
    <div class="pf-slider-nav">
      <button class="pf-arrow" onclick="prevSlide('mariage')">←</button>
      <div class="pf-dots" id="dots-mariage"><span class="pf-dot active" onclick="goSlide('mariage',0)"></span><span class="pf-dot" onclick="goSlide('mariage',1)"></span></div>
      <span class="pf-slide-counter" id="counter-mariage">1 / 2</span>
      <button class="pf-arrow" onclick="nextSlide('mariage')">→</button>
    </div>
  </div>
  <!-- DESIGN -->
  <div class="pf-slider" id="slider-design" data-page="0" data-total="2">
    <div class="pf-slider-inner" id="grid-design-0">
      <div class="pf-slide-item" onclick="openLightbox('design',0)">
        <img src="https://lojona.fr/wp-content/uploads/2026/05/4.png" alt="Logo &amp; identité — Design graphique" style="width:100%;height:100%;object-fit:contain;background:#FFF5F7;padding:1.5rem">
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Logo &amp; identité</p><p class="pf-slide-cat">Design graphique</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item wide" onclick="openLightbox('design',1)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="4" width="32" height="32" rx="4" stroke="#C90018" stroke-width="1.5"/><path d="M10 20h20M10 13h12M10 27h16" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Charte graphique</p><p class="pf-slide-cat">Design graphique</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
    </div>
    <div class="pf-slider-inner" id="grid-design-1" style="display:none">
      <div class="pf-slide-item wide" onclick="openLightbox('design',2)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="4" width="32" height="32" rx="4" stroke="#C90018" stroke-width="1.5"/><path d="M10 20h20M10 13h12M10 27h16" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Supports print</p><p class="pf-slide-cat">Design graphique</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
      <div class="pf-slide-item" onclick="openLightbox('design',3)">
        <div class="pf-slide-placeholder"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><rect x="4" y="4" width="32" height="32" rx="4" stroke="#C90018" stroke-width="1.5"/><path d="M10 20h20M10 13h12M10 27h16" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg><span>Ton visuel ici</span></div>
        <div class="pf-slide-overlay"><div class="pf-slide-info"><p class="pf-slide-title">Kit réseaux sociaux</p><p class="pf-slide-cat">Design graphique</p></div></div>
        <div class="pf-zoom-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1h4M1 1v4M13 1h-4M13 1v4M1 13h4M1 13v-4M13 13h-4M13 13v-4" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg></div>
      </div>
    </div>
    <div class="pf-slider-nav">
      <button class="pf-arrow" onclick="prevSlide('design')">←</button>
      <div class="pf-dots" id="dots-design"><span class="pf-dot active" onclick="goSlide('design',0)"></span><span class="pf-dot" onclick="goSlide('design',1)"></span></div>
      <span class="pf-slide-counter" id="counter-design">1 / 2</span>
      <button class="pf-arrow" onclick="nextSlide('design')">→</button>
    </div>
  </div>
</div>
<section class="pf-cta">
  <h2 class="pf-cta-title">Tu veux <em>ce résultat</em><br>pour toi ?</h2>
  <p class="pf-cta-sub">Parlons de ton projet. Audit gratuit 30 min, sans engagement, réponse sous 48h.</p>
  <a href="/devis-gratuit/" class="pf-cta-btn">Demander un devis ✦</a>
</section>
<footer class="pf-footer">
  <a href="/"><img src="https://lojona.fr/wp-content/uploads/2026/05/Document.png" alt="Lojona Studio" style="display:block;height:80px;width:auto"></a>
  <p class="pf-footer-copy">© 2026 Lo · Jo · Na — Tous droits réservés</p>
  <div class="pf-footer-links">
    <a href="/mentions-legales/">Mentions légales</a>
    <a href="/cgv/">CGV</a>
    <a href="/confidentialite/">Confidentialité</a>
  </div>
</footer>
</div>
<div class="pf-lightbox" id="lightbox">
  <div class="pf-lb-content">
    <button class="pf-lb-close" onclick="closeLightbox()">✕</button>
    <button class="pf-lb-prev" onclick="lbPrev()">←</button>
    <div id="lb-img" class="pf-lb-placeholder">
      <svg width="48" height="48" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/><circle cx="14" cy="18" r="4" stroke="#C90018" stroke-width="1.5"/><path d="M4 26l8-8 6 6 4-4 8 8" stroke="#C90018" stroke-width="1.5" stroke-linecap="round"/></svg>
      <span id="lb-placeholder-text">Ton visuel ici</span>
    </div>
    <button class="pf-lb-next" onclick="lbNext()">→</button>
    <div class="pf-lb-info">
      <p class="pf-lb-title" id="lb-title"></p>
      <p class="pf-lb-desc" id="lb-desc"></p>
    </div>
  </div>
</div>
<script>
const cats={cm:['Feed Instagram','Stories animées','Carrousel LinkedIn','Reels court format','Calendrier éditorial'],photo:['Portrait équipe','Photo produits','Ambiance boutique','Photo culinaire','Portrait professionnel'],video:['Vidéo institutionnelle','Reel court format','Témoignage client'],mariage:['Préparatifs','Cérémonie','Portraits mariés','Réception & fête','Détails fleurs'],design:['Logo & identité','Charte graphique','Supports print','Kit réseaux sociaux']};
const catLabels={cm:'Community Management',photo:'Photo corporate',video:'Vidéo',mariage:'Mariage',design:'Design graphique'};
const images={design:{0:'https://lojona.fr/wp-content/uploads/2026/05/4.png'}};
let currentCat='cm',currentIdx=0;
function showCat(cat,btn){document.querySelectorAll('.pf-slider').forEach(s=>s.classList.remove('active'));document.querySelectorAll('.pf-tab').forEach(t=>t.classList.remove('active'));document.getElementById('slider-'+cat).classList.add('active');btn.classList.add('active');currentCat=cat;}
function showPage(cat,page){const slider=document.getElementById('slider-'+cat);const total=parseInt(slider.dataset.total);if(page<0)page=total-1;if(page>=total)page=0;slider.dataset.page=page;for(let i=0;i<total;i++){const g=document.getElementById('grid-'+cat+'-'+i);if(g)g.style.display=i===page?'grid':'none';}document.getElementById('counter-'+cat).textContent=(page+1)+' / '+total;document.querySelectorAll('#dots-'+cat+' .pf-dot').forEach((d,i)=>d.classList.toggle('active',i===page));}
function nextSlide(cat){const s=document.getElementById('slider-'+cat);showPage(cat,parseInt(s.dataset.page)+1)}
function prevSlide(cat){const s=document.getElementById('slider-'+cat);showPage(cat,parseInt(s.dataset.page)-1)}
function goSlide(cat,page){showPage(cat,page)}
function openLightbox(cat,idx){currentCat=cat;currentIdx=idx;document.getElementById('lightbox').classList.add('open');document.body.style.overflow='hidden';updateLightbox();}
function updateLightbox(){const items=cats[currentCat];document.getElementById('lb-title').textContent=items[currentIdx]||'';document.getElementById('lb-desc').textContent=catLabels[currentCat]||'';const imgUrl=images[currentCat]&&images[currentCat][currentIdx];const lb=document.getElementById('lb-img');if(imgUrl){lb.className='pf-lb-img-wrap';lb.innerHTML='<img src="'+imgUrl+'" alt="'+items[currentIdx]+'">';}else{lb.className='pf-lb-placeholder';lb.innerHTML='<svg width="48" height="48" viewBox="0 0 40 40" fill="none"><rect x="4" y="8" width="32" height="24" rx="3" stroke="#C90018" stroke-width="1.5"/></svg><span>'+items[currentIdx]+'</span>';}}
function closeLightbox(){document.getElementById('lightbox').classList.remove('open');document.body.style.overflow='';}
function lbNext(){currentIdx=(currentIdx+1)%cats[currentCat].length;updateLightbox()}
function lbPrev(){currentIdx=(currentIdx-1+cats[currentCat].length)%cats[currentCat].length;updateLightbox()}
document.getElementById('lightbox').addEventListener('click',function(e){if(e.target===this)closeLightbox()});
document.addEventListener('keydown',function(e){if(e.key==='Escape')closeLightbox();if(e.key==='ArrowRight')lbNext();if(e.key==='ArrowLeft')lbPrev()});
</script>
</body>
</html>