html{scroll-behavior:smooth;} body{background:rgb(var(--c-ink));}
  .topo{background-image:
      radial-gradient(120% 90% at 78% -10%, rgb(var(--c-ice) / .10), transparent 55%),
      radial-gradient(90% 70% at 10% 110%, rgb(var(--c-carbo) / .07), transparent 55%);}
  .topo::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
      background-image:
        repeating-radial-gradient(circle at 82% 8%, transparent 0 38px, rgb(var(--c-hair) / .35) 38px 39px),
        repeating-radial-gradient(circle at 12% 96%, transparent 0 46px, rgb(var(--c-hair) / .28) 46px 47px);
      mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 70%);
      -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 70%);}
  .field{background:rgb(var(--c-field));}
  .field:focus{outline:none;border-color:rgb(var(--c-ice));box-shadow:0 0 0 3px rgb(var(--c-ice) / .15);}
  .seg-btn.active{background:rgb(var(--c-panel2));color:rgb(var(--c-hi));box-shadow:inset 0 0 0 1px rgb(var(--c-ice));}
  .mini-btn.active{background:rgb(var(--c-panel2));color:rgb(var(--c-hi));box-shadow:inset 0 0 0 1px rgb(var(--c-ice));}
  /* Onglets principaux (Avant / Pendant / Après) — contrôle segmenté proéminent : c'est la
     navigation cœur de l'app. Même langage que les seg-btn, en plus grand + badge d'étape 1/2/3. */
  .tab-switch{display:inline-flex;gap:.375rem;padding:.375rem;border-radius:1rem;box-sizing:border-box;max-width:100%;
      background:rgb(var(--c-panel));box-shadow:inset 0 0 0 1px rgb(var(--c-hair));}
  .tab-btn{display:inline-flex;align-items:center;gap:.5rem;border:none;background:transparent;
      border-radius:.85rem;padding:.6rem 1.3rem;
      font-weight:600;font-size:.95rem;color:rgb(var(--c-mid));white-space:nowrap;cursor:pointer;
      transition:color .18s,background .18s,box-shadow .18s;}
  .tab-btn:hover{color:rgb(var(--c-hi));}
  .tab-btn.active{background:rgb(var(--c-panel2));color:rgb(var(--c-hi));font-weight:700;
      box-shadow:inset 0 0 0 1px rgb(var(--c-ice) / .9),0 2px 12px rgb(var(--c-ice) / .14);}
  .tab-btn:focus-visible{outline:2px solid rgb(var(--c-ice));outline-offset:2px;}
  .tab-step{display:inline-flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;
      border-radius:9999px;font-size:.72rem;font-weight:700;background:rgb(var(--c-panel2));color:rgb(var(--c-mid));
      box-shadow:inset 0 0 0 1px rgb(var(--c-hair));transition:background .18s,color .18s,box-shadow .18s;}
  .tab-btn.active .tab-step{background:linear-gradient(135deg,rgb(var(--c-ice)),rgb(var(--c-carbo)));color:rgb(var(--c-ink));box-shadow:none;}
  /* Mobile : le contrôle prend toute la largeur, trois onglets à parts égales et compacts. */
  @media (max-width:479px){
    .tab-switch{display:flex;width:100%;}
    .tab-btn{flex:1 1 0;min-width:0;justify-content:center;padding:.55rem .4rem;font-size:.82rem;gap:.4rem;}
    .tab-step{width:1.15rem;height:1.15rem;font-size:.66rem;}
  }
  /* Onglets internes de la logistique (segments / drop bags) — même langage que les segmented buttons. */
  .logi-tab.active{background:rgb(var(--c-panel2));color:rgb(var(--c-hi));box-shadow:inset 0 0 0 1px rgb(var(--c-ice));}
  .logi-tab:focus-visible{outline:2px solid rgb(var(--c-ice));outline-offset:2px;}
  /* Ces éléments portent aussi une utilitaire d'affichage (inline-flex / grid) : on garantit
     que « hidden » l'emporte, quel que soit l'ordre de génération de Tailwind. */
  #logi-nav.hidden,.logi-view.hidden{display:none!important;}
  .reveal{opacity:0;transform:translateY(10px);}
  .reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease;}
  .drop.drag{border-color:rgb(var(--c-ice));background:rgb(var(--c-ice) / .06);}
  .ph{background:rgb(var(--c-ember) / .12);color:rgb(var(--c-ember));border-radius:.25rem;padding:0 .3em;font-family:"JetBrains Mono",monospace;font-size:.9em;}

  /* Menu déroulant d'échange d'aliment : ressemble à du texte, avec un chevron discret. */
  .menu-swap{font:inherit;color:rgb(var(--c-hi));background:transparent;border:1px solid rgb(var(--c-hair) / .55);
      border-radius:.4rem;padding:.05rem 1.35rem .05rem .45rem;cursor:pointer;max-width:100%;
      -webkit-appearance:none;appearance:none;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%236b8598' stroke-width='1.6' stroke-linecap='round'/></svg>");
      background-repeat:no-repeat;background-position:right .45rem center;}
  .menu-swap:hover{border-color:rgb(var(--c-ice));}
  .menu-swap:focus{outline:none;border-color:rgb(var(--c-ice));box-shadow:0 0 0 3px rgb(var(--c-ice) / .15);}
  .menu-swap option{background:rgb(var(--c-field));color:rgb(var(--c-hi));}
  .print-name{display:none;}

  /* Lignes du menu type : 3 zones alignées (aliment · portion · glucides).
     Une seule grille par carte → portions et glucides restent alignés d'une
     ligne à l'autre, quelle que soit la longueur du nom d'aliment. */
  .menu-rows{display:grid;grid-template-columns:minmax(0,1fr) max-content max-content;
      column-gap:1rem;align-items:baseline;}
  .menu-rows>div{padding:.4rem 0;border-bottom:1px solid rgb(var(--c-hair) / .3);}
  .menu-rows>div:nth-last-child(-n+3){border-bottom:0;}
  .menu-name{min-width:0;color:rgb(var(--c-hi));overflow:hidden;text-overflow:ellipsis;}
  .menu-name .menu-swap{max-width:100%;}
  .menu-portion{white-space:nowrap;}
  .menu-carbs{white-space:nowrap;text-align:right;}
  /* Mobile étroit : on resserre l'espacement ; les noms trop longs sont tronqués (…). */
  @media (max-width:420px){ .menu-rows{column-gap:.6rem;} }

  /* Aide sous un champ : explique le libellé sans l'alourdir. */
  .hint{font-size:11px;line-height:1.45;color:rgb(var(--c-lo));}
  /* Champ en erreur après une tentative de génération. */
  .field.invalid{border-color:rgb(var(--c-ember));box-shadow:0 0 0 3px rgb(var(--c-ember) / .14);}

  /* Blocs optionnels repliables (<details> natif) : on masque le triangle par défaut
     et on anime un chevron maison, plus discret et cohérent avec le reste. */
  .fold>summary{list-style:none;cursor:pointer;}
  .fold>summary::-webkit-details-marker{display:none;}
  .fold>summary:focus-visible{outline:2px solid rgb(var(--c-ice));outline-offset:2px;border-radius:.75rem;}
  .fold>summary:hover .chev{color:rgb(var(--c-ice));}
  .chev{display:inline-block;font-size:1.1rem;line-height:1;transition:transform .18s ease,color .18s ease;}
  .fold[open]>summary .chev{transform:rotate(90deg);}
  @media (prefers-reduced-motion: reduce){ .chev{transition:none;} }

  /* Badge « bêta » à côté du logo — couleurs fixes (lisibles sur clair comme sombre) :
     pastille auto-contenue avec son propre fond, indépendante du thème. */
  .beta-badge{align-self:flex-start;display:inline-block;
      background:linear-gradient(90deg,#FBBF3C,#F2A65A);color:#0A121C;
      font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:.62rem;
      letter-spacing:.2em;text-transform:uppercase;padding:.28rem .55rem;border-radius:.45rem;
      box-shadow:0 1px 5px rgba(0,0,0,.3);white-space:nowrap;}

  @media (prefers-reduced-motion: reduce){ .reveal{opacity:1!important;transform:none!important;transition:none!important;} html{scroll-behavior:auto;} }
  ::-webkit-scrollbar{height:8px;width:8px;} ::-webkit-scrollbar-thumb{background:rgb(var(--c-hair));border-radius:8px;}

  @media print{
    @page{margin:14mm;}
    body{background:#fff!important;color:#111!important;}
    .topo::before{display:none!important;}
    .no-print{display:none!important;}
    #results{display:block!important;margin-top:0!important;}
    .tab-panel{display:block!important;} #tab-course,#tab-apres{margin-top:22px;}
    .print-only{display:block!important;}
    #disclaimer{border-color:#c9a24b!important;background:#fff8e6!important;color:#7a5c12!important;break-inside:avoid;}
    .reveal{opacity:1!important;transform:none!important;}
    .print-card,.rounded-2xl,.rounded-xl{border-color:#d5dce2!important;background:#fff!important;box-shadow:none!important;break-inside:avoid;}
    h1,h2,h3,.font-display{color:#0A121C!important;}
    .text-hi{color:#111!important;} .text-mid{color:#444!important;} .text-lo{color:#666!important;}
    .text-ice{color:#0e8fa1!important;} .text-carbo{color:#1f9d5b!important;}
    .text-ember{color:#b7791f!important;} .text-salt{color:#c06a2a!important;}
    svg text{fill:#333!important;}
    #chrono>div,#chrono details{break-inside:avoid;}
    /* Les blocs horaires repliés doivent apparaître déroulés sur le PDF. */
    #chrono details:not([open])>.chrono-body{display:grid!important;}
    #chrono .chev{display:none!important;}
    /* Logistique : à l'impression on montre les DEUX vues (tronçons + checklists) et on masque la nav. */
    #logi-nav{display:none!important;}
    .logi-view{display:grid!important;}
    #dropbag-wrap .chev{display:none!important;}
    .print-name{display:inline!important;}
  }
  .print-only{display:none;}