/* ==========================================================================
   WHEREAT · Design system
   --------------------------------------------------------------------------
   Les fondations de l'app : la carte, les bons plans, le compte. Une seule
   palette, une seule typographie, un seul jeu de composants, du premier
   écran au dernier.

   Principes
   1. Clair, lisible, dense en information. Le contenu passe avant le décor.
   2. Une couleur de marque, réservée à ce qui appelle une action. Les autres
      couleurs portent un statut, jamais une humeur.
   3. La profondeur vient d'un filet et d'une ombre neutre. Pas de dégradé de
      fond, pas de flou coloré, pas de texture.
   4. Une échelle d'espacement de 4 px, six rayons, quatre ombres.
   5. Mobile d'abord, avec une vraie mise en page au-delà de 1040 px.

   Sommaire
   01 Jetons          06 Cartes          11 Barre du haut
   02 Base            07 Statuts         12 Barre d'onglets
   03 Typographie     08 Listes          13 Pied de page
   04 Mise en page    09 Formulaires     14 Notifications
   05 Boutons         10 Panneaux        15 Utilitaires
   ========================================================================== */

/* ==========================================================================
   01 · JETONS
   ========================================================================== */
:root {
  /* Neutres, très légèrement chauds pour ne pas virer au bleu clinique */
  --n-0:   #FFFFFF;
  --n-25:  #FCFCFB;
  --n-50:  #F7F6F4;
  --n-100: #F0EEEB;
  --n-150: #E7E4DF;
  --n-200: #DCD8D2;
  --n-300: #C6C1B9;
  --n-400: #A29C93;
  --n-500: #7C766C;
  --n-600: #5C574F;
  --n-700: #423E38;
  --n-800: #2B2825;
  --n-900: #1A1815;

  /* Marque : un rouge chaud, tenu à distance du rouge d'erreur */
  --brand:       #DC3C24;
  --brand-hover: #C4331F;
  --brand-press: #A82B18;
  --brand-text:  #B62E17;   /* même teinte, assez dense pour du petit corps */
  --brand-soft:  #FDF0ED;
  --brand-line:  #F5C9BF;

  /* Statuts */
  --ok:        #16704A;
  --ok-soft:   #E8F3ED;
  --ok-line:   #BFDDCE;
  --warn:      #8A5A00;
  --warn-soft: #FBF0DC;
  --warn-line: #EBD5A8;
  --bad:       #B3261E;
  --bad-soft:  #FCECEA;
  --bad-line:  #F1C7C3;

  /* Surfaces */
  --bg:        #F7F6F4;
  --surface:   #FFFFFF;
  --surface-2: #F0EEEB;
  --surface-3: #E7E4DF;
  --ink-block: #1A1815;

  /* Texte */
  --t-1: #1A1815;
  --t-2: #5C574F;
  /* Densifié depuis #7C766C : sur le crème du plan de travail, l'ancien
     ton tombait à 3,9 de contraste — sous le seuil AA de 4,5 pour du
     petit corps. Celui-ci tient sur les deux plans (4,8 sur le crème,
     5,5 sur le blanc) sans cesser d'être un gris discret. */
  --t-3: #6E685E;
  --t-on-dark:   #FFFFFF;
  --t-on-dark-2: rgba(255, 255, 255, .68);

  /* Filets */
  --line:   #E7E4DF;
  --line-2: #DCD8D2;
  --line-3: #C6C1B9;

  /* Ombres, neutres et jamais teintées */
  --sh-1: 0 1px 2px rgba(26, 24, 21, .05);
  --sh-2: 0 2px 4px rgba(26, 24, 21, .04), 0 4px 12px rgba(26, 24, 21, .06);
  --sh-3: 0 4px 8px rgba(26, 24, 21, .05), 0 12px 28px rgba(26, 24, 21, .09);
  --sh-4: 0 8px 16px rgba(26, 24, 21, .06), 0 28px 64px rgba(26, 24, 21, .16);

  /* Typographie */
  --disp: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* La ronde du logo, pour les grands titres seulement — c'est elle qui
     donne à l'app la voix de la vitrine. Ailleurs elle fatiguerait : le
     corps de texte reste en Inter. */
  --round: 'Baloo 2', 'Inter Tight', system-ui, sans-serif;

  /* Rayons */
  --r-xs:   6px;
  --r-sm:   9px;
  --r:      12px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* Rythme */
  --pad:      20px;    /* gouttière latérale des pages */
  --col:      640px;   /* colonne de lecture */
  --col-wide: 1120px;
  --nav-h:    58px;
  --tabbar:   72px;

  /* Mouvement */
  --ease:   cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.32, .5, 1);
  --t-fast: 130ms cubic-bezier(.32, .72, 0, 1);
  --t-med:  220ms cubic-bezier(.32, .72, 0, 1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   02 · BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
html, body { background: var(--bg); }

body {
  font-family: var(--body);
  color: var(--t-1);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100dvh;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}
body.has-tabbar { padding-bottom: calc(var(--tabbar) + var(--safe-b) + 16px); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { max-width: 100%; display: block; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; }

::selection { background: var(--brand); color: #fff; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: var(--r-pill);
  border: 3px solid var(--bg);
}
*::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   03 · TYPOGRAPHIE
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--disp);
  color: var(--t-1);
  letter-spacing: -.022em;
  line-height: 1.15;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 5.2vw, 2.25rem); letter-spacing: -.032em; line-height: 1.08; }
h2 { font-size: clamp(1.3rem, 3.4vw, 1.55rem); letter-spacing: -.026em; }
h3 { font-size: 1.06rem; }
h4 { font-size: .95rem; }

p { text-wrap: pretty; }

.display { font-family: var(--disp); font-weight: 800; letter-spacing: -.036em; line-height: 1.04; color: var(--t-1); }
.lead { font-size: 1.02rem; color: var(--t-2); line-height: 1.6; }

/* Libellé en capitales : sur-titre de section */
.overline, .mk-top__k {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t-3);
}
.overline.accent, .mk-top__k { color: var(--brand-text); }
.mk-top__k i, .overline i { font-size: .9rem; }

