/*
 * couleurs.css : les 4 couleurs de theme d Aurora Bloom (1.5.2, 22/10/2026).
 * Demande de Nathie : choisir ses couleurs au debut de l onboarding, comme dans IdeaCrashTest.
 * Aube (la palette historique, par defaut), Nuit doree, Prune, Ocean. Posees sur <html data-couleurs="…">.
 *
 * Methode : comme BeautySkIn, on INVERSE la palette dans les themes sombres. --creme devient le fond
 * sombre, --prune l accent clair, --prune-fonce le texte clair. Tout ce qui utilise deja ces jetons
 * (panneaux, boutons, toast, mur payant, bandeau cookies) suit sans etre retouche.
 * Les cartes du fil gardent la lueur de leur categorie, sur le fond du theme.
 */

/* ----- Nuit doree : noir et or, comme l onboarding ----- */
:root[data-couleurs="nuit"] {
  --prune: #EFC878; --prune-fonce: #FBEFD9; --prune-clair: #BFAE9C;
  --creme: #0C0910; --creme-tiede: #18121C; --fond-carte: #1D1621;
  --trait: rgba(239, 200, 120, 0.16); --voile: rgba(0, 0, 0, 0.62);
  --g-haut: #241A29; --g-bas: #0C0910;
}
/* ----- Prune : prune profond et peche ----- */
:root[data-couleurs="prune"] {
  --prune: #F2C4AE; --prune-fonce: #F6E7EE; --prune-clair: #CBB0C0;
  --creme: #2C1B28; --creme-tiede: #3A2433; --fond-carte: #43293B;
  --trait: rgba(242, 196, 174, 0.18); --voile: rgba(20, 10, 18, 0.62);
  --g-haut: #4A3143; --g-bas: #24161F;
}
/* ----- Ocean : bleu nuit et eau claire ----- */
:root[data-couleurs="ocean"] {
  --prune: #9AD4D6; --prune-fonce: #EAF2F7; --prune-clair: #A9BFCC;
  --creme: #0E1C26; --creme-tiede: #142836; --fond-carte: #183140;
  --trait: rgba(154, 212, 214, 0.18); --voile: rgba(4, 12, 18, 0.62);
  --g-haut: #17394C; --g-bas: #0A161E;
}

/* Ce qui est commun aux 3 themes sombres : les cartes du fil prennent le fond du theme avec la
   lueur de leur categorie, et le texte reste clair partout (plus de categories « claires »). */
:root:is([data-couleurs="nuit"], [data-couleurs="prune"], [data-couleurs="ocean"]) {
  --texte-sur-amour: #FFFFFF;
  --texte-sur-gratitude: #FFFFFF;
  --texte-sur-matin: #FFFFFF;
  --grad-confiance: radial-gradient(130% 75% at 50% 0%, rgba(143, 106, 132, 0.55), transparent 68%), linear-gradient(170deg, var(--g-haut) 0%, var(--g-bas) 100%);
  --grad-amour:     radial-gradient(130% 75% at 50% 0%, rgba(242, 196, 174, 0.40), transparent 68%), linear-gradient(170deg, var(--g-haut) 0%, var(--g-bas) 100%);
  --grad-calme:     radial-gradient(130% 75% at 50% 0%, rgba(185, 166, 201, 0.45), transparent 68%), linear-gradient(170deg, var(--g-haut) 0%, var(--g-bas) 100%);
  --grad-abondance: radial-gradient(130% 75% at 50% 0%, rgba(217, 164, 65, 0.42), transparent 68%), linear-gradient(170deg, var(--g-haut) 0%, var(--g-bas) 100%);
  --grad-gratitude: radial-gradient(130% 75% at 50% 0%, rgba(224, 163, 136, 0.42), transparent 68%), linear-gradient(170deg, var(--g-haut) 0%, var(--g-bas) 100%);
  --grad-force:     radial-gradient(130% 75% at 50% 0%, rgba(110, 75, 99, 0.60), transparent 68%), linear-gradient(170deg, var(--g-haut) 0%, var(--g-bas) 100%);
  --grad-reussite:  radial-gradient(130% 75% at 50% 0%, rgba(201, 138, 75, 0.45), transparent 68%), linear-gradient(170deg, var(--g-haut) 0%, var(--g-bas) 100%);
  --grad-matin:     radial-gradient(130% 75% at 50% 0%, rgba(249, 222, 208, 0.32), transparent 68%), linear-gradient(170deg, var(--g-haut) 0%, var(--g-bas) 100%);
}
/* Les controles natifs (champ d heure) suivent le fond sombre. */
:root:is([data-couleurs="nuit"], [data-couleurs="prune"], [data-couleurs="ocean"]) { color-scheme: dark; }

