/* ═══════════════════════════════════════════════════════════════════════
   CHARTE DE PWOGAMWEUR.COM — feuille de style commune
   Extraite du <style> en ligne d'index.html le 29/09/2026, TELLE QUELLE,
   sans une modification de regle, pour que les pages d'archives
   (/archives/<AAAA-MM>/<tech|gaming>/) partagent exactement le meme fond
   et la meme charte que l'accueil au lieu d'en recopier une approximation.
   Verification faite le jour de l'extraction : rendu de l'accueil identique
   au pixel pres avant/apres.
   Une modification ici touche l'accueil ET les archives. C'est voulu.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ CHARTE — reprise à l'identique de la page publique ══════════════════════ */
:root{
  --bg:#0a0118; --grid:#ff2e97; --cyan:#05d9e8; --mag:#ff2e97; --violet:#a537fd;
  --txt:#dfe9ff; --txt-soft:#c9b8e6; --panel:rgba(10,1,24,.55); --panel-solid:#0a0a0f;
  --line:rgba(5,217,232,.35); --line-soft:rgba(5,217,232,.18);
  --draft:#ffd93d; --neon-y:#ffe14d;
  --gap:1.15rem; --radius:14px;
  /* Hauteur des blocs au format compact. Ne pilote plus la webcam depuis le
     26/08/2026. Depuis le 31/08/2026 la camera n'a plus de variable de hauteur :
     elle prend toute la largeur de sa colonne et le ratio 16/9 fait le reste. */
  --mini-h:88px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%;scroll-behavior:smooth}
body{
  min-height:100%;
  background:var(--bg) url("/images/backgroundpwo2.jpeg") center/cover no-repeat fixed;
  font-family:"Segoe UI",system-ui,sans-serif;color:var(--txt);
  overflow-x:hidden;position:relative;
}
.sky{position:fixed;inset:0;background:rgba(10,1,24,.55);z-index:0}
.page{position:relative;z-index:2;max-width:1220px;margin:0 auto;padding:0 1.4rem 3rem}
a{color:var(--cyan)}

/* ══ BANDEAU BROUILLON ══════════════════════════════════════════════════════ */
.draft-bar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;
  padding:.55rem 1rem;text-align:center;
  background:repeating-linear-gradient(45deg,rgba(255,217,61,.16) 0 12px,rgba(10,1,24,.85) 12px 24px);
  border-bottom:2px solid var(--draft);
  color:var(--draft);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 0 8px rgba(255,217,61,.55);backdrop-filter:blur(6px);
}
.draft-bar .draft-sub{
  font-weight:600;letter-spacing:.04em;text-transform:none;
  color:var(--txt-soft);text-shadow:none;font-size:.72rem;
}

/* ══ EN-TÊTE / NAV ══════════════════════════════════════════════════════════ */
.masthead{padding:2.4rem 0 1.6rem;text-align:center}
.masthead h1{
  font-size:clamp(2rem,8vw,4.4rem);font-weight:800;letter-spacing:.12em;color:#fff;
  text-shadow:0 0 8px var(--cyan),0 0 22px var(--mag),0 0 44px var(--mag);
}
.masthead .tagline{
  margin-top:.7rem;font-size:clamp(.62rem,1.9vw,.82rem);letter-spacing:.42em;
  text-transform:uppercase;color:var(--cyan);text-shadow:0 0 10px var(--cyan);
}
.masthead .pitch{max-width:56ch;margin:1.1rem auto 0;font-size:.92rem;line-height:1.6;color:var(--txt)}
.nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem;
}
.nav a{
  padding:.42rem 1rem;border-radius:999px;text-decoration:none;font-size:.78rem;font-weight:700;
  letter-spacing:.06em;color:var(--txt);border:1px solid var(--line);background:var(--panel);
  backdrop-filter:blur(4px);transition:transform .15s,box-shadow .15s,color .15s,border-color .15s;
}
.nav a:hover,.nav a:focus-visible{
  transform:translateY(-2px);color:#fff;border-color:var(--cyan);
  box-shadow:0 0 14px rgba(5,217,232,.55);outline:none;
}

/* ══ BARRE DE STATS ═════════════════════════════════════════════════════════ */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--gap);
  margin:0 0 2.2rem;
}
.stat{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1rem;text-align:center;backdrop-filter:blur(4px);
}
.stat .n{display:block;font-size:1.65rem;font-weight:800;color:#fff;text-shadow:0 0 10px var(--cyan)}
.stat .l{display:block;margin-top:.2rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-soft)}

/* ══ SECTIONS ═══════════════════════════════════════════════════════════════ */
.section{margin:0 0 2.6rem;scroll-margin-top:4.5rem}
.section-head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:1.1rem}
.section-head h2{
  font-size:clamp(1.1rem,3.4vw,1.5rem);font-weight:800;letter-spacing:.05em;color:#fff;
  text-shadow:0 0 8px var(--mag),0 0 18px var(--cyan);
}
.section-head .hint{font-size:.76rem;color:var(--txt-soft)}
.section-head::after{content:"";flex:1;height:1px;min-width:2rem;background:linear-gradient(90deg,var(--mag),transparent)}

/* ══ GRILLE MODULAIRE — cœur du système ═════════════════════════════════════
   auto-fit + minmax : ajouter ou retirer une .mod ne demande AUCUNE modif CSS.
   .mod--wide occupe 2 colonnes quand la place le permet.                      */
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap);align-items:start}
.mod{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.2rem;backdrop-filter:blur(4px);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.mod:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 0 18px rgba(5,217,232,.25)}
.mod--wide{grid-column:span 2}
.mod--accent{background:var(--panel-solid);border:2px solid var(--mag);
  box-shadow:0 0 12px rgba(255,46,151,.45),inset 0 0 18px rgba(255,46,151,.06)}
