/* Squashix — /communaute (Le Deck des Phrases). Scoped à cette page : tokens
   de tokens.css, composants de components.css (.btn/.badge/.sx-tabs/.sx-select/
   .sx-input/.sx-textarea/.empty-state/.sx-toast réutilisés tels quels, aucune
   couleur en dur). --court/--court-soft ajoutés à tokens.css comme 5e accent
   de catégorie ("Fausse modestie"). */

.wrap{max-width:1180px;margin:0 auto;padding:26px 24px 60px;}

/* ---------- Intro ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:6px 2px 20px;}
.page-head .eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--plum);background:var(--plum-soft);border:1.5px solid color-mix(in srgb, var(--plum) 28%, transparent);border-radius:6px;padding:4px 10px;transform:rotate(-2deg);margin-bottom:12px;}
.page-head h1{font-size:34px;margin:0 0 6px;font-weight:800;letter-spacing:-0.02em;line-height:1.1;}
.page-head p{margin:0;color:var(--ink-soft);font-size:14px;max-width:52ch;line-height:1.55;}
.kpi-row{display:flex;gap:12px;flex-wrap:wrap;}

/* Apparition en fondu à l'arrivée sur la page, en cascade (eyebrow -> h1 ->
   p) — même recette que .hp-intro (public/home.css). L'eyebrow tient déjà
   un transform statique (rotate(-2deg)) : l'état d'arrivée de son animation
   REPREND cette rotation plutôt que d'atterrir à 0deg, sinon la carte
   arriverait droite puis "sauterait" à son inclinaison au repos. */
@keyframes commHeadIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes commEyebrowIn{from{opacity:0;transform:translateY(12px) rotate(-2deg);}to{opacity:1;transform:translateY(0) rotate(-2deg);}}
.page-head .eyebrow{animation:commEyebrowIn .6s ease both;}
.page-head h1{animation:commHeadIn .6s .1s ease both;}
.page-head p{animation:commHeadIn .6s .18s ease both;}
@media (prefers-reduced-motion:reduce){.page-head .eyebrow,.page-head h1,.page-head p{animation:none;}}

/* ---------- Barre d'outils ---------- */
.toolbar{background:var(--card);border:1.5px solid var(--line);border-radius:18px;box-shadow:var(--shadow-subtle);padding:12px 14px;margin-bottom:8px;display:flex;flex-direction:column;gap:12px;animation:commHeadIn .6s .26s ease both;}
@media (prefers-reduced-motion:reduce){.toolbar{animation:none;}}
/* .chip reste utilisée par le sélecteur de catégorie du modal d'ajout
   (#catPicker, cat-picker) — seul le filtre rapide de la barre d'outils
   ci-dessous est passé en sélecteur multi-option (voir .comm-cat-filter). */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--ink-soft);background:var(--bg);border:1.5px solid var(--line);border-radius:22px;padding:7px 13px;cursor:pointer;font-family:inherit;transition:transform .12s ease, border-color .12s ease, background .12s ease, color .12s ease;}
.chip .cdot{width:8px;height:8px;border-radius:50%;background:var(--c, var(--ink-soft));flex:none;}
.chip .cnt{font-family:var(--mono);font-size:12px;opacity:.65;}
.chip:hover{border-color:color-mix(in srgb, var(--c, var(--ink)) 45%, transparent);color:var(--ink);transform:translateY(-1px);}
.chip.active{background:var(--cs, var(--sage-soft));color:var(--c, var(--sage));border-color:color-mix(in srgb, var(--c, var(--sage)) 42%, transparent);}
.toolbar-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

/* "Filtres" repliable : regroupe le filtre catégorie et le tri sous un seul
   déclencheur, au lieu de deux menus déroulants à côté des boutons d'action
   (Carte du jour / Mode Duel) — accordéon générique (accordion-item/-header/
   -body, components.css), toggle déjà délégué (public/components.js), rien
   à écrire côté JS pour ouvrir/fermer. Replié par défaut, desktop ET mobile :
   contrairement au tiroir de filtres de Paris (public/paris.css), ce n'est
   pas une adaptation mobile d'un affichage existant, juste deux contrôles à
   regrouper. */
