/* ============================================================
   GV INFORMATIQUE — BASE (reset, typographie, layout, boutons)
   Construit sur css/tokens.css — aucune valeur hors charte.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --header-height: 76px;
  --container: 1160px;
  --gutter: 24px;
  --radius-card: var(--radius-md);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: var(--fw-title);
  line-height: 1.15;
  color: var(--color-signature);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(34px, 5vw, 48px); font-weight: 800; }
h2 { font-size: clamp(26px, 4vw, 36px); }
h3 { font-size: 24px; }
p  { margin: 0 0 1em; }

a { color: var(--color-action); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* --- Boutons --- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-title); font-weight: 700; font-size: 16px;
  padding: .85em 1.6em; border-radius: var(--radius-pill); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .2s, color .2s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-action); color: var(--color-white); }
.btn-primary:hover { background: var(--color-signature); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--color-signature); border-color: var(--color-signature); }
.btn-secondary:hover { background: var(--color-signature); color: var(--color-white); text-decoration: none; }
.btn-outline-light { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,.7); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); text-decoration: none; }

/* --- Focus visible --- */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }

/* --- Sections --- */
.section { padding-block: 72px; }
.section-alt { background: var(--color-bg-alt); padding-block: 72px; }
.section-dark { background: var(--color-signature); color: var(--color-white); }
.section-dark h2, .section-dark h3 { color: var(--color-white); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-kicker {
  font-family: var(--font-title); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: 13px; color: var(--color-action); margin-bottom: 8px;
}
.hero .section-kicker, .page-head .section-kicker { color: var(--color-sky); }
.section-alt .section-kicker { color: var(--color-signature); }

/* --- Divers utilitaires --- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-white); color: var(--color-signature); padding: 8px 16px; z-index: 1000; }
.skip-link:focus { left: 8px; top: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .hero-video, .hero-video-el, .hero-video-youtube { display: none; }
}