.text-muted { color: var(--t-2); }
.text-faint { color: var(--t-3); }
.tabular { font-variant-numeric: tabular-nums; }

.rule { width: 100%; height: 1px; background: var(--line); border: 0; }
.rule-accent { width: 40px; height: 3px; border-radius: 2px; background: var(--brand); border: 0; }

/* ==========================================================================
   04 · MISE EN PAGE
   ========================================================================== */
.mk__col, .wa-container {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--col); margin: 0 auto;
}
.wa-container { padding: 0 var(--pad); }
.wa-container--wide { max-width: var(--col-wide); }
.wa-section { padding: 48px 0; }

/* En-tête de page */
.mk-hd { position: relative; z-index: 30; padding: 0 var(--pad); }
.mk-top { display: flex; align-items: flex-start; gap: 14px; padding: 22px 0 16px; }
.mk-top__t { flex: 1; min-width: 0; }
.mk-top__k { margin-bottom: 9px; }
.mk-top__t h1 { font-size: clamp(1.7rem, 7vw, 2.1rem); font-weight: 800; letter-spacing: -.035em; }
.mk-top__t h1 em { font-style: normal; color: var(--brand); }
.mk-top__t p { font-size: .9rem; color: var(--t-2); margin-top: 8px; max-width: 46ch; }

/* Pastille compte */
.mk-me {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-block); color: var(--t-on-dark);
  font-family: var(--disp); font-size: .95rem; font-weight: 700;
  transition: transform var(--t-fast), background var(--t-fast);
}
.mk-me i { font-size: 1.15rem; }
.mk-me:active { transform: scale(.93); }
.mk-me--tomate { background: var(--brand); }
@media (hover: hover) { .mk-me:hover { background: var(--n-700); } }

/* Retour */
.mk-back {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px 0 10px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-2); color: var(--t-1);
  font-size: .86rem; font-weight: 600;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.mk-back i { font-size: 1.05rem; }
.mk-back:active { transform: scale(.96); }
@media (hover: hover) { .mk-back:hover { background: var(--surface-2); border-color: var(--line-3); } }

/* Bloc de section */
.mk-sec { padding: 0 var(--pad); margin-bottom: 28px; }
.mk-sec__h { font-family: var(--disp); font-size: 1.15rem; font-weight: 700; letter-spacing: -.025em; margin-bottom: 3px; }
.mk-sec__s { font-size: .86rem; color: var(--t-2); margin-bottom: 14px; }

/* Barre de liste : le compte à gauche, le tri à droite */
.mk-lh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--pad) 12px; }
.mk-lh__n { font-family: var(--disp); font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.mk-lh__n span { color: var(--t-3); font-weight: 500; }
.mk-sortb {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--t-1); font-size: .84rem; font-weight: 600; white-space: nowrap;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.mk-sortb i { font-size: .95rem; color: var(--t-3); }
.mk-sortb u { text-decoration: none; }
@media (hover: hover) { .mk-sortb:hover { border-color: var(--line-3); background: var(--surface-2); } }

/* ==========================================================================
   05 · BOUTONS
   ========================================================================== */
.mk-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--brand); color: #fff;
  font-family: var(--body); font-size: .92rem; font-weight: 600;
  line-height: 1; white-space: nowrap; user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.mk-btn i, .btn i { font-size: 1.1em; }
.mk-btn:active, .btn:active { transform: scale(.98); }
.mk-btn:disabled, .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (hover: hover) { .mk-btn:hover, .btn:hover { background: var(--brand-hover); } }

.mk-btn--ghost, .btn--ghost { background: var(--surface); color: var(--t-1); border-color: var(--line-2); }
@media (hover: hover) {
  .mk-btn--ghost:hover, .btn--ghost:hover { background: var(--surface-2); border-color: var(--line-3); }
}
.mk-btn--ink, .btn--ink { background: var(--ink-block); color: var(--t-on-dark); }
@media (hover: hover) { .mk-btn--ink:hover, .btn--ink:hover { background: var(--n-700); } }

.btn--primary { background: var(--brand); color: #fff; }
.btn--quiet { background: transparent; color: var(--t-2); border-color: transparent; }
@media (hover: hover) { .btn--quiet:hover { background: var(--surface-2); color: var(--t-1); } }
.btn--outline { background: var(--surface); color: var(--brand-text); border-color: var(--brand-line); }
@media (hover: hover) { .btn--outline:hover { background: var(--brand-soft); border-color: var(--brand); } }
.btn--danger { background: var(--surface); color: var(--bad); border-color: var(--bad-line); }
@media (hover: hover) { .btn--danger:hover { background: var(--bad-soft); } }
.btn--danger-solid { background: var(--bad); color: #fff; }
@media (hover: hover) { .btn--danger-solid:hover { background: #9B1F18; } }

.mk-btn--sm, .btn--sm { height: 38px; padding: 0 15px; font-size: .85rem; border-radius: var(--r-sm); }
.mk-btn--lg, .btn--lg { height: 52px; padding: 0 26px; font-size: 1rem; }
.mk-btn--full, .btn--block { width: 100%; }

/* Bouton icône seule */
.iconbtn {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--t-2); font-size: 1.15rem;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) { .iconbtn:hover { background: var(--surface-2); color: var(--t-1); border-color: var(--line-3); } }

/* ==========================================================================
   06 · CARTES
   ========================================================================== */
.mk-card, .card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  color: inherit;
  transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med);
}
.mk-card { padding: 16px 16px 14px; overflow: hidden; }
.card__body { padding: 18px; }
.card__media { position: relative; overflow: hidden; background: var(--surface-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.mk-card:active { transform: scale(.99); }
.mk-card.is-going { opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  .mk-card:hover, .card--hover:hover {
    border-color: var(--line-3);
    box-shadow: var(--sh-2);
    transform: translateY(-2px);
  }
  .mk-card:hover .mk-card__h { color: var(--brand-text); }
}

/* Carte mise en avant : un filet de marque, rien de plus bruyant */
.mk-card--up { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft), var(--sh-1); }
.mk-card--flat { box-shadow: none; }

.mk-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 9px; }

/* Type de contenu : à l'encre. La couleur est réservée au statut. */
.mk-kind {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--t-3);
}
.mk-kind i { font-size: .95rem; flex-shrink: 0; }
.mk-kind span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-card__h {
  font-family: var(--disp);
  font-size: 1.18rem; font-weight: 700; line-height: 1.22;
  letter-spacing: -.028em; color: var(--t-1); margin-bottom: 8px;
  transition: color var(--t-fast);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.mk-card__p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .85rem; color: var(--t-2); font-weight: 500; }
