/* ════════════════════════════════════════════════════════════
   GWAFLIX · pages.css — pages légales / aide / faq
   ════════════════════════════════════════════════════════════ */
.page-hero { padding:12rem 0 4rem; position:relative; text-align:center; isolation:isolate; }
.page-hero::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse 50% 80% at 50% 0%, rgba(229,9,20,.18), transparent 60%); }
.page-hero h1 { font-size:clamp(2.6rem,7vw,5rem); margin-bottom:.6rem; }
.page-hero p { color:var(--dim); font-size:1.1rem; max-width:48ch; margin:0 auto; line-height:1.7; }
@media (max-width:767px) { .page-hero { padding:8rem 0 3rem; } }
@media (min-width:768px) and (max-width:1023px) { .page-hero { padding:10rem 0 3.5rem; } }

.prose { max-width:850px; margin:0 auto; padding:4rem 1.5rem; }
.prose h2 { font-family:"Bebas Neue",sans-serif; font-size:1.8rem; margin:2.8rem 0 1.2rem; color:var(--txt); letter-spacing:.01em; }
.prose h2:first-child { margin-top:0; }
.prose p, .prose li { color:var(--dim); margin-bottom:1.2rem; line-height:1.8; letter-spacing:.3px; }
@media (max-width:767px) { .prose { max-width:90vw; padding:3rem 0; margin:0 auto; } .prose h2 { margin:2.4rem 0 1rem; } .prose p, .prose li { margin-bottom:1.1rem; } }
@media (min-width:768px) and (max-width:1023px) { .prose { max-width:min(85vw,820px); padding:3.5rem 1.5rem; } .prose h2 { margin:2.6rem 0 1.1rem; } }
/* ─── Pages légales : cartes structurées ─── */
.intro-text { font-size:1.05rem; color:var(--dim); margin-bottom:2.5rem; font-weight:500; }

.legal-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.8rem; margin:2.5rem 0; }
.legal-card { background:var(--bg-1); border:1px solid var(--line); border-radius:12px; padding:2rem; transition:border-color .2s, background .2s; }
.legal-card:hover { border-color:rgba(229,9,20,.3); background:var(--bg-2); }
.legal-card h2 { margin:0 0 1rem 0; font-size:1.3rem; color:var(--txt); }
.legal-card p { margin:0; color:var(--dim); line-height:1.7; }

.prose ul { padding-left:1.4rem; }
.prose a { color:var(--ember); }
.disclaimer { border-left:3px solid var(--red); padding-left:1rem; color:var(--mute); font-size:.9rem; margin-top:3rem; line-height:1.8; letter-spacing:.3px; }
.prose-rule { margin-bottom:1.6rem; }
.prose-rule-head { display:flex; align-items:center; gap:.9rem; margin:2.2rem 0 .8rem; }
.prose-rule:first-of-type .prose-rule-head { margin-top:0; }
.prose-rule-ic {
  flex-shrink:0; width:44px; height:44px;
  display:grid; place-items:center; border-radius:12px;
  background:radial-gradient(circle at 30% 30%, rgba(229,9,20,.16), rgba(229,9,20,.04));
  border:1px solid rgba(229,9,20,.25);
}
.prose-rule-ic img { width:24px; height:24px; }
.prose-rule-head h2 { margin:0; }

/* Cartes d'action (page aide) */
.action-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; }
.action { position:relative; overflow:hidden; background:linear-gradient(160deg,var(--bg-2),var(--bg-1)); border:1px solid var(--line); border-radius:16px; padding:2.4rem 2rem; transition:border-color .2s, transform .2s; }
.action:hover { border-color:rgba(229,9,20,.5); transform:translateY(-4px); }
.action::before { content:""; position:absolute; top:-40%; right:-20%; width:60%; height:120%; background:radial-gradient(circle,rgba(229,9,20,.18),transparent 70%); pointer-events:none; }
.action > * { position:relative; z-index:1; }
.action h3 { font-size:1.4rem; margin-bottom:.6rem; }
.action p { color:var(--dim); margin-bottom:1.6rem; font-size:.96rem; }

/* FAQ accordéon */
.faq-wrap { max-width:760px; margin:0 auto; }
details.q { border:1px solid var(--line); border-radius:12px; margin-bottom:.8rem; background:var(--bg-1); overflow:hidden; transition:border-color .2s; }
details.q[open] { border-color:rgba(229,9,20,.4); }
details.q summary { list-style:none; cursor:pointer; padding:1.25rem 3.2rem 1.25rem 1.5rem; font-weight:600; position:relative; }
details.q summary::-webkit-details-marker { display:none; }
details.q summary::after { content:"+"; position:absolute; right:1.4rem; top:50%; transform:translateY(-50%); color:var(--red); font-size:1.5rem; transition:transform .2s; }
details.q[open] summary::after { transform:translateY(-50%) rotate(45deg); }
details.q .a { padding:0 1.5rem 1.35rem; color:var(--dim); }
details.q .a a { color:var(--ember); }

/* ─── Cartes action avec icônes (page aide) ─── */
.action-grid-2x2 { grid-template-columns:repeat(2,1fr); max-width:900px; margin:0 auto; }
@media (max-width:680px){ .action-grid-2x2 { grid-template-columns:1fr; } }
.action-ic { width:60px; height:60px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.3rem; background:radial-gradient(circle at 30% 30%, rgba(229,9,20,.16), rgba(229,9,20,.04)); border:1px solid rgba(229,9,20,.25); position:relative; z-index:1; }
.action-ic img { width:34px; height:34px; }
.action-link { display:inline-block; margin-top:.3rem; color:var(--ember); font-weight:600; font-size:.95rem; position:relative; z-index:1; transition:color .15s; }
.action-link:hover { color:var(--red-hot); }

