/* MOHAA7 — l'identité de l'app (refonte du 09/11/2026).

   Noir profond et or, comme mohaaa7.pro (--ink #0b0b0c, --gold #b8892b). Sombre par défaut, clair disponible
   (Réglages > Apparence). Chargée en DERNIER : elle ne fait que redéfinir les variables de style.css et polir les
   composants communs ; « Mes couleurs » (data-apparence absent) rend la main aux réglages d'avant.

   Échelle : espaces 4/8/12/16/24/32 (--e*), rayons 10/16/22 (--rayon-s, --rayon, --rayon-l), une seule ombre douce,
   titres en caractère éditorial (--police-titre), corps en Manrope. Contrastes vérifiés : texte ≥ 4,5:1, discret ≥ 4,5:1. */

:root[data-apparence="mohaa7"] {
  --or: #D9A94E;
  --or-fort: #E7BE6B;
  --or-doux: color-mix(in srgb, var(--or) 14%, var(--surface));
  --or-trait: color-mix(in srgb, var(--or) 36%, var(--surface));
  --police-titre: ui-serif, 'New York', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --rayon-s: 10px; --rayon-m: 12px; --rayon-l: 22px;
  --courbe: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Sombre (par défaut) ---------- */
:root[data-apparence="mohaa7"][data-mode="sombre"] {
  color-scheme: dark;
  --fond: #0B0B0C;
  --surface: #151517;
  --surface-2: #1C1C1F;
  --survol: #232327;
  --encre: #F6F2EA;
  --texte: #E4DFD5;
  --encre-2: #BDB7AC;
  --encre-3: #9C968B;
  --trait: #26262A;
  --trait-fort: #34343A;
  --accent: var(--or);
  --accent-encre: #0B0B0C;
  --accent-fonce: #C99638;
  --accent-doux: color-mix(in srgb, var(--or) 13%, #151517);
  --accent-doux-2: color-mix(in srgb, var(--or) 24%, #151517);
  --accent-trait: color-mix(in srgb, var(--or) 40%, #151517);
  --vert: var(--or);
  --vert-encre: #0B0B0C;
  --vert-fonce: var(--or-fort);
  --ok: #8FD9A8; --ok-fond: color-mix(in srgb, #8FD9A8 13%, #151517);
  --ko: #FF9D8F; --ko-fond: color-mix(in srgb, #FF9D8F 13%, #151517); --ko-trait: color-mix(in srgb, #FF9D8F 32%, #151517);
  --attente: #F0C674; --attente-fond: color-mix(in srgb, #F0C674 13%, #151517);
  --bleu: #A9C1FF; --bleu-fond: color-mix(in srgb, #A9C1FF 13%, #151517);
  --ombre: none;
  --ombre-survol: 0 10px 30px rgb(0 0 0 / 45%);
  --ombre-haute: 0 24px 60px rgb(0 0 0 / 60%);
  --anneau: 0 0 0 3px color-mix(in srgb, var(--or) 35%, transparent);
  --rail: #0B0B0C; --rail-fort: #000; --rail-actif: color-mix(in srgb, var(--or) 16%, transparent);
}

/* ---------- Clair ---------- */
:root[data-apparence="mohaa7"][data-mode="clair"] {
  color-scheme: light;
  --or: #8A6416;            /* or lisible sur blanc (5,1:1) ; l'or de marque #B8892B reste pour les aplats */
  --or-fort: #B8892B;
  --fond: #F6F4EF;
  --surface: #FFFFFF;
  --surface-2: #F3F1EC;
  --survol: #ECE9E2;
  --encre: #0B0B0C;
  --texte: #1E1E20;
  --encre-2: #4E4C48;
  --encre-3: #67645E;
  --trait: #E7E4DD;
  --trait-fort: #D3CFC6;
  --accent: #B8892B;
  --accent-encre: #0B0B0C;
  --accent-doux: #F6EEDC;
  --accent-doux-2: #EFDFBC;
  --accent-trait: #DCC28B;
  --vert: #0B0B0C;
  --vert-encre: #FFFFFF;
  --vert-fonce: #2A2A2D;
  --ombre: 0 1px 2px rgb(11 11 12 / 4%);
  --ombre-survol: 0 10px 28px rgb(11 11 12 / 9%);
  --anneau: 0 0 0 3px color-mix(in srgb, #B8892B 30%, transparent);
}

/* ---------- Base ---------- */
:root[data-apparence="mohaa7"] body { background: var(--fond); font-size: 15px; }
:root[data-apparence="mohaa7"] h1 { font-family: var(--police-titre); font-weight: 600; letter-spacing: -.01em; }
:root[data-apparence="mohaa7"] h1, :root[data-apparence="mohaa7"] h2 { text-wrap: balance; }
:root[data-apparence="mohaa7"] :focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
:root[data-apparence="mohaa7"] button, :root[data-apparence="mohaa7"] a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:root[data-apparence="mohaa7"] .num { font-variant-numeric: tabular-nums; }

/* Cartes : un trait fin, beaucoup d'air, pas d'ombre en sombre. */
:root[data-apparence="mohaa7"] .carte { border-radius: var(--rayon); padding: var(--e5); }
:root[data-apparence="mohaa7"] .carte-tete h2 { font-size: 16px; letter-spacing: -.01em; }

/* Boutons : pilule, or en sombre, noir en clair. */
:root[data-apparence="mohaa7"] .btn { border-radius: 999px; padding-inline: 16px; font-weight: 650; box-shadow: none; }
:root[data-apparence="mohaa7"] .btn.petit { border-radius: 999px; padding-inline: 12px; }
:root[data-apparence="mohaa7"] .btn.grand { min-height: 52px; padding: 14px 24px; font-size: 16px; }
:root[data-apparence="mohaa7"] .btn:active { transform: scale(.98); }

/* Barre du haut : sobre, sur le fond. */
:root[data-apparence="mohaa7"] .haut { background: color-mix(in srgb, var(--fond) 86%, transparent); border-bottom-color: transparent; }
:root[data-apparence="mohaa7"] .haut .btn.primaire.btn-icone { border-radius: 999px; }

/* Barre du bas : verre fumé, l'onglet actif en or, Claude au milieu. */
@media (max-width: 860px) {
  :root[data-apparence="mohaa7"] .barre-bas {
    background: color-mix(in srgb, var(--fond) 82%, transparent); border-top: 1px solid var(--trait);
    -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  }
  :root[data-apparence="mohaa7"] .barre-bas a, :root[data-apparence="mohaa7"] .barre-bas button { min-height: 62px; font-size: 11.5px; color: var(--encre-3); }
  :root[data-apparence="mohaa7"] .barre-bas .actif { color: var(--or); }
  :root[data-apparence="mohaa7"] .barre-bas .barre-claude { position: relative; color: var(--encre); }
  :root[data-apparence="mohaa7"] .barre-bas .barre-claude svg {
    box-sizing: content-box; padding: 9px; margin-top: -6px; border-radius: 999px;
    background: var(--or); color: #0B0B0C; box-shadow: 0 6px 18px color-mix(in srgb, var(--or) 30%, transparent);
  }
  :root[data-apparence="mohaa7"] main { padding-top: 8px; }
}

/* Bandeau mail : sous l'écran, discret. */
:root[data-apparence="mohaa7"] .bandeau-mail {
  margin: 0 16px calc(96px + env(safe-area-inset-bottom)); background: var(--surface); border: 1px solid var(--trait); font-size: 13.5px; color: var(--encre-2);
}
:root[data-apparence="mohaa7"] .bandeau-mail b { font-weight: 600; color: var(--encre-2); }

/* ---------- Accueil court ---------- */
.mx-tete { display: grid; gap: 2px; padding: 8px 2px 18px; }
.mx-surtitre, .mx-etiquette {
  margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--or, var(--vert));
}
.mx-salut { font-family: var(--police-titre, inherit); font-size: 36px; line-height: 1.05; font-weight: 600; letter-spacing: -.015em; color: var(--encre); }
.mx-sous { margin: 4px 0 0; color: var(--encre-2); }

.mx-carte {
  display: grid; gap: 10px; min-width: 0; margin: 0 0 12px; padding: 20px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-l, 22px); color: var(--texte); text-decoration: none;
}
a.mx-carte:hover { text-decoration: none; border-color: var(--trait-fort); }
.mx-carte-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mx-carte-tete h2 { font-size: 15px; font-weight: 700; color: var(--encre); }
.mx-lien { font-size: 13.5px; font-weight: 650; color: var(--or, var(--vert)); white-space: nowrap; }

/* La prochaine action : la carte qui compte. */
.mx-hero {
  position: relative; overflow: hidden; gap: 12px; padding: 22px 20px 20px;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--or, var(--accent)) 22%, transparent) 0%, transparent 60%),
    var(--surface);
  border-color: color-mix(in srgb, var(--or, var(--accent)) 30%, var(--trait));
}
.mx-hero-titre { margin: 0; font-family: var(--police-titre, inherit); font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; color: var(--encre); overflow-wrap: anywhere; }
.mx-hero-vide .mx-hero-titre { font-size: 22px; }
.mx-hero-detail { margin: -4px 0 0; color: var(--encre-2); font-size: 14px; }
.mx-hero-gestes { display: grid; margin-top: 4px; }
.mx-hero-gestes .btn { width: 100%; }
.mx-titre-bouton { all: unset; cursor: pointer; overflow-wrap: anywhere; }
.mx-titre-bouton:focus-visible { outline: 2px solid var(--or, var(--vert)); outline-offset: 3px; border-radius: 6px; }

