/* =====================================================================
   YAWMY — feuille de styles (mobile-first, RTL par propriétés logiques)
   Identité v0.9 « la maison de famille » (d'après la maquette validée) :
   Vert #0E5E4E · Bleu nuit #15334D · Crème #FBF4E6 · Safran #F2B84B · Corail #EF8C7E · Sable #EADBBE
   Surfaces blanches arrondies à ombre douce, tuiles de modules colorées, illustrations en aplats.
   Police unique : Readex Pro (arabe + latin, variable 160–700), auto-hébergée.
   ===================================================================== */

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url("../fonts/readex-pro-arabic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url("../fonts/readex-pro-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url("../fonts/readex-pro-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette de la maquette */
  --vert: #0e5e4e;
  --vert-fonce: #0a4a3d;
  --vert-pale: #dcede6;
  --nuit: #15334d;
  --nuit-2: #1d4363;
  --creme: #fbf4e6;
  --creme-2: #f6ead3;
  --safran: #f2b84b;
  --safran-fonce: #d99a22;
  --corail: #ef8c7e;
  --corail-pale: #fde6e1;
  --sable: #eadbbe;
  --vert-rgb: 14, 94, 78;
  /* v0.23 — thèmes : surfaces (cartes, champs) et texte d'accent, redéfinis par le mode sombre */
  --surface: #fff;
  --accent-ink: var(--vert);
  --accent-ink-fonce: var(--vert-fonce);
  --ink-strong: var(--nuit);
  /* Noms historiques conservés (toutes les feuilles y font référence) : l'accent devient le vert */
  --electrique: var(--vert);
  --electrique-fonce: var(--vert-fonce);
  --ciel: var(--vert-pale);
  --papier: var(--creme);
  --encre: #1b2d3e;
  --gris: #6b6f76;
  --ligne: #ece2cf;
  --ombre: 0 1px 2px rgba(21, 51, 77, .05), 0 8px 24px rgba(21, 51, 77, .07);
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;

  --bs-body-font-family: "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
  --bs-body-color: var(--encre);
  --bs-body-bg: var(--creme);
  --bs-primary: var(--vert);
  --bs-primary-rgb: var(--vert-rgb);
  --bs-link-color: var(--accent-ink);
  --bs-link-color-rgb: var(--vert-rgb);
  --bs-link-hover-color: var(--accent-ink-fonce);
  --bs-border-color: var(--ligne);
  --bs-secondary-color: var(--gris);
  --bs-border-radius: var(--r-sm);
}

body { font-weight: 360; letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 560; letter-spacing: -0.02em; color: var(--encre); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .h3, [dir="rtl"] .h4, [dir="rtl"] .h5 { letter-spacing: 0; }
strong, b, .fw-semibold { font-weight: 560 !important; }
.fw-bold { font-weight: 650 !important; }
.text-body-secondary { color: var(--gris) !important; }
::selection { background: rgba(242, 184, 75, .4); }

/* --- Boutons et champs --- */
.btn { font-weight: 500; border-radius: var(--r-sm); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { min-height: 36px; }
.btn-lg { min-height: 52px; border-radius: 12px; }
.btn-link { display: inline; min-height: 0; }
.btn-primary {
  --bs-btn-bg: var(--electrique); --bs-btn-border-color: var(--electrique);
  --bs-btn-hover-bg: var(--electrique-fonce); --bs-btn-hover-border-color: var(--electrique-fonce);
  --bs-btn-active-bg: var(--vert-fonce); --bs-btn-active-border-color: var(--vert-fonce);
  --bs-btn-disabled-bg: var(--electrique); --bs-btn-disabled-border-color: var(--electrique);
}
.btn-outline-primary {
  --bs-btn-color: var(--electrique); --bs-btn-border-color: rgba(var(--vert-rgb), .45);
  --bs-btn-hover-bg: var(--electrique); --bs-btn-hover-border-color: var(--electrique);
  --bs-btn-active-bg: var(--electrique); --bs-btn-active-border-color: var(--electrique);
}
.btn-safran { --bs-btn-bg: var(--safran); --bs-btn-color: var(--nuit); --bs-btn-border-color: var(--safran);
  --bs-btn-hover-bg: var(--safran-fonce); --bs-btn-hover-border-color: var(--safran-fonce); --bs-btn-hover-color: var(--nuit);
  --bs-btn-active-bg: #c78a15; --bs-btn-active-color: var(--nuit); font-weight: 600; }
.form-control, .form-select { min-height: 46px; border-color: var(--ligne); background-color: var(--surface); }
.form-control-sm, .form-select-sm { min-height: 36px; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--electrique); box-shadow: 0 0 0 .22rem rgba(var(--vert-rgb), .18);
}
.form-check-input:checked { background-color: var(--electrique); border-color: var(--electrique); }
.form-label { font-weight: 500; margin-bottom: .35rem; }
:focus-visible { outline: 3px solid rgba(var(--vert-rgb), .55); outline-offset: 2px; }
.text-primary { color: var(--accent-ink) !important; }
.alert { border-radius: var(--r-sm); border-width: 0; border-inline-start: 4px solid currentColor; }
.badge { font-weight: 550; }

.skip-link { position: absolute; inset-inline-start: 1rem; top: .5rem; z-index: 2000; background: var(--surface); padding: .5rem 1rem; border-radius: .5rem; }

/* --- Surfaces : blanches, arrondies, ombre douce (maquette) --- */
.card { border: 0 !important; border-radius: var(--r); box-shadow: var(--ombre) !important; background: var(--surface); }
.list-group-item { border-color: var(--ligne); }
.panel-title { font-size: 1rem; font-weight: 560; color: var(--encre); display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.panel-title i { color: var(--accent-ink); }

/* =====================================================================
   Le ruban de la journée (accueil + tableau de bord)
   Desktop : SVG horizontal (positions en attributs, compatible CSP). Mobile : frise verticale.
   ===================================================================== */
.ribbon { color: #fff; }
.ribbon-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ribbon-svg .r-label { font: 500 13px "Readex Pro", sans-serif; fill: #fff; }
.ribbon-svg .r-time { font: 400 12px "Readex Pro", sans-serif; fill: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.ribbon-svg .r-hour { font: 400 11px "Readex Pro", sans-serif; fill: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
.ribbon-svg .r-tick { stroke: rgba(255, 255, 255, .55); stroke-width: 1; }
.ribbon-svg .r-dot { fill: #fff; stroke: var(--nuit); stroke-width: 2; }
.ribbon-svg .r-dot.is-prayer { fill: var(--ciel); }
.ribbon-svg .r-dot.is-done { fill: rgba(255, 255, 255, .45); }
.ribbon-svg .r-sun { fill: var(--safran); }
.ribbon-svg .r-sun-halo { fill: rgba(242, 178, 51, .28); }
.ribbon-svg .r-now { font: 600 13px "Readex Pro", sans-serif; fill: var(--safran); }
.ribbon-svg .r-tick-now { stroke: var(--safran); stroke-dasharray: 2 3; }
.ribbon-svg .r-label .r-time { font-weight: 400; }
.ribbon-list { list-style: none; margin: 0; padding: 0; position: relative; }
.ribbon-list::before {
  content: ""; position: absolute; inset-block: .4rem; inset-inline-start: 5.05rem; width: 6px; border-radius: 3px;
  background: linear-gradient(180deg, var(--nuit) 0%, var(--vert) 24%, #9fd3c3 38%, #fbf4e6 55%, #f2b84b 74%, #ef8c7e 84%, #15334d 100%);
}
.ribbon-list li { display: grid; grid-template-columns: 4.4rem 1.4rem 1fr; align-items: center; gap: .3rem; padding: .45rem 0; }
.ribbon-list .t { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .75); font-size: .875rem; text-align: end; }
.ribbon-list .d { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--nuit); justify-self: center; position: relative; z-index: 1; }
.ribbon-list .is-prayer .d { background: var(--ciel); }
.ribbon-list .is-now .d { background: var(--safran); box-shadow: 0 0 0 5px rgba(242, 178, 51, .3); }
.ribbon-list .is-now .l { color: var(--safran); font-weight: 600; }
.ribbon-list .is-done { opacity: .55; }
.ribbon-list .l { color: #fff; }
.ribbon-list .l small { color: rgba(255, 255, 255, .6); display: block; font-size: .78rem; }


/* =====================================================================
   Page d'accueil publique
   ===================================================================== */
.landing { background: var(--papier); }
.lp-top { background: var(--nuit); }
.lp-top .navbar-brand { color: #fff; font-weight: 650; }
.lp-brand-ar { font-weight: 400; color: rgba(255, 255, 255, .6); margin-inline-start: .35rem; }
.lp-hero { background: var(--nuit); color: #fff; padding: 2.5rem 0 3rem; }
.lp-hero h1 { color: #fff; font-weight: 600; font-size: clamp(2rem, 6.4vw, 3.6rem); line-height: 1.06; letter-spacing: -0.035em; max-width: 15ch; margin-bottom: 1.1rem; }
[dir="rtl"] .lp-hero h1 { line-height: 1.3; letter-spacing: 0; max-width: 18ch; }
.lp-lead { color: rgba(255, 255, 255, .78); font-size: clamp(1.02rem, 2.4vw, 1.2rem); max-width: 52ch; line-height: 1.6; margin-bottom: 1.8rem; }
.lp-ribbon { margin-top: 2.6rem; padding: 1.25rem 1.25rem 1rem; border-radius: var(--r-lg); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.lp-ribbon-caption { color: rgba(255, 255, 255, .55); font-size: .85rem; margin: .6rem 0 0; }
.lp-section { padding: 3.5rem 0; }
.lp-section h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); max-width: 22ch; margin-bottom: .6rem; }
.lp-section .lp-intro { color: var(--gris); max-width: 58ch; margin-bottom: 2rem; }
.lp-modules { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ligne); }
.lp-modules li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; padding: 1.1rem 0; border-bottom: 1px solid var(--ligne); }
.lp-modules i { font-size: 1.35rem; color: var(--accent-ink); line-height: 1.4; }
.lp-modules strong { display: block; font-weight: 560; }
.lp-modules span { color: var(--gris); font-size: .95rem; }
@media (min-width: 768px) { .lp-modules { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.lp-split { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .lp-split { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.lp-block { padding: 1.75rem; border-radius: var(--r-lg); background: var(--surface); border: 0; box-shadow: var(--ombre); }
.lp-block.is-ciel { background: var(--ciel); border-color: transparent; }
.lp-block h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.lp-block ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.lp-block li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; }
.lp-block li i { color: var(--accent-ink); }
.lp-cta { background: var(--nuit); color: #fff; border-radius: var(--r-lg); padding: 2rem 1.5rem; display: grid; gap: 1.25rem; align-items: center; }
.lp-cta h2 { color: #fff; margin: 0; font-size: clamp(1.4rem, 4vw, 1.9rem); max-width: none; }
.lp-cta p { color: rgba(255, 255, 255, .72); margin: .4rem 0 0; }
@media (min-width: 768px) { .lp-cta { grid-template-columns: 1fr auto; padding: 2.5rem 3rem; } }
.lp-foot { padding: 2rem 0 2.5rem; color: var(--gris); font-size: .9rem; }

/* =====================================================================
   Pages publiques (connexion, inscription)
   ===================================================================== */
.guest-body { min-height: 100vh; background: var(--nuit); background-image: linear-gradient(160deg, var(--nuit) 0%, color-mix(in srgb, var(--nuit) 55%, var(--vert)) 55%, var(--vert) 100%); }
.guest-wrap { max-width: 480px; margin: 0 auto; padding: 1.5rem 1rem 2rem; }
.guest-card { border-radius: var(--r-lg) !important; border: 0 !important; }
.guest-card .card-body { padding: 1.75rem 1.4rem; }
@media (min-width: 576px) { .guest-card .card-body { padding: 2.5rem; } }

/* =====================================================================
   Application connectée
   ===================================================================== */
.app-body { background: var(--papier); min-height: 100vh; }
.app-navbar { background: var(--nuit); padding-block: .55rem; }
.app-navbar .navbar-brand { font-weight: 650; letter-spacing: -0.01em; }
.app-navbar .nav-link { color: rgba(255, 255, 255, .72); border-radius: var(--r-sm); font-weight: 450; }
.app-navbar .nav-link:hover { color: #fff; }
.app-navbar .nav-link { white-space: nowrap; }
.app-navbar .nav-link.active { color: #fff; background: rgba(255, 255, 255, .09); box-shadow: inset 0 -2px 0 var(--safran); }
.app-main { padding-top: 1rem; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }   /* barre du bas (≈ 62 px) + marge */
@media (min-width: 768px) { .app-main { padding-top: 1.5rem; padding-bottom: 2.5rem; } }
/* Application installée (plein écran) : la barre système Android / iOS peut se superposer au bas de l'écran */
@media (display-mode: standalone) and (max-width: 767.98px) {
  .app-main { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
  .app-bottom-nav { padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
}
.app-bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; display: flex; justify-content: space-around;
  background: var(--surface); border-top: 1px solid var(--ligne); padding: .3rem 0 calc(.3rem + env(safe-area-inset-bottom));
}
.app-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; min-height: 54px; justify-content: center;
  color: var(--gris); text-decoration: none; font-size: .74rem; position: relative; }
.app-bottom-nav a i { font-size: 1.3rem; }
.app-bottom-nav a.active { color: var(--accent-ink); font-weight: 550; }
.app-bottom-nav a.active::before { content: ""; position: absolute; top: -.3rem; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--electrique); }

/* Bandeau du tableau de bord : la journée réelle de l'utilisateur */
.today { background: var(--nuit); color: #fff; border-radius: var(--r-lg); padding: 1.4rem 1.25rem 1.1rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .today { padding: 1.75rem 2rem 1.4rem; } }
.today-date { color: rgba(255, 255, 255, .6); font-size: .9rem; margin-bottom: .2rem; }
.today h1, .today h2 { color: #fff; font-size: clamp(1.45rem, 4vw, 2rem); margin-bottom: .2rem; }
.today-sub { color: rgba(255, 255, 255, .72); margin-bottom: 1.1rem; }
.today-empty { color: rgba(255, 255, 255, .6); font-size: .9rem; margin: .4rem 0 0; }

.hero-card { background: var(--nuit); color: #fff; border-radius: var(--r-lg); padding: 1.5rem; }
.hero-card h1, .hero-card .h4 { color: #fff; }
.text-white-75 { color: rgba(255, 255, 255, .78); }

.gender-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.gender-options .btn { flex: 1 1 30%; }
.gender-options .btn.is-invalid { border-color: var(--bs-danger); }
.device-ua { max-width: 220px; }
.error-debug { max-height: 360px; }
.lang-switch { white-space: nowrap; }
input[type="password"], input[type="email"], input[type="tel"] { direction: ltr; }
[dir="rtl"] input[type="password"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"] { text-align: right; }

/* --- Foyers --- */
.avatar-circle { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ciel); color: var(--accent-ink); font-weight: 600; }
.avatar-sm { width: 24px; height: 24px; font-size: .75rem; }
.member-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .75rem .2rem .25rem; background: var(--papier);
  border: 1px solid var(--ligne); border-radius: 999px; font-size: .875rem; }
[dir="rtl"] .member-chip { padding: .2rem .25rem .2rem .75rem; }
.role-badge { font-weight: 550; }
.role-owner { background: var(--nuit); color: #fff; }
.role-admin { background: var(--electrique); color: #fff; }
.role-member { background: var(--ciel); color: var(--accent-ink-fonce); }
.role-child { background: #fff1d1; color: #7a5600; }
.border-active { border-color: var(--electrique) !important; box-shadow: inset 4px 0 0 var(--electrique) !important; }
[dir="rtl"] .border-active { box-shadow: inset -4px 0 0 var(--electrique) !important; }
.invite-card { border-inline-start: 4px solid var(--safran) !important; }
.otp-input { letter-spacing: .6em; font-variant-numeric: tabular-nums; font-weight: 600; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); display: inline-block; }

/* --- Notifications --- */
.notif-badge { font-size: .65rem; }
.notif-unread { background: rgba(var(--vert-rgb), .045); }
.notif-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--electrique); margin-top: .45rem; flex-shrink: 0; }
.notif-list .btn-link { white-space: normal; }

/* --- Tableau de bord --- */
.dash-grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 768px) { .dash-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .dash-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.dash-panel { background: var(--surface); border: 0; border-radius: var(--r); padding: 1.2rem 1.25rem; box-shadow: var(--ombre); }
.dash-panel .panel-title { margin-bottom: .75rem; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--ligne); }
.dash-list li:first-child { border-top: 0; }
.dash-list .when { color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-soon { list-style: none; padding: 0; margin: 0; color: var(--gris); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.dash-soon li { padding: .2rem .65rem; border: 1px dashed var(--ligne); border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Horaires de prière --- */
.prayer-hero h1 { font-size: clamp(1.5rem, 4.6vw, 2.2rem); }
.prayer-countdown { font-size: clamp(2rem, 8vw, 3.2rem); font-weight: 600; color: var(--safran); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
.prayer-list .list-group-item { padding: .9rem 1.25rem; }
.prayer-list .prayer-name { font-weight: 500; }
.prayer-time { font-variant-numeric: tabular-nums; font-weight: 500; }
.prayer-list .prayer-time { font-size: 1.15rem; }
.prayer-list .is-next { background: var(--ciel); box-shadow: inset 4px 0 0 var(--safran); }
[dir="rtl"] .prayer-list .is-next { box-shadow: inset -4px 0 0 var(--safran); }
.prayer-list .is-next .prayer-name { font-weight: 600; }
.prayer-list .is-past { color: var(--gris); }
.prayer-list .is-sunrise { color: var(--gris); font-size: .95rem; }
.prayer-table th, .prayer-table td { padding: .55rem .6rem; }
.prayer-table tr.is-today { background: var(--ciel); }
.prayer-table tr.is-today th { box-shadow: inset 4px 0 0 var(--safran); }
.prayer-offset { width: auto; min-width: 9.5rem; }

/* =====================================================================
   Courses & stocks
   Le panier : une case ronde par article ; « pris » = safran, comme le soleil du ruban.
   ===================================================================== */
.narrow-page { max-width: 560px; }
[dir="rtl"] .flip-rtl { display: inline-block; transform: scaleX(-1); }

.module-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--ligne); scrollbar-width: none; }
.module-tabs::-webkit-scrollbar { display: none; }
.module-tabs a { display: flex; align-items: center; gap: .4rem; padding: .6rem .7rem; color: var(--gris); text-decoration: none;
  white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 500; }
.module-tabs a:hover { color: var(--encre); }
.module-tabs a.active { color: var(--accent-ink); border-bottom-color: var(--electrique); }

/* Listes en cours */
.shop-lists { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .shop-lists { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .shop-lists { grid-template-columns: repeat(3, 1fr); } }
.shop-list-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem; background: var(--surface); border: 0; box-shadow: var(--ombre);
  border-radius: var(--r); color: var(--encre); text-decoration: none; }
.shop-list-card:hover, .shop-list-card:focus-visible { border-color: var(--electrique); }
.shop-list-card .name { font-weight: 600; font-size: 1.08rem; }
.shop-list-card .store, .shop-list-card .meta { color: var(--gris); font-size: .88rem; }
.progress-line { display: flex; gap: 3px; margin: .35rem 0 .1rem; }
.progress-line span { flex: 1; height: 6px; border-radius: 3px; background: var(--ciel); }
.progress-line span.on { background: var(--safran); }

/* Liste détaillée */
.shop-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; }
.shop-layout { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 992px) { .shop-layout { grid-template-columns: minmax(0, 1fr) 300px; } .shop-side { position: sticky; top: 5rem; } }
.shop-add { background: var(--surface); border: 0; box-shadow: var(--ombre); border-radius: var(--r); padding: .85rem; margin-bottom: 1.25rem; }
.shop-add-row { display: flex; gap: .5rem; }
.shop-add-row .form-control { min-width: 0; }
.shop-add-qty { flex: 0 0 3.6rem; text-align: center; padding-inline: .3rem; }
@media (min-width: 576px) { .shop-add-qty { flex-basis: 5.2rem; } }
.shop-add-more summary { color: var(--accent-ink); font-size: .9rem; margin-top: .6rem; cursor: pointer; }

.shop-aisle { margin-bottom: 1.1rem; }
.shop-aisle-title { font-size: .92rem; font-weight: 560; color: var(--gris); display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem .2rem; }
.shop-aisle-title i { color: var(--accent-ink); }
.shop-aisle.is-basket .shop-aisle-title i { color: #c48a10; }
.shop-items { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 0; box-shadow: var(--ombre); border-radius: var(--r); }
.shop-item { display: flex; align-items: center; gap: .8rem; padding: .55rem .9rem; border-top: 1px solid var(--ligne); min-height: 60px; }
.shop-item:first-child { border-top: 0; }
.shop-toggle { margin: 0; flex: 0 0 auto; }
.shop-check { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #b7c3db; background: var(--surface); color: transparent;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; padding: 0; transition: background-color .15s, border-color .15s; }
.shop-check:hover { border-color: var(--electrique); color: rgba(var(--vert-rgb), .35); }
.shop-check:focus-visible { outline: 3px solid rgba(var(--vert-rgb), .35); outline-offset: 2px; }
.shop-check.is-static { flex: 0 0 auto; }
.shop-item.is-checked .shop-check { background: var(--safran); border-color: var(--safran); color: var(--nuit); }
.shop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop-label { font-weight: 500; overflow-wrap: anywhere; }
.shop-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .85rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.shop-by:empty { display: none; }
.shop-item.is-checked .shop-label { text-decoration: line-through; text-decoration-color: rgba(20, 33, 61, .45); color: var(--gris); }
.shop-edit { color: var(--gris); padding: .5rem; border-radius: var(--r-sm); }
.shop-edit:hover { color: var(--accent-ink); background: var(--ciel); }

.shop-ticket { border-top: 4px solid var(--safran); }
.ticket-lines { margin: 0; }
.ticket-lines > div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px dashed var(--ligne); }
.ticket-lines > div:first-child { border-top: 0; }
.ticket-lines dt { font-weight: 400; color: var(--gris); }
.ticket-lines dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.ticket-lines .is-total dt { color: var(--encre); font-weight: 600; }
.ticket-lines .is-total dd { font-size: 1.2rem; font-weight: 600; }

/* Alertes de stock (accueil des courses, tableau de bord) */
.stock-alerts { display: flex; flex-wrap: wrap; gap: .5rem; }
.stock-alert { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; font-size: .88rem; text-decoration: none; font-weight: 500; }
.stock-alert.is-low { background: #fff4d9; color: #7a5300; }
.stock-alert.is-expiring { background: #fde8e6; color: #9a2617; }

.filter-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-pills a { padding: .35rem .9rem; border: 1px solid var(--ligne); border-radius: 999px; color: var(--encre); text-decoration: none; background: var(--surface); font-size: .92rem; }
.filter-pills a.active { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.restock-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .7rem 1rem; background: #fff4d9; border-radius: var(--r); color: #5c3f00; }
.restock-bar span { margin-inline-end: auto; font-weight: 500; }

.stock-rows { list-style: none; margin: 0; padding: 0; }
.stock-row { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; border-top: 1px solid var(--ligne); }
.stock-row.is-low { box-shadow: inset 4px 0 0 var(--safran); }
[dir="rtl"] .stock-row.is-low { box-shadow: inset -4px 0 0 var(--safran); }
.stock-name { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--encre); text-decoration: none; }
.stock-name:hover .fw-semibold { color: var(--accent-ink); }
.stock-qty { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.stock-quick { margin: 0; }
.stock-quick .btn { min-width: 2.8rem; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; padding: 0 .5rem; border-radius: 999px; font-size: .78rem; font-weight: 500; margin-inline-end: .35rem; }
.tag-low { background: #fff4d9; color: #7a5300; }
.tag-expiring { background: #fde8e6; color: #9a2617; }
.tag-expired { background: #9a2617; color: #fff; }
.stock-figure.is-low { border-color: var(--safran); }
.stock-big { font-size: 2.2rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.move-types { display: flex; flex-wrap: wrap; gap: .4rem; }
.move-delta { display: inline-block; min-width: 4.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.move-delta.is-in { color: #13795b; }
.move-delta.is-out { color: #9a2617; }

/* Barre du haut entre 768 et 1399 px : icônes seules (le libellé reste lisible par les lecteurs d'écran) */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .app-navbar .nav-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app-navbar .nav-link { padding-inline: .7rem !important; font-size: 1.1rem; }
}

/* --- Installation de l'application --- */
.install-page { max-width: 640px; }
.install-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.install-hero img { flex: 0 0 auto; border-radius: 22%; }
.install-now { background: var(--ciel); border-radius: var(--r); padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.install-perks { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .5rem; }
.install-perks li { display: flex; gap: .6rem; align-items: center; }
.install-perks i { color: var(--accent-ink); font-size: 1.15rem; }
.install-steps { border: 0; box-shadow: var(--ombre); border-radius: var(--r); padding: 1rem 1.1rem; margin-bottom: .75rem; background: var(--surface); }
.install-steps.is-current { box-shadow: var(--ombre), inset 0 4px 0 var(--vert); }
.install-steps ol { margin: 0; padding-inline-start: 1.2rem; }
.install-steps li { margin-bottom: .35rem; }
.guest-card .install-page { max-width: none; }

/* --- Documents --- */
.doc-filters { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .doc-filters { grid-template-columns: 2fr 1.3fr 1.1fr auto auto; align-items: center; } }
.doc-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 0; box-shadow: var(--ombre); border-radius: var(--r); }
.doc-list li + li { border-top: 1px solid var(--ligne); }
.doc-row { display: flex; align-items: center; gap: .85rem; padding: .8rem 1rem; color: var(--encre); text-decoration: none; flex-wrap: wrap; }
.doc-row:hover .doc-title { color: var(--accent-ink); }
.doc-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--ciel); color: var(--accent-ink); display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 auto; }
.doc-icon.is-pdf { background: #fde8e6; color: #b42318; }
.doc-main { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
.doc-title { font-weight: 560; overflow-wrap: anywhere; }
.doc-meta { color: var(--gris); font-size: .86rem; }
.doc-expiry { font-size: .85rem; padding: .2rem .65rem; border-radius: 999px; background: var(--ciel); color: var(--encre); white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-expiry.is-soon { background: #fff4d9; color: #7a5300; }
.doc-expiry.is-expired { background: #9a2617; color: #fff; }
.doc-usage { display: grid; gap: .6rem; }
.doc-usage > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; font-size: .9rem; }
.doc-bar { display: flex; gap: 2px; width: min(240px, 100%); }
.doc-bar span { flex: 1; height: 6px; border-radius: 3px; background: var(--ligne); }
.doc-bar span.on { background: var(--electrique); }
.doc-preview { padding: .75rem; display: flex; justify-content: center; align-items: center; min-height: 220px; background: var(--surface); }
.doc-preview img { max-width: 100%; max-height: 70vh; border-radius: var(--r-sm); }
.doc-preview-file { text-align: center; color: var(--gris); }
.doc-preview-file i { font-size: 3.4rem; color: var(--accent-ink); display: block; margin-bottom: .5rem; }
.scope-options { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .scope-options { grid-template-columns: 1fr 1fr; } }
.scope-option { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--ligne); border-radius: var(--r); cursor: pointer; background: var(--surface); height: 100%; }
.scope-option i { font-size: 1.3rem; color: var(--accent-ink); }
.scope-option span { display: flex; flex-direction: column; }
.scope-option small { color: var(--gris); }
.btn-check:checked + .scope-option { border-color: var(--electrique); box-shadow: inset 0 0 0 1px var(--electrique); background: var(--ciel); }
.btn-check:focus-visible + .scope-option { outline: 3px solid rgba(var(--vert-rgb), .35); outline-offset: 2px; }
.btn-check:disabled + .scope-option { opacity: .5; cursor: not-allowed; }

/* =====================================================================
   Santé féminine — même langage que le ruban de la journée : « le ruban du cycle ».
   Règles = rose, fenêtre fertile = vert d'eau, ovulation = anneau, jour actuel = soleil safran.
   Les états ne reposent jamais sur la seule couleur : motifs (plein, pointillé, anneau) + légende + aria-label.
   ===================================================================== */
:root { --rose: #c93a57; --rose-pale: #fbe3e8; --fertile: #148a78; --fertile-pale: #d7f1ec; }
.text-rose { color: var(--rose) !important; }
.health-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.health-private { margin: 0; font-size: .85rem; color: var(--gris); }
.health-private i { color: var(--fertile); }
.health-hero { background: var(--nuit); color: #fff; border-radius: var(--r-lg); padding: 1.4rem 1.4rem 1.2rem; }
.health-hero.is-pregnancy { background: linear-gradient(135deg, var(--nuit) 0%, #2a3f7a 100%); }
.hh-kicker { margin: 0 0 .2rem; color: #b9c8ea; font-size: .95rem; }
.hh-big { font-size: clamp(1.5rem, 5.5vw, 2.3rem); font-weight: 600; line-height: 1.15; margin: 0 0 .35rem; }
.hh-sub { color: #d5def3; margin-bottom: .6rem; }
.cycle-band { width: 100%; height: auto; display: block; margin-top: .6rem; overflow: visible; direction: ltr; }
.cycle-band .cb-track { fill: rgba(255, 255, 255, .14); }
.cycle-band .cb-period { fill: var(--rose); }
.cycle-band .cb-fertile { fill: #36b5a1; opacity: .75; }
.cycle-band .cb-ovulation { fill: var(--nuit); stroke: #fff; stroke-width: 3; }
.cycle-band .cb-label { font: 500 13px "Readex Pro", sans-serif; fill: #b9c8ea; }
.cycle-band .cb-now { fill: var(--safran); stroke: var(--nuit); stroke-width: 4; }
.cycle-band .cb-now-line { stroke: var(--safran); stroke-width: 2; }
.cycle-band .cb-now-label { font: 600 14px "Readex Pro", sans-serif; fill: var(--safran); }
.cb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .85rem; margin: .4rem 0 0; }
.health-hero .cb-legend { color: #d5def3; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-inline-end: -.5rem; vertical-align: -2px; }
.lg-period { background: var(--rose); }
.lg-predicted { border: 2px dashed var(--rose); background: var(--rose-pale); }
.lg-fertile { background: var(--fertile-pale); border: 2px solid var(--fertile); }
.lg-ovulation { background: var(--surface); border: 3px solid var(--fertile); }
.lg-note { background: var(--surface); border: 2px solid var(--electrique); width: 8px; height: 8px; }
.preg-progress { width: 100%; height: 8px; display: block; margin: .3rem 0 .7rem; }
.preg-progress .pp-track { fill: rgba(255, 255, 255, .18); }
.preg-progress .pp-fill { fill: var(--safran); }

.cycle-cal { background: var(--surface); border: 0; box-shadow: var(--ombre); border-radius: var(--r); padding: .6rem; }
.cc-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.cc-row + .cc-row { margin-top: .3rem; }
.cc-head span { text-align: center; font-size: .78rem; color: var(--gris); padding: .2rem 0; }
.cc-day { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none;
  color: var(--encre); font-variant-numeric: tabular-nums; font-weight: 500; position: relative; max-width: 56px; margin: 0 auto; width: 100%; }
a.cc-day:hover { background: var(--ciel); }
.cc-day.is-empty { visibility: hidden; }
.cc-day.is-future { color: #a3adc2; }
.cc-day.is-period { background: var(--rose); color: #fff; }
.cc-day.is-predicted { border: 2px dashed var(--rose); background: var(--rose-pale); color: var(--encre); }
.cc-day.is-fertile { background: var(--fertile-pale); border: 2px solid var(--fertile); }
.cc-day.is-ovulation { background: var(--surface); border: 3px solid var(--fertile); font-weight: 700; }
.cc-day.is-today { box-shadow: 0 0 0 3px var(--safran); }
.cc-day.has-note::after { content: ""; position: absolute; bottom: 12%; width: 6px; height: 6px; border-radius: 50%; background: var(--electrique); }

.chip-options { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-block; padding: .4rem .85rem; border: 1px solid var(--ligne); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: .92rem; user-select: none; }
.btn-check:checked + .chip { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.btn-check:focus-visible + .chip { outline: 3px solid rgba(var(--vert-rgb), .35); outline-offset: 2px; }

.health-mark { width: 64px; height: 64px; border-radius: 20px; background: var(--fertile-pale); color: var(--fertile); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 1rem; }
.health-promises { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .7rem; }
.health-promises li { display: flex; gap: .75rem; align-items: flex-start; }
.health-promises i { color: var(--fertile); font-size: 1.25rem; margin-top: .1rem; }
.health-unlock .otp-input { max-width: 12rem; letter-spacing: .5em; }

/* =====================================================================
   Design v0.9 — « la maison de famille » (d'après la maquette)
   ===================================================================== */
.app-navbar { background: var(--nuit); }
.brand-mark { width: 34px; height: 34px; }
/* Logo YAWMY · يومي (v0.23) : version claire sur les en-têtes bleu nuit */
.brand-logo { height: 40px; width: auto; display: block; }
.lp-top .brand-logo { height: 48px; }
.app-navbar .nav-link.active { background: rgba(255, 255, 255, .1); box-shadow: inset 0 -2px 0 var(--safran); }
.app-bottom-nav { border-top: 0; box-shadow: 0 -6px 24px rgba(21, 51, 77, .08); border-radius: 22px 22px 0 0; }
.app-bottom-nav a.active { color: var(--accent-ink); }
.app-bottom-nav a.active::before { background: var(--vert); width: 34px; }
.app-bottom-nav a.active i { background: var(--vert-pale); border-radius: 12px; padding: .1rem .7rem; }

/* En-tête de bienvenue, prolongement de la barre du haut */
.home-hero { background: var(--nuit); color: #fff; border-radius: 0 0 30px 30px; padding: 1.4rem 1.25rem 3.6rem;
  margin: -1rem calc(var(--bs-gutter-x, 1.5rem) * -.5) 0; }
.home-hero h1 { color: #fff; font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 600; margin: 0 0 .2rem; }
.home-hero p { color: rgba(255, 255, 255, .8); margin: 0; font-size: 1.02rem; }
@media (min-width: 768px) {
  .home-hero { margin: 0; border-radius: var(--r-lg); padding: 1.8rem 2rem 4rem; }
}
.family-card { position: relative; z-index: 1; margin: -2.6rem .25rem 1.4rem; background: var(--creme-2); border-radius: 22px;
  box-shadow: var(--ombre); display: flex; align-items: center; gap: .75rem; padding: 1rem 1rem 0 1.2rem; overflow: hidden; min-height: 132px; }
@media (min-width: 768px) { .family-card { margin: -2.8rem 1.5rem 1.6rem; padding: 1.1rem 1.5rem 0 1.8rem; } }
.family-text { flex: 1; min-width: 0; padding-bottom: 1rem; }
.family-card h2 { font-size: 1.12rem; font-weight: 600; margin: 0 0 .15rem; color: var(--ink-strong); }
.family-date { color: var(--gris); font-size: .86rem; margin: 0 0 .55rem; }
.family-summary { color: var(--encre); font-size: .95rem; line-height: 1.45; }
.family-art { width: 38%; max-width: 180px; align-self: flex-end; flex-shrink: 0; }
.family-art img { width: 100%; height: auto; display: block; }
[dir="rtl"] .family-art img { transform: scaleX(-1); }

.home-layout { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 992px) {
  .home-layout { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; }
  .day-panel { align-self: start; }
  .home-side { grid-column: 2; grid-row: 1 / span 2; }
  .home-tiles, .day-panel { grid-column: 1; }
}
.home-tiles .tiles { margin-bottom: 0; }
.home-side { display: grid; gap: 1rem; }

/* Tuiles des modules */
.tiles { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (min-width: 576px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.tile { position: relative; display: flex; flex-direction: column; min-height: 132px; height: 100%; padding: 1rem 1rem .95rem; border-radius: 20px;
  text-decoration: none; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
a.tile:hover, a.tile:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(21, 51, 77, .14); }
.tile-icons { display: flex; justify-content: space-between; align-items: flex-start; font-size: 1.75rem; line-height: 1; margin-bottom: auto; }
.tile-deco { font-size: 1.05rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18); }
.tile-title { font-weight: 600; font-size: 1.05rem; margin-top: .9rem; line-height: 1.2; }
.tile-sub { font-size: .82rem; opacity: .88; line-height: 1.3; margin-top: .15rem; }
.tile-soon { font-size: .7rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; line-height: 1.3; background: rgba(255, 255, 255, .28); }
.tile.is-soon { cursor: default; }
.tone-vert { background: var(--vert); color: #fff; }
.tone-nuit { background: var(--nuit); color: #fff; }
.tone-safran { background: var(--safran); color: var(--nuit); }
.tone-safran .tile-deco, .tone-corail .tile-deco { background: rgba(255, 255, 255, .35); }
.tone-corail { background: var(--corail); color: var(--nuit); }
.tone-rose { background: #fbe1e6; color: var(--nuit); }
.tone-rose .tile-icons { color: #c93a57; }
.tone-rose .tile-deco { background: var(--surface); }
.tone-sable { background: var(--sable); color: var(--ink-strong); }
.tone-sable .tile-icons, .tone-vert-pale .tile-icons { color: var(--accent-ink); }
.tone-sable .tile-deco, .tone-vert-pale .tile-deco, .tone-corail-pale .tile-deco { background: rgba(255, 255, 255, .6); }
.tone-vert-pale { background: var(--vert-pale); color: var(--ink-strong); }
.tone-corail-pale { background: var(--corail-pale); color: var(--nuit); }
.tone-corail-pale .tile-icons { color: #c2503f; }
.tone-sable .tile-soon, .tone-vert-pale .tile-soon, .tone-corail-pale .tile-soon, .tone-rose .tile-soon, .tone-safran .tile-soon, .tone-corail .tile-soon { background: rgba(21, 51, 77, .1); }

/* Ma journée : le ruban sur fond bleu nuit */
.day-panel { background: var(--nuit); color: #fff; border-radius: var(--r-lg); padding: 1.2rem 1.25rem 1rem; }
.day-panel .panel-title { color: #fff; }
.day-panel .panel-title i { color: var(--safran); }
.today-empty { color: rgba(255, 255, 255, .7); font-size: .9rem; margin: .4rem 0 0; }

/* Widget « Prochaine prière » */
.w-prayer { background: var(--vert); color: #fff; border-radius: var(--r-lg); padding: 1.15rem 1.2rem 1rem; box-shadow: var(--ombre); overflow: hidden; }
.w-prayer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin: -.15rem -.4rem .2rem 0; }
.w-prayer-head h2 { color: #fff; font-size: 1.05rem; font-weight: 600; margin: .2rem 0 0; }
.w-prayer-head img { width: 132px; height: auto; margin-inline-end: -.6rem; }
.w-prayer-name { font-size: 1.15rem; margin: 0 0 .6rem; }
.w-prayer-name strong { color: var(--safran); font-variant-numeric: tabular-nums; }
.w-prayer-text { color: rgba(255, 255, 255, .85); font-size: .92rem; }
.countdown-boxes { display: flex; align-items: flex-start; gap: .35rem; margin-bottom: .85rem; }
.countdown-boxes span { flex: 1; background: rgba(255, 255, 255, .14); border-radius: 12px; padding: .45rem .2rem .35rem; text-align: center; }
.countdown-boxes b { display: block; font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.countdown-boxes small { display: block; font-size: .72rem; color: rgba(255, 255, 255, .75); }
.countdown-boxes i { font-style: normal; font-weight: 600; font-size: 1.3rem; padding-top: .5rem; color: rgba(255, 255, 255, .6); }
.w-prayer-times { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; text-align: center; font-size: .78rem; }
.w-prayer-times li { display: flex; flex-direction: column; padding: .3rem 0; border-radius: 10px; color: rgba(255, 255, 255, .78); }
.w-prayer-times li span:last-child { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; font-size: .85rem; }
.w-prayer-times li.is-next { background: rgba(242, 184, 75, .22); color: var(--safran); }
.w-prayer .w-link { color: #fff; }

/* Widgets : liens, cases à cocher, événements */
.w-link { font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--accent-ink); }
.w-link:hover { text-decoration: underline; }
.w-checks { list-style: none; margin: 0 0 .4rem; padding: 0; }
.w-checks li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-top: 1px solid var(--ligne); }
.w-checks li:first-child { border-top: 0; }
.w-check-label small { color: var(--gris); font-size: .8rem; margin-inline-start: .25rem; }
.w-checks form { margin: 0; }
.w-check { width: 28px; height: 28px; border-radius: 8px; border: 2px solid #c9c2b4; background: var(--surface); color: transparent; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.w-check:hover, .w-check:focus-visible { border-color: var(--vert); color: var(--accent-ink); }
.w-events { list-style: none; margin: 0 0 .6rem; padding: 0; }
.w-events li + li { border-top: 1px solid var(--ligne); }
.w-events a { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; color: var(--encre); text-decoration: none; }
.w-events a > span:nth-child(2) { flex: 1; min-width: 0; }
.w-events b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-events small { color: var(--gris); font-size: .8rem; }
.w-events .bi-chevron-right { color: var(--gris); }
.w-ev-dot { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .95rem; }
.w-ev-dot.is-reminder { background: var(--corail-pale); color: #c2503f; }
.w-ev-dot.is-doc { background: #fdf1d8; color: #9a6a0a; }
.w-ev-dot.is-late { background: #9a2617; color: #fff; }

/* Page Prière : en-tête vert avec l'illustration de la mosquée */
.prayer-hero { background: var(--vert) url("../img/mosque.svg") no-repeat right 1rem bottom -6px / 190px auto; padding-inline-end: 1.25rem; }
[dir="rtl"] .prayer-hero { background-position: left 1rem bottom -6px; }
.prayer-hero .prayer-countdown { color: var(--safran); }
@media (max-width: 575.98px) { .prayer-hero { background-size: 140px auto; padding-bottom: 4.5rem; } }

/* Accueil public et pages invitées : logo, fond crème */
.lp-hero .lp-art { width: 100%; max-width: 330px; height: auto; display: block; }
.lp-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (min-width: 768px) { .lp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.lp-tiles .tile { min-height: 140px; }
.guest-logo { height: 55px; width: auto; display: block; }
.lp-hero { background: var(--nuit); border-radius: 0 0 36px 36px; }
.lp-hero-grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 992px) { .lp-hero-grid { grid-template-columns: 1.15fr .85fr; } }
.lp-hero-art { background: var(--creme-2); border-radius: 30px; padding: 1.2rem 1.2rem 0; display: flex; justify-content: center; align-items: flex-end; }
[dir="rtl"] .lp-hero-art .lp-art { transform: scaleX(-1); }
.lp-ribbon { background: rgba(255, 255, 255, .05); }
.lp-top { background: var(--nuit); }
.lp-block.is-ciel { background: var(--vert-pale); }
.lp-cta { background: var(--vert); }
/* Messages aux couleurs de la palette */
.alert-info { --bs-alert-bg: var(--vert-pale); --bs-alert-color: var(--vert-fonce); --bs-alert-border-color: var(--vert-pale); }
.alert-success { --bs-alert-bg: #e2f1e9; --bs-alert-color: #0a4a3d; --bs-alert-border-color: #e2f1e9; }
.alert-warning { --bs-alert-bg: #fdf1d8; --bs-alert-color: #6b4a05; --bs-alert-border-color: #fdf1d8; }
.alert-danger { --bs-alert-bg: var(--corail-pale); --bs-alert-color: #8f2414; --bs-alert-border-color: var(--corail-pale); }
/* Téléphone : une tuile seule en dernière ligne occupe toute la largeur */
@media (max-width: 575.98px) { .tiles li:last-child:nth-child(odd) { grid-column: span 2; } .tiles li:last-child:nth-child(odd) .tile { min-height: 96px; } }

/* =====================================================================
   En-têtes de page (toutes les pages) — même famille visuelle que les tuiles de l'accueil
   ===================================================================== */
.page-head { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .9rem 1.25rem;
  padding: 1.2rem 1.25rem 1.3rem; margin: -1rem calc(var(--bs-gutter-x, 1.5rem) * -.5) 1.25rem; border-radius: 0 0 28px 28px; }
@media (min-width: 768px) { .page-head { margin: 0 0 1.5rem; border-radius: var(--r-lg); padding: 1.5rem 1.75rem; } }
.page-head h1 { font-size: clamp(1.35rem, 4.6vw, 1.8rem); font-weight: 600; margin: 0; color: inherit; overflow-wrap: anywhere; }
.page-head p { margin: .15rem 0 0; opacity: .85; font-size: .95rem; }
.ph-main { flex: 1 1 18rem; min-width: 0; position: relative; z-index: 1; }
.ph-row { display: flex; align-items: center; gap: .85rem; }
.ph-icon { width: 46px; height: 46px; border-radius: 15px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem;
  background: rgba(255, 255, 255, .6); color: var(--vert); }
.page-head.is-dark .ph-icon { background: rgba(255, 255, 255, .14); color: #fff; }
.ph-back { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; text-decoration: none; color: inherit; opacity: .85; margin-bottom: .55rem; }
.ph-back:hover { opacity: 1; text-decoration: underline; }
.ph-actions { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; z-index: 1; }
.ph-actions form { margin: 0; }
.ph-art { position: absolute; inset-inline-end: 1rem; bottom: -4px; height: auto; pointer-events: none; }
img.ph-art { width: 170px; opacity: .95; }
.ph-art-family img { width: 128px; height: auto; display: block; }
.page-head.has-art .ph-main { padding-inline-end: 9rem; }
.page-head.has-art .ph-actions { margin-inline-end: 9rem; }
@media (max-width: 575.98px) {
  img.ph-art { width: 120px; } .ph-art-family img { width: 96px; }
  .page-head.has-art .ph-main { padding-inline-end: 6rem; } .page-head.has-art .ph-actions { margin-inline-end: 0; }
}
[dir="rtl"] .ph-art-family img { transform: scaleX(-1); }
.ph-vert { background: var(--vert); color: #fff; }
.ph-nuit { background: var(--nuit); color: #fff; }
.ph-safran { background: var(--safran); color: var(--nuit); }
.ph-corail { background: var(--corail); color: var(--nuit); }
.ph-rose { background: #fbe1e6; color: var(--nuit); }
.ph-rose .ph-icon { color: #c93a57; background: var(--surface); }
.ph-sable { background: var(--sable); color: var(--ink-strong); }
.ph-vert-pale { background: var(--vert-pale); color: var(--ink-strong); }
.ph-corail-pale { background: var(--corail-pale); color: var(--nuit); }
.ph-corail-pale .ph-icon { color: #c2503f; background: var(--surface); }
.page-head.is-dark .btn-outline-primary, .page-head.is-dark .btn-outline-secondary { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .55);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--nuit); --bs-btn-hover-border-color: #fff; }
.page-head.is-dark .btn-primary { --bs-btn-bg: #fff; --bs-btn-color: var(--vert); --bs-btn-border-color: #fff; --bs-btn-hover-bg: var(--creme); --bs-btn-hover-color: var(--vert-fonce); --bs-btn-hover-border-color: var(--creme); }

/* Onglets des modules : barre arrondie blanche, onglet actif en pastille */
.module-tabs { background: var(--surface); border-bottom: 0; border-radius: 16px; padding: .3rem; box-shadow: var(--ombre); gap: .2rem; }
.module-tabs a { border-bottom: 0; margin-bottom: 0; border-radius: 12px; padding: .5rem .8rem; }
.module-tabs a.active { background: var(--vert); color: #fff; }
.module-tabs a:hover:not(.active) { background: var(--creme); }
.health-tabs a.active { background: var(--nuit); }

/* Pages invitées (connexion, inscription…) : fond crème, illustration, carte blanche */
.guest-body { background: var(--creme); background-image: none; }
.guest-top { background: var(--nuit); border-radius: 0 0 32px 32px; padding: 1.1rem 1rem 4.2rem; }
.guest-top .guest-inner { max-width: 480px; margin: 0 auto; }
.guest-art { display: flex; justify-content: center; margin: -3.7rem auto -.9rem; position: relative; z-index: 2; width: 150px; }
.guest-art img { width: 150px; height: auto; display: block; }
.guest-wrap { padding-top: 0; }
.guest-card { box-shadow: var(--ombre) !important; position: relative; z-index: 1; }
.guest-foot { color: var(--gris) !important; }

.guest-card .page-head { margin: 0 0 1.25rem; border-radius: 18px; }
.prayer-hero h2 { font-size: clamp(1.5rem, 4.6vw, 2.2rem); }

/* ---------- Diagnostic des notifications (v0.11) ---------- */
.diag { border-inline-start: 5px solid var(--vert) !important; }
.diag-warn { border-inline-start-color: var(--safran) !important; }
.diag-ko { border-inline-start-color: var(--corail) !important; }
.diag-list { display: grid; gap: .65rem; }
.diag-item { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.35; }
.diag-item > .bi { font-size: 1.05rem; margin-top: .05rem; flex: 0 0 auto; }
.diag-item.is-ok > .bi { color: var(--accent-ink); }
.diag-item.is-warn > .bi { color: var(--safran-fonce); }
.diag-item.is-ko > .bi { color: #c4513f; }
.diag-admin summary { cursor: pointer; color: var(--ink-strong); }
.diag-code { background: var(--nuit); color: #f3f6f9; border-radius: var(--r-sm); padding: .55rem .7rem; margin: .35rem 0;
  font-size: .78rem; white-space: pre-wrap; word-break: break-all; text-align: left; }
.diag-code code { color: inherit; }

/* ---------- Finances (v0.12) ---------- */
.btn-nuit { --bs-btn-bg: var(--nuit); --bs-btn-color: #fff; --bs-btn-border-color: var(--nuit);
  --bs-btn-hover-bg: var(--nuit-2); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--nuit-2);
  --bs-btn-active-bg: #0e2437; --bs-btn-active-color: #fff; }
.month-nav { display: inline-flex; align-items: center; gap: .25rem; background: var(--surface); border-radius: 999px; padding: .25rem; box-shadow: var(--ombre); margin-bottom: 1rem; }
.month-step { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; color: var(--ink-strong); text-decoration: none; }
.month-step:hover { background: var(--creme); }
.month-label { min-width: 9.5rem; text-align: center; font-weight: 600; color: var(--ink-strong); }

.fin-summary { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
.fin-summary .is-balance { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .fin-summary .fin-amount { font-size: 1.15rem; } .fin-figure { padding: .8rem .9rem; } }
@media (min-width: 576px) { .fin-summary { grid-template-columns: repeat(3, 1fr); gap: .75rem; } .fin-summary .is-balance { grid-column: auto; } }
.fin-figure { background: var(--surface); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: .15rem;
  border-inline-start: 5px solid var(--ligne); }
.fin-figure.is-income { border-inline-start-color: var(--vert); }
.fin-figure.is-expense { border-inline-start-color: var(--corail); }
.fin-figure.is-balance { background: var(--nuit); color: #fff; border-inline-start-color: var(--safran); }
.fin-label { font-size: .85rem; color: var(--gris); }
.fin-figure.is-balance .fin-label, .fin-figure.is-balance .fin-trend { color: rgba(255, 255, 255, .75); }
.fin-amount { font-size: 1.45rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fin-figure.is-balance.is-negative .fin-amount { color: #ffb4a8; }
.fin-trend { font-size: .8rem; color: var(--gris); }
.fin-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gris); }
.fin-num.is-warn { color: var(--safran-fonce); font-weight: 600; }
.fin-num.is-over { color: #c4513f; font-weight: 600; }

.fin-grid { display: grid; gap: 0 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .fin-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

.fin-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.fin-bar-head { display: flex; justify-content: space-between; gap: .75rem; font-size: .93rem; margin-bottom: .25rem; }
.meter { display: block; width: 100%; height: 8px; }
[dir="rtl"] .meter { transform: scaleX(-1); }
.meter-track { fill: var(--creme-2); }
.meter-fill { fill: var(--vert); }
.meter-warn .meter-fill { fill: var(--safran); }
.meter-over .meter-fill { fill: var(--corail); }
.meter-neutral .meter-fill:not([fill]) { fill: var(--nuit); }

.txn-list { list-style: none; margin: 0; padding: 0; }
.txn { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--ligne); }
.txn:first-child { border-top: 0; }
.txn-icon { flex: 0 0 2.25rem; height: 2.25rem; border-radius: 12px; display: grid; place-items: center; background: var(--corail-pale); color: var(--nuit); }
.txn-icon.is-income { background: var(--vert-pale); color: var(--accent-ink); }
.txn.is-masked .txn-icon { background: var(--creme-2); color: var(--gris); }
.txn-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.txn-label { font-weight: 550; overflow-wrap: anywhere; }
.txn.is-masked .txn-label { color: var(--gris); font-style: italic; font-weight: 400; }
.txn-meta, .txn-note { font-size: .82rem; color: var(--gris); }
.txn-amount { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--encre); }
.txn-amount.is-income { color: var(--accent-ink); }
.txn-edit { color: var(--gris); padding: .25rem .4rem; border-radius: 8px; }
.txn-edit:hover { background: var(--creme); color: var(--ink-strong); }
.txn-day { padding-top: .8rem; padding-bottom: .5rem; }
.txn-day-head { font-size: .9rem; font-weight: 600; color: var(--ink-strong); display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .25rem;
  text-transform: none; }
.fin-strip { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: .9rem; color: var(--gris); }
.fin-strip .is-income { color: var(--accent-ink); font-weight: 600; }
.fin-strip .is-expense { color: #c4513f; font-weight: 600; }
.fin-input-amount { font-weight: 650; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; gap: .4rem; flex-wrap: wrap; }

.seg-links { display: inline-flex; gap: .25rem; background: var(--surface); border-radius: 999px; padding: .25rem; box-shadow: var(--ombre); flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg-links::-webkit-scrollbar { display: none; }
.seg-links a { white-space: nowrap; }
.seg-links a { padding: .35rem .9rem; border-radius: 999px; text-decoration: none; color: var(--gris); font-weight: 500; }
.seg-links a.active { background: var(--nuit); color: #fff; }
.seg-links .count { display: inline-block; min-width: 1.4rem; padding: 0 .35rem; margin-inline-start: .25rem; border-radius: 999px; background: var(--safran); color: var(--nuit);
  font-size: .78rem; text-align: center; }

.due-badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--creme-2); color: var(--ink-strong); white-space: nowrap; }
.due-badge.is-late { background: #fbd5cf; color: #8f2c1d; }
.due-badge.is-today { background: var(--safran); color: var(--nuit); }
.due-badge.is-soon { background: #fdebc4; color: #7a5208; }

.bill-list { display: grid; gap: .75rem; }
.bill { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem .9rem; align-items: center; border-inline-start: 5px solid var(--safran); }
.bill.is-late { border-inline-start-color: var(--corail); }
.bill.is-paid { border-inline-start-color: var(--vert); }
.bill-icon { width: 2.6rem; height: 2.6rem; border-radius: 14px; display: grid; place-items: center; background: var(--creme); color: var(--ink-strong); font-size: 1.15rem; }
.bill-provider { font-size: 1.02rem; font-weight: 600; margin: 0; }
.bill-meta { font-size: .84rem; color: var(--gris); margin: .15rem 0 0; }
.bill-side { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.bill-amount { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill-actions { grid-column: 1 / -1; display: flex; gap: .25rem; justify-content: flex-end; border-top: 1px dashed var(--ligne); padding-top: .35rem; margin-top: .25rem; }
.bill-actions .btn-link { padding: .15rem .5rem; }

.budget-cards { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .budget-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .budget-cards { grid-template-columns: repeat(3, 1fr); } }
.budget-card { border-top: 4px solid var(--vert); }
.budget-card.is-warn { border-top-color: var(--safran); }
.budget-card.is-over { border-top-color: var(--corail); }
.budget-name { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.budget-pct { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.budget-card.is-over .budget-pct { color: #c4513f; }
.budget-figures { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; color: var(--gris); margin: .5rem 0 .25rem; }
.budget-edit { display: grid; gap: .1rem; }
.budget-edit-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: .55rem 0; border-top: 1px solid var(--ligne); }
@media (min-width: 576px) { .budget-edit-row { grid-template-columns: minmax(0, 1fr) 15rem; align-items: center; } }
.budget-edit-fields { display: grid; grid-template-columns: 1fr 7rem; gap: .4rem; }

.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--ligne); flex-wrap: wrap; }
.cat-list li:first-child { border-top: 0; }
.cat-dot { position: relative; width: 30px; height: 30px; flex: 0 0 30px; }
.cat-dot svg { position: absolute; inset: 0; opacity: .22; }
.cat-dot i { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-strong); font-size: .95rem; }
.icon-pick, .color-pick { display: flex; flex-wrap: wrap; gap: .3rem; }
.icon-pick .btn { width: 2.2rem; }
.color-pick label { cursor: pointer; border-radius: 50%; padding: 2px; border: 2px solid transparent; line-height: 0; }
.color-pick .btn-check:checked + label { border-color: var(--nuit); }
.color-pick .btn-check:focus-visible + label { outline: 2px solid var(--vert); outline-offset: 2px; }

.chart-wrap { overflow-x: auto; }
.fin-chart { width: 100%; min-width: 420px; height: auto; display: block; }
.fin-chart .axis { stroke: var(--ligne); stroke-width: 1; }
.fin-chart .bar-income { fill: var(--vert); }
.fin-chart .bar-expense { fill: var(--corail); }
.fin-chart .tick { font-size: 11px; fill: var(--gris); font-family: inherit; }
.chart-legend { display: flex; gap: 1rem; font-size: .85rem; color: var(--gris); margin-bottom: .5rem; }
.chart-legend span::before { content: ""; display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; margin-inline-end: .35rem; vertical-align: -.1rem; }
.chart-legend .lg-income::before { background: var(--vert); }
.chart-legend .lg-expense::before { background: var(--corail); }
.fin-table { font-variant-numeric: tabular-nums; }
.w-ev-dot.is-bill { background: #fdebc4; color: #7a5208; }
legend.form-label { font-size: 1rem; font-weight: 500; float: none; }

/* ---------- Menu (hamburger) v0.13 ---------- */
.app-menu { --bs-offcanvas-width: min(320px, 86vw); background: var(--creme); }
.app-menu .offcanvas-header { background: var(--surface); border-bottom: 1px solid var(--ligne); }
.app-menu .avatar-circle { width: 2.4rem; height: 2.4rem; flex: 0 0 2.4rem; }
.app-menu .offcanvas-body { display: flex; flex-direction: column; gap: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.min-w-0 { min-width: 0; }
.app-menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.app-menu-list a { display: flex; align-items: center; gap: .75rem; padding: .5rem .8rem; border-radius: 12px; color: var(--encre); text-decoration: none; font-weight: 500; }
.app-menu-list a i { font-size: 1.15rem; color: var(--accent-ink); width: 1.4rem; text-align: center; }
.app-menu-list a:hover { background: var(--surface); }
.app-menu-list a.active { background: var(--vert); color: #fff; }
.app-menu-list a.active i { color: #fff; }
.app-menu-foot { margin-top: auto; display: grid; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--ligne); }
.app-menu-btn { display: inline-flex; align-items: center; }
.app-menu-btn .bi-list { font-size: 1.15rem; line-height: 1; }

/* ---------- Tâches ménagères v0.13 ---------- */
.chores-layout { display: grid; gap: 1rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .chores-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
.chores-week { display: grid; gap: .75rem; grid-template-columns: 1fr; align-content: start; align-items: start; }
@media (min-width: 768px) { .chores-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chore-day.is-overdue { grid-column: 1 / -1; } }
.chore-day { padding: .9rem 1rem; }
.chore-day.is-today { box-shadow: 0 0 0 2px var(--corail), var(--ombre); }
.chore-day.is-past { opacity: .85; }
.chore-day.is-overdue { border-inline-start: 5px solid var(--corail); }
.chore-day-head { font-size: .95rem; font-weight: 650; color: var(--ink-strong); display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.chore-date { color: var(--gris); font-weight: 500; }
.today-pill { display: inline-block; margin-inline-start: .35rem; font-size: .72rem; padding: .05rem .5rem; border-radius: 999px; background: var(--corail); color: var(--nuit); vertical-align: .1rem; }
.chore-day-head .count { min-width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; background: var(--corail-pale); font-size: .8rem; padding: 0 .4rem; }
.chore-day-head .count.is-done { background: var(--vert-pale); color: var(--accent-ink); }
.chore-list { list-style: none; margin: 0; padding: 0; }
.chore { display: flex; align-items: center; gap: .65rem; padding: .5rem 0; border-top: 1px solid var(--ligne); position: relative; }
.chore:first-child { border-top: 0; }
.chore-check-form { margin: 0; }
.chore-check { width: 2.1rem; height: 2.1rem; flex: 0 0 2.1rem; border-radius: 50%; border: 2px solid var(--vert); background: var(--surface); color: transparent;
  display: grid; place-items: center; padding: 0; transition: background .15s, color .15s; }
.chore-check:hover { color: var(--accent-ink); }
.chore-check:focus-visible { outline: 3px solid var(--safran); outline-offset: 2px; }
.chore.is-done .chore-check { background: var(--vert); color: #fff; }
.chore-check.is-static { border-color: var(--ligne); color: var(--gris); }
.chore.is-skipped .chore-check.is-static { color: var(--gris); }
.chore-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.chore-title { font-weight: 550; overflow-wrap: anywhere; }
.chore.is-done .chore-title, .chore.is-skipped .chore-title { text-decoration: line-through; color: var(--gris); }
.chore-meta { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .8rem; color: var(--gris); }
.chore-who.is-anyone { font-style: italic; }
.chore-points { display: inline-flex; align-items: center; gap: .15rem; font-size: .8rem; font-weight: 600; color: var(--safran-fonce); white-space: nowrap; }
.chore-points .bi { font-size: .7rem; }
.chore-more { position: relative; }
.chore-more summary { list-style: none; cursor: pointer; padding: .2rem .45rem; border-radius: 8px; color: var(--gris); }
.chore-more summary::-webkit-details-marker { display: none; }
.chore-more summary:hover { background: var(--creme); }
.chore-more-menu { position: absolute; inset-inline-end: 0; top: 100%; z-index: 5; background: var(--surface); border-radius: 12px; box-shadow: var(--ombre); padding: .5rem;
  display: grid; gap: .35rem; min-width: 14rem; }
.score-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.score-list li { display: flex; gap: .6rem; align-items: flex-start; }
.score-rank { width: 1.8rem; height: 1.8rem; flex: 0 0 1.8rem; border-radius: 50%; background: var(--creme-2); display: grid; place-items: center; font-weight: 650; font-size: .85rem; }
.score-list .is-first .score-rank { background: var(--safran); color: var(--nuit); }
.chore-cards { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .chore-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .chore-cards { grid-template-columns: repeat(3, 1fr); } }
.chore-card { border-top: 4px solid var(--corail); }
.chore-card.is-paused { border-top-color: var(--ligne); opacity: .8; }
.chore-card-title { font-size: 1rem; font-weight: 600; display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.chore-card-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .84rem; color: var(--gris); margin-bottom: .5rem; }
.weekday-pick { display: flex; flex-wrap: wrap; gap: .3rem; }
.weekday-pick .btn { min-width: 2.6rem; }
[data-rec-panel][hidden], [data-mode-panel][hidden] { display: none !important; }

/* ---------- Maison & travaux v0.14 ---------- */
[data-kind-panel][hidden] { display: none !important; }
.home-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 768px) { .home-stats { grid-template-columns: repeat(4, 1fr); } }
.home-stats > div { background: var(--surface); border-radius: var(--r); box-shadow: var(--ombre); padding: .8rem 1rem; display: flex; flex-direction: column; font-size: .85rem; color: var(--gris); }
.home-stats .n { font-size: 1.45rem; font-weight: 650; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.home-stats .n.is-money { font-size: 1.1rem; padding-top: .3rem; }
.home-stats .is-urgent { background: #fde3de; }
.home-stats .is-urgent .n { color: #b2412f; }
.work-list { display: grid; gap: .6rem; }
.work { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: var(--encre); border-inline-start: 5px solid var(--sable); padding: .85rem 1rem; }
.work:hover { color: var(--encre); box-shadow: 0 0 0 2px var(--sable), var(--ombre); }
.work.prio-high { border-inline-start-color: var(--safran); }
.work.prio-urgent { border-inline-start-color: var(--corail); }
.work.st-done { border-inline-start-color: var(--vert); }
.work.st-cancelled { border-inline-start-color: var(--ligne); opacity: .75; }
.work-icon { width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; border-radius: 14px; background: var(--creme); color: var(--ink-strong); display: grid; place-items: center; font-size: 1.15rem; }
.work-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.work-title { font-weight: 600; overflow-wrap: anywhere; }
.work-meta { display: flex; flex-wrap: wrap; gap: .2rem .75rem; font-size: .8rem; color: var(--gris); align-items: center; }
.work-cost { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-strong); }
.status-pill, .prio-pill { display: inline-block; font-size: .72rem; font-weight: 600; padding: .08rem .5rem; border-radius: 999px; background: var(--creme-2); color: var(--ink-strong); }
.status-pill.st-in_progress { background: #dbe8f5; color: var(--nuit); }
.status-pill.st-done { background: var(--vert-pale); color: var(--accent-ink); }
.status-pill.st-cancelled { background: #eee; color: var(--gris); }
.prio-pill.prio-high { background: #fdebc4; color: #7a5208; }
.prio-pill.prio-urgent { background: #fbd5cf; color: #8f2c1d; }
.prio-pill.prio-low { background: #eef1f4; color: var(--gris); }
.work-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem 1rem; margin: 0; }
.work-facts dt { font-size: .78rem; color: var(--gris); font-weight: 400; }
.work-facts dd { margin: 0; }

/* ---------- Taille du texte sur téléphone (v0.14.3) ----------
   Readex Pro est une police large : sur petit écran, base ramenée à 14,5 px (tout le reste suit, en rem).
   text-size-adjust : empêche le navigateur d'agrandir le texte de lui-même (le réglage d'accessibilité du téléphone reste respecté). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 575.98px) {
  html { font-size: 14.5px; }
  .page-head h1 { font-size: 1.3rem; }
  .home-hero h1 { font-size: 1.5rem; }
  .fin-summary .fin-amount, .home-stats .n { font-size: 1.15rem; }
  .app-bottom-nav a { font-size: .7rem; min-height: 50px; }
}
@media (min-width: 576px) and (max-width: 991.98px) { html { font-size: 15px; } }
/* Libellés de la barre du bas : toujours sur une seule ligne */
.app-bottom-nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding-inline: .15rem; }

/* ---------- Véhicules v0.15 ---------- */
.veh-cards { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .veh-cards { grid-template-columns: repeat(2, 1fr); } }
.veh-card { display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: var(--encre); border-top: 4px solid var(--corail); }
.veh-card:hover { color: var(--encre); box-shadow: 0 0 0 2px var(--corail-pale), var(--ombre); }
.veh-head { display: flex; align-items: center; gap: .75rem; }
.veh-icon { width: 2.8rem; height: 2.8rem; flex: 0 0 2.8rem; border-radius: 14px; background: var(--corail-pale); color: var(--nuit); display: grid; place-items: center; font-size: 1.3rem; }
.veh-name { display: block; font-weight: 650; font-size: 1.05rem; }
.veh-sub { display: block; font-size: .82rem; color: var(--gris); }
.plate { unicode-bidi: bidi-override; direction: ltr; margin-inline-start: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; padding: .15rem .5rem; border: 2px solid var(--nuit); border-radius: 6px; background: var(--surface); white-space: nowrap; }
.veh-stats { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-size: .85rem; color: var(--gris); }
.veh-stats b { color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.veh-next { font-size: .84rem; padding: .35rem .6rem; border-radius: 10px; background: var(--creme); }
.veh-next.is-soon { background: #fdebc4; color: #7a5208; }
.veh-next.is-late { background: #fbd5cf; color: #8f2c1d; }
.veh-state.is-soon { color: #9a6a0a; font-weight: 600; }
.veh-state.is-late { color: #b2412f; font-weight: 600; }
.plate-lg { display: inline-block; margin: 0; font-size: 1rem; padding: .25rem .8rem; }

/* ---------- Calendrier familial v0.16 ---------- */
[data-cal-time][hidden], [data-cal-until][hidden], [data-cal-attendees][hidden] { display: none !important; }
.cal-layout { display: grid; gap: 1rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .cal-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.cal-month { padding: 1rem; }
.cal-nav { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.cal-title { font-size: 1.1rem; font-weight: 650; margin: 0; min-width: 9rem; text-align: center; color: var(--ink-strong); }
.cal-grid { display: grid; gap: 4px; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head span { text-align: center; font-size: .72rem; font-weight: 600; color: var(--gris); padding: .2rem 0; }
.cal-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; min-height: 3.1rem; padding: .3rem .15rem; border-radius: 12px;
  background: var(--creme); color: var(--encre); text-decoration: none; overflow: hidden; }
.cal-day:hover { background: var(--creme-2); color: var(--encre); }
.cal-day.is-weekend { background: #f8efdc; }
.cal-day.is-out { opacity: .4; }
.cal-num { font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; }
.cal-day.is-today .cal-num { background: var(--corail); color: var(--nuit); }
.cal-day.is-selected { box-shadow: inset 0 0 0 2px var(--nuit); background: var(--surface); }
.cal-dots { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; justify-content: center; }
.cal-dots .more { font-size: .62rem; color: var(--gris); }
.cal-peek { display: none; }
@media (min-width: 768px) {
  .cal-day { align-items: stretch; min-height: 5.6rem; padding: .35rem; }
  .cal-num { align-self: flex-start; }
  .cal-dots { display: none; }
  .cal-peek { display: flex; flex-direction: column; gap: 2px; }
  .cal-peek span { font-size: .7rem; line-height: 1.25; padding: 1px 5px; border-radius: 5px; background: var(--vert-pale); color: var(--ink-strong);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-inline-start: 3px solid var(--vert); }
}
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--vert); flex: 0 0 auto; }
.k-event.c-family { --k: var(--vert); } .k-event.c-school { --k: var(--nuit); } .k-event.c-appointment { --k: var(--corail); }
.k-event.c-birthday { --k: var(--safran); } .k-event.c-holiday { --k: #6aa9d8; } .k-event.c-other { --k: var(--gris); }
.k-bill { --k: var(--safran-fonce); } .k-home { --k: #6d5bd0; } .k-vehicle { --k: #c4513f; } .k-document { --k: #2f8f7a; } .k-reminder { --k: #e07a5f; }
.dot[class*="k-"] { background: var(--k, var(--vert)); }
.cal-peek span[class*="k-"] { border-inline-start-color: var(--k, var(--vert)); background: color-mix(in srgb, var(--k, var(--vert)) 14%, #fff); }
.cal-legend { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .76rem; color: var(--gris); }
.cal-legend li { display: flex; align-items: center; gap: .35rem; }
.cal-agenda-day { padding: .8rem 1rem; margin-bottom: .6rem; }
.cal-agenda-day.is-today { box-shadow: 0 0 0 2px var(--corail), var(--ombre); }
.cal-agenda-date { display: flex; align-items: baseline; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--ink-strong); margin: 0 0 .4rem; }
.cal-agenda-date .n { font-size: 1.4rem; font-weight: 700; }
.cal-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.cal-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 12px; text-decoration: none; color: var(--encre);
  background: color-mix(in srgb, var(--k, var(--vert)) 9%, #fff); border-inline-start: 4px solid var(--k, var(--vert)); }
.cal-item:hover { color: var(--encre); background: color-mix(in srgb, var(--k, var(--vert)) 16%, #fff); }
.cal-item-time { flex: 0 0 3.6rem; font-size: .78rem; font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.cal-item-icon { color: var(--k, var(--vert)); font-size: 1rem; }
.cal-item-main { min-width: 0; display: flex; flex-direction: column; }
.cal-item-title { font-weight: 550; overflow-wrap: anywhere; }
.cal-item-meta { font-size: .76rem; color: var(--gris); }
.rsvp { font-size: .78rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; background: var(--creme-2); }
.rsvp-yes { background: var(--vert-pale); color: var(--accent-ink); } .rsvp-no { background: #fbd5cf; color: #8f2c1d; } .rsvp-maybe { background: #fdebc4; color: #7a5208; }

/* ---------- Harmonisation du design (v0.16) ----------
   Mêmes surfaces, titres, liens d'action et cases cochées sur toutes les pages (sauf l'accueil, inchangé). */
.card.border-0.shadow-sm { border-radius: var(--r) !important; box-shadow: var(--ombre) !important; }
.card .card-body > h2.h5, .card .card-body h2.h5, .dash-panel h2.h5 { font-size: 1.05rem; font-weight: 600; color: var(--ink-strong); }
.btn-link { text-decoration: none; font-weight: 500; }
.btn-link:hover, .btn-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary {
  background: var(--vert); border-color: var(--vert); color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--nuit); --bs-btn-border-color: var(--ligne); --bs-btn-hover-bg: var(--creme); --bs-btn-hover-color: var(--nuit);
  --bs-btn-hover-border-color: #d9ccb2; --bs-btn-bg: #fff; }
.form-check-input { width: 1.15em; height: 1.15em; border-color: #cbbfa6; }
.form-check-input:checked { background-color: var(--vert); border-color: var(--vert); }
.form-switch .form-check-input { width: 2.2em; }
.form-control::placeholder { color: #a39c90; }
/* Tâches : jours passés sans tâche masqués, jours vides compacts */
.chore-day.is-empty { padding: .6rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.chore-day.is-empty .chore-day-head { margin: 0; }
.chore-day.is-empty p { margin: 0; }
/* Calendrier : heure de début et de fin superposées, grille plus large sur ordinateur */
.cal-item-time { display: flex; flex-direction: column; line-height: 1.2; }
.cal-item-time small { font-weight: 500; color: var(--gris); font-size: .72rem; }
@media (min-width: 992px) { .cal-layout { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); } }

/* ===================================================================== v0.17 — partage, tâches confiées, personnaliser */
.vis-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--ink-strong); background: var(--sable);
  border-radius: 999px; padding: .1rem .55rem; width: fit-content; }
.share-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem;
  background: var(--sable); color: var(--ink-strong); border-radius: var(--r-sm); padding: .6rem .9rem; }
.share-bar form { margin: 0; }
.share-bar-text { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; }
.share-bar-quiet { background: transparent; border: 1px dashed var(--ligne); padding: .45rem .9rem; color: var(--gris); }

.tab-count { min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--corail); color: #fff;
  font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.module-tabs a.active .tab-count { background: var(--surface); color: var(--accent-ink); }

.chore-awaiting { display: inline-flex; align-items: center; gap: .2rem; color: #9a5a00; background: #fff3d6; border-radius: 999px;
  padding: 0 .5rem; font-size: .78rem; }
.req-banner { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--corail-pale);
  color: var(--encre); text-decoration: none; border: 1px solid rgba(239, 140, 126, .45); }
.req-banner:hover { color: var(--encre); border-color: var(--corail); }
.req-banner > .bi { font-size: 1.2rem; color: #c0503f; }
.req-banner-go { margin-inline-start: auto; font-weight: 600; color: #c0503f; white-space: nowrap; }
.req-list { list-style: none; margin: 0; padding: 0; }
.req-item { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; padding: .75rem 0; border-bottom: 1px solid var(--ligne); }
@media (min-width: 576px) { .req-item { flex-direction: row; align-items: center; justify-content: space-between; } }
.req-item:last-child { border-bottom: 0; }
.req-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.req-meta { font-size: .85rem; color: var(--gris); }
.req-actions { display: flex; gap: .4rem; }
.req-actions form { margin: 0; }

.cz-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; }
@media (min-width: 576px) { .cz-list { grid-template-columns: 1fr 1fr; } }
.cz-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--ligne); }
.cz-item .form-switch .form-check-input { width: 2.6em; height: 1.4em; margin: 0; cursor: pointer; float: none; }
.cz-label { display: flex; align-items: center; gap: .6rem; cursor: pointer; margin: 0; min-width: 0; }
.cz-label > .bi { width: 2rem; height: 2rem; border-radius: 10px; background: var(--creme); color: var(--accent-ink); display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0; }
.cz-label small { display: block; color: var(--gris); font-size: .82rem; }
.cz-item-wide { border-bottom: 0; }
.cz-subtitle { font-size: .95rem; font-weight: 600; margin: 1.1rem 0 .2rem; color: var(--ink-strong); }
.cz-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--sable); color: var(--ink-strong); display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.5rem; flex-shrink: 0; }

/* ===================================================================== v0.18 — paramètres, export, abonnement */
.set-list { list-style: none; margin: 0; padding: 0; }
.set-list li + li { border-top: 1px solid var(--ligne); }
.set-link { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; color: var(--encre); text-decoration: none; }
.set-link:hover { color: var(--accent-ink); }
.set-icon { width: 2.25rem; height: 2.25rem; border-radius: 12px; background: var(--creme); color: var(--accent-ink); display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; }
.set-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.set-text small { color: var(--gris); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-go { color: var(--gris); }
.set-link.is-danger, .set-link.is-danger:hover { color: #b3261e; }
.set-link.is-danger .set-icon { background: var(--corail-pale); color: #b3261e; }

.plan-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 768px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }
.plan-card { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.plan-card.is-current { outline: 2px solid var(--safran); }
.plan-name { font-size: 1.05rem; font-weight: 600; margin: 0; }
.plan-price { font-size: 1.35rem; font-weight: 700; color: var(--ink-strong); margin: 0; }
.plan-price small { font-size: .85rem; font-weight: 400; color: var(--gris); }
.plan-feats { list-style: none; margin: 0 0 .25rem; padding: 0; font-size: .9rem; flex: 1; }
.plan-feats li { display: flex; gap: .45rem; padding: .15rem 0; }
.plan-feats .bi { color: var(--accent-ink); }
.premium-pending { border: 1px dashed var(--safran-fonce); }
.premium-info { background: var(--creme); border-radius: var(--r-sm); padding: .6rem .8rem; }

/* ===================================================================== v0.19 — dettes et créances */
.k-debt { --k: #b7791f; }
.debt-groups { display: grid; gap: .75rem; }
@media (min-width: 992px) { .debt-groups { grid-template-columns: 1fr 1fr; align-items: start; } }
.debt-person { margin: 0; }
.debt-person-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 600; margin: 0 0 .4rem; }
.debt-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.debt-net { margin-inline-start: auto; font-size: .82rem; font-weight: 600; border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.debt-net.is-in { background: var(--vert-pale); color: var(--accent-ink); }
.debt-net.is-out { background: var(--corail-pale); color: #b3261e; }
.debt-list { list-style: none; margin: 0; padding: 0; }
.debt-list li + li { border-top: 1px solid var(--ligne); }
.debt-row { display: flex; align-items: flex-start; gap: .7rem; padding: .65rem 0; color: var(--encre); text-decoration: none; }
.debt-row:hover { color: var(--encre); background: linear-gradient(90deg, transparent, var(--creme), transparent); }
.debt-dir { width: 2rem; height: 2rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.debt-dir.is-in { background: var(--vert-pale); color: var(--accent-ink); }
.debt-dir.is-out { background: var(--corail-pale); color: #b3261e; }
[dir="rtl"] .debt-dir .bi { transform: scaleX(-1); }
.debt-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.debt-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.debt-main small { color: var(--gris); font-size: .82rem; }
.debt-main .due-badge { align-self: flex-start; }
.debt-main .meter { max-width: 180px; height: 6px; }
.debt-amount { font-weight: 700; white-space: nowrap; text-align: end; display: flex; flex-direction: column; }
.debt-amount small { font-weight: 400; color: var(--gris); font-size: .78rem; }
.debt-amount.is-in { color: var(--accent-ink); }
.debt-amount.is-out { color: #b3261e; }
.debt-dir-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.debt-dir-choice .btn { display: flex; align-items: flex-start; gap: .5rem; text-align: start; padding: .7rem .8rem; height: 100%; }
.debt-dir-choice .btn span { display: flex; flex-direction: column; }
.debt-dir-choice .btn small { font-size: .78rem; opacity: .8; font-weight: 400; }
.debt-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.debt-card-label { display: block; color: var(--gris); font-size: .85rem; }
.debt-card-amount { display: block; font-size: 1.8rem; font-weight: 700; line-height: 1.15; }
.debt-card.is-in .debt-card-amount { color: var(--accent-ink); }
.debt-card.is-out .debt-card-amount { color: #b3261e; }
.debt-method { max-width: 220px; }

/* ===================================================================== v0.20 — état de l'installation */
.status-list { list-style: none; margin: 0; padding: 0; }
.status-list li { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px solid var(--ligne); }
.status-list li:last-child { border-bottom: 0; }
.status-list li > .bi { font-size: 1.1rem; margin-top: .1rem; flex-shrink: 0; }
.status-list li span { display: flex; flex-direction: column; min-width: 0; }
.status-list b { font-weight: 500; overflow-wrap: anywhere; }
.status-list small { color: var(--gris); font-size: .82rem; overflow-wrap: anywhere; }
.status-list .is-ok > .bi { color: var(--accent-ink); }
.status-list .is-bad > .bi { color: #b3261e; }
.status-list .is-info > .bi { color: var(--safran-fonce); }
.status-alert { border: 1px solid var(--corail); background: var(--corail-pale); }

/* ===================================================================== v0.22 — adhan, hors connexion */
.adhan-bar { position: fixed; inset-inline: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 1080; display: flex; align-items: center;
  gap: .6rem; padding: .7rem .9rem; border-radius: var(--r); background: var(--nuit); color: #fff; box-shadow: 0 12px 30px rgba(21, 51, 77, .35); }
@media (min-width: 768px) { .adhan-bar { inset-inline: auto 24px; bottom: 24px; max-width: 420px; } }
.adhan-bar > .bi { color: var(--safran); font-size: 1.3rem; }
.adhan-bar-text { flex: 1; font-weight: 600; min-width: 0; }
.adhan-device { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem .8rem; border-radius: var(--r-sm); background: var(--creme); }
.adhan-device-state { flex: 1 1 100%; font-weight: 600; color: var(--gris); }
.adhan-device-state.is-on { color: var(--accent-ink); }
@media (min-width: 576px) { .adhan-device-state { flex: 1 1 auto; } }
.adhan-file { border: 1px solid var(--ligne); border-radius: var(--r-sm); padding: .7rem .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.adhan-file > b { flex: 1 1 100%; }
#adhan .form-range { accent-color: var(--vert); }
#adhan .form-range::-webkit-slider-thumb { background: var(--vert); }
#adhan .form-range::-moz-range-thumb { background: var(--vert); }
.adhan-file form.mt-2 { flex: 1 1 100%; }
.adhan-volume { max-width: 320px; }
.offline-bar { position: sticky; top: 0; z-index: 1030; background: #5c4a1a; color: #fff; text-align: center; font-size: .85rem; padding: .4rem .8rem; }
.shop-item.is-queued .shop-check { outline: 2px dashed var(--safran-fonce); outline-offset: 2px; }

/* =====================================================================
   v0.23 — Thèmes de couleurs (Paramètres › Apparence)
   html[data-palette] : palette de l'utilisateur (« classique » = couleurs d'origine, aucune règle)
   html[data-mode="dark"] : mode sombre (« auto » : suit le téléphone, résolu par assets/js/theme.js)
   Les palettes ne changent que les couleurs de marque ; le mode sombre change les fonds, surfaces et textes.
   ===================================================================== */
html[data-palette="yawmy"] {   /* Bleu du logo, soleil orange */
  --vert: #2e5c88; --vert-fonce: #234a70; --vert-pale: #dfe9f4; --vert-rgb: 46, 92, 136;
  --nuit: #1b3550; --nuit-2: #26476b; --safran: #f0a046; --safran-fonce: #d9822a; --creme: #f7f4ee; --creme-2: #efe9dd;
}
html[data-palette="ocean"] {   /* Océan : bleu-vert profond */
  --vert: #0b6e7f; --vert-fonce: #085866; --vert-pale: #d8eef1; --vert-rgb: 11, 110, 127;
  --nuit: #0f3a47; --nuit-2: #164d5d; --safran: #f2b84b; --safran-fonce: #d99a22; --creme: #f2f7f7; --creme-2: #e3eeee;
}
html[data-palette="grenade"] { /* Grenade : bordeaux et or */
  --vert: #9c2f4f; --vert-fonce: #7f2440; --vert-pale: #f6dfe6; --vert-rgb: 156, 47, 79;
  --nuit: #3b1a2a; --nuit-2: #512539; --safran: #e9b44c; --safran-fonce: #cf9628; --creme: #fbf4f2; --creme-2: #f3e5e1;
}
html[data-palette="lavande"] { /* Lavande : violet doux */
  --vert: #5a4aa0; --vert-fonce: #47398a; --vert-pale: #e6e2f6; --vert-rgb: 90, 74, 160;
  --nuit: #262248; --nuit-2: #34305e; --safran: #f2b84b; --safran-fonce: #d99a22; --creme: #f7f5fb; --creme-2: #ebe7f4;
}
html[data-palette="atlas"] {   /* Atlas : terre cuite et sable */
  --vert: #8c4a24; --vert-fonce: #713b1b; --vert-pale: #f3e3d6; --vert-rgb: 140, 74, 36;
  --nuit: #2e2a24; --nuit-2: #3d382f; --safran: #e2a53a; --safran-fonce: #c98b22; --creme: #faf5ee; --creme-2: #f0e6d8;
}

/* ---- Mode sombre */
html[data-mode="dark"] {
  color-scheme: dark;
  --creme: #0f151b; --creme-2: #18212a; --papier: #0f151b; --surface: #17202a; --sable: #26313b;
  --vert-pale: color-mix(in srgb, var(--vert) 30%, #17202a);
  --ligne: #2a3641; --encre: #e6ecf1; --gris: #9aa7b2;
  --ink-strong: #eef3f7;
  --accent-ink: color-mix(in srgb, var(--vert) 42%, #fff);
  --accent-ink-fonce: color-mix(in srgb, var(--vert) 28%, #fff);
  --ombre: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
  --bs-secondary-bg: #1d2731; --bs-tertiary-bg: #1a232c;
}
html[data-mode="dark"] body { background: var(--creme); }
html[data-mode="dark"] .form-control, html[data-mode="dark"] .form-select { color: var(--encre); }
html[data-mode="dark"] .form-control::placeholder { color: #7f8b95; }
html[data-mode="dark"] .form-check-input:not(:checked) { background-color: #0f151b; border-color: #4a5763; }
html[data-mode="dark"] .btn-outline-secondary { --bs-btn-color: var(--encre); --bs-btn-hover-bg: var(--creme-2); --bs-btn-hover-color: var(--encre); }
html[data-mode="dark"] .btn-outline-primary { --bs-btn-color: var(--accent-ink); --bs-btn-border-color: color-mix(in srgb, var(--accent-ink) 50%, transparent); }
html[data-mode="dark"] .app-navbar, html[data-mode="dark"] .home-hero, html[data-mode="dark"] .guest-top { background-color: color-mix(in srgb, var(--nuit) 70%, #000); }
html[data-mode="dark"] .app-bottom-nav { box-shadow: 0 -6px 24px rgba(0, 0, 0, .4); }
/* Textes de couleur posés directement sur une surface sombre : teintes éclaircies */
html[data-mode="dark"] .move-delta.is-in { color: #5fd0a8; }
html[data-mode="dark"] .move-delta.is-out, html[data-mode="dark"] .fin-num.is-over, html[data-mode="dark"] .fin-strip .is-expense,
html[data-mode="dark"] .budget-card.is-over .budget-pct, html[data-mode="dark"] .debt-amount.is-out, html[data-mode="dark"] .debt-card.is-out .debt-card-amount,
html[data-mode="dark"] .diag-item.is-ko > .bi, html[data-mode="dark"] .status-list .is-bad > .bi, html[data-mode="dark"] .set-link.is-danger,
html[data-mode="dark"] .veh-state.is-late, html[data-mode="dark"] .req-banner-go, html[data-mode="dark"] .req-banner > .bi { color: #ff9b8a; }
html[data-mode="dark"] .veh-state.is-soon, html[data-mode="dark"] .shop-aisle.is-basket .shop-aisle-title i { color: #f2c46d; }
html[data-mode="dark"] .cc-day.is-future { color: #6c7a86; }
html[data-mode="dark"] .cal-day.is-weekend { background: #141c24; }
html[data-mode="dark"] .cal-peek span[class*="k-"] { background: color-mix(in srgb, var(--k, var(--vert)) 26%, #17202a); color: var(--encre); }
html[data-mode="dark"] .cal-item { background: color-mix(in srgb, var(--k, var(--vert)) 16%, #17202a); }
html[data-mode="dark"] .cal-item:hover { background: color-mix(in srgb, var(--k, var(--vert)) 26%, #17202a); }
html[data-mode="dark"] .shop-check, html[data-mode="dark"] .w-check { border-color: #4a5763; }
html[data-mode="dark"] .alert-info { --bs-alert-color: var(--encre); }
html[data-mode="dark"] .notif-unread { background: rgba(var(--vert-rgb), .14); }
html[data-mode="dark"] .status-pill.st-cancelled, html[data-mode="dark"] .prio-pill.prio-low { background: #26313b; }
html[data-mode="dark"] .page-head.is-dark .btn-primary { --bs-btn-bg: var(--surface); --bs-btn-color: var(--accent-ink); --bs-btn-border-color: var(--surface); }
html[data-mode="dark"] .skip-link { color: var(--encre); }

/* ---- Choix de l'apparence (Paramètres › Apparence) */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.theme-opt { display: flex; flex-direction: column; gap: .5rem; padding: .7rem; border: 1.5px solid var(--ligne); border-radius: var(--r); cursor: pointer; background: var(--surface); height: 100%; }
.theme-swatch { display: flex; height: 38px; border-radius: 10px; overflow: hidden; }
.theme-swatch i { flex: 1; }
.theme-swatch i:first-child { flex: 2; }
.theme-opt b { font-weight: 560; font-size: .95rem; }
.btn-check:checked + .theme-opt { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.btn-check:focus-visible + .theme-opt { outline: 3px solid rgba(var(--vert-rgb), .4); outline-offset: 2px; }
.mode-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; }
.layout-opt { display: flex; flex-direction: column; gap: .45rem; padding: .7rem; border: 1.5px solid var(--ligne); border-radius: var(--r); cursor: pointer; background: var(--surface); height: 100%; }
.layout-opt b { font-weight: 560; }
.layout-opt small { color: var(--gris); font-size: .8rem; line-height: 1.35; }
.btn-check:checked + .layout-opt { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.btn-check:focus-visible + .layout-opt { outline: 3px solid rgba(var(--vert-rgb), .4); outline-offset: 2px; }
.layout-thumb { width: 100%; height: auto; border-radius: 10px; background: var(--creme); display: block; }
/* Pastilles des palettes (couleurs fixes : l'aperçu montre chaque palette telle qu'elle est) */
.sw-classique i:nth-child(1) { background: #0e5e4e; } .sw-classique i:nth-child(2) { background: #15334d; } .sw-classique i:nth-child(3) { background: #f2b84b; } .sw-classique i:nth-child(4) { background: #fbf4e6; }
.sw-yawmy i:nth-child(1) { background: #2e5c88; } .sw-yawmy i:nth-child(2) { background: #1b3550; } .sw-yawmy i:nth-child(3) { background: #f0a046; } .sw-yawmy i:nth-child(4) { background: #f7f4ee; }
.sw-ocean i:nth-child(1) { background: #0b6e7f; } .sw-ocean i:nth-child(2) { background: #0f3a47; } .sw-ocean i:nth-child(3) { background: #f2b84b; } .sw-ocean i:nth-child(4) { background: #f2f7f7; }
.sw-grenade i:nth-child(1) { background: #9c2f4f; } .sw-grenade i:nth-child(2) { background: #3b1a2a; } .sw-grenade i:nth-child(3) { background: #e9b44c; } .sw-grenade i:nth-child(4) { background: #fbf4f2; }
.sw-lavande i:nth-child(1) { background: #5a4aa0; } .sw-lavande i:nth-child(2) { background: #262248; } .sw-lavande i:nth-child(3) { background: #f2b84b; } .sw-lavande i:nth-child(4) { background: #f7f5fb; }
.sw-atlas i:nth-child(1) { background: #8c4a24; } .sw-atlas i:nth-child(2) { background: #2e2a24; } .sw-atlas i:nth-child(3) { background: #e2a53a; } .sw-atlas i:nth-child(4) { background: #faf5ee; }
/* Vignettes des modèles d'accueil */
.lt-nuit { fill: var(--nuit); } .lt-vert { fill: var(--vert); } .lt-safran { fill: var(--safran); } .lt-corail { fill: var(--corail); } .lt-rose { fill: #c93a57; }
.lt-surf { fill: var(--surface); stroke: var(--ligne); stroke-width: 1; } .lt-dot { fill: var(--surface); stroke: var(--vert); stroke-width: 1.5; }
.lt-line { stroke: var(--ligne); stroke-width: 2; } .lt-roseline { stroke: #c93a57; stroke-width: 1.2; opacity: .6; }

/* =====================================================================
   v0.23 — Modèles de page d'accueil (Paramètres › Apparence)
   ===================================================================== */
/* Icônes des modules par teinte (Fil du jour, Compact) */
.m-vert i, .cp-ic.m-vert { background: var(--vert-pale); color: var(--accent-ink); }
.m-nuit i, .cp-ic.m-nuit { background: color-mix(in srgb, var(--nuit) 12%, var(--surface)); color: var(--ink-strong); }
.m-safran i, .cp-ic.m-safran { background: #fbefd6; color: #8a5a06; }
.m-corail i, .cp-ic.m-corail, .m-corail-pale i, .cp-ic.m-corail-pale { background: var(--corail-pale); color: #a8432f; }
.m-rose i, .cp-ic.m-rose { background: #fbe3e8; color: #c93a57; }
.m-sable i, .cp-ic.m-sable { background: var(--sable); color: var(--ink-strong); }
.m-vert-pale i, .cp-ic.m-vert-pale { background: var(--vert-pale); color: var(--accent-ink); }

/* ---- Fil du jour */
.tl-hello { background: var(--nuit); color: #fff; margin: -1rem calc(var(--bs-gutter-x, 1.5rem) * -.5) 0; padding: 1.2rem 1.25rem 3.6rem; border-radius: 0 0 26px 26px; }
.tl-hello h1 { color: #fff; font-size: clamp(1.5rem, 5.5vw, 2rem); font-weight: 600; margin: 0; }
.tl-dates { margin: .15rem 0 0; color: rgba(255, 255, 255, .72); font-size: .92rem; }
.tl-dates b { color: var(--safran); font-weight: 500 !important; }
.tl-page { max-width: 1120px; margin: 0 auto; }
.tl-next { display: block; margin-top: -2.9rem; background: var(--vert); color: #fff; border-radius: var(--r-lg); padding: 1rem 1.1rem .85rem; box-shadow: var(--ombre); text-decoration: none; position: relative; }
.tl-next:hover { color: #fff; }
.tl-next.is-empty .tl-next-name { font-size: 1rem; }
.tl-next-label { display: block; font-size: .84rem; color: rgba(255, 255, 255, .75); }
.tl-next-row { display: flex; align-items: baseline; gap: .75rem; }
.tl-next-name { font-size: 1.3rem; font-weight: 600; }
.tl-next-time { color: var(--safran); font-weight: 500; }
.tl-cd { margin-inline-start: auto; font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tl-cd b { font-weight: 600 !important; }
.tl-bar { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .18); margin: .7rem 0 .45rem; overflow: hidden; }
.tl-bar i { display: block; height: 100%; width: 0; background: var(--safran); border-radius: 6px; transition: width .6s; }
.tl-next-foot { display: flex; justify-content: space-between; font-size: .78rem; color: rgba(255, 255, 255, .7); }
.tl-sec { display: flex; align-items: baseline; gap: .5rem; margin: 1.5rem 0 .6rem; }
.tl-sec h2 { margin: 0; font-size: 1.06rem; font-weight: 600; }
.tl-sec a { margin-inline-start: auto; font-size: .87rem; font-weight: 500; text-decoration: none; }
.tl-count { font-size: .8rem; color: var(--gris); }
.tl-empty { color: var(--gris); font-size: .92rem; background: var(--surface); border-radius: var(--r); padding: .9rem 1rem; box-shadow: var(--ombre); }
.tl-acts { display: grid; gap: .6rem; }
.tl-act { background: var(--surface); border-radius: var(--r); box-shadow: var(--ombre); padding: .8rem .9rem; display: grid; grid-template-columns: 42px 1fr auto; gap: .75rem; align-items: center; }
.tl-act h3 { margin: 0; font-size: .97rem; font-weight: 600; line-height: 1.25; }
.tl-act p { margin: .1rem 0 0; font-size: .82rem; color: var(--gris); }
.tl-act p.is-late { color: #c0392b; font-weight: 500; }
html[data-mode="dark"] .tl-act p.is-late { color: #ff9b8a; }
.tl-act form { margin: 0; }
.tl-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.15rem; }
.t-vert .tl-ic { background: var(--vert-pale); color: var(--accent-ink); }
.t-safran .tl-ic { background: #fbefd6; color: #8a5a06; }
.t-corail .tl-ic { background: var(--corail-pale); color: #a8432f; }
.t-nuit .tl-ic { background: color-mix(in srgb, var(--nuit) 12%, var(--surface)); color: var(--ink-strong); }
.tl-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
.tl-chips form { display: contents; }
.tl-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: 0 .8rem; border-radius: 999px; border: 1.5px solid var(--ligne); background: var(--surface); color: var(--encre); font-size: .86rem; text-decoration: none; }
.tl-chip small { color: var(--gris); }
.tl-chip i { color: var(--gris); }
button.tl-chip:hover { border-color: var(--accent-ink); }
.tl-chip.is-more { color: var(--accent-ink); font-weight: 500; border-style: dashed; }
.tl-quick { display: flex; gap: .5rem; margin-top: .75rem; }
.tl-quick input { flex: 1; min-width: 0; min-height: 48px; border-radius: 14px; border: 1.5px solid var(--ligne); background: var(--surface); color: var(--encre); padding: 0 .9rem; font: inherit; }
.tl-quick input:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(var(--vert-rgb), .18); }
.tl-quick .btn { width: 48px; min-height: 48px; border-radius: 14px; font-size: 1.3rem; padding: 0; }
.tl-thread { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--ombre); padding: .4rem .9rem .6rem; }
.tl-allday { list-style: none; margin: .4rem 0 .3rem; padding: 0 0 .5rem; border-bottom: 1px dashed var(--ligne); display: flex; flex-wrap: wrap; gap: .35rem; }
.tl-allday a { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; padding: .25rem .65rem; border-radius: 999px; background: var(--creme-2); color: var(--encre); text-decoration: none; }
.tl-ev { display: grid; grid-template-columns: 48px 22px 1fr; align-items: start; }
.tl-ev-time { font-size: .82rem; color: var(--gris); padding-top: .7rem; font-variant-numeric: tabular-nums; text-align: start; }
.tl-ev-rail { position: relative; align-self: stretch; }
.tl-ev-rail::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 10px; width: 2px; background: var(--ligne); }
.tl-ev-dot { position: absolute; top: .8rem; inset-inline-start: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--gris); }
.tl-ev-body { padding: .5rem 0 .5rem .25rem; min-width: 0; }
[dir="rtl"] .tl-ev-body { padding: .5rem .25rem .5rem 0; }
.tl-ev.is-prayer .tl-ev-body b { font-weight: 450 !important; color: var(--accent-ink); }
.tl-ev.is-prayer .tl-ev-dot { border-color: var(--accent-ink); }
.tl-ev.is-next .tl-ev-dot { background: var(--safran); border-color: var(--safran); box-shadow: 0 0 0 4px rgba(242, 184, 75, .25); }
.tl-ev.is-next .tl-ev-body b { font-weight: 600 !important; }
.tl-ev.is-item .tl-ev-body { padding-block: .3rem; }
.tl-ev.is-item .tl-ev-dot { border-color: var(--ink-strong); }
.tl-ev.is-past { opacity: .5; }
.tl-ev.is-past .tl-ev-dot { background: var(--gris); border-color: var(--gris); }
.tl-card { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 12px; text-decoration: none; color: var(--encre);
  background: color-mix(in srgb, var(--k, var(--vert)) 9%, var(--surface)); border-inline-start: 4px solid var(--k, var(--vert)); }
.tl-card:hover { color: var(--encre); background: color-mix(in srgb, var(--k, var(--vert)) 16%, var(--surface)); }
.tl-card > i { color: var(--k, var(--vert)); }
.tl-card b { display: block; font-weight: 500 !important; font-size: .93rem; }
.tl-card small { display: block; color: var(--gris); font-size: .78rem; }
.tl-now { display: grid; grid-template-columns: 48px 22px 1fr; align-items: center; height: 22px; }
.tl-now-time { font-size: .78rem; font-weight: 600; color: #c93a57; font-variant-numeric: tabular-nums; text-align: start; }
html[data-mode="dark"] .tl-now-time { color: #ff8fa5; }
.tl-now-dot { width: 14px; height: 14px; border-radius: 50%; background: #c93a57; margin-inline-start: 4px; box-shadow: 0 0 0 4px rgba(201, 58, 87, .15); }
.tl-now-line { height: 2px; background: #c93a57; opacity: .55; border-radius: 2px; }
.tl-mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.tl-mod { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .75rem .25rem .6rem; border-radius: var(--r); background: var(--surface); box-shadow: var(--ombre); text-align: center; text-decoration: none; color: var(--encre); }
.tl-mod:hover { color: var(--encre); transform: translateY(-1px); }
.tl-mod i { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; }
.tl-mod span { font-size: .76rem; line-height: 1.15; }
.tl-badge { position: absolute; top: .35rem; inset-inline-end: .45rem; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #c93a57; color: #fff; font-size: .7rem; font-weight: 600 !important; display: grid; place-items: center; }
.tl-family { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--ombre); padding: .8rem 1rem; }
.tl-member { display: grid; grid-template-columns: 36px 1fr auto; gap: .2rem .7rem; align-items: center; padding: .35rem 0; }
.tl-member b { font-weight: 500 !important; font-size: .93rem; display: block; }
.tl-member small { display: block; color: var(--gris); font-size: .76rem; }
.tl-pts { font-size: .85rem; font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.tl-pbar { grid-column: 2 / -1; height: 5px; background: var(--creme-2); border-radius: 5px; overflow: hidden; }
.tl-pbar i { display: block; height: 100%; background: var(--vert); border-radius: 5px; }
.tl-pbar .w0 { width: 0; } .tl-pbar .w10 { width: 10%; } .tl-pbar .w20 { width: 20%; } .tl-pbar .w30 { width: 30%; } .tl-pbar .w40 { width: 40%; } .tl-pbar .w50 { width: 50%; }
.tl-pbar .w60 { width: 60%; } .tl-pbar .w70 { width: 70%; } .tl-pbar .w80 { width: 80%; } .tl-pbar .w90 { width: 90%; } .tl-pbar .w100 { width: 100%; }
@media (min-width: 992px) {
  .tl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; }
  .tl-mods { grid-template-columns: repeat(5, 1fr); }
}

/* ---- Essentiel : gros boutons, texte large */
.es-hello { background: var(--nuit); color: #fff; margin: -1rem calc(var(--bs-gutter-x, 1.5rem) * -.5) 0; padding: 1.3rem 1.25rem 3.8rem; border-radius: 0 0 28px 28px; }
.es-hello h1 { color: #fff; font-size: clamp(1.8rem, 7vw, 2.4rem); font-weight: 600; margin: 0; }
.es-hello p { margin: .2rem 0 0; color: rgba(255, 255, 255, .78); font-size: 1.05rem; }
.es-page { max-width: 760px; margin: 0 auto; }
.es-prayer { margin-top: -3rem; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; background: var(--vert); color: #fff; border-radius: var(--r-lg); padding: 1.15rem 1.25rem; text-decoration: none; box-shadow: var(--ombre); }
.es-prayer:hover { color: #fff; }
.es-prayer > i { grid-row: span 3; font-size: 2.4rem; color: var(--safran); }
.es-prayer-label { font-size: 1rem; color: rgba(255, 255, 255, .8); }
.es-prayer-name { font-size: 1.9rem; font-weight: 600; line-height: 1.15; }
.es-prayer-cd { font-size: 1.1rem; color: rgba(255, 255, 255, .85); }
.es-summary { font-size: 1.1rem; margin: 1.1rem .25rem; color: var(--encre); }
.es-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.es-btn { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .55rem; min-height: 132px; padding: 1rem .5rem; border-radius: var(--r-lg); text-decoration: none; text-align: center; box-shadow: var(--ombre); }
.es-btn i { font-size: 2.3rem; }
.es-btn span { font-size: 1.12rem; font-weight: 600; line-height: 1.2; }
.es-btn:hover { transform: translateY(-2px); }
.es-badge { position: absolute; top: .6rem; inset-inline-end: .7rem; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; background: #c93a57; color: #fff; font-size: .95rem; font-weight: 700 !important; display: grid; place-items: center; }
@media (min-width: 768px) { .es-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Compact : liste dense */
.cp-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: .25rem 0 1rem; }
.cp-head h1 { font-size: 1.3rem; font-weight: 600; margin: 0; }
.cp-head p { margin: 0; color: var(--gris); font-size: .86rem; }
.cp-prayer { margin-inline-start: auto; display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .85rem; border-radius: 999px; background: var(--vert); color: #fff; text-decoration: none; font-size: .9rem; }
.cp-prayer:hover { color: #fff; }
.cp-prayer i { color: var(--safran); }
.cp-prayer small { color: rgba(255, 255, 255, .8); margin-inline-start: .3rem; }
.cp-page { max-width: 760px; margin: 0 auto; }
.cp-list { list-style: none; margin: 0 0 1rem; padding: 0; background: var(--surface); border-radius: var(--r); box-shadow: var(--ombre); overflow: hidden; }
.cp-list li + li { border-top: 1px solid var(--ligne); }
.cp-list a { display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; color: var(--encre); text-decoration: none; min-height: 56px; }
.cp-list a:hover { background: var(--creme-2); color: var(--encre); }
.cp-list.is-small a { min-height: 48px; padding-block: .45rem; }
.cp-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; }
.cp-txt { flex: 1; min-width: 0; }
.cp-txt b { display: block; font-weight: 550 !important; font-size: .95rem; }
.cp-txt small { display: block; color: var(--gris); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #c93a57; color: #fff; font-size: .75rem; font-weight: 600; display: grid; place-items: center; }
.cp-go { color: var(--gris); }
.cp-title { font-size: 1rem; font-weight: 600; margin: .25rem 0 .5rem; }
.cp-family { color: var(--gris); font-size: .88rem; }
@media (min-width: 768px) {
  .tl-hello, .es-hello { margin: 0; border-radius: var(--r-lg); padding: 1.6rem 2rem 3.8rem; }
  .tl-next, .es-prayer { margin-inline: 1rem; }
}
/* Mode sombre — retouches après revue visuelle */
:where(html[data-mode="dark"]) a { color: var(--accent-ink); }          /* liens simples (Bootstrap calcule la couleur en RVB) */
:where(html[data-mode="dark"]) a:hover { color: var(--accent-ink-fonce); }
html[data-mode="dark"] .btn-outline-secondary { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--ligne); }
html[data-mode="dark"] .btn-check:checked + .btn-outline-secondary { --bs-btn-active-bg: var(--vert); --bs-btn-active-color: #fff; }
html[data-mode="dark"] .k-event.c-school { --k: #7aa7d6; }
html[data-mode="dark"] .cal-legend .c-school, html[data-mode="dark"] .lg-school { color: #7aa7d6; }
.cp-head { max-width: 760px; margin-inline: auto; }