.mod h3{font-size:1rem;font-weight:700;letter-spacing:.05em;color:#fff;text-shadow:0 0 8px var(--cyan)}
.mod p{margin-top:.6rem;font-size:.82rem;line-height:1.6;color:var(--txt)}
.mod .hl{color:var(--cyan);font-weight:700;text-shadow:0 0 6px rgba(5,217,232,.6)}
.mod .hl-m{color:var(--mag);font-weight:700;text-shadow:0 0 6px rgba(255,46,151,.6)}

/* Carte serveur */
.mod .tag{
  display:inline-block;margin-bottom:.5rem;padding:.16rem .6rem;border-radius:999px;
  font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-soft);color:var(--cyan);background:rgba(5,217,232,.08);
}
.mod .tag--live{color:#37f5c0;border-color:rgba(55,245,192,.4);background:rgba(55,245,192,.1)}
.join{
  display:inline-block;margin-top:.85rem;padding:.55rem 1.4rem;border-radius:9px;
  font-weight:700;font-size:.84rem;text-decoration:none;color:#0a0118;
  background:linear-gradient(90deg,var(--cyan),var(--mag));
  box-shadow:0 0 14px rgba(255,46,151,.5);transition:transform .15s,box-shadow .15s;
}
.join:hover,.join:focus-visible{transform:translateY(-2px);box-shadow:0 0 22px rgba(5,217,232,.7);outline:none}
.fallback{margin-top:.6rem;font-size:.71rem;color:var(--txt-soft);font-family:monospace;word-break:break-all}
.fallback code{color:var(--cyan)}
.note{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line-soft);font-size:.76rem;color:#e8d9ff;opacity:.9}

/* Média 16:9 */
.frame{position:relative;width:100%;padding-top:56.25%;margin-top:.75rem;border-radius:10px;
  overflow:hidden;border:1px solid var(--line);background:#000}
.frame > *{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame .ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;
  font-size:.78rem;color:var(--txt-soft);background:repeating-linear-gradient(45deg,#0d0320 0 10px,#12052b 10px 20px)}

/* Chronologie rentrée */
.timeline{list-style:none;margin-top:.4rem}
.timeline li{position:relative;padding:0 0 1rem 1.5rem;border-left:1px solid var(--line-soft)}
.timeline li:last-child{padding-bottom:0;border-left-color:transparent}
.timeline li::before{content:"";position:absolute;left:-5px;top:.35rem;width:9px;height:9px;border-radius:50%;
  background:var(--mag);box-shadow:0 0 10px var(--mag)}
.timeline .when{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.timeline .what{display:block;margin-top:.15rem;font-size:.82rem;line-height:1.5}

/* Pied de page */
.foot{margin-top:1rem;padding-top:1.4rem;border-top:1px solid var(--line-soft);
  text-align:center;font-size:.74rem;color:var(--txt-soft);line-height:1.7}


/* ══ LAYOUT 2 COLONNES ══════════════════════════════════════════════════════
   Colonne gauche étroite (35 %) : boutique, accès serveurs, actus du mois.
   Colonne droite large (65 %)   : chat, puis webcam/live à la même hauteur.
   L'ordre du DOM est DÉJÀ l'ordre voulu en mobile — passer en une colonne ne
   demande donc qu'un grid-template-columns:1fr, aucun reorder CSS.            */
.layout{display:grid;grid-template-columns:35fr 65fr;gap:var(--gap);align-items:stretch;margin:0 0 2.6rem}
.col{display:grid;gap:var(--gap);min-width:0}
.col-left{align-content:start}
.col-right{align-content:start;scroll-margin-top:4.5rem}

/* En-tête de bloc, version compacte du .section-head pour la colonne étroite. */
.blk{min-width:0;scroll-margin-top:4.5rem}
.blk-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.75rem}
.blk-head h2{font-size:clamp(1rem,2.6vw,1.2rem);font-weight:800;letter-spacing:.05em;color:#fff;
  text-shadow:0 0 8px var(--mag),0 0 18px var(--cyan)}
.blk-head .hint{font-size:.7rem;color:var(--txt-soft)}
.blk-head::after{content:"";flex:1;height:1px;min-width:1.5rem;background:linear-gradient(90deg,var(--mag),transparent)}
.stack{display:grid;gap:var(--gap)}
.blk-intro{font-size:.78rem;line-height:1.55;color:var(--txt-soft)}

/* ══ CHAT + WEBCAM — FORMAT COMPACT ═════════════════════════════════════════
   Les deux fenêtres étaient en hauteur libre et occupaient toute la colonne.
   Elles sont désormais bridées à var(--mini-h), soit environ un tiers de la
   hauteur précédente, ce qui les garde plus discrètes que les blocs Actus.
   UN SEUL RÉGLAGE : --mini-h dans :root règle la hauteur des DEUX fenêtres.
   .duo force en plus les deux blocs à la même hauteur, quel que soit le texte. */
.duo{display:grid;gap:var(--gap);grid-auto-rows:1fr;scroll-margin-top:4.5rem}
.mod--mini{display:flex;flex-direction:column;padding:.75rem .85rem}
.mod--mini h3{font-size:.88rem}
.mod--mini .mini-note{margin-top:.28rem;font-size:.66rem;line-height:1.4;color:var(--txt-soft)}
.frame--mini{flex:0 0 auto;margin-top:.55rem;padding-top:0;height:var(--mini-h)}
/* Webcam : ratio 16:9 conservé — la largeur se déduit de la hauteur réduite. */
.frame--cam{align-self:center;width:auto;max-width:100%;aspect-ratio:16/9}
/* Chat : zone de messages raccourcie et police réduite. */
.frame--chat .ph{font-size:.66rem;line-height:1.35;padding:.5rem}

/* ══ BOUTIQUE — placeholder ═════════════════════════════════════════════════
   Grille de 4 emplacements produit (vignette + nom + prix + bouton). Aucun
   script, aucun formulaire : les boutons de paiement viendront plus tard aux
   emplacements « EMPLACEMENT BOUTON PAYPAL » commentés dans le HTML.          */
.shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:.7rem;margin-top:.85rem}
.item{display:flex;flex-direction:column;gap:.4rem;padding:.6rem;text-align:center;
  border:1px solid var(--line-soft);border-radius:10px;background:rgba(10,1,24,.5)}
.item .vig{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:8px;
  border:1px dashed var(--line-soft);font-size:.62rem;line-height:1.35;color:var(--txt-soft);
  background:repeating-linear-gradient(45deg,#0d0320 0 10px,#12052b 10px 20px)}
.item .nm{font-size:.76rem;font-weight:700;color:#fff}
.item .pr{font-size:.95rem;font-weight:800;color:var(--cyan);text-shadow:0 0 6px rgba(5,217,232,.5)}
.buy{margin-top:auto;padding:.42rem .6rem;border-radius:8px;font:inherit;font-size:.7rem;font-weight:700;
  letter-spacing:.04em;color:var(--txt-soft);background:rgba(5,217,232,.06);border:1px solid var(--line-soft)}
.buy[disabled]{opacity:.6;cursor:not-allowed}

/* ══ ACCÈS SERVEURS — encadrement néon jaune ════════════════════════════════
   Bordure fine + halo externe + léger halo interne. AUCUNE animation : le
   rendu est strictement statique, y compris au survol (même box-shadow).      */
.mod--neon,.mod--neon:hover{
  border:1px solid var(--neon-y);
  box-shadow:0 0 6px rgba(255,225,77,.5),0 0 20px rgba(255,225,77,.26),inset 0 0 14px rgba(255,225,77,.09);
}
.mod--neon:hover{transform:none}
.mod--neon h3{text-shadow:0 0 8px rgba(255,225,77,.55)}
/* Cartes serveur compactes : une ligne par serveur au lieu d'une carte. */
.srv-list{display:grid;gap:.45rem}
.srv{display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;align-items:center;
  padding:.45rem .55rem;border:1px solid var(--line-soft);border-radius:9px;background:rgba(10,1,24,.5)}
.srv-id{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;min-width:0}
.srv .nm{font-size:.82rem;font-weight:700;color:#fff}
.srv .st{font-size:.56rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.1rem .4rem;border-radius:999px;color:#37f5c0;
  border:1px solid rgba(55,245,192,.4);background:rgba(55,245,192,.1)}
.srv .go{padding:.3rem .8rem;border-radius:7px;font-size:.7rem;font-weight:700;text-decoration:none;
  color:#0a0118;background:linear-gradient(90deg,var(--cyan),var(--mag));
  box-shadow:0 0 10px rgba(255,46,151,.4);transition:transform .15s,box-shadow .15s}
.srv .go:hover,.srv .go:focus-visible{transform:translateY(-1px);box-shadow:0 0 16px rgba(5,217,232,.6);outline:none}
.srv .cmd{grid-column:1/-1;font-family:monospace;font-size:.64rem;color:var(--txt-soft);word-break:break-all}
.srv .cmd code{color:var(--cyan)}
.mod--neon .note{font-size:.7rem;margin-top:.8rem;padding-top:.7rem}
/* ══ RESPONSIVE ═════════════════════════════════════════════════════════════ */
/* Tablette : la grille passe naturellement à 2 colonnes ; on neutralise le span 2
   des blocs larges dès qu'il ne reste plus assez de place. */
@media(max-width:1024px){
  .page{padding:0 1.1rem 2.4rem}
  .mods{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .mod--wide{grid-column:span 2}
  .masthead{padding:1.9rem 0 1.3rem}
}
/* Mobile : une seule colonne, plus rien ne s'étale sur 2 colonnes. */
@media(max-width:680px){
  :root{--gap:.9rem}
  .page{padding:0 .9rem 2rem}
  .mods{grid-template-columns:1fr}
  .mod--wide{grid-column:span 1}
  .stats{grid-template-columns:repeat(auto-fit,minmax(105px,1fr))}
  .stat .n{font-size:1.35rem}
  .nav{gap:.4rem}
  .nav a{padding:.36rem .8rem;font-size:.72rem}
  .draft-bar{font-size:.66rem;letter-spacing:.08em}
  .section{margin-bottom:2rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mod,.join,.nav a{transition:none}
  .mod:hover,.join:hover,.nav a:hover{transform:none}
}


/* ══ RESPONSIVE — LAYOUT 2 COLONNES ═════════════════════════════════════════
   Tablette et mobile : tout s'empile en une seule colonne. L'ordre du DOM donne
   alors exactement l'empilement demandé. Depuis le 03/09/2026 (BLOCS 05 et 12
   permutés, chat remonté dans l'en-tête) cet empilement est : Qui est
   Pwogamweur ? → Accès serveurs → Webcam Tokyo → Info Tech → Info Gaming
   — sans AUCUNE règle d'ordre : les enfants de
   .col-left sortent avant ceux de .col-right, et chaque colonne garde son ordre
   interne. Déplacer un bloc dans le HTML suffit donc à déplacer sa position
   mobile ; il n'y a jamais deux endroits à tenir d'accord.                     */
@media(max-width:1024px){
  .layout{grid-template-columns:1fr}
}
@media(max-width:680px){
  .layout{margin-bottom:2rem}
  .shop{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
  .srv{grid-template-columns:1fr}
  .srv .go{justify-self:start;margin-top:.3rem}
}
@media(prefers-reduced-motion:reduce){
  .srv .go{transition:none}
  .srv .go:hover{transform:none}
}
/* ═══ DÉBUT DÉCOR RENTRÉE — retirer après septembre 2026 ═══════════════════════
   Bloc 100 % additif : toutes les règles ci-dessous ne font que SURCHARGER des
   règles déjà écrites plus haut. Supprimer ce bloc de bout en bout restitue
   l'apparence d'origine — aucun autre endroit du fichier n'a été touché.
   Deux réglages : --rentree-voile (opacité du voile) et --panel (fond des blocs).
   Images associées : /images/bg-rentree.jpg et /images/bg-rentree-mob.jpg.

   ⚠ HISTORIQUE — 03/09/2026, DEUX MOUVEMENTS DANS LA MÊME JOURNÉE :
     · le matin, ces deux fonds avaient été remplacés par backgroundpwo2.jpeg
       (le fond d'origine du site) au titre du retrait du décor de rentrée ;
     · l'après-midi, RESTAURATION DEMANDÉE : bg-rentree.jpg et
       bg-rentree-mob.jpg sont remis, ce sont eux qui étaient réellement
       affichés avant la modification du matin.
   Le fond backgroundpwo2.jpeg n'a pas disparu pour autant : il reste la
   déclaration de BASE de <body> (voir la règle body en tête de feuille). Ces
   règles-ci ne font que la surcharger, plus bas dans la cascade — c'est
   exactement le montage d'avant, rétabli à l'identique.
   ⚠ Les mentions TEXTUELLES de la rentrée, elles, restent supprimées : seul
   le fond est revenu.                                                        */
:root{
  /* Voile de lisibilité : var(--bg) posé à 55 % par-dessus la photo. */
  --rentree-voile:55%;
  /* Orange néon « feuille d'automne » : contour du chat en tête de page
     et point de départ du dégradé du titre. */
  --auto-orange:#ff8c1a;
  /* Fond des blocs .stat / .mod / .nav a : opacifié pour rester lisible sur la
     photo. Valeur d'origine de --panel : rgba(10,1,24,.55). */
  --panel:rgba(10,1,24,.86);
}
/* Fond saisonnier sur le conteneur principal (body) — remplace l'image
   d'origine backgroundpwo2.jpeg. Desktop : attachment fixed. */
body{
  background-image:url("/images/bg-rentree.jpg");
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
/* Voile : on réutilise .sky, déjà en position:fixed inset:0 z-index:0, donc
   PAR-DESSUS l'image et SOUS le contenu (.page est en z-index:2).
   Aucune balise ajoutée : on ne fait qu'en régler l'opacité.
   1re déclaration = repli pour les navigateurs sans color-mix(). */
.sky{
  background:rgba(10,1,24,.55);
  background:color-mix(in srgb,var(--bg) var(--rentree-voile),transparent);
  pointer-events:none;
}
/* En dessous de 1024px : background-attachment:fixed casse le scroll sur iOS. */
@media(max-width:1023px){
  body{background-attachment:scroll}
}
/* Mobile : bascule sur la variante allégée. */
@media(max-width:900px){
  body{background-image:url("/images/bg-rentree-mob.jpg")}
}
/* Logo de rentrée en tête de page (voir BLOC 01 dans le corps).
   Le JPEG fourni a un fond NOIR OPAQUE qui n'a pas pu être détouré : les
   lunettes pixel et le clavier sont noirs eux aussi et se confondent avec ce
   fond, tout détourage troue le sujet. On assume donc le rectangle et on le
   présente comme une vignette encadrée, avec les tokens du site (--radius,
   --line, --cyan) pour que le cadre paraisse voulu par-dessus la photo.
   Si un PNG à fond transparent arrive un jour : remplacer le fichier, puis
   supprimer border / border-radius / box-shadow ci-dessous.
   Pour retirer : ces règles ET la balise <img class="logo-pwo">. */
.masthead .logo-pwo{
  display:block;height:auto;margin:0 auto 1.3rem;
  width:min(340px,74vw);
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:0 0 22px rgba(5,217,232,.18),0 10px 30px rgba(0,0,0,.55);
}
@media(max-width:900px){
  .masthead .logo-pwo{width:min(268px,68vw);margin-bottom:1rem}
}

/* ── TITRE PWOGAMWEUR — taille -30 % et dégradé rouge → jaune feuille ────────
   Taille d'origine : clamp(2rem,8vw,4.4rem). Chaque borne est réduite de 30 %.
   Le halo cyan/magenta d'origine est retiré : text-shadow se peindrait derrière
   des glyphes rendus transparents par background-clip:text et salirait le
   dégradé. Il est remplacé par un drop-shadow chaud, compatible avec lui.
   Le @supports garantit un repli en orange plein si background-clip:text
   n'est pas géré — sans lui, -webkit-text-fill-color effacerait le titre. */
.masthead h1{
  font-size:clamp(1.4rem,5.6vw,3.08rem);
  color:var(--auto-orange);
  text-shadow:none;
  filter:drop-shadow(0 0 10px rgba(255,120,20,.5)) drop-shadow(0 0 26px rgba(255,60,10,.32));
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .masthead h1{
    background-image:linear-gradient(180deg,#ff2d1a 0%,#ff6a15 42%,#ffb42e 74%,#ffe27a 100%);
    -webkit-background-clip:text;
            background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

/* ── CHAT EN DIRECT (style Twitch) ──────────────────────────────────────────
   Mise en forme « fenêtre de discussion » : rectangle vertical à contour néon,
   en-tête avec pastille, zone de messages, barre de saisie en pied.
   Ces règles ont été écrites le 26/08/2026 quand le chat était remonté dans
   l'en-tête. Elles étaient alors préfixées .masthead — préfixe RETIRÉ le
   27/08/2026, quand le chat est redescendu dans la colonne droite du corps de
   page (BLOC 07). Elles ne dépendent donc plus de l'endroit où vit le bloc :
   déplacer la <section class="chat-tw"> ne demande plus rien ici.
   La hauteur de la zone de messages vient de --live-h (fin de feuille), partagée
   avec la webcam pour que les deux fenêtres soient exactement alignées. */
.chat-tw{
  width:100%;
  text-align:left;
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(10,1,24,.86);
  border:2px solid var(--auto-orange);
  border-radius:12px;
  box-shadow:0 0 14px rgba(255,140,26,.42),0 0 34px rgba(255,140,26,.2),
             inset 0 0 18px rgba(255,140,26,.07);
}
.chat-tw .chat-tw-head{
  display:flex;align-items:center;gap:.45rem;padding:.5rem .7rem;
  border-bottom:1px solid rgba(255,140,26,.45);
  background:linear-gradient(180deg,rgba(255,140,26,.17),transparent);
  font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--auto-orange);
}
.chat-tw .dot{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--auto-orange);box-shadow:0 0 8px var(--auto-orange);
}
.chat-tw .chat-tw-body{
  height:var(--live-h);overflow:hidden;padding:.6rem .7rem;
  font-size:.68rem;line-height:1.45;color:var(--txt-soft);
}
/* Placeholder rayé, même langage visuel que les .frame .ph du reste de la
   maquette, pour que la zone se lise comme un emplacement réservé. */
.chat-tw .chat-tw-body .ph{
  display:flex;align-items:center;justify-content:center;text-align:center;
  height:100%;padding:.6rem;border-radius:8px;
  background:repeating-linear-gradient(45deg,#0d0320 0 10px,#12052b 10px 20px);
}
.chat-tw .chat-tw-foot{
  display:flex;align-items:center;gap:.4rem;padding:.5rem .55rem;
  border-top:1px solid rgba(255,140,26,.35);
}
.chat-tw .chat-tw-input{
  flex:1;min-width:0;padding:.34rem .55rem;border-radius:6px;
  border:1px solid rgba(255,140,26,.35);background:rgba(255,255,255,.04);
  font-size:.66rem;color:var(--txt-soft);
}
.chat-tw .chat-tw-send{
  flex:0 0 auto;padding:.34rem .62rem;border-radius:6px;
  background:var(--auto-orange);color:#1b0d00;font-size:.66rem;font-weight:800;
}
/* Plus de hauteur mobile a part depuis le 27/08/2026 : la fenetre doit rester
   exactement alignee sur la webcam a toutes les largeurs, et c'est --live-h,
   et lui seul, qui pilote les deux. */

/* ── EN-TÊTE SUR DEUX COLONNES ──────────────────────────────────────────────
   Gauche : la fenêtre de chat, en largeur fixe pour qu'elle garde des
   proportions de fenêtre de discussion quelle que soit la largeur d'écran.
   Droite : la photo logo, le titre calé dessous, la baseline et le pitch.
   align-items:start évite que la colonne courte s'étire sur la hauteur de
   l'autre. La nav reste hors grille, en pleine largeur sous les deux. */
.masthead .head-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:1.8rem;align-items:start;
}
.masthead .head-main{min-width:0;text-align:center}
/* Le logo perd sa marge basse : le titre doit venir se caler juste dessous. */
.masthead .head-main .logo-pwo{margin-bottom:.55rem}
@media(max-width:900px){
  /* Une seule colonne, et le titre passe AVANT le chat. */
  .masthead .head-grid{grid-template-columns:1fr;gap:1.3rem}
  .masthead .head-main{order:1}
}

/* ── MODULES ACTUS TECH & GAMING ────────────────────────────────────────────
   Avant : deux cartes .mod strictement identiques, même pastille cyan, aucun
   repère de date, empilées l'une sous l'autre. Rien ne distinguait l'actu tech
   de l'actu gaming, ni ces deux cartes des cartes serveur du reste de la page.
   Après : chaque module porte sa propre couleur via --news-accent, qui pilote
   d'un seul coup le filet latéral, la pastille, le halo du titre et le survol.
   Changer la couleur d'un module = changer cette seule variable.             */
/* Empilés, jamais côte à côte : demandé le 26/08/2026, gaming au-dessus de
   tech. L'auto-fit d'origine les mettait sur deux colonnes dès que la place
   le permettait, ce qui rendait tout ordre haut/bas impossible à tenir. */
.stack{grid-template-columns:1fr;align-items:start}
.mod--news{
  position:relative;overflow:hidden;
  padding-left:1.45rem;
  display:flex;flex-direction:column;
}
/* Filet vertical coloré : le repère qui identifie le module au premier coup d'œil. */
.mod--news::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--news-accent);box-shadow:0 0 12px var(--news-glow);
}
.mod--news .news-top{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-bottom:.55rem;
}
.mod--news .tag{
  margin-bottom:0;
  color:var(--news-accent);border-color:var(--news-glow);
  background:var(--news-bg);
}
.mod--news .news-date{
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-soft);
}
.mod--news h3{
  display:flex;align-items:center;gap:.5rem;
  text-shadow:0 0 10px var(--news-glow);
}
.mod--news .news-ico{font-size:1.05rem;line-height:1;filter:drop-shadow(0 0 6px var(--news-glow))}
.mod--news .news-more{
  margin-top:auto;padding-top:.85rem;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;color:var(--news-accent);
}
/* Le survol reprend la couleur du module au lieu du cyan systématique. */
.mod--news:hover{border-color:var(--news-accent);box-shadow:0 0 20px var(--news-glow)}
.mod--tech  {--news-accent:#05d9e8;--news-glow:rgba(5,217,232,.3);--news-bg:rgba(5,217,232,.12)}
.mod--gaming{--news-accent:#ff2e97;--news-glow:rgba(255,46,151,.3);--news-bg:rgba(255,46,151,.12)}

/* ── BLOCS ARCHIVES / QUI EST PWOGAMWEUR EN COLONNE ÉTROITE ─────────────────
   Ces deux blocs étaient des .section pleine largeur en bas de page. Remontés
   dans la colonne gauche à la place de la boutique, ils sont réduits : titres,
   textes et rembourrage descendus d'un cran pour tenir dans 35 % de largeur
   sans écraser les blocs voisins. */
.blk--compact .blk-head h2{font-size:clamp(.95rem,2.3vw,1.08rem)}
.blk--compact .mod{padding:.85rem .95rem}
.blk--compact .mod h3{font-size:.9rem}
.blk--compact .mod p{margin-top:.45rem;font-size:.75rem;line-height:1.5}
.blk--compact .mod p + p{margin-top:.5rem}
.blk--compact .tag{font-size:.58rem}

/* ── BLOC 12 « QUI EST PWOGAMWEUR ? » — FORMAT RECTANGLE ALLONGÉ ───────────
   Ajouté le 31/08/2026 avec le déplacement du bloc en colonne gauche, sous le
   BLOC 05 (voir le BLOC 12 dans le corps de page).

   ⚠ CE GROUPE NE POSE QUE DE LA MISE EN PAGE ET DES TAILLES. Aucune couleur,
   bordure, ombre, police ni fond n'y figure : la carte garde très exactement
   l'habillage .mod de la charte, contour néon compris.

   AVANT : deux cartes hautes (« Le parcours » et « Où me retrouver ») posées
   dans une grille .mods, qui allongeait le bloc vers le bas.
   APRÈS : UNE seule carte large et basse. Les paragraphes se resserrent et le
   pied « Où me retrouver » passe sur une ligne, titre et liens côte à côte —
   c'est ce qui fait tomber la hauteur.                                        */
.who--long{display:flex;flex-direction:column}
.who--long > p{margin-top:.4rem}
.who-links{
  margin-top:.8rem;padding-top:.7rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .55rem;
}
.who-links h3{margin:0}
.who-links p{margin:0}
/* La note de chantier est une phrase entière : elle reprend toute la ligne. */
.who-links p:last-child{flex:1 0 100%;margin-top:.35rem}

/* ── CONTOUR NÉON « FEUILLE D'AUTOMNE » SUR TOUS LES MODULES ────────────────
   Demandé le 26/08/2026 : un encadrement unique pour TOUS les modules de la
   page de rentrée, au lieu des trois couleurs qui coexistaient (cyan par
   défaut, magenta pour .mod--accent, jaune citron pour .mod--neon, orange
   pour le chat).

   On reprend la recette déjà écrite plus haut pour .mod--neon (accès serveurs)
   — bordure fine + halo externe en deux couches + léger halo interne — et on
   l'étend à .stat, .mod (toutes variantes) et .chat-tw.

   UN SEUL RÉGLAGE : --auto-jaune ci-dessous change la teinte partout.
   --auto-jaune-rgb doit rester les MÊMES composantes, en décimal, parce que
   rgba() ne sait pas découper un #hex passé par une variable.

   Statique par choix, comme .mod--neon : aucune animation, et le survol ne
   change que l'intensité du halo. Le léger soulèvement des .mod au survol est
   conservé tel quel (on ne touche ni à transform ni au fond).

   POUR REVENIR EN ARRIÈRE : supprimer ce groupe de règles. Les couleurs
   d'origine (cyan / magenta / citron / orange) réapparaissent telles quelles,
   rien d'autre n'a été modifié ailleurs dans le fichier.                      */
:root{
  --auto-jaune:#ffc63d;          /* jaune feuille d'automne */
  --auto-jaune-rgb:255,198,61;   /* mêmes composantes, pour les rgba() */
}
.stat,
.mod,
.mod--accent,
.mod--neon,
.mod--news{
  border:1px solid var(--auto-jaune);
  box-shadow:
    0 0 7px rgba(var(--auto-jaune-rgb),.50),
    0 0 22px rgba(var(--auto-jaune-rgb),.26),
    inset 0 0 14px rgba(var(--auto-jaune-rgb),.09);
}
/* Survol : même teinte, halo un cran plus présent. Ces sélecteurs doivent
   exister car .mod:hover, .mod--neon:hover et .mod--news:hover sont déjà
   déclarés plus haut et l'emporteraient sinon (spécificité 0,2,0). */
.mod:hover,
.mod--accent:hover,
.mod--neon:hover,
.mod--news:hover{
  border-color:var(--auto-jaune);
  box-shadow:
    0 0 10px rgba(var(--auto-jaune-rgb),.62),
    0 0 30px rgba(var(--auto-jaune-rgb),.34),
    inset 0 0 16px rgba(var(--auto-jaune-rgb),.11);
}
/* Le chat garde son trait de 2 px : c'est la fenêtre vedette de l'en-tête,
   elle doit rester un cran au-dessus des autres modules. Seule la couleur
   change (orange -> jaune feuille). */
.chat-tw{
  border:2px solid var(--auto-jaune);
  box-shadow:
    0 0 14px rgba(var(--auto-jaune-rgb),.44),
    0 0 34px rgba(var(--auto-jaune-rgb),.22),
    inset 0 0 18px rgba(var(--auto-jaune-rgb),.08);
}
/* Les repères internes du chat suivent la même teinte pour ne pas jurer. */
.chat-tw .dot{background:var(--auto-jaune);box-shadow:0 0 8px var(--auto-jaune)}
.chat-tw .chat-tw-head{color:var(--auto-jaune)}


/* ── CONTOURS SECONDAIRES — TOUT EN JAUNE FEUILLE MORTE ─────────────────────
   Demandé le 26/08/2026, dans la foulée du groupe précédent. Celui-ci ne
   traitait que le contour EXTÉRIEUR des modules (.stat / .mod / .chat-tw).
   Restaient donc en cyan : le cadre de la photo logo, et TOUS les traits fins
   de l'intérieur — lignes serveur, fiches produit, vignettes, cadres 16:9,
   boutons de la navigation, pastilles, champs, filets de séparation. Et le
   chat gardait encore ses traits internes orange. La page mélangeait toujours
   trois teintes ; il n'en reste plus qu'une.

   ON NE TOUCHE QU'À DES COULEURS DE TRAIT : aucune épaisseur, aucun rayon,
   aucune géométrie n'est modifiée (d'où border-color: et jamais border:).
   Le pointillé de .item .vig est conservé tel quel, il change juste de teinte.

   Deux intensités, toutes deux déduites de --auto-jaune-rgb, pour garder une
   hiérarchie lisible : sans elle, un trait de sous-carte pèserait autant que
   le contour du module qui le contient.
     --auto-jaune-trait : sous-cartes et cadres    (le trait se voit)
     --auto-jaune-filet : simples séparateurs      (volontairement plus pâle)
   Changer --auto-jaune plus haut repeint donc encore l'ensemble d'un coup.

   POUR REVENIR EN ARRIÈRE : supprimer ce groupe de règles. Les traits cyan
   (--line / --line-soft), le cadre cyan du logo et les traits orange du chat
   réapparaissent tels quels, rien d'autre n'a été modifié ailleurs.          */
:root{
  --auto-jaune-trait:rgba(var(--auto-jaune-rgb),.55);
  --auto-jaune-filet:rgba(var(--auto-jaune-rgb),.28);
}

/* Photo logo : le cadre cyan passe au jaune et reçoit le halo à deux couches
   des modules, pour qu'il se lise comme l'un d'eux et non comme une pièce
   rapportée. L'ombre portée noire est CONSERVÉE : c'est elle qui décolle la
   vignette de la photo de fond. */
.masthead .logo-pwo{
  border-color:var(--auto-jaune);
  box-shadow:
    0 0 7px rgba(var(--auto-jaune-rgb),.50),
    0 0 22px rgba(var(--auto-jaune-rgb),.26),
    0 10px 30px rgba(0,0,0,.55);
}

/* Sous-cartes et cadres : lignes serveur (BLOC 05), fiches produit et étapes
   de commande (boutique.html), vignettes produit, cadres 16:9 (webcam),
   boutons de la navigation, pastilles, listes déroulantes.
   .mod:not(.mod--news) .tag : les modules d'actu gardent leur pastille de
   couleur (cyan pour la tech, magenta pour le gaming) — c'est leur repère
   d'identité, pas un contour. Idem pour .srv .st (« en ligne ») qui reste
   vert : c'est un état, pas de la décoration. */
.nav a,
.frame,
.srv,
.item,
.item .vig,
.item .var select,
.flow li,
.buy,
.mod:not(.mod--news) .tag{
  border-color:var(--auto-jaune-trait);
}
/* Survol de la nav : même bascule cyan -> jaune que les modules. */
.nav a:hover,.nav a:focus-visible{
  border-color:var(--auto-jaune);
  box-shadow:0 0 14px rgba(var(--auto-jaune-rgb),.55);
}

/* Filets de séparation : note en pied de module, chronologie, pied de page. */
.note,
.foot{border-top-color:var(--auto-jaune-filet)}
.timeline li{border-left-color:var(--auto-jaune-filet)}
/* Dernier point de la chronologie : le filet doit rester invisible. */
.timeline li:last-child{border-left-color:transparent}

/* Chat de l'en-tête : ses traits internes étaient restés orange alors que son
   contour était déjà passé au jaune. */
.chat-tw .chat-tw-head{
  border-bottom-color:rgba(var(--auto-jaune-rgb),.45);
  background:linear-gradient(180deg,rgba(var(--auto-jaune-rgb),.17),transparent);
}
.chat-tw .chat-tw-foot{border-top-color:rgba(var(--auto-jaune-rgb),.35)}
.chat-tw .chat-tw-input{border-color:rgba(var(--auto-jaune-rgb),.35)}
.chat-tw .chat-tw-send{background:var(--auto-jaune)}

/* ── WEBCAM TOKYO EN DIRECT — HAUTEUR DU LECTEUR ────────────────────────────
   Le BLOC 08 n'était plus un emplacement réservé depuis le 26/08/2026 : il
   charge un vrai lecteur YouTube. Or il héritait de --mini-h (88 px), la
   hauteur prévue quand le bloc n'était qu'un placeholder apparié au chat dans
   le .duo — un direct de 88 px de haut ne se regarde pas.
   Le chat ayant été remonté dans l'en-tête, le .duo ne contient plus que la
   webcam : plus rien n'oblige à s'aligner sur --mini-h, qui reste en place
   pour d'éventuels autres blocs compacts.

   DEPUIS LE 27/08/2026 la caméra est en COLONNE DROITE (≈65 %), en 4e et
   dernière place, appariée au chat. La colonne étant large, c'est la hauteur qui
   contraint et non plus la largeur : on laisse le
   ratio 16/9 (déjà posé sur .frame--cam plus haut) calculer la hauteur, et on
   se contente de plafonner la LARGEUR pour que la hauteur obtenue ne dépasse
   jamais --cam-h. D'où le min() : jamais plus large que la colonne, jamais
   plus haut que --cam-h, et le ratio est respecté dans les deux cas — ce qu'un
   max-height ne saurait pas faire (il écraserait l'image).
   ⚠ CE PARAGRAPHE EST DE L'HISTORIQUE depuis le 31/08/2026 : --cam-h n'existe
   plus, c'est maintenant la LARGEUR qui est imposee et la hauteur qui est
   deduite. Voir « RECTANGLE ALLONGE, PLEINE LARGEUR DE COLONNE » plus bas. */
/* 300px -> 250px le 26/08/2026 : la caméra montait trop haut et venait
   toucher la rangée d'onglets juste au-dessus.
   250px -> 200px le 27/08/2026 (matin) : fenêtre réduite à la demande.
   200px -> var(--live-h) le 27/08/2026 : la webcam doit faire EXACTEMENT la
   hauteur de la zone de messages du chat. Les deux ne se règlent donc plus
   séparément — une seule variable les pilote, voir --live-h en fin de feuille.
   --cam-up : REMONTÉE du bloc webcam, marge haute NÉGATIVE posée sur le .duo
   #live. Elle valait .7rem quand le .duo ouvrait la colonne gauche sous la barre
   de stats. Le .duo étant maintenant en BAS de la colonne droite, elle n'a plus
   d'objet et vaut 0. La règle #live est laissée en place, sans effet : y
   remettre une valeur suffit à la réactiver. */
/* 31/08/2026 — FENETRE REDUITE DE 17 % (demande : « environ 15-20 % de moins »,
   la camera debordait visuellement). Le ratio 16/9 est INTACT : --cam-h ne
   pilote que la hauteur, .frame--cam en deduit la largeur, donc l'image se
   reduit sans jamais s'ecraser. 127px -> 105px de haut, 226px -> 187px de large.

   POURQUOI UN RATIO ET PAS UNE VALEUR EN DUR : --cam-h restait ainsi derive de
   --live-h, qui garde son role de reglage unique. Revenir a une camera alignee
   au pixel sur le chat = remettre --cam-ratio a 1. C'est le seul reglage.

   CE QUE CELA CHANGE POUR L'APPARIEMENT : la camera n'est plus EXACTEMENT de la
   hauteur de la zone de messages du chat (c'etait la regle du 27/08/2026), elle
   fait 83 % de celle-ci. Les deux BLOCS, eux, restent parfaitement a la meme
   hauteur — c'est le .duo #live (grid-auto-rows:1fr) qui s'en charge — et
   .frame--cam{align-self:center} centre la fenetre dans la hauteur restante.
   L'alignement visible des deux cadres est donc conserve.

   RESPONSIVE : rien a reprendre. Sous 1024px le .layout repasse en 1fr et la
   largeur de .frame--cam est un min(100%, …) — la camera ne peut pas depasser
   son conteneur, et 187px tient sur le plus etroit des telephones.

   Historique de la valeur :
   200px -> var(--live-h) le 27/08/2026 : la webcam doit faire EXACTEMENT la
   hauteur de la zone de messages du chat, avec lequel elle est appariee.
   --cam-up passe a 0 : la remontee negative n'avait de sens que quand la camera
   ouvrait la colonne gauche sous la barre de stats. La regle #live est laissee
   en place, sans effet, pour qu'un simple changement de valeur la reactive. */
:root{--cam-up:0rem}
/* 31/08/2026 — RECTANGLE ALLONGÉ, PLEINE LARGEUR DE COLONNE.
   La camera n'est plus appariee au chat : elle est passee en colonne gauche,
   sous « Qui est Pwogamweur ? », et doit faire la MEME LARGEUR que les deux
   modules au-dessus. On impose donc la largeur (100 % de la colonne) et on
   laisse aspect-ratio:16/9 calculer la hauteur — l'inverse exact de ce qui se
   faisait quand c'etait la hauteur qui etait contrainte.
   PAS D'ETIREMENT POSSIBLE : une seule dimension est imposee, l'autre est
   deduite. align-self:center devient sans objet et cede la place a stretch.
   PLAFONNER LA HAUTEUR, si un jour elle gene : remettre une largeur maximale,
   width:min(100%,calc(HAUTEUR * 16 / 9)) — le ratio reste tenu dans les deux
   cas, ce qu'un max-height ne saurait pas faire (il ecraserait l'image).
   --cam-h et --cam-ratio ont ete retires : plus aucune regle ne s'en servait. */
.frame--cam{align-self:stretch;width:100%;max-width:100%;height:auto}
#live{margin-top:calc(-1 * var(--cam-up))}
/* Lien de repli sous le lecteur (chaîne hors ligne, lecteur bloqué). */
.cam-alt{margin-top:.4rem;font-size:.66rem;line-height:1.4;color:var(--txt-soft)}
.cam-alt a{color:var(--auto-jaune);text-decoration:none;font-weight:700}
.cam-alt a:hover,.cam-alt a:focus-visible{text-decoration:underline}

/* ── WEBCAM : FAÇADE CLIC-POUR-LIRE ─────────────────────────────────────────
   AJOUTÉ LE 03/09/2026 À LA BASCULE EN PRODUCTION. Le bouton occupe exactement
   la place de l'iframe (.frame > * est déjà en position:absolute;inset:0), donc
   la géométrie du bloc ne bouge pas d'un pixel entre avant et après le clic —
   rien à recalculer, aucune secousse de mise en page.
   Pas de vignette distante : une miniature YouTube serait, elle aussi, une
   requête vers un serveur tiers. Le fond est donc peint en CSS. */
.cam-consent{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;padding:1rem;text-align:center;cursor:pointer;
  font:inherit;color:var(--txt);border:0;
  background:radial-gradient(circle at 50% 42%,rgba(165,55,253,.28),transparent 62%),
             repeating-linear-gradient(45deg,#0b0320 0 12px,#110629 12px 24px);
  transition:box-shadow .18s,transform .18s}
.cam-consent:hover,.cam-consent:focus-visible{
  outline:none;box-shadow:inset 0 0 0 2px var(--auto-jaune-trait),0 0 16px rgba(255,176,32,.25)}
.cam-consent .cam-ico{
  display:flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:50%;
  font-size:1rem;line-height:1;color:#1b0d00;background:var(--auto-jaune);
  box-shadow:0 0 14px rgba(var(--auto-jaune-rgb),.55)}
.cam-consent .cam-lab{font-size:.82rem;font-weight:800;letter-spacing:.06em;color:#fff}
.cam-consent .cam-sub{max-width:34ch;font-size:.63rem;line-height:1.45;color:var(--txt-soft)}
@media(max-width:600px){.cam-consent .cam-sub{display:none}}


/* ── ARCHIVES DES ACTUS (BLOC 11) — INTITULÉS DE MOIS ───────────────────────
   Ajouté le 27/08/2026, quand l'archive est passée de « proposition » à un vrai
   contenu. Les fiches réutilisent .mod--news / .mod--gaming / .mod--tech : même
   pastille, même couleur d'accent et même liseré que les actus des BLOCS 06A et
   06B (la section « Actus du mois » a été éclatée en deux le 27/08/2026), donc
   rien de neuf à maintenir de ce côté. Seuls les intitulés de mois et le chapô
   ont besoin de règles à eux — c'est tout ce qu'il y a ici.
   Ajouter un mois = un .arch-group de plus dans le HTML, rien à écrire ici.   */
.arch-lead{margin:0 0 1.5rem;max-width:64ch;font-size:.8rem;line-height:1.6;color:var(--txt-soft)}
.arch-group{margin-bottom:1.9rem}
.arch-group:last-child{margin-bottom:0}
.arch-month{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.9rem}
.arch-month h3{font-size:.9rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff}
.arch-month .hint{font-size:.72rem;color:var(--txt-soft)}
.arch-month::after{content:"";flex:1;height:1px;min-width:1.5rem;background:linear-gradient(90deg,var(--mag),transparent)}

/* ── RÉSEAUX SOCIAUX SOUS LE TITRE ──────────────────────────────────────────
   Rangée de pastilles rondes sous PWOGAMWEUR, à la place du pitch supprimé le
   26/08/2026. Icônes en SVG INLINE, pas de police d'icônes ni de CDN.
   ⚠ 03/09/2026 — CE N'EST PLUS VRAI : le lecteur YouTube du BLOC 08 a été
   rebranché, la page contacte donc youtube-nocookie.com à l'affichage. Ces
   icônes-ci restent en SVG inline et ne coûtent toujours aucune requête.
   Les glyphes sont peints en currentColor, donc la couleur du lien suffit à
   tout piloter — y compris l'inversion au survol (fond jaune, glyphe sombre).
   Ajouter un réseau : un <a> de plus dans la rangée, rien à écrire ici.      */
.rs{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:1rem}
.rs a{
  display:flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:50%;
  color:var(--auto-jaune);
  border:1px solid var(--auto-jaune-trait);
  background:var(--panel);
  box-shadow:0 0 8px rgba(var(--auto-jaune-rgb),.22);
  transition:transform .15s,box-shadow .15s,border-color .15s,color .15s,background .15s;
}
.rs a:hover,.rs a:focus-visible{
  transform:translateY(-2px);
  color:#1b0d00;background:var(--auto-jaune);border-color:var(--auto-jaune);
  box-shadow:0 0 16px rgba(var(--auto-jaune-rgb),.65);outline:none;
}
.rs svg{width:1.15rem;height:1.15rem;display:block;fill:currentColor}
/* Note de chantier sous la rangée : elle vivait jusqu'au 27/08/2026 dans un
   commentaire HTML, donc invisible à l'écran et hors de portée d'un grep
   note-dev. Elle est remontée en clair, comme toutes les autres. */
.rs-note{margin-top:.6rem;font-size:.7rem;line-height:1.5}
@media(max-width:680px){
  .rs a{width:2.15rem;height:2.15rem}
  .rs svg{width:1.02rem;height:1.02rem}
}
@media(prefers-reduced-motion:reduce){
  .rs a{transition:none}
  .rs a:hover{transform:none}
}

/* ── FILET DES TITRES DE SECTION — NÉON FEUILLE MORTE ───────────────────────
   La longue ligne qui prolonge « Accès serveurs / connexion directe via Steam »
   (et tous les autres titres) était le dernier trait magenta de la page.
   Elle passe au jaune, en dégradé qui s'éteint vers la droite.
   drop-shadow et NON box-shadow : drop-shadow suit le canal alpha, le halo
   s'éteint donc en même temps que le dégradé. Un box-shadow, lui, aurait
   éclairé uniformément toute la longueur, y compris la partie transparente —
   on aurait vu une barre lumineuse là où la ligne a justement disparu.       */
.section-head::after,
.blk-head::after{
  height:2px;
  background:linear-gradient(90deg,
    var(--auto-jaune) 0%,
    rgba(var(--auto-jaune-rgb),.55) 40%,
    rgba(var(--auto-jaune-rgb),0) 100%);
  filter:drop-shadow(0 0 4px rgba(var(--auto-jaune-rgb),.55));
}

/* ── FLOU DU FOND ───────────────────────────────────────────────────────────
   Demandé le 26/08/2026 : la photo de fond est de qualité moyenne et ses
   pixels se voyaient une fois étalés en cover. Le flou les noie.

   On NE PEUT PAS poser filter:blur() sur <body> : le filtre s'appliquerait
   aussi à tout le contenu de la page, texte compris. L'image est donc sortie
   de <body> et confiée à une couche à elle, body::before, qui est la seule
   à porter le flou.

   Empilement (inchangé par ailleurs) :
     body::before  z-index 0  — la photo, floutée      ← nouvelle couche
     .sky          z-index 0  — le voile sombre        ← passe AU-DESSUS car
                                                         .sky vient après le
                                                         pseudo-élément dans
                                                         l'ordre de peinture
     .page         z-index 2  — le contenu

   scale(1.1) : un flou va chercher des pixels au-delà du bord de l'élément,
   qui n'existent pas — sans agrandissement on verrait un liseré délavé sur
   les quatre côtés. On déborde donc légèrement du cadre.

   position:fixed remplace le background-attachment:fixed d'origine, et rend
   du même coup inutile la parade iOS (@media max-width:1023px plus haut) :
   c'est le bug que cette règle contournait qui n'existe plus ici.

   UN SEUL RÉGLAGE : --bg-flou. 0px annule le flou sans rien casser.          */
:root{--bg-flou:8px}
body{background-image:none}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("/images/bg-rentree.jpg") center top/cover no-repeat;
  filter:blur(var(--bg-flou));
  transform:scale(1.1);
}
@media(max-width:900px){
  body::before{background-image:url("/images/bg-rentree-mob.jpg")}
}


/* ── EN-TÊTE : TROISIÈME COLONNE « ÉVÉNEMENTS » ─────────────────────────────
   L'en-tête passe de 2 à 3 colonnes le 26/08/2026 : chat | titre | événements.
   La colonne des événements est étroite (240px) et fixe ; c'est la colonne du
   milieu qui absorbe la différence, elle seule est en minmax(0,1fr).
   Deux paliers avant l'empilement complet, parce que trois colonnes ne tiennent
   pas jusqu'en bas :
     ≤1180px  les événements repassent en pleine largeur SOUS l'en-tête, mais
              chat et titre restent côte à côte ;
     ≤900px   tout s'empile (règle déjà existante), et order:3 place les
              événements en dernier, après le titre puis le chat.             */
.masthead .head-aside{min-width:0;text-align:left;display:grid;gap:var(--gap);align-content:start}
.masthead .head-aside .mod{padding:.9rem 1rem}
.masthead .head-aside h3{font-size:.92rem}
.masthead .head-aside p{margin-top:.45rem;font-size:.76rem;line-height:1.5}
.masthead .head-aside .note{margin-top:.7rem;padding-top:.6rem;font-size:.68rem}
/* ⚠ Les deux règles de colonnes sont bornées PAR LE BAS (min-width:901px).
   Sans cette borne elles écraseraient la mise en une colonne du palier 900px :
   ce groupe est en fin de feuille, donc PLUS TARD dans la cascade, et à
   spécificité égale c'est la dernière déclaration qui gagne — le mobile serait
   resté sur plusieurs colonnes. Bornées ainsi, elles ne s'appliquent tout
   simplement plus en dessous de 901px et la règle d'origine reprend la main. */
@media(min-width:1181px){
  .masthead .head-grid{grid-template-columns:minmax(0,1fr) var(--aside-w)}
}
@media(min-width:901px) and (max-width:1180px){
  .masthead .head-grid{grid-template-columns:minmax(0,1fr)}
  .masthead .head-aside{grid-column:1/-1}
}
@media(max-width:900px){
  .masthead .head-aside{order:3}
}

/* ── ACCÈS SERVEURS RESSERRÉ ────────────────────────────────────────────────
   Le bloc descend sous la webcam, dans la colonne étroite : à sa taille
   d'origine il faisait à lui seul plus de deux fois la hauteur de la caméra.
   Tout est réduit d'un cran — rembourrage, interlignes, corps de texte — sans
   rien retirer : les trois serveurs, la commande console et l'avertissement
   Steam restent tous affichés. Sélecteurs en #serveurs pour ne toucher que ce
   bloc : les mêmes classes .srv servaient ailleurs avant, elles pourraient
   resservir.                                                                 */
#serveurs .mod{padding:.8rem .85rem}
#serveurs .srv-list{gap:.35rem}
#serveurs .srv{padding:.35rem .48rem;gap:.12rem .45rem}
#serveurs .srv .nm{font-size:.76rem}
#serveurs .srv .st{font-size:.52rem;padding:.08rem .35rem}
#serveurs .srv .go{padding:.24rem .62rem;font-size:.66rem}
#serveurs .srv .cmd{font-size:.58rem}
#serveurs .note{font-size:.65rem;margin-top:.6rem;padding-top:.55rem}


/* ── RUBRIQUE DON ───────────────────────────────────────────────────────────
   Deuxième bloc de la colonne droite de l'en-tête, sous les événements.
   .head-aside est passé en grid pour que l'écart entre les deux blocs soit le
   même --gap que partout ailleurs, sans marge à écrire ici.
   Le sigle PayPal est calé à DROITE du titre par un simple space-between.    */
.don-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.pp-logo{
  flex:0 0 auto;width:1.45rem;height:1.45rem;fill:var(--auto-jaune);
  filter:drop-shadow(0 0 6px rgba(var(--auto-jaune-rgb),.45));
}
.don-btn{
  display:block;margin-top:.75rem;padding:.5rem .7rem;border-radius:8px;
  text-align:center;font-size:.76rem;font-weight:800;letter-spacing:.03em;
  text-decoration:none;color:#1b0d00;
  background:linear-gradient(90deg,var(--auto-jaune),#ffa62e);
  box-shadow:0 0 12px rgba(var(--auto-jaune-rgb),.45);
  transition:transform .15s,box-shadow .15s;
}
.don-btn:hover,.don-btn:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 0 20px rgba(var(--auto-jaune-rgb),.65);outline:none;
}
/* Version non branchée : contour pointillé, teinte éteinte, aucun relief —
   il doit se lire comme un emplacement réservé, pas comme un bouton en panne.
   C'est un <span> : rien à survoler, rien à cliquer, rien à annoncer aux
   lecteurs d'écran comme un lien.                                            */
.don-btn--off{
  background:rgba(var(--auto-jaune-rgb),.07);
  color:var(--txt-soft);font-weight:700;
  border:1px dashed var(--auto-jaune-trait);
  box-shadow:none;cursor:not-allowed;opacity:.55;
}
@media(prefers-reduced-motion:reduce){
  .don-btn{transition:none}
  .don-btn:hover{transform:none}
}


/* ── REORGANISATION DU 27/08/2026 — DISPOSITION EN DEUX COLONNES ────────────
   Dernier groupe de la feuille : il n'ajoute que ce qui manquait a la nouvelle
   disposition. Les quelques valeurs corrigees sur place plus haut sont signalees
   a leur emplacement (--live-h, .head-grid, .don-btn--off).

   DISPOSITION RETENUE
     colonne gauche (35 %)   1. Acces serveurs   2. Qui est Pwogamweur ?
                             3. Webcam       (Boutique masquee le 31/08/2026)
     colonne droite (65 %)   1. Info Tech    2. Info gaming    3. Chat

   TABLETTE ET MOBILE : .layout repasse en 1fr (regle deja ecrite plus haut,
   « RESPONSIVE — LAYOUT 2 COLONNES »), et l'ordre du DOM donne alors exactement
   Acces serveurs -> Qui est Pwogamweur ? -> Webcam -> Info Tech -> Info Gaming
   -> Chat.
   Aucune regle de reordonnancement n'est ecrite nulle part : deplacer un bloc
   dans le HTML suffit a deplacer sa position mobile.                          */

/* Hauteur commune au chat et a la webcam. C'est LE reglage qui garantit que les
   deux fenetres etaient a la meme hauteur. DEPUIS LE 31/08/2026 la camera est
   partie en colonne gauche : --live-h ne regle donc plus QUE le chat, et le
   .duo #live n'a plus qu'un seul enfant.
   380px -> 127px le 27/08/2026, soit le tiers demande. */
:root{--live-h:127px}

/* ── EMPLACEMENT PUBLICITAIRE ───────────────────────────────────────────────
   Ajouté le 31/08/2026 avec le bloc #pub de l'en-tête.
   ⚠ MISE EN PAGE ET TAILLES UNIQUEMENT : aucune couleur, bordure, ombre, police
   ni fond ici — le bloc porte .mod et hérite du contour néon commun, comme tous
   les autres modules de la page.
   Le libellé est centré et espacé : c'est ce qui le fait lire comme un
   emplacement à remplir plutôt que comme du contenu.                          */
.pub-slot{
  display:flex;align-items:center;justify-content:center;
  min-height:64px;padding:.6rem;
  text-align:center;letter-spacing:.14em;font-size:.82rem;
}

/* ── MODULE ARCHIVES EN GRIS FONCÉ NÉON ─────────────────────────────────────
   Ajouté le 31/08/2026. C'est la SEULE entorse assumée à la règle « on ne
   touche pas aux couleurs des modules » — elle est demandée explicitement, et
   elle est ENTIÈREMENT contenue dans ce groupe : le supprimer rend au bloc
   Archives le contour jaune commun, sans rien toucher d'autre.

   L'IDÉE : les archives ne sont pas de l'actualité. Le jaune « feuille
   d'automne » les mettait au même niveau visuel que les actus du mois ; le gris
   néon les fait reculer d'un plan tout en restant dans l'esprit néon du site.

   CE QUI PASSE EN GRIS
     · le cadre de la <section> #archives elle-même — c'est l'encadrement du
       module, il n'existait pas avant, la section n'avait aucune bordure ;
     · le contour néon de TOUTES les cartes qu'elle contient ;
     · le mot « Archives », c'est-à-dire la pastille .tag du module.

   CE QUI NE BOUGE PAS — ET POURQUOI
   Les deux actus archivées de juillet gardent leur filet latéral, leur pastille
   et le halo de leur titre en cyan et magenta. Ces trois éléments viennent de
   --news-accent, pas de la bordure : le gris remplace donc le contour SANS
   toucher au contenu éditorial. C'est voulu — repeindre les actus archivées
   dépasserait « la bordure du module ».

   UN SEUL RÉGLAGE : --arch-gris (et ses composantes rgb, que rgba() ne sait pas
   extraire d'une variable hex).                                              */
:root{
  --arch-gris:#8c93a3;           /* gris foncé néon */
  --arch-gris-rgb:140,147,163;   /* mêmes composantes, pour les rgba() */
}
/* Encadrement du module. Mêmes trois couches de halo que le contour jaune,
   pour rester exactement dans la recette néon de la page. */
#archives{
  border:1px solid var(--arch-gris);
  border-radius:var(--radius);
  padding:1.15rem;
  box-shadow:
    0 0 7px rgba(var(--arch-gris-rgb),.50),
    0 0 22px rgba(var(--arch-gris-rgb),.26),
    inset 0 0 14px rgba(var(--arch-gris-rgb),.09);
}
/* Les cartes intérieures suivent. Le sélecteur est plus spécifique que le
   groupe « feuille d'automne » (0,1,1 + 0,1,0 contre 0,1,0), il l'emporte donc
   sans !important. */
#archives .mod,
#archives .mod--news{
  border-color:var(--arch-gris);
  box-shadow:
    0 0 7px rgba(var(--arch-gris-rgb),.50),
    0 0 22px rgba(var(--arch-gris-rgb),.26),
    inset 0 0 14px rgba(var(--arch-gris-rgb),.09);
}
#archives .mod:hover,
#archives .mod--news:hover{
  border-color:var(--arch-gris);
  box-shadow:
    0 0 10px rgba(var(--arch-gris-rgb),.62),
    0 0 30px rgba(var(--arch-gris-rgb),.34),
    inset 0 0 14px rgba(var(--arch-gris-rgb),.11);
}
/* Le mot « Archives » : la pastille du module. Le :not(.mod--news) épargne les
   pastilles « gaming » et « tech » des deux actus archivées. */
#archives .mod:not(.mod--news) .tag{
  color:var(--arch-gris);
  border-color:rgba(var(--arch-gris-rgb),.55);
  background:rgba(var(--arch-gris-rgb),.12);
  text-shadow:0 0 9px rgba(var(--arch-gris-rgb),.60);
}

/* ── NOTES DE CHANTIER ──────────────────────────────────────────────────────
   TOUT ce qui reste a faire avant la mise en production porte la classe
   .note-dev, et rien d'autre ne la porte. Un seul grep les liste :
       grep -c note-dev index.html
       grep -o 'note-dev">[^<]*' index.html
   Le jour de la mise en production, ce compte doit tomber a zero.
   Fond ambre + pointille : elles ne doivent pas non plus passer inapercues a
   l'ecran. display:inline-block pour qu'une note longue forme son propre bloc
   au lieu de se decouper en morceaux au fil des lignes.                       */
.note-dev{
  display:inline-block;
  padding:.14rem .45rem;
  border:1px dashed rgba(255,190,60,.75);
  border-radius:6px;
  background:rgba(255,176,32,.14);
  color:#ffd98a;
  font-style:normal;
  line-height:1.45;
}
.note-dev::before{content:"\2691\00a0";opacity:.85}

/* ── CHAT : CHAMP DE SAISIE REELLEMENT DESACTIVE ────────────────────────────
   La barre de saisie etait un <span> decoratif. C'est maintenant un vrai
   <input> porteur de l'attribut disabled : le navigateur refuse le focus et la
   frappe, et les lecteurs d'ecran l'annoncent comme indisponible — ce qu'un
   <span> ne savait pas faire. Le bouton d'envoi suit le meme regime.
   POUR BRANCHER LE CHAT : retirer les deux attributs disabled et le placeholder
   de maquette, rien d'autre ici.                                              */
.chat-tw .chat-tw-input,
.chat-tw .chat-tw-send{font:inherit;font-size:.66rem;-webkit-appearance:none;appearance:none}
.chat-tw .chat-tw-input{border-width:1px;border-style:solid}
.chat-tw .chat-tw-send{border:0}
.chat-tw .chat-tw-input:disabled,
.chat-tw .chat-tw-send:disabled{opacity:.55;cursor:not-allowed}
.chat-tw .chat-tw-input::placeholder{color:var(--txt-soft);opacity:.9}

/* ── BOUTIQUE — BLOC PLACEHOLDER (colonne gauche, 1re place) ────────────────
   La grille .shop / .item existait deja dans cette feuille depuis le 23/08/2026
   mais n'etait plus utilisee par personne depuis que la boutique avait quitte
   la page : elle est simplement reprise telle quelle, il n'y a rien de neuf a
   maintenir. Seules les trois reductions ci-dessous sont propres a la colonne
   etroite. Ajouter un produit = un <div class="item"> de plus dans le HTML.  */
#boutique .mod{padding:.8rem .85rem}
#boutique .blk-intro{margin-bottom:.2rem}
#boutique .note{font-size:.68rem;margin-top:.7rem;padding-top:.6rem}
#boutique .note a{color:var(--auto-jaune);font-weight:700;text-decoration:none}
#boutique .note a:hover,#boutique .note a:focus-visible{text-decoration:underline}

/* ── MENTIONS LEGALES (pied de page) ────────────────────────────────────────
   Liste de definitions plutot qu'une suite de paragraphes : chaque rubrique
   obligatoire est ainsi nommee et reperable d'un coup d'oeil, et il devient
   evident laquelle n'est pas encore remplie.
   Le .foot est en text-align:center — d'ou le retour a gauche ici, un pave de
   texte legal centre ne se lit pas.                                           */
.legal{
  max-width:78ch;margin:1.6rem auto 0;padding-top:1.2rem;
  border-top:1px solid var(--auto-jaune-filet);
  text-align:left;
}
.legal h2{
  font-size:.86rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;text-shadow:0 0 8px rgba(var(--auto-jaune-rgb),.45);margin-bottom:.9rem;
}
.legal dl{display:grid;gap:.85rem}
.legal dt{
  font-size:.66rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--auto-jaune);
}
.legal dd{margin-top:.28rem;font-size:.74rem;line-height:1.6;color:var(--txt-soft)}
@media(max-width:680px){
  .legal{margin-top:1.2rem}
}

/* ── BLOC 07 « CHAT EN DIRECT » — COLONNE VERTICALE DE GAUCHE ───────────────
   03/09/2026. Le chat quitte le corps de page (.duo #live, colonne droite) et
   redevient la PREMIÈRE colonne de l'en-tête, dans un <div class="head-side">.
   Aucune couleur, aucune bordure, aucun halo, aucune police ne change : tout le
   style de la fenêtre vient des règles .chat-tw écrites le 26/08/2026 et de la
   « CONTOUR NÉON FEUILLE D'AUTOMNE » qui les repeint en jaune. Ce groupe ne
   pose QUE de la mise en page.

   FORME — UN LONG RECTANGLE DEBOUT : la fenêtre ne prend plus la hauteur de son
   contenu, elle prend --chat-h. C'est la zone de messages (.chat-tw-body) qui
   absorbe toute la place restante entre l'en-tête de la fenêtre et la barre de
   saisie, d'où le flex:1. Le min-height:0 n'est pas décoratif : sans lui, un
   enfant flex refuse de descendre sous la hauteur de son contenu et la fenêtre
   déborderait dès qu'il y a beaucoup de messages.

   HAUTEUR = CELLE DES TROIS MODULES DE DROITE, gouttières comprises. Aucune
   règle CSS ne sait mesurer un autre élément : --chat-h est donc écrit par le
   script en fin de <body>, qui lit la hauteur réelle du .head-aside. La valeur
   posée ici est un REPLI — elle sert avant le premier calcul, sans JavaScript,
   et sous 1181px où la mesure n'aurait pas de sens.

   LARGEUR : --chat-w, une seule valeur à changer. 300px = de quoi lire une
   ligne de message sans rogner la colonne du titre ni celle des modules.

   POUR REVENIR EN ARRIÈRE : redescendre la <section class="chat-tw"> dans un
   .duo #live du corps de page et supprimer ce groupe. Les règles .duo et
   --live-h sont laissées en place, sans usage, pour que ce retour ne demande
   que du HTML.                                                               */
/* ⚠ 03/09/2026 — LARGEURS DE L'EN-TÊTE REVUES (élargissement d'« Événement »).
   « Élargir vers la DROITE » était impossible : mesuré au navigateur, le module
   occupait x=1068 -> 1308 pour un bord droit de .page à 1330, soit 22 px de
   marge — exactement le rembourrage de page. Doubler l'aurait poussé 240 px
   HORS de la page.
   Solution retenue : la colonne droite passe de 240 à 480 px (le double exact),
   la largeur étant prise 60 px sur le chat et le reste sur le bloc central.
     chat    300 -> 240 px
     centre  578 -> 397 px  (le logo garde ses 340 px, il n'est pas contraint)
     aside   240 -> 480 px
   Aucun module ne change de place, aucune hauteur ne bouge, rien ne se
   chevauche. « Faire un don » et « Votre publicité » doublent aussi, puisqu'ils
   partagent la colonne.
   POUR AJUSTER : --chat-w et --aside-w, rien d'autre.                        */
/* ⚠ 480px ABANDONNÉ APRÈS VÉRIFICATION AU RENDU — voir le tableau ci-dessous.
   À 480px la colonne centrale tombait à 398px, or le titre PWOGAMWEUR a une
   largeur intrinsèque de 485px (49,3px de corps, .12em d'interlettrage) : il
   était TRONQUÉ, masqué par le overflow-x:hidden du body. Le doublement exact
   n'est donc pas atteignable sans abîmer quelque chose.

   LA CONTRAINTE, EN CLAIR : .page est plafonné à 1220px, donc au-delà la
   largeur utile est FIXE à 1175px, et il faut la partager entre
   chat + 2 gouttières + centre + aside. Au palier le plus étroit du mode
   3 colonnes (1181px de fenêtre) elle tombe même à 1136px.
     titre intact  =>  centre >= 485px
     centre 485px  =>  aside <= 354px au palier 1181px
   D'où la valeur retenue : 350px, soit x1,46 au lieu de x2.

   POUR ALLER PLUS LOIN, IL FAUT ACCEPTER UNE CONTREPARTIE :
     aside 480px (x2)  + titre réduit à ~40px de corps      -> charte modifiée
     aside 480px (x2)  + chat ramené à 175px                -> chat très étroit
     aside 390px (x1,6)+ mode 3 colonnes seulement >= 1220px -> palier déplacé
   Aucune n'a été appliquée sans validation.
   Rappel : sous 1181px la question ne se pose pas, la colonne passe déjà en
   pleine largeur (785px à 820px de fenêtre, 989px à 1024px).                 */
:root{--chat-w:240px;--chat-h:520px;--aside-w:350px}
.masthead .head-side{min-width:0;text-align:left;display:grid;align-content:start;
  scroll-margin-top:4.5rem}
.masthead .head-side .chat-tw{height:var(--chat-h)}
/* --live-h ne bride plus la zone de messages : elle occupe tout le reste. */
.masthead .head-side .chat-tw .chat-tw-body{height:auto;flex:1;min-height:0;overflow:auto;
  display:flex;flex-direction:column}
/* display:flex sur la zone de messages : le placeholder rayé (.ph, height:100%)
   a besoin d'un parent qui l'étire pour remplir la fenêtre debout. Quand le vrai
   chat sera branché, les messages s'empileront dans la même colonne flex. */

/* Les deux règles de colonnes de l'en-tête sont REPRISES ICI avec une valeur de
   plus en tête. Elles sont plus bas dans la cascade, à spécificité égale : c'est
   donc bien cette version qui gagne. Elles restent bornées par le bas
   (min-width:901px), sinon elles écraseraient la mise en une colonne du mobile. */
@media(min-width:1181px){
  .masthead .head-grid{grid-template-columns:var(--chat-w) minmax(0,1fr) var(--aside-w)}
}
/* 901-1180px : plus la place pour trois colonnes. Le chat garde sa forme debout
   à gauche du titre ; les trois modules repassent en pleine largeur sous les
   deux (.head-aside{grid-column:1/-1}, déjà posé plus haut). La hauteur mesurée
   n'a plus de sens à ce palier — les blocs ne sont plus en vis-à-vis — donc le
   script ne l'applique pas et le repli --chat-h reprend la main. */
@media(min-width:901px) and (max-width:1180px){
  .masthead .head-grid{grid-template-columns:var(--chat-w) minmax(0,1fr)}
}
/* ≤900px : une seule colonne. Le chat redevient un bloc PLEINE LARGEUR à sa
   place logique dans le flux — après le titre et ses réseaux sociaux (order:1),
   avant les modules Événements / Don / Pub (order:3) — et retrouve une hauteur
   de lecture, plus une forme debout. */
@media(max-width:900px){
  .masthead .head-side{order:2}
  .masthead .head-side .chat-tw{height:280px}
}


/* ── CHAT EN DIRECT — INDICATEUR DE PRÉSENCE ET FORMULAIRES (03/09/2026) ────
   POINT 1. Le titre « Chat en direct » passe en ROUGE NÉON dès qu'au moins une
   personne est ENTRÉE dans le chat (pseudo validé par le serveur). C'est la
   seule couleur ajoutée à la charte, et elle est explicitement demandée : tout
   le reste de la fenêtre garde le jaune d'automne posé le 26/08/2026.

   L'état par défaut n'est pas touché : sans la classe .is-live, le titre reste
   exactement ce qu'il était. La bascule est portée par le serveur via
   l'évènement 'presence' — la page ne devine rien.                            */
:root{--chat-live:#ff2740;--chat-live-rgb:255,39,64}
.chat-tw{position:relative}
.chat-tw .chat-tw-title{transition:color .25s,text-shadow .25s}
.chat-tw.is-live .chat-tw-title{
  color:var(--chat-live);
  text-shadow:0 0 6px rgba(var(--chat-live-rgb),.9),0 0 18px rgba(var(--chat-live-rgb),.5);
}
.chat-tw.is-live .dot{
  background:var(--chat-live);box-shadow:0 0 10px var(--chat-live);
  animation:chatPulse 1.7s ease-in-out infinite;
}
@keyframes chatPulse{0%,100%{opacity:1}50%{opacity:.4}}
/* Compteur discret, à droite du titre. Il n'apparaît que s'il y a du monde. */
.chat-tw .chat-tw-count{
  margin-left:auto;flex:0 0 auto;
  font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:none;
  color:var(--chat-live);text-shadow:0 0 8px rgba(var(--chat-live-rgb),.6);
}
/* Le point d'état sert aussi d'indicateur de connexion au backend. */
.chat-tw .dot.is-off{background:#6b5f7f;box-shadow:none;animation:none}

/* Messages. Aucune couleur nouvelle : pseudo en jaune d'automne, horodatage et
   lignes système en texte doux, comme le reste de la page. */
.chat-tw .chat-tw-body .m{margin-bottom:.32rem;overflow-wrap:anywhere}
.chat-tw .chat-tw-body .m .ts{margin-right:.28rem;opacity:.55;font-variant-numeric:tabular-nums}
.chat-tw .chat-tw-body .m b{color:var(--auto-jaune)}
.chat-tw .chat-tw-body .sys{margin:.3rem 0;font-style:italic;opacity:.8}
.chat-tw .chat-tw-body .banner{
  margin-bottom:.45rem;padding:.3rem .45rem;border-radius:7px;font-style:normal;
  border:1px solid rgba(var(--auto-jaune-rgb),.3);background:rgba(var(--auto-jaune-rgb),.08);
}
/* Encoche « pseudo certifié » — reprise telle quelle de la page publique, pour
   ne pas la perdre dans cette présentation. Le drapeau vient du serveur. */
.chat-tw .cert{width:.72rem;height:.72rem;margin-left:.15rem;vertical-align:-.1rem}
.chat-tw .cert .cert-b{fill:var(--cyan)}
.chat-tw .cert .cert-c{fill:#0a0118}

/* Voile d'entrée : recouvre la fenêtre tant que le serveur n'a pas validé un
   pseudo. Il ne disparaît QUE sur .joined, posé à la réception de 'joined'. */
.chat-tw .chat-tw-gate{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.55rem;padding:1rem;text-align:center;background:rgba(10,1,24,.95);
}
/* ⚠ 03/09/2026 — display:none REMPLACÉ PAR UN FONDU (point 4).
   display ne s'anime pas : le voile disparaissait d'un coup. Il part maintenant
   en fondu de 0,4 s, et visibility:hidden prend le relais À LA FIN de la
   transition (delay .4s) pour le sortir aussi de l'ordre de tabulation.
   ⚠ CE N'EST PAS UNE PROTECTION QUI SAUTE : le voile n'a jamais été un contrôle
   de sécurité. C'est le SERVEUR qui refuse tout message d'une socket sans
   pseudo validé, et le champ de saisie reste disabled tant que 'joined' n'est
   pas reçu. Rien de la logique de connexion n'est touché ici. */
.chat-tw .chat-tw-gate{transition:opacity .4s ease,visibility 0s linear 0s}
.chat-tw.joined .chat-tw-gate{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s ease,visibility 0s linear .4s;
}
/* Filigrane du logo, visible seulement tant qu'on n'est pas entré. Opacité très
   basse : il doit se deviner derrière la saisie, jamais la concurrencer. */
.chat-tw .chat-tw-mark{
  width:min(140px,58%);height:auto;margin-bottom:.15rem;
  border-radius:10px;
  /* 0.12 -> 0.08 après vérification au rendu : à 0,12 le visage ressortait
     nettement sur le fond très sombre du voile et concurrençait la saisie.
     Le passage en niveaux de gris casse le rose de la peau, qui était ce qui
     accrochait le plus l'oeil. */
  opacity:.08;filter:grayscale(.6);
  pointer-events:none;user-select:none;
  transition:opacity .4s ease,transform .4s ease;
}
.chat-tw.joined .chat-tw-mark{opacity:0;transform:scale(.94)}

/* Module « Votre publicité » devenu cliquable : lien étiré sur toute la carte. */
.mod--clic{position:relative}
.mod--clic .pub-link{display:block;text-decoration:none;color:inherit;cursor:pointer}
/* Le curseur main est aussi porte par la CARTE : le lien etire couvre bien
   toute la surface, mais .pub-slot et les marges du module sont survoles
   AVANT lui dans l ordre de peinture. Sans cette ligne, le curseur redevient
   une fleche sur les bords du bloc alors que le clic, lui, fonctionne. */
.mod--clic{cursor:pointer}
.mod--clic .pub-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.mod--clic:hover,.mod--clic:focus-within{border-color:var(--auto-jaune)}
.mod--clic .pub-link:focus-visible::after{outline:2px solid var(--auto-jaune);outline-offset:3px}
.mod--clic:hover .pub-slot{color:var(--auto-jaune);border-color:var(--auto-jaune)}
.chat-tw .chat-tw-gate-txt{font-size:.72rem;line-height:1.4;color:var(--txt-soft)}
.chat-tw .chat-tw-gate form{display:flex;flex-direction:column;gap:.45rem;width:100%}
.chat-tw .chat-tw-gate .chat-tw-send{width:100%;padding:.4rem .6rem}
.chat-tw .chat-tw-input:disabled,.chat-tw .chat-tw-send:disabled{opacity:.5}

/* ── COURS DES PRIX — RAM & CARTES GRAPHIQUES (03/09/2026) ──────────────────
   POINT 5. Rectangle allongé horizontal sous les réseaux sociaux, dans la
   colonne centrale de l'en-tête. Il reprend .mod, donc le contour néon commun :
   aucune bordure, aucun halo et aucune police ne lui sont propres.
   Les deux séries utilisent --cyan (RAM) et --mag (GPU), déjà dans :root.

   HAUTEUR CONTENUE : le tracé fait 170 px, quelle que soit la largeur. C'est le
   script qui dessine un SVG à la taille exacte du conteneur (1 unité = 1 pixel),
   ce qui garde les libellés lisibles à toutes les largeurs — un viewBox fixe
   étiré aurait rendu le texte minuscule sur téléphone.                        */
/* ⚠ 03/09/2026 (après-midi) — MODULE NETTEMENT ABAISSÉ.
   Il écrasait visuellement le logo juste au-dessus. Le tracé passe de 170 px à
   96 px, et tous les rembourrages, marges et corps de texte sont resserrés d'un
   cran. Le logo redevient l'élément dominant de cette zone.

   HAUTEUR TOTALE DÉTERMINISTE : chaque ligne de texte du module porte une
   line-height EN PIXELS, pas un multiple. La hauteur ne dépend donc ni de la
   police de rendu ni du zoom texte, et se calcule exactement :

     2 px  bordure néon (2 x 1 px... en réalité 2 px de chaque côté = 4)
     16 px rembourrage vertical (2 x .5rem)
     16 px ligne de titre
      4 px + 96 px  tracé
      4 px + 14 px  légende
      3 px + 13 px  bas de module
     ------
     ≈ 170 px au total sur desktop.

   POUR AJUSTER : une seule valeur, PRIX_DATA.hauteur dans le script en fin de
   page (96 aujourd'hui). Tout le reste — graduations, position des libellés,
   marge du bas — en est déduit.                                              */
.prix{margin-top:.8rem;text-align:left;padding:.5rem .75rem}
.prix-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.prix-head h3{font-size:.76rem;line-height:16px}
.prix-periode{font-size:.56rem;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-soft)}
.prix-chart{margin-top:4px;min-height:0}
.prix-chart svg{display:block;width:100%;height:auto}
.prix-legend{display:flex;flex-wrap:wrap;gap:0 .8rem;margin-top:4px}
.prix-key{position:relative;padding-left:.95rem;font-size:.56rem;line-height:14px;color:var(--txt-soft)}
.prix-key::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:.65rem;height:2px;border-radius:2px;
}
.prix-key--ram::before{background:var(--cyan);box-shadow:0 0 5px var(--cyan)}
.prix-key--gpu::before{background:var(--mag);box-shadow:0 0 5px var(--mag)}
.prix p.prix-foot{margin-top:3px;font-size:.55rem;line-height:13px;color:var(--txt-soft)}
/* Tableau de repli : visible tant que le SVG n'est pas dessiné (JS coupé), puis
   déplacé hors écran — conservé dans le DOM pour les lecteurs d'écran. */
.prix-table{width:100%;margin-top:.5rem;border-collapse:collapse;font-size:.64rem}
.prix-table caption{margin-bottom:.3rem;text-align:left;color:var(--txt-soft);font-size:.62rem}
.prix-table th,.prix-table td{padding:.18rem .35rem;border:1px solid var(--line-soft);text-align:right}
.prix-table th:first-child,.prix-table td:first-child{text-align:left}
.prix-table th{color:var(--txt-soft);font-weight:700}
.prix-table--sronly{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Le module est discret : plus de soulèvement au survol comme les autres .mod,
   ce mouvement attirait l'oeil juste sous le logo. */
.prix:hover{transform:none}
@media(max-width:680px){
  .prix{padding:.45rem .6rem}
  .prix-head h3{font-size:.72rem}
  .prix-periode{font-size:.54rem}
}
@media(prefers-reduced-motion:reduce){
  .chat-tw.is-live .dot{animation:none}
  .chat-tw .chat-tw-title,
  .chat-tw .chat-tw-gate,
  .chat-tw .chat-tw-mark{transition:none}
}

/* ═══ FIN DÉCOR RENTRÉE ═══════════════════════════════════════════════════════ */

/* ═══ AJOUT 08/09/2026 — BOUTONS « COPIER » + BLOC TEAMSPEAK ═══════════════════
   Bloc 100 % ADDITIF : rien au-dessus n'est modifié. Supprimer ce bloc de bout
   en bout, plus le <section id="teamspeak">, plus le <script> « COPIE PRESSE-
   PAPIERS » en bas de page, restitue la page telle qu'elle était avant.

   .copy réutilise la géométrie de .srv .go (même padding, même rayon, même
   graisse) mais en version « fantôme » : contour cyan sur fond transparent, pour
   qu'il se lise comme le bouton SECONDAIRE à côté du « Rejoindre » plein. */
.copy{padding:.3rem .8rem;border-radius:7px;font-size:.7rem;font-weight:700;
  font-family:inherit;cursor:pointer;white-space:nowrap;
  color:var(--cyan);background:transparent;border:1px solid var(--line);
  transition:transform .15s,box-shadow .15s,color .15s,border-color .15s}
.copy:hover,.copy:focus-visible{transform:translateY(-1px);color:#fff;
  border-color:var(--cyan);box-shadow:0 0 12px rgba(5,217,232,.45);outline:none}
/* État de confirmation posé par le JS pendant 1,6 s après le clic. Le retour
   visuel est DOUBLE — couleur ET texte (« Copié ✓ ») — parce qu'une bascule de
   couleur seule est invisible pour un daltonien. */
.copy.ok{color:#37f5c0;border-color:rgba(55,245,192,.65);
  box-shadow:0 0 12px rgba(55,245,192,.4)}
/* Deux boutons côte à côte dans la colonne droite d'une ligne .srv. */
.srv .btns{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;justify-self:end}
#serveurs .srv .copy{padding:.24rem .62rem;font-size:.66rem}
@media(max-width:680px){
  .srv .btns{justify-self:start;margin-top:.3rem}
}
@media(prefers-reduced-motion:reduce){
  .copy{transition:none}
  .copy:hover{transform:none}
}

/* ── BLOC TEAMSPEAK ───────────────────────────────────────────────────────── */
.ts-join{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.9rem}
.ts-join .go{padding:.42rem 1rem;border-radius:8px;font-size:.8rem;font-weight:700;
  text-decoration:none;color:#0a0118;
  background:linear-gradient(90deg,var(--cyan),var(--mag));
  box-shadow:0 0 10px rgba(255,46,151,.4);transition:transform .15s,box-shadow .15s}
.ts-join .go:hover,.ts-join .go:focus-visible{transform:translateY(-1px);
  box-shadow:0 0 16px rgba(5,217,232,.6);outline:none}
.ts-addr{font-family:monospace;font-size:.72rem;color:var(--cyan);word-break:break-all}

/* Encadré d'avertissement « TS3, pas TS6 ». Volontairement en jaune néon et
   non en cyan : c'est le seul élément de la page qui doit arrêter l'œil AVANT
   le clic. Il est bordé, pas juste coloré, pour rester lisible sur la photo de
   fond. */
.ts-warn{display:flex;gap:.6rem;align-items:flex-start;
  margin:.2rem 0 .9rem;padding:.7rem .8rem;border-radius:10px;
  border:1px solid var(--neon-y);background:rgba(255,225,77,.09);
  box-shadow:inset 0 0 14px rgba(255,225,77,.07)}
.ts-warn .ico{font-size:1.15rem;line-height:1.2;flex-shrink:0}
.ts-warn p{margin:0;font-size:.78rem;line-height:1.55;color:#fff}
.ts-warn strong{color:var(--neon-y)}

.ts-dl{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
/* Bouton principal : plein, jaune néon, nettement plus gros que tout le reste
   du bloc. C'est le seul chemin que 90 % des visiteurs doivent emprunter. */
.ts-dl .dl-main{padding:.6rem 1.15rem;border-radius:9px;font-size:.88rem;font-weight:800;
  text-decoration:none;color:#0a0118;background:var(--neon-y);
  box-shadow:0 0 14px rgba(255,225,77,.45);transition:transform .15s,box-shadow .15s}
.ts-dl .dl-main:hover,.ts-dl .dl-main:focus-visible{transform:translateY(-1px);
  box-shadow:0 0 22px rgba(255,225,77,.7);outline:none}
/* Liens secondaires : discrets par construction (taille réduite, gris-violet,
   pas de fond). Ils ne doivent jamais concurrencer le bouton Windows. */
.ts-dl .dl-alt{font-size:.7rem;color:var(--txt-soft);text-decoration:none;
  border-bottom:1px dotted rgba(201,184,230,.5)}
.ts-dl .dl-alt:hover,.ts-dl .dl-alt:focus-visible{color:var(--cyan);
  border-bottom-color:var(--cyan);outline:none}
.ts-sep{color:rgba(201,184,230,.45);font-size:.7rem}

.ts-steps{margin:.85rem 0 0;padding-left:1.15rem;font-size:.76rem;line-height:1.6;
  color:var(--txt-soft)}
.ts-steps li{margin-top:.2rem}
.ts-steps li::marker{color:var(--cyan);font-weight:800}
@media(prefers-reduced-motion:reduce){
  .ts-join .go,.ts-dl .dl-main{transition:none}
  .ts-join .go:hover,.ts-dl .dl-main:hover{transform:none}
}

/* ── AJOUTS DU 08/09/2026 (2e passe) ───────────────────────────────────────────
   .btns n'est plus utilisé par aucun bloc : le seul qui s'en servait était la
   ligne 7 Days to Die, dont les deux boutons ont été retirés. La règle est
   laissée en place, sans usage, pour un futur serveur à deux boutons. */

/* Adresse en clair sous le bouton « Rejoindre » du bloc TeamSpeak. */
.ts-addr-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 .75rem}
.ts-addr-lbl{font-size:.72rem;color:var(--txt-soft)}
code.ts-addr{font-family:monospace;font-size:.82rem;font-weight:700;color:var(--cyan);
  padding:.22rem .5rem;border-radius:6px;
  border:1px solid var(--line-soft);background:rgba(5,217,232,.07);
  word-break:break-all}
/* Le prérequis « il faut le client TS3 installé ». Volontairement en corps de
   texte plein et non en .note grisée : c'est l'explication du symptôme le plus
   fréquent (clic sans effet), elle doit se lire, pas se deviner. */
.ts-req{margin:0 0 .9rem;font-size:.76rem;line-height:1.6;color:var(--txt-soft)}
.ts-req strong{color:#fff}
.ts-req code{font-family:monospace;color:var(--cyan)}

/* Ligne serveur SANS bouton de connexion : la marche à suivre remplace le
   bouton. .srv-steps et .cmd s'étalent sur toute la largeur de la carte. */
.srv--manual{align-items:start}
.srv .srv-tag{justify-self:end;font-size:.6rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-soft);white-space:nowrap}
.srv-steps{grid-column:1/-1;margin:.3rem 0 .15rem;padding-left:1.15rem;
  font-size:.66rem;line-height:1.55;color:var(--txt-soft)}
.srv-steps li{margin-top:.1rem}
.srv-steps li::marker{color:var(--cyan);font-weight:800}
.srv-steps strong{color:#fff;font-weight:700}
#serveurs .srv-steps{font-size:.62rem}
@media(max-width:680px){
  .srv .srv-tag{justify-self:start}
}
/* ═══ FIN AJOUT 08/09/2026 ════════════════════════════════════════════════════ */