/* =========================================================
   Balsamiq Live – styles de la page one-page (modèle "Balsamiq Live")
   Tout est préfixé par .bl-live pour ne pas toucher au reste du site.
   ========================================================= */

/* Polices hébergées localement (RGPD : aucun appel à Google Fonts) */
@font-face{font-family:"Urbanist";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/urbanist-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/urbanist-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/urbanist-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}

/* --- Code couleur Live --- */
.bl-live{
  --ink:#0E0D0E;--paper:#FFFFFF;--mist:#F6F4F4;--line:#E7E2E2;--muted:#6A6365;
  --red:#E3120B;--red-soft:#FCEDEC;--on-dark:#F4F1F1;--on-dark-muted:#A49D9E;
  --f-display:"Urbanist","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Manrope","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --wrap:1200px;--section:clamp(96px,13vw,176px);
  background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:91px; /* = hauteur du header fixe (15 + 61 + 15) */
}
.bl-live *,.bl-live *::before,.bl-live *::after{box-sizing:border-box}
.bl-live h1,.bl-live h2,.bl-live h3{font-family:var(--f-display);margin:0;color:inherit;text-wrap:balance;letter-spacing:-0.02em;line-height:1.1;text-transform:none}
.bl-live p{margin:0}
.bl-live ul,.bl-live ol{margin:0;padding:0}
.bl-live a{color:inherit}
.bl-live img{max-width:100%}
.bl-live figure{margin:0}
.bl-live :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.bl-live .wrap{max-width:calc(var(--wrap) + 64px);margin:0 auto;padding-left:16px;padding-right:16px}
@media (min-width:700px){.bl-live .wrap{padding-left:32px;padding-right:32px}}
@keyframes bl-tally{50%{opacity:.35}}
.bl-live .h2{margin-bottom:0}

/* ---------- Eyebrows & titres ---------- */
.bl-live .eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.bl-live .eyebrow::before{content:"";width:28px;height:2px;background:var(--red)}
.bl-live .h2{font-size:clamp(36px,5vw,60px);line-height:1.04;font-weight:700;margin-top:22px}
.bl-live .h2 em{font-style:normal;color:var(--red)}
.bl-live .lede{color:var(--muted);font-size:clamp(16px,1.4vw,18px);max-width:42ch}
.bl-live .sec-head{display:grid;gap:28px;align-items:end;margin-bottom:clamp(48px,6vw,80px)}
@media (min-width:900px){.bl-live .sec-head{grid-template-columns:1.2fr 1fr;gap:64px}.bl-live .sec-head .lede{justify-self:end}}