.comm-filters-drawer{width:auto;background:none;border:0;box-shadow:none;overflow:visible;}
.comm-filters-drawer .accordion-header{
  min-height:34px;padding:0 14px;gap:8px;border-radius:var(--pill);
  border:1.5px solid var(--line-2);background:var(--card);box-shadow:var(--shadow-subtle);
  color:var(--ink);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  transition:border-color .15s ease,color .15s ease;
}
.comm-filters-drawer .accordion-header:hover{background:var(--card-2);border-color:var(--sage);}
.comm-filters-drawer.open .accordion-header{border-color:var(--sage);color:var(--sage);}
.comm-filters-drawer-label{display:flex;align-items:center;gap:8px;}
.comm-filters-drawer-label svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.comm-filters-count{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 4px;border-radius:50%;background:var(--sage-solid);color:#fff;font-size:9px;font-weight:800;text-transform:none;}
.comm-filters-drawer .accordion-caret{font-size:11px;color:var(--ink-soft);}
.comm-filters-drawer .accordion-body-pad{display:flex;flex-wrap:wrap;gap:10px;padding:12px 2px 2px;}
/* Même piège que .paris-tier-menu (public/paris.css) : le menu du filtre
   catégorie est position:absolute et se ferait rogner par l'overflow:hidden
   d'accordion-body-inner (nécessaire au repli, components.css) une fois le
   tiroir ouvert. Repassé en overflow:visible seulement une fois l'ouverture
   du tiroir terminée (délai = durée de la transition de .accordion-body). */
.comm-filters-drawer.open .accordion-body-inner{overflow:visible;transition:overflow 0s .3s;}

/* Filtre catégorie — même DA que le filtre de tournois PSA (paris.js/.css
   #tierFilterMenu) : sélecteur à cases cochables plutôt qu'une rangée de
   puces, pour pouvoir en cocher plusieurs à la fois sans occuper toute la
   largeur de la barre d'outils. */
.comm-cat-filter{min-width:200px;}
.comm-cat-menu{min-width:250px;padding:10px;}
.comm-cat-menu-actions{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.comm-cat-menu-link{background:none;border:0;padding:0;font-size:12px;font-weight:800;color:var(--terracotta);cursor:pointer;font-family:inherit;}
.comm-cat-menu-link:hover{text-decoration:underline;}
.comm-cat-option{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;}
.comm-cat-option:hover{background:var(--card-2);}
.comm-cat-option input{width:15px;height:15px;flex:none;accent-color:var(--sage);cursor:pointer;}
.comm-cat-option .cdot{width:8px;height:8px;border-radius:50%;flex:none;}
.comm-cat-option .cnt{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-soft);}

/* Hors de l'encart .toolbar (bouton plus visible, pas noyé parmi les
   filtres), sous le carrousel désormais. `.btn` est inline-flex par défaut :
   display:block + margin:auto est nécessaire pour que le centrage prenne
   effet sur un enfant direct de .wrap (pas un conteneur flex, contrairement
   à .toolbar-row). Taille normale (largeur au contenu) en desktop, pleine
   largeur en dessous de 820px (voir le media query plus bas) — une cible
   tactile étroite serait moins confortable qu'un bandeau plein largeur. */
.comm-add-btn{display:block;width:fit-content;margin:14px auto 22px;justify-content:center;}

/* ==========================================================================
   DECK / CAROUSEL
   ========================================================================== */
.deck{position:relative;--cw:372px;--ch:424px;height:calc(var(--ch) + 96px);margin:6px 0 0;display:flex;align-items:center;justify-content:center;perspective:1700px;touch-action:pan-y;overflow:hidden;}
.deck.is-grid{display:none;}
.deck::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(96%,860px);height:calc(var(--ch) + 34px);background:radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--sage) 12%, transparent) 0%, transparent 72%), var(--bg);border:1.5px dashed var(--line);border-radius:calc(var(--radius) + 10px);}

