/* =========================================================================
   CROXAL — Digital Studio
   Feuille de style unique du site (aucune dépendance externe).
   Univers graphique repris de l'application CALQIRA :
   fonds très clairs, cartes arrondies, bordures discrètes, icônes colorées.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. RESET LÉGER
   ---------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }

/* Aucune liste du site n'utilise les puces natives : la navigation, le pied de
   page et le sommaire sont mis en forme à la main, et les listes de contenu de
   la politique de confidentialité dessinent leurs propres pastilles
   (voir « .doc-section ul » plus bas). */
ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

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

/* -------------------------------------------------------------------------
   2. TOKENS GLOBAUX (indépendants du thème)
   ---------------------------------------------------------------------- */
:root {
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;

  /* Rayons — l'ADN « très arrondi » de Calqira */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Ombres extrêmement légères */
  --sh-1: 0 1px 2px rgba(17, 24, 39, .04);
  --sh-2: 0 2px 10px rgba(17, 24, 39, .05);
  --sh-3: 0 10px 30px rgba(17, 24, 39, .09);

  /* Rythme vertical */
  --space-section: clamp(56px, 8vw, 104px);
  --maxw: 1160px;
  --pad-x: clamp(16px, 5vw, 32px);

  --dur: 220ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Pastilles colorées des modules — relevées sur les captures de l'application */
  --i-teal:   #0F9D8A;  --i-teal-bg:   #DEF2EE;  /* Classique     */
  --i-blue:   #2F5BE8;  --i-blue-bg:   #E2E8FD;  /* Scientifique  */
  --i-violet: #7C4DE8;  --i-violet-bg: #EBE4FD;  /* Math          */
  --i-red:    #E8524F;  --i-red-bg:    #FBE1E1;  /* Statistiques  */
  --i-green:  #3FA45C;  --i-green-bg:  #E1F0E4;  /* Géométrie     */
  --i-amber:  #E8892B;  --i-amber-bg:  #FCEBD6;  /* TVA / Remise  */
  --i-pink:   #E8437E;  --i-pink-bg:   #FBDFE9;  /* Pourboire     */
  --i-cyan:   #C02BAF;  --i-cyan-bg:   #F7DEF4;  /* Durée         */
  --i-purple: #5B3FD8;  --i-purple-bg: #E7E1FD;  /* Convertisseur */
  --i-indigo: #D93A73;  --i-indigo-bg: #FBDCE7;  /* Dates         */
  --i-star:   #F2B32C;

  /* Bouton principal : fond et couleur de texte, redefinis par les themes
     dont la couleur primaire ne donne pas assez de contraste avec le blanc. */
  --btn-bg:       var(--primary);
  --btn-bg-hover: var(--primary-strong);
  --btn-fg:       #FFFFFF;
}

/* -------------------------------------------------------------------------
   3. THÈMES — les 8 palettes de Calqira, pilotées par variables CSS
   ---------------------------------------------------------------------- */

/* Ordre identique à l'écran « Thème » de l'application :
   Moderne, Chat, Fleur, Coeur, Anime, BlockCraft, Build City, Pixel Adventure.
   Toutes les valeurs sont relevées sur les captures fournies. */

/* THÈME MODERNE (défaut) — bleu vif, vert d'eau, blanc.
   Bleu du titre « Calqira » et de la touche « = », vert de la deuxième
   pastille, fond gris très clair neutre. */
:root,
[data-theme="modern"] {
  --primary:        #1B6EF3;
  --primary-strong: #1550C4;
  --primary-soft:   #DCE7FD;
  --secondary:      #12B18C;
  --secondary-soft: #DDF3EC;
  --background:     #F4F5F8;
  --background-alt: #EAECF1;
  --surface:        #FFFFFF;
  --surface-alt:    #FAFBFC;
  --text:           #14161C;
  --text-secondary: #5C6270;
  --border:         #E7E9EF;
  --border-strong:  #D3D7E0;
  --accent:         #12B18C;
  --focus:          #1B6EF3;
  --hero-glow-a:    rgba(27, 110, 243, .16);
  --hero-glow-b:    rgba(18, 177, 140, .16);
  --deco-1: #1B6EF3; --deco-2: #12B18C; --deco-3: #F1F2F4;
}

