/* ==========================================================================
   Pages intérieures : étude de cas, pages légales, 404
   (les tokens et composants partagés sont dans site.css)
   ========================================================================== */

/* ---------- En-tête de page ---------- */
.page-hero{
  position:relative; z-index:var(--z-content);
  margin-top:calc(var(--header-h) * -1);
  padding:calc(var(--header-h) + clamp(48px, 7vw, 112px)) 0 clamp(40px, 5vw, 72px);
}
.page-hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 70% at 85% 10%, rgba(139,92,246,.2), transparent 70%),
    radial-gradient(40% 50% at 5% 0%, rgba(79,70,229,.16), transparent 70%);
}
.page-hero h1{
  font-size:var(--fs-5xl); line-height:1.04; letter-spacing:var(--track-tight);
  max-width:18ch; margin-top:var(--s-5);
}
.page-hero .lead{ margin-top:var(--s-5); max-width:56ch; }

.breadcrumb{ display:flex; flex-wrap:wrap; gap:var(--s-2); font-size:var(--fs-sm); color:var(--text-subtle); }
.breadcrumb a{ color:var(--text-muted); }
.breadcrumb a:hover{ color:var(--accent-cyan); }
.breadcrumb li + li::before{ content:'/'; margin-right:var(--s-2); opacity:.6; }

/* ==========================================================================
   Pages légales
   ========================================================================== */
.prose{ max-width:72ch; padding-bottom:var(--section); }
.prose .intro{ font-size:var(--fs-lg); color:var(--text-muted); margin-bottom:var(--s-10); }
.prose section{ padding:var(--s-8) 0; border-top:1px solid var(--line); }
.prose h2{ display:flex; gap:var(--s-3); font-size:var(--fs-2xl); margin-bottom:var(--s-4); }
.prose h2 .num{ color:var(--accent-cyan); font-variant-numeric:tabular-nums; }
.prose p, .prose li{ color:var(--text-muted); }
.prose p + p, .prose p + ul, .prose ul + p{ margin-top:var(--s-3); }
.prose ul{ display:grid; gap:var(--s-2); padding-left:var(--s-5); list-style:disc; }
.prose li::marker{ color:var(--accent-cyan); }
.prose strong{ color:var(--text); font-weight:600; }
.prose a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--accent-cyan); text-underline-offset:3px; }
.prose a:hover{ color:var(--accent-cyan); }
.callout{
  margin-top:var(--s-8); padding:var(--s-6); border-radius:var(--r-lg);
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text-muted);
}
.callout strong{ display:block; margin-bottom:var(--s-2); color:var(--text); }

/* ==========================================================================
   Étude de cas
   ========================================================================== */
.cs-facts{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s-6);
  margin-top:var(--s-12); padding-top:var(--s-8); border-top:1px solid var(--line-strong);
}
.cs-facts dt{ font-size:var(--fs-xs); font-weight:600; letter-spacing:var(--track-caps); text-transform:uppercase; color:var(--text-subtle); }
.cs-facts dd{ margin-top:var(--s-2); color:var(--text); }
.cs-facts a{ color:var(--accent-cyan); }

