/* ══════════════════════════════════════════════════════
   HIAD — How I Am Doing · Design System
   Dark navy + teal · ivlabs.one
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap&font-display=swap');

:root {
  --bg:       #0E1A28;
  --bg2:      #152236;
  --bg3:      #1A2B40;
  --surface:  #1C2E44;
  --surface2: #233550;
  --ink:      #FFFFFF;
  --ink2:     #E4EBF3;
  --slate:    rgba(228,235,243,.65);
  --dim:      rgba(228,235,243,.38);
  --line:     rgba(255,255,255,.09);
  --line2:    rgba(255,255,255,.16);

  --teal:     #00CEC8;
  --teal-l:   #00DDD7;
  --teal-d:   #009E9A;
  --teal-btn: linear-gradient(135deg,#00D4C8 0%,#0099B4 100%);
  --teal-glow:0 4px 24px rgba(0,206,200,.30);

  --s1: 0 1px 3px rgba(0,0,0,.3);
  --s2: 0 4px 16px rgba(0,0,0,.35);
  --s3: 0 8px 32px rgba(0,0,0,.4);
  --s4: 0 16px 56px rgba(0,0,0,.45);

  --r:   8px;
  --rm:  14px;
  --rl:  20px;
  --rx:  28px;

  --serif:  'Fraunces', Georgia, serif;
  --sans:   'Inter', system-ui, -apple-system, sans-serif;
  --grsk:   'Space Grotesk', system-ui, sans-serif;

  --max:      740px;
  --max-wide: 1100px;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);background:var(--bg);color:var(--ink2);
  -webkit-font-smoothing:antialiased;line-height:1.68;
  min-height:100vh;display:flex;flex-direction:column;
}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.2;}
a{color:var(--teal);text-decoration:none;}
a:hover{color:var(--teal-l);text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:rgba(0,206,200,.22);color:#fff;}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--max);margin:0 auto;padding:2.5rem 1.5rem;flex:1;}
.container-wide{width:100%;max-width:var(--max-wide);margin:0 auto;padding:0 2rem;}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header{
  background:rgba(14,26,40,.88);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;transition:box-shadow .2s;
}
.site-header.scrolled{box-shadow:var(--s2);}
.header-inner{
  max-width:var(--max-wide);margin:0 auto;
  padding:.9rem 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.site-brand{display:flex;flex-direction:column;gap:1px;}
.site-title{
  font-family:var(--serif);font-size:1.25rem;font-weight:500;
  color:var(--ink);letter-spacing:-.2px;
}
.site-title:hover{color:var(--teal);}
.site-tag{font-family:var(--grsk);font-size:9px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--dim);}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--teal-btn);color:#fff;
  border:none;border-radius:99px;padding:.7rem 1.8rem;
  font-family:var(--grsk);font-size:.9rem;font-weight:700;
  cursor:pointer;transition:all .2s;box-shadow:var(--teal-glow);
  white-space:nowrap;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 32px rgba(0,206,200,.42);color:#fff;}

.btn-ghost{
  display:inline-block;background:transparent;
  color:var(--slate);border:1.5px solid var(--line2);
  border-radius:var(--r);padding:.55rem 1.2rem;
  font-family:var(--grsk);font-size:.85rem;font-weight:600;
  cursor:pointer;transition:all .18s;
}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);}

.btn-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--grsk);font-size:.9rem;font-weight:600;
  color:var(--slate);cursor:pointer;background:none;border:none;
  transition:color .18s;padding:0;
}
.btn-link:hover{color:var(--ink);}

.btn-danger{
  display:inline-block;background:transparent;
  color:#F87171;border:1px solid rgba(248,113,113,.3);
  border-radius:6px;padding:.3rem .8rem;
  font-family:var(--grsk);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;
}
.btn-danger:hover{background:#F87171;color:#fff;border-color:#F87171;}

.btn-edit{
  display:inline-block;background:transparent;color:var(--dim);
  border:1px solid var(--line);border-radius:6px;padding:.3rem .8rem;
  font-family:var(--grsk);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s;
}
.btn-edit:hover{border-color:var(--teal);color:var(--teal);}

/* ── Hero section ────────────────────────────────────────────────────────── */
.hero{
  background:linear-gradient(135deg,#0D1B2A 0%,#12263D 50%,#0A1E30 100%);
  padding:72px 2rem 80px;position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 80% 50%,rgba(0,156,156,.1) 0%,transparent 65%);
}
.hero-inner{
  max-width:var(--max-wide);margin:0 auto;
  display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:center;
}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:40px;}}
.hero-badge{
  display:inline-flex;align-items:center;
  background:var(--surface);border:1px solid var(--line2);
  border-radius:99px;padding:.45rem 1.1rem;
  font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--ink);
  margin-bottom:1.5rem;box-shadow:var(--s1);
}
.hero h1{
  font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.9rem);font-weight:400;
  letter-spacing:-.4px;line-height:1.18;margin-bottom:.7rem;color:var(--ink);
}
.hero-sub{
  font-family:var(--grsk);font-size:.85rem;font-weight:600;letter-spacing:.5px;
  color:var(--teal);margin-bottom:1.4rem;
}
.hero-body{font-size:1rem;color:var(--slate);line-height:1.8;margin-bottom:2rem;max-width:480px;}
.hero-btns{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.hero-card{
  background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--rl);padding:1.8rem;box-shadow:var(--s2);
}
.hero-card-title{
  font-family:var(--grsk);font-size:.7rem;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--dim);margin-bottom:1.2rem;
}
.hero-card ul{list-style:none;display:flex;flex-direction:column;gap:.85rem;}
.hero-card li{
  display:flex;align-items:flex-start;gap:.75rem;
  font-size:.9rem;color:var(--ink2);line-height:1.6;
}
.hero-card li::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--teal);margin-top:.45rem;flex-shrink:0;
}
.hero-card-footer{
  margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line);
  font-family:var(--serif);font-style:italic;font-size:.85rem;color:var(--dim);
}

