/* =====================================================================
   Demande de soumission — capture page
   Same design system as articles.html (the "blog list" style): Riga
   editorial-blueprint palette, Poppins/Raleway, blueprint-lines texture,
   card-on-line components. This page is the funnel's entry point, so
   copy is tight and the next step is stated up front (contract:
   "texte resserré, prochaine étape plus claire, moins de friction").
   ===================================================================== */
:root{
  --riga-royal:#0020f0;--riga-navy:#004997;--riga-sky:#59affe;--riga-slate:#283d50;
  --riga-ink:#0b1530;--riga-paper:#f3f7fb;--riga-line:#c8d5e1;--riga-white:#fff;
  --riga-success:#0f7a4a;--riga-success-bg:#e9f7f0;--riga-error:#b3261e;--riga-error-bg:#fdecea;
  --header-height:110px;
}
html{scroll-padding-top:var(--header-height)}
.skip-link{position:fixed;top:10px;left:10px;z-index:2000;padding:12px 18px;background:#fff;color:var(--riga-ink);font-weight:700;transform:translateY(-150%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}
body.quote-page{font-family:Poppins,Arial,sans-serif;background:var(--riga-white);color:var(--riga-slate)}
.quote-page a:focus-visible,.quote-page button:focus-visible,.quote-page input:focus-visible,.quote-page select:focus-visible,.quote-page textarea:focus-visible{outline:3px solid var(--riga-sky);outline-offset:3px}
.quote-page .header{min-height:94px}.quote-page .header .logo img{width:150px;height:72px;max-height:72px;object-fit:contain}

.quote-shell{width:min(100% - 36px,1180px);margin-inline:auto}

/* ---------- Hero ---------- */
.quote-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(90deg,var(--riga-ink) 0%,var(--riga-ink) 78%,#e8edf3 94%,#fff 100%);color:#fff;padding:54px 0 88px}
.quote-hero .blueprint-lines{position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(89,175,254,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(89,175,254,.14) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(120% 100% at 15% 0%,#000,transparent 75%)}
.quote-hero-bgphoto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:65% 30%;opacity:.05}
.quote-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(160px,.6fr);gap:18px;align-items:center}
.section-kicker{display:flex;align-items:center;gap:14px;margin:0 0 20px;color:#dce9f7;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.section-kicker span{width:44px;height:4px;background:var(--riga-sky)}
.quote-hero h1{max-width:15ch;margin:0;color:#fff;font-size:clamp(38px,5.6vw,68px);line-height:1.02;font-weight:700;letter-spacing:-.045em}
.quote-lead{max-width:52ch;margin:26px 0 0;color:#cad6e5;font-size:clamp(16px,1.6vw,19px);line-height:1.65}
.quote-hero-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.quote-hero-meta .m{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:13px;font-weight:600;color:#fff}
.quote-hero-meta .m i{color:var(--riga-sky);font-size:15px}

/* the crossed-tools artwork — the hero's visual anchor: huge, transparent, running almost the full height of the copy block */
.quote-hero-tools{position:relative;z-index:1;min-width:0;overflow:visible;display:flex;align-items:center}
.quote-hero-tools img{height:clamp(260px,32vw,460px);width:auto;max-width:none;display:block;filter:drop-shadow(0 22px 38px rgba(0,0,0,.4))}

/* ---------- Next-step strip ---------- */
.next-steps{padding:64px 0;background:var(--riga-paper)}
.next-steps-head{margin-bottom:34px}
.next-steps-head .section-kicker{color:var(--riga-navy)}
.next-steps-head .section-kicker span{background:var(--riga-royal)}
.next-steps-head h2{margin:0;max-width:34ch;font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.02em;color:var(--riga-slate)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step-card{position:relative;background:#fff;border:1px solid var(--riga-line);padding:28px 26px 26px}
.step-card .n{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:18px;border-radius:50%;background:var(--riga-royal);color:#fff;font-weight:700;font-size:15px}
.step-card h3{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--riga-slate);letter-spacing:-.01em}
.step-card p{margin:0;color:#5c6d7c;font-size:14px;line-height:1.6}

/* ---------- Form section ---------- */
.quote-form-section{padding:88px 0 108px}
.quote-form-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr);gap:56px;align-items:start}

.quote-card{background:#fff;border:1px solid var(--riga-line);box-shadow:0 28px 70px rgba(40,61,80,.09)}
.quote-card-head{padding:34px 38px 0}
.quote-card-head h2{margin:0 0 10px;font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;color:var(--riga-slate)}
.quote-card-head p{margin:0;color:#647688;font-size:14.5px;line-height:1.6}
.quote-card-head .required-note{margin-top:14px;font-size:12.5px;color:#8a97a5}

.quote-form{padding:26px 38px 38px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field.span-2{grid-column:1 / -1}
.field label{font-size:13px;font-weight:600;color:var(--riga-slate)}
.field label .opt{font-weight:400;color:#8a97a5}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--riga-line);border-radius:6px;
  background:#fff;color:var(--riga-slate);font:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:118px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#9fb0bd}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#a7bfda}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--riga-navy);box-shadow:0 0 0 3px rgba(89,175,254,.25);outline:none}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23283d50' stroke-width='1.6' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

.consent-row{display:flex;gap:10px;align-items:flex-start;margin:2px 0 22px}
.consent-row input[type="checkbox"]{margin-top:3px;width:17px;height:17px;flex-shrink:0;accent-color:var(--riga-navy)}
.consent-row label{font-size:13px;color:#647688;line-height:1.55}

.quote-submit{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 30px;border:0;border-radius:999px;background:var(--riga-royal);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
.quote-submit:hover{background:var(--riga-navy);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,32,240,.45)}
.quote-submit:active{transform:translateY(0)}
.quote-submit i{font-size:17px}
.privacy-note{margin:14px 0 0;font-size:12.5px;color:#8a97a5;line-height:1.6}

/* php-email-form status states, recolored to the Riga palette */
.php-email-form .loading{display:none;text-align:left;padding:14px 16px;margin:0 0 18px;background:var(--riga-paper);color:var(--riga-slate);font-size:14px;font-weight:600;border-radius:6px}
.php-email-form .loading:before{content:"";display:inline-block;width:16px;height:16px;margin:0 10px -3px 0;border-radius:50%;border:2.5px solid var(--riga-sky);border-top-color:transparent;animation:quote-spin 1s linear infinite}
.php-email-form .error-message{display:none;text-align:left;padding:14px 16px;margin:0 0 18px;background:var(--riga-error-bg);color:var(--riga-error);font-size:14px;font-weight:600;border-radius:6px;border-left:3px solid var(--riga-error)}
.php-email-form .sent-message{display:none;text-align:left;padding:16px 18px;margin:0 0 18px;background:var(--riga-success-bg);color:var(--riga-success);font-size:14.5px;font-weight:600;border-radius:6px;border-left:3px solid var(--riga-success)}
@keyframes quote-spin{to{transform:rotate(360deg)}}

/* ---------- Sidebar ---------- */
.quote-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:calc(var(--header-height) + 24px)}
.side-card{background:var(--riga-ink);color:#fff;padding:30px 28px}
.side-card h3{margin:0 0 6px;font-size:16px;font-weight:700}
.side-card p{margin:0 0 20px;color:#aebdd0;font-size:13.5px;line-height:1.6}
.side-contact{display:flex;flex-direction:column;gap:14px}
.side-contact a{display:flex;align-items:center;gap:12px;color:#fff;font-size:14.5px;font-weight:600;text-decoration:none;transition:color .2s}
.side-contact a:hover{color:var(--riga-sky)}
.side-contact i{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(89,175,254,.14);color:var(--riga-sky);font-size:15px;flex-shrink:0}
.side-rbq{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;color:#8593a6}

.side-card.light{background:#fff;border:1px solid var(--riga-line)}
.side-card.light h3{color:var(--riga-slate)}
.side-card.light p{color:#647688}
.trust-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.trust-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:#4a5b68;line-height:1.5}
.trust-list i{color:var(--riga-royal);font-size:15px;margin-top:2px;flex-shrink:0}

@media(max-width:991px){
  .quote-hero{background:var(--riga-ink)}
  .quote-hero-grid{grid-template-columns:1fr;gap:22px;justify-items:center;text-align:center}
  .quote-hero-copy{display:flex;flex-direction:column;align-items:center}
  .section-kicker,.quote-hero-meta{justify-content:center}
  .quote-hero-tools{justify-content:center}
  .quote-hero-tools img{height:clamp(190px,44vw,280px)}
  .steps-grid{grid-template-columns:1fr;gap:14px}
  .quote-form-grid{grid-template-columns:1fr;gap:32px}
  .quote-side{position:static}
  .field-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .quote-shell{width:min(100% - 28px,620px)}
  .quote-hero{padding:34px 0 58px}
  .quote-card-head{padding:26px 22px 0}
  .quote-form{padding:20px 22px 28px}
  .quote-hero-tools img{height:clamp(160px,50vw,220px)}
}