/* ═══════════════════════════════════════════
   AI Song Checker — Stylesheet v7.0
   Design: Luxury Minimal / Editorial Tech
   Fonts: Instrument Serif (display) + DM Sans (body) + JetBrains Mono (mono)
   ═══════════════════════════════════════════ */

/* Self-hosted fonts (v7.1) — woff2 only, latin + latin-ext subsets.
   DM Sans est une variable font (400 et 600 partagent le même fichier).
   font-display:optional : police préchargée -> rendu sans reflow (anti-CLS); fallback si non prête sous ~100ms. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/instrument-serif-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/instrument-serif-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/dm-sans-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/dm-sans-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:optional;src:url('/fonts/dm-sans-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:optional;src:url('/fonts/dm-sans-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/jetbrains-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/jetbrains-mono-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ── Design Tokens ── */
:root {
  --c-bg: #060609;
  --c-surface: rgba(12,12,18,0.7);
  --c-surface-solid: #0c0c12;
  --c-surface-2: #111118;
  --c-border: rgba(255,255,255,0.055);
  --c-border-hover: rgba(255,255,255,0.1);
  --c-text: #b0b0c0;
  --c-text-muted: #6a6a7e;
  --c-heading: #eeeef2;
  --c-accent: #f0a050;
  --c-accent-2: #d870a0;
  --c-accent-glow: rgba(240,160,80,0.06);
  --c-green: #5ee8a0;
  --c-red: #f07070;
  --c-yellow: #f0c060;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
}

.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--c-accent);color:#0e0e12;padding:.75rem 1.5rem;border-radius:0 0 var(--radius-sm) var(--radius-sm);font-weight:600;font-size:.9rem;z-index:10000;text-decoration:none;transition:top .2s}
.skip-link:focus{top:0}

/* ── Screen-reader only (accessibility) ── */

/* ── Anti-FOUC ── */

body.premium-loading #footerAccountCol{visibility:hidden !important}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--c-bg);color:var(--c-text);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* Atmospheric background */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 65% 45% at 30% 0%,rgba(240,160,80,0.025) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 75% 10%,rgba(216,112,160,0.018) 0%,transparent 60%);
}

/* Grain texture */
body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0.015;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
code{font-family:var(--font-mono)}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.07);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.12)}
::selection{background:rgba(240,160,80,.18)}

/* --- Section --- */

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.5rem;border-radius:10px;font-size:.88rem;font-weight:600;border:none;transition:all .25s ease}

/* --- Badge --- */

/* ═══ HEADER ═══ */
.header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,6,9,.85);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border-bottom:1px solid var(--c-border)}
.header__inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:60px}
.header__logo{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1rem;color:var(--c-heading);letter-spacing:-.02em}
.header__logo-mark{width:32px;height:32px;flex-shrink:0}
.header__nav{display:flex;align-items:center;gap:2rem}
.header__nav a{font-size:.84rem;color:var(--c-text-muted);font-weight:500;transition:color .25s}
.header__nav a:hover{color:var(--c-heading)}
.header__pro-link{color:var(--c-accent) !important;font-weight:700 !important}

/* Language switcher */
.lang-switch{background:none;border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:.25rem .5rem;font-size:1rem;cursor:pointer;transition:all .25s;margin-left:.5rem;line-height:1}
.lang-switch:hover{border-color:var(--c-accent)}

@media(max-width:768px){
  .header__nav{display:none}
  .header__inner{padding:0 1rem}
}

/* ═══ AUTH MODAL ═══ */
@keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Cookie consent banner */

/* ═══ HERO ═══ */

/* ═══ CHECKER TRUST STRIP ═══ */

/* ═══ CHECKER ═══ */
.checker{padding:0 1.5rem 5rem}
@keyframes badgePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}

/* ── URL input ── */

/* ── URL preview ── */
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ ANALYZING ═══ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes progressShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ═══ RESULT ═══ */
.result{background:linear-gradient(180deg,rgba(18,18,26,.85),rgba(12,12,18,.9));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--c-border);border-radius:var(--radius-xl);max-width:640px;width:100%;margin:0 auto;position:relative;animation:slideUp .35s cubic-bezier(.16,1,.3,1);box-shadow:0 24px 80px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.02) inset}

/* ═══ HOW IT WORKS ═══ */
.how{padding:5rem 1.5rem}