.mk-card__p i { font-size: .95rem; color: var(--t-3); }
.mk-card__p .nm { font-weight: 600; color: var(--t-1); }
.mk-card__p .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-3); }
.mk-card__p .km { font-weight: 600; color: var(--t-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.mk-card__x {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; padding: 9px 11px;
  border-radius: var(--r-sm); background: var(--surface-2);
  font-size: .82rem; color: var(--t-2); font-weight: 500; line-height: 1.45;
}
.mk-card__x i { font-size: 1rem; color: var(--t-3); flex-shrink: 0; margin-top: 1px; }

.mk-card__f {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; margin-top: auto;
  border-top: 1px solid var(--line);
}
.mk-card__p, .mk-card__x { margin-bottom: 13px; }
.mk-card__h, .mk-card__p, .mk-card__x { flex: none; }

/* Le mur de cartes */
.mk-wall { padding: 0 var(--pad); display: flex; flex-direction: column; gap: 12px; }

/* Invitation à publier : bloc encre pleine */
.mk-post {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; border-radius: var(--r-lg);
  background: var(--ink-block); color: var(--t-on-dark); overflow: hidden;
  transition: transform var(--t-fast), background var(--t-fast);
}
.mk-post:active { transform: scale(.99); }
@media (hover: hover) { .mk-post:hover { background: var(--n-800); } }
.mk-post__ic {
  width: 42px; height: 42px; border-radius: var(--r); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; font-size: 1.25rem;
}
.mk-post__b { flex: 1; min-width: 0; }
.mk-post__b b { display: block; font-family: var(--disp); font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.mk-post__b span { display: block; font-size: .82rem; color: var(--t-on-dark-2); margin-top: 2px; }
.mk-post > i:last-child { font-size: 1rem; color: var(--t-on-dark-2); }

/* Chiffres clés */
.mk-tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 var(--pad); margin-bottom: 20px; }
.mk-ticket {
  padding: 14px 10px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-1);
}
.mk-ticket b {
  display: block; font-family: var(--disp);
  font-size: 1.55rem; font-weight: 800; line-height: 1;
  letter-spacing: -.035em; color: var(--t-1); font-variant-numeric: tabular-nums;
}
.mk-ticket span {
  display: block; margin-top: 6px;
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t-3);
}
.mk-ticket--hot { background: var(--ink-block); border-color: var(--ink-block); }
.mk-ticket--hot b { color: #fff; }
.mk-ticket--hot span { color: var(--t-on-dark-2); }

/* ==========================================================================
   07 · STATUTS
   ========================================================================== */
.mk-flags { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mk-flag, .badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; border-radius: var(--r-xs);
  border: 1px solid transparent;
  font-size: .67rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--surface-2); color: var(--t-2);
}
.badge { height: auto; padding: 4px 8px; border-color: var(--line-2); }
.mk-flag--live { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.mk-flag--live b { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); animation: wa-beat 2.4s ease-in-out infinite; }
@keyframes wa-beat { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
.mk-flag--soon { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.mk-flag--next { background: var(--surface-2); color: var(--t-2); border-color: var(--line-2); }
.mk-flag--off  { background: var(--surface-2); color: var(--t-3); border-color: var(--line-2); }
.mk-flag--up   { background: var(--brand); color: #fff; border-color: var(--brand); }
.mk-flag--up i { font-size: .78rem; }

.badge--accent   { color: var(--brand-text); border-color: var(--brand-line); background: var(--brand-soft); }
.badge--positive { color: var(--ok);   border-color: var(--ok-line);   background: var(--ok-soft); }
.badge--warning  { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.badge--danger   { color: var(--bad);  border-color: var(--bad-line);  background: var(--bad-soft); }

/* Signature d'une carte */
.mk-by { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mk-by__a {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-family: var(--disp); font-size: .7rem; font-weight: 700; color: var(--t-2);
}
.mk-by__t { font-size: .78rem; color: var(--t-3); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-nums { display: flex; align-items: center; gap: 14px; font-size: .79rem; color: var(--t-3); font-weight: 600; }
.mk-nums span { display: inline-flex; align-items: center; gap: 5px; }
.mk-nums i { font-size: .95rem; }

/* Vote */
.mk-vote {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--t-2);
  font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.mk-vote i { font-size: 1rem; }
.mk-vote:active { transform: scale(.93); }
.mk-vote.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .mk-vote:hover { border-color: var(--brand); color: var(--brand-text); }
  .mk-vote.is-on:hover { background: var(--brand-hover); color: #fff; }
}
.mk-vote.bump { animation: wa-bump .36s var(--spring); }
@keyframes wa-bump { 0% { transform: scale(1) } 40% { transform: scale(1.14) } 100% { transform: scale(1) } }

/* Étiquettes de filtre */
.mk-tags {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px var(--pad) 18px; margin: 0 calc(var(--pad) * -1);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mk-tags::-webkit-scrollbar { display: none; }
.mk-tag, .chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--t-2);
  font-size: .86rem; font-weight: 600; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.mk-tag i, .chip i { font-size: 1.05rem; }
.mk-tag:active, .chip:active { transform: scale(.96); }
@media (hover: hover) { .mk-tag:hover, .chip:hover { border-color: var(--line-3); color: var(--t-1); } }
.mk-tag.is-on, .chip--active { background: var(--ink-block); border-color: var(--ink-block); color: #fff; }
@media (hover: hover) { .mk-tag.is-on:hover { color: #fff; } }
.mk-tag.is-city { background: var(--brand); border-color: var(--brand); color: #fff; }
.mk-tag__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--t-2); font-size: .68rem; font-weight: 700;
}
.mk-tag.is-on .mk-tag__n { background: rgba(255, 255, 255, .2); color: #fff; }

/* ==========================================================================
   08 · LISTES
   ========================================================================== */
.mk-rows {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden; box-shadow: var(--sh-1);
}
.mk-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; width: 100%; text-align: left;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.mk-row:last-child { border-bottom: 0; }
.mk-row:active { background: var(--surface-2); }
@media (hover: hover) { .mk-row:hover { background: var(--surface-2); } }
.mk-row__ic {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--t-2); font-size: 1.1rem;
}
.mk-row__b { flex: 1; min-width: 0; }
.mk-row__b b { display: block; font-size: .93rem; font-weight: 600; color: var(--t-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row__b span { display: block; font-size: .8rem; color: var(--t-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row > i:last-child { font-size: 1rem; color: var(--t-3); flex-shrink: 0; }
.mk-row--bad b { color: var(--bad); }
.mk-row--bad .mk-row__ic { background: var(--bad-soft); color: var(--bad); }

/* ==========================================================================
   09 · FORMULAIRES
   ========================================================================== */
.mk-field { margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.mk-label, .field__label {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--t-2);
}
.mk-label { margin-bottom: 7px; }
.field__label .req, .mk-label .req { color: var(--brand-text); }

.mk-input, .mk-textarea, .mk-select,
.input, .textarea, .select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--t-1);
  font-size: .95rem; font-weight: 500;
  outline: none; -webkit-appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mk-input::placeholder, .mk-textarea::placeholder,
.input::placeholder, .textarea::placeholder { color: var(--t-3); font-weight: 400; }
.mk-input:focus, .mk-textarea:focus, .mk-select:focus,
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.mk-textarea, .textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.mk-select, .select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%237C766C' stroke-width='2' stroke-linecap='round'><path d='M3 5.5l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 40px;
}
.mk-hint, .field__hint { font-size: .8rem; color: var(--t-3); margin-top: 7px; line-height: 1.45; }
.field__hint { margin-top: 0; }
.field__count { font-size: .74rem; color: var(--t-3); font-weight: 600; text-align: right; }

/* Champ de recherche */
.mk-find { position: relative; margin-bottom: 14px; }
.mk-find > i {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-size: 1.1rem; color: var(--t-3); pointer-events: none;
}
.mk-find input {
  width: 100%; height: 46px; padding: 0 44px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--t-1);
  font-size: .95rem; font-weight: 500;
  outline: none; -webkit-appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mk-find input::placeholder { color: var(--t-3); font-weight: 400; }
.mk-find input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.mk-find input::-webkit-search-cancel-button { display: none; }
.mk-find__x {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  color: var(--t-3); font-size: 1.05rem;
}
.mk-find.has-q .mk-find__x { display: flex; }
.mk-find__x:active { background: var(--surface-2); }

/* Grand champ des parcours en étapes */
.mk-big {
  width: 100%; padding: 0 0 12px;
  border: 0; border-bottom: 2px solid var(--line-2);
  background: transparent; color: var(--t-1);
  font-family: var(--disp);
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.03em;
  outline: none; -webkit-appearance: none;
  transition: border-color var(--t-fast);
}
.mk-big::placeholder { color: var(--line-3); font-weight: 600; }
.mk-big:focus { border-bottom-color: var(--brand); }

/* Choix multiples */
.mk-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-pick { position: relative; }
.mk-pick input { position: absolute; opacity: 0; pointer-events: none; }
.mk-pick span {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--t-2);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.mk-pick span i { font-size: 1.1rem; }
.mk-pick span:active { transform: scale(.96); }
@media (hover: hover) { .mk-pick span:hover { border-color: var(--line-3); } }
.mk-pick input:checked + span { background: var(--ink-block); border-color: var(--ink-block); color: #fff; }
.mk-pick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ==========================================================================
   10 · PANNEAUX, MESSAGES, ÉTATS VIDES
   ========================================================================== */
.mk-note, .alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: .88rem; font-weight: 500; line-height: 1.5; color: var(--t-1);
  margin-bottom: 16px;
}
.mk-note i, .alert i { font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.mk-note ul, .alert ul { margin: 0; padding-left: 18px; }
.mk-note--ok,   .alert--success { background: var(--ok-soft);   border-color: var(--ok-line);   color: var(--ok); }
.mk-note--bad,  .alert--error   { background: var(--bad-soft);  border-color: var(--bad-line);  color: var(--bad); }
.mk-note--warn, .alert--warning { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.alert--info { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-text); }

.mk-empty { padding: 48px var(--pad) 40px; text-align: center; }
.empty { padding: 48px var(--pad) 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mk-empty__ic, .empty__icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line-2);
  font-size: 1.7rem; color: var(--t-3); box-shadow: var(--sh-1);
}
.empty__icon { margin-bottom: 0; }
.mk-empty h2, .empty h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 8px; }
.mk-empty p, .empty p { font-size: .92rem; color: var(--t-2); margin: 0 auto 22px; line-height: 1.55; max-width: 38ch; }
.empty p { margin-bottom: 0; }

/* Feuilles montantes */
.mk-sheet { position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; }
.mk-sheet.is-open { visibility: visible; pointer-events: auto; }
.mk-sheet__v { position: absolute; inset: 0; background: rgba(26, 24, 21, .4); opacity: 0; transition: opacity var(--t-med); }
.mk-sheet.is-open .mk-sheet__v { opacity: 1; }
.mk-sheet__b {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: var(--col); margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px var(--pad) calc(var(--safe-b) + 22px);
  transform: translateY(100%);
  transition: transform .32s var(--ease);
  max-height: 86dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: var(--sh-4);
}
.mk-sheet.is-open .mk-sheet__b { transform: none; }
.mk-sheet__g { width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--line-2); margin: 0 auto 16px; }
.mk-sheet__h { font-family: var(--disp); font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 4px; }
.mk-sheet__s { font-size: .87rem; color: var(--t-2); margin-bottom: 18px; }

/* Au-delà du mobile, la feuille devient une boîte centrée */
@media (min-width: 760px) {
  .mk-sheet__b {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -46%);
    width: min(460px, calc(100vw - 48px));
    border-radius: var(--r-xl);
    padding: 24px var(--pad);
    opacity: 0;
    transition: transform var(--t-med), opacity var(--t-med);
  }
  .mk-sheet.is-open .mk-sheet__b { transform: translate(-50%, -50%); opacity: 1; }
  .mk-sheet__g { display: none; }
}

.mk-opt {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 4px; width: 100%; text-align: left; color: var(--t-1);
  border-bottom: 1px solid var(--line);
}
.mk-opt:last-child { border-bottom: 0; }
.mk-opt:active { background: var(--surface-2); }
.mk-opt > i:first-child {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); font-size: 1.1rem; color: var(--t-2);
}
.mk-opt span { flex: 1; font-size: .95rem; font-weight: 600; }
.mk-opt .ck { font-size: 1.15rem; color: var(--brand); }
.mk-opt__n { display: block; margin-top: 2px; font-size: .76rem; font-weight: 500; font-style: normal; color: var(--t-3); }
.mk-opt.is-on > i:first-child { background: var(--brand); color: #fff; }

/* Modale centrée */
.modal { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(26, 24, 21, .45); }
.modal.is-open { display: flex; }
.modal__box {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); width: 100%; max-width: 460px;
  box-shadow: var(--sh-4);
  animation: wa-modal .22s var(--ease) both;
}
@keyframes wa-modal { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 0; }
.modal__title { font-family: var(--disp); font-size: 1.15rem; font-weight: 700; letter-spacing: -.025em; }
.modal__body { padding: 14px 20px; }
.modal__foot { padding: 0 20px 20px; display: flex; justify-content: flex-end; gap: 10px; }
.modal__close {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px solid var(--line-2); color: var(--t-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.modal__close:hover { background: var(--surface-2); color: var(--t-1); }

/* ==========================================================================
   11 · BARRE DU HAUT
   ========================================================================== */
.mknav, .wa-nav {
  position: sticky; top: 0; z-index: 60;
  /* Exactement le fond de la page : la barre n'a pas de couleur à elle,
     elle prolonge le papier. Elle était restée sur un blanc cassé
     translucide de l'ancienne palette (#F7F6F4 à 88 %), qui se lisait
     comme un bandeau plus clair posé au-dessus du crème.

     Le fond est opaque, donc plus rien à flouter : le `backdrop-filter`
     part avec, et son `saturate` teintait le crème au passage. Sans
     couleur distincte, le filet du bas ne sépare plus rien non plus. */
  background: var(--bg);
  border-bottom: 0;
}
.mknav__in, .wa-nav__inner {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 var(--pad);
  max-width: var(--col-wide); margin: 0 auto;
}
.mknav__logo, .wa-brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.mknav__logo img, .wa-brand img { height: 30px; width: auto; }
.mknav__logo span, .wa-brand__word {
  font-family: var(--disp); font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.03em; color: var(--t-1);
}
.mknav__r, .wa-nav__links { display: flex; align-items: center; gap: 10px; list-style: none; }

.mknav__nav { position: relative; }
.mknav__trig {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: .87rem; font-weight: 600; color: var(--t-1);
  cursor: pointer; list-style: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.mknav__trig::-webkit-details-marker { display: none; }
.mknav__trig::marker { content: ''; }
.mknav__trig i { font-size: 1.05rem; color: var(--t-2); }
@media (hover: hover) { .mknav__trig:hover { background: var(--surface-2); border-color: var(--line-3); } }
.mknav__chev { transition: transform var(--t-fast); }
.mknav__nav[open] .mknav__trig { background: var(--surface-2); border-color: var(--line-3); }
.mknav__nav[open] .mknav__chev { transform: rotate(180deg); }
.mknav__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  min-width: 210px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  animation: wa-menu .16s var(--ease) both;
}
@keyframes wa-menu { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
.mknav__link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-sm);
  font-size: .89rem; font-weight: 500; color: var(--t-1);
  transition: background var(--t-fast);
}
.mknav__link i { font-size: 1.1rem; color: var(--t-3); }
.mknav__link:hover { background: var(--surface-2); }
.mknav__link.is-on { background: var(--surface-2); font-weight: 600; }
.mknav__link.is-on i { color: var(--brand); }
.mknav__tick { margin-left: auto; font-size: .95rem; color: var(--brand); }

.mknav__me {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-block); color: #fff;
  font-family: var(--disp); font-size: .85rem; font-weight: 700;
  transition: transform var(--t-fast), background var(--t-fast);
}
.mknav__me i { font-size: 1.1rem; }
.mknav__me:active { transform: scale(.94); }
.mknav__me.is-out { background: var(--surface); border: 1px solid var(--line-2); color: var(--t-2); }
@media (hover: hover) { .mknav__me.is-out:hover { background: var(--surface-2); } }

/* Quand la barre du haut est là, l'en-tête de page respire moins */
.has-navbar .mk-top { padding-top: 20px; }

/* ==========================================================================
   12 · BARRE D'ONGLETS
   ========================================================================== */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; justify-content: center;
  padding: 0 var(--pad) calc(var(--safe-b) + 12px);
  pointer-events: none;
}
.tabbar__pill {
  display: flex; align-items: center; gap: 2px;
  padding: 6px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.8) blur(16px);
  backdrop-filter: saturate(1.8) blur(16px);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-3);
  pointer-events: auto;
}
.tabbar__item {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 15px; border-radius: var(--r-pill);
  color: var(--t-2); font-size: .87rem; font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast), padding var(--t-med);
}
.tabbar__item i { font-size: 1.3rem; }
.tabbar__item:active { transform: scale(.95); }
.tabbar__label { display: none; white-space: nowrap; }
.tabbar__item.is-on { background: var(--ink-block); color: #fff; padding: 0 18px; }
.tabbar__item.is-on .tabbar__label { display: inline; }
@media (hover: hover) { .tabbar__item:not(.is-on):hover { background: var(--surface-2); color: var(--t-1); } }
@media (min-width: 420px) {
  .tabbar__item { padding: 0 16px; }
  .tabbar__label { display: inline; }
  .tabbar__item.is-on { padding: 0 18px; }
}
/* Au-delà de 1040 px, la navigation vit dans la barre du haut */
@media (min-width: 1040px) {
  .tabbar { display: none; }
  body.has-tabbar { padding-bottom: 40px; }
}
@media (max-width: 1039px) { .mknav__nav { display: none; } }

/* ==========================================================================
   13 · PIED DE PAGE
   ========================================================================== */
.wa-footer {
  border-top: 1px solid var(--line); margin-top: 72px;
  padding: 44px 0 calc(36px + var(--safe-b));
  background: var(--surface);
}
.wa-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px;
  max-width: var(--col-wide); margin: 0 auto; padding: 0 var(--pad);
}
.wa-footer__brand-word { font-family: var(--disp); font-size: 1.2rem; font-weight: 700; letter-spacing: -.03em; }
.wa-footer__tag { color: var(--t-3); font-size: .86rem; max-width: 240px; margin-top: 8px; }
.wa-footer h4 { font-family: var(--body); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t-3); margin-bottom: 14px; }
.wa-footer a { display: block; color: var(--t-2); font-size: .88rem; margin-bottom: 9px; transition: color var(--t-fast); }
.wa-footer a:hover { color: var(--t-1); }
.wa-footer__bottom {
  max-width: var(--col-wide); margin: 36px auto 0; padding: 20px var(--pad) 0;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: var(--t-3); font-size: .8rem;
}
@media (max-width: 760px) { .wa-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 440px) { .wa-footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   14 · NOTIFICATIONS
   ========================================================================== */
.wa-toast {
  pointer-events: auto;
  display: flex; gap: 11px; align-items: center;
  padding: 12px 14px; border-radius: var(--r);
  min-width: 240px; max-width: 380px;
  background: var(--surface); border: 1px solid var(--line-2);
  color: var(--t-1); box-shadow: var(--sh-3);
  transform: translateY(-8px); opacity: 0;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.wa-toast.show { transform: none; opacity: 1; }
.wa-toast__rail { width: 3px; align-self: stretch; border-radius: var(--r-pill); background: var(--line-3); flex-shrink: 0; }
.wa-toast--success .wa-toast__rail { background: var(--ok); }
.wa-toast--error   .wa-toast__rail { background: var(--bad); }
.wa-toast--info    .wa-toast__rail { background: var(--brand); }
.wa-toast__msg { flex: 1; font-size: .9rem; font-weight: 500; }
.wa-toast__close { color: var(--t-3); flex-shrink: 0; }
.wa-toast__close:hover { color: var(--t-1); }

/* Blocs de chargement */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: wa-shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes wa-shimmer { from { background-position: 100% 50% } to { background-position: 0 50% } }

/* ==========================================================================
   15 · UTILITAIRES
   ========================================================================== */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.gap-8 { gap: 8px } .gap-12 { gap: 12px } .gap-16 { gap: 16px }
.mt-8 { margin-top: 8px } .mt-16 { margin-top: 16px } .mt-24 { margin-top: 24px } .mt-32 { margin-top: 32px }
.hidden { display: none !important; }
.stack > * + * { margin-top: var(--stack-gap, 16px); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   16 · LA DA DE LA VITRINE, DANS L'APP
   --------------------------------------------------------------------------
   Ce que la page d'accueil (index.php) installe — la ronde du logo sur les
   grands titres, l'étiquette en pastille au-dessus, le papier crème, le
   trait tracé à la main — revient ici pour que quelqu'un qui clique
   « Ouvrir l'app » n'ait pas l'impression de changer de produit.

   Rien n'est inventé : les valeurs sont celles de la vitrine, et les
   couleurs se prennent dans les jetons du § 01.
   ========================================================================== */

/* ── Le papier, en trois plans ──
   Une interface d'application se lit en profondeur, pas à plat. Trois
   niveaux, du plus reculé au plus avancé :

     --bg        le plan du fond, celui qui porte tout      (creusé)
     --surface-2 la barre du haut et la fenêtre : le crème du plan de
                 travail — les deux forment une seule feuille
     --surface   les affichettes, au-dessus de la fenêtre   (blanc)

   L'écart entre deux plans voisins reste faible — on est sur du papier
   crème, pas sur du gris technique — mais il doit exister : à 2 % de
   luminance près, deux plans se confondent et seul le filet sépare, ce
   qui donne l'impression d'un trait posé au hasard plutôt que d'une
   surface. On tient donc ~10 % entre le fond et la fenêtre.

   La teinte chaude est conservée à chaque étage (le crème vire
   légèrement jaune) : seule la clarté varie, jamais la couleur. */
html, body {
  /* Le fond de page et la barre du haut portent le même crème : la barre
     ne se détache jamais en bandeau, elle prolonge le papier. C'est la
     règle sur toutes les pages de l'app. */
  --bg:        #F7F4EF;   /* le papier — et le fond de la barre du haut */
  --surface:   #FFFFFF;   /* les affichettes : le plan le plus avancé */
  --surface-2: #F7F4EF;   /* les panneaux, au même niveau que le papier */
  --surface-3: #EDE8DF;   /* les creux : ce qui doit s'enfoncer sous le papier */

  /* Les filets se raccordent au papier : assez denses pour se lire sur
     lui, jamais au point de dessiner une grille. */
  --line:   #EBE6DD;
  --line-2: #E1DBD1;
  --line-3: #CDC6BA;

  background: var(--bg);
}

/* ── Les grands titres prennent la ronde ──
   Seulement les deux premiers niveaux, et seulement là où on les lit en
   gros. Les titres d'affichette (h3, .mk-card b) gardent Inter Tight :
   la ronde en petit corps devient molle. */
h1, .display, .mk-top__t h1, .mk-ask__h, .mk-empty h2, .empty h2 {
  font-family: var(--round);
  font-weight: 800; letter-spacing: -.03em;
}
h1, .mk-top__t h1 { line-height: .98; }
.mk-top__t h1 em, h1 em { font-style: normal; color: var(--brand); }

/* ── L'étiquette en pastille ──
   Le sur-titre était un libellé en capitales posé à plat. Il devient la
   pastille de la vitrine : même fond tendre, même filet, même rouge dense.
   `.overline` sans `.accent` reste à plat — il sert ailleurs de simple
   étiquette de champ. */
.mk-top__k, .overline.accent {
  height: 27px; padding: 0 13px 0 11px;
  border-radius: var(--r-pill);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand-text);
  font-size: .7rem; letter-spacing: .1em;
}
.mk-top__k i, .overline.accent i { font-size: .95rem; }
/* Une étiquette longue sur un écran étroit revient à la ligne dans sa
   pilule plutôt que de pousser la page en largeur. */
@media (max-width: 400px) {
  .mk-top__k, .overline.accent {
    height: auto; padding: 5px 12px; line-height: 1.35;
  }
}

/* ── Le trait tracé à la main ──
   Le même geste que dans la vitrine, posé sous un titre. Décoratif : il
   n'est jamais seul porteur d'une information. */
.scribble { display: block; color: var(--n-300); pointer-events: none; }
.scribble svg { display: block; width: 100%; height: auto; }
.scribble--head {
  width: clamp(72px, 22vw, 108px);
  margin: 9px 0 0; transform: rotate(-2deg);
}
/* Le trait se dessine à l'ouverture de la page. */
.scribble path {
  stroke-dasharray: var(--len, 150); stroke-dashoffset: var(--len, 150);
  animation: scribbleDraw 1.1s var(--ease) .2s forwards;
}
@keyframes scribbleDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .scribble path { stroke-dashoffset: 0; animation: none; }
}

/* ── Les chiffres prennent la ronde ──
   Les tickets de statistiques (mes plans, mon profil) sont les pastilles
   chiffrées de la vitrine : c'est le nombre qu'on lit d'abord, il porte
   donc la voix de la marque. Le libellé sous lui reste en Inter. */
.mk-ticket b {
  font-family: var(--round);
  font-weight: 800; letter-spacing: -.028em;
}

/* ==========================================================================
   17 · ÉTATS D'ÉCRAN
   --------------------------------------------------------------------------
   Les quatre moments où l'app n'a rien à montrer : elle travaille, elle a
   réussi, elle a échoué, il n'y a rien. Un seul gabarit les porte tous les
   quatre — même tuile, même titre, même colonne — et seule la couleur du
   signe change. On reconnaît la forme avant de lire le texte.

   Deux usages :
   · .wa-st--full  → l'écran entier (page d'erreur, confirmation, attente) ;
   · .wa-st seul   → posé dans une page, à la place d'une liste vide.
   ========================================================================== */
.wa-st {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 48px var(--pad) 40px;
}

/* Plein écran : la colonne est centrée verticalement, et laisse la place
   aux barres si la page en porte (le <body> les déclare comme ailleurs). */
.wa-st--full {
  min-height: 100dvh;
  justify-content: center;
  padding: calc(var(--safe-t) + 56px) var(--pad) calc(var(--safe-b) + 48px);
}
/* La barre du haut est dans le flux, celle du bas se paie en marge sous le
   corps : dans les deux cas l'ecran plein doit rendre la place, sinon la
   page depasse d'une barre et gagne un ascenseur pour rien. */
body.has-navbar .wa-st--full { min-height: calc(100dvh - var(--nav-h)); }
body.has-tabbar .wa-st--full { min-height: calc(100dvh - var(--tabbar) - var(--safe-b) - 16px); }
body.has-navbar.has-tabbar .wa-st--full {
  min-height: calc(100dvh - var(--nav-h) - var(--tabbar) - var(--safe-b) - 16px);
}

.wa-st__in { width: 100%; max-width: 30rem; }

/* ── Le signe ──
   Une tuile carrée à coins généreux, comme la vignette d'une affichette.
   Sa couleur porte l'état ; l'icône seule ne le porte jamais (le titre le
   dit aussi, en toutes lettres). */
.wa-st__ic {
  width: 88px; height: 88px; margin: 0 auto 22px;
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--t-3);
  box-shadow: var(--sh-1);
}
.wa-st--ok   .wa-st__ic { background: var(--ok-soft);    border-color: var(--ok-line);    color: var(--ok); }
.wa-st--bad  .wa-st__ic { background: var(--bad-soft);   border-color: var(--bad-line);   color: var(--bad); }
.wa-st--wait .wa-st__ic { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-text); }

