/*
  Systeme de design : MERCURY (« alpine banking at blue hour »), reference
  donnee par Andre via styles.refero.design.

  Discipline non negociable, tiree du systeme :
   - le cobalt #5266eb est la SEULE note chromatique, et il est reserve a
     l'action principale — jamais decoratif, jamais en icone, jamais en jauge ;
   - la separation vient de l'ecart de valeur graphite-sur-onyx, JAMAIS d'ombres ;
   - poids de titre 480, jamais 700 et plus ;
   - controles en pilule (32-40 px), le 4 px est reserve au structurel ;
   - jamais de blanc pur en texte courant : ivoire #ededf3 ;
   - aucune bande de gris moyen ni de fond colore.

  Le mode clair reprend la direction ecrite d'Andre (Planink 02_DESIGN_SYSTEM) :
  meme discipline monochrome, canvas blanc, encre #0A0A0A.
*/

  :root {
    /* Mercury — canvas sombre (defaut du systeme) */
    --canvas: #171721;
    --carte: #1e1e2a;
    --bouton-2: #272735;
    --bord: #70707d;
    --bord-fin: #2b2b38;
    --texte-doux: #c3c3cc;
    --texte: #ededf3;
    --cobalt: #5266eb;
    --sur-cobalt: #ffffff;

    /* Formes */
    --r-defaut: 4px;
    --r-carte: 12px;
    --r-pilule: 32px;
    --r-nav: 40px;

    /* Rythme : base 4 px, section 72 px, carte 32 px, element 12 px */
    --gap-section: 72px;
    --pad-carte: 32px;
    --gap-element: 12px;
    --largeur-max: 1200px;

    --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --display: "Söhne Breit", "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  @media (prefers-color-scheme: light) {
    :root {
      --canvas: #ffffff;
      --carte: #fafafa;
      --bouton-2: #f5f5f5;
      --bord: #d4d4d4;
      --bord-fin: #e5e5e5;
      --texte-doux: #525252;
      --texte: #0a0a0a;
      --cobalt: #3f52d8;
      --sur-cobalt: #ffffff;
    }
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--canvas);
    color: var(--texte);
    font-family: var(--sans);
    font-size: 16px;            /* densite de base du systeme */
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  /* Progression : filet structurel, donc rayon 4 px et non pilule */
  .rail { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--bord-fin); z-index: 10; }
  .rail > i { display: block; height: 100%; width: 0; background: var(--texte); transition: width .35s ease; }

  main { max-width: 40rem; margin: 0 auto; padding: 64px 24px 96px; }

  .marque {
    font-family: var(--display); font-weight: 480; font-size: 14px;
    letter-spacing: .01em; color: var(--texte-doux); margin-bottom: 56px;
  }
  .marque b { color: var(--texte); font-weight: 480; }

  h1 {
    font-family: var(--display); font-weight: 480;
    font-size: clamp(32px, 6vw, 49px); line-height: 1.1; letter-spacing: .01em;
    margin: 0 0 var(--gap-element); text-wrap: balance;
  }
  h2 {
    font-family: var(--display); font-weight: 480;
    font-size: 28px; line-height: 1.2; letter-spacing: .015em;
    margin: var(--gap-section) 0 20px;
  }
  p.chapeau { color: var(--texte-doux); font-size: 18px; line-height: 1.35; margin: 0 0 40px; }
  .aide { color: var(--texte-doux); font-size: 14px; letter-spacing: .005em; margin-top: 12px; }

  .etape { display: none; }
  .etape.actif { display: block; animation: apparait .3s ease; }
  @keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .etape.actif { animation: none; } .rail > i { transition: none; }
  }

  label.q {
    display: block; font-family: var(--display); font-weight: 480;
    font-size: 28px; line-height: 1.2; letter-spacing: .015em; margin-bottom: 20px;
  }

  /* Controles : pilule, jamais d'angle vif */
  input[type=number], input[type=text], input[type=email], select {
    width: 100%; padding: 14px 20px;
    font-family: var(--sans); font-size: 16px; font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--texte); background: var(--bouton-2);
    border: 1px solid transparent; border-radius: var(--r-pilule);
    appearance: none;
  }
  select { background-image: none; }
  input:focus-visible, select:focus-visible, button:focus-visible {
    outline: 2px solid var(--texte); outline-offset: 2px;
  }

  .choix { display: grid; gap: var(--gap-element); }
  .choix button {
    text-align: left; padding: 14px 20px;
    font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--texte);
    background: var(--bouton-2); border: 1px solid transparent;
    border-radius: var(--r-pilule); cursor: pointer;
  }
  .choix button:hover { border-color: var(--bord); }
  /* Selection : ecart de valeur + filet ivoire, jamais de couleur */
  .choix button[aria-pressed=true] { border-color: var(--texte); background: var(--carte); }

  .nav { display: flex; gap: var(--gap-element); margin-top: 40px; align-items: center; flex-wrap: wrap; }

  /* LE cobalt : une seule action principale par ecran. */
  button.primaire {
    padding: 14px 28px; font-family: var(--sans); font-size: 16px; font-weight: 480;
    color: var(--sur-cobalt); background: var(--cobalt);
    border: 0; border-radius: var(--r-pilule); cursor: pointer;
  }
  button.primaire:hover { filter: brightness(1.08); }
  /* Action secondaire : contour ivoire, bord ET texte. Jamais chromatique. */
  button.fantome {
    padding: 14px 28px; font-family: var(--sans); font-size: 16px; font-weight: 400;
    color: var(--texte); background: transparent;
    border: 1px solid var(--texte); border-radius: var(--r-pilule); cursor: pointer;
  }

  /* Cartes : lift de valeur, 12 px, 32 px de padding, AUCUNE ombre. */
  .verdict {
    background: var(--carte); border-radius: var(--r-carte);
    padding: var(--pad-carte); margin-bottom: var(--gap-element);
  }
  .verdict .cas {
    font-size: 12px; font-weight: 480; letter-spacing: .01em;
    text-transform: uppercase; color: var(--texte-doux);
  }
  .chiffre {
    font-family: var(--display); font-weight: 480;
    font-size: clamp(42px, 10vw, 65px); line-height: 1.1; letter-spacing: .01em;
    font-variant-numeric: tabular-nums; margin: 12px 0 4px;
  }
  .chiffre .unite {
    display: block; font-family: var(--sans); font-size: 16px; font-weight: 400;
    letter-spacing: 0; color: var(--texte-doux); margin-top: 8px;
  }

  /* Jauge : ecart de valeur uniquement. Le cobalt n'est PAS decoratif. */
  .barre { height: 6px; border-radius: var(--r-defaut); background: var(--bouton-2); overflow: hidden; margin: 24px 0 8px; display: flex; }
  .barre > i { display: block; height: 100%; }
  .barre .couvre { background: var(--texte); }
  .barre .trou { background: transparent; }
  .legende { display: flex; justify-content: space-between; gap: var(--gap-element); font-size: 14px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }

  table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
  th, td { text-align: right; padding: 10px 6px; border-bottom: 1px solid var(--bord-fin); }
  th:first-child, td:first-child { text-align: left; }
  thead th { font-weight: 480; color: var(--texte-doux); font-size: 12px; letter-spacing: .01em; text-transform: uppercase; }
  .scroll { overflow-x: auto; }

  details { border-top: 1px solid var(--bord-fin); padding: 20px 0; }
  summary { cursor: pointer; font-weight: 480; }
  details p, details li, details ul { color: var(--texte-doux); font-size: 14px; line-height: 1.5; }

  /* Encadre : carte graphite, pas de bande coloree ni de filet chromatique. */
  .note {
    background: var(--carte); border-radius: var(--r-carte);
    padding: 20px var(--pad-carte); margin: 24px 0;
    color: var(--texte-doux); font-size: 15px;
  }
  .note strong { color: var(--texte); font-weight: 480; }
  .erreur { color: var(--texte); margin-top: 24px; }
  .millesime { margin-top: var(--gap-section); padding-top: 24px; border-top: 1px solid var(--bord-fin); color: var(--texte-doux); font-size: 12px; letter-spacing: .01em; }
  .charge { color: var(--texte-doux); }

  /* Capture de contact : une carte, pas une banniere. */
  .contact { background: var(--carte); border-radius: var(--r-carte); padding: var(--pad-carte); margin: var(--gap-section) 0 0; }
  .contact h3 { font-family: var(--display); font-weight: 480; font-size: 24px; line-height: 1.2; letter-spacing: .02em; margin: 0 0 12px; }
  .contact p { color: var(--texte-doux); font-size: 15px; margin: 0 0 20px; }
  .champs { display: grid; gap: var(--gap-element); }
  .consent { display: flex; gap: 12px; align-items: flex-start; color: var(--texte-doux); font-size: 13px; line-height: 1.45; }
  .consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cobalt); flex: none; }
  .contact button.primaire { justify-self: start; }
  .etat { margin: 20px 0 0; font-size: 14px; color: var(--texte-doux); }
  .etat.probleme { color: var(--texte); }
  /* Confirmation : meme carte, plus de formulaire. Pas de fanfare. */
  .merci h3 { margin-bottom: 12px; }
  .merci p:last-child { margin-bottom: 0; }

  /* Filigrane : trace personnalisee sur la fiche detaillee, ecran ET impression. */
  .filigrane { position: relative; overflow: hidden; }
  .filigrane::before {
    content: attr(data-trace);
    position: absolute; inset: -20%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sans); font-size: 13px; letter-spacing: .18em;
    color: var(--texte); opacity: .05; pointer-events: none; user-select: none;
    transform: rotate(-28deg); white-space: pre-wrap; line-height: 4.5;
    z-index: 0;
  }
  .filigrane > * { position: relative; z-index: 1; }

  @media print {
    body { background: #fff; color: #000; }
    .rail, .nav, .contact, .marque { display: none !important; }
    .verdict, .note { background: #fff; border: 1px solid #ddd; }
    .filigrane::before { opacity: .09; color: #000; }
  }

/* Barre d'outils : liens entre les trois calculateurs. Filet, pas de couleur. */
.outils { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; font-size: 13px; letter-spacing: .01em; }
.outils a { color: var(--texte-doux); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.outils a:hover { color: var(--texte); border-bottom-color: var(--bord); }
.outils a[aria-current=page] { color: var(--texte); border-bottom-color: var(--texte); }