/* THÈME CHAT — brun, pêche, crème */
[data-theme="chat"] {
  --primary:        #8A6046;
  --primary-strong: #6B4632;
  --primary-soft:   #F6E3CC;
  --secondary:      #C98F5B;
  --secondary-soft: #FAEEDF;
  --background:     #FDF2E6;
  --background-alt: #F8E7D4;
  --surface:        #FFFAF3;
  --surface-alt:    #FDF6EC;
  --text:           #4A3728;
  --text-secondary: #766354;
  --border:         #F0DFC9;
  --border-strong:  #E2C9AB;
  --accent:         #C98F5B;
  --focus:          #8A6046;
  --hero-glow-a:    rgba(138, 96, 70, .16);
  --hero-glow-b:    rgba(201, 143, 91, .18);
  --deco-1: #5B453C; --deco-2: #F9DEBD; --deco-3: #FDF3E7;
}

/* THÈME FLEUR — rose soutenu, rose clair, rose très pâle */
[data-theme="flower"] {
  --primary:        #E3568C;
  --primary-strong: #AF3667;
  --primary-soft:   #FBDCE8;
  --secondary:      #F3A9C6;
  --secondary-soft: #FDEBF2;
  --background:     #FDF0F5;
  --background-alt: #FAE2EC;
  --surface:        #FFFFFF;
  --surface-alt:    #FEF8FB;
  --text:           #40222F;
  --text-secondary: #7B5F6B;
  --border:         #F8DDE8;
  --border-strong:  #EEC3D5;
  --accent:         #F3A9C6;
  --focus:          #E3568C;
  --hero-glow-a:    rgba(227, 86, 140, .16);
  --hero-glow-b:    rgba(243, 169, 198, .20);
  --deco-1: #E3568C; --deco-2: #FBDCE8; --deco-3: #FDF0F5;
  --btn-bg: #AF3667;
  --btn-bg-hover: #A62F60;
}

/* THÈME COEUR — framboise, rose tendre, rose très pâle */
[data-theme="heart"] {
  --primary:        #E31B5D;
  --primary-strong: #BC1149;
  --primary-soft:   #FBD8E4;
  --secondary:      #F9C2D6;
  --secondary-soft: #FDEAF1;
  --background:     #FDE9F0;
  --background-alt: #FADCE6;
  --surface:        #FFFFFF;
  --surface-alt:    #FFF7FA;
  --text:           #3F1D2B;
  --text-secondary: #7E5A69;
  --border:         #F8D9E4;
  --border-strong:  #EEBACC;
  --accent:         #F9C2D6;
  --focus:          #E31B5D;
  --hero-glow-a:    rgba(227, 27, 93, .16);
  --hero-glow-b:    rgba(249, 194, 214, .24);
  --deco-1: #E31B5D; --deco-2: #F9C2D6; --deco-3: #FDE9F0;
}

/* THÈME ANIME — rose vif, lavande, rose très pâle */
[data-theme="anime"] {
  --primary:        #F62E8E;
  --primary-strong: #C0176A;
  --primary-soft:   #FCDDEB;
  --secondary:      #B39DE8;
  --secondary-soft: #EFE9FB;
  --background:     #FCEBF3;
  --background-alt: #F9DDEA;
  --surface:        #FFFFFF;
  --surface-alt:    #FEF7FA;
  --text:           #3D2438;
  --text-secondary: #755D6E;
  --border:         #F7DCE8;
  --border-strong:  #EEC3D8;
  --accent:         #B39DE8;
  --focus:          #F62E8E;
  --hero-glow-a:    rgba(246, 46, 142, .16);
  --hero-glow-b:    rgba(179, 157, 232, .20);
  --deco-1: #F62E8E; --deco-2: #B39DE8; --deco-3: #FDF0F5;
  --btn-bg: #C0176A;
  --btn-bg-hover: #B0125F;
}

