/* =========================================================
   KIT GRAPHIQUE
   ========================================================= */
:root{
  --bg: #05060a;
  --bg-soft: #0b0f1a;
  --surface: #10152400;
  --surface-solid: #10152a;
  --border: rgba(255,255,255,.08);
  --text: #eef1f8;
  --text-muted: #9aa3b8;
  --accent: #6c5cff;
  --accent-2: #21e0c9;
  --accent-grad: linear-gradient(135deg, #6c5cff 0%, #21e0c9 100%);
  --danger: #ff5c7a;
  --success: #2ee6a6;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-glow: 0 0 60px rgba(108,92,255,.25);
  --font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(108,92,255,.25), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(33,224,201,.15), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-2); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
h1,h2,h3{line-height:1.2; font-weight:700; letter-spacing:-.02em}

.skip-link{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.6rem 1rem; z-index:999}
.skip-link:focus{left:1rem; top:1rem}

/* ---- Header / Nav ---- */
.site-header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(5,6,10,.7);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:.9rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.15rem; color:var(--text)}
.brand:hover{text-decoration:none}
.brand-mark{width:12px; height:12px; border-radius:4px; background:var(--accent-grad); box-shadow:0 0 16px rgba(108,92,255,.8)}

.main-nav ul{list-style:none; display:flex; gap:1.6rem; margin:0; padding:0}
.main-nav a{color:var(--text-muted); font-weight:600; font-size:.95rem}
.main-nav a:hover{color:var(--text); text-decoration:none}

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; border-radius:10px; border:1px solid var(--border);
  background:transparent; cursor:pointer;
}
.hamburger span{display:block; width:20px; height:2px; margin:0 auto; background:var(--text); transition:.25s}
.hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-active span:nth-child(2){opacity:0}
.hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- Boutons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.3rem; border-radius:999px; font-weight:600; font-size:.92rem;
  border:1px solid transparent; cursor:pointer; transition:.2s transform,.2s box-shadow,.2s opacity;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--accent-grad); color:#fff; box-shadow:0 8px 24px rgba(108,92,255,.35)}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text)}
.btn-danger{background:transparent; border-color:rgba(255,92,122,.4); color:var(--danger)}
.btn-sm{padding:.4rem .8rem; font-size:.8rem}
.btn-block{width:100%}

/* ---- Hero ---- */
.hero{position:relative; max-width:1180px; margin:0 auto; padding:5rem 1.25rem 3rem; overflow:hidden}
.hero-glow{position:absolute; inset:-20% -10% auto -10%; height:400px; background:var(--accent-grad); filter:blur(120px); opacity:.25; z-index:-1}
.eyebrow{color:var(--accent-2); text-transform:uppercase; letter-spacing:.15em; font-size:.75rem; font-weight:700; margin:0 0 .8rem}
.hero h1{font-size:clamp(2rem, 5vw, 3.4rem); margin:0 0 1.2rem; max-width:16ch}
.hero-text{color:var(--text-muted); max-width:60ch; margin-bottom:1.8rem}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap}