/* ── Le texte ──
   Le titre prend la ronde du logo, comme tous les grands titres de l'app.
   Le paragraphe reste court : une phrase qui dit quoi faire ensuite. */
.wa-st__h {
  font-family: var(--round);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  font-size: 1.7rem;
  margin-bottom: 10px;
}
.wa-st__p {
  font-size: .95rem; line-height: 1.6; color: var(--t-2);
  margin: 0 auto; max-width: 40ch;
}

/* ── Les suites possibles ──
   Une action franche, une action de repli. Jamais plus de deux : au-delà,
   l'écran cesse d'être une réponse et redevient un menu. */
.wa-st__cta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 28px;
}
.wa-st__cta .mk-btn, .wa-st__cta .btn { min-width: 168px; }

/* La ligne de bas de page : référence d'erreur, compte à rebours, rappel. */
.wa-st__note {
  margin-top: 22px;
  font-size: .8rem; color: var(--t-3); line-height: 1.5;
}
.wa-st__note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 1px 6px;
}

/* ══ L'attente ══════════════════════════════════════════════════════════
   Un anneau qui tourne, pas un sablier : on montre que ça avance, on ne
   promet pas une durée. Le trait est brand sur un anneau de filet. */
.wa-st__spin {
  width: 88px; height: 88px; margin: 0 auto 22px;
  border-radius: 50%;
  border: 5px solid var(--line-2);
  border-top-color: var(--brand);
  animation: wa-spin .85s linear infinite;
}
@keyframes wa-spin { to { transform: rotate(360deg) } }