/* THÈME BLOCKCRAFT — herbe, terre et roche (esthétique sandbox originale) */
[data-theme="blockcraft"] {
  --primary:        #57A83E;
  --primary-strong: #3C772A;
  --primary-soft:   #E4F2DC;
  --secondary:      #8B5A2B;
  --secondary-soft: #F1E6D9;
  --background:     #F3F2EA;
  --background-alt: #EAE9DD;
  --surface:        #FFFFFF;
  --surface-alt:    #FAFAF3;
  --text:           #1E2117;
  --text-secondary: #636958;
  --border:         #E2E1D3;
  --border-strong:  #CBC9B6;
  --accent:         #8B5A2B;
  --focus:          #57A83E;
  --hero-glow-a:    rgba(87, 168, 62, .16);
  --hero-glow-b:    rgba(139, 90, 43, .14);
  --deco-1: #6BCF4F; --deco-2: #8B5A2B; --deco-3: #111111;
  --r-xs: 3px; --r-sm: 4px; --r-md: 5px; --r-lg: 6px; --r-xl: 8px; --r-2xl: 10px;
  --btn-bg: #3D7A2B;
  --btn-bg-hover: #326523;
}

/* THÈME BUILD CITY — bleu chantier, orange signalétique, vert */
[data-theme="buildcity"] {
  --primary:        #1B6EF3;
  --primary-strong: #1550C4;
  --primary-soft:   #DDE8FE;
  --secondary:      #E8821B;
  --secondary-soft: #FBEBD8;
  --background:     #F3F5F8;
  --background-alt: #E9EDF2;
  --surface:        #FFFFFF;
  --surface-alt:    #FAFBFD;
  --text:           #1B2430;
  --text-secondary: #5F6B7B;
  --border:         #E4E8EE;
  --border-strong:  #CCD4DE;
  --accent:         #E8821B;
  --focus:          #1B6EF3;
  --hero-glow-a:    rgba(27, 110, 243, .16);
  --hero-glow-b:    rgba(232, 130, 27, .16);
  --deco-1: #1B6EF3; --deco-2: #E8821B; --deco-3: #1E9E4A;
  --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px;
}

/* THÈME PIXEL ADVENTURE — thème sombre : nuit, herbe et torches.
   Seul thème sombre de l'application, angles nets. */
[data-theme="pixel"] {
  --primary:        #7CC142;
  --primary-strong: #90D455;
  --primary-soft:   #26331A;
  --secondary:      #E8C93A;
  --secondary-soft: #33301A;
  --background:     #141A0E;
  --background-alt: #1A2213;
  --surface:        #1F2818;
  --surface-alt:    #232D1B;
  --text:           #ECF2E2;
  --text-secondary: #9DAC8C;
  --border:         #2E3A24;
  --border-strong:  #435235;
  --accent:         #E8C93A;
  --focus:          #90D455;
  --hero-glow-a:    rgba(124, 193, 66, .18);
  --hero-glow-b:    rgba(232, 201, 58, .14);
  --deco-1: #7CC142; --deco-2: #E8C93A; --deco-3: #111111;
  --r-xs: 3px; --r-sm: 4px; --r-md: 5px; --r-lg: 6px; --r-xl: 8px; --r-2xl: 10px;
  --sh-1: 0 1px 0 rgba(0, 0, 0, .35);
  --sh-2: 0 2px 0 rgba(0, 0, 0, .35);
  --sh-3: 0 6px 18px rgba(0, 0, 0, .5);
  --btn-bg: #7CC142;
  --btn-bg-hover: #90D455;
  --btn-fg: #14200B;
}