/* ── Posts section ───────────────────────────────────────────────────────── */
.posts-section{padding:56px 2rem;}
.posts-section-inner{max-width:var(--max-wide);margin:0 auto;}
.posts-section-hd{
  font-family:var(--grsk);font-size:.7rem;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--teal);margin-bottom:1.6rem;
}

/* ── Page intro (admin/post pages) ──────────────────────────────────────── */
.page-intro{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--line);}
.page-intro h1{font-family:var(--serif);font-size:2.2rem;font-weight:400;margin-bottom:.5rem;letter-spacing:-.3px;}
.page-intro p{color:var(--slate);font-size:1rem;}
.page-eyebrow{font-family:var(--grsk);font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:.6rem;}

/* ── Loading / empty ─────────────────────────────────────────────────────── */
.loading-state,.empty-state{
  text-align:center;color:var(--dim);padding:3.5rem 1rem;
  font-family:var(--serif);font-style:italic;font-size:1rem;
}

/* ── Posts grid ──────────────────────────────────────────────────────────── */
.posts-grid{display:grid;gap:1rem;}

.post-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rl);box-shadow:var(--s1);overflow:hidden;
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .2s;
}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--s3);border-color:var(--line2);}

.post-card-cover{width:100%;height:200px;object-fit:cover;}
.post-card-body{padding:1.5rem;}

.post-card-meta{
  font-family:var(--grsk);font-size:.72rem;font-weight:600;letter-spacing:.3px;
  color:var(--dim);margin-bottom:.7rem;display:flex;gap:.9rem;flex-wrap:wrap;
}
.post-card-title{
  font-family:var(--serif);font-size:1.35rem;font-weight:400;
  margin-bottom:.65rem;line-height:1.28;
}
.post-card-title a{color:var(--ink);}
.post-card-title a:hover{color:var(--teal);}

.post-card-excerpt{
  color:var(--slate);font-size:.9rem;margin-bottom:1.1rem;line-height:1.72;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.post-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.8rem;color:var(--dim);
}
.post-card-footer a{
  font-family:var(--grsk);font-size:.8rem;font-weight:700;color:var(--teal);
  display:inline-flex;align-items:center;gap:4px;transition:gap .15s;
}
.post-card-footer a:hover{gap:8px;}

/* ── Full post ───────────────────────────────────────────────────────────── */
.post-full{margin-bottom:3rem;}
.post-full-cover{width:100%;max-height:400px;object-fit:cover;border-radius:var(--rm);margin-bottom:1.8rem;}
.post-full-meta{font-family:var(--grsk);font-size:.72rem;font-weight:600;letter-spacing:.3px;color:var(--dim);margin-bottom:.8rem;}
.post-full-title{font-family:var(--serif);font-size:2.2rem;font-weight:400;letter-spacing:-.4px;line-height:1.2;margin-bottom:1.8rem;}
.post-full-body{font-size:1.05rem;line-height:1.85;color:var(--ink2);}
.post-full-body p{margin-bottom:1.2rem;}

