/* =========================================================
   SPENDORA — STYLES PARTAGÉS (index.html + devis.html)
   Variables de couleur, reset, typographie de base,
   boutons, eyebrow, barre de progression de scroll.
   Le style propre à chaque page reste dans son propre
   fichier HTML.
========================================================= */

:root{
  --bg:#ffffff;
  --bg-soft:#f6f7fc;
  --bg-soft-2:#eef0fa;
  --ink:#10122b;
  --ink-soft:#5a5e82;
  --ink-faint:#8a8db3;
  --line:#e7e8f4;
  --line-strong:#d7d9ef;
  --indigo:#4f46e5;
  --indigo-ink:#3730a3;
  --violet:#7c3aed;
  --blue-deep:#1e3a8a;
  --gradient: linear-gradient(135deg, #1e3a8a 0%, #4f46e5 48%, #7c3aed 100%);
  --gradient-soft: linear-gradient(135deg, rgba(30,58,138,.08) 0%, rgba(79,70,229,.10) 48%, rgba(124,58,237,.10) 100%);
  --shadow-sm: 0 1px 2px rgba(16,18,43,.06);
  --shadow-md: 0 8px 24px rgba(16,18,43,.08);
  --shadow-lg: 0 24px 60px -12px rgba(30,20,90,.22);
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

h1,h2,h3,h4{
  font-family:'Inter Tight','Inter',sans-serif;
  letter-spacing:-0.02em;
  color:var(--ink);
}

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--indigo-ink);
  background:var(--bg-soft-2);
  border:1px solid var(--line-strong);
  padding:6px 14px 6px 12px;
  border-radius:999px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--gradient);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:15px;
  padding:13px 24px;
  border-radius:11px;
  border:1px solid transparent;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, border-color .25s;
  white-space:nowrap;
  cursor:pointer;
}
.btn-primary{
  background:var(--gradient);
  color:#fff;
  box-shadow: 0 10px 24px -8px rgba(79,70,229,.55);
  position:relative;
  overflow:hidden;
}
.btn-primary::after{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
}
.btn-primary:hover::after{ left:120%; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 16px 32px -10px rgba(79,70,229,.6); }
.btn-secondary{
  background:#fff;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn-secondary:hover{ border-color:var(--indigo); color:var(--indigo-ink); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-ghost{
  background:transparent; color:var(--ink-soft); border-color:transparent;
  padding:13px 18px;
}
.btn-ghost:hover{ color:var(--ink); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:14px; }

.page-loader{
  position:fixed; inset:0; z-index:9999;
  background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  clip-path:ellipse(150% 150% at 50% 50%);
  transition:clip-path 1s cubic-bezier(.7,0,.3,1);
}
.page-loader.hide{
  clip-path:ellipse(0% 0% at 50% 50%);
  pointer-events:none;
}
.page-loader-logo{
  width:60px; height:auto;
  opacity:0;
  animation:loaderLogoIn 1s cubic-bezier(.34,1.4,.4,1) forwards;
}
.page-loader-tagline{
  font-family:'Inter Tight',sans-serif; font-weight:800; font-size:20px;
  letter-spacing:-.02em;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0;
  animation:loaderTextIn .7s ease forwards .3s;
}
@keyframes loaderLogoIn{
  0%{ opacity:0; transform:scale(.4) rotate(-45deg); }
  60%{ opacity:1; transform:scale(1.15) rotate(4deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
@keyframes loaderTextIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
body.has-loader{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){
  .page-loader{ display:none; }
}

/* ---------- CURSEUR PERSONNALISÉ (desktop uniquement) ---------- */
@media (hover:hover) and (pointer:fine){
  *{ cursor:none !important; }
  input[type="text"], input[type="email"], input[type="tel"], textarea{ cursor:text !important; }
}
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0;
  border-radius:50%;
  pointer-events:none;
  z-index:10000;
  opacity:0;
  display:none;
}
@media (hover:hover) and (pointer:fine){
  .cursor-dot, .cursor-ring{ display:block; }
}
.cursor-dot{
  width:8px; height:8px;
  margin:-4px 0 0 -4px;
  background:var(--indigo);
  transition:opacity .2s ease, background .2s ease;
}
.cursor-ring{
  width:36px; height:36px;
  margin:-18px 0 0 -18px;
  border:1.5px solid var(--indigo);
  --scale:1;
  transform:scale(var(--scale));
  transition:width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1), margin .25s cubic-bezier(.2,.8,.2,1), background .25s ease, opacity .2s ease, transform .15s ease;
}
.cursor-ring.hover{
  width:56px; height:56px;
  margin:-28px 0 0 -28px;
  background:rgba(79,70,229,.12);
}
body.has-loader .cursor-dot,
body.has-loader .cursor-ring{
  opacity:0 !important;
}
@media (prefers-reduced-motion: reduce){
  .cursor-dot, .cursor-ring{ display:none !important; }
  *{ cursor:auto !important; }
  a, button, [role="button"], input, select, textarea, label{ cursor:pointer !important; }
  input[type="text"], input[type="email"], input[type="tel"], textarea{ cursor:text !important; }
}

.skip-link{
  position:absolute; top:-100px; left:12px;
  background:var(--indigo); color:#fff;
  padding:10px 18px; border-radius:8px;
  font-size:14px; font-weight:600;
  z-index:1000;
  transition: top .2s ease;
}
.skip-link:focus{
  top:12px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.scroll-progress{
  position:fixed; top:0; left:0;
  width:100%; height:3px;
  background:var(--gradient);
  transform:scaleX(0);
  transform-origin:left;
  z-index:200;
  pointer-events:none;
}

@keyframes orbDriftA{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-26px,20px) scale(1.06); }
}
@keyframes orbDriftB{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(22px,-18px) scale(1.05); }
}

/* ---------- PAGES LÉGALES ---------- */
.legal-nav{
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:22px 25px;
  display:flex; align-items:center; justify-content:space-between;
}
.legal-back{
  color:var(--ink-soft); font-size:14px; font-weight:600;
  transition:color .2s ease;
}
.legal-back:hover{ color:var(--indigo); }

.legal-hero{
  padding:56px 20px 36px;
  text-align:center;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.legal-hero h1{
  margin-top:16px;
  font-size:clamp(28px,4vw,40px);
  letter-spacing:-.03em;
}
.legal-hero p{ color:var(--ink-soft); margin-top:10px; }
.legal-updated{ color:var(--ink-faint); font-size:12.5px; margin-top:16px; }

.legal-content{ max-width:740px; margin:0 auto; padding:50px 24px 90px; }
.legal-content h2{
  font-size:21px; letter-spacing:-.02em;
  margin-top:38px; margin-bottom:12px;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-size:15px; margin-top:22px; margin-bottom:8px; }
.legal-content p{ color:var(--ink-soft); line-height:1.7; margin-bottom:14px; font-size:14.5px; }
.legal-content ul{ margin:0 0 14px; padding-left:20px; }
.legal-content li{ color:var(--ink-soft); line-height:1.7; margin-bottom:6px; font-size:14.5px; list-style:disc; }
.legal-content a{ color:var(--indigo); text-decoration:underline; }
.legal-content strong{ color:var(--ink); }

@media (max-width:640px){
  .legal-nav{ padding:20px; }
}