html { scroll-behavior: smooth; overflow-anchor: none; }
  body { font-feature-settings: "ss01"; }
  ::selection { background: #C3D0E8; color: #171F35; }

  .devlooper-logo svg { display:block; height: 1.5rem; width: auto; }
  /* Header logo matches the exact rendered height of the "Démarrer un projet" CTA,
     without changing the header's own fixed height (h-20). */
  #siteHeader .devlooper-logo svg { height: 41px; }

  /* subtle grain / paper texture */
  .grain::before{
    content:"";
    position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  }

  .reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
  .reveal.is-visible{ opacity:1; transform: translateY(0); }

  .mesh-glow{
    background: radial-gradient(60% 60% at 30% 20%, rgba(78,102,164,0.16) 0%, rgba(78,102,164,0) 60%),
                radial-gradient(50% 50% at 85% 15%, rgba(31,122,114,0.14) 0%, rgba(31,122,114,0) 60%);
  }

  .browser-chrome{ box-shadow: 0 1px 1px rgba(30,36,54,.04), 0 30px 60px -24px rgba(23,31,53,.35); }

  .infinity-divider{ height: 1px; background: linear-gradient(90deg, transparent, #D8D1BE, transparent); }

  input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
    outline: 2px solid #4E66A4; outline-offset: 2px;
  }

  .tab-btn[aria-selected="true"]{ color:#1E2436; }
  .tab-btn[aria-selected="true"] .tab-underline{ opacity:1; transform: scaleX(1); }
  .tab-underline{ opacity:0; transform: scaleX(.4); transition: all .25s ease; }

  .res-card{ transition: opacity .3s ease, transform .3s ease; }
  .res-hidden{ display:none; }

  /* Micro-illustrations animées du tiroir de prévisualisation du ruler de
     navigation (#rulerPreview) — une forme + animation propre à chaque
     section, cf. shared/ui-kit/icons.md § illustrations décoratives. */
  @keyframes rulerBreathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
  .ruler-illo-breathe { animation: rulerBreathe 2.4s ease-in-out infinite; transform-origin: center; }

  @keyframes rulerStep { 0%, 100% { transform: scaleY(.55); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } }
  .ruler-illo-step { transform-origin: bottom; animation: rulerStep 1.8s ease-in-out infinite; }

  @keyframes rulerBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  .ruler-illo-bob { animation: rulerBob 1.6s ease-in-out infinite; }

  @keyframes rulerTile { 0%, 100% { opacity: .3; transform: scale(.85); } 30% { opacity: 1; transform: scale(1); } }
  .ruler-illo-tile { animation: rulerTile 2.4s ease-in-out infinite; }

  @keyframes rulerLivebar { 0%, 100% { height: 35%; } 50% { height: 100%; } }
  .ruler-illo-livebar { animation: rulerLivebar 1.6s ease-in-out infinite; }
  @keyframes rulerLivedot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .35; } }
  .ruler-illo-livedot { animation: rulerLivedot 1.5s ease-in-out infinite; }

  @keyframes rulerPageFlip { 0%, 15% { transform: rotateY(0deg); } 45%, 65% { transform: rotateY(-140deg); } 90%, 100% { transform: rotateY(0deg); } }
  .ruler-illo-page { animation: rulerPageFlip 3s ease-in-out infinite; transform-style: preserve-3d; }

  @keyframes rulerDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
  .ruler-illo-dot { animation: rulerDot 1.2s ease-in-out infinite; }

  @keyframes rulerOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .ruler-illo-orbit-wrap { animation: rulerOrbit 6s linear infinite; }

  .faq-panel{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
  .faq-item.open .faq-panel{ max-height: 400px; }
  .faq-item.open .faq-icon{ transform: rotate(45deg); }
  .faq-icon{ transition: transform .25s ease; }

  /* Accordéon FAQ de la modale « étude de cas » (#caseModalBody) — classes
     dédiées (.case-faq-*), volontairement distinctes de .faq-* ci-dessus
     pour ne pas coupler son état à celui de la FAQ générale de la page. */
  .case-faq-panel{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
  .case-faq-item.open .case-faq-panel{ max-height: 400px; }
  .case-faq-item.open .case-faq-icon{ transform: rotate(45deg); }
  .case-faq-icon{ transition: transform .2s ease; }

  .step-panel{ display:none; }
  .step-panel.active{ display:block; }

  .track{ transition: transform .6s cubic-bezier(.2,.7,.2,1); }

  /* translateX(-50%) keeps the bar horizontally centered (it replaces the
     Tailwind -translate-x-1/2 utility, which this rule would otherwise override). */
  #stickyCta{ transform: translate(-50%, 140%); opacity:0; transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
  #stickyCta.show{ transform: translate(-50%, 0); opacity:1; }
  /* a brief, subtle pulse on just the CTA button to draw the eye once the bar has
     settled into place — re-triggered each time it reappears, never a distracting loop. */
  @keyframes ctaBtnAttract {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(110,138,224,0); }
    35% { transform: scale(1.07); box-shadow: 0 0 0 6px rgba(110,138,224,.35); }
    60% { transform: scale(1); box-shadow: 0 0 0 0 rgba(110,138,224,0); }
  }
  #stickyCtaBtn.attract{ animation: ctaBtnAttract 1s ease-in-out 1; }

  .copy-btn.copied::after{ content: "Copié ✓"; }

  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background: #F8F6F1; }
  ::-webkit-scrollbar-thumb{ background: #D8D1BE; border-radius: 8px; }
  #caseCarousel::-webkit-scrollbar{ display:none; }
  .case-card img{ transition: transform .4s ease; }
  .case-card:hover img{ transform: scale(1.04); }
  .line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.legal-article h2 { font-size: 1.15rem; margin: 1.75rem 0 .6rem; }
.legal-article p, .legal-article li { color: #5B6478; font-size: 15px; line-height: 1.65; }
.legal-article ul { margin: .4rem 0 1rem 1.1rem; list-style: disc; }
.legal-kicker { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #8890A0; }
.legal-intro { font-size: 1.05rem !important; color: #1E2436 !important; }