/* Mosaïk — grille bento et familles de thèmes.
 *
 * Fichier unique partagé par le rendu serveur (gabarits Jinja) et, à
 * partir de la phase 4, par le studio React : l'éditeur manipule le vrai
 * rendu, pas une imitation qui dériverait à la première retouche.
 *
 * Trois familles issues des maquettes de la phase 0 (design/piste-*.html) :
 * zellige (céramique émaillée), vitrail (verre serti de plomb), aquarelle
 * (lavis pastel). Une famille = un jeu complet de variables --mos-*, plus
 * sa manière de peindre une tuile. Les règles de mise en page, elles, ne
 * dépendent jamais du thème.
 */

/* Sans cette règle, tout élément à la fois en `width: 100%` et avec un
 * `padding` déborde de son conteneur de la valeur du padding — c'est ce
 * qui faisait passer le canevas de l'éditeur sous le panneau de droite,
 * et les champs hors de leur panneau. Posée ici parce que cette feuille
 * est partagée par le rendu public et par le studio. */
*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ *
 * Contrat de tokens (valeurs par défaut = vitrail, thème du produit)
 * ------------------------------------------------------------------ */
:root {
  --mos-gap: 4px;
  --mos-radius: 10px;
  --mos-pad: 18px;
  --mos-fond: #0b0d12;          /* le pourtour */
  --mos-support: #161a23;       /* le panneau qui porte les tuiles */
  --mos-surface: rgba(255, 255, 255, .04);
  --mos-ink: #f2eee6;
  --mos-ink-soft: #b9c0cc;
  --mos-c1: #2f6bff; --mos-c1-ink: #ffffff;
  --mos-c2: #12c08a; --mos-c2-ink: #04231a;
  --mos-c3: #ffb020; --mos-c3-ink: #2a1d00;
  --mos-c4: #ff3f6e; --mos-c4-ink: #ffffff;
  --mos-font-display: "Instrument Serif", Georgia, serif;
  --mos-font-ui: "Manrope", system-ui, sans-serif;
  --mos-font-titre: "Manrope", system-ui, sans-serif;
  --mos-titre-poids: 400;
  --mos-titre-tuile-poids: 700;
}

[data-theme="zellige"] {
  --mos-gap: 9px;
  --mos-radius: 13px;
  --mos-pad: 17px;
  --mos-fond: #cfc7b8;          /* le joint, visible entre les carreaux */
  --mos-support: #e7e1d4;       /* le mur chaulé */
  --mos-surface: #f7f3e9;       /* l'émail blanc */
  --mos-ink: #211e19;
  --mos-ink-soft: #5b544a;
  --mos-c1: #1b4fa8; --mos-c1-ink: #f7f3e9;
  --mos-c2: #0e7a63; --mos-c2-ink: #f7f3e9;
  --mos-c3: #e0a008; --mos-c3-ink: #2a2000;
  --mos-c4: #a8402c; --mos-c4-ink: #f7f3e9;
  --mos-font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --mos-font-ui: "Schibsted Grotesk", system-ui, sans-serif;
  --mos-font-titre: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --mos-titre-poids: 800;
  --mos-titre-tuile-poids: 700;
}

[data-theme="aquarelle"] {
  --mos-gap: 11px;
  --mos-radius: 26px;
  --mos-pad: 19px;
  /* Papier beige, pas blanc : un lavis d'aquarelle se pose sur du papier
     teinté, et des pastels saturés sur fond blanc virent au bonbon. Les
     pigments sont rabattus d'un cran — la superposition en multiplication
     les fonce encore au rendu. */
  --mos-fond: #e9e0d1;          /* la table, autour du carnet */
  --mos-support: #f6f0e4;       /* la page du carnet */
  --mos-surface: #f6f0e4;
  --mos-ink: #4a4238;           /* encre sépia diluée, jamais du noir */
  --mos-ink-soft: #6d6358;
  --mos-c1: #a8bccd; --mos-c1-ink: #2f3a44;   /* cobalt très dilué */
  --mos-c2: #b2c5a8; --mos-c2-ink: #35402f;   /* vert sauge */
  --mos-c3: #e3cb9d; --mos-c3-ink: #493b1b;   /* ocre jaune */
  --mos-c4: #d9ada7; --mos-c4-ink: #472e2a;   /* rose de garance */
  --mos-pigment: #6a5f86;       /* le pigment concentré : liens, méta */
  --mos-font-display: "Newsreader", Georgia, serif;
  --mos-font-ui: "Figtree", system-ui, sans-serif;
  --mos-font-titre: "Figtree", system-ui, sans-serif;
  --mos-titre-poids: 400;
  --mos-titre-tuile-poids: 700;
}

/* ------------------------------------------------------------------ *
 * Page
 * ------------------------------------------------------------------ */