/* ---------- Hero ---------- */
.bl-live .hero{padding-block:clamp(28px,3.4vw,56px) var(--section)}
.bl-live .hero-grid{display:grid;gap:clamp(40px,5vw,72px);align-items:center}
@media (min-width:980px){.bl-live .hero-grid{grid-template-columns:minmax(0,11fr) minmax(0,13fr)}}
.bl-live .hero h1{font-size:clamp(42px,5.6vw,80px);line-height:.98;font-weight:800;letter-spacing:-0.035em}
.bl-live .hero h1 .red{color:var(--red);display:block}
.bl-live .hero .lede{margin-top:32px;font-size:clamp(17px,1.5vw,20px);color:#3E393A;max-width:34ch}
.bl-live .hero-tags{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted)}
.bl-live .hero-tags span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-right:9px;vertical-align:middle}
.bl-live .hero-media{position:relative;margin:0;border-radius:18px;overflow:hidden;background:var(--ink);aspect-ratio:4/3;max-width:100%}
.bl-live .hero-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.95);transform:scale(1.04);animation:bl-settle 1.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes bl-settle{to{transform:scale(1)}}
.bl-live .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(227,18,11,.0) 55%,rgba(227,18,11,.22) 100%),linear-gradient(0deg,rgba(14,13,14,.55),rgba(14,13,14,0) 38%);pointer-events:none}
.bl-live .tc{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:2;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;background:rgba(14,13,14,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-family:var(--f-mono);font-size:clamp(12px,1.2vw,14px);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.bl-live .tc b{display:flex;align-items:center;gap:7px;color:#fff;background:var(--red);padding:3px 8px;border-radius:5px;font-weight:500;font-size:.85em}
.bl-live .tc b::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:bl-tally 1.2s ease-in-out infinite}
.bl-live .cam-label{position:absolute;right:clamp(14px,2vw,24px);top:clamp(14px,2vw,24px);z-index:2;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:#fff;background:rgba(14,13,14,.55);padding:5px 9px;border-radius:5px}

/* ---------- Packs ---------- */
.bl-live .packs{padding-bottom:var(--section)}
.bl-live .pack-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.bl-live .pack{display:flex;flex-direction:column;padding:36px 30px 30px;border:1px solid var(--line);border-radius:18px;background:var(--paper);transition:border-color .3s, transform .3s, box-shadow .3s}
.bl-live .pack:hover{border-color:#d8cfcf;transform:translateY(-4px);box-shadow:0 22px 50px -30px rgba(14,13,14,.35)}
.bl-live .pack .num{font-family:var(--f-display);font-weight:700;font-size:44px;line-height:1;color:var(--red);letter-spacing:-0.03em}
.bl-live .pack .num::after{content:"";display:block;width:30px;height:3px;border-radius:2px;background:var(--red);margin-top:18px}
.bl-live .pack h3{font-size:26px;font-weight:700;margin-top:22px;line-height:1.1}
.bl-live .pack .desc{color:var(--muted);margin-top:12px;font-size:15px;min-height:4.8em}
.bl-live .pack ul{list-style:none;margin:26px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;gap:11px;font-size:14.5px;line-height:1.45}
.bl-live .pack li{display:grid;grid-template-columns:14px 1fr;gap:10px}
.bl-live .pack li::before{content:"";width:6px;height:6px;margin-top:.5em;border-top:1.6px solid var(--red);border-right:1.6px solid var(--red);transform:rotate(45deg)}
.bl-live .pack .specs{margin-top:auto;padding-top:28px}
.bl-live .pack .spec-row{padding-top:20px;border-top:1px solid var(--line)}
.bl-live .spec-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}
.bl-live .spec{display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap}
.bl-live .spec .ico{flex:none;width:30px;height:30px;fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bl-live .spec p{line-height:1.3}
.bl-live .spec-row strong{display:block;font-family:var(--f-display);font-size:24px;letter-spacing:-0.02em;color:var(--ink);font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.bl-live .pack-note{margin-top:28px;color:var(--muted);font-size:14px;display:flex;align-items:center;gap:10px}
.bl-live .pack-note::before{content:"";width:16px;height:2px;background:var(--red)}

/* ---------- Expertise (bande régie) ---------- */
.bl-live .expertise{position:relative;background:var(--ink);color:var(--on-dark);padding-block:clamp(88px,10vw,140px);overflow:hidden;isolation:isolate}
.bl-live .expertise .bg{position:absolute;top:0;right:0;width:min(100%,70%);aspect-ratio:1503/480;max-width:100%;z-index:-1;background-size:cover;background-position:center;opacity:.95}
@media (max-width:899px){.bl-live .expertise .bg{width:100%}}
.bl-live .expertise .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(14,13,14,.5) 25%,rgba(14,13,14,.05) 60%),linear-gradient(180deg,rgba(14,13,14,0) 45%,var(--ink) 100%)}
@media (max-width:899px){.bl-live .expertise .bg::after{background:linear-gradient(180deg,rgba(14,13,14,.55),rgba(14,13,14,.9) 55%)}}
.bl-live .expertise .eyebrow{color:var(--on-dark)}
.bl-live .expertise .h2{color:#fff;max-width:16ch}
.bl-live .expertise .lede{color:#E2DCDC;text-shadow:0 1px 14px rgba(14,13,14,.9)}
.bl-live .expertise .skill p{color:#CFC8C8;text-shadow:0 1px 12px rgba(14,13,14,.9)}
.bl-live .skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));border-top:1px solid rgba(255,255,255,.14)}
.bl-live .skill{padding:36px 26px 8px 0;display:grid;gap:14px;align-content:start}
@media (min-width:900px){.bl-live .skill{padding:40px 28px 8px;border-left:1px solid rgba(255,255,255,.14)}.bl-live .skill:first-child{border-left:0;padding-left:0}}
.bl-live .skill svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bl-live .skill svg .r{stroke:var(--red)}
.bl-live .skill h3{font-size:19px;font-weight:700;color:#fff;letter-spacing:-0.01em}
.bl-live .skill p{font-size:14.5px;color:var(--on-dark-muted);line-height:1.55}

/* ---------- Méthodologie ---------- */
.bl-live .method{padding-block:var(--section)}
.bl-live .flow{display:grid;gap:16px}
@media (min-width:1080px){.bl-live .flow{grid-template-columns:minmax(0,1.05fr) minmax(0,3.4fr) minmax(0,1.05fr);align-items:stretch}}
.bl-live .opt{background:var(--red-soft);border-radius:18px;padding:30px 28px;display:grid;gap:14px;align-content:start}
.bl-live .opt h3{font-size:17px;font-weight:700;color:var(--red);letter-spacing:.02em;text-transform:uppercase}
.bl-live .opt h3 small{display:block;font-family:var(--f-body);font-size:11px;letter-spacing:.14em;font-weight:700;color:#B3423D;margin-top:4px}
.bl-live .opt ul{list-style:none;padding:0;margin:0;display:grid;gap:7px;font-size:14.5px;color:#4A3F40}
.bl-live .steps{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--line);border-radius:18px;background:var(--paper);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.bl-live .steps li{padding:30px 26px;position:relative;display:grid;gap:10px;align-content:start}
.bl-live .steps li+li{border-top:1px solid var(--line)}
@media (min-width:760px){.bl-live .steps li+li{border-top:0;border-left:1px solid var(--line)}}
.bl-live .steps .n{font-family:var(--f-display);font-weight:700;font-size:38px;color:var(--red);line-height:1;letter-spacing:-0.03em}
.bl-live .steps h3{font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-family:var(--f-body)}
.bl-live .steps p{font-size:14.5px;color:var(--muted)}
.bl-live .steps .bar{position:absolute;left:26px;right:26px;top:0;height:2px;background:var(--line);overflow:hidden}
.bl-live .steps .bar::after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.bl-live .method.in .steps li:nth-child(1) .bar::after{transform:scaleX(1);transition-delay:.1s}
.bl-live .method.in .steps li:nth-child(2) .bar::after{transform:scaleX(1);transition-delay:.5s}
.bl-live .method.in .steps li:nth-child(3) .bar::after{transform:scaleX(1);transition-delay:.9s}
.bl-live .method.in .steps li:nth-child(4) .bar::after{transform:scaleX(1);transition-delay:1.3s}
.bl-live .flow-note{margin-top:22px;font-size:13px;color:var(--muted)}

/* ---------- Contact ---------- */
.bl-live .contact{background:var(--mist);padding-block:var(--section)}
.bl-live .contact-grid{display:grid;gap:56px}
@media (min-width:980px){.bl-live .contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px}}
.bl-live .contact .lede{margin-top:26px;color:#4A4445}
.bl-live .doc-note{display:flex;gap:14px;align-items:flex-start;margin-top:44px;padding-top:28px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);max-width:40ch}
.bl-live .doc-note svg{flex:none;width:28px;height:28px;stroke:var(--red);fill:none;stroke-width:1.6}
.bl-live .coords{margin-top:28px;display:grid;gap:6px;font-size:14.5px}
.bl-live .coords span{color:var(--muted)}


.bl-live footer{background:var(--ink);color:var(--on-dark-muted);font-size:13.5px}
.bl-live footer .wrap{padding-block:48px;display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:center}
.bl-live footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.bl-live footer a{text-decoration:none;color:var(--on-dark)}
.bl-live footer a:hover{color:#fff;text-decoration:underline}


/* ---------- Formulaire Contact Form 7 "Balsamiq Live" ---------- */
.bl-live .bl-form .wpcf7{background:var(--paper);border-radius:20px;padding:clamp(24px,3.4vw,44px);box-shadow:0 30px 60px -45px rgba(14,13,14,.4)}
.bl-live .bl-form .wpcf7-form{margin:0}
.bl-live .bl-form-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media (max-width:600px){.bl-live .bl-form-grid{grid-template-columns:1fr}}
.bl-live .field{display:grid;gap:7px;min-width:0}
.bl-live .field.full{grid-column:1/-1}
.bl-live .field label{font-size:13px;font-weight:600;color:#3B3637;margin:0}
.bl-live .field .req{color:var(--red)}
.bl-live .wpcf7-form-control-wrap{display:block}
.bl-live .bl-form input[type=text],.bl-live .bl-form input[type=email],.bl-live .bl-form input[type=tel],.bl-live .bl-form input[type=date],.bl-live .bl-form select,.bl-live .bl-form textarea{
  font-family:var(--f-body);font-size:15px;line-height:1.4;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;width:100%;height:auto;box-shadow:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.bl-live .bl-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E0D0E' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;padding-right:38px}
.bl-live .bl-form textarea{min-height:130px;resize:vertical}
.bl-live .bl-form input:focus,.bl-live .bl-form select:focus,.bl-live .bl-form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--mist)}
.bl-live .bl-form .wpcf7-not-valid{border-color:var(--red)}
.bl-live .bl-form .wpcf7-not-valid-tip{color:var(--red);font-size:12.5px;margin-top:6px}
.bl-live .form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;margin-top:8px}
.bl-live .bl-form .wpcf7-submit{
  font-family:var(--f-body);font-weight:700;font-size:15px;line-height:1;background-color:var(--red);color:#fff;border:0;border-radius:999px;
  padding:17px 56px 17px 28px;cursor:pointer;transition:background-color .2s,transform .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h12M10 4l5 5-5 5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 26px center;background-size:18px 18px}
.bl-live .bl-form .wpcf7-submit:hover{background-color:#C20F09;transform:translateX(2px)}
.bl-live .bl-form .wpcf7-spinner{margin:0 0 0 12px}
.bl-live .privacy{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--muted);max-width:30ch;margin:0}
.bl-live .privacy svg{flex:none;width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.bl-live .bl-form .wpcf7 form .wpcf7-response-output{margin:20px 0 0;border:0;border-radius:12px;padding:14px 16px;font-size:14px;background:var(--red-soft);color:#7A1E1A}
.bl-live .bl-form .wpcf7 form.sent .wpcf7-response-output{background:#EDF7EF;color:#1F5B2B}
.bl-live .bl-form-missing{padding:20px;border:1px dashed var(--red);border-radius:12px;color:var(--red)}

/* ---------- Apparition au scroll (état de repos visible) ---------- */
.bl-live .rise{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.bl-js .bl-live .rise.wait{transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){.bl-live *,.bl-live *::before,.bl-live *::after{animation:none!important;transition:none!important}.bl-js .bl-live .rise.wait{transform:none}}


/* ---------- Footer Live : rouge à la place du vert ---------- */
.bl-is-live .footer-area .copyright-text a:hover,
.bl-is-live .footer-area .social-icon li a:hover{color:#E3120B}
.bl-is-live .footer-area .scroll-arrow-btn svg path{stroke:#E3120B}
.bl-is-live .footer-area .fa-ico-footer svg:hover{fill:#E3120B!important}


/* Décalage sous le header fixe, aligné sur sa hauteur à chaque palier */
@media only screen and (min-width: 993px) and (max-width: 1199.98px){.bl-live{padding-top:81px}}
@media only screen and (max-width: 992.98px){.bl-live{padding-top:111px}}
@media only screen and (max-width: 575.98px){.bl-live{padding-top:100px}}


/* ---------- Packs sur mobile : carrousel (une carte + l'amorce de la suivante) ---------- */
.bl-live .pack-nav{display:none}
@media (max-width:760px){
  .bl-live .pack-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bl-live .pack-grid::-webkit-scrollbar{display:none}
  .bl-live .pack{flex:0 0 84%;scroll-snap-align:start;padding:28px 24px 24px}
  .bl-live .pack:hover{transform:none;box-shadow:none}
  .bl-live .pack .desc{min-height:0}
  .bl-live .pack ul{gap:9px;font-size:14px}
  .bl-live .pack-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
  .bl-live .pack-dots{display:flex;gap:8px}
  .bl-live .pack-dots button{width:8px;height:8px;min-width:0;padding:0;border:0;border-radius:99px;background:var(--line);cursor:pointer;box-shadow:none;transition:width .3s,background-color .3s}
  .bl-live .pack-dots button.on{width:26px;background:var(--red)}
  .bl-live .pack-count{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
  .bl-live .pack-count b{color:var(--ink);font-weight:500}
}