/* ================================================================
   HIGYLANG — higylang-layout.css
   ================================================================ */

   3. TYPOGRAPHIE
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hl-font);
  color: var(--hl-heading);
  line-height: 1.22;
  margin-top: 0;
}
h1 { font-size: clamp(1.75rem, 4vw, 3rem);      font-weight: 700; }
h2 { font-size: clamp(1.2rem, 2.5vw, 1.7rem);  font-weight: 700; }
h3 { font-size: clamp(0.95rem, 1.5vw, 1.1rem); font-weight: 600; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.hl-lead  { font-size: 1.075rem; font-weight: 500; color: var(--hl-heading); line-height: 1.65; }
.hl-muted { color: var(--hl-text-muted); }


/* ================================================================
   4. BOUTONS & LIENS
   ================================================================ */
.hl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.6rem 1.45rem;
  border-radius: var(--hl-r);
  font-family: var(--hl-font);
  font-size: 0.9375rem; font-weight: 600;
  transition: background-color var(--hl-t), border-color var(--hl-t),
              color var(--hl-t), transform var(--hl-t), box-shadow var(--hl-t);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}

.hl-btn--primary { background-color: var(--hl-accent); color: #fff; border-color: var(--hl-accent); }
.hl-btn--primary:hover {
  background-color: var(--hl-accent-dk); border-color: var(--hl-accent-dk); color: #fff;
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(155,109,189,0.32);
}

.hl-btn--outline { background: transparent; color: var(--hl-heading); border-color: var(--hl-border); }
.hl-btn--outline:hover { border-color: var(--hl-accent); color: var(--hl-accent-dk); background-color: var(--hl-accent-lt); }

.hl-btn--outline-light { background: transparent; color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.45); }
.hl-btn--outline-light:hover { background-color: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.8); }

.hl-btn--nav {
  padding: 0.4rem 1.1rem; border-radius: 30px;
  border: 2px solid var(--hl-accent); color: var(--hl-accent-dk);
  font-size: 0.875rem; font-weight: 600;
}
.hl-btn--nav:hover { background-color: var(--hl-accent); color: #fff; }

.hl-link-more {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.875rem; font-weight: 600; color: var(--hl-accent-dk);
  transition: gap var(--hl-t), color var(--hl-t);
}
.hl-link-more:hover { gap: 0.55rem; color: var(--hl-accent); }

.hl-badge {
  display: inline-block; padding: 0.2em 0.65em; border-radius: 20px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background-color: var(--hl-accent-lt); color: var(--hl-accent-dk);
}


/* ================================================================
   5. PLACEHOLDERS
   ================================================================ */
.hl-ph {
  display: flex; align-items: center; justify-content: center;
  background-color: var(--hl-bg-alt); border-radius: var(--hl-r-lg);
  color: var(--hl-border); font-size: 2.5rem;
  border: 1.5px dashed var(--hl-border); width: 100%;
}
.hl-ph--portrait  { aspect-ratio: 3/4; min-height: 280px; }
.hl-ph--landscape { aspect-ratio: 4/3; }
.hl-ph--blog      { aspect-ratio: 16/9; border-radius: var(--hl-r) var(--hl-r) 0 0; border-bottom: none; font-size: 1.8rem; }
.hl-ph--portrait-sm { aspect-ratio: 2/3; }
.hl-ph--avatar    { width: 46px; height: 46px; border-radius: 50%; font-size: 1.3rem; flex-shrink: 0; min-height: unset; }


/* ================================================================
   6. SECTIONS — BASE
   ================================================================ */
.hl-section          { padding: var(--hl-sec-py) 0; background-color: var(--hl-bg); }
.hl-section--alt     { background-color: var(--hl-bg-alt); }
.hl-section--accent  { background-color: var(--hl-bg-accent); }

.hl-sec-label {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--hl-accent-dk); margin-bottom: 0.45rem;
}
.hl-sec-title     { color: var(--hl-heading); margin-bottom: 0.9rem; }
.hl-sec-sub       { font-size: 1rem; color: var(--hl-text-muted); max-width: 580px; }
.hl-sec-sub--center { margin-left: auto; margin-right: auto; }

.hl-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.hl-check-list li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.9375rem; color: var(--hl-text-muted); }
.hl-check-list li .bi { color: var(--hl-accent); font-size: 1rem; flex-shrink: 0; margin-top: 0.22rem; }