/* =============================================================
   MNEMO — 11 — COQUILLE « SOMMAIRE »
   =============================================================
   Les styles de la coquille du thème Sommaire (08h-sommaire.js) : bandeau de
   32 px, sommaire de 112 px, les quatre crans et les couches. Cette feuille
   n'est jamais utilisée par le thème Pellicule — la coquille n'est pas montée.

   Toutes les mesures sortent du fichier de design : bandeau 32, sommaire 112,
   piste de barres 44, cible tactile minimale 44, bouton d'ajout 56 rond.
   ============================================================= */

.som-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* Chrome impose sa fonte et sa casse aux contrôles de formulaire : ces
   boutons-là veulent au contraire la typographie de leur conteneur. La liste
   est explicite plutôt qu'un `.som-bar button`, qui l'emporterait par
   spécificité sur les boutons qui posent leur propre fonte (onglets, chips). */
.som-bandeau-action,
.som-panel-close,
.som-foot-day,
.som-cran {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* ------ LE BANDEAU (32 px) ---------------------------------- */

.som-bandeau {
  flex: 0 0 auto;
  height: calc(32px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid var(--filet-fin);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--bg);
  position: relative;
  z-index: 30;
}

.som-bandeau-menu {
  flex: 0 0 auto;
  /* La cible fait 44 px de haut alors que le bandeau n'en fait que 32 : elle
     déborde sur le contenu, ce qui est sans conséquence (rien de cliquable
     là-dessous) et rattrape les 12 px qui manquent au doigt. */
  min-width: 28px;
  height: 44px;
  margin: -6px 0;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--text);
}

.som-crumbs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  white-space: nowrap;
}
.som-crumb { overflow: hidden; text-overflow: ellipsis; }
.som-crumb-fort   { color: var(--text); }
.som-crumb-accent { color: var(--tampon); }
.som-crumb-dim    { color: var(--text-mute); }
.som-crumb-sep    { color: var(--filet-inter); }

.som-bandeau-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
}
.som-bandeau-clock,
.som-bandeau-count {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
}
.som-bandeau-count { color: var(--text-mute); }

/* Le seul mouvement continu que le dossier conserve : le point du direct. */
.som-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tampon);
  animation: somPulse 2.4s infinite;
}
@keyframes somPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.som-bandeau-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--tampon);
  color: var(--sur-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10px/1 'Space Mono', monospace;
}
.som-bandeau-action { color: var(--text-mute); }

/* La loupe : même cible débordante que le bouton de menu, à l'autre bout. */
.som-bandeau-search {
  flex: 0 0 auto;
  min-width: 24px;
  height: 44px;
  margin: -6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: var(--text-mute);
}
.som-bandeau-search:active { color: var(--tampon); }

/* ------ LE CONTENU ------------------------------------------ */

.som-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Recomposition sur place au changement de cran : 180 ms, pas de
     déplacement. `key={cran}` remonte l'arbre, l'animation le signale. */
  animation: somRecompose 0.18s ease-out;
}
@keyframes somRecompose { from { opacity: 0; } to { opacity: 1; } }

.som-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Le bas laisse passer le bouton d'ajout : sans ça la dernière tuile ou la
     dernière bande finit sous le rond de 56 px. */
  padding: 12px 12px 78px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* En colonne flex, une tuile s'étirerait pour remplir la place : son ratio
   d'image ne serait plus respecté. */
.som-scroll > .som-tile { flex: 0 0 auto; }

.som-h1 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.som-h1-meta {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Filet de séparation « fin du chapitre ↓ dîner ». */
.som-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.som-rule span { flex: 1; height: 1px; background: var(--border); }

.som-empty {
  padding: 32px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.som-empty-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 33px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.som-empty-desc { font-size: 16px; line-height: 1.45; color: var(--text-dim); }

/* ------ CRAN ÉVÉNEMENT -------------------------------------- */

.som-day { display: flex; flex-direction: column; gap: 8px; }
.som-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  width: 100%;
}
.som-day-name {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.som-day-meta {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.som-chapter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  width: 100%;
  text-align: left;
}
.som-chapter-hour {
  flex: 0 0 46px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mute);
}
.som-chapter-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.som-chapter-name { font-size: 15px; font-weight: 700; line-height: 1.1; color: var(--text); }
.som-chapter-bar { height: 8px; border-radius: 2px; }
.som-chapter-count {
  flex: 0 0 44px;
  text-align: right;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
}

/* Une plage sans photo n'est pas une case vide : c'est une ligne fine. */
.som-gap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 56px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--filet-inter);
}
.som-gap span { flex: 1; height: 1px; background: var(--filet-fin); }