.stage{position:relative;width:100%;height:calc(var(--ch) + 20px);transform-style:preserve-3d;}

.ph-card{position:absolute;left:50%;top:50%;width:var(--cw);height:var(--ch);margin-top:calc(var(--ch) / -2);display:flex;flex-direction:column;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-subtle);overflow:hidden;transition:transform .45s cubic-bezier(.22,.75,.25,1), opacity .35s ease, box-shadow .35s ease, border-color .3s ease;will-change:transform;cursor:pointer;}
.ph-card.is-active{cursor:default;border-color:color-mix(in srgb, var(--c) 40%, transparent);box-shadow:0 26px 50px rgba(38,48,31,.16), 0 6px 14px rgba(38,48,31,.08);}
.ph-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c);opacity:.85;}
.ph-card .veil{position:absolute;inset:0;background:var(--bg);opacity:.42;pointer-events:none;transition:opacity .35s ease;border-radius:inherit;}
.ph-card.is-active .veil{opacity:0;}

.ph-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:20px 22px 0 26px;}
.cat-badge{background:var(--cs);color:var(--c);border-color:color-mix(in srgb, var(--c) 30%, transparent);}
.cat-badge .cdot{width:7px;height:7px;border-radius:50%;background:var(--c);}
.rarity{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.rarity .lbl{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);}
.pips{display:flex;gap:3px;}
.pip{width:8px;height:8px;transform:rotate(45deg);border:1.2px solid var(--line);background:transparent;border-radius:1.5px;}
.pip.on{background:var(--ink-soft);border-color:var(--ink-soft);}
.r-legend .pip.on{background:var(--mustard);border-color:var(--mustard);}
.r-legend .lbl{color:var(--mustard);}

.ph-quote{position:relative;padding:14px 26px 14px;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;font-size:23px;font-weight:800;line-height:1.32;letter-spacing:-0.02em;}
.ph-quote .mark{font-size:62px;line-height:.8;font-weight:800;margin:0 0 -6px -3px;color:var(--c);opacity:.16;pointer-events:none;font-family:Georgia,serif;}
.ph-quote span.txt{position:relative;z-index:1;}

.court-mark{position:absolute;right:-26px;bottom:52px;width:132px;opacity:.07;stroke:var(--c);fill:none;stroke-width:3.2;pointer-events:none;transform:rotate(-6deg);}
.ph-ctx{padding:0 26px 18px;font-size:13px;color:var(--ink-soft);line-height:1.5;font-style:italic;}
.ph-sep{height:0;border-top:1.5px dashed var(--line);margin:0 22px;}
.ph-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 22px 18px 26px;}
.author{display:flex;align-items:center;gap:9px;min-width:0;}
.author .av{width:32px;height:32px;border-radius:50%;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none;}
.author .nm{font-size:12.5px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.author .sub{font-family:var(--mono);font-size:12px;color:var(--ink-soft);font-weight:700;}

.hear-btn{display:inline-flex;align-items:center;gap:7px;flex:none;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);box-shadow:var(--shadow-pop);border-radius:26px;padding:9px 15px;font-size:12px;font-weight:800;font-family:inherit;cursor:pointer;transition:transform .1s ease, box-shadow .1s ease, background .15s ease, color .15s ease;}
.hear-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.hear-btn:hover{transform:translateY(-1.5px);box-shadow:3px 4px 0 var(--ink);}
.hear-btn:active{transform:translateY(1px);box-shadow:1px 1px 0 var(--ink);}
.hear-btn.voted{background:var(--sage);color:#fff;}
.hear-btn .num{font-family:var(--mono);}

/* Le bouton de réactions accompagne le bouton "déjà entendue" sans lui voler
   la vedette : même hauteur, mais rond, sans compteur ni ombre portée — voter
   reste l'action principale de la carte. */
.ph-actions{display:flex;align-items:center;gap:8px;flex:none;}
.comment-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;background:var(--card);color:var(--ink-soft);border:1.5px solid var(--line);border-radius:50%;cursor:pointer;transition:color .15s ease, border-color .15s ease, background .15s ease;}
.comment-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.comment-btn:hover{color:var(--plum);border-color:var(--plum);background:var(--plum-soft);}

