/* IDE Technologies · IDE Labs — thème v1
   Papier chaud, encre jamais noire, un seul mot d'accent par titre, grands arrondis,
   ombres teintées, un assistant-personnage. Référence : MASTER.md à la racine. */

:root {
  /* Base */
  --paper: #FAF7F2;
  --band: #F3ECE1;
  --card: #FFFFFF;
  --line: #EAE1D3;
  --line-soft: #F1EAE0;
  --line-strong: #DCCDB6;
  --ink: #221E19;
  --ink-2: #4C463C;
  --ink-3: #6E6456;

  /* Accent IDE : braise */
  --accent: #E2501F;
  --accent-deep: #B53C12;
  --accent-soft: #FDEDE4;
  --accent-ring: #F6C9B3;
  --accent-bright: #F58A57;

  /* Sémantique */
  --ok-bg: #EAF7EF;
  --ok-fg: #1F6B43;
  --info-bg: #E7F1FD;
  --info-fg: #1E4E96;
  --warn-bg: #FFF4E0;
  --warn-fg: #92400E;

  /* Produits */
  --dietmate: #E4531C;
  --naru: #E0442A;
  --memento: #2F5BFF;
  --idel: #8EC4F6;
  --genius: #2448FF;
  --linkedin: #0A66C2;
  --whatsapp: #128C4A;

  /* Typographie */
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Formes */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Profondeur : toujours teintée de brun, jamais grise */
  --shadow-1: 0 1px 2px rgba(82, 53, 25, .06), 0 6px 16px -12px rgba(82, 53, 25, .18);
  --shadow-2: 0 1px 2px rgba(82, 53, 25, .04), 0 14px 32px -20px rgba(82, 53, 25, .26);
  --shadow-3: 0 2px 6px rgba(82, 53, 25, .06), 0 26px 50px -26px rgba(82, 53, 25, .36);
  --shadow-float: 0 1px 2px rgba(82, 53, 25, .08), 0 20px 44px -18px rgba(82, 53, 25, .5);
  --glow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 26px -14px rgba(204, 74, 20, .95);
  --btn-gradient: linear-gradient(180deg, #E8622E 0%, #CC4A14 50%, #B83D0C 100%);

  /* Mouvement */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms;
  --t-med: 420ms;
  --t-slow: 650ms;

  /* Mise en page */
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-deep); }
a:hover { color: #8F2F0E; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }
.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;
}

/* Typographie */
.eyebrow { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
.eyebrow--muted { color: var(--ink-3); font-size: 12px; }
.display { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.032em; line-height: 1.02; color: var(--ink); }
.display--1 { font-size: clamp(44px, 6.3vw, 92px); line-height: .98; letter-spacing: -.035em; }
.display--2 { font-size: clamp(34px, 4.4vw, 62px); }
.display--3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.022em; }
.accent { color: var(--accent); }
.lead { margin: 0; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.62; color: var(--ink-2); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--lg { min-height: 58px; padding: 0 26px; font-size: 17px; }
.btn--primary { background: var(--btn-gradient); color: #FFFFFF; box-shadow: var(--glow); }
.btn--primary:hover { color: #FFFFFF; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 30px -14px rgba(204, 74, 20, 1); }
.btn--ghost { background: rgba(255, 255, 255, .6); border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: #FFFFFF; color: var(--ink); box-shadow: var(--shadow-1); }
.btn--dark { background: var(--ink); color: var(--paper); box-shadow: 0 10px 24px -12px rgba(34, 30, 25, .6); }
.btn--dark:hover { color: var(--paper); transform: translateY(-1px); }
.btn--icon-lead { padding-left: 9px; }
.btn__bubble { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.btn svg { flex: none; }

/* Puces, statuts, étiquettes */
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--paper); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.chip--white { background: #FFFFFF; }
.chip--ok { background: var(--ok-bg); color: var(--ok-fg); }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.chip__logo { width: 20px; height: 20px; border-radius: 6px; object-fit: contain; background: #FFFFFF; }
.chip--logo { padding-left: 5px; padding-right: 11px; font-size: 12.5px; white-space: nowrap; }
.status { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.status--live { background: var(--ok-bg); color: var(--ok-fg); }
.status--store { background: var(--accent-soft); color: var(--accent-deep); }
.status--cert { background: var(--info-bg); color: var(--info-fg); }
.status--review { background: var(--warn-bg); color: var(--warn-fg); }
.tag { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.num { align-self: flex-start; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--accent-deep); background: var(--accent-soft); border-radius: var(--r-pill); padding: 5px 10px; }

/* Cartes */
.card { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.card--lift { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.card--lift:hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(82, 53, 25, .06), 0 30px 56px -28px rgba(82, 53, 25, .4); }
.logo { flex: none; object-fit: contain; border-radius: var(--r-md); background: #FFFFFF; box-shadow: 0 1px 2px rgba(82, 53, 25, .1), 0 6px 14px -10px rgba(82, 53, 25, .3); }
.logo--pad { padding: 16%; background: #F2F5FF; }
.logo--memento { padding: 17%; background: #EEF2FF; }

/* L'agent IDE : un orbe nacré à deux yeux, les produits en orbite */
.orb { --size: 60px; position: relative; display: inline-block; flex: none; width: var(--size); height: var(--size); }
.orb--26 { --size: 26px; }
.orb--30 { --size: 30px; }
.orb--38 { --size: 38px; }
.orb--54 { --size: 54px; }
.orb--60 { --size: 60px; }
.orb--112 { --size: 112px; }
.orb--150 { --size: 150px; }
.orb__halo { position: absolute; inset: -42%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 176, 128, .5) 0%, rgba(255, 176, 128, 0) 62%); }
.orb__orbit { position: absolute; inset: -16%; border-radius: 50%; border: 1px solid rgba(34, 30, 25, .1); animation: orb-orbit 18s linear infinite; }
.orb__orbit i { position: absolute; width: 9%; height: 9%; min-width: 5px; min-height: 5px; border-radius: 50%; }
.orb__orbit i:nth-child(1) { top: -4.5%; left: 45.5%; background: var(--dietmate); }
.orb__orbit i:nth-child(2) { bottom: -4.5%; left: 45.5%; background: var(--memento); }
.orb__orbit i:nth-child(3) { left: -4.5%; top: 45.5%; background: var(--naru); }
.orb__orbit i:nth-child(4) { right: -4.5%; top: 45.5%; background: var(--idel); }
.orb__body {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #FFFFFF 0%, #FFF4E8 28%, #FADFC8 56%, #F1BF98 80%, #E59C6E 100%);
  box-shadow: inset 0 calc(var(--size) * -.1) calc(var(--size) * .22) rgba(196, 104, 52, .28),
              inset 0 calc(var(--size) * .07) calc(var(--size) * .15) rgba(255, 255, 255, .95),
              0 calc(var(--size) * .22) calc(var(--size) * .45) calc(var(--size) * -.2) rgba(120, 62, 24, .5);
  animation: orb-breathe 5s ease-in-out infinite;
}
.orb__eye { position: absolute; top: 37%; width: 10%; height: 21%; border-radius: var(--r-pill); background: #2A211B; animation: orb-blink 6s infinite; }
.orb__eye--l { left: 31%; }
.orb__eye--r { right: 31%; }
.orb--rings::before, .orb--rings::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(226, 80, 31, .45); animation: orb-ring 2.4s ease-out infinite; }
.orb--rings::after { animation-delay: 1.2s; }
.orb--still .orb__body, .orb--still .orb__eye { animation: none; }

@keyframes orb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes orb-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes orb-ring { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.62); opacity: 0; } }
@keyframes orb-orbit { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}