/*
Theme Name: BLUPROD
Theme URI: https://bluproduction.com
Author: BLUPROD
Description: Theme BLUPROD - Content that drives your digital transformation. Genere automatiquement depuis le site statique.
Version: 1.3
*/


  :root{
    --navy:#1B2C8F;
    --navy-dark:#111D66;
    --ink:#101114;
    --muted:#6b6b73;
    --line:#e9e8e4;
    --paper:#ffffff;
    --soft:#F8F8F6;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;font-size:16px}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 32px}
  img{display:block;max-width:100%}
  .serif{font-family:'Fraunces',serif;font-weight:500}

  .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:8px;font-weight:600;font-size:14.5px;cursor:pointer;border:1px solid transparent;transition:all .2s ease}
  .btn-solid{background:var(--navy);color:#fff}
  .btn-solid:hover{background:var(--navy-dark)}
  .btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn-outline:hover{border-color:var(--ink)}
  .btn .arrow{transition:transform .2s ease}
  .btn:hover .arrow{transform:translateX(3px)}

  .nav-outer{position:sticky;top:14px;z-index:100;padding:0 14px}
  nav{
    max-width:1200px;margin:0 auto;background:var(--navy);
    border:2px solid #000;border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
  }
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:92px;padding:0 30px;max-width:none}
  .logo{display:flex;align-items:center;gap:14px}
  .logo .mark-icon{height:52px;width:auto}
  .logo .wordmark{font-weight:800;font-size:22px;letter-spacing:-0.3px;color:#fff;line-height:1.15}
  .logo .tagline{font-size:9.5px;font-weight:700;letter-spacing:0.4px;color:#c3caee;line-height:1.35;text-transform:uppercase;margin-top:1px}
  .navlinks{display:flex;gap:36px;font-size:14.5px;font-weight:700;color:#fff}
  .navlinks a{transition:opacity .15s ease;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#8f9adb}
  .navlinks a:hover{opacity:0.8}
  nav .btn-solid{background:#fff;color:var(--navy);font-weight:800}
  nav .btn-solid:hover{background:#e8eaff}
  @media (max-width:820px){.navlinks{display:none}}

  .hero{
    padding:130px 0 100px;text-align:center;position:relative;overflow:hidden;
    background:radial-gradient(60% 50% at 50% 0%, rgba(21,36,120,0.06), transparent 70%);
  }
  .hero-video-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
  .hero-video-bg iframe{
    position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;
    min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);
  }
  .hero-video-overlay{position:absolute;inset:0;z-index:1;background:rgba(255,255,255,0.55)}
  .hero .wrap{position:relative;z-index:2}
  .hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--navy);text-transform:uppercase;letter-spacing:1.8px;margin-bottom:26px;padding:7px 16px;border:1px solid var(--line);border-radius:100px}
  .hero .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--navy)}
  .hero h1{font-size:clamp(34px,5vw,58px);font-weight:800;letter-spacing:-1.6px;line-height:1.1;max-width:800px;margin:0 auto 24px}
  .hero h1 .accent{color:var(--navy)}
  .hero p.lead{font-size:18px;color:var(--muted);max-width:520px;margin:0 auto 38px;font-weight:400}
  .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

  .trusted{padding:22px 0;background:var(--navy);overflow:hidden}
  .trusted .lbl{font-size:10.5px;color:#9aa3d9;text-transform:uppercase;letter-spacing:2px;text-align:center;margin-bottom:14px;font-weight:700}
  .partners-track{display:flex;align-items:center;gap:60px;width:max-content;animation:partners-scroll 32s linear infinite}
  .partners-track img{height:150px;width:auto;object-fit:contain;flex:none;opacity:0.95}
  @keyframes partners-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  section{padding:110px 0}
  .section-head{max-width:600px;margin:0 auto 60px;text-align:center}
  .section-head .eyebrow{font-size:12.5px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:1.8px;margin-bottom:16px}
  .section-head h2{font-size:clamp(28px,3.8vw,42px);font-weight:800;letter-spacing:-1px}
  .section-head p{color:var(--muted);font-size:16.5px;margin-top:16px}

  .services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  @media (max-width:700px){.services-grid{grid-template-columns:1fr}}
  .service{
    position:relative;overflow:hidden;padding:40px 34px;border-radius:20px;
    min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;
    border:1px solid var(--line);transition:transform .25s ease, box-shadow .25s ease;
  }
  .service:hover{transform:translateY(-4px)}
  .service.dark{background:var(--navy);color:#fff;border-color:var(--navy)}
  .service.light{background:#fff;box-shadow:0 1px 2px rgba(16,17,20,0.04), 0 1px 12px rgba(16,17,20,0.04)}
  .service.light:hover{box-shadow:0 10px 28px rgba(16,17,20,0.1)}
  .service.dark:hover{box-shadow:0 12px 30px rgba(21,36,120,0.3)}
  .service .num{
    position:absolute;top:-8px;right:6px;font-family:'Fraunces',serif;font-weight:500;
    font-size:120px;line-height:1;color:rgba(21,36,120,0.06);pointer-events:none;
  }
  .service.dark .num{color:rgba(255,255,255,0.08)}
  .service .icon{
    position:relative;z-index:1;width:48px;height:48px;border-radius:12px;
    background:var(--soft);display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;color:var(--navy);
  }
  .service.dark .icon{background:rgba(255,255,255,0.12);color:#fff}
  .service h3{position:relative;z-index:1;font-size:20px;font-weight:800;margin-bottom:10px;letter-spacing:-0.3px}
  .service p{position:relative;z-index:1;font-size:14.5px;color:var(--muted)}
  .service.dark p{color:#c3caee}

  /* CASE STUDIES */
  .cases{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  @media (max-width:860px){.cases-grid{grid-template-columns:1fr}}
  .case{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:16px}
  .case .client{font-family:'Fraunces',serif;font-weight:500;font-size:22px}
  .case .tag{font-size:11.5px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:1.5px}
  .case p{font-size:14.5px;color:var(--muted)}

  /* OFFERS */
  .offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  @media (max-width:860px){.offers-grid{grid-template-columns:1fr}}
  .offer{
    background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);
    border-radius:16px;padding:34px;display:flex;flex-direction:column;
    box-shadow:0 2px 8px rgba(21,36,120,0.05);transition:transform .2s ease, box-shadow .2s ease;
  }
  .offer:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(21,36,120,0.14)}
  .offer.featured{box-shadow:0 14px 36px rgba(21,36,120,0.16)}
  .offer .badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:#fff;background:var(--navy);padding:6px 14px;border-radius:100px;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px;width:fit-content}
  .offer h3{font-size:19px;font-weight:800;margin-bottom:10px;letter-spacing:-0.3px;color:var(--navy)}
  .offer p.desc{font-size:14px;color:var(--muted);margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
  .offer ul{list-style:none;display:flex;flex-direction:column;gap:13px}
  .offer li{font-size:14px;display:flex;gap:10px;align-items:flex-start;font-weight:500}
  .offer li svg{flex:none;margin-top:1px;color:#fff;background:var(--navy);border-radius:50%;padding:3px;box-sizing:border-box}

  .reel .reel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  @media (max-width:700px){.reel .reel-grid{grid-template-columns:1fr}}
  .reel-card{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line)}
  .reel-frame{aspect-ratio:16/9;background:var(--soft);position:relative}
  .reel-frame iframe{width:100%;height:100%;border:0;display:block}
  .reel-empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#b3b3ba}
  .reel-empty .play{width:42px;height:42px;border-radius:50%;border:1.5px solid #c2c2c8;display:flex;align-items:center;justify-content:center}
  .reel-empty .play::after{content:'';border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #b3b3ba;margin-left:2px}
  .reel-empty span{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
  .reel-card .cap{padding:16px 18px;font-weight:600;font-size:14.5px;border-top:1px solid var(--line)}

  .process-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-top:6px}
  @media (max-width:800px){.process-grid{grid-template-columns:1fr;gap:38px}}
  .process-grid::before{content:'';position:absolute;top:24px;left:calc(12.5% - 4px);right:calc(12.5% - 4px);height:2px;background-image:linear-gradient(to right,var(--line) 0,var(--line) 60%,transparent 60%,transparent 100%);background-size:14px 2px;background-repeat:repeat-x}
  @media (max-width:800px){.process-grid::before{display:none}}
  .pstep{position:relative;padding-right:8px}
  .pstep:nth-child(1){transition-delay:.05s}
  .pstep:nth-child(2){transition-delay:.22s}
  .pstep:nth-child(3){transition-delay:.39s}
  .pstep:nth-child(4){transition-delay:.56s}
  .pstep .n{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--navy);color:var(--navy);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:18px;font-weight:500;margin-bottom:20px;box-shadow:0 0 0 6px var(--paper)}
  .pstep h3{font-size:16.5px;font-weight:700;margin-bottom:8px;letter-spacing:-0.2px}
  .pstep p{font-size:14px;color:var(--muted)}

  .studio{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .studio-main-photo{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:20px;margin-bottom:18px;box-shadow:0 18px 40px rgba(16,17,20,0.14)}
  .studio-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:48px}
  .studio-thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;box-shadow:0 6px 18px rgba(16,17,20,0.08)}
  @media (max-width:700px){.studio-thumbs{grid-template-columns:1fr 1fr}}
  .studio-rates{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  @media (max-width:860px){.studio-rates{grid-template-columns:1fr}}
  .rate-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 26px;text-align:center}
  .rate-card.feat{border-color:var(--navy);box-shadow:0 14px 32px rgba(21,36,120,0.14);position:relative}
  .rate-card.feat::before{content:'Le plus choisi';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;padding:5px 14px;border-radius:100px}
  .rate-card .rlabel{font-size:12px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
  .rate-card .rprice{font-family:'Fraunces',serif;font-size:34px;font-weight:500;letter-spacing:-0.5px}
  .rate-card .rprice span{font-size:14px;font-weight:600;color:var(--muted);font-family:'Inter',sans-serif}
  .rate-card .rdesc{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5}
  .studio-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:18px}

  .about{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .about-grid{display:grid;grid-template-columns:0.65fr 1.35fr;gap:60px;align-items:center}
  @media (max-width:820px){.about-grid{grid-template-columns:1fr}}
  .avatar{aspect-ratio:1;border-radius:18px;background:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px rgba(21,36,120,0.25)}
  .avatar img{height:52px;width:auto}
  .about-grid .quote-mark{font-family:'Fraunces',serif;font-size:44px;color:var(--navy);opacity:0.35;line-height:0.5;margin-bottom:10px;display:block}
  .about-grid h3{font-size:23px;font-weight:800;letter-spacing:-0.5px;margin-bottom:4px}
  .about-grid .role{font-weight:600;color:var(--navy);margin-bottom:18px;font-size:13px;text-transform:uppercase;letter-spacing:1px}
  .about-grid p{font-size:16px;color:var(--muted);margin-bottom:14px}

  .cta{background:var(--navy);color:#fff;position:relative;overflow:hidden}
  .cta::before{content:'';position:absolute;inset:0;background:radial-gradient(50% 60% at 85% 20%, rgba(255,255,255,0.08), transparent 70%)}
  .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;position:relative}
  @media (max-width:840px){.cta-grid{grid-template-columns:1fr}}
  .cta-left .eyebrow{font-size:12.5px;font-weight:700;color:#9fb0ff;text-transform:uppercase;letter-spacing:1.8px;margin-bottom:16px}
  .cta-left h2{font-size:clamp(28px,3.8vw,40px);font-weight:800;letter-spacing:-1px;margin-bottom:16px}
  .cta-left p{color:#c3caee;font-size:16px;margin-bottom:30px}
  .contact-line{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,0.14);font-size:14.5px}
  .contact-line .k{color:#8f9adb;min-width:80px}
  form{display:grid;gap:16px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:0 20px 50px rgba(16,17,20,0.12)}
  .form-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media (max-width:480px){.form-two{grid-template-columns:1fr}}
  input,textarea{width:100%;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:13px 15px;color:var(--ink);font-family:'Inter';font-size:14px}
  input::placeholder,textarea::placeholder{color:#9a9aa2}
  input:focus,textarea:focus{outline:none;border-color:var(--navy);background:#fff}
  textarea{resize:vertical;min-height:100px}
  form .btn-solid{background:#fff;color:var(--navy);justify-self:start}
  form .btn-solid:hover{background:#e8eaff}

  /* LEAD FORM QUESTIONS */
  .qgroup{margin-bottom:2px}
  .qgroup .qlabel{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px;display:block}
  .qopts{display:flex;gap:8px;flex-wrap:wrap}
  .qopt{padding:9px 16px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease;font-family:'Inter'}
  .qopt:hover{border-color:var(--navy)}
  .qopt.active{background:var(--navy);color:#fff;border-color:var(--navy)}
  .confirm-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted);margin:4px 0 4px;line-height:1.5}
  .confirm-row input{width:auto;margin-top:3px;accent-color:var(--navy)}

  /* BOOKING CALENDAR */
  .cal-box{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--soft)}
  .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-weight:700;font-size:14px;color:var(--ink)}
  .cal-nav{background:#fff;border:1px solid var(--line);border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:14px;color:var(--ink)}
  .cal-nav:hover{border-color:var(--navy)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
  .cal-dow{font-size:10px;color:var(--muted);font-weight:700;padding:4px 0;text-transform:uppercase}
  .cal-day{padding:8px 0;border-radius:8px;font-size:13px;cursor:pointer;background:#fff;border:1px solid transparent;color:var(--ink)}
  .cal-day:hover{border-color:var(--navy)}
  .cal-day.disabled{color:#c8c8ce;cursor:default;pointer-events:none;background:transparent}
  .cal-day.empty{visibility:hidden;pointer-events:none}
  .cal-day.active{background:var(--navy);color:#fff}
  .cal-slots{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  @media (max-width:480px){.cal-slots{grid-template-columns:repeat(2,1fr)}}
  .cal-slot{padding:9px 6px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;cursor:pointer;text-align:center;color:var(--ink)}
  .cal-slot:hover{border-color:var(--navy)}
  .cal-slot.active{background:var(--navy);color:#fff;border-color:var(--navy)}
  .cal-selected{margin-top:14px;font-size:13px;font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 16px;display:none;align-items:center;gap:6px}

  footer{padding:64px 0 32px;border-top:1px solid var(--line)}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
  @media (max-width:700px){.foot-grid{grid-template-columns:1fr 1fr}}
  .foot-col h4{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:16px}
  .foot-col a{display:block;font-size:14.5px;color:var(--ink);margin-bottom:10px}
  .foot-col a:hover{color:var(--navy)}
  .foot-col p{font-size:14px;color:var(--muted);max-width:220px}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:28px;border-top:1px solid var(--line)}
  .copy{font-size:13px;color:#9a9aa3}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
  .reveal.in{opacity:1;transform:none}