/* -------------------------------------------------------------------------
   4. BASE
   ---------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -.02em; font-weight: 700; }

h1 { font-size: clamp(32px, 7.2vw, 56px); font-weight: 800; }
h2 { font-size: clamp(26px, 4.6vw, 38px); }
h3 { font-size: clamp(18px, 2.4vw, 22px); }

p { color: var(--text-secondary); }

strong { color: var(--text); font-weight: 650; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--space-section); }
.section--alt { background: var(--background-alt); }

.section-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 12px; font-size: clamp(15px, 1.8vw, 17px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;
  margin-bottom: 16px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}

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

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 999;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 10px 16px;
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }

/* -------------------------------------------------------------------------
   5. BOUTONS
   ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-weight: 650;
  font-size: 15px;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
  /* Les libellés longs (« Lire la politique de confidentialité ») se replient
     sur deux lignes plutôt que de déborder sur les petits écrans. */
  max-width: 100%;
  text-align: center;
}
.btn svg { width: 20px; height: 20px; flex: none; }

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--sh-2);
}
.btn--primary:hover { background: var(--btn-bg-hover); }

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--sh-1);
}
.btn--ghost:hover { border-color: var(--primary); color: var(--primary-strong); }

.btn--soft {
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.btn--soft:hover { background: var(--secondary-soft); }

.btn--block { width: 100%; }

@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
}

/* -------------------------------------------------------------------------
   6. EN-TÊTE / NAVIGATION
   ---------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .site-header {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: 17px;
  color: var(--text);
  margin-right: auto;
}
.brand__mark { width: 30px; height: 30px; border-radius: var(--r-sm); flex: none; }
.brand__sub {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: -2px;
}

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 550;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover { color: var(--text); background: var(--background-alt); }
.nav a[aria-current="page"] { color: var(--primary-strong); background: var(--primary-soft); }

.header-tools { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { color: var(--primary-strong); border-color: var(--border-strong); }
.icon-btn[aria-expanded="true"] { background: var(--primary-soft); color: var(--primary-strong); }

.lang-select {
  appearance: none;
  -webkit-appearance: none;
  height: 40px;
  padding: 0 30px 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7593' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}

.nav-toggle { display: inline-flex; }

/* Panneau mobile */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 12px var(--pad-x) 20px;
}
.mobile-nav.is-open { display: block; animation: slideDown var(--dur) var(--ease); }
.mobile-nav ul { display: grid; gap: 2px; }
.mobile-nav a {
  display: block;
  padding: 13px 14px;
  border-radius: var(--r-md);
  font-weight: 600;
  color: var(--text);
}
.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] {
  background: var(--primary-soft); color: var(--primary-strong);
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 900px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* Très petits écrans (320–420 px) : l'en-tête se resserre pour que le logo,
   le sélecteur de langue et les deux boutons tiennent sur une seule ligne. */
@media (max-width: 420px) {
  .header-inner { gap: 10px; }
  .brand { font-size: 15px; letter-spacing: .06em; min-width: 0; }
  .brand__mark { width: 26px; height: 26px; }
  .brand__sub { display: none; }
  .header-tools { gap: 6px; }
  .lang-select { height: 38px; font-size: 13px; padding: 0 25px 0 9px; background-position: right 7px center; }
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn svg { width: 19px; height: 19px; }
}

/* -------------------------------------------------------------------------
   7. SÉLECTEUR DE THÈME (popover d'en-tête)
   ---------------------------------------------------------------------- */
.theme-pop {
  position: absolute;
  right: var(--pad-x);
  top: 62px;
  z-index: 70;
  width: min(330px, calc(100vw - 2 * var(--pad-x)));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: 14px;
  display: none;
}
.theme-pop.is-open { display: block; animation: slideDown var(--dur) var(--ease); }
.theme-pop__title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-secondary);
  padding: 2px 6px 10px;
}
.theme-pop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.theme-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  cursor: pointer;
  text-align: left;
  font-size: 13.5px; font-weight: 600;
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.theme-chip:hover { border-color: var(--border-strong); }
.theme-chip[aria-pressed="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.theme-chip .swatches { display: flex; flex: none; }
.theme-chip .swatches i {
  width: 12px; height: 20px; display: block;
  border: 1.5px solid var(--surface);
  border-radius: 3px;
  margin-left: -4px;
}
.theme-chip .swatches i:first-child { margin-left: 0; }

/* -------------------------------------------------------------------------
   8. HERO
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 7vw, 76px) clamp(48px, 8vw, 92px);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  width: 460px; height: 460px;
  background: var(--hero-glow-a);
  top: -180px; left: -140px;
}
.hero::after {
  width: 420px; height: 420px;
  background: var(--hero-glow-b);
  top: 40px; right: -180px;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(36px, 6vw, 56px);
  align-items: center;
}
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.hero h1 { margin-bottom: 18px; }
.hero h1 .accent {
  background-image: linear-gradient(100deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead { font-size: clamp(16px, 2.1vw, 18.5px); max-width: 52ch; }

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 28px;
}

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 26px;
}
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
}
.pill svg { width: 15px; height: 15px; color: var(--accent); }

/* -------------------------------------------------------------------------
   9. MAQUETTE TÉLÉPHONE — reconstruite en HTML/CSS/SVG
      (Ce n'est PAS une capture d'écran : chaque élément est du vrai balisage.)
   ---------------------------------------------------------------------- */
.phone-stage { display: flex; justify-content: center; }

.phone {
  position: relative;
  width: min(320px, 88vw);
  border-radius: 42px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--sh-3), 0 40px 70px -40px rgba(17, 24, 39, .35);
  padding: 10px;
  transition: transform 500ms var(--ease);
}
@media (min-width: 940px) {
  .phone { transform: rotate(-1.4deg); }
  .phone:hover { transform: rotate(0deg) translateY(-6px); }
}