/* ------ CRAN JOURNÉE ---------------------------------------- */

.som-journee-head { display: flex; flex-direction: column; gap: 6px; }
.som-bands { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.som-band {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-height: 56px;
  /* Les bandes se partagent la hauteur au prorata des photos — c'est la
     journée vue d'un coup d'œil, sans défilement. Le plafond évite qu'un
     chapitre écrasant ne repousse les autres hors de l'écran. */
  max-height: 190px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  flex-basis: 0;
}
.som-band-rule { flex: 0 0 4px; border-radius: 2px; }
.som-band-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: flex-start; }
.som-band-name { font-size: 16px; font-weight: 700; line-height: 1.15; color: var(--text); }
.som-band-meta {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.som-band-go { align-self: flex-start; font-family: 'Space Mono', monospace; color: var(--text-mute); }
.som-band-gap {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--filet-inter);
  padding: 2px 0;
  border-top: 1px solid var(--filet-fin);
}

/* ------ CRAN MOMENT ----------------------------------------- */

.som-moment { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.som-moment-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 10px;
}
.som-moment-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Le chapitre EST le groupe : les en-têtes horaires de la grille masonry
   feraient doublon avec le titre du cran. */
.som-shell .mygrid-group-title { display: none; }
.som-shell .mygrid-header { display: none; }
/* Réseau saturé : tant que l'image n'est pas arrivée, la tuile garde sa place
   dans le chapitre plutôt que de s'écraser à un filet d'un pixel. */
.som-shell .mygrid-cell { min-height: 150px; }
/* Gouttières de 8 px : la grille du dossier respire plus que celle du thème
   papier, qui serre à 2 px pour tenir quatre colonnes. */
.som-shell .mygrid-group-cols { gap: 8px; }
.som-shell .mygrid-col { gap: 8px; }
.som-shell .mygrid-group { margin-bottom: 8px; }

/* ------ CRAN PHOTO ------------------------------------------ */

/* Le défilement horizontal, repris du thème Pellicule. Le cran ne réécrit
   aucune de ses mesures : il lui rend son conteneur d'origine (`.stage
   .stage-horizontal` > `.feed-body`), et les règles de 05-carousel.css et
   09-app.css — largeur de carte à 74vw, laisse de 13vw, éventail — jouent
   telles quelles. Ce bloc ne fait que l'encastrer entre le bandeau et le
   sommaire. */
.som-photo {
  flex: 1 1 auto;
  min-height: 0;
  /* Ni marge ni gouttière : la piste va d'un bord à l'autre, c'est ce qui
     laisse dépasser les voisines derrière la carte au point. */
  padding: 0;
  /* Le vide du dossier plutôt que l'écran : une carte s'y détache comme un
     tirage posé sur une table sombre. */
  background: var(--papier);
}

/* Le compteur flottant du carousel ferait doublon : le bandeau porte déjà
   « 22 / 31 » à droite, et le pied du sommaire le répète. */
.som-photo .carousel-counter { display: none; }

/* Le halo coloré du thème papier — un dégradé radial flouté aux couleurs du
   moment — n'a pas d'équivalent dans le dossier, qui n'emploie qu'un seul
   procédé d'emphase : le filet net. */
.som-photo .carousel-ambient { display: none; }

/* La règle est le second objet de l'écran, pas un pied de page : un filet fort
   la détache des photos. Son retrait bas est remis à zéro — elle n'est plus au
   bord de l'écran, c'est le sommaire qui porte la marge du menton. */
.som-photo .ruler-wrap {
  flex: 0 0 auto;
  border-top: 1px solid var(--filet-tuile);
  padding-bottom: 0;
}

/* Le sommaire perd sa piste à ce cran — la règle dit déjà le temps, en plus
   fin. Il se réduit à ses deux commandes, les crans et les journées, et rend
   les 52 px de la piste (44 + sa gouttière) aux photos. */