/* ═══ TECHNOLOGY ═══ */
.technology{padding:5rem 1.5rem;background:rgba(12,12,18,.4)}

/* ═══ HISTORY ═══ */
.history{padding:0 1.5rem 5rem}

/* ═══ FAQ ═══ */
.faq{padding:0 1.5rem 5rem}

/* ═══ FOOTER ═══ */
.footer{border-top:1px solid var(--c-border);padding:3rem 1.5rem 0}
.footer__inner{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;gap:3rem;padding-bottom:2rem}
.footer__logo{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;color:var(--c-text);margin-bottom:.5rem}
.footer__left p{font-size:.82rem;color:var(--c-text-muted);line-height:1.6}
.footer__right{display:flex;gap:4rem}
.footer__col h3{font-family:var(--font-mono);font-size:.68rem;font-weight:500;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem}
.footer__col a{display:block;font-size:.84rem;color:var(--c-text-muted);padding:.2rem 0;transition:color .25s}
.footer__col a:hover{color:var(--c-text)}
.footer__bottom{max-width:1120px;margin:0 auto;border-top:1px solid var(--c-border);padding:1rem 0}
.footer__bottom p{font-size:.75rem;color:var(--c-text-muted)}
@media(max-width:768px){.footer__inner{flex-direction:column;gap:2rem}.footer__right{gap:2rem}}

/* ── Feedback Section ── */

/* ═══ PREMIUM ═══ */

/* Quota counter */

/* ═══ PRICING ═══ */
.pricing{padding:5rem 1.5rem}

/* ═══ ADS ═══ */

/* ═══ UPGRADE MODAL ═══ */

/* Limit modal */

/* Premium success modal */

/* ─── Payment Modal (Stripe Elements) ─── */

/* ═══ PREMIUM REPORT ═══ */
@keyframes scoreArc{from{stroke-dasharray:0 264}}

/* ═══ FREE TEASER ═══ */

/* ═══ PRIORITY ANIMATIONS (Premium) ═══ */
@keyframes priorityPulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes boltFlash{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.15)}}
@keyframes priorityBar{0%{background-position:0% 0%}100%{background-position:200% 0%}}

/* ═══ UNSUBSCRIBE PAGE ═══ */

/* Responsive pricing */

/* ── Accessibility: respect reduced-motion preference ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
}

/* ═══ ACCESSIBILITY: Focus visible ═══ */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.header__nav a:focus-visible,.footer__links a:focus-visible,.footer__col a:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:4px}
.header__logo:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px;border-radius:var(--radius-sm)}
.lang-switch:focus-visible{border-color:var(--c-accent);outline:2px solid var(--c-accent);outline-offset:2px}

/* Floating labels for auth form */

