/* ═══════════════════════════════════════════════════════════════════════════
   5.59 — TROIS THÈMES EN PLUS DU THÈME TCHÉTÉ
   Réglages → Apparence → « Thème ». Choix personnel, gardé sur l'appareil
   et dans le compte.

   Règle d'or : sans attribut data-style sur <html> (thème « Par défaut »),
   AUCUNE règle de ce fichier ne s'applique. Tout est rangé sous
   :root[data-style="…"]. Le jour / la nuit restent ceux de l'attribut
   data-theme (clair | sombre), déjà utilisé par l'application : chaque
   thème existe donc en version jour et en version nuit.

   Chargé en dernier dans l'espace studio, après la couleur du studio
   (_allure.html) : les sélecteurs à trois attributs passent devant.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── commun aux trois thèmes ─────────────────────────────────────────────── */
:root[data-style]{
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
:root[data-style] body{font-family:var(--font)}
:root[data-style] h1,:root[data-style] h2,:root[data-style] h3,
:root[data-style] .rawc h3,:root[data-style] .evitem b{font-weight:700;letter-spacing:-.015em}
:root[data-style] .small-brand,:root[data-style] .side-titre{letter-spacing:.08em}
/* les polices du système sont plus larges que Jost : on resserre un peu */
:root[data-style] .btn{letter-spacing:0}
:root[data-style] .tab{display:inline-block;letter-spacing:.06em}
:root[data-style] .tab svg.ic{vertical-align:-3px;margin-right:7px}
:root[data-style] .ap-apercu .row{flex-wrap:wrap}

/* le changement de thème se fait en douceur (theme.js pose la classe 0,45 s) */
html.theme-bascule:not([data-anim="aucune"]),
html.theme-bascule:not([data-anim="aucune"]) *,
html.theme-bascule:not([data-anim="aucune"]) *::before,
html.theme-bascule:not([data-anim="aucune"]) *::after{
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,fill .3s ease!important}


/* ═════ 1. GRADIENT FEED — épuré, très contrasté, accent en dégradé ═════════ */
:root[data-style="gradient-feed"][data-theme]{
  --accent-rgb:220,39,67;
  --fond:#000000; --fond-creux:#000000; --fond-barre:rgba(0,0,0,.92);
  --surface:#000000; --surface-b:#000000; --surface-2:#121212; --surface-3:#262626;
  --trait:#262626; --trait-doux:#1a1a1a; --trait-fort:#363636;
  --texte:#f5f5f5; --texte-doux:#a8a8a8; --texte-faible:#737373;
  --or-1:#f09433; --or-2:#e6683c; --or-3:#dc2743; --or-4:#bc1888;
  --gold:#ff3d71; --gold-clair:#ff7a9c; --gold-fonce:#cc2366;
  --or:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  --or-doux:linear-gradient(45deg,rgba(240,148,51,.14),rgba(220,39,67,.14),rgba(188,24,136,.14));
  --sur-or:#ffffff;
  --line:#262626; --line-or:#363636; --line-or-fort:rgba(220,39,67,.6);
  --or-voile:rgba(220,39,67,.07); --or-voile-2:rgba(220,39,67,.14);
  --ombre-c:rgba(0,0,0,.6); --ombre:0 10px 30px rgba(0,0,0,.6); --ombre-douce:0 6px 18px rgba(0,0,0,.4);
  --lueur:0 6px 20px rgba(220,39,67,.28);
  --bloc-fond:#121212; --bloc-fond-or:#1a0d12;
  --voile-fenetre:rgba(0,0,0,.75); --voile-photo:rgba(0,0,0,.6);
  --blue:#a8a8a8;
  --carte-fond:#000000; --ombre-carte:none;
}
:root[data-style="gradient-feed"][data-theme="clair"]{
  --fond:#ffffff; --fond-creux:#fafafa; --fond-barre:rgba(255,255,255,.94);
  --surface:#ffffff; --surface-b:#ffffff; --surface-2:#fafafa; --surface-3:#efefef;
  --trait:#dbdbdb; --trait-doux:#efefef; --trait-fort:#c7c7c7;
  --texte:#000000; --texte-doux:#737373; --texte-faible:#8e8e8e;
  --gold:#d6006b; --gold-clair:#b0005a; --gold-fonce:#8a0047;
  --line:#dbdbdb; --line-or:#c7c7c7; --line-or-fort:rgba(214,0,107,.55);
  --or-voile:rgba(220,39,67,.05); --or-voile-2:rgba(220,39,67,.1);
  --ombre-c:rgba(0,0,0,.08); --ombre:0 8px 24px rgba(0,0,0,.08); --ombre-douce:0 4px 12px rgba(0,0,0,.06);
  --bloc-fond:#fafafa; --bloc-fond-or:#fff3f7;
  --voile-fenetre:rgba(0,0,0,.45); --voile-photo:rgba(0,0,0,.5);
  --blue:#737373;
  --carte-fond:#ffffff;
}
/* très arrondi, bordures très fines */
:root[data-style="gradient-feed"][data-boutons="arrondis"]{--rayon-btn:999px}
:root[data-style="gradient-feed"][data-coins="doux"]{--rayon:16px;--rayon-sm:12px}
:root[data-style="gradient-feed"] .card,
:root[data-style="gradient-feed"] .evitem,
:root[data-style="gradient-feed"] .moi-carte{border-width:1px;border-color:var(--trait)}
:root[data-style="gradient-feed"] .btn{border-color:var(--trait-fort)}
:root[data-style="gradient-feed"] .btn.primary{border-color:transparent;font-weight:600}
:root[data-style="gradient-feed"] .btn.primary:hover{filter:brightness(1.08) saturate(1.1)}
:root[data-style="gradient-feed"] .side-nav a.on{background:var(--surface-2);color:var(--texte);
  border-color:var(--trait);font-weight:600}
:root[data-style="gradient-feed"] .side-nav a.on svg.ic{color:#dc2743}
/* le « cercle de story » autour des photos de profil */
:root[data-style="gradient-feed"] .avatar{box-shadow:0 0 0 2px var(--fond),0 0 0 4px #dc2743;
  background:var(--surface-2);color:var(--texte)}
:root[data-style="gradient-feed"] .tag{border-color:var(--trait-fort)}
:root[data-style="gradient-feed"] input:focus,:root[data-style="gradient-feed"] select:focus,
:root[data-style="gradient-feed"] textarea:focus{border-color:var(--texte-faible);box-shadow:none}


/* ═════ 2. CLASSIC STREAM — cartes bien séparées, bleu franc ═══════════════ */
:root[data-style="classic-stream"][data-theme]{
  --accent-rgb:45,136,255;
  --fond:#18191a; --fond-creux:#3a3b3c; --fond-barre:rgba(36,37,38,.96);
  --surface:#242526; --surface-b:#242526; --surface-2:#3a3b3c; --surface-3:#4e4f50;
  --trait:#3e4042; --trait-doux:#323436; --trait-fort:#5a5c5e;
  --texte:#e4e6eb; --texte-doux:#b0b3b8; --texte-faible:#8a8d91;
  --or-1:#4599ff; --or-2:#2d88ff; --or-3:#1877f2; --or-4:#166fe5;
  --gold:#4599ff; --gold-clair:#8ab8ff; --gold-fonce:#1877f2;
  --or:linear-gradient(180deg,#2d88ff 0%,#1877f2 100%);
  --or-doux:linear-gradient(180deg,rgba(45,136,255,.2),rgba(45,136,255,.14));
  --sur-or:#ffffff;
  --line:#3e4042; --line-or:#3e4042; --line-or-fort:rgba(45,136,255,.6);
  --or-voile:rgba(45,136,255,.08); --or-voile-2:rgba(45,136,255,.16);
  --ombre-c:rgba(0,0,0,.4); --ombre:0 12px 28px rgba(0,0,0,.4); --ombre-douce:0 2px 8px rgba(0,0,0,.3);
  --lueur:0 4px 14px rgba(24,119,242,.3);
  --bloc-fond:#242526; --bloc-fond-or:#1c2b40;
  --voile-fenetre:rgba(0,0,0,.7); --voile-photo:rgba(0,0,0,.6);
  --blue:#4599ff;
  --carte-fond:#242526; --ombre-carte:0 1px 2px rgba(0,0,0,.3);
}
:root[data-style="classic-stream"][data-theme="clair"]{
  --accent-rgb:24,119,242;
  --fond:#f0f2f5; --fond-creux:#f0f2f5; --fond-barre:rgba(255,255,255,.97);
  --surface:#ffffff; --surface-b:#ffffff; --surface-2:#f7f8fa; --surface-3:#e4e6eb;
  --trait:#dadde1; --trait-doux:#e4e6eb; --trait-fort:#bec3c9;
  --texte:#050505; --texte-doux:#65676b; --texte-faible:#8a8d91;
  --gold:#1877f2; --gold-clair:#0b5fcc; --gold-fonce:#0a4fa8;
  --or-doux:linear-gradient(180deg,#e7f3ff,#e7f3ff);
  --line:#dadde1; --line-or:#ced0d4; --line-or-fort:rgba(24,119,242,.55);
  --or-voile:rgba(24,119,242,.05); --or-voile-2:rgba(24,119,242,.1);
  --ombre-c:rgba(0,0,0,.1); --ombre:0 12px 28px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.06);
  --ombre-douce:0 1px 2px rgba(0,0,0,.1);
  --lueur:0 4px 12px rgba(24,119,242,.25);
  --bloc-fond:#ffffff; --bloc-fond-or:#e7f3ff;
  --voile-fenetre:rgba(244,244,244,.8); --voile-photo:rgba(0,0,0,.5);
  --blue:#1877f2;
  --carte-fond:#ffffff; --ombre-carte:0 1px 2px rgba(0,0,0,.1);
}
/* coins légèrement arrondis, ombres douces, boutons francs */
:root[data-style="classic-stream"][data-boutons="arrondis"]{--rayon-btn:8px}
:root[data-style="classic-stream"][data-coins="doux"]{--rayon:10px;--rayon-sm:8px}
:root[data-style="classic-stream"] .card,
:root[data-style="classic-stream"] .evitem,
:root[data-style="classic-stream"] .moi-carte{border-color:transparent;box-shadow:var(--ombre-carte);background:var(--surface)}
:root[data-style="classic-stream"] .btn{background:var(--surface-3);border-color:transparent;font-weight:600;color:var(--texte)}
:root[data-style="classic-stream"] .btn:hover{background:var(--trait-fort);transform:none}
:root[data-style="classic-stream"][data-theme="clair"] .btn:hover{background:#d8dadf}
:root[data-style="classic-stream"] .btn.ghost{background:transparent}
:root[data-style="classic-stream"] .btn.ghost:hover{background:var(--surface-2)}
:root[data-style="classic-stream"] .btn.primary{background:var(--or);color:#fff}
:root[data-style="classic-stream"] .btn.primary:hover{filter:brightness(1.06)}
:root[data-style="classic-stream"] .btn.danger{background:var(--rouge-fond);color:var(--red)}
:root[data-style="classic-stream"] .side{background:var(--surface);box-shadow:1px 0 2px rgba(0,0,0,.08)}
:root[data-style="classic-stream"] .side-nav a{font-weight:500}
:root[data-style="classic-stream"] .side-nav a.on{background:var(--or-voile-2);color:var(--gold);border-color:transparent;
  box-shadow:inset 3px 0 0 var(--gold);font-weight:600}
:root[data-style="classic-stream"] .barre-mobile{background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.12)}
:root[data-style="classic-stream"] input,:root[data-style="classic-stream"] select,
:root[data-style="classic-stream"] textarea{background:var(--fond-creux);border-color:var(--trait)}
:root[data-style="classic-stream"] input:focus,:root[data-style="classic-stream"] select:focus,
:root[data-style="classic-stream"] textarea:focus{border-color:var(--gold);box-shadow:0 0 0 2px var(--or-voile-2)}
:root[data-style="classic-stream"] .avatar{background:var(--or);color:#fff;border:0}


/* ═════ 3. EMERALD CHAT — messagerie : compact, sobre, vert émeraude ═══════ */
:root[data-style="emerald-chat"][data-theme]{
  --accent-rgb:0,168,132;
  --fond:#0b141a; --fond-creux:#2a3942; --fond-barre:rgba(32,44,51,.97);
  --surface:#111b21; --surface-b:#111b21; --surface-2:#202c33; --surface-3:#2a3942;
  --trait:#222d34; --trait-doux:#1b252b; --trait-fort:#374248;
  --texte:#e9edef; --texte-doux:#aebac1; --texte-faible:#8696a0;
  --or-1:#25d366; --or-2:#00a884; --or-3:#128c7e; --or-4:#075e54;
  --gold:#21c063; --gold-clair:#6ee09a; --gold-fonce:#128c7e;
  --or:linear-gradient(135deg,#128c7e 0%,#0d7a6c 60%,#075e54 100%);
  --or-doux:linear-gradient(135deg,rgba(0,168,132,.18),rgba(0,168,132,.12));
  --sur-or:#ffffff;
  --line:#222d34; --line-or:#2f3b43; --line-or-fort:rgba(0,168,132,.6);
  --or-voile:rgba(0,168,132,.07); --or-voile-2:rgba(0,168,132,.15);
  --ombre-c:rgba(0,0,0,.4); --ombre:0 10px 26px rgba(0,0,0,.45); --ombre-douce:0 2px 6px rgba(0,0,0,.3);
  --lueur:0 4px 14px rgba(0,168,132,.25);
  --bloc-fond:#202c33; --bloc-fond-or:#005c4b;
  --voile-fenetre:rgba(11,20,26,.8); --voile-photo:rgba(11,20,26,.65);
  --blue:#53bdeb;
  --carte-fond:#111b21; --ombre-carte:none;
}
:root[data-style="emerald-chat"][data-theme="clair"]{
  --accent-rgb:0,128,105;
  --fond:#f0f2f5; --fond-creux:#ffffff; --fond-barre:rgba(240,242,245,.97);
  --surface:#ffffff; --surface-b:#ffffff; --surface-2:#f5f6f6; --surface-3:#e9edef;
  --trait:#e9edef; --trait-doux:#f0f2f5; --trait-fort:#d1d7db;
  --texte:#111b21; --texte-doux:#54656f; --texte-faible:#667781;
  --gold:#008069; --gold-clair:#006b58; --gold-fonce:#075e54;
  --or-doux:linear-gradient(135deg,#d9fdd3,#d9fdd3);
  --line:#e9edef; --line-or:#d1d7db; --line-or-fort:rgba(0,128,105,.5);
  --or-voile:rgba(0,128,105,.05); --or-voile-2:rgba(0,128,105,.1);
  --ombre-c:rgba(11,20,26,.1); --ombre:0 10px 26px rgba(11,20,26,.14); --ombre-douce:0 1px 3px rgba(11,20,26,.1);
  --lueur:0 4px 12px rgba(0,128,105,.2);
  --bloc-fond:#ffffff; --bloc-fond-or:#d9fdd3;
  --voile-fenetre:rgba(11,20,26,.35); --voile-photo:rgba(11,20,26,.5);
  --blue:#027eb5;
  --carte-fond:#ffffff; --ombre-carte:0 1px 1px rgba(11,20,26,.08);
}
/* compact et sobre : petits coins, lignes nettes, rien de superflu */
:root[data-style="emerald-chat"][data-boutons="arrondis"]{--rayon-btn:20px}
:root[data-style="emerald-chat"][data-coins="doux"]{--rayon:10px;--rayon-sm:7px}
:root[data-style="emerald-chat"] .card{border-color:var(--trait)}
:root[data-style="emerald-chat"] .btn{border-color:var(--trait-fort)}
:root[data-style="emerald-chat"] .btn:hover{transform:none}
:root[data-style="emerald-chat"] .btn.primary{border-color:transparent;font-weight:600}
:root[data-style="emerald-chat"] .side{background:var(--surface);border-right-color:var(--trait)}
:root[data-style="emerald-chat"] .side-nav a.on{background:var(--surface-2);color:var(--texte);border-color:transparent;font-weight:600}
:root[data-style="emerald-chat"][data-theme="clair"] .side-nav a.on{background:var(--surface-3)}
:root[data-style="emerald-chat"] .side-nav a.on svg.ic{color:var(--gold)}
/* les projets récents et la carte « moi » en bulles de discussion */
:root[data-style="emerald-chat"] .evitem{border:0;border-radius:2px 12px 12px 12px;background:var(--surface-2);
  padding:10px 12px}
:root[data-style="emerald-chat"][data-theme="clair"] .evitem{background:#ffffff;box-shadow:0 1px .5px rgba(11,20,26,.13)}
:root[data-style="emerald-chat"] .evitem.on{background:var(--bloc-fond-or);border-radius:12px 2px 12px 12px}
:root[data-style="emerald-chat"] .moi-carte{border-color:var(--trait);background:var(--surface-2)}
:root[data-style="emerald-chat"] .avatar{background:#6a7175;color:#fff;border:0}
:root[data-style="emerald-chat"] input:focus,:root[data-style="emerald-chat"] select:focus,
:root[data-style="emerald-chat"] textarea:focus{border-color:var(--gold);box-shadow:none}


/* ═══════════════════════════════════════════════════════════════════════════
   SUR TÉLÉPHONE : chaque thème a sa propre façon de ranger l'écran
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){

/* ─────────────────────────────────────────────────────────────────────────
   GRADIENT FEED — à la manière des applis photo :
   barre du haut nue, projets en ronds en haut de l'accueil, contenu bord à
   bord séparé par des filets, projets en mosaïque carrée, barre du bas en
   icônes seules.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-style="gradient-feed"] .barre-mobile{background:var(--fond);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--trait);min-height:54px}
:root[data-style="gradient-feed"] .bm-titre b{font-size:1.45rem;font-weight:800;letter-spacing:-.03em}
:root[data-style="gradient-feed"] .bm-titre span{display:none}
:root[data-style="gradient-feed"] .barre-mobile .btn.icone{border:0;background:transparent;box-shadow:none}
:root[data-style="gradient-feed"] #bmAction{background:transparent;color:var(--texte);width:40px;height:40px;
  box-shadow:inset 0 0 0 2px var(--texte);border-radius:10px;transform:scale(.72)}
:root[data-style="gradient-feed"] #bmAction svg.ic{stroke-width:2.6;width:28px;height:28px}

/* les projets en ronds, avec l'anneau en dégradé quand il se passe quelque chose */
:root[data-style="gradient-feed"] .tb-histoires,
:root[data-style="classic-stream"] .tb-histoires{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;
  margin:-6px calc(-1 * var(--gouttiere)) 0;padding:4px var(--gouttiere) 12px;-webkit-overflow-scrolling:touch}
:root[data-style="gradient-feed"] .tb-histoires::-webkit-scrollbar,
:root[data-style="classic-stream"] .tb-histoires::-webkit-scrollbar{display:none}
:root[data-style="gradient-feed"] .tb-h{flex:none;width:72px;display:flex;flex-direction:column;align-items:center;gap:5px;
  text-decoration:none;color:var(--texte);background:none;border:0;padding:0;font:inherit;cursor:pointer}
:root[data-style="gradient-feed"] .tb-h-rond{width:68px;height:68px;border-radius:50%;padding:3px;display:block;
  background:var(--trait-fort)}
:root[data-style="gradient-feed"] .tb-h.p-envoye .tb-h-rond,
:root[data-style="gradient-feed"] .tb-h.p-ouvert .tb-h-rond{background:var(--or)}
:root[data-style="gradient-feed"] .tb-h-rond img,:root[data-style="gradient-feed"] .tb-h-rond i{width:100%;height:100%;
  border-radius:50%;object-fit:cover;display:grid;place-items:center;border:3px solid var(--fond);background:var(--surface-3);
  font-style:normal;font-weight:700;font-size:1.05rem;color:var(--texte-doux)}
:root[data-style="gradient-feed"] .tb-h-nouveau .tb-h-rond{background:none;border:1px solid var(--trait-fort);padding:0;
  display:grid;place-items:center}
:root[data-style="gradient-feed"] .tb-h-nouveau .tb-h-rond svg.ic{width:28px;height:28px;stroke-width:1.8}
:root[data-style="gradient-feed"] .tb-h small{font-size:.72rem;max-width:72px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--texte)}

/* le contenu bord à bord, séparé par un filet */
:root[data-style="gradient-feed"] .tb-page{gap:0}
:root[data-style="gradient-feed"] .tb-tete h1{font-size:1.25rem;margin:2px 0 10px}
:root[data-style="gradient-feed"] .tb-haut{gap:0}
:root[data-style="gradient-feed"] .tb-carte,
:root[data-style="gradient-feed"] .section .card{margin-inline:calc(-1 * var(--gouttiere));border-radius:0;border:0;
  border-top:1px solid var(--trait);background:var(--fond);box-shadow:none;padding:16px var(--gouttiere)}
:root[data-style="gradient-feed"] .tb-carte h2{font-size:1rem;font-weight:700}
:root[data-style="gradient-feed"] .tb-carte h2>.ic{color:var(--texte)}
:root[data-style="gradient-feed"] .tb-liste{gap:0}
:root[data-style="gradient-feed"] .tb-action,:root[data-style="gradient-feed"] .tb-projet,
:root[data-style="gradient-feed"] .tb-livraison{background:transparent;border:0;border-radius:0;padding:10px 0;box-shadow:none}
:root[data-style="gradient-feed"] .tb-a-ic{flex-basis:44px;height:44px;border-radius:50%}
:root[data-style="gradient-feed"] .n-rouge .tb-a-ic{box-shadow:0 0 0 2px var(--fond),0 0 0 3.5px #dc2743}

/* les projets en mosaïque carrée, comme une grille de photos */
:root[data-style="gradient-feed"] .cartes-evts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;
  margin-inline:calc(-1 * var(--gouttiere))}
:root[data-style="gradient-feed"] .carte-evt{display:block;position:relative;aspect-ratio:1;padding:0;border:0;border-radius:0;
  overflow:hidden;background:var(--surface-2);box-shadow:none}
:root[data-style="gradient-feed"] .carte-evt .ce-image,
:root[data-style="gradient-feed"] .carte-evt.sans-photo .ce-image{display:grid;position:absolute;inset:0;width:auto;height:auto;
  border-radius:0;background-color:var(--surface-2)}
:root[data-style="gradient-feed"] .carte-evt .ce-corps,
:root[data-style="gradient-feed"] .carte-evt.sans-photo .ce-corps{position:absolute;left:0;right:0;bottom:0;padding:22px 7px 6px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));color:#fff}
:root[data-style="gradient-feed"] .carte-evt .ce-corps b{font-size:.78rem;font-weight:700;line-height:1.2;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#fff}
:root[data-style="gradient-feed"] .carte-evt .ce-type,:root[data-style="gradient-feed"] .carte-evt .ce-bas{display:none}
:root[data-style="gradient-feed"] .carte-evt>.ce-statut{position:absolute;top:6px;left:6px;font-size:.55rem;padding:2px 7px;
  background:rgba(0,0,0,.55);color:#fff;border:0}

/* listes (clients, journal…) : sans cadre, photo de profil cerclée */
:root[data-style="gradient-feed"] .liste-lignes{border:0;background:var(--fond)}
:root[data-style="gradient-feed"] .ligne{border-bottom:0;padding:10px var(--gouttiere)}
:root[data-style="gradient-feed"] .ligne .avatar{width:48px;height:48px}

/* puces de filtre : pastilles grises, la choisie en noir (blanc la nuit) */
:root[data-style="gradient-feed"] .chip{background:var(--surface-3);border:0;color:var(--texte);font-weight:600}
:root[data-style="gradient-feed"] .chip.on{background:var(--texte);color:var(--fond)}
:root[data-style="gradient-feed"] .chip.on em{background:var(--fond);color:var(--texte)}

/* barre du bas : icônes seules, la page ouverte en trait épais */
:root[data-style="gradient-feed"] .nav-bas:not([hidden]){background:var(--fond);backdrop-filter:none;border-top:1px solid var(--trait);
  padding-top:2px}
:root[data-style="gradient-feed"] .nav-bas a,:root[data-style="gradient-feed"] .nav-bas button{min-height:50px;justify-content:center;color:var(--texte)}
:root[data-style="gradient-feed"] .nav-bas .nb-label{display:none}
:root[data-style="gradient-feed"] .nav-bas a::after,:root[data-style="gradient-feed"] .nav-bas button::after{display:none}
:root[data-style="gradient-feed"] .nav-bas svg.ic{width:26px;height:26px;stroke-width:1.7}
:root[data-style="gradient-feed"] .nav-bas a.on svg.ic,:root[data-style="gradient-feed"] .nav-bas button.on svg.ic{stroke-width:2.7;color:var(--texte)}
:root[data-style="gradient-feed"] .nav-bas em.pastille-nb{top:6px;background:#ff3040}


/* ─────────────────────────────────────────────────────────────────────────
   CLASSIC STREAM — à la manière des grands réseaux :
   titre bleu en gras, boutons ronds gris, rubriques en onglets SOUS la barre
   du haut, projets en cartes verticales, contenu en « fil » de cartes
   pleine largeur séparées par un fond gris.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-style="classic-stream"] .barre-mobile{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:0;box-shadow:none;margin-bottom:0;min-height:56px}
:root[data-style="classic-stream"] .bm-titre b{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--gold)}
:root[data-style="classic-stream"] .bm-titre span{display:none}
:root[data-style="classic-stream"] .barre-mobile .btn.icone{width:40px;height:40px;border:0;border-radius:50%;
  background:var(--surface-3);color:var(--texte)}
:root[data-style="classic-stream"] #btnMenu{background:transparent}
:root[data-style="classic-stream"] #bmAction{background:var(--surface-3);color:var(--texte);box-shadow:none}

/* les rubriques passent en haut, juste sous le titre, en icônes */
:root[data-style="classic-stream"] .nav-bas:not([hidden]){top:calc(56px + env(safe-area-inset-top));bottom:auto;z-index:69;
  background:var(--surface);backdrop-filter:none;border-top:0;border-bottom:1px solid var(--trait);padding:0;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}
:root[data-style="classic-stream"] .nav-bas a,:root[data-style="classic-stream"] .nav-bas button{min-height:48px;
  justify-content:center;color:var(--texte-doux);padding:0}
:root[data-style="classic-stream"] .nav-bas .nb-label{display:none}
:root[data-style="classic-stream"] .nav-bas a::after,:root[data-style="classic-stream"] .nav-bas button::after{
  top:auto;bottom:0;left:8px;right:8px;width:auto;height:3px;margin:0;border-radius:3px 3px 0 0;z-index:1}
:root[data-style="classic-stream"] .nav-bas a.on::after,:root[data-style="classic-stream"] .nav-bas button.on::after{background:var(--gold)}
:root[data-style="classic-stream"] .nav-bas svg.ic{width:26px;height:26px}
:root[data-style="classic-stream"] .nav-bas a.on,:root[data-style="classic-stream"] .nav-bas a.on svg.ic{color:var(--gold)}
:root[data-style="classic-stream"] .nav-bas em.pastille-nb{top:4px}
/* la page commence sous les onglets ; plus rien à réserver en bas */
:root[data-style="classic-stream"] .main{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
:root[data-style="classic-stream"] .barre-mobile{box-sizing:border-box;height:calc(56px + env(safe-area-inset-top));
  min-height:0;margin-bottom:60px}
:root[data-style="classic-stream"] .tabs{top:calc(104px + env(safe-area-inset-top))!important}
:root[data-style="classic-stream"] .barre-enregistrer{bottom:calc(12px + env(safe-area-inset-bottom))!important}
:root[data-style="classic-stream"] #toasts{bottom:calc(16px + env(safe-area-inset-bottom))}

/* le « fil » : cartes pleine largeur, fond gris entre elles */
:root[data-style="classic-stream"] .tb-page,:root[data-style="classic-stream"] .tb-haut{gap:8px}
:root[data-style="classic-stream"] .tb-tete{display:none}
:root[data-style="classic-stream"] .tb-carte,
:root[data-style="classic-stream"] .section .card{margin-inline:calc(-1 * var(--gouttiere));border-radius:0;border:0;
  box-shadow:none;background:var(--surface);padding:14px var(--gouttiere)}
:root[data-style="classic-stream"] .tb-carte h2{font-size:1.06rem;font-weight:700}
:root[data-style="classic-stream"] .tb-carte h2>.ic{color:var(--gold)}
:root[data-style="classic-stream"] .tb-liste{gap:2px}
:root[data-style="classic-stream"] .tb-action,:root[data-style="classic-stream"] .tb-projet,
:root[data-style="classic-stream"] .tb-livraison{background:transparent;border:0;border-radius:8px;padding:9px 6px;box-shadow:none}
:root[data-style="classic-stream"] .tb-action:active,:root[data-style="classic-stream"] .tb-projet:active{background:var(--surface-2)}
:root[data-style="classic-stream"] .tb-a-ic{flex-basis:40px;height:40px;border-radius:50%}
:root[data-style="classic-stream"] .n-rouge{box-shadow:none}

/* projets en cartes verticales avec la photo, la première pour en créer un */
:root[data-style="classic-stream"] .tb-histoires{gap:8px;margin:0 calc(-1 * var(--gouttiere));padding:12px var(--gouttiere);
  background:var(--surface)}
:root[data-style="classic-stream"] .tb-h{flex:none;width:104px;height:170px;border-radius:12px;overflow:hidden;position:relative;
  display:block;text-decoration:none;background:var(--surface-3);border:0;padding:0;font:inherit;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--trait)}
:root[data-style="classic-stream"] .tb-h-rond{position:absolute;inset:0;display:block}
:root[data-style="classic-stream"] .tb-h-rond img{width:100%;height:100%;object-fit:cover;display:block}
:root[data-style="classic-stream"] .tb-h-rond i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  font-weight:800;font-size:1.6rem;color:var(--texte-faible)}
:root[data-style="classic-stream"] .tb-h small{position:absolute;left:0;right:0;bottom:0;padding:24px 8px 8px;color:#fff;
  font-size:.76rem;font-weight:700;line-height:1.2;text-align:left;background:linear-gradient(180deg,transparent,rgba(0,0,0,.65));
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:root[data-style="classic-stream"] .tb-h.p-envoye::before{content:"";position:absolute;top:8px;left:8px;z-index:1;width:30px;height:30px;
  border-radius:50%;border:3px solid var(--gold);background:var(--surface)}
:root[data-style="classic-stream"] .tb-h-nouveau{background:var(--surface)}
:root[data-style="classic-stream"] .tb-h-nouveau .tb-h-rond{bottom:auto;height:110px;background:var(--surface-3)}
:root[data-style="classic-stream"] .tb-h-nouveau .tb-h-rond svg.ic{position:absolute;left:50%;bottom:-18px;margin-left:-18px;
  width:36px;height:36px;padding:7px;border-radius:50%;background:var(--gold);color:#fff;border:3px solid var(--surface);box-sizing:border-box}
:root[data-style="classic-stream"] .tb-h-nouveau small{background:none;color:var(--texte);text-align:center;padding-bottom:12px}

/* listes : rangées blanches pleine largeur */
:root[data-style="classic-stream"] .liste-lignes{margin-inline:calc(-1 * var(--gouttiere));border:0;border-radius:0;background:var(--surface)}
:root[data-style="classic-stream"] .ligne{border-bottom-color:var(--trait-doux)}
:root[data-style="classic-stream"] .cartes-evts{gap:8px}
:root[data-style="classic-stream"] .carte-evt{margin-inline:calc(-1 * var(--gouttiere));border-radius:0;border:0;background:var(--surface);
  box-shadow:none;padding:10px var(--gouttiere)}
:root[data-style="classic-stream"] .carte-evt .ce-image{border-radius:8px}
:root[data-style="classic-stream"] .chip{background:var(--surface-3);border:0;color:var(--texte);font-weight:600}
:root[data-style="classic-stream"] .chip.on{background:var(--or-voile-2);color:var(--gold)}


/* ─────────────────────────────────────────────────────────────────────────
   EMERALD CHAT — à la manière des messageries :
   barre du haut colorée, tout en « discussions » (rangées avec un rond à
   gauche, sans cadre), puces de filtre vertes, bouton d'ajout flottant en
   bas à droite, barre du bas avec la page ouverte dans une pastille.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-style="emerald-chat"] .barre-mobile{background:#008069;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:0;min-height:56px}
:root[data-style="emerald-chat"][data-theme="sombre"] .barre-mobile{background:#202c33;color:var(--texte)}
:root[data-style="emerald-chat"] .bm-titre b{font-size:1.32rem;font-weight:600;color:inherit}
:root[data-style="emerald-chat"] .bm-titre span{color:inherit;opacity:.8;letter-spacing:0}
:root[data-style="emerald-chat"] .barre-mobile .btn.icone,:root[data-style="emerald-chat"] .barre-mobile .btn{border:0;background:transparent;
  color:inherit;box-shadow:none}
:root[data-style="emerald-chat"] .barre-mobile .hamburger i{background:currentColor}
:root[data-style="emerald-chat"] #temoinMobile i{background:#25d366}

/* le bouton « + » devient un bouton flottant en bas à droite */
:root[data-style="emerald-chat"] #bmAction:not([hidden]){position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:85;width:56px;height:56px;border-radius:16px;background:#25d366;color:#0b141a;
  box-shadow:0 4px 12px rgba(0,0,0,.25)}
:root[data-style="emerald-chat"][data-theme="sombre"] #bmAction:not([hidden]){background:#21c063}
:root[data-style="emerald-chat"] #bmAction svg.ic{width:26px;height:26px;stroke-width:2.2}

/* tout en « discussions » : sans cadres, un rond à gauche, un filet fin */
:root[data-style="emerald-chat"] .tb-page{gap:4px}
:root[data-style="emerald-chat"] .tb-haut{gap:4px}
:root[data-style="emerald-chat"] .tb-tete h1{font-size:1.15rem;font-weight:600;color:var(--texte-doux);margin:0 0 4px}
:root[data-style="emerald-chat"] .tb-carte,
:root[data-style="emerald-chat"] .section .card{margin-inline:calc(-1 * var(--gouttiere));border:0;border-radius:0;
  background:transparent;box-shadow:none;padding:8px 0 4px}
/* 5.61 : une carte ordinaire garde sa marge intérieure (le texte ne touche pas le bord) */
:root[data-style="emerald-chat"] .section .card:not(.tb-carte){padding:12px var(--gouttiere)}
:root[data-style="emerald-chat"] .tb-carte h2{padding:0 var(--gouttiere);margin-bottom:4px;font-size:.86rem;font-weight:600;color:var(--gold)}
:root[data-style="emerald-chat"] .tb-carte h2>.ic{display:none}
:root[data-style="emerald-chat"] .tb-carte h2 em{background:#25d366;color:#0b141a}
:root[data-style="emerald-chat"] .tb-carte>p,:root[data-style="emerald-chat"] .tb-carte>div:not(.tb-liste){padding-inline:var(--gouttiere)}
:root[data-style="emerald-chat"] .tb-liste{gap:0}
:root[data-style="emerald-chat"] .tb-action,:root[data-style="emerald-chat"] .tb-projet,
:root[data-style="emerald-chat"] .tb-livraison{background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:10px var(--gouttiere);gap:14px;position:relative}
:root[data-style="emerald-chat"] .tb-action::after,:root[data-style="emerald-chat"] .tb-projet::after,
:root[data-style="emerald-chat"] .tb-livraison::after{content:"";position:absolute;left:calc(var(--gouttiere) + 62px);right:0;bottom:0;
  height:1px;background:var(--trait)}
:root[data-style="emerald-chat"] .tb-action:active,:root[data-style="emerald-chat"] .tb-projet:active{background:var(--surface-2)}
:root[data-style="emerald-chat"] .tb-a-ic{flex-basis:48px;height:48px;border-radius:50%}
:root[data-style="emerald-chat"] .tb-a-txt b,:root[data-style="emerald-chat"] .tb-p-txt b{font-size:1rem;font-weight:500}
:root[data-style="emerald-chat"] .tb-action>svg.ic:last-child{display:none}
/* un rond avec les initiales devant chaque projet en cours, comme un contact */
:root[data-style="emerald-chat"] .tb-projet::before{content:"";flex:0 0 48px;height:48px;border-radius:50%;
  background:var(--surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238696a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 8'/%3E%3C/svg%3E") center/24px no-repeat}
:root[data-style="emerald-chat"] .tb-p-statut{background:transparent!important;color:var(--texte-faible)!important;padding:0;font-weight:400}
:root[data-style="emerald-chat"] .p-envoye .tb-p-statut{color:#21c063!important;font-weight:600}

/* liste des projets : chaque projet comme une discussion, photo en rond */
:root[data-style="emerald-chat"] .cartes-evts{gap:0;margin-inline:calc(-1 * var(--gouttiere))}
:root[data-style="emerald-chat"] .carte-evt{border:0;border-radius:0;background:transparent;box-shadow:none;padding:10px var(--gouttiere);
  position:relative}
:root[data-style="emerald-chat"] .carte-evt::after{content:"";position:absolute;left:calc(var(--gouttiere) + 66px);right:0;bottom:0;height:1px;
  background:var(--trait)}
:root[data-style="emerald-chat"] .carte-evt .ce-image,:root[data-style="emerald-chat"] .carte-evt.sans-photo .ce-image{
  width:52px;height:52px;border-radius:50%}
:root[data-style="emerald-chat"] .carte-evt .ce-corps b{font-size:1rem;font-weight:500}

/* clients et autres listes : pareil */
:root[data-style="emerald-chat"] .liste-lignes{margin-inline:calc(-1 * var(--gouttiere));border:0;border-radius:0;background:transparent}
:root[data-style="emerald-chat"] .ligne{border-bottom:0;padding:10px var(--gouttiere);position:relative}
:root[data-style="emerald-chat"] .ligne::after{content:"";position:absolute;left:calc(var(--gouttiere) + 62px);right:0;bottom:0;height:1px;
  background:var(--trait)}
:root[data-style="emerald-chat"] .ligne .avatar{width:48px;height:48px;font-size:1rem}
:root[data-style="emerald-chat"] .ligne .pastille-icone{width:48px;height:48px;border-radius:50%;border:0}

/* puces de filtre vertes */
:root[data-style="emerald-chat"] .chip{background:var(--surface-2);border:0;color:var(--texte-doux);font-weight:500}
:root[data-style="emerald-chat"][data-theme="clair"] .chip{background:#f0f2f5}
:root[data-style="emerald-chat"] .chip.on{background:#d8fdd2;color:#15603e}
:root[data-style="emerald-chat"][data-theme="sombre"] .chip.on{background:#103529;color:#d8fdd2}

/* barre du bas : la page ouverte dans une pastille verte */
:root[data-style="emerald-chat"] .nav-bas:not([hidden]){background:var(--surface);backdrop-filter:none;border-top:1px solid var(--trait)}
:root[data-style="emerald-chat"][data-theme="sombre"] .nav-bas:not([hidden]){background:#0b141a}
:root[data-style="emerald-chat"] .nav-bas a,:root[data-style="emerald-chat"] .nav-bas button{color:var(--texte)}
:root[data-style="emerald-chat"] .nav-bas a.on::after,:root[data-style="emerald-chat"] .nav-bas button.on::after{background:#d8fdd2;width:60px;
  margin-left:-30px;height:32px;top:3px}
:root[data-style="emerald-chat"][data-theme="sombre"] .nav-bas a.on::after{background:#103529}
:root[data-style="emerald-chat"] .nav-bas a.on,:root[data-style="emerald-chat"] .nav-bas a.on svg.ic{color:var(--texte)}
:root[data-style="emerald-chat"] .nav-bas a.on .nb-label{color:var(--texte);font-weight:700}
:root[data-style="emerald-chat"] .nav-bas em.pastille-nb{background:#25d366;color:#0b141a}

/* ── commun aux trois thèmes, page d'un projet ──────────────────────────── */
/* les onglets du projet sur une seule ligne qui glisse, au lieu d'une grille */
:root[data-style] .tabs{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;
  overflow-x:auto;scrollbar-width:none;gap:6px}
:root[data-style] .tabs .tab{flex:none!important;width:auto!important;text-transform:none!important;letter-spacing:0!important;
  font-size:.86rem!important;font-weight:600}
:root[data-style] .tabs .tab svg.ic{display:none}
:root[data-style] .tabs .tab-plus{position:static!important;margin-left:0!important}
:root[data-style] .tabs .tab::first-letter{text-transform:uppercase}
:root[data-style] .barre-mobile .bouton-retour{border:0!important;background:transparent!important;box-shadow:none!important;padding-inline:6px}
/* le bandeau de livraison : le texte sur toute la largeur, les boutons dessous */
:root[data-style] .rp-livraison{flex-wrap:wrap}
:root[data-style] .rp-livraison>span{flex:1 1 calc(100% - 40px)}
:root[data-style] .rp-livraison>.btn,:root[data-style] .rp-livraison>div{margin-left:32px}

:root[data-style="gradient-feed"] .tabs{background:var(--fond)!important;backdrop-filter:none!important;
  border-bottom:1px solid var(--trait)!important;padding:0 8px!important;gap:0}
:root[data-style="gradient-feed"] .tabs .tab{border:0!important;border-radius:0!important;background:none!important;
  color:var(--texte-faible)!important;padding:13px 14px!important;box-shadow:none!important}
:root[data-style="gradient-feed"] .tabs .tab.on{color:var(--texte)!important;box-shadow:inset 0 -1.5px 0 var(--texte)!important}
:root[data-style="classic-stream"] .tabs{background:var(--surface)!important;backdrop-filter:none!important;border-bottom:0!important}
:root[data-style="classic-stream"] .tabs .tab{border:0!important;border-radius:18px!important;background:var(--surface-3)!important;
  color:var(--texte)!important;padding:8px 14px!important;box-shadow:none!important}
:root[data-style="classic-stream"] .tabs .tab.on{background:var(--or-voile-2)!important;color:var(--gold)!important}
:root[data-style="emerald-chat"] .tabs{background:var(--fond)!important;backdrop-filter:none!important;border-bottom:1px solid var(--trait)!important}
:root[data-style="emerald-chat"] .tabs .tab{border:0!important;border-radius:18px!important;background:var(--surface-2)!important;
  color:var(--texte-doux)!important;padding:7px 14px!important;box-shadow:none!important;font-weight:500}
:root[data-style="emerald-chat"][data-theme="clair"] .tabs .tab{background:#f0f2f5!important}
:root[data-style="emerald-chat"] .tabs .tab.on{background:#d8fdd2!important;color:#15603e!important}
:root[data-style="emerald-chat"][data-theme="sombre"] .tabs .tab.on{background:#103529!important;color:#d8fdd2!important}

/* Emerald : le bouton « Retour » se lit sur la barre verte ; de la place sous le bouton flottant */
:root[data-style="emerald-chat"] .barre-mobile .bouton-retour{background:transparent!important;color:inherit!important;border:0!important}
:root[data-style="emerald-chat"] .main{padding-bottom:calc(160px + env(safe-area-inset-bottom))}

/* 5.61 : ce qui va « bord à bord » prend vraiment toute la largeur
   (sinon la largeur maximale le décalait à gauche et il sortait de l'écran) */
:root[data-style] .tb-carte,:root[data-style] .section .card,:root[data-style] .liste-lignes,
:root[data-style] .cartes-evts,:root[data-style] .carte-evt,:root[data-style] .tb-histoires{max-width:none}
:root[data-style] .liste-lignes.compacte{margin-inline:0}

}  /* fin téléphone */

/* fenêtres du bas (« Ajouter »…) : des séparateurs aux couleurs du thème */
:root[data-style] .feuille-liste button{border-bottom-color:var(--trait)}