/* ---- Features ---- */
.features{max-width:1180px; margin:0 auto; padding:2rem 1.25rem 5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.feature-card{background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem}
.feature-icon{width:44px; height:44px; border-radius:12px; background:var(--accent-grad); display:flex; align-items:center; justify-content:center; margin-bottom:1rem}
.feature-icon svg{width:24px; height:24px; color:#fff}
.feature-card h3{margin:.2rem 0 .5rem}
.feature-card p{color:var(--text-muted); margin:0; font-size:.92rem}

/* ---- Contenu générique ---- */
.page-head{max-width:900px; margin:0 auto; padding:3.5rem 1.25rem 1.5rem}
.page-head h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.static-page, .post-single{max-width:800px; margin:0 auto; padding:3.5rem 1.25rem 5rem}
.post-content{color:var(--text-muted)}
.post-content p{margin:0 0 1.1rem}
.post-single-img{border-radius:var(--radius); margin:1.5rem 0}

/* ---- Blog grid ---- */
.post-grid{max-width:1180px; margin:0 auto; padding:1rem 1.25rem 5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.post-card{background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:.2s transform}
.post-card:hover{transform:translateY(-4px)}
.post-card-link{color:inherit}
.post-card-link:hover{text-decoration:none}
.post-card-img{width:100%; aspect-ratio:16/10; object-fit:cover; background:linear-gradient(135deg,#1a2036,#0e1220)}
.post-card-img--placeholder{background:var(--accent-grad); opacity:.25}
.post-card-body{padding:1.2rem}
.post-card-body time{color:var(--accent-2); font-size:.75rem; font-weight:700; text-transform:uppercase}
.post-card-body h2{font-size:1.1rem; margin:.4rem 0}
.post-card-body p{color:var(--text-muted); font-size:.9rem; margin:0}
.empty-state{color:var(--text-muted); text-align:center; padding:2rem}

/* ---- Formulaires ---- */
.form{max-width:640px}
.form-row{margin-bottom:1.1rem; display:flex; flex-direction:column; gap:.4rem}
.form-row--inline{flex-direction:row; align-items:center; gap:2rem}
.form-row--checkbox label{display:flex; gap:.5rem; align-items:flex-start; font-size:.85rem; color:var(--text-muted)}
label{font-weight:600; font-size:.88rem}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=file], textarea, select{
  background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:.7rem .9rem; color:var(--text); font-family:inherit; font-size:.95rem;
}
input:focus, textarea:focus, select:focus{outline:2px solid var(--accent); outline-offset:1px}
textarea{resize:vertical}
.hp-field{position:absolute; left:-9999px; top:-9999px}
.form-actions{display:flex; gap:1rem; margin-top:1.2rem}

.alert{padding:1rem 1.2rem; border-radius:var(--radius-sm); margin-bottom:1.5rem; font-size:.92rem}
.alert-success{background:rgba(46,230,166,.1); border:1px solid rgba(46,230,166,.35); color:var(--success)}
.alert-error{background:rgba(255,92,122,.1); border:1px solid rgba(255,92,122,.35); color:var(--danger)}
.alert ul{margin:0; padding-left:1.2rem}

/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--border); margin-top:4rem}
.footer-inner{max-width:1180px; margin:0 auto; padding:2rem 1.25rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--text-muted); font-size:.85rem}
.footer-nav{display:flex; gap:1.2rem; flex-wrap:wrap}
.footer-nav a{color:var(--text-muted)}

/* ---- Bannières cookie / install ---- */
.cookie-banner, .install-banner{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:200; max-width:560px;
  margin:0 auto; background:var(--surface-solid); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.1rem 1.3rem; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.cookie-banner p, .install-banner span{margin:0 0 .8rem; font-size:.85rem; color:var(--text-muted); display:block}
.cookie-actions, .install-actions{display:flex; gap:.7rem; justify-content:flex-end}

/* ---- Erreurs ---- */
.error-page{max-width:600px; margin:6rem auto; text-align:center; padding:0 1.25rem}
.error-page h1{font-size:4rem; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* =========================================================
   RESPONSIVE — bascule hamburger sous 880px
   ========================================================= */
@media (max-width: 880px){
  .hamburger{display:flex}
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px, 85vw); height:100vh;
    background:var(--bg-soft); border-left:1px solid var(--border);
    transform:translateX(100%); transition:transform .25s ease; padding:5.5rem 1.5rem 2rem;
    z-index:99;
  }
  .main-nav.is-open{transform:translateX(0)}
  .main-nav ul{flex-direction:column; gap:1.4rem}
  .main-nav a{font-size:1.05rem}
  .features{grid-template-columns:1fr}
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .post-grid{grid-template-columns:1fr}
  .hero{padding-top:3.5rem}
}

/* Correctif : centrer la zone du formulaire de contact */
.contact-wrap{
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1.25rem 5rem;
}
.contact-wrap .form{
  max-width: none;
}

/* ---- Système de notation par étoiles ---- */
.rating-block{
  margin: 2.5rem 0; padding: 1.4rem 1.6rem; background: var(--surface-solid);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.rating-summary{ font-size: 1.1rem; margin-bottom: 1rem; color: var(--text); }
.rating-summary strong{ color: var(--accent-2); font-size: 1.4rem; }
.rating-count{ color: var(--text-muted); font-size: .85rem; }
.rating-thanks{ color: var(--success); margin: 0; font-size: .92rem; }

.star-form{ display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.stars{
  display: flex; flex-direction: row-reverse; justify-content: flex-end;
  border: none; padding: 0; margin: 0; gap: .2rem;
}
.stars legend{ position: absolute; left: -9999px; }
.stars input{ position: absolute; opacity: 0; width: 0; height: 0; }
.stars label{
  font-size: 1.8rem; line-height: 1; cursor: pointer; color: rgba(255,255,255,.18);
  transition: color .15s, transform .15s;
}
.stars label:hover,
.stars label:hover ~ label,
.stars input:checked ~ label{
  color: #ffc857;
}
.stars label:hover{ transform: scale(1.15); }

/* ---- Badges de thème ---- */
.theme-filters{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.theme-badge{
  display: inline-block; padding: .3rem .8rem; border-radius: 999px;
  background: rgba(108,92,255,.12); color: var(--accent-2); font-size: .78rem;
  font-weight: 700; text-decoration: none; border: 1px solid rgba(108,92,255,.3);
}
.theme-badge:hover{ background: rgba(108,92,255,.22); text-decoration: none; }
.theme-badge--active{ background: var(--accent-grad); color: #fff; border-color: transparent; }
.theme-badge--small{ display: inline-block; margin: .3rem 0; }

/* ---- Commentaires ---- */
.comments-block{ margin: 3rem 0; }
.comment-item{
  padding: 1.2rem 0; border-bottom: 1px solid var(--border);
}
.comment-meta{ display: flex; gap: .8rem; align-items: baseline; margin-bottom: .4rem; }
.comment-meta time{ color: var(--text-muted); font-size: .8rem; }
.comment-body{ color: var(--text-muted); line-height: 1.6; }
.comment-form{ margin-top: 1.5rem; max-width: 100%; }