/* ═══ UTILITY ═══ */
.u-none{display:none}
.blog-logo-gradient{font-family:var(--font-display);font-size:1.6rem;font-weight:400;background:linear-gradient(135deg,var(--c-accent) 0%,var(--c-accent-2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.blog-cta-layout{max-width:calc(1120px - 3rem);margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem}

/* ═══ BREADCRUMB ═══ */

/* ═══ DETECTION DETAILS (SEO) ═══ */

/* ═══ PRINT ═══ */
@media print{.header,.footer,.lang-switch,.skip-link,.btn{display:none!important}body{background:#fff;color:#000}main{padding:0}}

/* ═══ RELATED ARTICLES ═══ */
.related-articles{margin:3rem auto;max-width:800px;padding:2rem;background:var(--c-surface-2);border-radius:16px;border:1px solid var(--c-border)}
.related-articles h2{font-family:var(--font-display);font-size:1.3rem;color:var(--c-heading);margin-bottom:1rem;font-weight:400}
.related-articles ul{list-style:none;padding:0;margin:0}
.related-articles li{margin-bottom:.75rem}
.related-articles a{color:var(--c-accent);text-decoration:none;font-size:.95rem;transition:color .25s}
.related-articles a:hover{color:var(--c-accent-2);text-decoration:underline}

/* ═══ YOUTUBE FALLBACK MODAL ═══ */

/* ═══ SEO PAGES — Product Detectors + Blog Articles (added 2026-05-22) ═══ */

/* Product hero & layout — match homepage hero feel */
.product-hero{padding:2rem 1.5rem 2rem;text-align:center;max-width:900px;margin:0 auto}
.product-hero__badge{display:inline-block;padding:.3rem .8rem;background:rgba(249,115,22,.1);color:var(--c-accent);border:1px solid rgba(249,115,22,.25);border-radius:50px;font-size:.78rem;font-weight:600;margin-bottom:1rem}
.product-hero h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:400;color:var(--c-heading);line-height:1.1;margin-bottom:1rem}
.product-hero .tagline{font-size:1.05rem;color:var(--c-text-muted);line-height:1.55;margin-bottom:2rem;max-width:680px;margin-left:auto;margin-right:auto}
.product-cta{display:inline-block;padding:.85rem 1.8rem;background:linear-gradient(135deg,var(--c-accent),var(--c-pink));color:#fff !important;border-radius:50px;font-weight:600;text-decoration:none !important;margin:.4rem .25rem;transition:transform .15s,box-shadow .15s}
.product-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(249,115,22,.25)}
.product-cta--ghost{background:transparent;color:var(--c-heading) !important;border:1px solid var(--c-border)}
.product-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:2.5rem auto;max-width:900px;padding:0 1.5rem}
.product-stat{background:var(--c-surface);backdrop-filter:blur(12px);border:1px solid var(--c-border);border-radius:14px;padding:1.25rem;text-align:center}
.product-stat__value{font-family:var(--font-display);font-size:2rem;color:var(--c-heading);display:block;margin-bottom:.25rem}
.product-stat__label{font-size:.82rem;color:var(--c-text-muted)}
.product-section{max-width:820px;margin:3rem auto;padding:0 1.5rem}
.product-section h2{font-family:var(--font-display);font-size:1.85rem;font-weight:400;color:var(--c-heading);margin-bottom:1rem;margin-top:2.5rem;line-height:1.2}
.product-section h3{font-size:1.2rem;font-weight:600;color:var(--c-heading);margin:1.5rem 0 .5rem}
.product-section p,.product-section li{color:var(--c-text-muted);line-height:1.7;font-size:.97rem}
.product-section ul,.product-section ol{padding-left:1.25rem;margin-bottom:1rem}
.product-section li{margin-bottom:.5rem}
.product-section strong{color:var(--c-heading)}
.product-section a{color:var(--c-accent);text-decoration:none}
.product-section a:hover{text-decoration:underline}
.product-faq{max-width:820px;margin:3rem auto;padding:0 1.5rem}
.product-faq__title{font-family:var(--font-display);font-size:1.85rem;font-weight:400;color:var(--c-heading);margin-bottom:1.5rem;text-align:center}
.product-faq details{background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;padding:1.1rem 1.25rem;margin-bottom:.6rem}
.product-faq summary{cursor:pointer;font-weight:600;color:var(--c-heading);font-size:.95rem;list-style:none}
.product-faq summary::-webkit-details-marker{display:none}
.product-faq summary::after{content:'+';float:right;font-size:1.4rem;color:var(--c-text-muted)}
.product-faq details[open] summary::after{content:'−'}
.product-faq p{margin-top:.75rem;color:var(--c-text-muted);line-height:1.65;font-size:.92rem}
.product-breadcrumb{max-width:1100px;margin:0 auto;padding:5rem 1.5rem 0 1.5rem;font-size:.82rem;color:var(--c-text-muted)}
.product-breadcrumb a{color:var(--c-accent);text-decoration:none}
.product-other{max-width:820px;margin:3rem auto;padding:1.5rem;background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;text-align:center}
.product-other h3{font-family:var(--font-display);font-size:1.5rem;font-weight:400;color:var(--c-heading);margin-bottom:.75rem}
.product-other p{color:var(--c-text-muted);margin-bottom:.75rem;font-size:.95rem}
.product-other__links{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1rem}
.product-other__links a{padding:.5rem 1rem;background:rgba(255,255,255,.04);border:1px solid var(--c-border);border-radius:50px;color:var(--c-heading);text-decoration:none;font-size:.85rem;transition:all .15s}
.product-other__links a:hover{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.3);color:var(--c-accent)}

/* Blog article layout — keep main site header/footer */
.blog-article{max-width:780px;margin:0 auto;padding:6rem 1.5rem 2rem}
.blog-article h1{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3rem);font-weight:400;color:var(--c-heading);line-height:1.15;margin-bottom:1rem}
.blog-article h2{font-size:1.65rem;margin-top:2.5rem;margin-bottom:1rem;color:var(--c-heading);border-left:4px solid var(--c-accent);padding-left:14px;font-weight:600;line-height:1.25}
.blog-article h3{font-size:1.2rem;margin-top:2rem;margin-bottom:.75rem;color:var(--c-heading);font-weight:600}
.blog-article p{line-height:1.8;margin-bottom:1.15rem;font-size:1.02rem;color:var(--c-text-muted)}
.blog-article ul,.blog-article ol{margin-left:1.25rem;margin-bottom:1.2rem;line-height:1.75;color:var(--c-text-muted)}
.blog-article li{margin-bottom:.5rem;color:var(--c-text-muted)}
.blog-article a{color:var(--c-accent);text-decoration:underline;text-decoration-color:rgba(249,115,22,.3);text-underline-offset:3px}
.blog-article a:hover{text-decoration-color:var(--c-accent)}
.blog-article strong{color:var(--c-heading)}
.blog-meta{color:var(--c-text-muted);font-size:.88rem;margin-bottom:2rem;opacity:.75}
.blog-cta{background:linear-gradient(135deg,var(--c-accent),var(--c-pink));padding:1.75rem;border-radius:14px;margin:2.5rem 0;text-align:center;box-shadow:0 8px 32px rgba(249,115,22,.15)}
.blog-cta a{color:#fff !important;text-decoration:none !important;font-weight:600;font-size:1rem}
.blog-article code{background:rgba(249,115,22,.1);color:var(--c-accent);padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-size:.88em}
.blog-article table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.92rem;background:var(--c-surface);border-radius:8px;overflow:hidden}
.blog-article th{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--c-border);color:var(--c-text-muted)}
.blog-article th{background:rgba(255,255,255,.03);color:var(--c-heading);font-weight:600}
.pro{color:#4ade80}
.verdict{background:rgba(249,115,22,.08);border-left:3px solid var(--c-accent);padding:1rem 1.25rem;border-radius:6px;margin:1.5rem 0}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}
.vs > div{background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;padding:1.1rem}

