/* ==========================================================================
   RamoPlus — Design System / Tokens
   Palette « braise & suie » : chaleur du feu, rigueur de l'artisan.
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
body { min-height: 100svh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
/* Les composants déclarent display:flex/grid, ce qui l'emporte sur la
   feuille de style du navigateur : on réaffirme [hidden]. */
[hidden] { display: none !important; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }
:target { scroll-margin-top: 6rem; }

/* ---------- 2. Tokens : mode clair (défaut) ---------- */
:root {
  /* Surfaces */
  --c-bg:        #FAFAF9;
  --c-bg-sunk:   #F3F4F6;
  --c-surface:   #FFFFFF;
  --c-surface-2: #F8FAFC;

  /* Texte */
  --c-ink:       #0F172A;
  --c-ink-2:     #475569;
  --c-ink-3:     #94A3B8;
  --c-ink-inv:   #FFFFFF;

  /* Traits */
  --c-line:      #E2E8F0;
  --c-line-2:    #CBD5E1;

  /* Braise / Flamme — couleur d'action vive */
  --c-ember:     #FF5500;
  --c-ember-h:   #E64A00;
  --c-ember-s:   #FFF1EB;
  --c-amber:     #F59E0B;
  --c-amber-s:   #FEF3C7;

  /* Suie — sections sombres modernes (Obsidian) */
  --c-soot:      #0B0F17;
  --c-soot-2:    #151D2A;
  --c-soot-3:    #1E293B;

  /* Sémantique */
  --c-jade:      #059669;
  --c-jade-s:    #ECFDF5;
  --c-danger:    #DC2626;
  --c-danger-s:  #FEF2F2;

  /* Rayons */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 36px; --r-full: 9999px;

  /* Ombres modernes ultra-douces */
  --sh-1: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.03);
  --sh-2: 0 4px 16px -2px rgba(15,23,42,0.05), 0 2px 6px -1px rgba(15,23,42,0.04);
  --sh-3: 0 12px 32px -4px rgba(15,23,42,0.08), 0 4px 12px -2px rgba(15,23,42,0.04);
  --sh-4: 0 24px 54px -8px rgba(15,23,42,0.12), 0 8px 24px -4px rgba(15,23,42,0.06);
  --sh-ember: 0 8px 24px rgba(255,85,0,0.28);

  /* Rythme */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;   --sp-10: 8rem;

  /* Largeurs */
  --w-max: 1240px;
  --w-prose: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Typo */
  --f-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  --t-xs:   .75rem;
  --t-sm:   .8125rem;
  --t-base: .9375rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.125rem, .95rem + .7vw, 1.375rem);
  --t-xl:   clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --t-2xl:  clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  --t-3xl:  clamp(2.25rem, 1.55rem + 2.9vw, 3.5rem);
  --t-4xl:  clamp(2.75rem, 1.6rem + 4.7vw, 4.5rem);

  /* Transitions */
  --ez: cubic-bezier(.22,.61,.36,1);
  --ez-out: cubic-bezier(.16,1,.3,1);
  --tr: 220ms var(--ez);

  color-scheme: light;
}

/* ---------- 3. Tokens : mode sombre optionnel via [data-theme="dark"] ---------- */
:root[data-theme="dark"] {
  --c-bg:        #0B0F17;
  --c-bg-sunk:   #06090E;
  --c-surface:   #151D2A;
  --c-surface-2: #1E293B;
  --c-ink:       #F8FAFC;
  --c-ink-2:     #CBD5E1;
  --c-ink-3:     #94A3B8;
  --c-ink-inv:   #0F172A;
  --c-line:      rgba(255, 255, 255, 0.12);
  --c-line-2:    rgba(255, 255, 255, 0.22);
  --c-ember:     #FF5500;
  --c-ember-h:   #FF702E;
  --c-ember-s:   rgba(255, 85, 0, 0.15);
  --c-amber:     #F59E0B;
  --c-amber-s:   rgba(245, 158, 11, 0.15);
  --c-soot:      #06090E;
  --c-soot-2:    #0B0F17;
  --c-soot-3:    #151D2A;
  --c-jade:      #10B981;
  --c-jade-s:    rgba(16, 185, 129, 0.15);
  --c-danger:    #EF4444;
  --c-danger-s:  rgba(239, 68, 68, 0.15);
  --sh-1: 0 1px 3px rgba(0,0,0,.3);
  --sh-2: 0 4px 16px rgba(0,0,0,.4);
  --sh-3: 0 12px 32px rgba(0,0,0,.5);
  --sh-4: 0 24px 54px rgba(0,0,0,.6);
  --sh-ember: 0 6px 22px rgba(255,85,0,.35);
  color-scheme: dark;
}

/* ---------- 4. Base ---------- */
body {
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  transition: background-color var(--tr), color var(--tr);
}

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--c-ink);
}
h1 { font-size: var(--t-4xl); font-weight: 800; letter-spacing: -.04em; }
h2 { font-size: var(--t-3xl); letter-spacing: -.035em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); line-height: 1.25; }

a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection { background: var(--c-ember); color: #fff; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-ember);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---------- 5. Primitives de mise en page ---------- */
.wrap { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 860px; }
.wrap-wide { max-width: 1380px; }
.section { padding-block: clamp(3.5rem, 8vw, 7.5rem); }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.stack > * + * { margin-top: var(--flow, 1.25rem); }
.prose { max-width: var(--w-prose); }
.prose p { color: var(--c-ink-2); }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 1.15em; }
.prose h2 { margin-top: 2.2em; margin-bottom: .5em; }
.prose h3 { margin-top: 1.8em; margin-bottom: .4em; }
.prose ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.prose ul li { position: relative; padding-left: 1.6rem; color: var(--c-ink-2); }
.prose ul li::before {
  content: ''; position: absolute; left: .2rem; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-ember);
}
.prose strong { color: var(--c-ink); font-weight: 650; }
.prose a { color: var(--c-ember); font-weight: 550; }