/* Fil de réactions dans la modale — volontairement compact : ce n'est pas un
   forum (voir 019_communaute_deck.sql), juste quelques phrases sous une carte. */
.comments-quote{margin:0 0 14px;font-style:italic;color:var(--ink-soft);}
.comments-list{list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
.comment-item{padding:10px 12px;border-radius:var(--radius-sm);background:var(--card-2);}
.comment-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px;}
.comment-author{font-size:12.5px;font-weight:800;color:var(--ink);}
.comment-date{font-size:12px;color:var(--ink-soft);font-family:var(--mono);}
.comment-body{margin:0;font-size:13px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere;}
.comments-empty{padding:14px 2px;font-size:13px;color:var(--ink-soft);}
.comments-compose{margin-top:14px;}
.comments-error{margin:6px 0 0;font-size:12px;color:var(--danger);min-height:1em;}

.float-plus{position:absolute;right:32px;bottom:60px;font-family:var(--mono);font-size:15px;font-weight:800;color:var(--sage);pointer-events:none;animation:floatUp .85s ease-out forwards;}
@keyframes floatUp{0%{opacity:0;transform:translateY(4px);}25%{opacity:1;}100%{opacity:0;transform:translateY(-32px);}}

.ph-card.is-legend{border-color:color-mix(in srgb, var(--mustard) 55%, transparent);}
.ph-card.is-legend.is-active{box-shadow:0 0 0 3px var(--mustard-soft), 0 26px 50px rgba(38,48,31,.16);}
.ph-card.is-legend .foil{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,transparent 25%,rgba(255,255,255,.55) 40%,rgba(231,168,37,.38) 48%,transparent 64%);background-size:280% 280%;mix-blend-mode:overlay;animation:foil 6.5s linear infinite;}
@keyframes foil{0%{background-position:120% 0;}100%{background-position:-60% 0;}}
:root:not([data-theme="light"]) .ph-card.is-legend .foil{opacity:.4;}
.ph-card.is-new .ribbon{position:absolute;top:14px;right:-32px;background:var(--terracotta);color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;padding:4px 36px;transform:rotate(38deg);box-shadow:0 2px 6px rgba(38,48,31,.18);}
/* Carte du jour : un bandeau en HAUT, pas un ruban en coin — le coin est déjà
   pris par "NOUVEAU", et une carte peut être les deux à la fois (une phrase
   ajoutée aujourd'hui peut être tirée comme carte du jour). Mustard, la même
   couleur que la rareté Culte : deux façons pour une carte d'être remarquable. */
.ph-card.is-featured .featured-banner{position:absolute;top:0;left:0;right:0;background:var(--mustard);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:5px 8px;z-index:3;}
.ph-card.is-featured .ph-top{padding-top:32px;}
.ph-card.is-featured.is-active{box-shadow:0 0 0 3px var(--mustard-soft), 0 26px 50px rgba(38,48,31,.16);}

.deck-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:30;width:46px;height:46px;border-radius:50%;padding:0;}
.deck-arrow.prev{left:6px;}
.deck-arrow.next{right:6px;}
.deck-arrow svg{width:18px;height:18px;}
.deck-arrow:hover{transform:translateY(calc(-50% - 1.5px));}

.deck-nav{display:flex;align-items:center;gap:16px;margin:14px 2px 0;flex-wrap:wrap;}
.deck-count{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--ink-soft);white-space:nowrap;}
.deck-count b{color:var(--ink);font-size:15px;}
.deck-track{flex:1;min-width:120px;height:8px;background:var(--plum-soft);border-radius:10px;overflow:hidden;}
.deck-fill{height:100%;background:var(--plum);border-radius:10px;width:0;transition:width .35s ease;}
.deck-hint{font-size:12px;color:var(--ink-soft);font-weight:700;display:flex;align-items:center;gap:6px;}
.kbd{font-family:var(--mono);font-size:12px;font-weight:800;background:var(--bg);border:1.5px solid var(--line);border-bottom-width:2.5px;border-radius:5px;padding:2px 6px;}