@media(max-width:600px){
  .blog-article h1{font-size:1.85rem}
  .blog-article h2{font-size:1.35rem}
  .vs{grid-template-columns:1fr}
  .product-stats{grid-template-columns:repeat(2,1fr)}
}


/* ===== REDESIGN v9 (light SaaS) appended 20260603-112604 ===== */
/* ═══════════════════════════════════════════════════════════════
   AI Song Checker — Redesign Layer v9.0  ·  LIGHT SaaS
   (ui-ux-pro-max — "Micro SaaS" palette)

   Full light-mode reskin layered on style.css v7. Reuses every
   existing class name & CSS variable — no markup / JS changes.
   Direction: clean white SaaS landing (Linear / Stripe register):
   indigo→violet brand, slate text, soft shadows, airy surfaces.
   Load AFTER style.css so these rules win the cascade.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens: light SaaS ────────────────────────────────────────── */
:root {
  --c-bg: #ffffff;
  --c-surface: #ffffff;            /* cards = solid white + border + shadow */
  --c-surface-solid: #ffffff;
  --c-surface-2: #f8fafc;          /* slate-50 */
  --c-section: #f8fafc;            /* alternating section bg */
  --c-section-tint: #f5f3ff;       /* indigo-50 wash */

  --c-border: #e7e9f0;             /* slate-200-ish */
  --c-border-hover: #cdd2e0;

  --c-heading: #0f172a;            /* slate-900 */
  --c-text: #334155;               /* slate-700  ≈10:1 */
  --c-text-muted: #64748b;         /* slate-500  ≈4.6:1 (AA) */

  --c-accent: #6366f1;             /* indigo-500 — brand */
  --c-accent-2: #8b5cf6;           /* violet-500 */
  --c-accent-3: #4f46e5;           /* indigo-600 hover */
  --c-pink: #8b5cf6;               /* legacy "pink" token → violet (SEO CTAs) */
  --c-accent-soft: #eef0fe;        /* indigo wash for chips */
  --c-accent-glow: rgba(99,102,241,0.12);

  --c-green: #059669;
  --c-red: #dc2626;
  --c-yellow: #d97706;

  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-std: cubic-bezier(0.4,0,0.2,1);
  --dur-fast: 150ms;
  --dur-mid: 240ms;

  /* soft elevation scale for light surfaces */
  --sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --sh-md: 0 2px 4px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --sh-lg: 0 4px 8px rgba(15,23,42,.05), 0 24px 48px rgba(15,23,42,.10);
  --ring: 0 0 0 3px rgba(99,102,241,0.35);
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px;
}