.som-shell-photo .som-bar { height: calc(60px + env(safe-area-inset-bottom)); }

/* Le bouton d'ajout est calé au-dessus du sommaire ; ici la règle s'intercale
   entre les deux, il remonte donc de sa hauteur (172 px, cf. 06-timeline.css). */
.som-shell-photo .som-fabs { bottom: calc(60px + 172px + 14px + env(safe-area-inset-bottom)); }

/* ------ LA TUILE -------------------------------------------- */

.som-tile {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--filet-tuile);
  background: var(--hachure);
  overflow: hidden;
  padding: 0;
}
.som-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.som-tile-hero { aspect-ratio: 3 / 4; }
.som-tile-sm   { aspect-ratio: 1 / 1; }
.som-tile-xs   { aspect-ratio: 1 / 1; }

.som-tile-time {
  position: absolute;
  left: 6px; top: 6px;
  padding: 3px 5px;
  background: rgba(11, 10, 9, 0.8);
  color: var(--text);
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: 0.04em;
}
.som-tile-author {
  position: absolute;
  left: 6px; bottom: 6px;
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.som-tile-badge {
  position: absolute;
  right: 6px; bottom: 6px;
  padding: 3px 5px;
  background: var(--papier-vif);
  color: var(--sur-accent);
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.som-tile-caption {
  position: absolute;
  left: 8px; bottom: 8px;
  right: 8px;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  line-height: 1.1;
  color: var(--text);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  text-align: left;
}
.som-tile-hero .som-tile-author { display: none; }

/* B9 : une image qui ne charge pas garde sa place dans le chapitre. */
.som-tile-ko { border-style: dashed; border-color: var(--filet-pointille); background: #1C1A17; }
/* Le corps « image indisponible » porte déjà l'auteur et l'heure : la pastille
   d'horodatage ferait doublon par-dessus. */
.som-tile-ko .som-tile-time,
.som-tile-ko .som-tile-author,
.som-tile-ko .som-tile-badge { display: none; }
/* En vignette de profil (3 colonnes), la place manque pour la phrase : il
   reste le cadre pointillé, qui suffit à dire que la case est tenue. */
.som-tile-xs .som-tile-kometa { display: none; }
.som-tile-xs .som-tile-kotitle { font-size: 8px; letter-spacing: 0.08em; }
.som-tile-kobody {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  text-align: center;
}
.som-tile-kotitle {
  font: 700 10px/1 'Space Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.som-tile-kometa {
  font: 700 9px/1.4 'Space Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ------ LE BOUTON D'AJOUT ----------------------------------- */

/* La colonne des boutons d'action. Le positionnement vit ici et non sur les
   boutons : les modérateurs en ont deux, les invités un seul, et l'empilement
   doit rester calé sur le même coin dans les deux cas. */
.som-fabs {
  position: absolute;
  right: 14px;
  bottom: calc(126px + env(safe-area-inset-bottom));
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.som-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--papier-vif);
  color: var(--sur-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 26px/1 'Archivo', sans-serif;
}

/* Le second bouton est ambre et plus petit : dans ce thème l'ambre dit
   l'officiel — c'est déjà la couleur des tampons d'annonce — et la taille dit
   qu'il vient après le dépôt de photo dans l'ordre des usages. */
.som-fab-ann {
  width: 44px;
  height: 44px;
  background: var(--tampon);
  color: var(--sur-accent);
}
.som-fab:active { transform: scale(0.94); }

/* ------ LE SOMMAIRE (112 px) -------------------------------- */

.som-bar {
  flex: 0 0 auto;
  height: calc(112px + env(safe-area-inset-bottom));
  padding: 8px 12px env(safe-area-inset-bottom);
  background: var(--bg-2);
  border-top: 1px solid var(--filet-tuile);
  position: relative;
  z-index: 20;
  /* La surface entière est un instrument : le navigateur ne doit pas y voler
     le glissé pour faire défiler la page ou déclencher un pull-to-refresh. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.som-bar-static { touch-action: auto; }

.som-bar-crans {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.som-crans { display: flex; gap: 5px; align-items: center; min-width: 0; }
.som-cran {
  color: var(--filet-inter);
  font: inherit;
  letter-spacing: 0.08em;
  padding: 4px 0;
  white-space: nowrap;
}
.som-cran-on {
  background: var(--tampon);
  color: var(--sur-accent);
  padding: 4px 6px;
}
.som-bar-hint { flex: 0 0 auto; white-space: nowrap; }

.som-track {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 44px;
  margin-top: 8px;
}

.som-seg {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-end;
  padding: 0;
  text-align: left;
}
.som-seg-label {
  /* `display: block` est indispensable : `overflow: hidden` n'a aucun effet sur
     une boîte en ligne, et le libellé d'un chapitre étroit débordait alors sur
     son voisin au lieu d'être coupé à sa laisse. */
  display: block;
  font: 700 8px/1 'Space Mono', monospace;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
}
.som-seg-on .som-seg-label { color: var(--text); }
.som-seg-bar { display: block; border-radius: 2px; position: relative; }
.som-seg-gap { flex-grow: 0 !important; }
/* Ma part du chapitre, sur le sommaire du profil. */
.som-seg-mine { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tampon); border-radius: 2px; }

.som-bar-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* La rangée des journées peut aller jusqu'au bord : sans cet écart, sa
     dernière pastille — pleine, ambre — colle à « MAINTENANT », lui aussi
     ambre, et les deux se lisent comme un seul bloc. */
  gap: 10px;
  margin-top: 7px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.som-foot-left { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.som-foot-mine { color: var(--tampon); }
/* Les journées, à tous les crans. La rangée défile pour son propre compte —
   le générateur va jusqu'à 14 journées, et `touch-action` doit l'autoriser
   explicitement puisque la barre coupe tout geste par défaut. */
.som-foot-days {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x;
}
.som-foot-days::-webkit-scrollbar { display: none; }
.som-foot-day {
  font: inherit;
  flex: 0 0 auto;
  color: var(--text-mute);
  /* Une pastille, pas un mot : sur une ligne de 9 px, 26 px de large et 21 de
     haut font la différence entre viser et espérer. */
  min-width: 26px;
  padding: 6px 7px;
  text-align: center;
  border: 1px solid var(--filet-inter);
}
/* La journée lue est un aplat porteur, comme « MAINTENANT » à côté : à cette
   taille, un simple changement d'encre ne se voit pas d'un coup d'œil. */
.som-foot-day-on {
  background: var(--tampon);
  border-color: var(--tampon);
  color: var(--sur-accent);
}

.som-now {
  flex: 0 0 auto;
  background: var(--tampon);
  color: var(--sur-accent);
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 9px;
}
.som-nolive { border: 1px solid var(--filet-inter); padding: 6px 8px; }

/* Appui long : le compteur exact du chapitre sous le doigt, sans quitter
   l'écran. Posé au-dessus du sommaire pour ne pas cacher la barre visée. */
.som-hint {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 6px);
  background: var(--bg-3);
  border: 1px solid var(--tampon);
  color: var(--text);
  padding: 9px 11px;
  font: 700 10px/1.35 'Space Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------ LES COUCHES ----------------------------------------- */

.som-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
}
/* Plein écran : la couche remplace le contenu, le bandeau change de bouton. */
.som-layer-full { background: var(--bg); animation: somLayerIn 0.22s ease-out; }
@keyframes somLayerIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Le panneau se pose par-dessus le flux ET s'arrête au-dessus du sommaire :
   on garde sa place dans le temps pendant qu'on choisit sa destination. */
.som-layer-panel { bottom: calc(112px + env(safe-area-inset-bottom)); }
.som-layer-scrim { position: absolute; inset: 0; z-index: -1; background: rgba(11, 10, 9, 0.55); }
.som-panel {
  background: var(--bg-2);
  border-bottom: 1px solid var(--tampon);
  padding-bottom: 14px;
  max-height: 100%;
  overflow-y: auto;
  animation: somPanelIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes somPanelIn { from { transform: translateY(-100%); } to { transform: none; } }

.som-panel-head {
  height: calc(32px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-left: 14px;
  padding-right: 14px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.som-panel-title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.som-panel-close { font: inherit; color: var(--tampon); white-space: nowrap; }

.som-panel-rows { padding: 8px 14px 0; display: flex; flex-direction: column; }
.som-panel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  border-bottom: 1px solid var(--filet-fin);
  text-align: left;
  width: 100%;
}
.som-panel-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.som-panel-row-label { font-size: 17px; font-weight: 700; line-height: 1.15; color: var(--text); }
.som-panel-row-hint {
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.som-panel-badge {
  background: var(--tampon);
  color: var(--sur-accent);
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 7px;
}
.som-panel-chevron { font: 700 14px/1 'Space Mono', monospace; color: var(--text-mute); }

.som-panel-events { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; }
.som-panel-event {
  border: 1px solid var(--filet-inter);
  color: var(--text-dim);
  padding: 9px 11px;
  font: 700 10px/1 'Space Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.som-panel-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 0;
}
.som-panel-foot-note {
  font: 700 9px/1.5 'Space Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--filet-inter);
}

/* ------ LES COUCHES : ANNONCES ------------------------------ */

.som-notif {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 60px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  text-align: left;
  width: 100%;
}
.som-notif-dot { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 6px; border-radius: 50%; }
.som-notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.som-notif-title { font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--text); }
.som-notif-meta {
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.som-notif-stamp {
  flex: 0 0 auto;
  border: 1px solid;
  padding: 5px 6px;
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------ LES COUCHES : PROFIL -------------------------------- */

.som-profil-head { display: flex; align-items: center; gap: 12px; }
.som-profil-avatar {
  width: 62px; height: 62px; flex: 0 0 62px;
  border-radius: 50%;
  background: var(--tampon);
  color: var(--sur-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 24px/1 'Space Mono', monospace;
}
.som-profil-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.som-h1 + .som-profil-role, .som-profil-role {
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.som-stats { display: flex; gap: 8px; }
.som-stat { flex: 1; border: 1px solid var(--border); padding: 11px; display: flex; flex-direction: column; gap: 4px; }
.som-stat-n { font: 700 22px/1 'Space Mono', monospace; color: var(--text); }
.som-stat-l {
  font: 700 8px/1.2 'Space Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.som-tabs { display: flex; gap: 6px; }
.som-tab {
  border: 1px solid var(--filet-inter);
  color: var(--text-dim);
  padding: 11px 12px;
  font: 700 10px/1 'Space Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.som-tab-on { background: var(--tampon); color: var(--sur-accent); border-color: var(--tampon); }

.som-profil-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

/* Créer une annonce depuis la couche qui les liste : une cible pleine largeur
   plutôt que le libellé de 10 px du bandeau, qui se voyait à peine. */
.som-ann-new {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--tampon);
  background: rgba(var(--tampon-rgb), 0.08);
  text-align: left;
}
.som-ann-new:active { background: rgba(var(--tampon-rgb), 0.16); }

.som-ann-new-plus {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tampon);
  color: var(--sur-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 20px/1 'Archivo', sans-serif;
}

.som-ann-new-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.som-ann-new-label { font-size: 15px; font-weight: 700; color: var(--text); }
.som-ann-new-hint { font-size: 12px; line-height: 1.35; color: var(--text-dim); }


/* ------ LES COUCHES : LA RECHERCHE -------------------------- */
/* Le champ est posé sous le bandeau, hors du défilement : il reste sous le
   pouce pendant qu'on lit les résultats, et c'est la seule zone de saisie de
   toute la coquille. */

.som-search-field {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--filet-fin);
  background: var(--bg-2);
}

.som-search-icon {
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1;
  color: var(--text-mute);
}

.som-search-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 0;
  background: none;
  color: var(--text);
  font: 400 15px/1.2 'Figtree', sans-serif;
  -webkit-appearance: none;
  appearance: none;
}
.som-search-input::placeholder { color: var(--text-mute); }
.som-search-input:focus { outline: none; }
/* Safari pose sa propre croix sur type=search : on garde la nôtre, qui a une
   cible tactile correcte. */
.som-search-input::-webkit-search-decoration,
.som-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.som-search-clear {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  font-size: 13px;
}

.som-search-body { gap: 14px; }

.som-search-section {
  font: 700 10px/1 'Space Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--filet-inter);
  padding-bottom: 3px;
}

/* La grammaire, en trois exemples qu'on tape du doigt plutôt que de les lire. */
.som-search-help { display: flex; flex-direction: column; gap: 8px; }
.som-search-help-title {
  font: 700 10px/1 'Space Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.som-search-example {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--filet-inter);
  text-align: left;
}
/* Les exemples se lisent tels qu'on les tape : la capitale du thème
   trahirait la syntaxe, où le @ et le mot comptent lettre à lettre.
   Deux classes dans le sélecteur, sinon `[data-theme] .mono` l'emporte. */
.som-search-example .som-search-example-q,
.som-search-note .mono {
  text-transform: none;
  letter-spacing: 0.02em;
}
.som-search-example-q {
  flex: 0 0 auto;
  color: var(--tampon);
  font-size: 13px;
  font-weight: 700;
}
.som-search-example-h { font-size: 13px; line-height: 1.3; color: var(--text-dim); }

.som-search-note { font-size: 13px; line-height: 1.45; color: var(--text-mute); margin: 0; }
.som-search-note .mono { color: var(--text-dim); }
.som-search-warn { color: var(--tampon); }

.som-search-people { display: flex; flex-direction: column; gap: 8px; }
.som-search-people-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.som-search-people-row::-webkit-scrollbar { display: none; }

.som-search-person {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--filet-inter);
}
.som-search-person-av {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--bleue);
  color: var(--sur-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1 'Space Mono', monospace;
}
.som-search-person-name { font-size: 14px; font-weight: 600; color: var(--text); }

.som-search-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (min-width: 560px) {
  .som-search-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ------ LES COUCHES : RÉGLAGES ------------------------------ */

.som-reglages { gap: 20px; }
.som-set { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--filet-fin); padding-top: 16px; }
.som-set:first-child { border-top: 0; padding-top: 0; }
.som-set-last { margin-top: auto; }
.som-set-title {
  margin: 0;
  font: 700 10px/1 'Space Mono', monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tampon);
}
.som-set-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }

.som-seg-choice { display: flex; gap: 7px; }
.som-choice {
  flex: 1;
  border: 1px solid var(--filet-inter);
  color: var(--text-dim);
  text-align: center;
  padding: 13px 0;
  font: 700 10px/1 'Space Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.som-choice-on { background: var(--tampon); color: var(--sur-accent); border-color: var(--tampon); }

.som-set-row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.som-set-row-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.som-set-row-label { font-size: 15px; font-weight: 600; color: var(--text); }
.som-set-row-hint {
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
/* Une ligne de réglage qui est un bouton : mêmes proportions que la ligne
   informative, mais cliquable sur toute sa largeur — la bascule est petite, la
   phrase ne l'est pas, et c'est elle qu'on vise. */
.som-set-row-btn {
  width: 100%;
  text-align: left;
  align-items: flex-start;
  padding: 4px 0;
}
.som-set-row-btn .som-switch { margin-top: 2px; }

/* Le libellé court est en capitales mono ; une explication d'une phrase, non :
   elle se lit en casse normale, sur plusieurs lignes. */
.som-set-row-note {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-mute);
  text-transform: none;
  letter-spacing: 0;
}

.som-switch {
  width: 44px; height: 26px; flex: 0 0 44px;
  border-radius: 13px;
  background: var(--border);
  position: relative;
}
.som-switch span {
  position: absolute; left: 3px; top: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text-mute);
  transition: transform 0.18s, background 0.18s;
}
.som-switch-on { background: var(--tampon); }
.som-switch-on span { transform: translateX(18px); background: var(--sur-accent); }

.som-set-links { display: flex; gap: 14px; flex-wrap: wrap; }
.som-link {
  font: 700 10px/1 'Space Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--filet-inter);
  padding-bottom: 3px;
}

.som-btn-outline {
  align-self: flex-start;
  border: 1px solid var(--filet-inter);
  color: var(--text);
  padding: 12px 13px;
  min-height: 44px;
  font: 700 10px/1 'Space Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.som-btn-danger { border-color: var(--tampon); color: var(--tampon); }

/* ------ Mouvement réduit ------------------------------------ */
/* Le dossier le dit : tout devient un fondu de 90 ms, aucun déplacement. */
@media (prefers-reduced-motion: reduce) {
  .som-content, .som-layer-full { animation: somRecompose 0.09s ease-out; }
  .som-panel { animation: somRecompose 0.09s ease-out; }
  .som-live-dot { animation: none; }
}