/* Calembitude — base : remise à zéro, typographie, coquille (entête, écran, barre d'onglets), boutons, champs. */

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--t-15);
  line-height: 1.4;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
a { color: var(--jacaranda); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--soleil-doux); color: var(--encre); }

/* rôles typographiques (docs/DESIGN.md §3) */
.affichage { font-variation-settings: 'opsz' 96; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.affichage-serre { font-stretch: 92%; }
.chiffres { font-variant-numeric: tabular-nums; font-weight: 600; font-stretch: 90%; }
.t-13 { font-size: var(--t-13); }
.t-17 { font-size: var(--t-17); }
.t-20 { font-size: var(--t-20); }
.t-24 { font-size: var(--t-24); }
.t-30 { font-size: var(--t-30); }
.t-40 { font-size: var(--t-40); }
.t-56 { font-size: var(--t-56); }
.encre-2 { color: var(--encre-2); }
.encre-3 { color: var(--encre-3); }
.gras { font-weight: 600; }

/* icônes (sprite Lucide injecté au démarrage) */
.ic { width: 24px; height: 24px; flex: none; }
.ic-20 { width: 20px; height: 20px; flex: none; }
.ic-16 { width: 16px; height: 16px; flex: none; }

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* — coquille — */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.entete {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--e-2);
  padding: calc(var(--e-3) + var(--sur-securite-haut)) var(--e-4) var(--e-3);
  background: color-mix(in srgb, var(--fond) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.entete h1 { flex: 1; font-size: var(--t-20); font-weight: 700; letter-spacing: -0.01em; }
.entete-actions { display: flex; gap: var(--e-1); }
.ecran {
  flex: 1; width: 100%; max-width: 720px; margin: 0 auto;
  padding: 0 var(--e-4) calc(var(--barre-nav) + var(--e-8) + var(--sur-securite-bas));
  outline: none;
}
.nav-bas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--barre-nav) + var(--sur-securite-bas));
  padding-bottom: var(--sur-securite-bas);
  background: var(--papier); border-top: 1px solid var(--trait);
}
.nav-bas a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tap); color: var(--encre-3); text-decoration: none;
  font-size: var(--t-13); font-weight: 600; letter-spacing: 0;
  transition: color var(--d-micro);
}
.nav-bas a[aria-current='page'] { color: var(--encre); }
.nav-bas a[aria-current='page'] .ic { color: var(--soleil-arc); }
.nav-bas a:active .ic { transform: scale(0.92); }
.nav-bas a .ic { transition: transform var(--d-micro) var(--courbe); }

/* écrans pleins (focus, rituels, onboarding) : ni entête ni barre */
.app.plein .entete, .app.plein .nav-bas { display: none; }
.app.plein .ecran { max-width: none; padding: 0; }