/* ── Base canvas: white, no grain, soft indigo mesh ───────────── */
body { background: var(--c-bg); color: var(--c-text); }
body::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% -8%, rgba(99,102,241,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 4%, rgba(139,92,246,0.07) 0%, transparent 55%);
}
body::after { opacity: 0 !important; }   /* kill dark-mode grain */
::selection { background: rgba(99,102,241,0.16); }
::-webkit-scrollbar-thumb { background: #d4d8e2; }
::-webkit-scrollbar-thumb:hover { background: #b9bfd0; }

/* ── Focus-visible (a11y) ──────────────────────────────────────── */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, summary:focus-visible {
  outline: 2px solid #4f46e5; outline-offset: 2px; box-shadow: var(--ring); border-radius: var(--radius-sm);
}

/* ── Section labels / titles ──────────────────────────────────── */

/* ── Buttons: solid indigo primary, clean ─────────────────────── */
.btn { transition: transform var(--dur-fast) var(--ease-out),
                   box-shadow var(--dur-mid) var(--ease-out),
                   background var(--dur-mid) var(--ease-std),
                   border-color var(--dur-mid) var(--ease-std); }

/* ── Badges ────────────────────────────────────────────────────── */

/* ── Header: white, hairline border, animated active link ─────── */
.header { background: rgba(255,255,255,0.85);
  border-bottom: 1px solid var(--c-border);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); }
.header__logo { color: var(--c-heading); }
.header__nav a { color: var(--c-text-muted); position: relative;
  transition: color var(--dur-mid) var(--ease-std); }
.header__nav a:hover { color: var(--c-heading); }
.header__nav a::after { content:''; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2)); border-radius:2px;
  transition: right var(--dur-mid) var(--ease-out); }