.grid { display: grid; gap: var(--sp-5); }
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.center { text-align: center; }
.center .prose { margin-inline: auto; }

/* ---------- 6. Typographie utilitaire ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-ember);
}
.eyebrow::before {
  content: ''; width: 22px; height: 1.5px; background: currentColor; opacity: .55;
}
.eyebrow.no-rule::before { display: none; }
.lede { font-size: var(--t-lg); line-height: 1.5; color: var(--c-ink-2); font-weight: 400; }
.muted { color: var(--c-ink-3); }
.small { font-size: var(--t-base); }
.tiny { font-size: var(--t-xs); }
.num { font-variant-numeric: tabular-nums; }
.ember-text { color: var(--c-ember); }

/* Titre avec un mot souligné à la craie */
.mark { position: relative; white-space: nowrap; color: var(--c-ember); }
.mark::after {
  content: ''; position: absolute; left: -.04em; right: -.04em; bottom: .04em;
  height: .34em; background: currentColor; opacity: .16; border-radius: .12em; z-index: -1;
}

/* ---------- 7. Boutons ---------- */
.btn {
  --btn-bg: var(--c-ember); --btn-fg: #fff; --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .875rem 1.5rem;
  font-family: var(--f-body); font-size: var(--t-base); font-weight: 620;
  letter-spacing: -.005em; line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--r-full);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ez), box-shadow var(--tr), background-color var(--tr), border-color var(--tr), color var(--tr), opacity var(--tr);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; transform: none; }
.btn svg { flex: none; }

.btn-primary { box-shadow: var(--sh-ember); }
.btn-primary:hover { --btn-bg: var(--c-ember-h); box-shadow: 0 10px 26px rgba(217,72,26,.34); }

.btn-dark { --btn-bg: var(--c-ink); --btn-fg: var(--c-bg); box-shadow: var(--sh-2); }
.btn-dark:hover { box-shadow: var(--sh-3); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-bd: var(--c-line-2); }
.btn-ghost:hover { --btn-bd: var(--c-ink); background: var(--c-surface); }

.btn-light { --btn-bg: #fff; --btn-fg: var(--c-soot); box-shadow: var(--sh-2); }
.btn-light:hover { box-shadow: var(--sh-3); }

.btn-outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.28); }
.btn-outline-light:hover { --btn-bd: rgba(255,255,255,.7); background: rgba(255,255,255,.07); }

.btn-lg { padding: 1.0625rem 1.9rem; font-size: var(--t-md); }
.btn-sm { padding: .625rem 1.05rem; font-size: var(--t-sm); }
.btn-block { width: 100%; }

/* Sur écran étroit, un libellé long doit pouvoir passer à la ligne plutôt
   que de faire déborder la page. */
@media (max-width: 480px) {
  .btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }
}

/* Lien fléché */
.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: var(--t-base); color: var(--c-ember);
  text-decoration: none;
}
.link-arrow svg { transition: transform 200ms var(--ez); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- 8. Pastilles & badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .75rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: -.005em;
  border-radius: var(--r-full);
  background: var(--c-bg-sunk); color: var(--c-ink-2);
  border: 1px solid var(--c-line);
}
.chip-ember { background: var(--c-ember-s); color: var(--c-ember); border-color: transparent; }
.chip-jade  { background: var(--c-jade-s);  color: var(--c-jade);  border-color: transparent; }
.chip-amber { background: var(--c-amber-s); color: #A66A12; border-color: transparent; }
:root[data-theme="dark"] .chip-amber { color: var(--c-amber); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-amber { color: var(--c-amber); } }
.chip-glass {
  background: rgba(255,255,255,.09); color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.16); backdrop-filter: blur(8px);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip .dot-live { background: #35D07F; box-shadow: 0 0 0 0 rgba(53,208,127,.6); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(53,208,127,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(53,208,127,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,208,127,0); }
}

/* ---------- 9. Cartes ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--c-line-2); }
.card-flush { padding: 0; overflow: hidden; }

/* ---------- 10. Sections sombres ---------- */
.on-soot {
  background: var(--c-soot); color: #EDE6DE;
  --c-ink: #FDFBF8; --c-ink-2: #B8ADA3; --c-ink-3: #8C8177;
  --c-line: rgba(255,255,255,.10); --c-line-2: rgba(255,255,255,.20);
  --c-surface: rgba(255,255,255,.045); --c-surface-2: rgba(255,255,255,.075);
  --c-bg-sunk: rgba(255,255,255,.05);
  --c-ember: #FF7038;
}
.on-soot h1, .on-soot h2, .on-soot h3, .on-soot h4 { color: #FDFBF8; }

/* ---------- 11. Révélation au scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .75s var(--ez-out), transform .75s var(--ez-out); }
.reveal[data-d="1"].in { transition-delay: .07s; }
.reveal[data-d="2"].in { transition-delay: .14s; }
.reveal[data-d="3"].in { transition-delay: .21s; }
.reveal[data-d="4"].in { transition-delay: .28s; }
.reveal[data-d="5"].in { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- 12. Divers ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; translate: -50% -150%; z-index: 999;
  padding: .8rem 1.4rem; background: var(--c-ember); color: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 600; text-decoration: none;
  transition: translate 200ms var(--ez);
}
.skip-link:focus { translate: -50% 0; }
.hr { height: 1px; background: var(--c-line); border: 0; }
.noise { position: relative; }
.noise::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}