/* Les autres tâches du jour : un rond à cocher, d'un geste. */
.mx-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.mx-tache { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 0; border-top: 1px solid var(--trait); }
.mx-tache:first-child { border-top: 0; padding-top: 4px; }
.mx-tache-texte { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mx-tache-texte b { font-weight: 600; color: var(--encre); overflow-wrap: anywhere; }
.mx-tache-texte span { font-size: 13px; color: var(--encre-3); }
.mx-tache-geste { flex: none; }
.mx-coche {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1.5px solid var(--trait-fort); background: transparent; color: transparent;
}
.mx-coche:hover, .mx-coche:focus-visible { border-color: var(--or, var(--vert)); color: var(--or, var(--vert)); }
.mx-coche:active { background: var(--or, var(--vert)); color: var(--surface); }

/* Le prochain tournage, d'un coup d'œil. */
.mx-tournage { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.mx-rebours {
  flex: none; min-width: 64px; height: 64px; padding: 0 10px; display: grid; place-items: center; border-radius: 18px;
  background: var(--or-doux, var(--accent-doux)); color: var(--or, var(--vert)); font-family: var(--police-titre, inherit); font-size: 22px; font-weight: 600;
}
.mx-tournage-texte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mx-tournage-texte b { color: var(--encre); font-weight: 650; }
.mx-tournage-texte b::first-letter { text-transform: uppercase; }
.mx-tournage-lieu { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--encre-2); font-size: 13.5px; }
.mx-tournage-vide { display: flex; align-items: center; justify-content: space-between; }
.mx-puce { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.mx-valider { border-color: var(--or-trait, var(--accent-trait)); }
.mx-compte { min-width: 28px; height: 28px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: var(--or, var(--vert)); color: var(--accent-encre, #fff); font-weight: 800; font-size: 13px; }
.mx-titres { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mx-titres li { position: relative; padding-left: 16px; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-titres li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 99px; background: var(--or, var(--accent)); }
.mx-valider .btn { width: 100%; }
.mx-puce.ok { background: var(--ok-fond); color: var(--ok); }
.mx-puce.attente { background: var(--attente-fond); color: var(--attente); }

/* À valider : la carte reprend le style commun, avec un liseré or. */

/* Voir plus : tout le reste, replié. */
.mx-plus { margin: 4px 0 12px; }
.mx-plus > summary {
  list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; cursor: pointer;
  border: 1px dashed var(--trait-fort); border-radius: 999px; color: var(--encre-2); font-weight: 650;
}
.mx-plus > summary::-webkit-details-marker { display: none; }
.mx-plus[open] > summary { margin-bottom: 12px; }
.mx-plus[open] > summary svg { transform: rotate(180deg); }
.mx-plus-corps { display: grid; gap: 12px; }
.mx-raccourcis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.mx-raccourcis .btn { width: 100%; min-width: 0; }
.mx-raccourcis .btn span { overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 861px) {
  .mx-tete, .mx-carte, .mx-plus, .mx-raccourcis { max-width: 640px; }
  .mx-salut { font-size: 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  .mx-coche, .mx-plus > summary svg, :root[data-apparence="mohaa7"] .btn { transition: background-color .15s, border-color .15s, color .15s, transform .12s; }
}

/* ---------- L'app de l'équipe (Dylan, Bot) ---------- */
button.mx-carte { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.mx-lien-bouton { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 650; }
.eq-ecran .mx-carte, .eq-ecran .mx-tete { margin: 0; }
:root[data-apparence="mohaa7"] .eq-haut {
  background: color-mix(in srgb, var(--fond) 86%, transparent); border-bottom-color: transparent;
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
}
.eq-marque { font-family: var(--police-titre, inherit); font-size: 17px; font-weight: 600; letter-spacing: .14em; color: var(--encre); }
.eq-haut .eq-ou { font-size: 13px; color: var(--encre-3); }
:root[data-apparence="mohaa7"] .eq-bas {
  grid-auto-columns: minmax(0, 1fr); overflow: visible;
  background: color-mix(in srgb, var(--fond) 82%, transparent); border-top: 1px solid var(--trait);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
}
:root[data-apparence="mohaa7"] .eq-bas button { min-height: 62px; font-size: 11.5px; }
:root[data-apparence="mohaa7"] .eq-bas .actif { color: var(--or); }
:root[data-apparence="mohaa7"] .eq-bas .barre-claude svg {
  box-sizing: content-box; padding: 9px; margin-top: -6px; border-radius: 999px; background: var(--or); color: #0B0B0C;
}
.eq-plus { gap: 0; }
.eq-plus-ligne {
  width: 100%; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 2px; border: 0; border-top: 1px solid var(--trait);
  background: none; color: var(--encre); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.eq-plus li:first-child .eq-plus-ligne { border-top: 0; }
.eq-plus-ligne span { flex: 1; }
.eq-plus-ligne svg:first-child { color: var(--or, var(--vert)); }
.eq-plus-ligne svg:last-child { color: var(--encre-3); }
.eq-sortir { width: 100%; color: var(--encre-2); }

/* Le bandeau mail suit l'écran : l'écran n'a plus à réserver la place de la barre du bas. */
:root[data-apparence="mohaa7"] main:has(+ .bandeau-mail) { padding-bottom: 16px; }
.mx-tache:last-child { padding-bottom: 0; }

/* Les trois chiffres du haut (lib/rebours.js) : une rangée compacte, chiffres en or. */
:root[data-apparence="mohaa7"] .rb-bande { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
:root[data-apparence="mohaa7"] .rb-tuile {
  gap: 2px; padding: 14px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--trait); color: var(--encre); box-shadow: none;
}
:root[data-apparence="mohaa7"] .rb-tuile:hover { transform: none; border-color: var(--trait-fort); }
:root[data-apparence="mohaa7"] .rb-titre { font-size: 10.5px; letter-spacing: .1em; color: var(--encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-apparence="mohaa7"] .rb-chiffre { font-family: var(--police-titre); font-weight: 600; font-size: 26px; color: var(--or); }
:root[data-apparence="mohaa7"] .rb-abonnes .rb-chiffre { color: var(--encre); }
:root[data-apparence="mohaa7"] .rb-detail { font-size: 12px; color: var(--encre-2); }
@media (max-width: 560px) {
  :root[data-apparence="mohaa7"] .rb-bande { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root[data-apparence="mohaa7"] .rb-abonnes { grid-column: auto; display: grid; grid-template-columns: none; }
  :root[data-apparence="mohaa7"] .rb-abonnes .rb-titre { grid-column: auto; }
}
@media (min-width: 861px) { :root[data-apparence="mohaa7"] .rb-bande { max-width: 640px; } }
#mx-a-valider { scroll-margin-top: calc(var(--hauteur-haut) + 12px); }
.eq-ecran .mx-salut { font-size: 34px; }
.eq-ecran .mx-hero-titre { font-size: 24px; }
:root[data-apparence="mohaa7"] .rb-titre { white-space: normal; line-height: 1.25; min-height: 2.5em; }
:root[data-apparence="mohaa7"] .rb-chiffre { font-size: clamp(22px, 6.2vw, 28px); white-space: nowrap; }
:root[data-apparence="mohaa7"] .rb-abonnes .rb-chiffre { font-size: clamp(18px, 5vw, 26px); }

/* Le point du jour : une ligne par sujet, un chiffre, un lien vers l'écran où l'on agit. */
.mx-point-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.mx-point-liste a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--trait); color: var(--texte); text-decoration: none; }
.mx-point-liste li:first-child a { border-top: 0; }
.mx-point-n { flex: none; min-width: 32px; height: 32px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: var(--or-doux, var(--accent-doux)); color: var(--or, var(--vert)); font-weight: 800; }
.mx-point-texte { flex: 1; min-width: 0; display: grid; }
.mx-point-texte b { color: var(--encre); font-weight: 650; }
.mx-point-texte span { color: var(--encre-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-point-liste svg { flex: none; color: var(--encre-3); }