.header__nav a:hover::after { right:0; }
.header__pro-link { color: var(--c-accent) !important; }
.lang-switch { background:#fff; border:1px solid var(--c-border); }
.lang-switch:hover { border-color: var(--c-accent); }

/* ── Hero: light, indigo grid + glow ──────────────────────────── */

/* ── Checker card: clean white panel ──────────────────────────── */

/* dropzone */

/* url input */

/* ── Analyzing card ───────────────────────────────────────────── */

/* ── Result panel ─────────────────────────────────────────────── */
.result { background:#fff; border:1px solid var(--c-border); box-shadow: var(--sh-lg);
  backdrop-filter:none; -webkit-backdrop-filter:none; }

/* ── How it works (separated bordered cards — no ghost cell) ──── */                 /* 3 steps → one clean row */
/* if a 3-card grid ever lands in the 2-col state, center the orphan */

/* ── Technology ───────────────────────────────────────────────── */
.technology { background: var(--c-section); }

/* ── History table ────────────────────────────────────────────── */

/* ── FAQ ──────────────────────────────────────────────────────── */

/* ── Footer ───────────────────────────────────────────────────── */
.footer { border-top:1px solid var(--c-border); background: var(--c-section); }
.footer__logo { color: var(--c-heading); }
.footer__left p, .footer__col a, .footer__col h3, .footer__bottom p { color: var(--c-text-muted); }
.footer__col a:hover { color: var(--c-accent); }
.footer__bottom { border-top:1px solid var(--c-border); }

/* ── Feedback ─────────────────────────────────────────────────── */

/* ── Premium / quota ──────────────────────────────────────────── */

/* ── Pricing ──────────────────────────────────────────────────── */
/* check bullets: indigo on premium, green elsewhere */

/* ── Auth modal: white card, dark scrim ───────────────────────── */

/* ── Cookie banner ────────────────────────────────────────────── */

/* ── De-orange: align all brand marks to indigo/violet ────────── */
/* Logo gradient stops (header + footer inline SVGs) */
.header__logo-mark stop:first-child,
.footer__logo stop:first-child { stop-color: #6366f1; }
.header__logo-mark stop:last-child,
.footer__logo stop:last-child  { stop-color: #8b5cf6; }
/* give the mark a softer square so it reads less "generic AI app icon" */
.header__logo-mark rect, .footer__logo rect { rx: 9; }

/* Pricing "Pro" bolt icon (inline stroke was orange) */

/* Footer "Made by" credit link (inline orange styles → force indigo) */

/* Language dropdown (JS-built, was dark + orange active) → light + indigo */
#langDropdown { background:#fff !important; border:1px solid var(--c-border) !important;
  box-shadow: var(--sh-lg) !important; }
#langDropdown a[role="option"] { color: var(--c-text) !important; }
#langDropdown a[role="option"]:hover { background:#f8fafc !important; }
#langDropdown a[role="option"][aria-selected="true"] {
  background: var(--c-accent-soft) !important; color: var(--c-accent) !important; }

/* Safety net: any leftover orange-accent borders flip to indigo */
.lang-switch:focus-visible { border-color: var(--c-accent) !important; outline-color: var(--c-accent) !important; }

/* Footer: clean white (kill the grey slab) with a hairline top rule */
.footer { background:#ffffff; }

/* ── Hero: drop the "100% Free…" badge (reads too AI) ─────────── */

/* ── Pricing: bottom-align CTAs across cards of unequal length ── */

/* ── SEO pages (product detectors + blog articles) ────────────── */
/* Most of the SEO block in style.css uses tokens → already light.
   These fix the hardcoded orange tints, dark code blocks & green/red. */
.product-hero__badge { background: var(--c-accent-soft) !important; border-color:#dcdffb !important; }
.product-cta:hover { box-shadow: 0 8px 24px rgba(99,102,241,.25); }
.product-other__links a { background:#fff; }
.product-other__links a:hover { background: var(--c-accent-soft); border-color:#dcdffb; }
.blog-cta { box-shadow: 0 8px 32px rgba(99,102,241,.18); }
.blog-article a { text-decoration-color: rgba(99,102,241,.35); }
.blog-article a:hover { text-decoration-color: var(--c-accent); }
.blog-article code { background: var(--c-accent-soft); }  /* dark code block on light page (Stripe-style) */
.blog-article th { background:#f8fafc; }
.pro { color: var(--c-green); }
.verdict  { background: var(--c-accent-soft); }

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ═══ CLS HARDENING (2026-06-22) — reserve space for async-injected content ═══ */
/* History: empty-state -> table swap (logged-in users) no longer collapses/jumps */
/* Quota counter appears post-auth for free users: reserve its row height */
/* Auth nav buttons -> user menu swap happens in the FIXED header; lock its box so it can't reflow siblings */
/* Pricing action area: button text/badge updates by premium.js must not grow the card */

/* ═══ AUDIT UX/SEO 2026-07-07 — contrastes, table responsive, nav mobile ═══ */
/* Contraste texte : accent #6366f1=4.47:1 -> #4f46e5=6.3:1 ; vert 3.77:1 -> #047857 ; jaune 3.19:1 -> #b45309 */
:root{--c-accent-text:#4f46e5;--c-green-text:#047857;--c-yellow-text:#b45309}
.blog-article a,.product-section a,.related-articles a{color:var(--c-accent-text)}
.header__pro-link{color:var(--c-accent-text)!important}

/* Table historique scrollable sur mobile (5 colonnes) */

/* ── Navigation mobile (hamburger pur CSS, aucune dépendance JS) ── */
.nav-toggle{display:none}
.nav-toggle-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-ic-close{display:none}
.nav-toggle-cb:checked ~ .nav-toggle .nav-ic-open{display:none}
.nav-toggle-cb:checked ~ .nav-toggle .nav-ic-close{display:inline}
.nav-toggle-cb:focus-visible ~ .nav-toggle{outline:2px solid #4f46e5;outline-offset:2px}
@media(max-width:768px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--c-border);border-radius:10px;background:none;cursor:pointer;font-size:1.05rem;line-height:1;color:inherit;user-select:none;-webkit-user-select:none}
  .nav-toggle-cb:checked ~ .header__nav{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:60px;left:0;right:0;background:rgba(255,255,255,.98);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--c-border);padding:.85rem 1.5rem 1.1rem;gap:.95rem;box-shadow:0 24px 48px rgba(15,23,42,.10);z-index:99}
  /* Header compact : cacher le texte du logo, resserrer authNav */
  .header__logo>span{display:none}
}

/* Lien crédit footer (remplace les handlers inline onmouseover/onmouseout) */

/* ═══ AUDIT vague 2 (2026-07-07) ═══ */
@media(min-width:769px){.nav-toggle-cb{display:none}}
.skip-link{background:#4f46e5;color:#fff}
/* Blog index light (remplace le bloc inline dark) */
.blog-hero{padding:7.5rem 1.5rem 3rem;text-align:center}
.blog-hero h1{font-family:var(--font-display);font-weight:400;font-size:2.6rem;color:var(--c-heading);letter-spacing:-.02em;margin-bottom:.5rem}
.blog-hero p{color:var(--c-text-muted);max-width:520px;margin:0 auto}
.blog-grid{max-width:1120px;margin:0 auto;padding:0 1.5rem 4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.blog-card{background:#fff;border:1px solid var(--c-border);border-radius:16px;padding:1.5rem;display:block;transition:border-color .2s,transform .2s,box-shadow .2s}
.blog-card:hover{border-color:var(--c-accent);transform:translateY(-2px);box-shadow:var(--sh-md,0 8px 24px rgba(15,23,42,.06))}
.blog-card__date{font-size:.72rem;color:var(--c-text-muted);font-weight:500;margin-bottom:.5rem}
.blog-card__title{font-size:1rem;font-weight:600;color:var(--c-heading);margin-bottom:.5rem;line-height:1.35}
.blog-card__excerpt{font-size:.82rem;color:var(--c-text-muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-cta-banner{max-width:1120px;margin:0 auto 4rem;padding:2.5rem;background:var(--c-accent-soft,#eef0fe);border:1px solid #dcdffb;border-radius:18px;text-align:center}
.blog-cta-banner h2{font-size:1.3rem;color:var(--c-heading);margin-bottom:.5rem}
.blog-cta-banner p{color:var(--c-text-muted);font-size:.88rem;margin-bottom:1rem}
.blog-cta-banner .btn{display:inline-flex;align-items:center;padding:.7rem 1.5rem;border-radius:10px;font-size:.88rem;font-weight:600;background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2));color:#fff;box-shadow:0 2px 16px rgba(99,102,241,.25);transition:transform .2s}
.blog-cta-banner .btn:hover{transform:translateY(-1px)}
.footer__links{display:flex;gap:1.5rem}
.footer__links a{font-size:.82rem;color:var(--c-text-muted)}
.footer__links a:hover{color:var(--c-heading)}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}.blog-hero h1{font-size:2rem}}
/* Section 'More guides' : affordance de lien */
#asc-more-guides ul{list-style:none;padding:0}
#asc-more-guides li{margin:.45rem 0}
#asc-more-guides a{color:var(--c-accent-text,#4f46e5);text-decoration:underline;text-underline-offset:3px}
/* Blocs de code des posts techniques (absents du purge) */
.blog-article pre{background:#0f172a;color:#e2e8f0;border-radius:12px;padding:1rem 1.2rem;overflow-x:auto;font-size:.85rem;line-height:1.6;margin:1.2rem 0}
.blog-article code{font-family:var(--font-mono,monospace)}
.blog-article :not(pre)>code{background:var(--c-accent-soft,#eef0fe);color:#4f46e5;padding:.1em .35em;border-radius:6px;font-size:.9em}

/* ═══ RTL (pages /ar/) — audit 2026-07-07 ═══ */
[dir="rtl"]{direction:rtl}
[dir="rtl"] .product-section ul,[dir="rtl"] .product-section ol{padding-left:0;padding-right:1.25rem}
[dir="rtl"] .blog-article h2{border-left:none;padding-left:0;border-right:4px solid var(--c-accent);padding-right:14px}
[dir="rtl"] .blog-article ul,[dir="rtl"] .blog-article ol{margin-left:0;margin-right:1.25rem}
[dir="rtl"] .blog-article th{text-align:right}
[dir="rtl"] .verdict{border-left:none;border-right:3px solid var(--c-accent)}
[dir="rtl"] .lang-switch{margin-left:0;margin-right:.5rem}
[dir="rtl"] .product-breadcrumb{direction:rtl}