/* ============================================================
   AtomicMD · pages internes (docs-style : en-tête simple,
   menu latéral par section). Réutilise les tokens de styles.css.
   Tout est cadré sous .doc pour ne jamais toucher l'accueil immersif
   ni les composants d'autres pages.
   ============================================================ */

/* Bascule de langue dans l'en-tête (hors .doc, classe unique) */
.header-lang {
  font-size: 12.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}
.header-lang:hover { color: var(--text); border-color: var(--accent); }
.header-lang b { color: var(--text); font-weight: 700; }

.doc { padding-bottom: 40px; }
.doc sup a { color: var(--accent); font-size: .68em; padding: 0 1px; }

.doc .intro { padding-top: clamp(30px, 6vw, 56px); padding-bottom: 6px; }
.doc .intro .kicker {
  color: var(--accent); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; margin: 0 0 10px;
}
.doc .intro h1 { font-size: clamp(26px, 4.6vw, 40px); letter-spacing: -.02em; margin: 0 0 12px; }
.doc .intro p { color: var(--muted); max-width: 60ch; font-size: 17px; }

.doc .cols {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: clamp(24px, 5vw, 56px);
  padding-top: 30px;
  padding-bottom: 40px;
  align-items: start;
}
.doc .sidemenu { position: sticky; top: 80px; }
.doc .sidemenu .lbl {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px; padding-left: 12px;
}
.doc .sidemenu a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--muted); font-size: 14.5px; cursor: pointer;
  border-left: 2px solid transparent;
}
.doc .sidemenu a:hover { color: var(--accent); background: var(--surface); }
.doc .sidemenu a.sel { color: var(--text); background: var(--surface); border-left-color: var(--accent); font-weight: 500; }

.doc .content h2 { font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.02em; margin: 0 0 6px; }
.doc .content .kicker {
  color: var(--accent); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; margin: 0 0 10px;
}
.doc .content p { color: #cfccc4; margin: 0 0 15px; max-width: 68ch; }
.doc .content .lead { font-size: 18px; color: var(--text); }
.doc .pane { display: none; }
.doc .pane.show { display: block; }

.doc .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; margin: 22px 0 8px; }
.doc .card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: 15px 16px; }
.doc .card .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.doc .card h3 { font-size: 14.5px; margin: 0; font-weight: 600; }
.doc .card p { font-size: 12.5px; color: var(--muted); margin: 0; max-width: none; }
.doc .status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.doc .status .d { width: 8px; height: 8px; border-radius: 50%; }
.doc .status.ok .d { background: var(--ok); } .doc .status.ok { color: var(--ok); }
.doc .status.wip .d { background: var(--accent); } .doc .status.wip { color: var(--muted); }

