/* =========================================================
   POT-POURRI — HABILLAGE COMMUN (page d'accueil du module,
   entrée « code de partie », administration)
   Sombre et chaleureux, accent or. Polices hébergées ici.
   ========================================================= */
@font-face{font-family:"Playfair Display";font-weight:800;font-display:swap;src:url(polices/playfair-display-800.woff2) format("woff2");}
@font-face{font-family:"Figtree";font-weight:500;font-display:swap;src:url(polices/figtree-500.woff2) format("woff2");}
@font-face{font-family:"Figtree";font-weight:700;font-display:swap;src:url(polices/figtree-700.woff2) format("woff2");}
@font-face{font-family:"Figtree";font-weight:800;font-display:swap;src:url(polices/figtree-800.woff2) format("woff2");}
:root{
  --pp-fond:#141317; --pp-fond2:#1C1A20; --pp-carte:#211F26; --pp-ligne:#33303A; --pp-texte:#EFEBF3; --pp-doux:#A9A3B3;
  --pp-or:#E3BE63; --pp-rose:#FF6FB5; --pp-ok:#3ED598; --pp-ko:#FF5A6E;
  --pp-titre:"Playfair Display", Georgia, serif; --pp-corps:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:dark;
}
*{ box-sizing:border-box; }
body.pp{ margin:0; min-height:100vh; background:radial-gradient(90% 50% at 15% 0%, #2A2131 0%, transparent 60%), radial-gradient(70% 40% at 100% 20%, #2A2416 0%, transparent 60%), var(--pp-fond);
  color:var(--pp-texte); font-family:var(--pp-corps); font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%; }
.pp a{ color:var(--pp-or); }
.pp a.pp-btn{ color:#1A1306; } .pp a.pp-btn.second{ color:var(--pp-texte); } .pp a.pp-btn.danger{ color:#FFB3BC; }
.pp-page{ max-width:1080px; margin:0 auto; padding-inline:16px; padding-block:24px 64px; }
.pp-fil{ display:flex; gap:14px; flex-wrap:wrap; font-size:14px; margin-bottom:26px; }
.pp-fil a{ color:var(--pp-doux); text-decoration:none; } .pp-fil a:hover{ color:var(--pp-or); }
.pp-sur{ font:800 12px/1 var(--pp-corps); letter-spacing:.24em; text-transform:uppercase; color:var(--pp-or); }
.pp-h1{ font-family:var(--pp-titre); font-weight:800; font-size:clamp(40px,8vw,72px); line-height:.95; margin:12px 0 14px; letter-spacing:-.01em; text-wrap:balance; }
.pp-h1 em{ font-style:normal; background:linear-gradient(90deg,var(--pp-or),var(--pp-rose)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pp-intro{ color:var(--pp-doux); max-width:58ch; margin:0 0 30px; font-size:17px; }

/* Cartes des applications */
.pp-apps{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:18px; }
.pp-app{ position:relative; display:flex; flex-direction:column; gap:10px; min-height:230px; padding:22px; border-radius:24px; overflow:hidden;
  text-decoration:none; color:var(--pp-texte); background:var(--pp-carte); border:1px solid var(--pp-ligne);
  transition:transform .15s ease, border-color .15s ease; isolation:isolate; }
.pp-app::before{ content:""; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, var(--c1) 0%, transparent 65%); opacity:.35; }
.pp-app::after{ content:""; position:absolute; left:-40px; bottom:-80px; width:180px; height:180px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, var(--c2) 0%, transparent 65%); opacity:.22; }
a.pp-app:hover{ transform:translateY(-3px); border-color:var(--c1); }
a.pp-app:focus-visible{ outline:3px solid var(--pp-or); outline-offset:3px; }
.pp-app .ic{ font-size:44px; line-height:1; }
.pp-app h2{ margin:0; font-family:var(--pp-titre); font-weight:800; font-size:28px; line-height:1.05; text-transform:uppercase; letter-spacing:.01em; }
.pp-app p{ margin:0; color:var(--pp-doux); font-size:15px; flex:1 1 auto; }
.pp-app .go{ align-self:flex-start; padding:10px 18px; border-radius:999px; font:800 14px/1 var(--pp-corps); letter-spacing:.06em;
  text-transform:uppercase; background:var(--c1); color:#141317; }
.pp-app.bientot{ opacity:.78; }
.pp-app.bientot .go{ background:transparent; color:var(--pp-doux); border:1px dashed var(--pp-ligne); }

/* Entrée par code */
.pp-entree{ max-width:460px; margin:0 auto; }
.pp-boite{ padding:24px; border-radius:24px; background:var(--pp-carte); border:1px solid var(--pp-ligne); }
.pp-champ{ display:block; margin-bottom:14px; }
.pp-champ > span{ display:block; margin-bottom:6px; font:800 11px/1 var(--pp-corps); letter-spacing:.2em; text-transform:uppercase; color:var(--pp-doux); }
.pp-champ input, .pp-champ select, .pp-champ textarea{ width:100%; padding:12px 14px; border-radius:14px; font:600 16px/1.35 var(--pp-corps);
  color:var(--pp-texte); background:#16151A; border:2px solid var(--pp-ligne); }
.pp-champ textarea{ resize:vertical; min-height:80px; }
.pp-champ input:focus, .pp-champ select:focus, .pp-champ textarea:focus{ outline:none; border-color:var(--pp-or); }
.pp-champ input.code{ font-size:26px; font-weight:800; text-align:center; letter-spacing:.2em; text-transform:uppercase; }
.pp-champ small{ display:block; margin-top:5px; color:var(--pp-doux); font-size:13px; }
.pp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 20px; border-radius:999px;
  border:0; cursor:pointer; text-decoration:none; font:800 15px/1 var(--pp-corps); letter-spacing:.04em; text-transform:uppercase;
  background:linear-gradient(90deg,var(--pp-or),#F3D58A); color:#1A1306; }
.pp-btn.large{ width:100%; min-height:56px; font-size:17px; }
.pp-btn.second{ background:transparent; color:var(--pp-texte); border:1px solid var(--pp-ligne); text-transform:none; letter-spacing:0; font-weight:700; }
.pp-btn.danger{ background:transparent; color:#FFB3BC; border:1px solid rgba(255,90,110,.5); text-transform:none; letter-spacing:0; font-weight:700; }
.pp-btn.petit{ min-height:38px; padding:8px 14px; font-size:13px; }
.pp-btn:focus-visible{ outline:3px solid var(--pp-or); outline-offset:2px; }
.pp-btn:disabled{ opacity:.5; cursor:default; }
.pp-msg{ padding:12px 16px; border-radius:14px; margin:0 0 16px; font-weight:600; }
.pp-msg.ok{ background:rgba(62,213,152,.12); border:1px solid rgba(62,213,152,.45); }
.pp-msg.ko{ background:rgba(255,90,110,.12); border:1px solid rgba(255,90,110,.5); }
.pp-note{ color:var(--pp-doux); font-size:13.5px; }