/*
 * trame.css : la photo du thème en trame (retour d'Olivier du 25/10/2026, choix A de Nathie le 26/10).
 * Derrière chaque affirmation, la photo de sa rubrique, très fondue : la phrase reste au premier plan.
 * Sur les tuiles des rubriques, la photo bien visible, voilée en bas pour que le nom se lise.
 * Photos provisoires (planche du 19/10), dans assets/themes/ ; « Toutes » prend la photo dorée de l'accueil.
 */

/* ---------- Les affirmations ---------- */
/* 1.5.9 (07/11/2026, contrôle complet) : à 24 % en soft-light, la photo était invisible sur Matin
   et Gratitude, on croyait qu'il n'y en avait pas. Elle est maintenant bien visible, sous un voile
   qui garde la phrase lisible : voile prune sous un texte blanc, voile crème sous un texte foncé. */
/* Retour de Nathie le 07/11 : le voile ne couvre plus toute la photo, seulement la phrase.
   La photo reste nette ; la phrase repose sur un halo doux aux bords fondus. */
.carte > * { position: relative; z-index: 1; }
.carte::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--trame-photo, none) center / cover no-repeat;
  opacity: 1; filter: saturate(0.95);
}
.carte .carte-texte {
  padding: 14px 22px; border-radius: 26px;
  background: rgba(44, 27, 40, 0.40);
  box-shadow: 0 0 34px 16px rgba(44, 27, 40, 0.34);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.carte .carte-cat { text-shadow: 0 1px 8px rgba(28, 12, 24, 0.65); opacity: 0.95; }
.carte[data-cat="matin"] .carte-texte,
.carte[data-cat="amour"] .carte-texte,
.carte[data-cat="gratitude"] .carte-texte {
  background: rgba(251, 244, 236, 0.62);
  box-shadow: 0 0 34px 16px rgba(251, 244, 236, 0.5);
}
.carte[data-cat="matin"] .carte-cat,
.carte[data-cat="amour"] .carte-cat,
.carte[data-cat="gratitude"] .carte-cat { text-shadow: 0 1px 8px rgba(251, 244, 236, 0.9); }
/* Dans les couleurs sombres, la photo reste dans la pénombre, la phrase en lumière. */
:root[data-couleurs="nuit"] .carte::before,
:root[data-couleurs="prune"] .carte::before,
:root[data-couleurs="ocean"] .carte::before {
  opacity: 0.6; filter: saturate(0.8) brightness(0.6);
}

/* ---------- Les tuiles des rubriques ---------- */
.tuile {
  position: relative; overflow: hidden; isolation: isolate;
  text-shadow: 0 1px 10px rgba(20, 8, 18, 0.55);
}
/* Texte toujours clair sur la photo, y compris Matin, Amour de soi et Gratitude qui avaient un texte foncé (app.css). */
.grille-cat .tuile[data-cat] { color: #FFF8EF; }
/* Les calques passent SOUS le texte (z-index -1 dans la tuile isolée) : le nom est un simple texte, pas un élément. */
.tuile::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--trame-photo, none) center / cover no-repeat;
  opacity: 0.82; filter: saturate(0.9);
}
.tuile::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(28, 12, 24, 0.72), rgba(28, 12, 24, 0.22) 50%, transparent 72%);
}
:root[data-couleurs="nuit"] .tuile::before,
:root[data-couleurs="prune"] .tuile::before,
:root[data-couleurs="ocean"] .tuile::before {
  opacity: 0.6; mix-blend-mode: screen; filter: brightness(0.6);
}

/* ---------- Le panneau Catégories, dans le dégradé de la couleur choisie (Nathie, 26/10) ---------- */
/* Aube : crème en haut (le titre reste net), pêche vers le bas, comme le ciel au lever du jour. */
:root {
  --cat-fond: radial-gradient(110% 45% at 100% 0%, rgba(242, 196, 174, 0.55), transparent 70%),
              linear-gradient(172deg, #FBF4EC 0%, #F9E4D8 55%, #F2C4AE 100%);
}
/* Couleurs sombres : le dégradé des cartes du fil, avec la lueur de l'accent en haut. */
:root[data-couleurs="nuit"]  { --cat-lueur: rgba(239, 200, 120, 0.20); }
:root[data-couleurs="prune"] { --cat-lueur: rgba(242, 196, 174, 0.20); }
:root[data-couleurs="ocean"] { --cat-lueur: rgba(154, 212, 214, 0.20); }
:root:is([data-couleurs="nuit"], [data-couleurs="prune"], [data-couleurs="ocean"]) {
  --cat-fond: radial-gradient(120% 50% at 50% 0%, var(--cat-lueur), transparent 70%),
              linear-gradient(172deg, var(--g-haut) 0%, var(--g-bas) 100%);
}
#panneau-categories { background: var(--cat-fond); }

/* ---------- Une photo par rubrique ---------- */
[data-cat="matin"]     { --trame-photo: url('../assets/themes/matin.jpg'); }
[data-cat="confiance"] { --trame-photo: url('../assets/themes/confiance.jpg'); }
[data-cat="amour"]     { --trame-photo: url('../assets/themes/amour.jpg'); }
[data-cat="calme"]     { --trame-photo: url('../assets/themes/calme.jpg'); }
[data-cat="force"]     { --trame-photo: url('../assets/themes/force.jpg'); }
[data-cat="gratitude"] { --trame-photo: url('../assets/themes/gratitude.jpg'); }
[data-cat="abondance"] { --trame-photo: url('../assets/themes/abondance.jpg'); }
[data-cat="reussite"]  { --trame-photo: url('../assets/themes/reussite.jpg'); }
.tuile[data-photo="toutes"] { --trame-photo: url('../assets/accueil/doree.jpg'); }