/* ── Reactions ───────────────────────────────────────────────────────────── */
.reactions-section{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rm);padding:1.5rem;margin-bottom:2rem;box-shadow:var(--s1);
}
.reactions-section h3{
  font-family:var(--grsk);font-size:.7rem;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--dim);margin-bottom:1rem;
}
.reaction-bar{display:flex;gap:.6rem;flex-wrap:wrap;}
.reaction-btn{
  display:flex;align-items:center;gap:.4rem;
  background:var(--bg2);border:1.5px solid var(--line);
  border-radius:99px;padding:.4rem 1rem;font-size:1.1rem;
  cursor:pointer;transition:all .18s;font-family:inherit;color:var(--ink);
}
.reaction-btn:hover{border-color:var(--teal);background:rgba(0,206,200,.1);transform:scale(1.05);}
.reaction-btn.active{border-color:var(--teal);background:rgba(0,206,200,.12);}
.reaction-btn .count{font-family:var(--grsk);font-size:.78rem;font-weight:700;color:var(--dim);}
.reaction-btn.active .count{color:var(--teal);}

/* ── Comments ────────────────────────────────────────────────────────────── */
.comments-section{margin-bottom:3rem;}
.comments-section h3{font-family:var(--serif);font-size:1.3rem;font-weight:400;margin-bottom:1.5rem;color:var(--ink);}
.comments-list{margin-bottom:2rem;}
.comment-item{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rm);padding:1.1rem 1.4rem;margin-bottom:.75rem;
  box-shadow:var(--s1);position:relative;
}
.comment-header{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.4rem;flex-wrap:wrap;}
.comment-author{font-family:var(--grsk);font-weight:700;font-size:.9rem;color:var(--ink);}
.comment-date{font-size:.72rem;color:var(--dim);}
.comment-text{font-size:.92rem;white-space:pre-wrap;word-break:break-word;color:var(--ink2);}
.comment-delete{position:absolute;top:.8rem;right:.8rem;display:none;}

.comment-form-wrap{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rm);padding:1.5rem;box-shadow:var(--s1);
}
.comment-form-wrap h4{font-family:var(--serif);font-size:1.1rem;font-weight:400;margin-bottom:1rem;color:var(--ink);}
.comment-form{display:flex;flex-direction:column;gap:.75rem;}
.comment-form input,.comment-form textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r);
  padding:.65rem 1rem;font-family:var(--sans);font-size:.9rem;
  background:var(--bg2);color:var(--ink);transition:border-color .18s;resize:vertical;
}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--teal);}
.form-error{color:#F87171;font-family:var(--grsk);font-size:.78rem;margin-top:.3rem;}

/* ── Admin ────────────────────────────────────────────────────────────────── */
.auth-card{
  max-width:400px;margin:5rem auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rl);padding:2.5rem;box-shadow:var(--s3);
}
.auth-card h2{font-family:var(--serif);font-size:1.6rem;font-weight:400;margin-bottom:.4rem;color:var(--ink);}
.auth-card p{color:var(--slate);margin-bottom:1.5rem;font-size:.92rem;}
.auth-card form{display:flex;flex-direction:column;gap:.75rem;}
.auth-card input{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r);
  padding:.65rem 1rem;font-size:.9rem;font-family:var(--sans);
  background:var(--bg2);color:var(--ink);transition:border-color .18s;
}
.auth-card input:focus{outline:none;border-color:var(--teal);}

.admin-section{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rm);padding:2rem;margin-bottom:1.5rem;box-shadow:var(--s1);
}
.admin-section h2{font-family:var(--serif);font-size:1.4rem;font-weight:400;margin-bottom:1.4rem;color:var(--ink);}
.form-group{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.85rem;}
.form-group label{font-family:var(--grsk);font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);}
.form-group input,.form-group textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r);
  padding:.65rem 1rem;font-family:var(--sans);font-size:.9rem;
  background:var(--bg2);color:var(--ink);resize:vertical;transition:border-color .18s;
}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--teal);}
.form-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;}

