/* =====================================================================
   PALETTE CLAIRE
   Kadence ne definit qu'une palette (sombre). On redefinit les memes
   variables sous [data-theme="light"] : tout ce qui lit --global-palette*
   suit, y compris l'en-tete, le pied et le contenu des articles, pas
   seulement nos propres composants.

   Le stamp l'emporte dans les deux sens : sombre reste le defaut, et un
   visiteur qui choisit clair garde son choix meme sur un systeme sombre.
   ===================================================================== */
:root[data-theme="light"] {
  --global-palette1: #2563EB;   /* accent            */
  --global-palette2: #1D4ED8;   /* accent survol     */
  --global-palette3: #0F172A;   /* texte fort        */
  --global-palette4: #334155;   /* texte courant     */
  --global-palette5: #64748B;   /* texte attenue     */
  --global-palette6: #E2E8F0;   /* bordures          */
  --global-palette7: #FFFFFF;   /* surface, cartes   */
  --global-palette8: #F1F5F9;   /* fond alternatif   */
  --global-palette9: #F8FAFC;   /* fond du site      */
  --global-palette-highlight: var(--global-palette1);
  color-scheme: light;
}
:root:not([data-theme="light"]) { color-scheme: dark; }

/* Le fond de page de Kadence est pose sur body : il faut le suivre. */
:root[data-theme="light"] body { background-color: var(--global-palette9); }

/* Les blocs de code et le terminal restent sombres dans les deux themes :
   basculer un gros bloc sombre en clair au milieu d'un article est la
   principale source de fatigue visuelle en lecture technique. */

/* =====================================================================
   StackRecipes Docs — mise en page de documentation
   Les couleurs sont branchees sur les variables de palette Kadence, pas
   sur des valeurs en dur : changer la palette dans le personnalisateur
   met a jour ce template sans toucher a ce fichier.
   ===================================================================== */