.doc .flow { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.doc .flow span { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 7px 13px; font-size: 13.5px; color: var(--text); }
.doc .flow .arw { border: 0; background: none; color: var(--muted); padding: 7px 2px; }

.doc .block { border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px; margin: 0 0 14px; background: var(--surface); }
.doc .block h3 { margin: 0 0 7px; font-size: 16px; }
.doc .block .tag { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.doc .reserve { border: 1px dashed var(--border); border-radius: var(--r-md); padding: 14px 16px; color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.doc .reserve b { color: var(--text); }
.doc .mini-note { color: var(--muted); font-size: 13px; }

.doc .pillar { border-left: 2px solid var(--accent); padding: 2px 0 2px 18px; margin: 0 0 22px; }
.doc .pillar .big { font-size: 19px; color: var(--text); margin: 0 0 10px; font-weight: 600; }
.doc .pillar .mine { color: #cfccc4; margin: 0; }
.doc .pillar .mine b { color: var(--accent); font-weight: 600; }

.doc details { border-top: 1px solid var(--border); padding: 13px 2px; }
.doc details summary { cursor: pointer; font-size: 15.5px; color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.doc details summary::-webkit-details-marker { display: none; }
.doc details summary::after { content: "+"; color: var(--accent); font-size: 18px; line-height: 1; }
.doc details[open] summary::after { content: "\2013"; }
.doc details p { margin: 10px 0 2px; font-size: 14px; color: var(--muted); }

.doc .story { max-width: 60ch; }
.doc .story p { font-size: 16.5px; color: #d7d4cc; margin: 0 0 16px; }
.doc .story .big { font-size: clamp(19px, 2.6vw, 23px); color: var(--text); font-weight: 500; border-left: 2px solid var(--accent); padding-left: 16px; margin-bottom: 26px; }
.doc .founder { display: flex; gap: 16px; align-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: 18px 20px; max-width: 520px; }
.doc .avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #2a2a30, #17130a); display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 700; font-size: 18px; flex: 0 0 auto; }
.doc .founder h3 { margin: 0 0 3px; font-size: 16px; } .doc .founder p { margin: 0; font-size: 13px; color: var(--muted); }
.doc .mailto { display: inline-block; margin-top: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 9px 15px; color: var(--text); font-size: 14.5px; transition: border-color .15s ease, color .15s ease; }
.doc .mailto:hover { border-color: var(--accent); color: var(--accent); }

.doc .refs .refgrp { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 22px 0 10px; }
.doc .ref { font-size: 13px; color: var(--muted); padding: 7px 0; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.doc .ref .n { color: var(--text); font-variant-numeric: tabular-nums; min-width: 20px; }
.doc .ref a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.doc .ref a:hover { color: var(--accent); }
.doc .hl { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 6px; transition: background .25s ease; }

@media (max-width: 860px) {
  .doc .cols { grid-template-columns: 1fr; }
  .doc .sidemenu { position: static; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
  .doc .sidemenu .lbl { display: none; width: 100%; }
  .doc .sidemenu a { border-left: 0; border: 1px solid var(--border); font-size: 13px; padding: 7px 11px; border-radius: 999px; }
  .doc .sidemenu a.sel { border-color: var(--accent); }
}

/* ============================================================
   Marque sur les pages internes (retour Charles) : l'atome est
   NOTRE motif. Filigrane d'atome derrière les intros, points
   d'état ambre qui pulsent, icônes maison trait fin sur les cartes.
   Aucun motif ECG (cliché). Sobre : une seule couleur, discret.
   ============================================================ */
.doc .intro { position: relative; z-index: 0; }
.doc .intro::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -24px; right: -6px; width: 168px; height: 168px; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Cg%20fill='none'%20stroke='%23d6a152'%20stroke-width='1.2'%3E%3Cellipse%20cx='16'%20cy='16'%20rx='13'%20ry='5.3'/%3E%3Cellipse%20cx='16'%20cy='16'%20rx='13'%20ry='5.3'%20transform='rotate(60%2016%2016)'/%3E%3Cellipse%20cx='16'%20cy='16'%20rx='13'%20ry='5.3'%20transform='rotate(120%2016%2016)'/%3E%3C/g%3E%3Ccircle%20cx='16'%20cy='16'%20r='2.1'%20fill='%23d6a152'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width: 640px){
  .doc .intro::before { width: 112px; height: 112px; top: -12px; right: -4px; }
}

/* Le point d'état ambre (en cours) respire ; le vert (actif) reste stable. */
.doc .status.wip .d { animation: amd-pulse 2.4s ease-out infinite; }
@keyframes amd-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce){ .doc .status.wip .d { animation: none; } }

/* Icône maison sur les cartes de fonctionnalités. */
.doc .card h3 { display: flex; align-items: center; gap: 9px; }
.doc .card h3 svg.ic { color: var(--accent); flex: 0 0 auto; }

/* ============================================================
   Passe ambre (retour Charles, ss2/ss3/ss4) : rapprocher les
   pages internes de l'energie de l'app. L'ambre est LA couleur,
   utilisee genereusement (pilules, noeuds, chips), jamais une 2e
   teinte. Rouge = clinique seulement (absent ici).
   ============================================================ */
.doc .intro::before { opacity: .16; }

/* Comment ca marche : un vrai stepper ambre numerote, vivant. */
.doc .flow { counter-reset: amdstep; gap: 10px; }
.doc .flow span:not(.arw) {
  display: inline-flex; align-items: center; gap: 9px;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent); font-weight: 500;
}
.doc .flow span:not(.arw)::before {
  counter-increment: amdstep; content: counter(amdstep);
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.doc .flow .arw { color: color-mix(in srgb, var(--accent) 75%, transparent); font-size: 15px; }

/* Icone de carte dans une chip ambre (echo des pilules de l'app). */
.doc .card h3 svg.ic {
  box-sizing: content-box; padding: 6px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

/* La pilule d'etiquette suit la loi de l'app (2026-08-25) : le contour marque,
   le mot s'ecrit a l'encre, le fond ne se remplit pas. */
.doc .block .tag {
  display: inline-block; border-radius: 999px; padding: 3px 11px;
  border: 1px solid var(--border);
  letter-spacing: .04em;
}

/* Item de menu actif : legere teinte ambre. */

/* ============================================================
   Refonte Produit (retour Charles) : stepper adouci (seul le
   numero est ambre), boutons a perimetre ambre / interieur clair,
   et la page Produit en vitrine a defilement (captures de l'app).
   ============================================================ */
/* Stepper doux : pilule neutre, numero ambre. */
.doc .flow span:not(.arw){ border-color: var(--border); background: var(--surface-2); color: var(--text); font-weight: 500; }
.doc .flow .arw{ color: var(--muted); }

/* Produit vitrine. */
.doc .prod-hero{ position: relative; padding-top: clamp(30px,6vw,58px); padding-bottom: 6px; }
.doc .prod-hero .acts{ display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.doc .prod-showcase{ display: grid; grid-template-columns: 1fr 230px; gap: clamp(24px,4vw,48px); align-items: center; padding: clamp(30px,5vw,50px) 0; border-top: 1px solid var(--border); }
.doc .prod-showcase.rev{ grid-template-columns: 230px 1fr; }
.doc .prod-showcase .k{ color: var(--accent); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 0 0 8px; }
.doc .prod-showcase h2{ font-size: clamp(20px,3vw,26px); margin: 0 0 8px; letter-spacing: -.02em; }
.doc .prod-showcase p{ color: var(--muted); margin: 0; font-size: 15px; }
.doc .phone{ border: 1px solid var(--border); border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.doc .phone img{ width: 100%; display: block; }
.doc .prod-sec{ padding: clamp(28px,5vw,46px) 0; border-top: 1px solid var(--border); }
.doc .prod-sec h2{ font-size: clamp(22px,3.4vw,30px); letter-spacing: -.02em; margin: 0 0 8px; }
.doc .prod-sec > p{ color: var(--muted); max-width: 62ch; }
.doc .prod-cta{ margin: 44px 0 64px; border: 1px solid var(--border); background: linear-gradient(180deg,var(--surface-2),var(--surface)); border-radius: var(--r-lg); padding: clamp(24px,4vw,38px); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.doc .prod-cta h2{ font-size: clamp(19px,2.6vw,24px); margin: 0; }
@media (max-width: 720px){ .doc .prod-showcase, .doc .prod-showcase.rev{ grid-template-columns: 1fr; } .doc .phone{ max-width: 230px; } }