/* Sans mouvement, l'anneau ne peut plus rien dire : il devient une tuile
   qui respire, et le texte porte seul l'information. */
@media (prefers-reduced-motion: reduce) {
  .wa-st__spin {
    border-color: var(--brand-line); border-top-color: var(--brand);
    animation: wa-beat 1.6s ease-in-out infinite;
  }
}

/* Le squelette : l'attente d'une liste, à sa place, à sa forme. Il tient
   la mise en page pendant le chargement pour que rien ne saute ensuite. */
.wa-st__sk { width: 100%; max-width: var(--col); margin: 0 auto; display: grid; gap: 12px; }
.wa-st__sk-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px; box-shadow: var(--sh-1);
}
.wa-st__sk-th { width: 52px; height: 52px; border-radius: var(--r); flex-shrink: 0; }
.wa-st__sk-tx { flex: 1; display: grid; gap: 8px; }
.wa-st__sk-tx span { display: block; height: 11px; border-radius: var(--r-pill); }
.wa-st__sk-tx span:last-child { width: 55%; height: 9px; }

/* ══ La réussite ════════════════════════════════════════════════════════
   La coche se trace, elle n'apparaît pas : le geste dit que quelque chose
   vient de se terminer. Même trait tracé à la main que la vitrine. */
.wa-st__check { width: 44px; height: 44px; display: block; }
.wa-st__check path {
  fill: none; stroke: currentColor; stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 32; stroke-dashoffset: 32;
  animation: wa-check .45s var(--ease) .12s forwards;
}
@keyframes wa-check { to { stroke-dashoffset: 0 } }
.wa-st--ok .wa-st__ic { animation: wa-pop .5s var(--spring) both; }
@keyframes wa-pop { from { transform: scale(.86); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .wa-st__check path { stroke-dashoffset: 0; animation: none; }
  .wa-st--ok .wa-st__ic { animation: none; }
}

/* Sur un petit écran, la colonne se resserre plutôt que de se réduire. */
@media (max-width: 420px) {
  .wa-st__h { font-size: 1.5rem; }
  .wa-st__cta { flex-direction: column; align-items: stretch; }
  .wa-st__cta .mk-btn, .wa-st__cta .btn { width: 100%; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   LA PILE DE PHOTOS — jusqu'à trois, posées les unes sur les autres.

   Trois tirages jetés sur une table plutôt qu'une grille bien rangée :
   la grille dit « catalogue », la pile dit « quelqu'un est allé là-bas
   et a pris ces photos ». C'est le ton qu'on veut pour un bon plan
   partagé entre voisins.

   La photo de tête est droite (à deux degrés près) et centrée : c'est
   elle qu'on lit. Les deux autres s'inclinent et débordent de part et
   d'autre, assez pour qu'on devine qu'il y en a plusieurs, pas assez
   pour qu'elles réclament l'attention.

   Les emplacements vides suivent exactement la même géométrie, en gris
   et pointillés : un plan sans photo montre donc trois cartes à remplir
   au lieu d'un trou, et n'importe qui peut y déposer une image.

   Tout est réglé par --s (le côté d'une photo) : la même pile sert de
   vignette dans les listes et de galerie sur la fiche, à une variable
   près.
   ══════════════════════════════════════════════════════════════════ */
.pile {
  --s: 104px;          /* côté d'une photo */
  --spread: 17px;      /* de combien les deux du dessous débordent */
  /* Le bloc est indispensable : la pile est portée par un <span>, et une
     boîte inline ignore width et height — la pile mesurerait 0×0 et ses
     tuiles, positionnées par rapport à elle, partiraient de travers. */
  display: block;
  position: relative; flex-shrink: 0;
  /* Assez large pour contenir l'écartement du survol ET le débord des
     rotations : l'affichette qui l'accueille masque ce qui dépasse
     (overflow: hidden), un cadre trop juste rognerait un coin. */
  width: calc(var(--s) + 74px);
  height: calc(var(--s) + 28px);
}

.pile__i {
  position: absolute; top: 50%; left: 50%;
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 13px; overflow: hidden;
  background: var(--surface-2);
  border: 3px solid #fff;
  box-shadow: 0 3px 11px rgba(20, 18, 16, .17);
  padding: 0;
  transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}
/* L'image est détachée du flux : une photo de 1200px de haut ne doit
   pas imposer sa taille naturelle à ce qui l'entoure. */
.pile__i img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Les trois places. La première devant, les deux autres qui dépassent
   à droite puis à gauche — jamais du même côté, sinon la pile penche. */
.pile__i:nth-child(1) { z-index: 3; transform: rotate(-2deg); }
.pile__i:nth-child(2) { z-index: 2; transform: rotate(7deg)  translateX(var(--spread)); }
.pile__i:nth-child(3) { z-index: 1; transform: rotate(-9deg) translateX(calc(var(--spread) * -1)); }

/* Au survol, la pile s'ouvre d'un cran : on comprend qu'il y a bien
   trois photos et qu'elles sont regardables. Rien sur mobile, où le
   survol n'existe pas et où le geste est le toucher. */
@media (hover: hover) {
  .mk-card:hover .pile__i:nth-child(2),
  .pile:hover    .pile__i:nth-child(2) { transform: rotate(10deg) translateX(calc(var(--spread) * 1.45)); }
  .mk-card:hover .pile__i:nth-child(3),
  .pile:hover    .pile__i:nth-child(3) { transform: rotate(-13deg) translateX(calc(var(--spread) * -1.45)); }
}

/* ── Un emplacement libre ── */
.pile__i--empty {
  background: var(--surface-2);
  box-shadow: 0 2px 7px rgba(20, 18, 16, .09);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--t-3); font-size: 1.25rem;
}
/* Le liseré pointillé se pose à l'intérieur du cadre blanc : il dit
   « à remplir » sans transformer la carte en zone de dépôt criarde. */
.pile__i--empty::before {
  content: ''; position: absolute; inset: 4px;
  border: 1.5px dashed var(--line-3); border-radius: 9px;
}
.pile__i--empty i { position: relative; z-index: 1; }
@media (hover: hover) {
  .pile__i--empty:hover { color: var(--brand); }
  .pile__i--empty:hover::before { border-color: var(--brand-line, var(--brand)); }
}
.pile__i--empty:active { transform-origin: center; filter: brightness(.97); }

/* Une photo qu'on peut agrandir l'annonce au curseur. */
.pile__i--zoom { cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
  .pile__i { transition: none; }
}