@import url("/assets/css/components/polices.css");
@import url("/assets/css/components/colors.css");
@import url("/assets/css/components/styles.css");
@import url("/assets/css/components/buttons.css");
@import url("/assets/css/components/cookies.css");
@import url("/assets/css/components/navbar.css");
@import url("/assets/css/components/tarif.css");
@import url("/assets/css/components/dev.css");


/* ===== Universal Headings (place at the end of main.css) ===== */
:root{
  --hd-fg: #0f1419;
  --hd-accent: #1fc2a0;
  --hd-font: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
}

/* sizes (re-usable) */
.page-title   { font-family: var(--hd-font); font-weight: 900; letter-spacing: .2px;
                font-size: clamp(42px, 8vw, 76px); line-height: 1.02; margin: 0 0 .35em; color: var(--hd-fg); }
.section-title{ font-family: var(--hd-font); font-weight: 900; letter-spacing: .2px;
                font-size: clamp(32px, 6vw, 56px); line-height: 1.05; margin: 0 0 .35em; color: var(--hd-fg); }
.detail-title { font-family: var(--hd-font); font-weight: 900; letter-spacing: .2px;
                font-size: clamp(32px, 6vw, 56px); line-height: 1.05; margin: 0 0 .35em; color: var(--hd-fg); }
.card-title   { font-family: var(--hd-font); font-weight: 900; letter-spacing: .2px;
                font-size: clamp(20px, 3.5vw, 28px); line-height: 1.1;  margin: 0 0 .35em; color: var(--hd-fg); }

/* optional accents */
.accent { color: var(--hd-accent); }

/* subtle underline on hover (works everywhere you reuse the classes) */
.heading--underline {
  position: relative; display: inline-block; padding-bottom: .18em;
}
.heading--underline::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:.18em; border-radius:999px;
  background: linear-gradient(90deg, var(--hd-accent), #00b9ff);
  transform-origin:left center; transform: scaleX(.22);
  transition: transform .35s ease;
}
.heading--underline:hover::after{ transform: scaleX(1); }

/* marker (stabilo) */
.heading-marker {
  display:inline;
  background: linear-gradient(120deg, rgba(31,194,160,.25) 0%, rgba(0,185,255,.25) 100%);
  border-radius: 6px; padding: 0 .2em;
}

/* tech grid backdrop (optional) */
.heading-grid { position: relative; z-index: 1; }
.heading-grid::before {
  content:""; position:absolute; inset:-20% -10% -20% -10%; z-index:-1;
  background:
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(0,185,255,.08) 21px),
    repeating-linear-gradient(0deg,  transparent 0 20px, rgba(0,185,255,.08) 21px);
  opacity:.6; border-radius:12px;
}

/* reveal on scroll (you already have JS) */
.reveal{ opacity:0; transform: translateY(12px); }
.reveal.is-in{ animation: hd-reveal .55s cubic-bezier(.2,.75,.2,1) forwards; }
@keyframes hd-reveal{ to{ opacity:1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; animation:none; }
}

.js-reveal{ opacity:0; transform: translateY(12px); }
.js-reveal.is-in{ opacity:1; transform:none; transition:.55s; }


/* === Headings opt-in === */
/* tailles cohérentes */
.page-title   { font-weight: 900; letter-spacing: .2px; font-size: clamp(42px, 8vw, 76px); line-height: 1.02; margin: 0 0 .35em; }
.section-title{ font-weight: 900; letter-spacing: .2px; font-size: clamp(32px, 6vw, 56px); line-height: 1.05; margin: 0 0 .35em; }
.card-title,
.detail-title { font-weight: 900; letter-spacing: .2px; font-size: clamp(20px, 3.5vw, 28px); line-height: 1.1;  margin: 0 0 .35em; }

/* soulignement discret si tu ajoutes 'heading--underline' */
.heading--underline{ position:relative; display:inline-block; padding-bottom:.18em; }
.heading--underline::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:.18em; border-radius:999px;
  background: linear-gradient(90deg, var(--accent, #1fc2a0), #00b9ff);
  transform-origin:left center; transform:scaleX(.22); transition: transform .3s ease;
}
.heading--underline:hover::after{ transform:scaleX(1); }