.phone__screen {
  border-radius: 34px;
  background: var(--background);
  overflow: hidden;
  border: 1px solid var(--border);
}

.phone__notch {
  width: 96px; height: 22px;
  margin: 6px auto 0;
  border-radius: var(--r-pill);
  background: var(--background-alt);
}

.mini { padding: 12px 12px 0; }

.mini__status {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; font-weight: 700; color: var(--text-secondary);
  padding: 6px 4px 10px;
}
.mini__status .bars { display: flex; gap: 3px; align-items: flex-end; }
.mini__status .bars i {
  width: 3px; background: var(--text-secondary); border-radius: 2px; display: block;
}
.mini__status .bars i:nth-child(1) { height: 5px; }
.mini__status .bars i:nth-child(2) { height: 7px; }
.mini__status .bars i:nth-child(3) { height: 9px; }
.mini__status .bars i:nth-child(4) { height: 11px; }

/* Barre de titre de l'application : nom en couleur d'accent + réglages */
.mini__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 12px;
}
.mini__app { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--primary); }
.mini__top svg { width: 17px; height: 17px; color: var(--text); }

/* Carte « Saisie intelligente » */
.mini__smart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 11px 12px 12px;
  box-shadow: var(--sh-1);
}
.mini__smart-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700;
  margin-bottom: 9px;
}
.mini__smart-head svg { width: 15px; height: 15px; color: var(--primary); }
.mini__field {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font-size: 10.5px;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Titre de section + lien « Voir tout » */
.mini__sec {
  display: flex; align-items: center; gap: 6px;
  margin: 14px 2px 8px;
}
.mini__sec svg { width: 14px; height: 14px; flex: none; color: var(--i-star); }
.mini__sec b { flex: 1; font-size: 13px; font-weight: 750; letter-spacing: -.01em; }
.mini__sec em {
  font-style: normal; font-size: 10.5px; font-weight: 650; color: var(--primary);
}
.mini__sec--muted svg { color: var(--text-secondary); }
.mini__sec--plain { margin-bottom: 6px; }
.mini__sec--plain b { font-size: 12.5px; }

/* Rangée de tuiles carrées (favoris, outils récents) */
.mini__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mini-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 9px 5px 8px;
  text-align: center;
  box-shadow: var(--sh-1);
}
.mini-tile__icon {
  width: 28px; height: 28px; margin: 0 auto 6px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
}
.mini-tile__icon svg { width: 15px; height: 15px; }
.mini-tile span {
  display: block;
  font-size: 8.5px; font-weight: 650; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Ligne « Récents » : icône, intitulé, calcul, heure */
.mini-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 9px 11px;
  margin-bottom: 7px;
  box-shadow: var(--sh-1);
}
.mini-row__icon {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-md);
  display: grid; place-items: center;
}
.mini-row__icon svg { width: 16px; height: 16px; }
.mini-row__txt { display: block; min-width: 0; flex: 1 1 0; overflow: hidden; }
.mini-row__title {
  display: block; font-size: 12px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-row__calc {
  display: block; font-size: 10px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-row__time { flex: none; font-size: 9.5px; font-weight: 700; color: var(--text-secondary); }

/* Barre de navigation basse */
.mini__nav {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  margin-top: 14px;
  padding: 8px 4px 11px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.mini__nav span {
  display: grid; justify-items: center; gap: 3px;
  font-size: 8.5px; font-weight: 650; color: var(--text-secondary);
  padding: 2px 0;
}
.mini__nav span i {
  display: grid; place-items: center;
  width: 34px; height: 21px; border-radius: var(--r-pill);
}
.mini__nav span svg { width: 16px; height: 16px; }
.mini__nav span.is-active { color: var(--primary-strong); }
.mini__nav span.is-active i { background: var(--primary-soft); }

/* -------------------------------------------------------------------------
   10. CARTES MODULES
   ---------------------------------------------------------------------- */
.grid-modules {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) { .grid-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* Structure reprise de l'écran « Modules » : la pastille à gauche, le titre et
   l'étoile sur la même ligne, la description dessous, alignée sur le titre. */
.module-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 84px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
@media (hover: hover) and (min-width: 900px) {
  .module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
    border-color: var(--border-strong);
  }
}

.module-card__icon {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--r-lg);
  display: grid; place-items: center;
}
.module-card__icon svg { width: 24px; height: 24px; }

.module-card__body { flex: 1; min-width: 0; }
.module-card__head { display: flex; align-items: flex-start; gap: 8px; }
.module-card__title {
  flex: 1; min-width: 0;
  font-size: 16.5px; font-weight: 700; letter-spacing: -.01em;
  padding-top: 2px;
}
.module-card__desc {
  margin-top: 2px;
  font-size: 13.5px; color: var(--text-secondary); line-height: 1.45;
}

.module-card__star {
  flex: none;
  width: 30px; height: 30px;
  margin: -2px -4px 0 0;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--border-strong);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.module-card__star svg { width: 20px; height: 20px; }
.module-card__star:hover { background: var(--background-alt); color: var(--primary); }
/* Étoile pleine bleue une fois le module mis en favori, comme dans l'application */
.module-card__star[aria-pressed="true"] { color: var(--primary); }
.module-card__star[aria-pressed="true"] svg { fill: currentColor; }

/* Pastilles colorées : une couleur par module, comme dans l'application */
.ic-teal   { background: var(--i-teal-bg);   color: var(--i-teal); }
.ic-violet { background: var(--i-violet-bg); color: var(--i-violet); }
.ic-pink   { background: var(--i-pink-bg);   color: var(--i-pink); }
.ic-blue   { background: var(--i-blue-bg);   color: var(--i-blue); }
.ic-amber  { background: var(--i-amber-bg);  color: var(--i-amber); }
.ic-green  { background: var(--i-green-bg);  color: var(--i-green); }
.ic-red    { background: var(--i-red-bg);    color: var(--i-red); }
.ic-indigo { background: var(--i-indigo-bg); color: var(--i-indigo); }
.ic-cyan   { background: var(--i-cyan-bg);   color: var(--i-cyan); }
.ic-purple { background: var(--i-purple-bg); color: var(--i-purple); }

/* -------------------------------------------------------------------------
   11. CARTES GÉNÉRIQUES / EXPÉRIENCE / FONCTIONNALITÉS
   ---------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 26px);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) and (min-width: 900px) {
  .card--hover:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: 14.5px; }

.card__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.card__icon svg { width: 25px; height: 25px; }

.grid-3 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.grid-2 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.split { display: grid; gap: clamp(28px, 5vw, 48px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Aperçus miniatures dans les cartes « expérience » */
.preview {
  margin-top: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 12px;
}
.preview .mini-row { margin-bottom: 6px; box-shadow: none; }
.preview .mini-row:last-child { margin-bottom: 0; }
.preview .mini-tile { box-shadow: none; }
.preview .mini__nav {
  margin-top: 0;
  padding: 2px 0 0;
  border-top: 0;
  background: transparent;
}

/* -------------------------------------------------------------------------
   12. SECTION THÈMES
   ---------------------------------------------------------------------- */
.grid-themes {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px)  { .grid-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1000px) { .grid-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Carte de thème calquée sur l'écran « Thème » de l'application :
   nom en gras, petit motif à droite, trois grandes pastilles de couleur.
   La carte sélectionnée se teinte et affiche une coche. */
.theme-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 16px 18px 18px;
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
@media (hover: hover) and (min-width: 900px) {
  .theme-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--sh-2);
  }
}
.theme-card[aria-pressed="true"] {
  background: var(--primary-soft);
  border-color: var(--primary);
}

.theme-card__head { display: flex; align-items: center; gap: 10px; }
.theme-card__name {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 750; letter-spacing: -.01em;
}
.theme-card__motif { width: 26px; height: 26px; flex: none; }
.theme-card__check { width: 24px; height: 24px; flex: none; color: var(--primary); display: none; }
.theme-card[aria-pressed="true"] .theme-card__check { display: block; }
.theme-card[aria-pressed="true"] .theme-card__motif { display: none; }

.theme-card__pal { display: flex; gap: 10px; margin-top: 14px; }
.theme-card__pal i {
  width: 30px; height: 30px; border-radius: 50%; display: block;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .07);
}

