/* ==========================================================================
   ALMAR GROUPE — RESET, TYPOGRAPHIE, PRIMITIVES DE MISE EN PAGE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
hr { border: 0; height: 1px; background: var(--rule); margin: 0; }

/* --------------------------------------------------------------------------
   Accessibilité
   -------------------------------------------------------------------------- */
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 10000;
  padding: .75rem 1.25rem; background: var(--gold); color: #14100A;
  border-radius: var(--r-sm); font-weight: 600;
  transition: top var(--d-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-family: var(--display);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
h3, h4 { font-weight: 600; letter-spacing: -.012em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Titre de section : chrome pour l'autorité, or pour l'emphase. */
.chrome-txt { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold-txt   { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.lead { font-size: var(--t-lead); line-height: 1.62; color: var(--body); max-width: var(--maxw-text); }

/* Étiquette de section — filet doré, jamais de fioriture. */
.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); opacity: .8; flex: none; }
.eyebrow--bare::before { display: none; }

/* --------------------------------------------------------------------------
   Mise en page
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.sec { padding-block: var(--section-y); position: relative; }
.sec--tight { padding-block: clamp(2.25rem, 4.5vw, 4rem); }
.sec--panel { background: var(--panel); border-block: 1px solid var(--rule); }

/* En-tête de section : titre à gauche, chapô à droite. */
.sec__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sec__head h2 { font-size: var(--t-h2); margin-top: .95rem; max-width: 19ch; }
@media (max-width: 880px) { .sec__head { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 880px) { .split, .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid--2 { grid-template-columns: 1fr; } }

.stack { display: grid; gap: var(--s-5); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mb-6 { margin-bottom: var(--s-6); } .mb-7 { margin-bottom: var(--s-7); }
.text-soft { color: var(--body); }
.text-mute { color: var(--muted); }

/* --------------------------------------------------------------------------
   Révélation au scroll — une opacité et douze pixels, rien de plus.
   Sans JS (ou en reduced-motion), tout est visible par défaut : la classe
   .js n'est posée que si le script s'exécute.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Impression
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}