/* Vitrine : grand navigateur + téléphone */
.cs-showcase{ position:relative; padding:0 8% 7% 0; }
.cs-showcase::before{
  content:''; position:absolute; inset:10% 10% 0; z-index:-1;
  background:radial-gradient(closest-side, rgba(139,92,246,.28), rgba(139,92,246,.1) 50%, transparent);
}
.cs-showcase .browser{ box-shadow:var(--e-4); }
.cs-showcase .browser-view{ aspect-ratio:16 / 9; }
.cs-phone{
  position:absolute; right:0; bottom:0; width:21%;
  padding:6px; border-radius:26px;
  background:linear-gradient(160deg, #2c2949, #0f0d1f 70%);
  box-shadow:inset 0 0 0 1px rgba(226,224,255,.16), -20px 40px 80px -20px rgba(0,0,0,.95);
}
.cs-phone .browser-view{ aspect-ratio:9 / 19; border-radius:20px; background:#fff; }
@media (prefers-reduced-motion:no-preference){
  /* Les deux captures défilent lentement, en aller-retour */
  .cs-showcase .browser-view img{ animation:shot-scroll 22s var(--ease-in-out) 1.5s infinite alternate; }
}

/* Paragraphes de l'étude */
.cs-text{ max-width:62ch; }
.cs-text h2{ font-size:var(--fs-4xl); line-height:1.08; letter-spacing:var(--track-tight); margin:var(--s-4) 0 var(--s-5); }
.cs-text p{ color:var(--text-muted); font-size:var(--fs-lg); }
.cs-text p + p{ margin-top:var(--s-4); }

/* Les idées du site : image et texte en alternance */
.cs-ideas{ display:grid; gap:clamp(56px, 8vw, 112px); margin-top:clamp(48px, 6vw, 80px); }
.cs-idea{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(28px, 5vw, 72px); align-items:center; }
.cs-idea:nth-child(even){ grid-template-columns:.8fr 1.2fr; }
.cs-idea:nth-child(even) .cs-idea-img{ order:2; }
.cs-idea-img{
  overflow:hidden; border-radius:var(--r-lg); background:#fff;
  border:1px solid var(--line-strong); box-shadow:var(--e-3);
}
.cs-idea-img img{ display:block; width:100%; height:auto; }
.cs-idea-num{ font-family:var(--font-display); font-weight:600; color:var(--accent-cyan); font-size:var(--fs-sm); letter-spacing:.1em; }
.cs-idea h3{ font-size:var(--fs-3xl); margin:var(--s-3) 0 var(--s-4); }
.cs-idea p{ color:var(--text-muted); }

/* Transparence */
.cs-honest{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-6); align-items:start;
  padding:clamp(24px, 4vw, 48px); border-radius:var(--r-xl);
  background:var(--surface-2); border:1px solid var(--line-strong);
}
.cs-honest-icon{
  display:grid; place-items:center; width:52px; height:52px; border-radius:var(--r-md);
  background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.35); color:var(--accent-cyan);
}
.cs-honest-icon svg{ width:24px; height:24px; }
.cs-honest h2{ font-size:var(--fs-2xl); margin-bottom:var(--s-3); }
.cs-honest p{ color:var(--text-muted); max-width:66ch; }
.cs-honest p + p{ margin-top:var(--s-3); }

/* Bandeau d'appel à l'action de fin de page */
.cta-band{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-6);
  padding:clamp(28px, 5vw, 64px); border-radius:var(--r-xl); isolation:isolate;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(79,70,229,.3), transparent 70%),
    radial-gradient(50% 100% at 100% 100%, rgba(34,211,238,.16), transparent 70%),
    var(--surface-1);
}
.cta-band::before{
  content:''; position:absolute; inset:0; z-index:-1; padding:1px; border-radius:inherit;
  background:linear-gradient(120deg, rgba(79,70,229,.8), rgba(139,92,246,.4) 52%, rgba(34,211,238,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.cta-band h2{ font-size:var(--fs-4xl); line-height:1.08; letter-spacing:var(--track-tight); max-width:20ch; }
.cta-band p{ margin-top:var(--s-3); color:var(--text-muted); }
.cta-band-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); }

/* ==========================================================================
   404
   ========================================================================== */
.notfound{
  position:relative; z-index:var(--z-content);
  min-height:calc(100svh - var(--header-h)); margin-top:calc(var(--header-h) * -1);
  display:grid; place-items:center; text-align:center;
  padding:calc(var(--header-h) + 48px) 0 96px;
}
.notfound::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(45% 45% at 50% 45%, rgba(139,92,246,.22), transparent 70%);
}
.notfound-code{
  display:block; font-family:var(--font-display); font-weight:700; line-height:.9;
  font-size:clamp(7rem, 4rem + 16vw, 15rem); letter-spacing:-.05em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 20px 60px rgba(139,92,246,.35));
}
.notfound h1{ font-size:var(--fs-4xl); margin-top:var(--s-6); }
.notfound p{ margin:var(--s-4) auto 0; max-width:46ch; color:var(--text-muted); }
.notfound .hero-actions{ justify-content:center; margin-top:var(--s-8); display:flex; flex-wrap:wrap; gap:var(--s-3); }

@media (max-width:960px){
  .cs-facts{ grid-template-columns:1fr 1fr; }
  .cs-idea, .cs-idea:nth-child(even){ grid-template-columns:1fr; }
  .cs-idea:nth-child(even) .cs-idea-img{ order:0; }
}
@media (max-width:560px){
  .cs-honest{ grid-template-columns:1fr; }
  .cs-phone{ width:26%; }
}