/* ═══════════════════════════════════════════════════════════════════════════
   PWO MAG — mini-magazine feuilletable (BLOC 06A)
   Pose le 29/09/2026. Remplace « L'info Tech du mois », conserve en commentaire
   dans index.html.

   REGLES
   · Tout est prefixe .pwomag : aucune regle ne peut fuir sur le reste du site.
   · Aucune police, aucune image, aucun script externe. Les illustrations sont
     des SVG ecrits a la main, injectes par mag.js.
   · Les pages sont « papier » (creme, encre sombre) : c'est le seul endroit
     clair du site, ce qui fait justement lire le bloc comme un magazine.
   · Le bloc vit dans une colonne de ~65 % : toutes les tailles sont en clamp()
     et le livre passe en une seule page sous 560 px (usePortrait de page-flip).
   ═══════════════════════════════════════════════════════════════════════════ */

.pwomag{
  --pap:#f6f1e4;          /* papier */
  --pap-2:#ece4d2;        /* papier, ton creuse */
  --ink:#1a1526;          /* encre */
  --ink-2:#4a4160;        /* encre secondaire */
  --fil:#c9bda4;          /* filets */
  --page-ratio: 1.42;     /* hauteur / largeur d'une page */
  min-width:0;
}

/* ── barre de commandes ──────────────────────────────────────────────────── */
.pwomag-bar{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  margin-bottom:.6rem;
}
.pwomag-bar button{
  font:inherit;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  color:var(--txt);background:rgba(10,1,24,.7);
  border:1px solid var(--line);border-radius:999px;
  padding:.34rem .74rem;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.pwomag-bar button:hover:not(:disabled){border-color:var(--mag);color:#fff;background:rgba(255,46,151,.14)}
.pwomag-bar button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.pwomag-bar button:disabled{opacity:.35;cursor:default}
.pwomag-bar .pwomag-pos{
  font-size:.7rem;color:var(--txt-soft);font-variant-numeric:tabular-nums;
  min-width:4.2rem;text-align:center;
}
.pwomag-bar .pwomag-sp{flex:1;min-width:.25rem}

/* ── scene du livre ──────────────────────────────────────────────────────── */
.pwomag-stage{
  position:relative;width:100%;min-width:0;
  border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(165,55,253,.16),transparent 62%),
    rgba(10,1,24,.55);
  border:1px solid var(--line-soft);
  padding:clamp(.5rem,1.6vw,1rem);
  overflow:hidden;                /* les ombres de page ne debordent jamais */
}
.pwomag-book{margin:0 auto}
.pwomag-book .stf__parent{margin:0 auto}

/* ── une page ────────────────────────────────────────────────────────────── */
.pwomag-page{
  background:var(--pap);color:var(--ink);
  box-sizing:border-box;overflow:hidden;
  display:flex;flex-direction:column;
  /* container-type : le texte est dimensionne sur LA PAGE, pas sur la
     fenetre. Sans cela, une page de 230 px dans une fenetre de 1440 gardait
     un corps calcule en vw et debordait. */
  container-type:inline-size;
  padding:clamp(.55rem,3.2cqw,1rem);
  font-size:clamp(.56rem,3.5cqw,.73rem);
  line-height:1.48;
  /* Les pages de droite portent leur reliure a gauche, et inversement.
     page-flip ajoute .--right / .--left sur la page elle-meme. */
}
.pwomag-page.--left{
  background:linear-gradient(90deg,var(--pap) 0%,var(--pap) 88%,var(--pap-2) 100%);
}
.pwomag-page.--right{
  background:linear-gradient(270deg,var(--pap) 0%,var(--pap) 88%,var(--pap-2) 100%);
}
.pwomag-page *{min-width:0}

.pwomag-kicker{
  font-size:.62em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8a2f6b;margin:0 0 .35rem;
}
.pwomag-page h3{
  font-size:clamp(.78rem,6.2cqw,1.05rem);line-height:1.17;font-weight:800;
  margin:0 0 .5rem;color:var(--ink);letter-spacing:-.01em;
}
.pwomag-page p{margin:0 0 .5rem}
.pwomag-page p:last-of-type{margin-bottom:0}
.pwomag-body{flex:1;min-height:0;overflow:hidden}

/* filet de rubrique */
.pwomag-rule{height:2px;border:0;margin:0 0 .55rem;
  background:linear-gradient(90deg,#c0246f,#7b2ff7 55%,transparent)}

/* encadre */
.pwomag-box{
  margin:.55rem 0 0;padding:.5rem .6rem;
  background:var(--pap-2);border-left:3px solid #c0246f;border-radius:0 6px 6px 0;
}
.pwomag-box b{display:block;font-size:.78em;letter-spacing:.06em;text-transform:uppercase;
  color:#8a2f6b;margin-bottom:.25rem}
.pwomag-box ul{margin:0;padding-left:.95rem}
.pwomag-box li{margin:.1rem 0}

/* source en pied de page */
.pwomag-src{
  margin-top:auto;padding-top:.5rem;border-top:1px solid var(--fil);
  font-size:.82em;line-height:1.35;color:var(--ink-2);
}
.pwomag-src b{color:var(--ink)}
.pwomag-src a{color:#7b2ff7;word-break:break-word}
.pwomag-page .pwomag-warn{
  font-size:.85em;color:#7a4a12;background:#f3e4c4;
  padding:.35rem .5rem;border-radius:5px;margin:.4rem 0 0;
}

/* folio */
.pwomag-folio{
  display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
  font-size:.78em;color:var(--ink-2);letter-spacing:.08em;margin-top:.4rem;
}

/* ── couverture et dos ───────────────────────────────────────────────────── */
.pwomag-page.--cover,.pwomag-page.--back{
  background:linear-gradient(160deg,#150b2e 0%,#2a0f3f 48%,#3d0f2e 100%);
  color:#f3ecff;justify-content:space-between;
}
.pwomag-page.--cover h3{color:#fff;font-size:clamp(1.15rem,11cqw,1.95rem);letter-spacing:-.02em;
  text-shadow:0 0 14px rgba(255,46,151,.55)}
.pwomag-cover-kick{
  font-size:.72em;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#05d9e8;
}
.pwomag-cover-hook{font-size:.95em;line-height:1.45;color:#dcd2f0}
.pwomag-page.--cover .pwomag-foot,
.pwomag-page.--back .pwomag-foot{
  font-size:.78em;letter-spacing:.14em;text-transform:uppercase;color:#a78ec9;
  border-top:1px solid rgba(255,255,255,.16);padding-top:.45rem;
}
.pwomag-page.--back p{color:#cfc3e6}

/* ── sommaire ────────────────────────────────────────────────────────────── */
.pwomag-toc{list-style:none;margin:0;padding:0}
.pwomag-toc li{display:grid;grid-template-columns:1.9rem 1fr;gap:.45rem;
  padding:.3rem 0;border-bottom:1px dotted var(--fil)}
.pwomag-toc .n{font-weight:800;color:#c0246f;font-variant-numeric:tabular-nums}
.pwomag-toc .t{font-weight:700;display:block}
.pwomag-toc .d{color:var(--ink-2);font-size:.92em}

/* ── tableaux sorties / serveurs ─────────────────────────────────────────── */
.pwomag-list{list-style:none;margin:0;padding:0}
.pwomag-list li{padding:.38rem 0;border-bottom:1px solid var(--fil)}
.pwomag-list .d{display:inline-block;min-width:3.6rem;font-weight:800;color:#c0246f}
.pwomag-list .nm{font-weight:800}
.pwomag-list .sb{color:var(--ink-2)}
.pwomag-list .pf{display:block;font-size:.88em;color:var(--ink-2);letter-spacing:.02em}
.pwomag-list .mt{display:block;font-size:.92em}

.pwomag-srv{width:100%;border-collapse:collapse;font-size:.95em}
.pwomag-srv th,.pwomag-srv td{text-align:left;padding:.26rem .3rem;border-bottom:1px solid var(--fil);vertical-align:top}
.pwomag-srv th{font-size:.82em;letter-spacing:.08em;text-transform:uppercase;color:#8a2f6b}
.pwomag-srv .nm{font-weight:800}
.pwomag-srv .nt{display:block;color:var(--ink-2);font-size:.9em}

/* ── illustrations ───────────────────────────────────────────────────────── */
.pwomag-art{display:block;width:100%;height:auto;margin:0 0 .5rem;border-radius:6px}
.pwomag-page.--cover .pwomag-art{margin:.3rem 0}

/* ── version simple (colonne) ────────────────────────────────────────────── */
.pwomag-simple{display:none;gap:var(--gap);grid-template-columns:1fr}
.pwomag--simple .pwomag-stage{display:none}
.pwomag--simple .pwomag-simple{display:grid}
.pwomag--simple .pwomag-nav{display:none}
.pwomag-simple .pwomag-page{
  border-radius:var(--radius);border:1px solid var(--fil);
  container-type:normal;
  font-size:.74rem;padding:clamp(.8rem,2.2vw,1.2rem);
}
.pwomag-simple .pwomag-page h3{font-size:clamp(.95rem,2.4vw,1.25rem)}
.pwomag-simple .pwomag-page.--cover h3{font-size:clamp(1.4rem,4vw,2.1rem)}
.pwomag-simple .pwomag-page.--cover,
.pwomag-simple .pwomag-page.--back{border-color:rgba(255,255,255,.14)}
.pwomag-simple .pwomag-body{overflow:visible}
/* En colonne la page prend toute la largeur du bloc : sans plafond,
   les illustrations passeraient de 300 a 900 px de large. */
.pwomag-simple .pwomag-art{max-width:360px;margin-left:0}

/* ── secours : ni page-flip, ni JS ───────────────────────────────────────── */
.pwomag-fallback{
  font-size:.75rem;line-height:1.55;color:var(--txt-soft);
  border:1px dashed var(--line);border-radius:var(--radius);padding:.8rem;margin:0;
}
.pwomag[data-ready] .pwomag-fallback{display:none}

/* ── mouvement reduit : on retire aussi les ombres animees ───────────────── */
@media (prefers-reduced-motion: reduce){
  .pwomag-bar button{transition:none}
  .pwomag .stf__shadow,.pwomag .stf__wrapper .stf__innerShadow{display:none!important}
}

/* ── telephone ───────────────────────────────────────────────────────────── */
@media (max-width:560px){
  .pwomag-bar{gap:.35rem}
  .pwomag-bar button{font-size:.68rem;padding:.3rem .6rem}
  .pwomag-bar .pwomag-pos{min-width:3.4rem}
  .pwomag-stage{padding:.45rem}
}