/* LE CALME : les règles de lisibilité du site (explications et sources : docs/09-lisibilite.md).
   Le constat de départ : 10 tailles de texte, 5 polices, de l'or sur chaque carte, des pastilles
   partout. Beau, mais fatigant : l'œil ne savait pas où se poser.
   Les 6 règles appliquées ici (et dans css/tokens.css) :
     1. PEU DE TAILLES : 6 au lieu de 10 (13, 15, 19, 25, 33, 59).
     2. PEU DE POLICES : Cormorant pour les titres, Crimson pour tout le reste. Cinzel = le logo seul.
     3. LES CAPITALES SONT RARES : seulement les titres de section et les boutons.
        Le reste est écrit normalement (les mots en capitales se lisent plus lentement).
     4. L'OR EST RARE : il désigne ce qui est important ou cliquable, pas chaque bordure.
     5. UNE CHOSE À LA FOIS : le détail technique est replié (« Voir le détail… »).
     6. DE L'AIR : plus d'espace entre les blocs, pour que chaque bloc se lise seul.
   Sur téléphone, le site se comporte comme une appli : barre d'onglets en bas, sous le pouce. */

/* ---------- 2. le logo garde sa police ---------- */
.brand { font-family: var(--font-brand); }

/* ---------- 3. écriture normale pour les étiquettes (plus de petites capitales espacées) ---------- */
.nav-link, .chip, .ghost, .ptab, .ptab-status, .seg label, .slider, .panel-label, .field label,
.stop-t, .jl, .scene-tag, .system-hint, .world-fig figcaption, .fact dt, .stop-facts dt,
.glance li, .label, .proves, .kicker, .p-chip, .xr-chip, .xr-label, .color-input, .lab-copy .kicker {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: var(--fs-sm);
  font-weight: 400;
}
.section-title, .eyebrow, .btn, .portal-title { letter-spacing: 0.14em; }
.nav-link { font-size: var(--fs-md); color: var(--text-2); }
.lab-copy .kicker { color: var(--text-3); }

/* ---------- 4. l'or seulement là où il a un sens ---------- */
.control, .seg, .hex-swatch, .slider input::-webkit-slider-runnable-track { border-color: var(--border); }
.control:hover { border-color: var(--text-3); }
.task input[type="checkbox"] { border-color: var(--text-3); }
.portal + .portal::before { display: none; }                 /* plus de traits entre les arches */
.portal.featured .arch { animation: none; box-shadow: 0 0 32px var(--glow-cool); border-color: var(--border-accent); }
.arch::after { display: none; }                               /* un seul contour par arche */
.why { border-left-color: var(--border); }

/* le héros : une seule ligne d'info, sans cadre */
.glance li { border: 0; background: none; padding: 0; color: var(--text-2); }

/* ---------- 5. le détail replié ---------- */
.verdict { font: 500 var(--fs-lg)/1.3 var(--font-display); color: var(--text-1); display: flex; align-items: center; gap: var(--s3); }
.verdict::before { content: ""; width: 8px; height: 8px; flex: none; transform: rotate(45deg); background: var(--success); }
.verdict[data-ok="false"]::before { background: var(--error); }
.more { border-top: 1px solid var(--border); }
.more summary {
  display: flex; align-items: center; gap: var(--s2); min-height: var(--s11); cursor: pointer;
  color: var(--text-2); font-size: var(--fs-sm); list-style: none;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; width: 1em; color: var(--accent); font-size: var(--fs-md); }
.more[open] summary::before { content: "−"; }
.more summary:hover { color: var(--text-1); }
.more .checks li:first-child, .more .netlog { margin-top: 0; }
.db-line { margin: 0; }
.stack-line { display: block; margin-top: var(--s4); color: var(--text-2); }
.stack-text { color: var(--text-2); font-size: var(--fs-sm); }
.stack-line .panel-label, .stack-text .panel-label { color: var(--text-3); margin-right: var(--s2); }

/* ---------- 6. de l'air ---------- */
.lab-item { padding-block: var(--s16); gap: var(--s16); }
.section-head { margin-bottom: var(--s16); gap: var(--s5); }
.panel { gap: var(--s8); padding: var(--s8); }
.lab-copy { gap: var(--s5); }
.sheet-info { gap: var(--s5); }
.hero-copy { gap: var(--s8); }
p, .lede { max-width: 60ch; }                                 /* des lignes courtes se lisent mieux */

/* ---------- LE TÉLÉPHONE : comme une appli ---------- */
.tabbar { display: none; }
@media (max-width: 767px) {
  /* la barre d'onglets : fixe en bas, 4 cibles larges, respecte la zone du geste d'accueil (safe-area) */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--canvas) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
  }
  .tab-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 58px; color: var(--text-3); text-decoration: none; font-size: 13px;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-link svg { width: 22px; height: 22px; }
  .tab-link[aria-current="true"] { color: var(--accent); }
  .tab-link:active { color: var(--text-1); }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(58px + var(--s4) + env(safe-area-inset-bottom, 0px)); }

  /* l'en-tête : juste le logo (le menu est en bas) */
  .menu-btn, .primary-nav, .site-header [data-bp-toggle] { display: none !important; }
  /* les arches font doublon avec les onglets : on les retire sur téléphone */
  .realm { display: none; }

  /* texte un peu plus petit, blocs pleine largeur, tout sur une colonne */
  :root { --fs-md: 17px; --fs-lg: 22px; --fs-xl: 28px; --gutter: 20px; }
  .section { padding-block: var(--s12); }
  .section-head { margin-bottom: var(--s8); }
  .lab-item { padding-block: var(--s10); gap: var(--s6); }
  .panel, .sheet, .stop-panel, form.card { padding: var(--s5); gap: var(--s5); }
  .lab-item .card, .sheet, .stop-panel, .contact-form .card { margin-inline: calc(-1 * var(--s2)); }
  /* boutons : pleine largeur, faciles à toucher */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn, .form-foot .btn, .task-form .btn { min-height: 52px; }
  .form-foot { flex-direction: column-reverse; align-items: stretch; }
  .panel-row { gap: var(--s4); }
  .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .seg label { justify-content: center; }
  .seg label:nth-child(3) { border-left: 0; }
  .seg label:nth-child(n+3) { border-top: 1px solid var(--border); }
  /* onglets de projets et d'étapes : on les fait défiler au doigt, avec aimantation */
  .planet-tabs { scroll-snap-type: x proximity; }
  .ptab { scroll-snap-align: start; min-height: 48px; }
  .jr-labels { display: none; }                              /* les étapes sont déjà listées juste dessous */
  .facts { grid-template-columns: 1fr 1fr; }
  .footer-cat { right: var(--gutter); }
  /* le mode 1999 se cale au-dessus de la barre d'onglets */
  .ugly-marquee { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .ugly-exit { bottom: calc(58px + 44px + env(safe-area-inset-bottom, 0px)); }
}
.glance li { color: var(--text-1); }
.icon-btn, .egg-1999 { font-family: var(--font-body); }     /* plus aucune police par défaut du navigateur */