/* =====================================================================
   Page d'accueil — StackRecipes Docs
   Les couleurs passent par les variables de palette Kadence, comme le
   reste du theme : changer la palette met la page a jour sans toucher
   a ce fichier.
   ===================================================================== */
.sr-home {
  --h-bg:      var(--global-palette9, #0B0F17);
  --h-surface: var(--global-palette7, #111827);
  --h-surface2:var(--global-palette8, #0F172A);
  --h-text:    var(--global-palette3, #F1F5F9);
  --h-muted:   var(--global-palette5, #94A3B8);
  --h-border:  var(--global-palette6, #1E293B);
  --h-accent:  var(--global-palette1, #3B82F6);
  --h-accent2: var(--global-palette2, #2563EB);
  --h-ok:      #2DD4BF;

  /* Le terminal reste sombre quelle que soit la palette :
     un terminal clair se lit comme un bug. */
  --h-term:      #0F172A;
  --h-term-head: #1E293B;
  --h-term-fg:   #E2E8F0;
  --h-term-dim:  #94A3B8;

  --h-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, monospace;
  --h-r: 10px;
}

.sr-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.sr-home h1, .sr-home h2, .sr-home h3 { letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.sr-home p { margin: 0; }
.sr-sec { padding: 3.5rem 0; }

/* ---- Hero --------------------------------------------------------- */
.sr-hero { padding: 3.5rem 0 3rem; border-bottom: 1px solid var(--h-border); }
.sr-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 3.5rem; align-items: center; }
.sr-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.1rem;
  padding: .28rem .65rem; font: 500 .74rem/1.4 var(--h-mono); color: var(--h-accent);
  background: color-mix(in srgb, var(--h-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--h-accent) 25%, transparent);
  border-radius: 100px;
}
.sr-eyebrow .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--h-accent); }
.sr-hero h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); line-height: 1.12; font-weight: 700; margin-bottom: 1.1rem; }
.sr-lede { font-size: 1.09rem; line-height: 1.65; color: var(--h-muted); margin-bottom: 1.9rem; max-width: 36em; }
/* Ligne de qualification : plus discrete que le chapo, mais lisible. */
.sr-forwhom {
  font-size: .92rem; line-height: 1.6; color: var(--h-muted);
  margin: -.9rem 0 1.7rem; max-width: 38em;
  padding-left: .85rem; border-left: 2px solid var(--h-border);
}
.sr-btn-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.sr-btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .68rem 1.15rem;
  border-radius: 8px; font: 600 .92rem/1.4 inherit; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
}
.sr-btn:hover { text-decoration: none; }
.sr-btn-primary { background: var(--h-accent); color: #fff; }
.sr-btn-primary:hover { background: var(--h-accent2); color: #fff; }
.sr-btn-ghost { background: var(--h-surface); color: var(--h-text); border-color: var(--h-border); }
.sr-btn-ghost:hover { border-color: var(--h-muted); color: var(--h-text); }
.sr-btn svg { width: 15px; height: 15px; }

/* ---- Terminal ----------------------------------------------------- */
.sr-term {
  margin: 0; background: var(--h-term); border: 1px solid var(--h-term-head);
  border-radius: var(--h-r); overflow: hidden;
}
.sr-term-head {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem;
  background: var(--h-term-head); border-bottom: 1px solid rgba(255,255,255,.06);
}
.sr-dots { display: flex; gap: .32rem; }
.sr-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.sr-term-title { font: 500 .74rem/1.4 var(--h-mono); color: var(--h-term-dim); flex: 1; text-align: center; }
.sr-term .copy {
  display: inline-flex; align-items: center; justify-content: center; min-width: 62px;
  padding: .25rem .5rem; font: 500 .7rem/1 inherit; color: var(--h-term-dim);
  background: transparent; border: 1px solid rgba(255,255,255,.13);
  border-radius: 4px; cursor: pointer;
}
.sr-term .copy:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.sr-term .copy[data-copied="true"] { color: #4ADE80; border-color: rgba(74,222,128,.4); }
.sr-term pre { margin: 0; padding: 1rem 1.05rem; overflow-x: auto; background: none; border: 0; }
.sr-term code { font: 400 12.8px/1.75 var(--h-mono); color: var(--h-term-fg); background: none; padding: 0; }
.sr-term .c-dim { color: var(--h-term-dim); }
.sr-term .c-ok  { color: #4ADE80; }
.sr-term .c-acc { color: #60A5FA; }

/* ---- Metriques ---------------------------------------------------- */
.sr-trust { padding: 2.2rem 0; border-bottom: 1px solid var(--h-border); background: var(--h-surface2); }
.sr-trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.sr-stat .v { font: 600 1.75rem/1.15 var(--h-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--h-text); }
.sr-stat .v .u { font-size: 1rem; font-weight: 500; color: var(--h-muted); }
.sr-stat .k { font-size: .83rem; color: var(--h-muted); margin-top: .3rem; line-height: 1.45; }

/* Bloc de methode : encadre discret, il porte la credibilite du site. */
.sr-method {
  max-width: 46em;
  border-left: 3px solid var(--h-accent);
  padding-left: 1.4rem;
}
.sr-method h2 { font-size: 1.3rem; font-weight: 650; margin-bottom: .7rem; }
.sr-method p { color: var(--h-muted); font-size: .97rem; line-height: 1.7; margin-bottom: .9rem; }
.sr-method p:last-child { margin-bottom: 0; }

/* ---- Sections ----------------------------------------------------- */
.sr-sec-head { margin-bottom: 1.9rem; max-width: 44em; }
.sr-sec-head h2 { font-size: 1.55rem; font-weight: 650; margin-bottom: .5rem; }
.sr-sec-head p { color: var(--h-muted); font-size: .98rem; }
.sr-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.sr-card { background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-r); padding: 1.35rem; }

/* ---- Hubs --------------------------------------------------------- */
.sr-cluster { display: flex; flex-direction: column; }
.sr-cluster-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.sr-cluster h3 { font-size: 1.06rem; font-weight: 650; line-height: 1.35; }
.sr-count {
  flex: none; font: 600 .72rem/1 var(--h-mono); padding: .3rem .5rem; border-radius: 100px;
  color: var(--h-accent); background: color-mix(in srgb, var(--h-accent) 12%, transparent);
}
.sr-cluster > p { font-size: .9rem; color: var(--h-muted); margin-bottom: 1rem; }
.sr-cluster ul { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .9rem; }
.sr-cluster li { padding: .42rem 0; border-top: 1px solid var(--h-border); margin: 0; }
.sr-cluster li a { color: var(--h-text); display: block; text-decoration: none; }
.sr-cluster li a:hover { color: var(--h-accent); }
.sr-planned { margin-top: auto; color: var(--h-muted); font-size: .82rem; font-style: italic; }

/* ---- Cartes blueprint --------------------------------------------- */
.sr-bp { display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.sr-bp:hover { border-color: var(--h-accent); transform: translateY(-2px); }
.sr-stack { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .8rem; }
.sr-tag {
  font: 500 .69rem/1 var(--h-mono); padding: .26rem .45rem; border-radius: 4px;
  color: var(--h-muted); background: var(--h-surface2); border: 1px solid var(--h-border);
}
.sr-bp h3 { font-size: 1.02rem; font-weight: 600; line-height: 1.42; margin-bottom: .5rem; }
.sr-bp h3 a { color: var(--h-text); text-decoration: none; }
.sr-bp h3 a:hover { color: var(--h-accent); }
.sr-bp > p { font-size: .88rem; color: var(--h-muted); margin-bottom: 1rem; }
.sr-bp-foot {
  margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--h-border);
  display: flex; justify-content: space-between; gap: .75rem; align-items: center;
  font: 500 .78rem/1.4 var(--h-mono); color: var(--h-muted);
}
.sr-target { color: var(--h-ok); font-weight: 600; }

/* ---- Capture ------------------------------------------------------ */
.sr-kit {
  background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-r);
  padding: 2rem; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: 2.5rem; align-items: center;
}
.sr-kit h2 { font-size: 1.4rem; font-weight: 650; margin-bottom: .6rem; }
.sr-kit > div > p { color: var(--h-muted); font-size: .95rem; margin-bottom: 1rem; }
.sr-kit ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; display: grid; gap: .4rem; }
.sr-kit li { display: flex; gap: .55rem; align-items: flex-start; color: var(--h-muted); margin: 0; }
.sr-kit li svg { width: 15px; height: 15px; flex: none; margin-top: .22rem; color: var(--h-ok); }

/* ---- Services ------------------------------------------------------ */
.sr-services {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding: 1.6rem 1.8rem; border-radius: var(--h-r);
  background: var(--h-surface); border: 1px solid var(--h-border);
  border-left: 4px solid var(--h-accent);
}
.sr-services h2 { font-size: 1.12rem; font-weight: 650; margin-bottom: .3rem; }
.sr-services p { color: var(--h-muted); font-size: .92rem; max-width: 52ch; }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 1024px) {
  .sr-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sr-trust-grid { grid-template-columns: repeat(2,1fr); gap: 1.75rem; }
  .sr-grid-3 { grid-template-columns: 1fr 1fr; }
  .sr-kit { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 680px) {
  /* On degage le bas du hero : sans cela, les boutons d'appel a l'action
     tombent exactement sous la barre flottante dans la premiere vue. */
  .sr-hero { padding: 2.5rem 0 5.5rem; }
  .sr-sec { padding: 2.5rem 0; }
  .sr-grid-3 { grid-template-columns: 1fr; }
  .sr-trust-grid { grid-template-columns: 1fr 1fr; gap: 1.35rem; }
  .sr-kit { padding: 1.4rem; }
  .sr-services { padding: 1.35rem; }
}

/* =====================================================================
   Ameliorations 2026/2027
   Techniques desormais baseline : @property, container queries, subgrid,
   animations pilotees par le defilement, View Transitions. Chacune degrade
   proprement : sans support, la page reste celle d'avant, jamais cassee.
   ===================================================================== */

/* ---- 1. Fond du hero : grille de points + halo d'accent ------------
   Deux degrades, aucune image, aucun poids reseau. */
.sr-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.sr-hero::before {
  content: "";
  position: absolute; inset: -40% -10% auto -10%; height: 150%;
  z-index: -1;
  background:
    radial-gradient(46rem 26rem at 22% 0%,
      color-mix(in srgb, var(--h-accent) 13%, transparent), transparent 62%),
    radial-gradient(34rem 22rem at 88% 18%,
      color-mix(in srgb, var(--h-accent) 7%, transparent), transparent 60%);
  pointer-events: none;
}
.sr-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: radial-gradient(circle at 1px 1px,
    color-mix(in srgb, var(--h-muted) 26%, transparent) 1px, transparent 0);
  background-size: 26px 26px;
  /* Le maillage s'efface vers le bas : il cadre le titre sans concurrencer
     le texte. */
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
  pointer-events: none;
}

/* ---- 2. Revelations au defilement, sans JavaScript ------------------
   animation-timeline: view() est evalue par le compositeur : aucun
   observateur, aucun script, et rien a nettoyer. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sr-sec-head,
    .sr-card,
    .sr-kit,
    .sr-services,
    .sr-stat {
      animation: sr-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    @keyframes sr-rise {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ---- 3. Requetes de conteneur ---------------------------------------
   Les cartes reagissent a la largeur qu'on leur donne, pas a celle de la
   fenetre : la meme carte reste juste dans une colonne etroite comme dans
   une pleine largeur. */
.sr-grid-3 { container-type: inline-size; }
@container (max-width: 640px) {
  .sr-bp-foot { flex-direction: column; align-items: flex-start; gap: .35rem; }
}

/* ---- 4. Sous-grille : les pieds de carte s'alignent ------------------ */
@supports (grid-template-rows: subgrid) {
  .sr-grid-3:has(.sr-bp) { grid-template-rows: auto; }
  .sr-bp {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0;
  }
  .sr-bp > p { margin-bottom: 1rem; }
}

/* ---- 5. Typographie ------------------------------------------------- */
.sr-home p, .sr-home li { text-wrap: pretty; }   /* evite les lignes veuves */

/* ---- 6. Compteurs animes -------------------------------------------- */
@property --sr-n { syntax: "<number>"; inherits: false; initial-value: 0; }
.sr-stat .v[data-count] { --sr-n: 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sr-stat .v[data-count] {
      animation: sr-count 1s ease-out both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
    @keyframes sr-count { to { --sr-n: 1; } }
  }
}