/* cercle-app.css : ajustements propres à « Mon Cercle » (par-dessus app.css d'Agenda Créa) */

/* Pas de rail années/mois : deux colonnes sur ordinateur */
@media (min-width: 1180px) {
  .shell { grid-template-columns: 248px minmax(0, 1fr); }
  .main-col { max-width: 1180px; width: 100%; margin: 0 auto; }
}
@media (min-width: 1500px) { .shell { grid-template-columns: 264px minmax(0, 1fr); } }

/* Logo texte */
.side-brand .sb-name { display: block; }
.app-logo { width: 54px; height: 54px; border-radius: 16px; display: block; margin: 0 auto 6px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.top-brand .tb-logo { width: 28px; height: 28px; border-radius: 8px; margin-right: 8px; vertical-align: middle; }
.top-brand { display: inline-flex; align-items: center; }

/* Pastille « non lus » */
.bottom-nav a, .side-link { position: relative; }
.nav-badge { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E05A6D; color: #fff; font: 700 .68rem/18px var(--sans, system-ui); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--nav-bg, #2A1F35); }
.side-link .nav-badge { position: static; margin-left: auto; box-shadow: none; }

/* Pastilles de thèmes dans les Réglages (aussi sur mobile) */
.swatches.big { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 10px; padding: 0; margin: 6px 0 14px; }
.swatches.big .swatch { width: 100%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); border: 2px solid rgba(255,255,255,.55); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.swatches.big .swatch.on { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.eyebrow { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin: 8px 0 2px; }

/* Ajout rapide : 2 colonnes sur petit écran */
@media (max-width: 420px) { #sheet .add-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hors cercle : pas de bouton « + » */
body.ce-out .bottom-nav, body.ce-out .act-btn, body.ce-out .avatar-btn { display: none !important; }
body.ce-out .top-actions .add-desktop { display: none !important; }

/* En-tête mobile : logo + nom à gauche, profil à droite */
.topbar { display: flex !important; justify-content: space-between; align-items: center; }
.topbar .top-brand { visibility: visible !important; flex-direction: row; gap: 8px; font-size: 1.25rem; text-align: left; justify-self: start; }
.topbar .top-brand .tb-logo { margin-right: 0; }
.top-actions { width: auto !important; }
@media (min-width: 1180px) { .topbar .top-brand { display: none !important; } .topbar { justify-content: flex-end; } }


/* ======================================================================
   RÉSEAU SOCIAL : fil, stories, Moments, profils, activité
   ====================================================================== */
.ce-av.xs { width: 24px; height: 24px; font-size: .64rem; border-width: 1.5px; }
.ce-av.xl { width: 86px; height: 86px; font-size: 2rem; border-width: 3px; }
.ce-av.has-ph { background-size: cover; background-position: center; color: transparent !important; }
.so-wrap { display: grid; gap: 24px; align-items: start; }
.so-feed { width: 100%; max-width: 620px; margin: 0 auto; min-width: 0; }
.so-side { display: none; }
@media (min-width: 1000px) { .so-wrap { grid-template-columns: minmax(0, 620px) 300px; justify-content: center; } .so-side { display: grid; gap: 16px; position: sticky; top: 76px; } }
.so-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 12px; }
.so-circ { display: inline-flex; align-items: center; gap: 8px; color: var(--on-bg); font-family: var(--serif); font-size: 1.7rem; font-weight: 600; line-height: 1.1; padding: 4px 0; min-height: 44px; text-align: left; }
.so-circ .ic { width: 18px; height: 18px; opacity: .7; }
.so-cn1 { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-n { font: 700 .66rem/18px var(--sans); font-style: normal; min-width: 18px; height: 18px; border-radius: 9px; text-align: center; background: var(--accent); color: #fff; padding: 0 5px; }
.so-topa { display: flex; gap: 6px; }
.so-topa .icon-btn { color: var(--on-bg); background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px; width: 42px; height: 42px; display: grid; place-items: center; }
.so-h1 { font-family: var(--serif); color: var(--on-bg); font-size: 1.5rem; margin: 4px 0 12px; }

/* Stories */
.so-stories { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 14px; margin: 0 -2px; -webkit-overflow-scrolling: touch; }
.so-stories::-webkit-scrollbar { display: none; }
.so-st { position: relative; flex: none; width: 74px; }
.so-st > button:first-child { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; color: var(--on-bg); font-size: .72rem; }
.so-st > button span:last-child { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-ring { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; padding: 3px; background: var(--glass-line); }
.so-ring.new { background: conic-gradient(from 210deg, #F9CE34, #EE2A7B, #6228D7, #F9CE34); }
.so-ring.seen { background: rgba(255,255,255,.28); }
.so-ring.mine { background: linear-gradient(135deg, var(--accent), #F9CE34); }
.so-ring.none { background: transparent; border: 2px dashed rgba(255,255,255,.35); }
.so-ring .ce-av { width: 100%; height: 100%; font-size: 1.3rem; border: 3px solid var(--bg1, #2A1F35); }
.so-st-add { position: absolute; right: 4px; top: 48px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #3897F0; color: #fff; border: 2px solid var(--bg1, #2A1F35); }
.so-st-add .ic { width: 12px; height: 12px; }

/* Composer + filtres */
.so-compose { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-bottom: 14px; border-radius: 18px; background: linear-gradient(165deg, var(--card1), var(--card2)); color: var(--ink-muted, #7a6b74); border: 1px solid var(--card-line, transparent); box-shadow: 0 8px 20px -14px rgba(0,0,0,.5); text-align: left; }
.so-compose > span:nth-child(2) { flex: 1; }
.so-cic { color: var(--accent); display: grid; }
.so-trends { display: flex; flex-wrap: wrap; gap: 6px; }
.so-trends.row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -4px 0 12px; }
.so-trends .chip { white-space: nowrap; }
.so-filter { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--on-bg); margin-bottom: 12px; }
.so-filter span { display: inline-flex; align-items: center; gap: 6px; }
.so-sep { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--on-bg-muted); font-size: .8rem; margin: 18px 0; }
.so-empty { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 32px 20px; }
.so-empty > .ic { width: 40px; height: 40px; color: var(--accent); }
.so-empty h3 { font-family: var(--serif); font-size: 1.35rem; }

/* Publication */
.so-post { background: linear-gradient(165deg, var(--card1), var(--card2)); color: var(--ink); border-radius: 20px; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--card-line, transparent); box-shadow: 0 12px 28px -18px rgba(0,0,0,.55); }
.so-ph { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 10px 12px; }
.so-who { display: flex; align-items: center; gap: 10px; text-align: left; color: inherit; min-height: 40px; }
.so-who span { display: flex; flex-direction: column; line-height: 1.15; }
.so-who small { font-size: .74rem; opacity: .65; }
.so-menu { color: inherit; opacity: .7; }
.so-big { padding: 2px 16px 10px; font-size: 1.12rem; line-height: 1.45; word-wrap: break-word; }
.so-media { position: relative; background: #0d0b0e; aspect-ratio: var(--ar, 1); max-height: 78vh; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.so-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.so-track::-webkit-scrollbar { display: none; }
.so-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; }
.so-slide img, .so-slide video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .3s; }
.so-slide img.ok, .so-slide video[src] { opacity: 1; }
.so-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.so-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.so-dots i.on { background: #fff; }
.so-count { position: absolute; top: 10px; right: 10px; font-size: .72rem; font-weight: 600; color: #fff; background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 10px; }
.so-burst { position: absolute; left: 50%; top: 50%; font-size: 90px; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 20px rgba(0,0,0,.35)); }
.so-burst.go { animation: soBurst .9s ease forwards; }
@keyframes soBurst { 15% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(.95); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(.9); } }
.so-vplay { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; transition: opacity .2s; }
.so-vplay .ic { width: 30px; height: 30px; }
.so-vplay.hide { opacity: 0; }
.so-vmute { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; }
.so-vmute .ic { width: 17px; height: 17px; }
.so-acts { display: flex; align-items: center; gap: 2px; padding: 6px 8px 0; }
.so-act { display: inline-flex; align-items: center; gap: 5px; min-height: 42px; min-width: 42px; padding: 0 8px; border-radius: 12px; color: inherit; font-weight: 600; font-size: .9rem; transition: transform .12s; }
.so-act .ic { width: 25px; height: 25px; }
.so-act:active { transform: scale(.88); }
.so-act.end { margin-left: auto; }
.so-like.on .ic { color: #ED4956; fill: #ED4956; }
.so-act.end.on .ic { fill: currentColor; }
.so-emo { font-size: 1.35rem; line-height: 1; }
.so-likes { display: flex; align-items: center; gap: 6px; padding: 0 16px; font-size: .86rem; font-weight: 600; color: inherit; text-align: left; min-height: 28px; }
.so-top { letter-spacing: -2px; }
.so-cap { padding: 4px 16px 0; font-size: .95rem; line-height: 1.45; word-wrap: break-word; }
.so-more { display: block; padding: 6px 16px 0; font-size: .86rem; opacity: .6; color: inherit; }
.so-cl { list-style: none; margin: 0; padding: 4px 16px 0; display: grid; gap: 3px; }
.so-c { display: flex; gap: 10px; font-size: .9rem; line-height: 1.4; }
.so-c p { margin: 0; word-wrap: break-word; }
.so-c small { font-size: .74rem; opacity: .6; }
.so-cn { font-weight: 700; color: inherit; }
.so-cl.full { max-height: 52vh; overflow-y: auto; gap: 14px; padding: 0 0 12px; }
.so-tag, .so-at { color: #3B82D6; font-weight: 600; display: inline; padding: 0; }
[data-theme] .so-post a { color: #3B82D6; }
.so-cf { display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px 16px; }
.so-cf input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; font-size: .9rem; padding: 8px 0; color: inherit; box-shadow: none !important; outline: none; }
.so-cf.big { border-top: 1px solid var(--line, rgba(0,0,0,.08)); padding: 10px 0 0; }
.so-cf.big input { background: rgba(0,0,0,.05) !important; border-radius: 22px; padding: 11px 14px; }
.so-cf-go { color: var(--accent); width: 40px; height: 40px; display: grid; place-items: center; }
.so-cf-go .ic { width: 20px; height: 20px; }
.so-pick { position: fixed; z-index: 120; display: flex; gap: 2px; padding: 6px 8px; border-radius: 30px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: soPop .18s ease; }
.so-pick button { font-size: 1.7rem; width: 44px; height: 44px; border-radius: 50%; transition: transform .12s; }
.so-pick button:hover, .so-pick button.on { transform: scale(1.25); background: rgba(0,0,0,.06); }
@keyframes soPop { from { transform: scale(.6); opacity: 0; } }
.so-who-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.so-who-list li { display: flex; align-items: center; gap: 10px; }
.so-who-list span { margin-left: auto; font-size: 1.2rem; }
.so-opts { display: grid; gap: 8px; }
.so-opts .btn { justify-content: flex-start; }

/* Nouvelle publication */
.so-nh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.so-nh small { opacity: .6; }
.so-new textarea { width: 100%; font-size: 1.05rem; }
.so-prev { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 8px 0; }
.so-pv { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #000; }
.so-pv img, .so-pv video { width: 100%; height: 100%; object-fit: cover; }
.so-pv button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; }
.so-pv button .ic { width: 13px; height: 13px; }
.so-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0; }

/* Story : création */
.so-wide { width: 100%; justify-content: center; }
.so-or { text-align: center; opacity: .55; margin: 10px 0; font-size: .85rem; }
.so-stp { aspect-ratio: 9 / 12; max-height: 42vh; border-radius: 18px; background: linear-gradient(160deg, var(--g1), var(--g2)); display: grid; place-items: center; padding: 20px; }
.so-stp textarea { width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff; text-align: center; font: 700 1.5rem/1.3 var(--sans); resize: none; outline: none; }
.so-stp textarea::placeholder { color: rgba(255,255,255,.7); }
.so-bgs { display: flex; gap: 8px; justify-content: center; margin: 10px 0; }
.so-bgs button { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(160deg, var(--g1), var(--g2)); border: 2px solid transparent; }
.so-bgs button.on { border-color: var(--ink); transform: scale(1.12); }

/* Story : lecteur plein écran */
.so-sv { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 8px) 0 env(safe-area-inset-bottom); user-select: none; -webkit-user-select: none; }
@media (min-width: 700px) { .so-sv { padding-left: calc(50vw - 230px); padding-right: calc(50vw - 230px); background: rgba(10,8,12,.96); } }
.so-svbars { display: flex; gap: 4px; padding: 0 10px; }
.so-svbars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.so-svbars b { display: block; height: 100%; background: #fff; }
.so-sv header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; position: relative; z-index: 3; }
.so-svw { display: flex; align-items: center; gap: 8px; }
.so-svw small { opacity: .7; }
.so-svx { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; }
.so-svm { flex: 1; display: grid; place-items: center; overflow: hidden; border-radius: 12px; margin: 0 4px; min-height: 0; }
.so-svm img, .so-svm video { width: 100%; height: 100%; object-fit: contain; }
.so-svt { width: 100%; height: 100%; display: grid; place-items: center; padding: 30px; background: linear-gradient(160deg, var(--g1), var(--g2)); }
.so-svt p { font: 700 1.7rem/1.3 var(--sans); text-align: center; white-space: pre-wrap; word-wrap: break-word; }
.so-svp, .so-svn { position: absolute; top: 90px; bottom: 110px; z-index: 2; }
.so-svp { left: 0; width: 35%; } .so-svn { right: 0; width: 65%; }
@media (min-width: 700px) { .so-svp { left: calc(50vw - 230px); width: 160px; } .so-svn { right: calc(50vw - 230px); width: 300px; } }
.so-sv footer { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.so-sv footer > button { display: inline-flex; align-items: center; gap: 6px; color: #fff; padding: 8px 12px; border-radius: 20px; background: rgba(255,255,255,.12); }
.so-svr { display: flex; flex: 1; gap: 6px; min-width: 200px; }
.so-svr input { flex: 1; background: transparent !important; border: 1px solid rgba(255,255,255,.5) !important; border-radius: 24px; color: #fff !important; padding: 10px 14px; }
.so-svr button { color: #fff; width: 42px; display: grid; place-items: center; }
.so-svq { display: flex; gap: 2px; }
.so-svq button { font-size: 1.5rem; width: 40px; height: 40px; }

/* Moments (Reels) */
body[data-page="m-cercle"] .so-reels { margin: 0 -16px; height: calc(100dvh - var(--nav-h, 76px) - 240px); min-height: 420px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; border-radius: 0; }
.so-reels::-webkit-scrollbar { display: none; }
.so-reel { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background: #000; overflow: hidden; color: #fff; }
@media (min-width: 700px) { body[data-page="m-cercle"] .so-reels { max-width: 440px; margin: 0 auto; border-radius: 22px; } }
.so-reel img, .so-reel video { width: 100%; height: 100%; object-fit: cover; }
.so-rtap { position: absolute; inset: 0; }
.so-rinfo { position: absolute; left: 0; right: 70px; bottom: 0; padding: 60px 14px 18px; background: linear-gradient(transparent, rgba(0,0,0,.65)); pointer-events: none; }
.so-rinfo .so-who, .so-rinfo a, .so-rinfo button { pointer-events: auto; color: #fff; }
.so-rinfo .so-who small { opacity: .75; margin-left: 4px; }
.so-rinfo p { margin: 8px 0 0; font-size: .92rem; line-height: 1.4; }
.so-ract { position: absolute; right: 6px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.so-ract .so-act { flex-direction: column; color: #fff; gap: 2px; font-size: .78rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.so-ract .so-act .ic { width: 30px; height: 30px; }

/* Profil */
.so-prof { max-width: 760px; margin: 0 auto; }
.so-ph2 { display: flex; align-items: center; gap: 22px; color: var(--on-bg); margin: 4px 0 10px; }
.so-bigav { display: inline-grid; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #F9CE34); }
.so-stats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.so-stats b { display: block; font-size: 1.15rem; }
.so-stats small { font-size: .74rem; opacity: .75; }
.so-pname { color: var(--on-bg); margin-bottom: 12px; }
.so-pname h1 { font-family: var(--serif); font-size: 1.5rem; display: flex; align-items: center; gap: 8px; }
.so-pname p { margin: 4px 0 0; line-height: 1.4; }
.so-badge { font: 600 .66rem var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 10px; background: var(--glass); border: 1px solid var(--glass-line); }
.so-pact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.so-pact .btn { justify-content: center; }
.so-ptabs { display: flex; border-top: 1px solid var(--glass-line); margin-bottom: 2px; }
.so-ptabs button { flex: 1; display: grid; place-items: center; min-height: 46px; color: var(--on-bg); opacity: .55; border-top: 2px solid transparent; margin-top: -1px; }
.so-ptabs button.on { opacity: 1; border-top-color: var(--on-bg); }
.so-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-bottom: 16px; }
.so-gi { position: relative; aspect-ratio: 1; background: rgba(0,0,0,.25); overflow: hidden; }
.so-gi img, .so-gi video { width: 100%; height: 100%; object-fit: cover; display: block; }
.so-gb { position: absolute; top: 6px; left: 6px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.so-gb.r { left: auto; right: 6px; }
.so-gb .ic { width: 18px; height: 18px; }
.so-pad { padding: 30px 10px; color: var(--on-bg); }
.so-pfa { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }

/* Activité, membres, cercles */
.so-act-list { list-style: none; padding: 6px; display: grid; }
.so-act-list li.new { background: rgba(199,122,147,.12); border-radius: 14px; }
.so-al { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; text-align: left; color: inherit; font-size: .9rem; line-height: 1.35; }
.so-al > span { flex: 1; }
.so-al small { opacity: .6; }
.so-ath { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: none; }
.so-mem { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 2px; }
.so-mem button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 4px; color: inherit; text-align: left; border-radius: 10px; }
.so-mem button:hover { background: rgba(0,0,0,.04); }
.so-up { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .88rem; }
.so-circs { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.so-circs li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.04); }
.so-circs li.on { outline: 2px solid var(--accent); }
.so-circs li > .ic { margin-left: auto; color: var(--accent); }
.so-circs button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; color: inherit; }
.so-circs span:not(.so-ci) { display: flex; flex-direction: column; }
.so-circs small { opacity: .6; }
.so-ci { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #7E6BB0); color: #fff; flex: none; }
.act-btn, .msg-btn { position: relative; }
.act-btn .nav-badge, .msg-btn .nav-badge { top: 2px; right: 2px; }
.center { text-align: center; }
.so-new { display: block; }
.so-new .ce-err { margin: 6px 0; }
.so-since b { font-size: .95rem !important; }
.so-rinfo { right: 0 !important; padding-right: 76px !important; }
body.ce-out .act-btn, body.ce-out .msg-btn { display: none; }
.so-al > .ce-av, .so-who-list .ce-av, .so-mem .ce-av { flex: 0 0 auto; width: 34px !important; height: 34px !important; }
.so-who-list .ce-av, .so-mem .ce-av { width: 28px !important; height: 28px !important; }

/* ======================================================================
   v2.1 — une seule entrée par page, « Mes cercles » au centre
   ====================================================================== */
.so-seg { max-width: 620px; margin: 0 auto 14px; }
.so-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.so-seg .ic { width: 17px; height: 17px; }
.so-nudge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.so-nudge > div:nth-child(2) { flex: 1; min-width: 180px; }
.so-nudge h3 { font-family: var(--serif); font-size: 1.2rem; margin-bottom: 2px; }
.so-nudge-av { position: relative; }
.so-nudge-plus { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
.so-nudge-plus .ic { width: 13px; height: 13px; }
.so-nudge .btn { margin-left: auto; }

/* Mes cercles */
.so-circles { max-width: 620px; margin: 0 auto; }
.so-hero { text-align: center; display: grid; justify-items: center; gap: 10px; padding: 28px 22px; margin-bottom: 16px; }
.so-hero h2 { font-family: var(--serif); font-size: 1.6rem; }
.so-hero p { max-width: 440px; line-height: 1.5; }
.so-hero-av { display: flex; }
.so-hero-av .ce-av { margin-left: -10px; } .so-hero-av .ce-av:first-child { margin-left: 0; }
.so-cclist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.so-cc { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: 20px; text-align: left; color: var(--ink); background: linear-gradient(165deg, var(--card1), var(--card2)); border: 1px solid var(--card-line, transparent); box-shadow: 0 10px 24px -16px rgba(0,0,0,.55); position: relative; }
.so-cc.cur { outline: 2px solid var(--accent); outline-offset: -2px; }
.so-cc > .ic { width: 18px; height: 18px; opacity: .45; flex: none; }
.so-cc-ic { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.15rem; background: linear-gradient(135deg, hsl(var(--h) 55% 58%), hsl(calc(var(--h) + 40) 50% 42%)); }
.so-cc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.so-cc-t b { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-cc-t small { font-size: .78rem; opacity: .65; }
.so-cc-av { display: flex; margin-top: 4px; }
.so-cc-av .ce-av { margin-left: -6px; } .so-cc-av .ce-av:first-child { margin-left: 0; }
.so-cc-cur { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.so-cc-n { position: static !important; box-shadow: none !important; }
.so-cc-acts { display: grid; gap: 10px; }
.so-big-btn { min-height: 54px; font-size: 1.02rem; justify-content: center; border-radius: 16px !important; }
.ghostish { background: var(--glass) !important; color: var(--on-bg) !important; border: 1px solid var(--glass-line) !important; }
.so-cc-hint { color: var(--on-bg-muted); margin-top: 14px; }
.so-form { display: grid; gap: 6px; }
.so-form label { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .75; margin-top: 8px; }
.so-form input { width: 100%; }
.so-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.so-kinds .chip.on { background: var(--accent); color: #fff; }
.so-code { text-transform: uppercase; letter-spacing: .3em; text-align: center; font-weight: 700; font-size: 1.3rem !important; }

/* Espaces */
.so-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .so-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .so-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.so-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; min-height: 112px; border-radius: 20px; text-align: left; color: var(--ink); background: linear-gradient(165deg, var(--card1), var(--card2)); border: 1px solid var(--card-line, transparent); box-shadow: 0 10px 24px -18px rgba(0,0,0,.55); transition: transform .12s; }
.so-tile:active { transform: scale(.97); }
.so-tile-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tc); color: #fff; margin-bottom: 4px; }
.so-tile-ic .ic { width: 20px; height: 20px; }
.so-tile b { font-size: 1rem; }
.so-tile small { font-size: .78rem; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Créer */
.add-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.add-grid.two .add-opt { min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.add-grid.two .add-opt small { font-size: .74rem; opacity: .8; }
.avatar-btn.on { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 50%; }
.top-brand .tb-name { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ce-out .top-actions { display: none !important; }

/* ======================================================================
   v2.2 — cercles Business
   ====================================================================== */
body.ce-fan .add-desktop { display: none !important; }
.so-pro { display: inline-block; vertical-align: middle; font: 700 .6rem/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; padding: 4px 7px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #E8B83A, #E05A6D); }
.so-types { display: grid; gap: 8px; margin-bottom: 4px; }
.so-type { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 12px 14px; border-radius: 16px; border: 2px solid rgba(0,0,0,.08); background: rgba(0,0,0,.025); color: inherit; }
.so-type b { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.so-type b .ic { width: 18px; height: 18px; color: var(--accent); }
.so-type small { grid-column: 1; font-size: .8rem; opacity: .7; line-height: 1.35; }
.so-type .so-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 800; font-size: .85rem; white-space: nowrap; }
.so-type.on { border-color: var(--accent); background: rgba(199,122,147,.1); }
.so-paywall { margin-bottom: 14px; display: grid; gap: 8px; border: 2px solid #E8B83A; }
.so-paywall h3 { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 1.25rem; }
.so-paywall h3 .ic { color: #E8B83A; }
.so-prohead { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.so-prohead > div { flex: 1; min-width: 160px; }
.so-prohead h2 { font-family: var(--serif); font-size: 1.3rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.so-prohead small { opacity: .65; }
.so-prohead p { margin: 6px 0 0; }
.so-prohead.big { margin-top: 4px; }
.so-hero-pro { display: flex; align-items: center; gap: 8px; text-align: left; padding: 10px 12px; border-radius: 12px; background: rgba(232,184,58,.15); }
.so-hero-pro .ic { color: #D4A537; flex: none; }
.so-jpv { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.04); }
.so-jpv:empty { display: none; }
.so-jpv span:last-child { display: flex; flex-direction: column; gap: 2px; }
.so-jpv small { opacity: .7; font-size: .8rem; }
#sheet .chip { color: var(--ink) !important; background: rgba(0,0,0,.05) !important; border: 1px solid rgba(0,0,0,.08) !important; }
#sheet .chip.on { background: var(--accent) !important; color: #fff !important; }
.so-jpv span:last-child { display: initial; }
.so-jpv > span:last-child { display: flex; flex-direction: column; gap: 2px; }

/* ======================================================================
   v2.3 — Découvrir, demandes d'invitation, mise en page équilibrée
   ====================================================================== */
/* Deux largeurs seulement : colonne de lecture (680) et pages en grille (1040), toujours centrées */
.view.narrow > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.view.wide > * { max-width: 1040px; margin-left: auto; margin-right: auto; }
.view.narrow .so-wrap .so-feed, .view.narrow .so-seg { max-width: none; }
.view.narrow > .so-circles, .view.narrow > .so-prof { max-width: 680px; }
.view.narrow .so-wrap { display: block; }
@media (min-width: 1180px) {
  .main-col .view { padding-top: 8px; }
  .topbar { padding-left: 32px; padding-right: 32px; }
}
/* En-têtes de page identiques partout : titre, sous-titre, puis le contenu */
.view .page-head { margin: 6px auto 16px; align-items: center; }
.view .page-head h1 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); line-height: 1.1; }
.view .page-head .sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.view .back { margin-top: 6px; }
.so-seg { margin-bottom: 16px !important; }
.view .card + .card, .view .card + section, .view section + .card { margin-top: 16px; }
.so-h2 { font-family: var(--serif); color: var(--on-bg); font-size: 1.3rem; margin: 26px 0 10px; }
.so-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--on-bg-muted); }
/* Découvrir */
.so-xcircles { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 14px; }
.so-xcircles::-webkit-scrollbar { display: none; }
.so-xc { flex: none; width: 128px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 18px; text-align: center; color: var(--ink); background: linear-gradient(165deg, var(--card1), var(--card2)); border: 1px solid var(--card-line, transparent); }
.so-xc b { font-size: .88rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-xc small { font-size: .72rem; opacity: .65; }
.so-cc-ic.sm { width: 34px; height: 34px; border-radius: 10px; font-size: .78rem; }
.so-cc-ic.lg { width: 72px; height: 72px; border-radius: 22px; font-size: 1.5rem; }
.so-xf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 14px; flex-wrap: wrap; }
.so-xf .ic { width: 15px; height: 15px; vertical-align: -2px; margin-right: 3px; }
.so-xp .so-slide video { opacity: 1; background: #000; }
.so-reqsent { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; opacity: .7; }
.so-reqsent .ic { width: 15px; height: 15px; }
.so-cp { display: flex; align-items: center; gap: 14px; }
.so-cp h3 { font-family: var(--serif); font-size: 1.3rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.so-cp small { opacity: .65; }
.so-cp p { margin: 6px 0 0; }
.so-cp-act { margin: 14px 0; }
.so-cp-act .btn { width: 100%; justify-content: center; }
.so-cpt { padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.04); margin: 8px 0 0; font-size: .9rem; }
.so-cpt small { display: block; opacity: .55; font-size: .72rem; margin-top: 4px; }
/* Publication publique */
.so-pubt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 8px 0; border-radius: 14px; background: rgba(79,123,214,.08); cursor: pointer; }
.so-pubt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.so-pubt span { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; }
.so-pubt .ic { width: 17px; height: 17px; color: #4F7BD6; }
.so-pubt small { grid-column: 1 / -1; opacity: .7; font-size: .78rem; line-height: 1.35; }
.so-who small .ic { width: 12px; height: 12px; vertical-align: -1px; margin-right: 2px; }
/* Demandes d'invitation */
.so-reqn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-bottom: 14px; border: 2px solid #4F7BD6 !important; }
.so-reqn > .ic:first-child { width: 26px; height: 26px; color: #4F7BD6; flex: none; }
.so-reqn span { flex: 1; display: flex; flex-direction: column; }
.so-reqn small { opacity: .7; font-size: .8rem; }
.so-rq-li { flex-wrap: wrap; }
.so-rq-b { display: flex; gap: 6px; margin-left: auto; }

.so-who .so-pro, .so-cc-t .so-pro, .so-cp .so-pro { display: inline-block !important; width: auto; }
.so-who small { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 3px; white-space: nowrap; }
.so-hero-pro { display: block !important; text-align: left; }
.so-hero-pro .ic { display: inline-block; vertical-align: -3px; margin-right: 6px; }

/* ======================================================================
   v2.4 — types de cercle, espaces à la carte, couverture, prise en main
   ====================================================================== */
/* Grande photo de couverture */
.sp-cover { position: relative; overflow: hidden; border-radius: 26px; min-height: 230px; margin: 4px 0 16px; display: flex; align-items: flex-end; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); isolation: isolate; }
@media (min-width: 700px) { .sp-cover { min-height: 300px; } }
.sp-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; transition: opacity .4s; }
.sp-cover > img.ok { opacity: 1; }
.sp-cover::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55)); }
.sp-emo { position: absolute; right: -10px; top: -20px; font-size: 190px; line-height: 1; opacity: .28; transform: rotate(-12deg); z-index: -2; }
.sp-cov-in { padding: 20px 20px 18px; width: 100%; }
.sp-cov-in h1 { font-family: var(--serif); font-size: clamp(2rem, 7vw, 3rem); line-height: 1.05; margin: 4px 0 10px; text-shadow: 0 2px 14px rgba(0,0,0,.3); color: #fff; }
.sp-type { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; background: rgba(255,255,255,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sp-avs { display: flex; }
.sp-avs .ce-av { margin-left: -8px; border-color: rgba(255,255,255,.9) !important; } .sp-avs .ce-av:first-child { margin-left: 0; }
.sp-cov-btn { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 20px; color: #fff; font-size: .8rem; font-weight: 600; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sp-cov-btn .ic { width: 16px; height: 16px; }
/* Icône des cercles */
.sp-ci { background: linear-gradient(135deg, var(--g1), var(--g2)) !important; overflow: hidden; font-size: 1.5rem !important; }
.sp-ci img { width: 100%; height: 100%; object-fit: cover; }
/* Espaces : tuile « Ajouter ou retirer » */
.so-tile.add { background: transparent !important; border: 2px dashed var(--glass-line) !important; color: var(--on-bg) !important; box-shadow: none !important; }
.so-tile.add .so-tile-ic { background: var(--glass); color: var(--on-bg); }
.sp-lbl { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin: 6px 0 6px; }
.sp-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; }
.sp-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.035); cursor: pointer; }
.sp-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--tc); flex: none; }
.sp-ic .ic { width: 19px; height: 19px; }
.sp-t { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-t small { font-size: .78rem; opacity: .65; }
.sp-sug { font-style: normal; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 6px; background: rgba(46,156,126,.15); color: #23785F; margin-left: 4px; vertical-align: 2px; }
.sp-sw { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 14px; background: rgba(0,0,0,.18); position: relative; flex: none; transition: background .2s; cursor: pointer; }
.sp-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .2s; }
.sp-sw:checked { background: #2E9C7E; } .sp-sw:checked::after { transform: translateX(18px); }
.sp-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-acts { justify-content: space-between; }
/* Tâches */
.sp-tf { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
@media (min-width: 700px) { .sp-tf { grid-template-columns: 1fr 180px 150px auto; } }
.sp-seg { margin-bottom: 10px; }
.sp-tasks { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.sp-tasks li { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid rgba(0,0,0,.06); }
.sp-tasks li.done .sp-tt b { text-decoration: line-through; opacity: .5; }
.sp-chk { width: 28px; height: 28px; border-radius: 9px; border: 2px solid rgba(0,0,0,.25); display: grid; place-items: center; flex: none; color: #fff; }
.sp-tasks li.done .sp-chk { background: #2E9C7E; border-color: #2E9C7E; }
.sp-chk .ic { width: 16px; height: 16px; }
.sp-tt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-tt small { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: .78rem; opacity: .75; }
.sp-tt .late { color: #D0434F; font-weight: 600; }
.sp-empty { padding: 14px 0; text-align: center; }
/* Notes */
.sp-notes-top { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.sp-notes { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .sp-notes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sp-notes { grid-template-columns: repeat(3, 1fr); } }
.sp-note { margin: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.sp-note header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sp-note header span { display: flex; }
.sp-note p { margin: 0; font-size: .92rem; line-height: 1.45; word-wrap: break-word; }
.sp-note small { opacity: .55; font-size: .74rem; }
.sp-note.pin { border: 2px solid #D4A537 !important; }
.sp-note.pin [data-action=sp-npin] .ic { fill: #D4A537; color: #D4A537; }
/* Concept */
.sp-hero { padding: 24px 20px; margin-bottom: 16px; }
.sp-hero h2 { font-family: var(--serif); font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.15; text-align: center; }
.sp-lead { text-align: center; margin: 8px auto 14px; max-width: 460px; line-height: 1.5; }
.sp-types { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 16px; }
.sp-types span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 20px; color: #fff; font-weight: 600; font-size: .82rem; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.sp-types i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.25); }
.sp-steps { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 12px; }
.sp-steps li { display: flex; gap: 12px; align-items: flex-start; }
.sp-n { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: rgba(0,0,0,.05); }
.sp-steps p { margin: 2px 0 0; font-size: .88rem; line-height: 1.45; opacity: .8; }
.sp-how { margin-top: 18px; }
.sp-how button { color: var(--on-bg); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.so-kl { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .7; width: 100%; }
#sheet .sp-row { font: inherit; opacity: 1; text-transform: none; letter-spacing: 0; margin: 0; color: var(--ink); }
#sheet .sp-row .sp-t b { font-size: 1rem; font-family: var(--sans); }
#sheet .sp-ic { background: var(--tc) !important; color: #fff !important; }
.card .seg { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.08); }
.card .seg button { color: var(--ink) !important; opacity: .75; }
.card .seg button.on { opacity: 1; background: #fff; }
#sheet .sp-ic, #sheet .sp-t { opacity: 1 !important; }

/* ======================================================================
   v2.5 — lisible et facile pour tous (personnes âgées comprises)
   ====================================================================== */
/* Taille du texte réglable (tout est en rem) */
html[data-size="normal"] { font-size: 100%; }
html[data-size="grand"] { font-size: 112.5%; }
html[data-size="tres-grand"] { font-size: 125%; }
.sz-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.sz { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; min-height: 84px; border-radius: 16px; border: 2px solid rgba(0,0,0,.1); background: rgba(0,0,0,.03); color: var(--ink); justify-content: center; }
.sz b { font-family: var(--serif); line-height: 1; }
.sz0 b { font-size: 1.2rem; } .sz1 b { font-size: 1.6rem; } .sz2 b { font-size: 2.1rem; }
.sz span { font-size: .85rem; font-weight: 600; }
.sz.on { border-color: var(--accent); background: rgba(199,122,147,.14); }
/* Textes plus contrastés, moins de petites capitales */
.view .page-head .sub, .view .page-head p { text-transform: none !important; letter-spacing: 0 !important; font-size: 1rem !important; font-weight: 500; opacity: .92; }
.so-who small, .so-cc-t small, .so-tile small, .sp-t small, .sp-tt small, .so-al small, .so-c small, .so-xc small, .so-cc-av + small { font-size: .86rem !important; opacity: .82 !important; }
.small { font-size: .92rem; }
.muted, .small.muted { opacity: .85; }
.so-st > button span:last-child { font-size: .8rem; }
/* Grandes zones à toucher */
.btn { min-height: 48px; font-size: 1rem; }
.btn.sm { min-height: 44px; font-size: .95rem; padding-left: 14px; padding-right: 14px; }
.icon-btn { min-width: 44px; min-height: 44px; }
input, select, textarea { font-size: 1.05rem !important; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select { min-height: 50px; }
.seg button { min-height: 46px; font-size: .98rem; }
/* Barre du bas : icônes et libellés plus grands */
.bottom-nav a { min-height: 60px; }
.bottom-nav a .ic { width: 26px; height: 26px; }
.bottom-nav a span { font-size: .8rem; font-weight: 600; }
.act-btn .ic, .avatar-btn { width: 26px; }
/* Actions des publications : icône + mot */
.so-acts { flex-wrap: wrap; gap: 4px; padding: 8px 10px 2px; }
.so-act[data-l]::after { content: attr(data-l); font-size: .88rem; font-weight: 600; }
.so-act { min-height: 46px; background: rgba(0,0,0,.035); padding: 0 12px; }
.so-act.end { background: transparent; }
.so-act > span:not(.so-emo) { font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .so-act[data-l]::after { font-size: .8rem; } .so-act { padding: 0 9px; gap: 4px; } .so-act .ic { width: 22px; height: 22px; } }
.so-ract .so-act { background: transparent; }
.so-ract .so-act[data-l]::after { content: none; }
/* Espaces : tuiles plus lisibles, s'adaptent à la taille du texte */
.so-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)) !important; gap: 12px; }
.so-tile { min-height: 7.5rem; padding: 16px; }
.so-tile b { font-size: 1.05rem; line-height: 1.25; }
.so-tile-ic { width: 46px; height: 46px; border-radius: 14px; }
.so-tile-ic .ic { width: 24px; height: 24px; }
/* Pages nouvelles : même composition que les autres */
.sp-type .ic { width: 16px; height: 16px; }
.sp-emo { right: -20px; top: -30px; opacity: .2; color: #fff; }
.sp-emo .ic { width: 230px; height: 230px; stroke-width: 1.2; }
.sp-ci { color: #fff; }
.sp-ci > span { display: grid; place-items: center; }
.sp-ci .ic { width: 26px; height: 26px; }
.sp-types i { color: #fff; }
.sp-types i .ic { width: 15px; height: 15px; }
.sp-n { color: var(--accent); background: rgba(199,122,147,.12); }
.sp-n .ic { width: 22px; height: 22px; }
.so-kinds .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; font-size: .95rem; }
.so-kinds .chip .ic { width: 18px; height: 18px; }
.sp-tf { grid-template-columns: 1fr 1fr !important; }
.sp-tf [name=t] { grid-column: 1 / -1; }
.sp-tf .btn { grid-column: 1 / -1; }
@media (min-width: 900px) { .sp-tf { grid-template-columns: 2fr 1fr 1fr auto !important; } .sp-tf [name=t], .sp-tf .btn { grid-column: auto; } }
.sp-tasks li { padding: 12px 6px; }
.sp-tt b { font-size: 1.02rem; }
.sp-chk { width: 34px; height: 34px; border-radius: 10px; }
.sp-row { min-height: 64px; }
.sp-sw { width: 54px; height: 32px; border-radius: 16px; }
.sp-sw::after { width: 26px; height: 26px; }
.sp-sw:checked::after { transform: translateX(22px); }
.sp-hero h2 { margin-bottom: 4px; }
.sp-steps b { font-size: 1.02rem; }
.sp-steps p { font-size: .95rem; opacity: .85; }
.sp-notes-top .btn { width: 100%; justify-content: center; }
@media (min-width: 700px) { .sp-notes-top .btn { width: auto; } }
.sp-note b { font-size: 1.05rem; }
.sp-note p { font-size: 1rem; }
.so-tile small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3; }
.view .back { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); color: var(--on-bg); margin-bottom: 4px; }
.view .back .ic { width: 20px; height: 20px; }
/* actions : 3 boutons égaux, icône au-dessus du mot (lisible à toutes les tailles) */
.so-acts { display: grid !important; grid-template-columns: repeat(3, 1fr) 52px; gap: 6px; padding: 10px 12px 4px; }
.so-acts .so-act { position: relative; flex-direction: column; justify-content: center; gap: 3px; min-height: 60px; padding: 4px 2px; border-radius: 14px; }
.so-acts .so-act .ic { width: 24px !important; height: 24px !important; }
.so-acts .so-act[data-l]::after { font-size: .8rem !important; line-height: 1.1; }
.so-acts .so-act > span:not(.so-emo) { position: absolute; top: 6px; left: calc(50% + 12px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #fff; font-size: .72rem; line-height: 20px; text-align: center; }
.so-acts .so-act.end { margin: 0; }
.so-top { white-space: nowrap; display: inline-flex; letter-spacing: 0; }
.bottom-nav a span { font-size: min(.8rem, 13px); white-space: nowrap; }

/* ======================================================================
   v2.6 — couverture façon Agenda Créa + bloc « Mon cercle »
   ====================================================================== */
body[data-page="accueil"] .topbar .top-brand { visibility: hidden !important; }
.view.narrow > .so-wrap { max-width: none; }
.view.narrow .so-feed > :not(.hero) { max-width: 680px; margin-left: auto; margin-right: auto; }
.sp-hero2 .hero-scene .scene-frame { position: absolute; inset: 0; }
.sp-hero2 .hero-photo { opacity: 0; transition: opacity .4s; }
.sp-hero2 .hero-photo.ok { opacity: 1; }
.sp-hero-grad { position: absolute; inset: 0; background: radial-gradient(120% 80% at 80% 10%, rgba(255,255,255,.25), transparent 55%), linear-gradient(160deg, var(--g1), var(--g2)); overflow: hidden; }
.sp-hero-grad .sp-emo { position: absolute; right: -30px; top: 40px; opacity: .18; color: #fff; transform: rotate(-10deg); }
.sp-hero2 .hero-edit { position: absolute; z-index: 4; right: 16px; top: calc(268px + var(--safe-t, 0px)); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(40,30,40,.45); border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sp-hero2 .hero-edit .ic { width: 24px; height: 24px; }
.sp-hero2 .brand-title { font-size: clamp(2.4rem, 11vw, 3.4rem); overflow-wrap: anywhere; }
.sp-years { font-family: var(--serif); font-style: italic; font-size: 1.35rem; letter-spacing: .25em; margin: 6px 0 4px; }
.sp-years::after { content: ''; display: block; width: 90px; height: 1.5px; margin: 10px auto 14px; background: currentColor; opacity: .5; }
.sp-hero2 .hello-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 30px; color: #FFF6F4; font-size: 1.1rem; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sp-hero2 .hello-chip .ce-av { width: 40px; height: 40px; }
.sp-hero2 .date-card { border: 0; cursor: pointer; font: inherit; }
.sp-hero2 .quote { font-size: 1.15rem; }
/* Bloc « Mon cercle » */
.sp-block { position: relative; margin: 6px 0 14px; padding: 16px; border-radius: 26px; color: #fff; background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.22), transparent 50%), linear-gradient(135deg, var(--g1), var(--g2)); border: 1.5px solid rgba(255,255,255,.35); box-shadow: 0 18px 36px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3); }
.sp-bh { display: flex; align-items: center; gap: 14px; }
.sp-bic { flex: none; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35); }
.sp-bic .ic { width: 30px; height: 30px; }
.sp-bt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-bt small { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.sp-bt b { font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-bt span { font-size: .95rem; opacity: .92; }
.sp-bav { display: flex; flex: none; }
.sp-bav .ce-av { width: 42px; height: 42px; margin-left: -10px; border: 2.5px solid rgba(255,255,255,.95) !important; } .sp-bav .ce-av:first-child { margin-left: 0; }
.sp-bact { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; margin-top: 14px; }
.sp-bact button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 8px; border-radius: 14px; color: #fff; font-weight: 700; font-size: .92rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); min-width: 0; }
.sp-bact button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-bact .ic { width: 20px; height: 20px; flex: none; }
.sp-bact .rot90 { transform: rotate(90deg); }
@media (max-width: 420px) { .sp-bact { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .sp-years::after { margin-left: 0; } .sp-hero2 .hero-edit { top: auto; bottom: 40px; right: 6%; } .view.narrow .so-feed > .hero { max-width: 1180px; margin: 0 auto 24px; } }

/* ======================================================================
   v2.7 — messagerie façon WhatsApp / iMessage, Espaces en liste, finitions
   ====================================================================== */
html[data-size="grand"] { font-size: 108%; }
html[data-size="tres-grand"] { font-size: 118%; }
.btn { min-height: 44px; font-size: .95rem; }
.btn.sm { min-height: 38px; font-size: .88rem; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select { min-height: 46px; }
input, select, textarea { font-size: 1rem !important; }

/* ---------- Messagerie ---------- */
body[data-page="m-cercle"] .view[data-tab="messages"] { padding-bottom: 0; }
.view[data-tab="messages"] > .ch { max-width: 760px; }
.ch { --me: #DCF4D6; --me-ink: #12301A; --them: #FFFFFF; --ink2: #1E1A22; margin: 0 -16px; }
@media (min-width: 700px) { .ch { margin: 0 auto; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px -30px rgba(0,0,0,.6); } }
.ch-head { position: sticky; top: calc(56px + var(--safe-t, 0px)); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--bg1, #2A1F35) 88%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--glass-line); color: var(--on-bg); }
@media (min-width: 1180px) { .ch-head { top: 72px; } }
.ch-hav { display: flex; flex: none; }
.ch-hav .ce-av { width: 34px; height: 34px; margin-left: -12px; border: 2px solid var(--bg1, #2A1F35) !important; font-size: .75rem; } .ch-hav .ce-av:first-child { margin-left: 0; }
.ch-ht { flex: 1; min-width: 0; text-align: left; color: inherit; display: flex; flex-direction: column; }
.ch-ht b { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-ht small { font-size: .78rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-hb { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: inherit; }
.ch-hb.on { background: rgba(255,255,255,.15); }
.ch-hb .ic { width: 22px; height: 22px; }
.ch-hb i { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px; background: var(--accent); color: #fff; font: 700 .64rem/17px var(--sans); font-style: normal; }
.ch-wall { min-height: calc(100dvh - 260px); padding: 10px 10px 8px; background-color: #EFE7E1; background-image: radial-gradient(rgba(120,90,100,.07) 1.2px, transparent 1.3px), radial-gradient(rgba(120,90,100,.05) 1px, transparent 1.1px); background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px; }
.ch-note { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; text-align: center; margin: 4px auto 10px; max-width: 420px; padding: 6px 12px; border-radius: 10px; background: #FFF4C7; color: #5A4A1A; font-size: .78rem; line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.ch-note .ic { width: 14px; height: 14px; flex: none; }
.ch-note .linkish { color: #2D6CDF; font-weight: 600; }
.mx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ch-day { align-self: center; margin: 10px 0 8px; }
.ch-day span { display: inline-block; padding: 4px 12px; border-radius: 8px; background: rgba(255,255,255,.92); color: #54656F; font-size: .74rem; font-weight: 600; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.ch-sys { align-self: center; margin: 6px 0; max-width: 92%; }
.ch-sys > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; background: #E1F2FB; color: #215; font-size: .8rem; }
.ch-sys .ic { width: 14px; height: 14px; color: #2E9C7E; }
.ch-poll { width: min(100%, 420px); }
.ch-poll .ce-poll { box-shadow: 0 1px 2px rgba(0,0,0,.1); border: 0; }
.ch-row { display: flex; align-items: flex-end; gap: 6px; margin-top: 2px; max-width: 100%; }
.ch-row.first { margin-top: 8px; }
.ch-row.me { justify-content: flex-end; }
.ch-row.has-rx { margin-bottom: 12px; }
.ch-av { width: 28px; flex: none; }
.ch-av .ce-av { width: 28px; height: 28px; font-size: .7rem; border-width: 0 !important; }
.ch-b { position: relative; max-width: min(78%, 480px); padding: 6px 9px 7px; border-radius: 12px; background: var(--them); color: var(--ink2); box-shadow: 0 1px 1px rgba(11,20,26,.13); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: filter .15s; }
.ch-b:active { filter: brightness(.95); }
.ch-row.me .ch-b { background: var(--me); color: var(--me-ink); }
.ch-row.first:not(.me) .ch-b { border-top-left-radius: 4px; }
.ch-row.first.me .ch-b { border-top-right-radius: 4px; }
.ch-row.first:not(.me) .ch-b::before, .ch-row.first.me .ch-b::before { content: ''; position: absolute; top: 0; width: 10px; height: 13px; background: inherit; }
.ch-row.first:not(.me) .ch-b::before { left: -7px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.ch-row.first.me .ch-b::before { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ch-name { display: block; font-size: .8rem; margin-bottom: 1px; }
.ch-b p { margin: 0; font-size: 1rem; line-height: 1.38; word-wrap: break-word; overflow-wrap: anywhere; }
.ch-b p a { color: #027EB5; text-decoration: underline; }
.ch-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -4px 10px; font-size: .68rem; color: rgba(0,0,0,.45); white-space: nowrap; line-height: 1; position: relative; top: 4px; }
.ch-meta .ic { width: 12px; height: 12px; }
.ch-ttl { display: inline-flex; align-items: center; gap: 2px; margin-right: 3px; }
.ch-tick { color: #53BDEB; width: 15px !important; height: 15px !important; }
.ch-b.only-pic { padding: 3px; }
.ch-b.only-pic > .ch-meta { position: absolute; right: 8px; bottom: 8px; top: auto; margin: 0; color: #fff; background: rgba(0,0,0,.35); padding: 3px 6px; border-radius: 10px; }
.ch-pics { display: grid; gap: 2px; border-radius: 9px; overflow: hidden; margin: 2px 0 4px; width: min(64vw, 300px); }
.ch-pics.n2, .ch-pics.n3, .ch-pics.n4 { grid-template-columns: 1fr 1fr; }
.ch-pics.n3 > span:first-child { grid-column: 1 / -1; }
.ch-pics > span { position: relative; aspect-ratio: 1; background: rgba(0,0,0,.08); }
.ch-pics.n1 > span { aspect-ratio: 4 / 5; }
.ch-pics img, .ch-pics video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-pics i { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font: 700 1.4rem var(--sans); font-style: normal; }
.ch-quote { display: flex; flex-direction: column; text-align: left; width: 100%; margin: 2px 0 4px; padding: 5px 8px; border-radius: 7px; background: rgba(0,0,0,.05); border-left: 4px solid #06CF9C; color: inherit; font-size: .82rem; }
.ch-quote span { opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-rx { position: absolute; bottom: -14px; right: 8px; display: inline-flex; align-items: center; gap: 1px; padding: 1px 6px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); font-size: .85rem; }
.ch-row:not(.me) .ch-rx { right: auto; left: 8px; }
.ch-rx small { font-size: .7rem; color: #54656F; margin: 0 2px; }
.ch-row.flash .ch-b { animation: chFlash 1.2s; }
@keyframes chFlash { 30% { box-shadow: 0 0 0 4px rgba(6,207,156,.5); } }
.ch-empty { display: grid; justify-items: center; gap: 10px; padding: 60px 20px; color: #54656F; text-align: center; }
.ch-empty .ic { width: 44px; height: 44px; opacity: .6; }
/* barre de saisie */
.ch-bar { position: sticky; bottom: calc(var(--nav-h, 76px) + 10px + var(--safe-b, 0px)); z-index: 5; padding: 6px 8px 8px; background: #EFE7E1; }
@media (min-width: 1180px) { .ch-bar { bottom: 0; } }
.ch-in { display: flex; align-items: flex-end; gap: 6px; }
.ch-in textarea { flex: 1; min-height: 46px !important; max-height: 130px; resize: none; padding: 11px 16px !important; border-radius: 24px !important; border: 0 !important; background: #fff !important; color: #111 !important; box-shadow: 0 1px 1px rgba(0,0,0,.1) !important; line-height: 1.35; outline: none; }
.ch-plus, .ch-send { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.ch-plus { color: #54656F; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.ch-send { color: #fff; background: #00A884; box-shadow: 0 2px 6px rgba(0,168,132,.4); }
.ch-plus .ic, .ch-send .ic { width: 22px; height: 22px; }
.ch-reply { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 7px 10px; border-radius: 12px; background: #fff; border-left: 4px solid #06CF9C; font-size: .85rem; color: #333; }
.ch-reply span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-reply b { color: #06A07A; }
.ch-reply button { width: 32px; height: 32px; display: grid; place-items: center; color: #54656F; }
.ch-reply .ic { width: 18px; height: 18px; }
/* menu d'un message */
.ch-pick { display: flex; justify-content: space-between; gap: 4px; padding: 6px; border-radius: 30px; background: rgba(0,0,0,.05); margin-bottom: 12px; }
.ch-pick button { flex: 1; font-size: 1.6rem; height: 48px; border-radius: 50%; transition: transform .12s; }
.ch-pick button.on { background: rgba(0,0,0,.1); transform: scale(1.1); }
.ch-prev { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.04); font-size: .92rem; }
.ch-acts { display: grid; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.035); }
.ch-acts button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; text-align: left; color: var(--ink); font-size: 1rem; border-bottom: 1px solid rgba(0,0,0,.06); }
.ch-acts button:last-child { border-bottom: 0; }
.ch-acts .ic { width: 20px; height: 20px; opacity: .75; }
.ch-acts .danger { color: #D0434F; }
.ch-rxl { margin-top: 10px; }
.ch-in .ch-send { transition: transform .12s; } .ch-bar.typing .ch-send { transform: scale(1.05); }

/* ---------- Espaces : liste groupée façon Réglages iOS ---------- */
.sp-group { list-style: none; margin: 0 0 16px; padding: 0; border-radius: 18px; overflow: hidden; background: linear-gradient(165deg, var(--card1), var(--card2)); border: 1px solid var(--card-line, transparent); box-shadow: 0 10px 24px -18px rgba(0,0,0,.5); }
.view.wide > .sp-group { max-width: 760px; }
.view[data-tab="fil"] > * { max-width: 760px; }
.sp-li { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; text-align: left; color: var(--ink); min-height: 64px; }
.sp-group li + li .sp-li { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.sp-li:active { background: rgba(0,0,0,.04); }
.sp-lic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--tc); }
.sp-lic.add { background: transparent; color: var(--accent); border: 1.5px dashed currentColor; }
.sp-lic .ic { width: 19px; height: 19px; }
.sp-lt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-lt b { font-size: 1rem; font-weight: 600; }
.sp-lt small { font-size: .85rem; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-chev { width: 16px; height: 16px; opacity: .35; flex: none; }

.mx-list > li { min-height: 0; padding: 0; border: 0 !important; }
.ch-row:not(.me):not(.first) .ch-av .ce-av { visibility: hidden; }
.ch-poll .ce-poll, .ch-poll .ce-poll b, .ch-poll .ce-poll small { color: #1E1A22 !important; }
.ch-poll .ce-poll small { opacity: .65; }
@media (min-width: 700px) { .ch { overflow: visible; } .ch-head { border-radius: 24px 24px 0 0; } .ch-bar { border-radius: 0 0 24px 24px; } }
@media (min-width: 1180px) { .ch-head { top: 84px; } .view[data-tab="messages"] { padding-top: 0; } }

/* ---------- v2.8 — publication propre (façon Facebook / Instagram) ---------- */
.so-post { border-radius: 18px; }
.so-ph { padding: 12px 10px 8px 14px; }
.so-who b { font-size: 1rem; }
.so-who small { font-size: .8rem !important; }
.so-who .ce-av { width: 40px; height: 40px; font-size: .9rem; }
.so-big { padding: 2px 16px 12px; font-size: 1.05rem; line-height: 1.45; }
.so-cap { padding: 10px 16px 0; font-size: .97rem; line-height: 1.45; }
.so-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 8px; font-size: .86rem; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.so-sum .so-likes { padding: 0; min-height: 0; font-weight: 500; font-size: .86rem; display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.so-sum .so-top { display: inline-flex; }
.so-sum .so-top { font-size: .95rem; }
.so-ncm { font-size: .86rem; color: inherit; }
.so-acts2 { display: grid; grid-template-columns: 1fr 1fr 1fr 44px; align-items: center; margin: 0 10px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); padding: 3px 0; }
.so-a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; border-radius: 10px; color: color-mix(in srgb, var(--ink) 78%, transparent); font-weight: 600; font-size: .9rem; }
.so-a:active, .so-a:hover { background: rgba(0,0,0,.05); }
.so-a .ic { width: 21px; height: 21px; }
.so-a.so-like.on { color: #E0245E; }
.so-a.so-like.on .ic { fill: #E0245E; color: #E0245E; }
.so-a.sv.on .ic { fill: currentColor; }
.so-a .so-emo { font-size: 1.15rem; }
.so-sum + .so-acts2 { margin-top: 0; }
.so-acts2 + .so-cl, .so-acts2 + .so-more { margin-top: 8px; }
.so-cl { padding: 4px 16px 0; gap: 6px; }
.so-c p { font-size: .93rem; }
.so-more { padding: 8px 16px 0; font-size: .86rem; }
.so-cf { margin: 8px 12px 12px; padding: 4px 4px 4px 6px; border-radius: 24px; background: rgba(0,0,0,.045); }
.so-cf input { padding: 8px 4px; font-size: .95rem !important; min-height: 38px !important; }
.so-cf-go { width: 36px; height: 36px; }
.so-cf .ce-av { width: 28px; height: 28px; font-size: .7rem; }
@media (max-width: 380px) { .so-a span:not(.so-emo) { font-size: .82rem; } .so-a { gap: 5px; } }
.so-who .ce-av, .so-cf .ce-av { display: inline-grid !important; place-items: center; line-height: 1 !important; padding: 0 !important; }
.so-acts2 { gap: 2px; }
.so-a { font-size: .86rem; gap: 6px; padding: 0 4px; min-width: 0; }
.so-a span { white-space: nowrap; }
.so-a .ic { width: 20px; height: 20px; flex: none; }

/* ---------- v2.9 — messagerie plein écran ---------- */
body.chat-full .view[data-tab="messages"] > .ch { position: fixed; inset: 0; z-index: 30; margin: 0; max-width: none; border-radius: 0; display: flex; flex-direction: column; height: 100dvh; background: #EFE7E1; box-shadow: none; }
body.chat-full .topbar, body.chat-full .bottom-nav, body.chat-full .fab { display: none !important; }
body.chat-full { overflow: hidden; }
body.chat-full .ch-head { position: static; flex: none; padding: calc(10px + env(safe-area-inset-top)) 10px 10px 6px; border-radius: 0; background: #2A1F35; }
body.chat-full .ch-wall { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 14px; }
body.chat-full .ch-bar { position: static; flex: none; border-radius: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: #F6F0EB; border-top: 1px solid rgba(0,0,0,.06); }
.ch-back { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: inherit; }
.ch-back .ic { width: 24px; height: 24px; }
.ch-head .ch-hav .ce-av { width: 38px; height: 38px; }
.ch-ht b { font-size: 1.1rem; }
@media (min-width: 1180px) {
  body.chat-full .view[data-tab="messages"] > .ch { left: 248px; }
  body.chat-full .ch-wall { padding-left: max(16px, calc((100% - 820px) / 2)); padding-right: max(16px, calc((100% - 820px) / 2)); }
  body.chat-full .ch-bar .ch-in, body.chat-full .ch-reply { max-width: 820px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1500px) { body.chat-full .view[data-tab="messages"] > .ch { left: 264px; } }

/* ---------- v2.10 — heure d'envoi façon WhatsApp ---------- */
.ch-b { padding: 6px 10px 8px; }
.ch-b p { display: block; }
.ch-sp { display: inline-block; width: 44px; height: 1px; }
.ch-sp.me { width: 62px; } .ch-sp.k { width: 60px; } .ch-sp.me.k { width: 78px; }
.ch-b > .ch-meta { position: absolute; right: 9px; bottom: 5px; top: auto; float: none; margin: 0; display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; line-height: 1; color: rgba(0,0,0,.45); }
.ch-b > .ch-meta time { font-variant-numeric: tabular-nums; }
.ch-b > .ch-meta .ic { width: 12px; height: 12px; }
.ch-b > .ch-meta .ch-tick { width: 15px !important; height: 15px !important; color: #53BDEB; }
.ch-row.me .ch-b > .ch-meta { color: rgba(18,48,26,.55); }
.ch-b.only-pic > .ch-meta { color: #fff; background: rgba(0,0,0,.35); padding: 3px 6px; border-radius: 10px; right: 8px; bottom: 8px; }
.ch-b:not(.only-pic):has(.ch-pics):not(:has(p)) { padding-bottom: 22px; }
.ch-note { flex-direction: row; font-size: .76rem; }
.ch-when { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: .85rem; opacity: .7; }
.ch-when .ic { width: 15px; height: 15px; }

/* ---------- v2.11 — bouton + plus petit, angles moins arrondis ---------- */
.bottom-nav .fab { width: 54px !important; height: 54px !important; margin-top: -14px !important; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45), 0 0 0 5px rgba(255,255,255,.06) !important; }
.bottom-nav .fab .ic { width: 22px !important; height: 22px !important; }
.bottom-nav { border-radius: 16px !important; }
.bottom-nav a { border-radius: 10px !important; }
.sp-block { border-radius: 16px; padding: 14px; }
.sp-bic { border-radius: 12px; width: 52px; height: 52px; }
.sp-bact button { border-radius: 10px; }
@media (max-width: 520px) { .sp-bact { grid-auto-flow: row !important; grid-template-columns: 1fr 1fr !important; } }
.so-post, .so-cc, .sp-group, .card, .so-tile, .ch-poll .ce-poll { border-radius: 14px !important; }
.seg, .so-seg { border-radius: 12px !important; }
.seg button { border-radius: 9px !important; }
.sp-hero2 .date-card { border-radius: 14px !important; }
.sp-hero2 .hello-chip { border-radius: 14px; }
.btn { border-radius: 10px !important; }
.so-cf { border-radius: 12px; }
.ch-in textarea { border-radius: 14px !important; }
.sp-bav .ce-av { width: 34px; height: 34px; margin-left: -8px; font-size: .8rem; } .sp-bt span { white-space: nowrap; }
.bottom-nav .fab { margin-top: 0 !important; align-self: center !important; width: 50px !important; height: 50px !important; border-width: 0 !important; box-shadow: 0 4px 12px -4px rgba(0,0,0,.45) !important; }

/* ---------- v2.12 — barre du bas épurée ---------- */
.bottom-nav { padding: 6px 8px !important; min-height: 64px; align-items: center !important; }
.bottom-nav a { min-height: 52px !important; padding: 4px 0 !important; gap: 3px !important; background: none !important; box-shadow: none !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; }
.bottom-nav a .ic { width: 22px !important; height: 22px !important; padding: 0; box-sizing: content-box; }
.bottom-nav a span { font-size: .7rem !important; font-weight: 600 !important; letter-spacing: .01em; opacity: .8; }
.bottom-nav a.active .ic { background: color-mix(in srgb, var(--accent) 55%, transparent); color: #fff; border-radius: 12px; padding: 4px 16px; margin: -4px 0; }
.bottom-nav a.active span { opacity: 1; color: #fff; }
.bottom-nav .fab { width: 46px !important; height: 46px !important; }
.bottom-nav .fab .ic { width: 20px !important; height: 20px !important; }
.bottom-nav .nav-badge { top: 0 !important; right: calc(50% - 22px) !important; min-width: 16px; height: 16px; font-size: .6rem; line-height: 16px; }
html[data-theme] body .bottom-nav a.active, html body .bottom-nav a.active { background: none !important; box-shadow: none !important; color: #fff !important; }
html body .bottom-nav a.active .ic { background: var(--t0, var(--accent)); color: var(--t0-ink, #fff); }
html.flat body .bottom-nav a.active .ic { background: var(--accent); color: var(--on-accent, #fff); }

/* ---------- v2.13 — barre du bas : icônes seules ---------- */
.bottom-nav { min-height: 58px; }
.bottom-nav a { min-height: 46px !important; }
.bottom-nav a span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bottom-nav a .ic { width: 24px !important; height: 24px !important; }
html body .bottom-nav a.active .ic { padding: 7px 18px; margin: 0; border-radius: 14px; }
.bottom-nav .nav-badge { top: 2px !important; }

/* ---------- v2.14 — publication minimaliste ---------- */
.so-ir { display: flex; align-items: center; gap: 2px; padding: 6px 8px 0; }
.so-i { display: inline-flex; align-items: center; gap: 5px; height: 42px; padding: 0 8px; color: var(--ink); border-radius: 10px; }
.so-i .ic { width: 24px; height: 24px; }
.so-i b { font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.so-i.sv { margin-left: auto; }
.so-i.so-like.on .ic { color: #E0245E; fill: #E0245E; }
.so-i.sv.on .ic { fill: currentColor; }
.so-i:active { transform: scale(.9); }
.so-i .so-emo { font-size: 1.3rem; }
.so-post .so-cap { padding: 4px 16px 0; }
.so-post .so-more { display: block; padding: 6px 16px 14px; font-size: .88rem; opacity: .6; }
.so-post > .so-cap:last-child, .so-post > .so-ir:last-child { padding-bottom: 14px; }
.so-post.text .so-big { padding-bottom: 4px; }
.sp-years.line { margin: 0; } .sp-years.line::after { margin-top: 12px; }

/* ---------- v2.15 — thèmes Ananas, Tropical, Cactus ---------- */
[data-theme="ananas"] { --quote-ink: #FFFFFF; --bg1: #03508A; --bg2: #0487D9; --bg3: #049DD9; --bg-img: none; --bg-img-lg: none; --on-bg: #FFFFFF; --on-bg-muted: #C4EEF2; --card1: #FFFFFF; --card2: #E9F7F9; --card-line: rgba(255,255,255,.75); --ink: #0B2A44; --ink-muted: #4B6B82; --line: #C4EEF2; --accent: #F2AB6D; --accent-2: #E8924A; --on-accent: #fff; --soft: #F2D6BD; --t0: linear-gradient(160deg, #F2D6BD, #F2AB6D); --t0-ink: #0B2A44; --t1: linear-gradient(160deg, #FFFFFF, #E9F7F9); --t1-ink: #0B2A44; --t2: linear-gradient(160deg, #049DD9, #0487D9); --t2-ink: #fff; --nav-bg: rgba(3,60,105,.96); --nav-ink: #C4EEF2; --glass: rgba(255,255,255,.14); --glass-line: rgba(255,255,255,.28); --theme-color: #03508A; --shadow: 0 12px 30px -12px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.12); --meter: linear-gradient(90deg, #F2AB6D, #E8924A); --fab: radial-gradient(circle at 35% 28%, #fff, #F2D6BD 55%, #F2AB6D); --fab-ink: #0B2A44; --flat-bg: #0487D9; --hero-ink: #fff; --hero-ts: 0 2px 14px rgba(0,0,0,.3); --tg0: linear-gradient(160deg, #F2D6BD, #F2AB6D); --tc0: #F2AB6D; --ti0: #0B2A44; --tg1: linear-gradient(160deg, #FFFFFF, #E9F7F9); --tc1: #E9F7F9; --ti1: #0B2A44; --tg2: linear-gradient(160deg, #049DD9, #0487D9); --tc2: #0487D9; --ti2: #fff; --tg3: linear-gradient(160deg, #F2D6BD, #C4EEF2); --tc3: #F2D6BD; --ti3: #0B2A44; --sc-sky1: #03508A; --sc-sky2: #0487D9; --sc-sky3: #049DD9; --sc-sky4: #F2D6BD; --sc-sun: #F2AB6D; --sc-m1: #0487D9; --sc-m2: #03508A; --sc-w1: #049DD9; --sc-w2: #03508A; --sc-glint: #F2D6BD; --sc-line: #fff; }
[data-theme="ananas"] body, [data-theme="ananas"] .bg { background: radial-gradient(120% 70% at 85% 0%, #049DD9, transparent 60%), linear-gradient(170deg, #0487D9, #03508A) fixed; }
[data-theme="ananas"] .side-link.active, html[data-theme="ananas"] body .bottom-nav a.active .ic { background: #F2AB6D !important; color: #0B2A44 !important; }
[data-theme="ananas"] .sidebar { background: color-mix(in srgb, #03508A 92%, black); }
[data-theme="tropical"] { --quote-ink: #FFFFFF; --bg1: #015F8E; --bg2: #0287BE; --bg3: #47C6E8; --bg-img: none; --bg-img-lg: none; --on-bg: #FFFFFF; --on-bg-muted: #E6F7FC; --card1: #FFFDF6; --card2: #F0E6B4; --card-line: rgba(255,255,255,.75); --ink: #11324A; --ink-muted: #5A6B6E; --line: #F0E6B4; --accent: #F7C74B; --accent-2: #E8A928; --on-accent: #fff; --soft: #FDE775; --t0: linear-gradient(160deg, #FDE775, #F7C74B); --t0-ink: #11324A; --t1: linear-gradient(160deg, #FFFDF6, #F0E6B4); --t1-ink: #11324A; --t2: linear-gradient(160deg, #47C6E8, #0287BE); --t2-ink: #fff; --nav-bg: rgba(1,72,108,.96); --nav-ink: #FDE775; --glass: rgba(255,255,255,.14); --glass-line: rgba(255,255,255,.28); --theme-color: #015F8E; --shadow: 0 12px 30px -12px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.12); --meter: linear-gradient(90deg, #F7C74B, #E8A928); --fab: radial-gradient(circle at 35% 28%, #fff, #FDE775 55%, #F7C74B); --fab-ink: #11324A; --flat-bg: #0287BE; --hero-ink: #fff; --hero-ts: 0 2px 14px rgba(0,0,0,.3); --tg0: linear-gradient(160deg, #FDE775, #F7C74B); --tc0: #F7C74B; --ti0: #11324A; --tg1: linear-gradient(160deg, #FFFDF6, #F0E6B4); --tc1: #F0E6B4; --ti1: #11324A; --tg2: linear-gradient(160deg, #47C6E8, #0287BE); --tc2: #0287BE; --ti2: #fff; --tg3: linear-gradient(160deg, #FDE775, #F0E6B4); --tc3: #FDE775; --ti3: #11324A; --sc-sky1: #015F8E; --sc-sky2: #0287BE; --sc-sky3: #47C6E8; --sc-sky4: #FDE775; --sc-sun: #F7C74B; --sc-m1: #0287BE; --sc-m2: #015F8E; --sc-w1: #47C6E8; --sc-w2: #015F8E; --sc-glint: #FDE775; --sc-line: #fff; }
[data-theme="tropical"] body, [data-theme="tropical"] .bg { background: radial-gradient(120% 70% at 85% 0%, #47C6E8, transparent 60%), linear-gradient(170deg, #0287BE, #015F8E) fixed; }
[data-theme="tropical"] .side-link.active, html[data-theme="tropical"] body .bottom-nav a.active .ic { background: #F7C74B !important; color: #11324A !important; }
[data-theme="tropical"] .sidebar { background: color-mix(in srgb, #015F8E 92%, black); }
[data-theme="cactus"] { --quote-ink: #FFFFFF; --bg1: #4E2E66; --bg2: #784799; --bg3: #9471D2; --bg-img: none; --bg-img-lg: none; --on-bg: #FFFFFF; --on-bg-muted: #E7B8F3; --card1: #FFFAF7; --card2: #E5C8B7; --card-line: rgba(255,255,255,.75); --ink: #2C1A3A; --ink-muted: #6E5A7E; --line: #CFBEDC; --accent: #F9713A; --accent-2: #E35A22; --on-accent: #fff; --soft: #CFBEDC; --t0: linear-gradient(160deg, #F9713A, #E35A22); --t0-ink: #FFFFFF; --t1: linear-gradient(160deg, #FFFAF7, #E5C8B7); --t1-ink: #2C1A3A; --t2: linear-gradient(160deg, #9471D2, #784799); --t2-ink: #fff; --nav-bg: rgba(60,34,80,.96); --nav-ink: #E7B8F3; --glass: rgba(255,255,255,.14); --glass-line: rgba(255,255,255,.28); --theme-color: #4E2E66; --shadow: 0 12px 30px -12px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.12); --meter: linear-gradient(90deg, #F9713A, #E35A22); --fab: radial-gradient(circle at 35% 28%, #fff, #F9713A 55%, #F9713A); --fab-ink: #2C1A3A; --flat-bg: #784799; --hero-ink: #fff; --hero-ts: 0 2px 14px rgba(0,0,0,.3); --tg0: linear-gradient(160deg, #F9713A, #E35A22); --tc0: #F9713A; --ti0: #FFFFFF; --tg1: linear-gradient(160deg, #FFFAF7, #E5C8B7); --tc1: #E5C8B7; --ti1: #2C1A3A; --tg2: linear-gradient(160deg, #9471D2, #784799); --tc2: #784799; --ti2: #fff; --tg3: linear-gradient(160deg, #CFBEDC, #CFBEDC); --tc3: #CFBEDC; --ti3: #2C1A3A; --sc-sky1: #4E2E66; --sc-sky2: #784799; --sc-sky3: #9471D2; --sc-sky4: #CFBEDC; --sc-sun: #F9713A; --sc-m1: #784799; --sc-m2: #4E2E66; --sc-w1: #9471D2; --sc-w2: #4E2E66; --sc-glint: #CFBEDC; --sc-line: #fff; }
[data-theme="cactus"] body, [data-theme="cactus"] .bg { background: radial-gradient(120% 70% at 85% 0%, #9471D2, transparent 60%), linear-gradient(170deg, #784799, #4E2E66) fixed; }
[data-theme="cactus"] .side-link.active, html[data-theme="cactus"] body .bottom-nav a.active .ic { background: #F9713A !important; color: #FFFFFF !important; }
[data-theme="cactus"] .sidebar { background: color-mix(in srgb, #4E2E66 92%, black); }

/* ---------- v2.15.1 — en-tête des messages toujours lisible ---------- */
.ch-head, body.chat-full .ch-head { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 35%, #1E1726), #1E1726) !important; color: #fff !important; }
.ch-head .ch-back, .ch-head .ch-ht, .ch-head .ch-ht b, .ch-head .ch-hb { color: #fff !important; }
.ch-head .ch-ht small { color: rgba(255,255,255,.75) !important; opacity: 1 !important; }
.ch-head .ic { color: #fff; stroke: currentColor; }
.ch-head .ch-hav .ce-av { border-color: #1E1726 !important; }
.ch-head .ch-hb.on { background: rgba(255,255,255,.18); }