/* Sur un fond sombre, les icones « des fonds clairs » redeviennent claires. */
:root:is([data-couleurs="nuit"], [data-couleurs="prune"], [data-couleurs="ocean"]) .fil-clair .icone { background: rgba(255, 255, 255, 0.12); }

/* ----- L ecran du choix (module commun nd-couleurs.css), habille aux jetons d Aurora ----- */
:root {
  --ndc-carte-fond: var(--fond-carte);
  --ndc-carte-bord: var(--trait);
  --ndc-texte: var(--prune-fonce);
  --ndc-doux: var(--prune-clair);
  --ndc-accent: var(--prune);
  --ndc-sur-accent: var(--creme);
  --ndc-halo: var(--creme);
  --ndc-ombre: rgba(44, 27, 40, 0.22);
  --ndc-lisere: var(--trait);
  --ndc-police: var(--police-corps);
  --ndc-police-titre: var(--police-titre);
}

/* La miniature d Aurora : un petit ecran du fil (en-tete, categorie, l affirmation, la barre du bas). */
.ab-mini { display: block; position: relative; height: 112px; border-radius: 13px; overflow: hidden; background: var(--m-fond); border: 1px solid var(--m-bord); }
.ab-mini::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 0%, var(--m-lueur), transparent 70%); }
.ab-mini-tete { position: absolute; top: 7px; left: 8px; right: 8px; display: flex; justify-content: space-between; }
.ab-mini-tete i { width: 9px; height: 9px; border-radius: 3px; border: 1px solid var(--m-ligne); }
.ab-mini-centre { position: absolute; left: 12px; right: 12px; top: 34px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ab-mini-cat { width: 30%; height: 3px; border-radius: 2px; background: var(--m-accent); }
.ab-mini-l { height: 5px; border-radius: 3px; background: var(--m-texte); opacity: .9; }
.ab-mini-bas { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 9px; }
.ab-mini-bas i { width: 11px; height: 11px; border-radius: 50%; background: var(--m-ligne); }
.ab-mini-bas i:nth-child(2) { background: var(--m-accent); }

/* ----- Dans l onboarding : l etape des couleurs prend les couleurs de l app, pas la photo ----- */
#accueil[data-etape="couleurs"] { background: var(--fond); color: var(--texte); }
#accueil[data-etape="couleurs"] :is(.acc-fonds, .acc-voile, .acc-soleil, .acc-eclats, .acc-grain, .acc-vignette, .acc-trait, .acc-nuit) { opacity: 0; transition: opacity .4s ease; animation: none; }
#accueil[data-etape="couleurs"] :focus-visible { outline-color: var(--prune); }
#accueil[data-etape="couleurs"] .acc-icone { color: var(--prune); }
#accueil[data-etape="couleurs"] .acc-scene { padding-top: calc(var(--sure-haut, 0px) + 64px); }
#accueil[data-etape="couleurs"] .acc-etape { margin-top: 0; }

/* ----- Dans les Reglages ----- */
.reglage-couleurs { padding: var(--gap-s) 0 var(--gap-m); border-bottom: 1px solid var(--trait); }
.reglage-couleurs .ligne-label { margin-bottom: var(--gap-s); }