.admin-posts-list{display:flex;flex-direction:column;gap:.75rem;}
.admin-post-item{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg2);flex-wrap:wrap;transition:border-color .15s;
}
.admin-post-item:hover{border-color:var(--line2);}
.admin-post-info{flex:1;min-width:0;}
.admin-post-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.2rem;font-size:.9rem;color:var(--ink);}
.admin-post-meta{font-family:var(--grsk);font-size:.7rem;color:var(--dim);}
.admin-post-actions{display:flex;gap:.5rem;flex-shrink:0;}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer{
  background:#070F19;
  border-top:1px solid var(--line);
  font-family:var(--grsk);
}
.footer-top{
  max-width:var(--max-wide);margin:0 auto;
  padding:2.5rem 2rem 2rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.footer-brand{max-width:340px;}
.footer-label{
  font-size:.68rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--dim);margin-bottom:.7rem;
}
.footer-tagline{
  font-family:var(--serif);font-size:1.2rem;font-weight:400;
  color:var(--teal);margin-bottom:.6rem;line-height:1.3;
}
.footer-desc{font-size:.88rem;color:var(--slate);line-height:1.7;}
.footer-nav{
  display:flex;gap:2rem;align-items:center;flex-wrap:wrap;padding-top:.3rem;
}
.footer-nav a{
  font-size:.88rem;font-weight:600;color:var(--dim);
  transition:color .15s;
}
.footer-nav a:hover{color:var(--teal);}
.footer-bottom{
  max-width:var(--max-wide);margin:0 auto;
  padding:.9rem 2rem;
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.footer-copy{font-size:.75rem;color:var(--dim);}
.footer-motto{font-size:.75rem;color:var(--dim);font-style:italic;}
.footer-admin-link{font-size:.75rem;color:var(--dim);opacity:.45;transition:opacity .15s;}
.footer-admin-link:hover{opacity:1;color:var(--teal);}

/* ── Présentation ────────────────────────────────────────────────────────── */
.presentation{
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  padding:80px 2rem;
  border-top:1px solid var(--line);
}
.presentation-inner{max-width:680px;margin:0 auto;}
.pres-eyebrow{
  font-family:var(--grsk);font-size:.68rem;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--dim);margin-bottom:1rem;
}
.pres-title{
  font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:400;
  letter-spacing:-.3px;color:var(--ink);margin-bottom:1.6rem;line-height:1.2;
}
.pres-body{
  font-size:1rem;color:var(--slate);line-height:1.85;margin-bottom:1.3rem;
}
.pres-quote{
  background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--rm);padding:1.2rem 1.6rem;
  font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ink);
  margin:1.8rem 0;box-shadow:var(--s1);
}
.pres-closing{color:var(--teal);font-style:italic;}

/* ── Mot aux proches ─────────────────────────────────────────────────────── */
.mot-proches{
  background:var(--bg3);
  padding:80px 2rem;border-top:1px solid var(--line);
}
.mot-proches-inner{
  max-width:var(--max-wide);margin:0 auto;
  display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:start;
}
@media(max-width:900px){.mot-proches-inner{grid-template-columns:1fr;gap:40px;}}
.mot-left .mot-eyebrow{
  font-family:var(--grsk);font-size:.68rem;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--dim);margin-bottom:1rem;
}
.mot-left h2{
  font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;
  letter-spacing:-.3px;color:var(--ink);margin-bottom:1.6rem;line-height:1.22;
}
.mot-left p{font-size:1rem;color:var(--slate);line-height:1.85;margin-bottom:1.2rem;}
.mot-card{
  background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--rl);padding:2rem;box-shadow:var(--s2);
}
.mot-quote{
  font-family:var(--serif);font-size:1.15rem;font-weight:400;font-style:italic;
  color:var(--ink);line-height:1.65;margin-bottom:1rem;
}
.mot-quote-attr{
  font-family:var(--grsk);font-size:.78rem;color:var(--dim);
  margin-bottom:1.4rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line);
}
.mot-card-note{font-size:.9rem;color:var(--slate);line-height:1.7;}

/* ── Clôture ─────────────────────────────────────────────────────────────── */
.cloture{
  background:linear-gradient(180deg,var(--bg3) 0%,#070F19 100%);
  padding:80px 2rem 96px;border-top:1px solid var(--line);text-align:center;
}
.cloture-inner{max-width:580px;margin:0 auto;}
.cloture-eyebrow{
  font-family:var(--grsk);font-size:.68rem;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--dim);margin-bottom:1.4rem;
}
.cloture h2{
  font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;
  letter-spacing:-.3px;color:var(--ink);margin-bottom:1.4rem;line-height:1.25;
}
.cloture-body{font-size:1rem;color:var(--slate);line-height:1.85;margin-bottom:1rem;}
.cloture-signature{
  margin-top:2.5rem;
  font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--teal);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:640px){
  .hero{padding:48px 1.25rem 56px;}
  .posts-section{padding:40px 1.25rem;}
  .post-full-title{font-size:1.7rem;}
  .header-inner{padding:.8rem 1rem;}
  .container{padding:2rem 1rem;}
  .admin-section{padding:1.25rem;}
  .hero-btns{flex-direction:column;align-items:flex-start;}
}