/* -------------------------------------------------------------------------
   13. LISTES / FONCTIONNALITÉS / LANGUES
   ---------------------------------------------------------------------- */
.feature-list { display: grid; gap: 12px; }
.feature-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; color: var(--text-secondary);
}
.feature-list li svg {
  width: 22px; height: 22px; flex: none;
  color: var(--primary);
  margin-top: 1px;
}
.feature-list li b { color: var(--text); font-weight: 650; }

/* Démonstration de la saisie intelligente : reprise du champ de l'écran
   d'accueil de l'application, en plus grand. */
.smart-demo__head {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 16px;
}
.smart-demo__head svg { width: 20px; height: 20px; color: var(--primary); }
.smart-demo__field {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  padding: 14px 16px;
  margin-bottom: 10px;
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.smart-demo__field:last-child { margin-bottom: 0; }

.lang-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px; font-weight: 600;
}
.lang-tag .code {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--primary-strong);
  background: var(--primary-soft);
  padding: 2px 7px; border-radius: var(--r-xs);
}

/* -------------------------------------------------------------------------
   14. BANDEAU CTA
   ---------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(30px, 5vw, 52px);
  text-align: center;
  box-shadow: var(--sh-2);
}
.cta::before {
  content: "";
  position: absolute; inset: -40% -10% auto -10%;
  height: 260px;
  background-image: radial-gradient(circle at 30% 0%, var(--hero-glow-a), transparent 65%),
                    radial-gradient(circle at 75% 10%, var(--hero-glow-b), transparent 65%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta p { max-width: 56ch; margin-inline: auto; margin-top: 12px; }
.cta__actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 26px;
}

/* -------------------------------------------------------------------------
   15. PIED DE PAGE
   ---------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: clamp(36px, 5vw, 56px) 28px;
  margin-top: var(--space-section);
}
.footer-grid {
  display: grid; gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}
.footer-grid h4 {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 14px; font-weight: 700;
}
.footer-grid ul { display: grid; gap: 10px; }
.footer-grid ul a { font-size: 14.5px; color: var(--text-secondary); }
.footer-grid ul a:hover { color: var(--primary-strong); }
.footer-about p { font-size: 14.5px; margin-top: 12px; max-width: 38ch; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between; align-items: center;
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   16. PAGES DE CONTENU (confidentialité, contact)
   ---------------------------------------------------------------------- */
