/* ═══════════════════════════════════════════════════════════════════════════
   LES COMPOSANTS RÉELS DE L'APPLICATION, importés du projet de démonstration.
   Utilisés par la page d'accueil pour ses illustrations.

   Tout est cloisonné sous .mtui : la bande-annonce garde sa propre feuille de
   style, et les deux ne se marchent jamais dessus. Un bloc .mtui se comporte
   comme un morceau d'application posé dans un plan.

   FICHIER PRODUIT — ne pas modifier à la main. Il est régénéré par
   outils/importer-ui.py depuis le projet de démonstration. Si l'interface
   change là-bas, relancez le script : la bande-annonce suivra.
   ═══════════════════════════════════════════════════════════════════════════ */
.mtui { --u:1px; font-family:'Karla',sans-serif; color:#2e2a3d; text-align:left; }
.mtui *, .mtui *::before, .mtui *::after { box-sizing:border-box; margin:0; padding:0; }
.mtui img { display:block; }
/* Une fenêtre d'application posée dans un plan : on la met à l'échelle d'un
   bloc, jamais son contenu — sinon une fiche n'a pas la même taille d'un plan
   à l'autre. */
.mt-ecran { transform-origin:center center; }

/* ══ tokens.css ══ */
@font-face{font-family:'Karla';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/karla-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/karla-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/karla-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/karla-latin-600-normal.woff2') format('woff2');}
@font-face { font-family:'Bricolage Grotesque'; src:url('fonts/bricolage-grotesque-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:block; }
@font-face { font-family:'Bricolage Grotesque'; src:url('fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:block; }
@font-face { font-family:'Bricolage Grotesque'; src:url('fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:block; }
@font-face { font-family:'Bricolage Grotesque'; src:url('fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); font-weight:800; font-display:block; }
@font-face { font-family:'Karla'; src:url('fonts/karla-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:block; }
@font-face { font-family:'Karla'; src:url('fonts/karla-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:block; }
.mtui {
  --paper:#faf8fc; --card:#ffffff;
  --ink:#2e2a3d; --muted:#6b6478; --faint:#8d84a0;
  --line:#e8e2f2; --line-soft:#f2eef9;

  --blue:#5588d6;
  
  --bleu:#5588d6;    --blue-soft:#e2ebfb;
  --violet:#8862c9;  --violet-soft:#ebe2fa;
  --magenta:#cc4f96; --magenta-soft:#fae0ef; --magenta-text:#c2437f;
  --pink:#c15c84;    --pink-soft:#fbe5ed;
  --vert:#3f9d8f;    --vert-soft:#ddf1ed;
  --gris:#7d7490;    --gris-soft:#eeebf3;
  --rouge:#b3242c;   --rouge-soft:#fbe3e4;
  --orange:#c0642a;  --orange-soft:#f9e8dc; --orange-text:#a35322;
  --ocre:#8f7117;    --ocre-soft:#f4edd8;   --ocre-text:#846815;

  --note-bg:#f4effc; --note-edge:#c9b3ea;
  --grad:linear-gradient(135deg,var(--blue),var(--violet) 50%,var(--magenta));
  --radius:12px;
  --shadow:0 1px 2px rgba(46,42,61,.05), 0 2px 8px rgba(46,42,61,.06);
  --shadow-hover:0 2px 4px rgba(46,42,61,.07), 0 6px 18px rgba(46,42,61,.09);

  
  --u: 1px;
  --marge: 96px;
}
.mtui img { display:block; }
/* ══ app-ui.css ══ */
.mtui .tel {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(var(--tel-e,1));
  width:390px; height:844px;
  border-radius:46px; background:var(--paper);
  border:11px solid #241f30;
  box-shadow:0 40px 90px rgba(46,42,61,.20), 0 8px 26px rgba(46,42,61,.12);
  overflow:hidden; transform-origin:center center;
}
.mtui .tel.plat { box-shadow:none; }
.mtui .tel-ecran { position:absolute; inset:0; overflow:hidden; background:var(--paper); }
.mtui .tel-encoche {
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:112px; height:26px; border-radius:999px; background:#241f30; z-index:9;
}
.mtui .tel-statut {
  position:absolute; top:14px; left:0; right:0; z-index:8;
  display:flex; justify-content:space-between; padding:0 26px;
  font-size:13px; font-weight:700; color:var(--ink); font-family:'Karla',sans-serif;
}
.mtui .wc { position:absolute; top:0; left:0; right:0; height:440px; overflow:hidden; pointer-events:none; opacity:.52; }
.mtui .wc span { position:absolute; border-radius:50%; filter:blur(92px); opacity:.19; }
.mtui .wc .wc1 { width:300px; height:300px; background:var(--blue);    top:-80px; left:-70px; }
.mtui .wc .wc2 { width:260px; height:260px; background:var(--magenta); top:-60px; right:-50px; }
.mtui .wc .wc3 { width:230px; height:230px; background:var(--violet);  top:80px;  left:40%; }
.mtui .appz { position:absolute; inset:0; padding:52px 14px 72px; overflow:hidden; }
.mtui .topbar { display:flex; align-items:center; gap:11px; min-height:44px; margin-bottom:12px; }
.mtui .topbar img { width:38px; height:38px; border-radius:12px; box-shadow:0 5px 14px rgba(111,79,188,.22); }
.mtui .topbar .marque { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:18px; letter-spacing:-.03em; }
.mtui .topbar .pouss { margin-left:auto; display:flex; gap:8px; }
.mtui .topbar .rond {
  width:34px; height:34px; border-radius:12px; background:rgba(136,98,201,.10);
  display:flex; align-items:center; justify-content:center; color:var(--violet); font-size:13px;
}
.mtui .topbar .rond.pt { border-radius:50%; background:var(--violet); }
.mtui .topbar .rond.pt i { width:9px; height:9px; border-radius:50%; background:#fff; display:block; }
.mtui .espaces-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.mtui .perso-pill {
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:12px;
  background:#2a2537; color:#fff; font-size:12.5px; font-weight:700;
}
.mtui .perso-pill .princ { font-size:8.5px; font-weight:800; letter-spacing:.09em; opacity:.62; }
.mtui .espace-item { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; }
.mtui .espace-item .av {
  width:22px; height:22px; border-radius:50%; background:var(--magenta-soft); color:var(--magenta-text);
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800;
}
.mtui .vues-row { display:flex; gap:7px; margin-bottom:10px; flex-wrap:wrap; }
.mtui .searchbar { background:transparent; padding:2px 0 12px; position:relative; }
.mtui .search-ph { pointer-events:none; }
.mtui .search-input {
  width:100%; min-height:58px; padding:0 16px 0 42px; font:inherit; font-size:15.5px;
  display:flex; align-items:center;
  color:var(--ink); background:var(--card); border:1.5px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow);
  display:flex; align-items:center; white-space:nowrap; overflow:hidden;
}
.mtui .search-input.focus { border-color:var(--violet); }
.mtui .search-ph { position:absolute; left:42px; top:50%; transform:translateY(-50%); color:var(--faint); }
.mtui .search-icon { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--faint); }
.mtui .chip-row { display:flex; gap:7px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.mtui .chip {
  font-size:12.5px; font-weight:700; padding:7px 13px; min-height:34px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--card); color:var(--muted);
  white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
}
.mtui .chip.active { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.mtui .chip.c-bleu { background:var(--blue-soft);    border-color:transparent; color:var(--blue); }
.mtui .chip.c-violet { background:var(--violet-soft);  border-color:transparent; color:var(--violet); }
.mtui .chip.c-vert { background:var(--vert-soft);    border-color:transparent; color:var(--vert); }
.mtui .chip.c-magenta { background:var(--magenta-soft); border-color:transparent; color:var(--magenta); }
.mtui .chip.c-orange { background:var(--orange-soft);  border-color:transparent; color:var(--orange-text); }
.mtui .chip.c-violet.on { background:var(--violet); color:#fff; }
.mtui .chip .pt { width:9px; height:9px; border-radius:50%; }
.mtui .vue-chip {
  display:inline-flex; align-items:center; gap:7px; background:var(--card);
  border:1.5px solid var(--line); border-radius:999px; padding:6px 12px;
  font-size:13px; font-weight:700; color:var(--muted);
}
.mtui .vue-chip.on { border-color:var(--violet); color:var(--violet); background:var(--violet-soft); }
.mtui .grid { display:grid; grid-template-columns:1fr; gap:13px; }
.mtui .card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
  position:relative;
}
.mtui .card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; z-index:2; background:var(--gris); }
.mtui .card.s-bleu::before { background:var(--blue); }
.mtui .card.s-violet::before { background:var(--violet); }
.mtui .card.s-vert::before { background:var(--vert); }
.mtui .card.s-magenta::before { background:var(--magenta); }
.mtui .card.s-orange::before { background:var(--orange); }
.mtui .card-body { padding:12px 13px 13px; display:flex; flex-direction:column; gap:8px; flex:1; }
.mtui .card-head { display:flex; align-items:flex-start; gap:8px; }
.mtui .card-title { font-family:'Bricolage Grotesque',sans-serif; font-size:16px; font-weight:700; line-height:1.3; flex:1; }
.mtui .card-kebab { color:var(--faint); font-size:16px; line-height:1; letter-spacing:1px; flex-shrink:0; }
.mtui .card-domain { font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.mtui .card-domain .fav { width:15px; height:15px; border-radius:4px; background:var(--grad); }
.mtui .card-desc { font-size:14px; color:var(--muted); line-height:1.45; }
.mtui .card-desc.seul { font-size:15px; color:var(--ink); font-weight:500; }
.mtui .card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:2px; }
.mtui .card-tags { display:flex; gap:6px; flex-wrap:wrap; }
.mtui .tag { font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--line-soft); color:var(--muted); }
.mtui .tag.t-blue { background:var(--blue-soft);    color:var(--blue); }
.mtui .tag.t-violet { background:var(--violet-soft);  color:var(--violet); }
.mtui .tag.t-magenta { background:var(--magenta-soft); color:var(--magenta); }
.mtui .tag.t-vert { background:var(--vert-soft);    color:var(--vert); }
.mtui .pastille { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--muted); }
.mtui .pastille .pt { width:9px; height:9px; border-radius:50%; background:var(--gris); }
.mtui .thumb-wrap { position:relative; aspect-ratio:16/9; background:var(--line-soft); overflow:hidden; }
.mtui .thumb-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.mtui .thumb-play span {
  width:48px; height:48px; border-radius:50%; background:rgba(46,42,61,.72);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px;
}
.mtui .thumb-duree {
  position:absolute; right:8px; bottom:8px; background:rgba(36,31,48,.86); color:#fff;
  font-size:11.5px; font-weight:700; padding:2px 6px; border-radius:5px;
}
.mtui .lecteur { position:relative; aspect-ratio:16/9; overflow:hidden; background:#241f30; }
.mtui .lecteur-barre { position:absolute; left:0; right:0; bottom:0; padding:0 10px 9px; }
.mtui .lecteur-piste { height:4px; border-radius:999px; background:rgba(255,255,255,.28); position:relative; }
.mtui .lecteur-jauge { position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:999px; background:var(--magenta); }
.mtui .lecteur-tete {
  position:absolute; top:50%; left:0%; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.mtui .lecteur-tc { display:flex; justify-content:space-between; color:#fff; font-size:11px; font-weight:700; margin-bottom:5px; opacity:.9; }
.mtui .notes { display:flex; flex-direction:column; gap:8px; }
.mtui .note {
  background:var(--note-bg); border-left:4px solid var(--note-edge);
  border-radius:6px; padding:9px 11px; font-size:14px; line-height:1.55;
}
.mtui .note .ts { font-weight:700; color:var(--muted); padding:1px 7px; border-radius:6px; background:transparent; }
.mtui .note .ts.lien { color:var(--violet); background:var(--violet-soft); }
.mtui .note-add { display:flex; gap:7px; }
.mtui .note-add input, .mtui .note-add .faux {
  flex:1; min-width:0; border:1.5px solid var(--line); border-radius:9px; padding:9px 11px;
  font-size:14px; background:var(--card); color:var(--faint);
  display:flex; align-items:center; white-space:nowrap; overflow:hidden;
}
.mtui .note-add .faux.focus { border-color:var(--violet); color:var(--ink); }
.mtui .note-add .plus {
  border-radius:9px; padding:0 14px; min-width:42px; background:var(--violet-soft);
  color:var(--violet); font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center;
}
.mtui .bouton-noter {
  display:inline-flex; align-items:center; gap:7px; border-radius:9px;
  background:var(--violet-soft); color:var(--violet); font-weight:700; font-size:13.5px;
  padding:8px 13px;
}
.mtui .overlay { position:absolute; inset:0; background:rgba(46,42,61,.4); display:flex; align-items:flex-end; }
.mtui .sheet {
  width:100%; background:var(--card); border-radius:22px 22px 0 0; padding:18px 16px 22px;
  box-shadow:0 -8px 40px rgba(46,42,61,.18);
}
.mtui .sheet-poignee { width:42px; height:4px; border-radius:999px; background:var(--line); margin:0 auto 14px; }
.mtui .sheet h3 { font-family:'Bricolage Grotesque',sans-serif; font-size:19px; font-weight:800; margin-bottom:14px; }
.mtui .champ { margin-bottom:12px; }
.mtui .champ label { display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:5px; }
.mtui .champ .box {
  border:1.5px solid var(--line); border-radius:11px; padding:11px 13px; font-size:14.5px;
  color:var(--ink); background:var(--card); min-height:44px; display:flex; align-items:center;
  white-space:nowrap; overflow:hidden;
}
.mtui .champ .box.vide { color:var(--faint); }
.mtui .champ .box.focus { border-color:var(--violet); }
.mtui .btn-primaire {
  width:100%; border-radius:12px; padding:14px; background:var(--grad); color:#fff;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:15.5px; text-align:center;
}
.mtui .btn-doux {
  border-radius:11px; padding:10px 14px; background:var(--violet-soft); color:var(--violet);
  font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px;
}
.mtui .menu {
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 34px rgba(46,42,61,.18); padding:6px; min-width:212px;
}
.mtui .menu button, .mtui .menu .it {
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 11px;
  font-size:14px; color:var(--ink); border-radius:9px; text-align:left;
}
.mtui .menu .it.on { background:var(--violet-soft); color:var(--violet); font-weight:700; }
.mtui .toast {
  position:absolute; left:16px; right:16px; bottom:26px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 34px rgba(46,42,61,.16); padding:13px 15px;
  display:flex; align-items:center; gap:11px; font-size:14px; font-weight:600;
}
.mtui .toast .ok { width:22px; height:22px; border-radius:50%; background:var(--vert-soft); color:var(--vert); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; }
.mtui .tabbar {
  position:absolute; left:0; right:0; bottom:0; height:66px;
  background:rgba(255,255,255,.94); border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-around;
  font-size:10.5px; font-weight:600; color:var(--faint); padding-bottom:6px;
}
.mtui .tabbar > span { position:relative; text-align:center; }
.mtui .tabbar .on { color:var(--violet); font-weight:700; }
.mtui .tabbar i { display:block; width:21px; height:21px; border-radius:7px; background:currentColor; opacity:.8; margin:0 auto 5px; }
.mtui .tabbar .badge {
  position:absolute; top:-5px; right:-9px; min-width:16px; padding:1px 4px; border-radius:999px;
  background:var(--violet-soft); color:var(--violet); font-size:9px; font-weight:800;
}
.mtui .tabbar .prof { width:21px; height:21px; border-radius:50%; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; margin:0 auto 5px; }
.mtui .fab-rond {
  position:absolute; right:16px; bottom:80px; z-index:25;
  width:52px; height:52px; border-radius:50%; background:#2a2537; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:300;
  box-shadow:0 10px 24px rgba(39,35,52,.32);
}
.mtui .curseur {
  position:absolute; width:26px; height:26px; margin:-4px 0 0 -4px; z-index:60;
  pointer-events:none; opacity:0;
}
.mtui .curseur::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:rgba(136,98,201,.28); border:2px solid var(--violet);
}
.mtui .onde {
  position:absolute; width:26px; height:26px; margin:-4px 0 0 -4px; z-index:59;
  border-radius:50%; border:2px solid var(--violet); opacity:0; pointer-events:none;
}
.mtui .pastille.st-gris { background:var(--gris-soft);    color:var(--muted);        padding:4px 9px; border-radius:999px; }
.mtui .pastille.st-bleu { background:var(--blue-soft);    color:var(--blue);         padding:4px 9px; border-radius:999px; }
.mtui .pastille.st-violet { background:var(--violet-soft);  color:var(--violet);       padding:4px 9px; border-radius:999px; }
.mtui .pastille.st-magenta { background:var(--magenta-soft); color:var(--magenta-text); padding:4px 9px; border-radius:999px; }
.mtui .pastille.st-vert { background:var(--vert-soft);    color:var(--vert);         padding:4px 9px; border-radius:999px; }
.mtui .card-domain .fav { flex:0 0 auto; }
.mtui .vues-row:empty, .mtui .espaces-row:empty { display:none; }
.mtui .vue-chip.enr { color:var(--muted); font-weight:600; }
.mtui .chip.actif, .mtui .chip.tagactif { display:none; }
.mtui .chip.actif { background:#2f7ae0; border-color:transparent; color:#fff; font-weight:700; }
.mtui .chip.tagactif { background:#2a2537; border-color:transparent; color:#fff; font-weight:700; }
.mtui .modale-tel {
  position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(46,42,61,.30); opacity:0;
}
.mtui .mt-boite {
  width:100%; max-height:660px; overflow:hidden;
  background:#fff; border-radius:20px; padding:16px 16px 18px;
  box-shadow:0 24px 60px rgba(46,42,61,.28);
}
.mtui .mt-tete { display:flex; align-items:center; margin-bottom:14px; }
.mtui .mt-tete h3 { font-family:'Bricolage Grotesque',sans-serif; font-size:17px; font-weight:800; }
.mtui .mt-tete .x { margin-left:auto; color:var(--faint); font-size:15px; }
.mtui .mt-champ { margin-bottom:11px; }
.mtui .mt-champ > label { display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:5px; }
.mtui .mt-champ > label span { color:var(--muted); font-weight:400; }
.mtui .mt-boite-champ {
  min-height:42px; padding:11px 12px; border:1.5px solid var(--line); border-radius:11px;
  background:#fff; font-size:13.5px; color:var(--faint);
  display:flex; align-items:center; white-space:nowrap; overflow:hidden;
}
.mtui .mt-boite-champ.focus { border-color:var(--violet); }
.mtui .mt-segments { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.mtui .mt-segments span {
  min-height:38px; border:1px solid var(--line); border-radius:10px; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:600; color:var(--ink);
}
.mtui .mt-segments span.on { background:#e8f0fd; border-color:#bcd4f5; color:var(--blue); font-weight:700; }
.mtui .mt-apercu {
  display:flex; align-items:center; gap:9px; margin-bottom:11px; padding:10px 12px;
  border-radius:11px; background:var(--line-soft); font-size:12.5px; color:var(--muted);
}
.mtui .mt-apercu .fav { width:18px; height:18px; border-radius:5px; background:var(--grad); display:block; }
.mtui .mt-photo {
  padding:12px; border:1.5px dashed var(--line); border-radius:11px; text-align:center;
  font-size:13px; color:var(--muted); margin-bottom:11px;
}
.mtui .mt-photo-vue { overflow:hidden; height:0; border-radius:11px; margin-bottom:11px; }
.mtui .mt-resultat {
  padding:11px 12px; border-radius:11px; background:var(--vert-soft); color:var(--vert);
  font-size:12.5px; line-height:1.4; margin-bottom:11px;
}
.mtui .mt-boutons { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }
.mtui .mt-annuler {
  min-height:46px; border:1px solid var(--line); border-radius:12px; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--ink);
}
.mtui .mt-ok {
  min-height:46px; border-radius:12px; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-size:15px; font-weight:700;
}
.mtui .lien-visuel {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:118px; padding:22px; background:linear-gradient(150deg,#eef2fc,#f2ecfa 55%,#faeef4);
}
.mtui .lien-visuel .emb {
  width:46px; height:46px; border-radius:14px; background:#fff; box-shadow:0 6px 16px rgba(55,44,78,.12);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-size:19px; font-weight:800; color:var(--violet);
}
.mtui .lien-visuel .dom { margin-top:10px; color:var(--muted); font-size:12px; font-weight:600; }
.mtui .note-visuel {
  position:relative; overflow:hidden; min-height:128px; padding:14px 15px;
  display:flex; flex-direction:column; gap:10px; color:#fff;
  background:linear-gradient(145deg,#8160c5,#9a66c1 52%,#cb5f92);
}
.mtui .note-visuel::before { content:""; position:absolute; width:120px; height:120px; right:-52px; top:-58px;
  border-radius:50%; background:rgba(255,255,255,.13); }
.mtui .note-visuel .nv-k { position:relative; z-index:1; font-size:9px; font-weight:800; letter-spacing:.11em; opacity:.82; }
.mtui .note-visuel .nv-t { position:relative; z-index:1; font-family:'Bricolage Grotesque',sans-serif; font-size:15px; font-weight:700; line-height:1.3; }
.mtui .mt-repli {
  padding:10px 12px; border-radius:11px; background:var(--line-soft);
  font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:11px;
}
.mtui .mt-repli span { font-weight:400; color:var(--faint); }
.mtui .mt-photo-vue img { width:100%; height:100%; object-fit:cover; display:block; }
.mtui .idee-photo { overflow:hidden; aspect-ratio:4/3; }
.mtui .idee-photo img { width:100%; height:100%; object-fit:cover; display:block; }
/* ══ app-bureau.css ══ */
.mtui .bureau-cadre { transform:scale(var(--bur-e,1)); transform-origin:center center; }
.mtui .bureau {
  position:relative; width:1600px; height:900px;
  border-radius:20px; overflow:hidden;
  background:linear-gradient(160deg,#fbfaff 0%,#f7f4fc 45%,#f6f1fa 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 46px 110px rgba(46,42,61,.22), 0 10px 32px rgba(46,42,61,.10);
}
.mtui .bureau.plat { box-shadow:none; }
.mtui .bureau-barre {
  position:absolute; top:0; left:0; right:0; height:34px; z-index:40;
  display:flex; align-items:center; gap:8px; padding:0 15px;
  background:rgba(255,255,255,.72); border-bottom:1px solid rgba(232,226,242,.8);
}
.mtui .bureau-barre i { width:11px; height:11px; border-radius:50%; background:#e2dced; display:block; }
.mtui .bureau-ecran { position:absolute; inset:34px 0 0; overflow:hidden; }
.mtui .appn { position:absolute; inset:0; padding:26px 40px 0; }
.mtui .bn-haut { display:flex; align-items:flex-start; gap:24px; margin-bottom:18px; }
.mtui .bn-brand { display:flex; align-items:center; gap:13px; flex:0 0 auto; }
.mtui .bn-brand img { width:46px; height:46px; border-radius:15px; box-shadow:0 6px 18px rgba(111,79,188,.22); }
.mtui .bn-brand h1 { font-family:'Bricolage Grotesque',sans-serif; font-size:21px; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.mtui .bn-tagline { margin-top:2px; color:var(--faint); font-size:12.5px; }
.mtui .bn-types {
  flex:0 0 auto; margin:0 auto; display:flex; gap:4px; padding:6px;
  border-radius:20px; background:rgba(136,98,201,.09);
}
.mtui .bn-types .th {
  display:flex; align-items:center; gap:9px; padding:11px 20px; border-radius:15px;
  font-size:15px; font-weight:600; color:var(--muted); white-space:nowrap;
}
.mtui .bn-types .th.active { background:#fff; color:var(--ink); font-weight:700; box-shadow:0 2px 8px rgba(46,42,61,.10); }
.mtui .bn-types .th-ic { width:17px; height:17px; opacity:.75; }
.mtui .bn-types .th-count {
  min-width:22px; padding:2px 7px; border-radius:999px; background:var(--line-soft);
  color:var(--muted); font-size:12px; font-weight:700; text-align:center;
}
.mtui .bn-types .th.active .th-count { background:var(--violet-soft); color:var(--violet); }
.mtui .bn-actions { flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.mtui .bn-rond {
  width:42px; height:42px; border-radius:14px; background:rgba(136,98,201,.10);
  display:flex; align-items:center; justify-content:center; color:var(--violet); font-size:16px;
}
.mtui .bn-rond.pt { border-radius:50%; background:var(--violet); }
.mtui .bn-rond.pt i { width:11px; height:11px; border-radius:50%; background:#fff; display:block; }
.mtui .bn-avatar {
  width:42px; height:42px; border-radius:50%; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px;
}
.mtui .bn-espaces { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.mtui .bn-perso {
  display:inline-flex; align-items:center; gap:9px; padding:10px 17px; border-radius:14px;
  background:#2a2537; color:#fff; font-size:14.5px; font-weight:700;
  box-shadow:0 8px 18px rgba(39,35,52,.18);
}
.mtui .bn-perso .princ { font-size:9.5px; font-weight:800; letter-spacing:.09em; opacity:.62; }
.mtui .bn-espace {
  display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:var(--ink);
}
.mtui .bn-espace .av {
  width:26px; height:26px; border-radius:50%; background:var(--magenta-soft); color:var(--magenta-text);
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800;
}
.mtui .bn-vues { display:flex; gap:9px; margin-bottom:16px; min-height:0; }
.mtui .bn-vue {
  display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border-radius:13px;
  background:#fff; border:1px solid var(--line); box-shadow:0 2px 8px rgba(55,44,78,.05);
  font-size:14px; font-weight:700; color:var(--ink);
}
.mtui .bn-vue .n { min-width:20px; padding:1px 7px; border-radius:999px; background:var(--violet-soft); color:var(--violet); font-size:11.5px; }
.mtui .bn-vue .x { color:var(--faint); font-size:13px; }
.mtui .bn-searchbar { position:relative; margin-bottom:14px; }
.mtui .bn-search-input .search-ph { position:absolute; left:48px; top:50%; transform:translateY(-50%); color:var(--faint); }
.mtui .bn-search-input {
  min-height:54px; padding:15px 18px 15px 48px; border:1px solid var(--line);
  border-radius:16px; background:#fff; font-size:16px; color:var(--ink);
  box-shadow:0 2px 10px rgba(55,44,78,.04);
  display:flex; align-items:center; white-space:nowrap; overflow:hidden;
}
.mtui .bn-searchbar .search-icon { position:absolute; left:19px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:17px; }
.mtui .bn-filters { display:flex; align-items:center; gap:9px; margin-bottom:20px; }
.mtui .bn-chip {
  display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:10px 16px;
  border-radius:14px; border:1px solid var(--line); background:#fff; color:var(--muted);
  font-size:14px; font-weight:600; white-space:nowrap; box-shadow:0 2px 8px rgba(55,44,78,.04);
}
.mtui .bn-chip.on { border-color:var(--violet); background:var(--violet-soft); color:var(--violet); font-weight:700; }
.mtui .bn-chip .pt { width:9px; height:9px; border-radius:50%; background:var(--gris); display:block; }
.mtui .bn-selection { margin-left:auto; display:flex; align-items:center; gap:9px; }
.mtui .bn-vue-mode {
  width:42px; height:42px; border-radius:13px; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--faint); font-size:15px;
}
.mtui .bn-vue-mode.on { background:var(--violet-soft); border-color:transparent; color:var(--violet); }
.mtui .bn-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }
.mtui .bn-card {
  position:relative; overflow:hidden; border-radius:22px; background:#fff;
  border:1px solid rgba(232,226,242,.7); box-shadow:0 10px 34px rgba(55,44,78,.075);
}
.mtui .bn-video-visual { position:relative; aspect-ratio:16/9; overflow:hidden; background:#211d2a; }
.mtui .bn-play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.mtui .bn-play span {
  width:56px; height:56px; border-radius:50%; background:rgba(36,31,48,.62);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px;
}
.mtui .bn-link-visual {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:186px; padding:34px 22px;
  background:linear-gradient(150deg,#eef2fc 0%,#f2ecfa 55%,#faeef4 100%);
}
.mtui .bn-link-emblem {
  width:64px; height:64px; border-radius:19px; background:#fff;
  box-shadow:0 8px 22px rgba(55,44,78,.12);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-size:26px; font-weight:800; color:var(--violet);
}
.mtui .bn-link-domain { margin-top:14px; color:var(--muted); font-size:14px; font-weight:600; }
.mtui .bn-note-visual {
  position:relative; overflow:hidden; min-height:198px; padding:20px 22px 18px;
  display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  background:linear-gradient(145deg,#8160c5 0%,#9a66c1 52%,#cb5f92 100%); color:#fff;
}
.mtui .bn-note-visual::before {
  content:""; position:absolute; width:170px; height:170px; right:-74px; top:-84px;
  border-radius:50%; background:rgba(255,255,255,.13);
}
.mtui .bn-note-kicker { position:relative; z-index:1; font-size:10.5px; font-weight:800; letter-spacing:.11em; opacity:.82; }
.mtui .bn-note-texte {
  position:relative; z-index:1; font-family:'Bricolage Grotesque',sans-serif;
  font-size:21px; font-weight:700; line-height:1.28;
}
.mtui .bn-note-pied { position:relative; z-index:1; font-size:10.5px; font-weight:800; letter-spacing:.09em; opacity:.78; }
.mtui .bn-card-body { padding:16px 18px 15px; }
.mtui .bn-kicker { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.mtui .bn-source {
  display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; font-weight:600;
}
.mtui .bn-source-icon {
  width:26px; height:26px; border-radius:9px; background:var(--violet-soft); color:var(--violet);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex:0 0 auto;
}
.mtui .bn-status {
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:var(--gris-soft); color:var(--muted);
}
.mtui .bn-status i { width:8px; height:8px; border-radius:50%; background:currentColor; }
.mtui .bn-status .ch { opacity:.55; font-size:10px; }
.mtui .bn-status.st-gris { background:var(--gris-soft);    color:var(--muted); }
.mtui .bn-status.st-bleu { background:var(--blue-soft);    color:var(--blue); }
.mtui .bn-status.st-violet { background:var(--violet-soft);  color:var(--violet); }
.mtui .bn-status.st-magenta { background:var(--magenta-soft); color:var(--magenta-text); }
.mtui .bn-status.st-vert { background:var(--vert-soft);    color:var(--vert); }
.mtui .bn-title { font-family:'Bricolage Grotesque',sans-serif; font-size:19px; font-weight:700; line-height:1.26; }
.mtui .bn-desc { margin-top:9px; font-size:14px; color:var(--muted); line-height:1.45; }
.mtui .bn-afaire {
  margin-top:12px; padding:11px 13px; border-radius:12px; background:#f6f3fa;
  font-size:13.5px; color:var(--ink); line-height:1.4;
}
.mtui .bn-afaire b { display:inline; font-size:10px; font-weight:800; letter-spacing:.09em; color:var(--faint); margin-right:8px; }
.mtui .bn-repere {
  display:inline-flex; align-items:center; gap:9px; margin-top:11px;
  padding:8px 12px; border-radius:11px; border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--muted);
}
.mtui .bn-repere .x { color:var(--faint); font-size:12px; }
.mtui .bn-note-add { display:flex; gap:9px; margin-top:12px; }
.mtui .bn-note-add .faux {
  flex:1; min-height:44px; padding:11px 13px; border:1px solid var(--line); border-radius:12px;
  background:#fff; font-size:14px; color:var(--faint);
  display:flex; align-items:center; white-space:nowrap; overflow:hidden;
}
.mtui .bn-note-add .faux.focus { border-color:var(--violet); color:var(--ink); }
.mtui .bn-note-add .plus {
  width:46px; border-radius:12px; background:var(--violet-soft); color:var(--violet);
  font-weight:700; font-size:19px; display:flex; align-items:center; justify-content:center;
}
.mtui .bn-notes { display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.mtui .bn-note {
  padding:10px 12px; border:1px solid #e4dbf2; border-left:3px solid var(--note-edge);
  border-radius:11px; background:#f7f3fc; font-size:14px; line-height:1.5;
}
.mtui .bn-note .ts { font-weight:700; color:var(--muted); padding:1px 8px; border-radius:7px; background:transparent; }
.mtui .bn-note .ts.lien { color:var(--violet); background:var(--violet-soft); }
.mtui .bn-pied { display:flex; align-items:center; justify-content:space-between; margin-top:13px; }
.mtui .bn-date { color:var(--faint); font-size:13px; }
.mtui .bn-kebab {
  width:36px; height:36px; border-radius:11px; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--faint); font-size:15px;
}
.mtui .bn-tags { display:flex; gap:7px; }
.mtui .bn-fab {
  position:absolute; right:40px; bottom:30px; z-index:30;
  border-radius:16px; padding:16px 24px; background:#2a2537; color:#fff;
  font-size:16px; font-weight:700; display:flex; align-items:center; gap:9px;
  box-shadow:0 15px 32px rgba(39,35,52,.27);
}
.mtui .bn-menu {
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 22px 50px rgba(46,42,61,.20); padding:9px; min-width:270px;
}
.mtui .bn-menu .it {
  display:flex; align-items:center; gap:12px; padding:12px 13px; border-radius:12px;
  font-size:15px; color:var(--ink);
}
.mtui .bn-menu .it.on { background:var(--violet-soft); color:var(--violet); font-weight:700; }
.mtui .bn-menu .it .n { margin-left:auto; color:var(--faint); font-size:13.5px; font-weight:700; }
.mtui .bn-menu .it i { width:11px; height:11px; border-radius:50%; display:block; }
.mtui .bn-modale { position:absolute; inset:0; z-index:35; display:flex; align-items:center; justify-content:center; background:rgba(248,245,252,.84); }
.mtui .bn-modale-boite {
  width:560px; background:#fff; border-radius:22px; padding:26px 28px 28px;
  box-shadow:0 40px 90px rgba(46,42,61,.22); border:1px solid var(--line-soft);
}
.mtui .bn-modale-tete { display:flex; align-items:center; margin-bottom:20px; }
.mtui .bn-modale-tete h3 { font-family:'Bricolage Grotesque',sans-serif; font-size:23px; font-weight:800; }
.mtui .bn-modale-tete .x { margin-left:auto; color:var(--faint); font-size:18px; }
.mtui .bn-champ { margin-bottom:16px; }
.mtui .bn-champ > label { display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.mtui .bn-champ > label span { color:var(--muted); font-weight:400; }
.mtui .bn-boite {
  min-height:52px; padding:14px 16px; border:1.5px solid var(--line); border-radius:14px;
  background:#fff; font-size:15px; color:var(--faint);
  display:flex; align-items:center; white-space:nowrap; overflow:hidden;
}
.mtui .bn-boite.focus { border-color:var(--violet); }
.mtui .bn-boite.grand { min-height:104px; align-items:flex-start; }
.mtui .bn-segments { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.mtui .bn-segments span {
  min-height:48px; border:1px solid var(--line); border-radius:13px; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14.5px; font-weight:600; color:var(--ink);
}
.mtui .bn-segments span.on { background:#e8f0fd; border-color:#bcd4f5; color:var(--blue); font-weight:700; }
.mtui .bn-boutons { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.mtui .bn-btn-annuler {
  min-height:52px; border:1px solid var(--line); border-radius:14px; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15.5px; font-weight:700; color:var(--ink);
}
.mtui .bn-btn-ok {
  min-height:52px; border-radius:14px; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-size:16px; font-weight:700;
}
.mtui .bn-choix4 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mtui .bn-choix4 .t { border:1px solid var(--line); border-radius:16px; padding:18px 18px 20px; }
.mtui .bn-choix4 .t .ic {
  width:44px; height:44px; border-radius:13px; background:var(--violet-soft); color:var(--violet);
  display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:14px;
}
.mtui .bn-choix4 .t b { display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:17px; font-weight:700; }
.mtui .bn-choix4 .t span { display:block; margin-top:4px; color:var(--muted); font-size:13.5px; }
.mtui .bn-toast {
  position:absolute; right:40px; bottom:106px; z-index:38;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 44px rgba(46,42,61,.18); padding:16px 20px;
  display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600;
}
.mtui .bn-toast .ok { width:26px; height:26px; border-radius:50%; background:var(--vert-soft); color:var(--vert);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
.mtui .appareil-bureau { display:none; }
.mtui .appareil-tel { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.mtui .scene-bureau .appareil-bureau { display:flex; position:absolute; inset:0; align-items:center; justify-content:center; }
.mtui .scene-bureau .appareil-tel { display:none; }
.mtui .force-tel    .appareil-bureau { display:none !important; }
.mtui .force-tel    .appareil-tel { display:flex !important; }
.mtui .force-bureau .appareil-tel { display:none !important; }
.mtui .force-bureau .appareil-bureau { display:flex !important; position:absolute; inset:0; align-items:center; justify-content:center; }
.mtui .bureau-cadre { --bur-e:1.135; }
.mtui .bn-card.mini .bn-card-body { padding:13px 14px 12px; }
.mtui .bn-card.mini .bn-title { font-size:15.5px; }
.mtui .bn-card.mini .bn-pied { display:none; }
.mtui .bn-card.mini .bn-kicker { margin-bottom:8px; }
.mtui .bn-video-visual .lecteur-barre { position:absolute; left:0; right:0; bottom:0; padding:0 14px 12px; }
.mtui .bn-video-visual .lecteur-tc { display:flex; justify-content:space-between; color:#fff; font-size:13px; font-weight:700; margin-bottom:7px; opacity:.92; }
.mtui .bn-video-visual .lecteur-piste { height:5px; border-radius:999px; background:rgba(255,255,255,.28); position:relative; }
.mtui .bn-video-visual .lecteur-jauge { position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:999px; background:var(--magenta); }
.mtui .bn-video-visual .lecteur-tete { position:absolute; top:50%; left:0%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.45); }
.mtui .bn-video-visual .vignette { position:absolute; inset:0; }
.mtui .bn-menu.petit { min-width:190px; padding:6px; border-radius:14px; }
.mtui .bn-menu.petit .it { padding:9px 10px; font-size:13px; border-radius:9px; gap:9px; }
.mtui .bn-menu.petit .it i { width:9px; height:9px; }
.mtui .bn-menu.petit .it .n { font-size:11.5px; }
.mtui .bn-vue.enr { color:var(--muted); font-weight:600; }
.mtui .bn-vue.enr::before { content:""; }
.mtui .bn-chip.actif, .mtui .bn-chip.tagactif, .mtui .bn-chip.effacer { display:none; }
.mtui .bn-chip.actif { background:#2f7ae0; border-color:transparent; color:#fff; font-weight:700; }
.mtui .bn-chip.actif b { opacity:.7; font-weight:700; }
.mtui .bn-chip.tagactif { background:#2a2537; border-color:transparent; color:#fff; font-weight:700; }
.mtui .bn-chip.tagactif b { opacity:.6; }
.mtui .bn-chip.effacer { border-style:dashed; color:var(--muted); }
/* ══ scene-kit.css ══ */
.mtui .scene { position:absolute; inset:0; overflow:hidden; }
.mtui .fond { position:absolute; inset:0; background:var(--paper); }
.mtui .fond .blob { position:absolute; border-radius:50%; filter:blur(120px); }
.mtui .fond .b1 { width:calc(760*var(--u)); height:calc(760*var(--u)); background:var(--blue);    opacity:.16; top:calc(-220*var(--u)); left:calc(-180*var(--u)); }
.mtui .fond .b2 { width:calc(640*var(--u)); height:calc(640*var(--u)); background:var(--magenta); opacity:.14; bottom:calc(-200*var(--u)); right:calc(-140*var(--u)); }
.mtui .fond .b3 { width:calc(560*var(--u)); height:calc(560*var(--u)); background:var(--violet);  opacity:.13; top:38%; left:44%; }
.mtui .plateau { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.mtui .plateau { flex-direction:row; gap:calc(120*var(--u)); padding:0 var(--marge); }
.mtui .colonne-texte { flex:0 0 calc(660*var(--u)); }
.mtui .colonne-tel { flex:0 0 auto; }
.mtui .colonne-tel {
  position:relative; flex:0 0 auto; --tel-e:1;
  width:calc(390px * var(--tel-e));
  height:calc(844px * var(--tel-e));
}
.mtui .tgrand {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:calc(76*var(--u)); line-height:1.06; letter-spacing:-.025em; color:var(--ink);
}
.mtui .tmoyen {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:calc(46*var(--u)); line-height:1.15; letter-spacing:-.02em; color:var(--ink);
}
.mtui .tpetit {
  font-family:'Karla',sans-serif; font-weight:400;
  font-size:calc(28*var(--u)); line-height:1.5; color:var(--muted);
}
.mtui .tetiquette {
  font-family:'Karla',sans-serif; font-weight:700; font-size:calc(19*var(--u));
  text-transform:uppercase; letter-spacing:.14em; color:var(--violet);
}
.mtui .degrade {
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.mtui .temps-geant {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:calc(300*var(--u)); letter-spacing:-.04em; color:var(--ink);
}
.mtui .bandeau {
  position:absolute; left:var(--marge); bottom:calc(64*var(--u));
  display:inline-flex; align-items:center; gap:calc(14*var(--u));
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  border-radius:999px; padding:calc(12*var(--u)) calc(26*var(--u));
  box-shadow:0 calc(10*var(--u)) calc(30*var(--u)) rgba(46,42,61,.10);
  font-family:'Karla',sans-serif; font-weight:700; font-size:calc(24*var(--u)); color:var(--ink);
}
.mtui .bandeau .pt { width:calc(12*var(--u)); height:calc(12*var(--u)); border-radius:50%; background:var(--violet); }
.mtui .signature { display:flex; flex-direction:column; align-items:center; text-align:center; }
.mtui .signature img { width:calc(168*var(--u)); height:calc(168*var(--u)); border-radius:calc(38*var(--u)); box-shadow:0 calc(24*var(--u)) calc(64*var(--u)) rgba(136,98,201,.34); }
.mtui .signature .marque { margin-top:calc(34*var(--u)); font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:calc(72*var(--u)); letter-spacing:-.025em; }
.mtui .signature .accroche { margin-top:calc(22*var(--u)); font-family:'Karla',sans-serif; font-weight:700; font-size:calc(34*var(--u)); color:#4a4458; }
.mtui .signature .slogan { margin-top:calc(8*var(--u)); font-family:'Karla',sans-serif; font-size:calc(29*var(--u)); color:var(--muted); }
.mtui .signature .adresse-boite { position:relative; display:inline-flex; margin-top:calc(46*var(--u)); }
.mtui .signature .adresse {
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:calc(14*var(--u));
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:calc(34*var(--u)); letter-spacing:.005em; color:#fff;
  padding:calc(20*var(--u)) calc(42*var(--u)); border-radius:999px;
  background:var(--grad);
  box-shadow:0 calc(16*var(--u)) calc(40*var(--u)) rgba(136,98,201,.38),
             0 calc(3*var(--u)) calc(10*var(--u)) rgba(46,42,61,.14);
}
.mtui .signature .adresse::after { content:"\2192"; font-size:calc(30*var(--u)); opacity:.9; }
.mtui .signature .cta {
  margin-top:calc(20*var(--u));
  display:inline-flex; align-items:center; gap:calc(11*var(--u));
  font-family:'Karla',sans-serif; font-weight:700; font-size:calc(25*var(--u));
  color:var(--violet); padding:calc(13*var(--u)) calc(30*var(--u));
  border-radius:999px; background:var(--card); border:1.5px solid var(--line);
  box-shadow:0 calc(6*var(--u)) calc(18*var(--u)) rgba(46,42,61,.08);
}
.mtui .signature .cta::after { content:"\2192"; opacity:.55; }
.mtui .signature .adresse-halo {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(660*var(--u)); height:calc(210*var(--u)); border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(136,98,201,.28), transparent 70%);
}
.mtui .objet {
  position:absolute; width:calc(360*var(--u)); background:var(--card);
  border:1px solid var(--line); border-radius:calc(18*var(--u)); box-shadow:var(--shadow-hover);
  overflow:hidden;
}
.mtui .objet .haut { height:calc(6*var(--u)); background:var(--grad); }
.mtui .objet .corps { padding:calc(22*var(--u)) calc(24*var(--u)); }
.mtui .objet .t { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:calc(25*var(--u)); line-height:1.3; }
.mtui .objet .s { margin-top:calc(9*var(--u)); font-size:calc(19*var(--u)); color:var(--muted); }
.mtui .objet .vig { aspect-ratio:16/9; background:var(--line-soft); }
.mtui .vignette {
  position:relative; width:100%; height:100%; overflow:hidden;
  background:linear-gradient(140deg,#2f2a44 0%,#4a3a72 45%,#7b4a86 100%);
}
.mtui .vignette .arc {
  position:absolute; border-radius:50%; border:2px solid rgba(255,255,255,.15);
}
.mtui .vignette .arc.a1 { width:58%; aspect-ratio:1; left:-8%;   top:-26%; }
.mtui .vignette .arc.a2 { width:76%; aspect-ratio:1; right:-14%; bottom:-40%; border-color:rgba(255,255,255,.10); }
.mtui .vignette .uk {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:9px; height:52%;
}
.mtui .vignette .corde { width:3px; background:rgba(255,255,255,.62); border-radius:3px; box-shadow:0 0 10px rgba(255,255,255,.35); }
.mtui .vignette .lueur {
  position:absolute; width:150%; height:150%; left:-25%; top:-60%;
  background:radial-gradient(circle at 50% 50%, rgba(204,79,150,.45), transparent 60%);
}
.mtui .vignette .titre {
  position:absolute; left:10px; right:10px; bottom:9px;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; color:#fff;
  font-size:15px; line-height:1.18; text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.mtui .vignette .chaine {
  position:absolute; left:10px; top:9px; font-size:10.5px; font-weight:700;
  color:rgba(255,255,255,.86); letter-spacing:.06em; text-transform:uppercase;
}
.mtui .photo-idee { width:100%; aspect-ratio:4/3; background:linear-gradient(160deg,#e8dfd2,#cbb79c 60%,#a98f6f); position:relative; overflow:hidden; }
.mtui .photo-idee .planche { position:absolute; background:rgba(255,255,255,.30); border-radius:3px; }
.mtui .masque-largeur { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; }
.mtui .invisible { opacity:0; }

/* ── Intégration dans la page d'accueil ──────────────────────────────────
   La coque de maquette perd son fond et sa bordure : le bloc d'application
   qu'elle contient porte déjà les siens. */
.app-mockup.mt-coque {
  background:transparent; border:0; box-shadow:none; padding:0;
  min-height:0; display:flex; justify-content:center;
}
/* Les blocs d'application ont une taille fixe, dessinée pour un écran large.
   Sur téléphone ils débordaient : 1395 px de contenu dans une fenêtre de
   390 px, donc un défilement horizontal. L'échelle devient une variable que
   les points de rupture multiplient, et la boîte rogne ce qui dépasse. */
.mt-boite { position:relative; flex:0 0 auto; max-width:100%; overflow:hidden; }
.mt-boite > .mt-ecran { position:absolute; left:50%; top:50%; transform-origin:center center; }

/* Chaque bloc a une taille de dessin fixe. À chaque bande de largeur, la
   feuille fixe la largeur de la boîte ET l'échelle qui va avec — échelle =
   boîte ÷ dessin, arrondie vers le bas pour ne jamais dépasser d'un pixel.
   Les largeurs viennent de mesures réelles de la colonne, prises au bas de
   chaque bande : c'est ce qui permet aux écrans d'occuper la place au lieu
   de flotter au milieu.

   Deux leçons sont derrière ces lignes. Un calc(var() * var()) dans un
   scale() était ignoré par Firefox : le contenu gardait ses 620 px dans une
   boîte de 533, et 43 px se faisaient rogner de chaque côté. Puis l'échelle,
   écrite en style en ligne, l'emportait sur toute feuille : aucun point de
   rupture ne pouvait reprendre la main. Ici, tout est en clair, dans la
   feuille, et rien n'est calculé par le navigateur. */
.mt-boite { max-width:100%; }
@media (min-width:1800px) {
  .mt-b1 { width:775px; height:537px; }
  .mt-b1 > .mt-ecran { transform:translate(-50%,-50%) scale(1.25); }
  .mt-b2 { width:780px; height:431px; }
  .mt-b2 > .mt-ecran { transform:translate(-50%,-50%) scale(0.696); }
  .mt-b3 { width:644px; height:610px; }
  .mt-b3 > .mt-ecran { transform:translate(-50%,-50%) scale(1.298); }
  .mt-b4 { width:780px; height:455px; }
  .mt-b4 > .mt-ecran { transform:translate(-50%,-50%) scale(0.65); }
}
@media (max-width:1799px) and (min-width:1600px) {
  .mt-b1 { width:640px; height:443px; }
  .mt-b1 > .mt-ecran { transform:translate(-50%,-50%) scale(1.032); }
  .mt-b2 { width:640px; height:354px; }
  .mt-b2 > .mt-ecran { transform:translate(-50%,-50%) scale(0.571); }
  .mt-b3 { width:640px; height:606px; }
  .mt-b3 > .mt-ecran { transform:translate(-50%,-50%) scale(1.29); }
  .mt-b4 { width:640px; height:373px; }
  .mt-b4 > .mt-ecran { transform:translate(-50%,-50%) scale(0.533); }
}
@media (max-width:1599px) and (min-width:1440px) {
  .mt-b1 { width:570px; height:395px; }
  .mt-b1 > .mt-ecran { transform:translate(-50%,-50%) scale(0.919); }
  .mt-b2 { width:570px; height:314px; }
  .mt-b2 > .mt-ecran { transform:translate(-50%,-50%) scale(0.508); }
  .mt-b3 { width:570px; height:540px; }
  .mt-b3 > .mt-ecran { transform:translate(-50%,-50%) scale(1.149); }
  .mt-b4 { width:570px; height:332px; }
  .mt-b4 > .mt-ecran { transform:translate(-50%,-50%) scale(0.475); }
}
@media (max-width:1439px) and (min-width:1300px) {
  .mt-b1 { width:515px; height:356px; }
  .mt-b1 > .mt-ecran { transform:translate(-50%,-50%) scale(0.83); }
  .mt-b2 { width:515px; height:284px; }
  .mt-b2 > .mt-ecran { transform:translate(-50%,-50%) scale(0.459); }
  .mt-b3 { width:515px; height:487px; }
  .mt-b3 > .mt-ecran { transform:translate(-50%,-50%) scale(1.038); }
  .mt-b4 { width:515px; height:300px; }
  .mt-b4 > .mt-ecran { transform:translate(-50%,-50%) scale(0.429); }
}
@media (max-width:1299px) and (min-width:1100px) {
  .mt-b1 { width:435px; height:301px; }
  .mt-b1 > .mt-ecran { transform:translate(-50%,-50%) scale(0.701); }
  .mt-b2 { width:435px; height:240px; }
  .mt-b2 > .mt-ecran { transform:translate(-50%,-50%) scale(0.388); }
  .mt-b3 { width:435px; height:412px; }
  .mt-b3 > .mt-ecran { transform:translate(-50%,-50%) scale(0.877); }
  .mt-b4 { width:435px; height:253px; }
  .mt-b4 > .mt-ecran { transform:translate(-50%,-50%) scale(0.362); }
}
@media (max-width:1099px) and (min-width:1000px) {
  .mt-b1 { width:398px; height:275px; }
  .mt-b1 > .mt-ecran { transform:translate(-50%,-50%) scale(0.641); }
  .mt-b2 { width:398px; height:220px; }
  .mt-b2 > .mt-ecran { transform:translate(-50%,-50%) scale(0.355); }
  .mt-b3 { width:398px; height:376px; }
  .mt-b3 > .mt-ecran { transform:translate(-50%,-50%) scale(0.802); }
  .mt-b4 { width:398px; height:231px; }
  .mt-b4 > .mt-ecran { transform:translate(-50%,-50%) scale(0.331); }
}
@media (max-width:999px) and (min-width:800px) {
  .mt-b1 { width:700px; height:485px; }
  .mt-b1 > .mt-ecran { transform:translate(-50%,-50%) scale(1.129); }
  .mt-b2 { width:700px; height:387px; }
  .mt-b2 > .mt-ecran { transform:translate(-50%,-50%) scale(0.625); }
  .mt-b3 { width:644px; height:610px; }
  .mt-b3 > .mt-ecran { transform:translate(-50%,-50%) scale(1.298); }
  .mt-b4 { width:700px; height:408px; }
  .mt-b4 > .mt-ecran { transform:translate(-50%,-50%) scale(0.583); }
}
@media (max-width:799px) and (min-width:640px) {
  .mt-b1 { width:555px; height:384px; }
  .mt-b1 > .mt-ecran { transform:translate(-50%,-50%) scale(0.895); }
  .mt-b2 { width:555px; height:306px; }
  .mt-b2 > .mt-ecran { transform:translate(-50%,-50%) scale(0.495); }
  .mt-b3 { width:555px; height:525px; }
  .mt-b3 > .mt-ecran { transform:translate(-50%,-50%) scale(1.118); }
  .mt-b4 { width:555px; height:323px; }
  .mt-b4 > .mt-ecran { transform:translate(-50%,-50%) scale(0.462); }
}
@media (max-width:639px) and (min-width:480px) {
  .mt-b1 { width:414px; height:286px; }
  .mt-b1 > .mt-ecran { transform:translate(-50%,-50%) scale(0.667); }
  .mt-b2 { width:414px; height:228px; }
  .mt-b2 > .mt-ecran { transform:translate(-50%,-50%) scale(0.369); }
  .mt-b3 { width:414px; height:391px; }
  .mt-b3 > .mt-ecran { transform:translate(-50%,-50%) scale(0.834); }
  .mt-b4 { width:414px; height:241px; }
  .mt-b4 > .mt-ecran { transform:translate(-50%,-50%) scale(0.345); }
}
@media (max-width:479px) {
  .mt-b1 { width:336px; height:232px; }
  .mt-b1 > .mt-ecran { transform:translate(-50%,-50%) scale(0.541); }
  .mt-b2 { width:336px; height:186px; }
  .mt-b2 > .mt-ecran { transform:translate(-50%,-50%) scale(0.3); }
  .mt-b3 { width:336px; height:318px; }
  .mt-b3 > .mt-ecran { transform:translate(-50%,-50%) scale(0.677); }
  .mt-b4 { width:336px; height:196px; }
  .mt-b4 > .mt-ecran { transform:translate(-50%,-50%) scale(0.28); }
}

/* Le halo décoratif du héros déborde aussi : on le contient. */
/* Le halo décoratif du héros dépasse de 170 px à droite : il élargissait la
   page sur téléphone.
   Attention : `overflow:hidden` sur .hero-media rognait aussi la pastille
   « Offre Fondateur », qui déborde volontairement de 55 px vers le bas
   (bottom:-55px). On utilise donc `overflow-x: clip`, qui coupe uniquement
   à l'horizontale et laisse passer ce qui dépasse en hauteur. */
.hero { overflow-x: clip; }
@media (max-width:640px) { .hero-glow { max-width:100%; } }

/* Une fois l'accord donné, l'iframe doit remplir le cadre. Sans cette règle,
   elle garde les 560 × 315 de ses attributs et laisse une bande vide sous
   la vidéo. */
.youtube_player iframe,
.video-embed iframe { width:100% !important; height:100% !important; border:0; }

/* Les filtres actifs sont masqués par défaut (héritage du projet de
   démonstration, où seule la scène de filtrage les utilise). */
.mtui .bn-chip.actif, .mtui .bn-chip.tagactif { display:inline-flex !important; }
.mtui .bn-chip.actif { background:#2f7ae0; border-color:transparent; color:#fff; font-weight:700; }
.mtui .bn-chip.tagactif { background:#2a2537; border-color:transparent; color:#fff; font-weight:700; }

/* Les repères sur la barre de lecture. */
.mtui .mt-repere {
  position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(204,79,150,.92);
}
/* L'état « espace partagé ». */
.mtui .bn-perso.eteint { background:transparent; color:var(--muted); box-shadow:none; font-weight:600; }
.mtui .bn-perso.eteint .princ { opacity:.5; }
.mtui .bn-espace.allume {
  padding:10px 15px 10px 10px; border-radius:14px;
  background:var(--violet); color:#fff; font-weight:700;
  box-shadow:0 8px 18px rgba(136,98,201,.28);
}
.mtui .bn-espace.allume .av { background:rgba(255,255,255,.24); color:#fff; }
.mtui .bn-banniere {
  display:flex; align-items:center; gap:12px; overflow:hidden;
  margin-bottom:14px; padding:0 18px; border-radius:14px;
  background:#e8f0fd; color:#2f4a6b; font-size:15px; line-height:46px;
}
.mtui .bn-banniere b { font-weight:700; color:#1e3a5c; }
.mtui .bn-banniere .x { margin-left:auto; opacity:.45; }

/* ── L'encart d'attente des vidéos ───────────────────────────────────────
   Tant que le consentement n'est pas donné, tarteaucitron affiche son
   propre encart à la place de la vidéo. Sans mise en forme, c'est un
   rectangle gris qui casse la page ; on l'habille aux couleurs du site. */
.tac_activate, div[id^="youtube"] .tac_activate {
  background: linear-gradient(150deg,#eef2fc 0%,#f2ecfa 55%,#faeef4 100%) !important;
  color: var(--ink) !important;
  border-radius: 18px; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: 'Karla', sans-serif;
}
.tac_activate .tac_float { text-align: center; padding: 26px; }
.tac_activate .tac_float b { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; }
.tac_activate .tac_float button, .tac_activate .tac_float .tarteaucitronAllow {
  background: linear-gradient(135deg,#5588d6,#8862c9 50%,#cc4f96) !important;
  color: #fff !important; border: 0 !important; border-radius: 999px !important;
  padding: 12px 24px !important; font-weight: 700 !important; cursor: pointer;
}
.video-embed, .video-embed > div { height: 100%; }
.video-embed .youtube_player { height: 100%; }

/* Le cadre vidéo était peint en noir pour « disparaître » derrière l'iframe
   YouTube. Tant que le consentement n'est pas donné, il n'y a pas d'iframe :
   le visiteur voit un rectangle noir. On rend le cadre transparent et on
   laisse l'encart d'attente occuper toute la place. */
.video-placeholder > .video-embed,
.video-embed { background: transparent !important; }
.video-embed > div,
.video-embed .youtube_player,
.video-embed .tac_activate,
.video-embed .tac_float { width: 100% !important; height: 100% !important; }
/* tarteaucitron pose une hauteur en pixels tirée de l'attribut `height` du
   lecteur ; on la neutralise pour que l'encart remplisse le cadre. */
.video-embed .youtube_player > div { min-height: 100%; }
.video-embed .tac_float { display: flex; align-items: center; justify-content: center; gap: 14px; }
.video-embed .tac_activate { border-radius: inherit; }

/* ── L'affiche derrière l'encart de consentement ─────────────────────────
   Le visiteur qui n'a pas encore répondu à la bannière doit voir une vidéo,
   pas un message d'erreur. L'affiche est posée sur le lecteur lui-même via
   son attribut data-poster ; l'encart de tarteaucitron passe par-dessus. */
.youtube_player { position: relative; background: #211d2a; overflow: hidden; }
/* L'affiche est posée en style direct par un petit script : voir le bas de
   index.html. Une url() passée par une variable CSS se résoudrait par
   rapport à cette feuille et non par rapport à la page. */
.youtube_player::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,20,32,.10), rgba(24,20,32,.45));
}
.youtube_player .tac_activate {
  position: relative; z-index: 2; background: transparent !important;
  color: #fff !important;
}
.youtube_player .tac_float { flex-direction: column; gap: 18px; }
.youtube_player .tac_float .youtube_fallback,
.youtube_player .tac_float span {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(19px, 2.2vw, 27px); color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.youtube_player .tac_float button,
.youtube_player .tac_float .tarteaucitronAllow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.96) !important; color: #2e2a3d !important;
  border: 0 !important; border-radius: 999px !important;
  padding: 14px 28px !important; font-weight: 700 !important;
  font-family: 'Karla', sans-serif; font-size: 16px !important; cursor: pointer;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.youtube_player .tac_float button .youtube_fallback { display: none; }
.youtube_player .tac_float button::before,
.youtube_player .tac_float .tarteaucitronAllow::before { content: "▶"; font-size: 13px; }
/* Une fois l'accord donné, l'iframe recouvre tout : l'affiche disparaît. */
.youtube_player iframe { position: relative; z-index: 3; width: 100%; height: 100%; border: 0; }

/* Les icônes du sélecteur de type sont des traits, pas des émojis : un émoji
   apporte sa propre palette et son propre style de dessin, qui jurent avec
   une interface monochrome. */
.mtui .bn-choix4 .ic svg { width: 22px; height: 22px; display: block; }

/* « Ce qui change au quotidien » : quatre promesses utiles, mais elles
   redisent ce que les sections précédentes viennent de démontrer. On les
   garde et on les resserre — les émojis en gros disparaissent, les cartes
   deviennent une rangée compacte. Mesuré : 1,6 → 0,8 écran de téléphone. */
.benefits .benefit-grid.compact { gap: 14px; }
.benefits .benefit-grid.compact article { padding: 20px 22px; }
.benefits .benefit-grid.compact h3 { margin: 0 0 6px; font-size: 19px; }
.benefits .benefit-grid.compact p { margin: 0; font-size: 15px; line-height: 1.45; }
@media (max-width: 640px) {
  .benefits .benefit-grid.compact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .benefits .benefit-grid.compact article { padding: 14px 16px; }
  .benefits .benefit-grid.compact h3 { font-size: 16px; }
  .benefits .benefit-grid.compact p { font-size: 13.5px; }
}

/* La pastille finissait à 823 px de haut de page. Sur un portable 1080p, la
   zone visible sans défiler s'arrête vers 820 px : elle était coupée de
   quelques pixels — assez pour donner l'impression qu'elle est tronquée.
   On la remonte de 37 px, elle passe entièrement au-dessus. */
.founder-badge { bottom: -18px; }