:root {
  --sr-bg:      var(--global-palette9, #0B0F17);
  --sr-surface: var(--global-palette7, #111827);
  --sr-text:    var(--global-palette3, #F1F5F9);
  --sr-body:    var(--global-palette4, #CBD5E1);
  --sr-muted:   var(--global-palette5, #94A3B8);
  --sr-border:  var(--global-palette6, #1E293B);
  --sr-accent:  var(--global-palette1, #3B82F6);
  --sr-accent2: var(--global-palette2, #2563EB);

  /* Le conteneur de code reste sombre quelle que soit la palette :
     basculer un gros bloc sombre en clair au milieu d'un article est
     la principale source de fatigue visuelle en lecture technique. */
  --sr-code-bg:     #0F172A;
  --sr-code-header: #1E293B;
  --sr-code-fg:     #E2E8F0;
  --sr-code-muted:  #94A3B8;

  --sr-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, monospace;

  --sr-sidebar: 240px;
  --sr-aside:   280px;
  --sr-measure: 704px;   /* ~68 caracteres par ligne a 17px Inter */
  --sr-gap:     3rem;
  --sr-radius:  8px;
}

/* ---- Grille ------------------------------------------------------- */
.sr-docs-layout {
  display: grid;
  grid-template-columns: var(--sr-sidebar) minmax(0, var(--sr-measure)) var(--sr-aside);
  gap: var(--sr-gap);
  max-width: calc(var(--sr-sidebar) + var(--sr-measure) + var(--sr-aside) + (var(--sr-gap) * 2) + 4rem);
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
  align-items: start;
}
.sr-rail {
  position: sticky;
  top: 6rem;                       /* sous l'en-tete Kadence */
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* ---- Sommaire ----------------------------------------------------- */
.sr-toc-title {
  font-size: .72rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--sr-muted); margin: 0 0 .9rem;
}
.sr-toc { list-style: none; margin: 0; padding: 0; }
.sr-toc li { margin: 0; }
.sr-toc a {
  display: block; padding: .3rem 0 .3rem .85rem;
  font-size: .875rem; line-height: 1.45;
  color: var(--sr-muted); text-decoration: none;
  border-left: 2px solid var(--sr-border);
  transition: color .15s, border-color .15s;
}
.sr-toc a:hover { color: var(--sr-text); }
.sr-toc a.is-active { color: var(--sr-accent); border-left-color: var(--sr-accent); font-weight: 500; }
.sr-toc .depth-3 a { padding-left: 1.7rem; font-size: .83rem; }
.sr-toc-mobile summary { display: none; }

/* ---- Article ------------------------------------------------------ */
.sr-doc { min-width: 0; }
.sr-doc > header h1 {
  font-size: clamp(1.85rem, 1.3rem + 1.6vw, 2.4rem);
  line-height: 1.2; letter-spacing: -.022em; font-weight: 700;
  margin: 0 0 1rem; text-wrap: balance;
}
.sr-doc h2 { margin-top: 3.2rem; scroll-margin-top: 7rem; text-wrap: balance; }
.sr-doc h3 { margin-top: 2.2rem; scroll-margin-top: 7rem; text-wrap: balance; }
.sr-doc p, .sr-doc li { line-height: 1.7; color: var(--sr-body); }
.sr-doc strong { color: var(--sr-text); }

.sr-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.sr-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .6rem; margin: 0;
  font: 500 .765rem/1.35 var(--sr-mono);
  color: var(--sr-muted);
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.sr-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sr-accent); flex: none; }
.sr-badge.is-metric { color: var(--sr-text); }

/* ---- Snippets ----------------------------------------------------- */
.snippet {
  margin: 1.5rem 0 1.75rem;
  border: 1px solid var(--sr-code-header);
  border-radius: var(--sr-radius);
  overflow: hidden;
  background: var(--sr-code-bg);
}
.snippet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .55rem .5rem .9rem;
  background: var(--sr-code-header);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.snippet-path {
  font: 500 .78rem/1.4 var(--sr-mono); color: var(--sr-code-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.snippet-tools { display: flex; align-items: center; gap: .5rem; flex: none; }
.snippet .lang {
  font: 500 .68rem/1 var(--sr-mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--sr-code-muted); padding: .28rem .45rem;
  border: 1px solid rgba(255,255,255,.12); border-radius: 4px;
}
.snippet .copy {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-width: 68px;                 /* largeur figee : le libelle change sans reflux */
  padding: .3rem .55rem;
  font: 500 .74rem/1 inherit; color: var(--sr-code-muted);
  background: transparent; border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; cursor: pointer;
}
.snippet .copy:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.snippet .copy[data-copied="true"] { color: #4ADE80; border-color: rgba(74,222,128,.4); }
.snippet .copy svg { width: 13px; height: 13px; flex: none; }
.snippet pre { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; background: var(--sr-code-bg); border: 0; }
.snippet code { font: 400 13.5px/1.65 var(--sr-mono); color: var(--sr-code-fg); font-variant-ligatures: none; tab-size: 2; background: none; padding: 0; }

.sr-doc :not(pre) > code {
  font: 400 .875em/1.4 var(--sr-mono);
  padding: .12em .38em; border-radius: 4px;
  background: color-mix(in srgb, var(--sr-accent) 13%, transparent);
  color: var(--sr-accent); word-break: break-word;
}

/* ---- Encadres ----------------------------------------------------- */
.callout {
  display: flex; gap: .85rem; margin: 1.6rem 0; padding: .95rem 1.1rem;
  border-left: 4px solid; border-radius: 0 var(--sr-radius) var(--sr-radius) 0;
  font-size: .945rem;
}
.callout p { margin: 0 0 .55rem; }
.callout p:last-child { margin-bottom: 0; }
.callout svg { width: 19px; height: 19px; flex: none; margin-top: .18rem; }
.callout-title {
  display: block; font: 600 .74rem/1.4 inherit;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: .35rem;
}
.callout-warning   { border-color: #FBBF24; background: rgba(251,191,36,.09); }
.callout-warning   .callout-title, .callout-warning   svg { color: #FBBF24; }
.callout-benchmark { border-color: #2DD4BF; background: rgba(45,212,191,.09); }
.callout-benchmark .callout-title, .callout-benchmark svg { color: #2DD4BF; }

/* ---- Tableaux ----------------------------------------------------- */
.sr-doc .wp-block-table { overflow-x: auto; }
.sr-doc .wp-block-table table { min-width: 34rem; font-size: .9rem; }
.sr-doc .wp-block-table td { font-variant-numeric: tabular-nums; }

/* ---- Encarts ------------------------------------------------------ */
.sr-card {
  background: var(--sr-surface); border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius); padding: 1.1rem; margin-bottom: 1.1rem;
}
.sr-card-label {
  font: 600 .68rem/1.4 inherit; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sr-muted); margin: 0 0 .55rem;
}
.sr-card h3 { font-size: 1rem; font-weight: 650; margin: 0 0 .2rem; line-height: 1.35; }
.sr-price { font: 600 1.35rem/1.2 inherit; font-variant-numeric: tabular-nums; margin: .45rem 0 .85rem; }
.sr-price small { font: 400 .8rem/1 inherit; color: var(--sr-muted); }
.sr-specs { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .855rem; }
.sr-specs li {
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .38rem 0; border-bottom: 1px dashed var(--sr-border);
  color: var(--sr-muted); margin: 0;
}
.sr-specs li:last-child { border-bottom: 0; }
.sr-specs b { font-weight: 600; color: var(--sr-text); font-family: var(--sr-mono); font-size: .84rem; font-variant-numeric: tabular-nums; }
.sr-btn {
  display: block; width: 100%; padding: .65rem 1rem;
  font: 600 .89rem/1.4 inherit; text-align: center;
  color: #fff; background: var(--sr-accent);
  border: 0; border-radius: 6px; cursor: pointer; text-decoration: none;
}
.sr-btn:hover { background: var(--sr-accent2); color: #fff; text-decoration: none; }
.sr-fineprint { font-size: .74rem; color: var(--sr-muted); margin: .6rem 0 0; line-height: 1.5; }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 1279px) {
  .sr-docs-layout { grid-template-columns: var(--sr-sidebar) minmax(0, 1fr); gap: 2.5rem; }
  /* overflow-y et overscroll-behavior sont herites de .sr-rail. Ne remettre
     que position et max-height laisse un conteneur de defilement plein ecran
     en bas de page : le geste tactile y reste captif et la page ne bouge
     plus. Il faut aussi les annuler. */
  .sr-aside-rail { grid-column: 1 / -1; position: static; max-height: none;
                   overflow-y: visible; overscroll-behavior: auto;
                   padding-bottom: 4.5rem; }
  .sr-aside-rail .sr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  .sr-aside-rail .sr-card { margin-bottom: 0; }
}
@media (max-width: 1023px) {
  .sr-docs-layout { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.25rem 4rem; }
  .sr-toc-rail { position: static; max-height: none;
                 overflow-y: visible; overscroll-behavior: auto; }
  .sr-toc-mobile {
    border: 1px solid var(--sr-border); border-radius: var(--sr-radius);
    background: var(--sr-surface); padding: .5rem .9rem;
  }
  .sr-toc-mobile summary { display: list-item; cursor: pointer; font: 600 .82rem/2 inherit; color: var(--sr-muted); }
  .sr-toc-mobile .sr-toc-title { display: none; }
}
@media (max-width: 640px) {
  .sr-aside-rail .sr-cards { grid-template-columns: 1fr; }
  .snippet-path { max-width: 40vw; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   BARRE D'OUTILS ET PALETTE DE COMMANDES
   Deplacees ici depuis home.css : elles sont rendues sur toutes les pages
   par le hook wp_footer, mais home.css n'est charge que sur l'accueil.
   Ailleurs, les boutons apparaissaient donc sans aucune mise en forme.

   Les variables --h-* n'existent que sous .sr-home : on les redefinit ici
   au niveau racine pour que la barre soit stylee partout.
   ===================================================================== */
:root {
  --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-mono:    "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, monospace;
}

/* ---- 7. Bascule de theme et declencheur de palette ------------------- */
.sr-toolbar {
  position: fixed; right: 1.1rem; z-index: 40;
  /* env() tient compte de la barre gestuelle des telephones recents. */
  bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  display: flex; gap: .5rem;

  /* Toujours visible. Une premiere version la masquait tant que le hero
     etait a l'ecran, pour ne pas recouvrir le CTA : elle devenait
     introuvable la ou on la cherche en premier. On degage plutot le bas
     du hero sur mobile (voir plus bas), et on assume qu'une barre fixe
     survole le contenu pendant le defilement — c'est son principe. */
  transition: transform .15s ease;
}

/* Sans JavaScript les deux boutons n'ont aucun effet. On les masque donc
   plutot que d'offrir des commandes inertes ; la navigation passe par le
   menu du theme, qui fonctionne sans script. La classe est posee par
   home.js des son execution. */
.sr-toolbar { opacity: 0; visibility: hidden; }
.sr-toolbar.is-on { opacity: 1; visibility: visible; }
.sr-tool {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 40px; padding: 0 .85rem;
  font: 500 .82rem/1 inherit; color: var(--h-muted);
  background: color-mix(in srgb, var(--h-surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border: 1px solid var(--h-border); border-radius: 100px;
  cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.22);
}
.sr-tool:hover { color: var(--h-text); border-color: var(--h-muted); }
.sr-tool svg { width: 15px; height: 15px; }
.sr-tool kbd {
  font: 500 .7rem/1 var(--h-mono); padding: .18rem .32rem;
  border: 1px solid var(--h-border); border-radius: 4px; color: var(--h-muted);
}
@media (max-width: 680px) {
  .sr-tool .label { display: none; }
  .sr-tool { height: 38px; padding: 0 .7rem; }
  .sr-toolbar { right: .85rem; bottom: calc(.85rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .sr-toolbar { transition: none; }
}

/* ---- 8. Palette de commandes (Popover API) --------------------------- */
#sr-palette {
  width: min(560px, 92vw); padding: 0; border: 1px solid var(--h-border);
  border-radius: 14px; background: var(--h-surface); color: var(--h-text);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  margin: auto; inset: 0;
}
#sr-palette::backdrop { background: rgba(2,6,15,.55); backdrop-filter: blur(3px); }
.sr-pal-in { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--h-border); }
.sr-pal-in svg { width: 17px; height: 17px; color: var(--h-muted); flex: none; }
.sr-pal-in input {
  flex: 1; border: 0; background: none; outline: none;
  font: 400 1rem/1.5 inherit; color: var(--h-text);
}
.sr-pal-in input::placeholder { color: var(--h-muted); }
#sr-results { list-style: none; margin: 0; padding: .4rem; max-height: 54vh; overflow-y: auto; }
#sr-results li { margin: 0; }
#sr-results a {
  display: block; padding: .6rem .7rem; border-radius: 8px;
  color: var(--h-text); text-decoration: none; font-size: .93rem; line-height: 1.4;
}
#sr-results a small { display: block; color: var(--h-muted); font-size: .78rem; margin-top: .15rem; }
#sr-results a:hover, #sr-results .is-sel a { background: color-mix(in srgb, var(--h-accent) 14%, transparent); }
.sr-pal-foot {
  padding: .55rem 1rem; border-top: 1px solid var(--h-border);
  font: 400 .74rem/1.5 inherit; color: var(--h-muted);
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.sr-pal-foot kbd { font-family: var(--h-mono); border: 1px solid var(--h-border); border-radius: 3px; padding: .05rem .3rem; }
.sr-pal-empty { padding: 1.4rem 1rem; color: var(--h-muted); font-size: .9rem; text-align: center; }

/* ---- 9. View Transitions sur le changement de theme ------------------ */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .28s; }
}