/* ---------- Mode Duel ---------- */
/* Deux cartes côte à côte, rendues par le MÊME cardHTML que le deck (pas de
   variante à maintenir) : seule la mise en page change, la carte est
   identique. Écran exclusif du deck, jamais affiché en même temps. */
.duel-arena{margin-top:24px;}
.duel-head{text-align:center;margin-bottom:22px;}
.duel-title{margin:0 0 6px;font-size:22px;font-weight:800;letter-spacing:-0.01em;}
.duel-sub{margin:0;font-size:13px;color:var(--ink-soft);}
.duel-pair{display:flex;justify-content:center;align-items:stretch;gap:26px;flex-wrap:wrap;}
/* Les cartes du deck sont en position:absolute pour le coverflow : ici elles
   reprennent le flux normal, sans la transform ni le voile du mode empilé. */
.duel-slot{position:relative;cursor:pointer;transition:transform .15s ease;}
.duel-slot .ph-card{position:static;transform:none!important;opacity:1!important;width:var(--cw);height:var(--ch);}
.duel-slot .ph-card .veil{display:none;}
.duel-slot:hover{transform:translateY(-4px);}
.duel-slot:hover .ph-card{border-color:color-mix(in srgb, var(--c) 55%, transparent);}
.duel-slot.is-chosen .ph-card{border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft);}
.duel-foot{display:flex;justify-content:center;gap:10px;margin-top:24px;}
.duel-done{text-align:center;padding:40px 6px;}
.duel-done h3{margin:0 0 8px;font-size:19px;font-weight:800;}
.duel-done p{margin:0;font-size:13px;color:var(--ink-soft);}
#duelBtn.is-on{background:var(--plum);color:#fff;border-color:var(--plum);}

/* ---------- État vide ---------- */
.communaute-page .empty-state{display:none;padding:60px 6px;}
.communaute-page .empty-state.is-on{display:flex;}

/* ---------- Modale d'ajout ---------- */
.overlay{position:fixed;inset:0;background:rgba(24,28,20,.5);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px;z-index:60;}
.overlay.open{display:flex;}
.modal{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 60px rgba(20,26,16,.35);padding:26px;max-width:460px;width:100%;max-height:92vh;overflow:auto;}
.modal h3{margin:0 0 6px;font-size:19px;font-weight:800;letter-spacing:-0.01em;}
.modal .sub{margin:0 0 20px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:7px;}
.field .sx-textarea{min-height:78px;resize:vertical;line-height:1.45;width:100%;}
.field .sx-input{width:100%;max-width:none;}
.cat-picker{display:flex;flex-wrap:wrap;gap:7px;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;}

/* ---------- Toasts empilables ---------- */
.toast-zone{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast-zone .sx-toast{animation:toastIn .3s ease both;}
@keyframes toastIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

footer.doc-footer{text-align:center;color:var(--ink-soft);font-size:12px;margin-top:40px;}

@media (max-width:820px){
  .deck{--cw:min(80vw,340px);--ch:428px;}
  .page-head h1{font-size:27px;}
  .deck-hint{display:none;}
  .comm-add-btn{width:100%;}
  /* 3 cartes en grille égale plutôt qu'en flex à largeur de contenu : sans
     ça, "Écoutes cumulées" force sa carte sur toute la largeur et les 3
     KPI s'étalent sur 3 lignes au lieu de tenir sur une seule. */
  .kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;}
  .kpi-row .kpi-card{padding:10px 6px;gap:1px;text-align:center;align-items:center;}
  .kpi-row .kpi-val{font-size:18px;}
  .kpi-row .kpi-lbl{font-size:12px;line-height:1.2;}
}