.mos-body {
  margin: 0;
  min-height: 100vh;
  background: var(--mos-fond);
  color: var(--mos-ink);
  font-family: var(--mos-font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[data-theme="vitrail"] .mos-body,
:root:not([data-theme]) .mos-body {
  background-image:
    radial-gradient(900px 620px at 12% -6%, rgba(47, 107, 255, .2), transparent 62%),
    radial-gradient(760px 520px at 92% 8%, rgba(255, 63, 110, .13), transparent 60%);
}

.mos-page {
  container-type: inline-size;   /* la grille s'adapte au conteneur, pas à l'écran */
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(14px, 3vw, 26px);
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: var(--mos-gap);
  background: var(--mos-support);
  padding: var(--mos-gap);
  border-radius: calc(var(--mos-radius) + 6px);
}

[data-theme="vitrail"] .mosaic,
:root:not([data-theme]) .mosaic {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 70px -30px rgba(0, 0, 0, .9);
}
[data-theme="zellige"] .mosaic {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(0, 0, 0, .09);
}
[data-theme="aquarelle"] .mosaic {
  padding: clamp(16px, 3cqi, 24px);
  box-shadow: 0 1px 0 #e0d6c4, 0 24px 60px -34px rgba(74, 66, 56, .3);
}

@container (max-width: 560px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(108px, auto); }
  /* En deux colonnes, les positions choisies pour quatre colonnes ne
     veulent plus rien dire : on retombe sur l'ordre de lecture. */
  .mos-tile { grid-column-start: auto; grid-row-start: auto; }
}

/* ------------------------------------------------------------------ *
 * Tuile
 * ------------------------------------------------------------------ */
.mos-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--mos-pad);
  border-radius: var(--mos-radius);
  color: var(--mos-ink);
  text-decoration: none;
  overflow: hidden;
  --mos-tile-accent: var(--mos-surface);
  --mos-tile-ink: var(--mos-ink);
}

/* Le départ vient de la position choisie à la main (nulle = placement
   automatique à la suite) ; la portée vient de la taille de la tuile. */
.mos-tile {
  grid-column-start: var(--mos-col, auto);
  grid-row-start: var(--mos-row, auto);
  grid-column-end: span 1;
  grid-row-end: span 1;
}
.mos-tile--w2 { grid-column-end: span 2; }
.mos-tile--h2 { grid-row-end: span 2; }

.mos-tile--c1 { --mos-tile-accent: var(--mos-c1); --mos-tile-ink: var(--mos-c1-ink); }
.mos-tile--c2 { --mos-tile-accent: var(--mos-c2); --mos-tile-ink: var(--mos-c2-ink); }
.mos-tile--c3 { --mos-tile-accent: var(--mos-c3); --mos-tile-ink: var(--mos-c3-ink); }
.mos-tile--c4 { --mos-tile-accent: var(--mos-c4); --mos-tile-ink: var(--mos-c4-ink); }
.mos-tile--profil { --mos-tile-accent: var(--mos-surface); --mos-tile-ink: var(--mos-ink); }

.mos-tile__titre {
  margin: 0;
  font-family: var(--mos-font-titre);
  font-weight: var(--mos-titre-tuile-poids);
  font-size: clamp(16px, 2.2cqi, 19px);
  line-height: 1.25;
  letter-spacing: -.005em;
}
/* Le seul endroit où le display a la place de s'exprimer : le nom. */
.mos-tile__titre--grand {
  font-family: var(--mos-font-display);
  font-weight: var(--mos-titre-poids);
  font-size: clamp(24px, 4cqi, 32px);
  line-height: 1.06;
  margin-top: 13px;
}
.mos-tile__texte { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; opacity: .88; }
.mos-tile__prose { margin: 0; font-size: 15px; line-height: 1.55; }
.mos-tile__meta { margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 600; opacity: .8; }

/* --- vitrail : le verre laisse passer la lumière, qui déborde sur le plomb */
[data-theme="vitrail"] .mos-tile,
:root:not([data-theme]) .mos-tile {
  background:
    radial-gradient(120% 96% at 18% 0%,
      color-mix(in srgb, var(--mos-tile-accent) 62%, transparent),
      color-mix(in srgb, var(--mos-tile-accent) 12%, transparent) 62%,
      rgba(6, 7, 11, .5));
  color: var(--mos-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 0 34px -14px color-mix(in srgb, var(--mos-tile-accent) 85%, transparent);
}
[data-theme="vitrail"] .mos-tile--profil,
:root:not([data-theme]) .mos-tile--profil {
  background: var(--mos-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
[data-theme="vitrail"] .mos-tile::after,
:root:not([data-theme]) .mos-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 38%);
}

/* --- zellige : carreau opaque, biseau, reflet de glaçure, découpe à la main */
[data-theme="zellige"] .mos-tile {
  background: var(--mos-tile-accent);
  color: var(--mos-tile-ink);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .5),
    inset 0 -3px 0 rgba(0, 0, 0, .16),
    inset 0 0 0 1px rgba(0, 0, 0, .06);
}
[data-theme="zellige"] .mos-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(148deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 46%);
}
[data-theme="zellige"] .mos-tile:nth-of-type(3n) { border-radius: 13px 21px 13px 21px; }
[data-theme="zellige"] .mos-tile:nth-of-type(4n) { border-radius: 21px 13px 21px 13px; }