/* — boutons — */
.btn {
  min-height: var(--tap); padding: 0 var(--e-4); border-radius: var(--r-1);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  font-weight: 600; background: var(--papier-2); color: var(--encre);
  transition: transform var(--d-micro) var(--courbe), opacity var(--d-micro), background var(--d-micro);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-soleil { background: var(--soleil); color: var(--sur-soleil); }
.btn-jacaranda { background: var(--jacaranda); color: var(--sur-jacaranda); }
.btn-riziere { background: var(--riziere); color: var(--sur-riziere); }
.btn-laterite { background: var(--laterite-doux); color: var(--laterite); }
.btn-fantome { background: transparent; color: var(--encre-2); }
.btn-ico { width: var(--tap); height: var(--tap); padding: 0; border-radius: 50%; background: transparent; color: var(--encre-2); }
.btn-ico:hover { background: var(--papier-2); }
.btn-large { width: 100%; }
.btn-lien { color: var(--jacaranda); font-weight: 600; min-height: var(--tap); display: inline-flex; align-items: center; gap: var(--e-1); }

/* — champs — */
.champ {
  width: 100%; min-height: var(--tap); padding: var(--e-2) var(--e-3);
  border: 1px solid var(--trait-fort); border-radius: var(--r-1);
  background: var(--papier); color: var(--encre);
}
.champ::placeholder { color: var(--encre-3); }
.champ:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
textarea.champ { min-height: 120px; resize: vertical; line-height: 1.5; }
.etiquette { display: block; font-weight: 600; color: var(--encre-2); margin-bottom: var(--e-1); font-size: var(--t-13); }
.ligne-champ { margin-bottom: var(--e-4); }
select.champ { appearance: none; -webkit-appearance: none; padding-right: var(--e-8); background-image: none; }
.select-hote { position: relative; }
.select-hote .ic { position: absolute; right: var(--e-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--encre-3); }

/* — sections, cartes, listes — */
.section { margin-top: var(--e-6); }
.section-titre {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-15); font-weight: 600; color: var(--encre-2); margin-bottom: var(--e-2);
  min-height: 32px;
}
.section-titre .btn-ico { margin-left: auto; width: 44px; height: 44px; margin-top: -6px; margin-bottom: -6px; }
/* un titre qui se replie est un bouton : cible tactile de 44 px, sans casser le rythme des titres */
button.section-titre { min-height: 44px; margin-top: -6px; margin-bottom: calc(var(--e-2) - 6px); }
.carte { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-2); padding: var(--e-4); }
.liste > li + li { border-top: 1px solid var(--trait); }
.ligne { display: flex; align-items: center; gap: var(--e-3); min-height: 52px; padding: var(--e-2) 0; }
.ligne-texte { flex: 1; min-width: 0; }
.ligne-titre { display: block; font-weight: 500; }
.ligne-sous { display: block; font-size: var(--t-13); color: var(--encre-3); }
.ligne-fin { color: var(--encre-3); }

/* — état vide : une invitation, pas un vide — */
.vide { padding: var(--e-6) var(--e-2); color: var(--encre-2); }
.vide strong { display: block; color: var(--encre); font-size: var(--t-17); margin-bottom: var(--e-1); }
.vide .btn { margin-top: var(--e-4); }

/* — pastilles — */
.pastille { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: var(--t-13); font-weight: 600; background: var(--papier-2); color: var(--encre-2); }
.pastille-soleil { background: var(--soleil-doux); color: var(--soleil-texte); }
.pastille-riziere { background: var(--riziere-doux); color: var(--riziere); }
.pastille-jacaranda { background: var(--jacaranda-doux); color: var(--jacaranda); }
.pastille-laterite { background: var(--laterite-doux); color: var(--laterite); }

/* — transitions d'écran (View Transitions API) — */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: ecran-sortie var(--d-ecran) var(--courbe) both; }
  ::view-transition-new(root) { animation: ecran-entree var(--d-ecran) var(--courbe) both; }
}
@keyframes ecran-sortie { to { opacity: 0; transform: translateX(-10px); } }
@keyframes ecran-entree { from { opacity: 0; transform: translateX(10px); } }
::view-transition-group(root) { animation-duration: var(--d-ecran); }

/* — bureau — */
@media (min-width: 1024px) {
  .app { padding-left: 88px; }
  .nav-bas {
    top: 0; bottom: 0; right: auto; width: 88px; height: auto;
    grid-template-columns: 1fr; grid-auto-rows: 76px; align-content: start;
    padding-top: var(--e-4); border-top: 0; border-right: 1px solid var(--trait);
  }
  .ecran { max-width: 1100px; padding-left: var(--e-8); padding-right: var(--e-8); padding-bottom: var(--e-10); }
  .ecran.etroit { max-width: 720px; margin-left: 0; }
  .entete { padding-left: var(--e-8); padding-right: var(--e-8); }
  .entete h1 { font-size: var(--t-24); }
  .app.plein { padding-left: 0; }
}