/* ─── FAQ par groupes thématiques ─── */
.faq-group { margin-bottom:2.5rem; }
.faq-group-head { display:flex; align-items:center; gap:.9rem; margin-bottom:1.2rem; }
.faq-group-ic { width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:radial-gradient(circle at 30% 30%, rgba(229,9,20,.16), rgba(229,9,20,.04)); border:1px solid rgba(229,9,20,.25); flex:0 0 auto; }
.faq-group-ic img { width:26px; height:26px; }
.faq-group-head h2 { font-family:"Bebas Neue",sans-serif; font-size:1.7rem; color:var(--txt); letter-spacing:.01em; }

/* ─── Icône en tête des pages (légales, mot de passe) ─── */
.page-hero-ic { width:72px; height:72px; margin:0 auto 1.5rem; display:grid; place-items:center; border-radius:18px; background:radial-gradient(circle at 30% 30%, rgba(229,9,20,.16), rgba(229,9,20,.04)); border:1px solid rgba(229,9,20,.25); }
.page-hero-ic img { width:42px; height:42px; }

/* ════════════════════════════════════════════════════════════
   PAGE ÉTAT DES SERVICES (monitoring style Uptime Kuma)
   ════════════════════════════════════════════════════════════ */
.status-wrap { max-width:780px; margin:0 auto; }

/* Bandeau global */
.status-banner { display:flex; align-items:center; gap:1rem; padding:1.3rem 1.5rem; border-radius:14px; border:1px solid var(--line); background:var(--bg-1); margin-bottom:2rem; transition:border-color .3s; }
.status-banner-dot { width:14px; height:14px; border-radius:50%; flex:0 0 auto; background:var(--mute); position:relative; }
.status-banner-dot::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid currentColor; opacity:.4; animation:statusPulse 2s ease-out infinite; }
@keyframes statusPulse { 0%{transform:scale(.8);opacity:.5;} 100%{transform:scale(1.6);opacity:0;} }
.status-banner-txt { flex:1; display:flex; flex-direction:column; }
.status-banner-txt strong { font-size:1.1rem; color:var(--txt); }
.status-banner-txt span { color:var(--dim); font-size:.9rem; }
.status-refresh { width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--bg-2); color:var(--dim); cursor:pointer; display:grid; place-items:center; transition:all .15s; }
.status-refresh:hover { color:var(--txt); border-color:rgba(255,255,255,.2); transform:rotate(90deg); }
/* couleurs selon l'état */
.status-banner.ok { border-color:rgba(46,204,113,.4); color:#2ecc71; }
.status-banner.ok .status-banner-dot { background:#2ecc71; color:#2ecc71; }
.status-banner.degraded { border-color:rgba(243,156,18,.4); color:#f39c12; }
.status-banner.degraded .status-banner-dot { background:#f39c12; color:#f39c12; }
.status-banner.down { border-color:rgba(229,9,20,.5); color:var(--red); }
.status-banner.down .status-banner-dot { background:var(--red); color:var(--red); }
.status-banner.loading .status-banner-dot { background:var(--mute); color:var(--mute); }

/* Liste de services */
.status-list { display:flex; flex-direction:column; gap:1rem; }
.status-loading { text-align:center; color:var(--mute); padding:2rem; }
.status-card { background:var(--bg-1); border:1px solid var(--line); border-radius:14px; padding:1.3rem 1.4rem; }
.status-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.status-card-id { display:flex; align-items:center; gap:.8rem; }
.status-dot { width:11px; height:11px; border-radius:50%; flex:0 0 auto; margin-top:.2rem; }
.status-dot.up { background:#2ecc71; box-shadow:0 0 10px rgba(46,204,113,.6); }
.status-dot.slow { background:#f39c12; box-shadow:0 0 10px rgba(243,156,18,.6); }
.status-dot.down { background:var(--red); box-shadow:0 0 10px rgba(229,9,20,.6); }
.status-name { font-weight:600; color:var(--txt); font-size:1rem; }
.status-desc { color:var(--mute); font-size:.84rem; margin-top:.1rem; }
.status-card-meta { text-align:right; flex:0 0 auto; }
.status-state { display:block; font-size:.85rem; font-weight:600; }
.status-state.up { color:#2ecc71; }
.status-state.slow { color:#f39c12; }
.status-state.down { color:var(--red); }
.status-ms { font-size:.78rem; color:var(--mute); }

/* Barres d'historique 24h */
.status-history { }
.status-bars { display:flex; gap:3px; height:34px; align-items:flex-end; }
.hbar { flex:1; min-width:3px; border-radius:2px; height:100%; transition:opacity .2s; }
.hbar.b-ok { background:#2ecc71; }
.hbar.b-slow { background:#f39c12; }
.hbar.b-down { background:var(--red); }
.hbar.b-empty { background:var(--bg-3); }
.hbar:hover { opacity:.7; }
.status-history-foot { display:flex; justify-content:space-between; margin-top:.5rem; font-size:.72rem; color:var(--mute); }
.status-uptime { color:var(--dim); font-weight:600; }

.status-foot { text-align:center; color:var(--mute); font-size:.82rem; margin-top:1.6rem; }
.status-help { text-align:center; color:var(--dim); font-size:.9rem; margin-top:.5rem; }
.status-help a { color:var(--ember); }