/* --- aquarelle : le lavis déborde de sa case et se mêle à ses voisins */
[data-theme="aquarelle"] .mos-tile {
  overflow: visible;
  background: none;
  color: var(--mos-tile-ink);
}
/* Pas de z-index négatif sur le lavis : il passerait sous le fond de la
   grille (les descendants en z-index négatif sont peints avant les fonds
   des blocs en flux). On le laisse à sa place et on remonte le contenu. */
[data-theme="aquarelle"] .mos-tile > * { position: relative; z-index: 1; }
[data-theme="aquarelle"] .mos-tile::before {
  content: ""; position: absolute; inset: -7px;
  border-radius: 30px 26px 34px 24px;
  background: var(--mos-tile-accent);
  filter: url(#lavis);
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 18px 3px rgba(74, 66, 56, .12);
}
[data-theme="aquarelle"] .mos-tile:nth-of-type(2n)::before { border-radius: 24px 32px 22px 30px; }
[data-theme="aquarelle"] .mos-tile:nth-of-type(3n)::before { border-radius: 34px 22px 28px 32px; }
[data-theme="aquarelle"] .mos-tile--profil::before { background: var(--mos-c1); }
[data-theme="aquarelle"] .mos-tile__meta { color: var(--mos-pigment); opacity: 1; }

/* ------------------------------------------------------------------ *
 * Éléments de tuile
 * ------------------------------------------------------------------ */
.mos-avatar {
  width: 58px; height: 58px; border-radius: 50%; display: block;
  background:
    radial-gradient(70% 70% at 32% 28%, rgba(255, 255, 255, .85), transparent 72%),
    conic-gradient(from 160deg, var(--mos-c4), var(--mos-c3), var(--mos-c2), var(--mos-c1), var(--mos-c4));
  box-shadow: 0 0 0 3px var(--mos-support);
}
.mos-handle { margin: 2px 0 0; font-size: 14px; font-weight: 600; opacity: .75; }

.mos-vignette {
  position: relative; flex: 1; min-height: 62px; margin-bottom: 11px;
  border-radius: calc(var(--mos-radius) - 4px);
  display: grid; place-items: center;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--mos-tile-accent) 80%, #000 10%),
    color-mix(in srgb, var(--mos-tile-accent) 35%, #fff 20%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.mos-ondes { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: auto; }
.mos-ondes i { flex: 1; display: block; border-radius: 2px; background: currentColor; opacity: .55; }

.mos-reseaux { display: flex; flex-wrap: wrap; gap: 9px; margin: auto 0; }
.mos-reseaux a {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  color: inherit; background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.mos-reseaux svg { width: 18px; height: 18px; }
[data-theme="zellige"] .mos-reseaux a { background: rgba(255, 255, 255, .22); }
[data-theme="aquarelle"] .mos-reseaux a { background: rgba(255, 253, 248, .72); box-shadow: none; }

.mos-signature { text-align: center; font-size: 12px; opacity: .55; margin: 16px 0 0; }

.mos-bandeau {
  margin: 0; padding: 10px 18px; text-align: center; font-size: 13px; font-weight: 600;
  background: var(--mos-c3); color: var(--mos-c3-ink);
}

.mos-filtres { position: absolute; width: 0; height: 0; }

/* ------------------------------------------------------------------ *
 * Pages système
 * ------------------------------------------------------------------ */
.mos-system {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  gap: 10px; max-width: 34rem; margin: 0 auto; padding: 0 24px;
}
.mos-system__mark { margin: 0 0 18px; font-size: 13px; letter-spacing: .04em; color: var(--mos-ink-soft); }
.mos-system__title {
  margin: 0; font-family: var(--mos-font-display); font-weight: var(--mos-titre-poids);
  font-size: clamp(30px, 5vw, 44px); line-height: 1.05;
}
.mos-system__message { margin: 0; color: var(--mos-ink-soft); }

/* ------------------------------------------------------------------ *
 * Confort et accessibilité
 * ------------------------------------------------------------------ */
a.mos-tile, .mos-reseaux a { transition: transform .18s ease; }
a.mos-tile:hover, .mos-reseaux a:hover { transform: translateY(-2px); }
:focus-visible { outline: 3px solid var(--mos-c3); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}