.page-head {
  padding-block: clamp(34px, 6vw, 60px) clamp(24px, 4vw, 36px);
  border-bottom: 1px solid var(--border);
  background: var(--background-alt);
}
.page-head p { margin-top: 12px; max-width: 62ch; }
.page-head .updated {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 7px 14px;
}
.page-head .updated svg { width: 15px; height: 15px; color: var(--accent); }

.doc-layout {
  display: grid; gap: 26px;
  padding-block: clamp(30px, 5vw, 52px);
}
@media (min-width: 980px) {
  .doc-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start; }
}

.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 16px;
  box-shadow: var(--sh-1);
}
@media (min-width: 980px) { .toc { position: sticky; top: 86px; max-height: calc(100vh - 110px); overflow: auto; } }
.toc h2 {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 12px; font-weight: 700;
}
.toc ol { list-style: none; display: grid; gap: 2px; }
.toc a {
  display: block; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--text-secondary);
}
.toc a:hover { background: var(--background-alt); color: var(--text); }
.toc a.is-active { background: var(--primary-soft); color: var(--primary-strong); font-weight: 650; }

.doc { display: grid; gap: 14px; }

.doc-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3.2vw, 30px);
  box-shadow: var(--sh-1);
  scroll-margin-top: 90px;
}
.doc-section > h2 {
  font-size: clamp(19px, 2.6vw, 23px);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.doc-section > h2 .num {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--primary-soft); color: var(--primary-strong);
  font-size: 14px; font-weight: 700;
}
.doc-section h3 {
  font-size: 16px; margin-top: 18px; margin-bottom: 6px; color: var(--text);
}
.doc-section p { font-size: 15px; margin-bottom: 10px; }
.doc-section p:last-child { margin-bottom: 0; }
.doc-section ul { display: grid; gap: 8px; margin: 6px 0 12px; padding-left: 0; list-style: none; }
.doc-section ul li {
  position: relative; padding-left: 22px;
  font-size: 15px; color: var(--text-secondary);
}
.doc-section ul li::before {
  content: ""; position: absolute; left: 6px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.doc-section a { color: var(--primary-strong); text-decoration: underline; text-underline-offset: 3px; }

/* Marqueur des informations que l'éditeur doit encore confirmer */
.todo {
  display: block;
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: #FFF6E5;
  border: 1px dashed #E3B457;
  color: #7A5510;
  font-size: 14px;
  font-weight: 600;
}
.todo::before { content: "\26A0  "; }

.contact-card {
  display: grid; gap: 18px;
  justify-items: center;
  text-align: center;
  padding: clamp(28px, 5vw, 44px);
}
.contact-card .big-mail {
  font-size: clamp(18px, 3.4vw, 26px);
  font-weight: 700;
  color: var(--primary-strong);
  word-break: break-word;
}

/* -------------------------------------------------------------------------
   17. ANIMATIONS D'APPARITION
   ---------------------------------------------------------------------- */
/* L'effet n'est activé que si JavaScript a pu poser la classe « js » sur <html>.
   Sans JS (ou si l'observateur ne répond pas), tout reste visible. */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: var(--delay, 0ms);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* Filet de sécurité posé par main.js : effet totalement neutralisé. */
html.reveal-off .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  .phone { transform: none !important; }
}

/* -------------------------------------------------------------------------
   18. BADGES ET CARTES « APPLICATION »
   ---------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  background: var(--primary-soft); color: var(--primary-strong);
}
.badge--soon { background: var(--background-alt); color: var(--text-secondary); }

.app-card { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.app-card__top { display: flex; align-items: center; gap: 14px; }
.app-card__top .card__icon { margin-bottom: 0; }
.app-card__name { font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.app-card__kicker { font-size: 13px; color: var(--text-secondary); }
.app-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.app-card--soon { border-style: dashed; background: var(--surface-alt); }


.value-list { display: grid; gap: 12px; }
.value-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}
.value-item__icon {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-strong);
}
.value-item__icon svg { width: 21px; height: 21px; }
.value-item h3 { font-size: 16px; margin-bottom: 4px; }
.value-item p { font-size: 14px; }

/* -------------------------------------------------------------------------
   19. UTILITAIRES
   ---------------------------------------------------------------------- */
.mt-lg { margin-top: clamp(24px, 4vw, 40px); }
.mt-sm { margin-top: 16px; }
.center { text-align: center; }
.muted { color: var(--text-secondary); }
[hidden] { display: none !important; }