/*
 * Mijoka — thèmes graphiques.
 * Trois thèmes cuisine (clairs uniquement, pas de mode sombre) :
 *   data-theme="epure"         moderne et sobre (défaut)
 *   data-theme="carnet"        carnet de recettes à l'ancienne
 *   data-theme="plan-travail"  ardoise de cuisine, craie, romarin et gros sel
 * Les attributs peuvent être posés sur <html> ou sur n'importe quel conteneur.
 * Textures entièrement en CSS (aucune image externe).
 */

/* ---------- Polices (auto-hébergées, licence OFL) ---------- */
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url("../fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url("../fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("../fonts/nunito-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 600; font-display: swap; src: url("../fonts/caveat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 700; font-display: swap; src: url("../fonts/caveat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url("../fonts/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("../fonts/fredoka-latin-600-normal.woff2") format("woff2"); }

/* ---------- Charte : échelle d'espacements unique (voir docs/charte-graphique.md) ---------- */
:root {
  --esp-1: 4px;    /* serré : étiquette ↔ champ, texte d'aide */
  --esp-2: 8px;    /* entre éléments liés */
  --esp-3: 12px;   /* sous un titre de section */
  --esp-4: 16px;   /* entre deux champs, entre deux cartes */
  --esp-5: 24px;   /* avant le bouton d'action, marge intérieure des cartes */
  --esp-6: 32px;   /* entre deux blocs de page */
  --esp-7: 48px;   /* respiration autour d'un écran d'accès */
}

/* ---------- Palette Mijoka (issue du logo) ---------- */
:root {
  --m-brun: #5C2E12;
  --m-orange: #E8601C;
  --m-orange-fort: #B04512;   /* boutons et textes forts : 5,7:1 avec le blanc, 5:1 sur l'orange doux (WCAG AA) */
  --m-olive: #5A6B2A;
  --m-creme: #FBF3E4;
  --m-moutarde: #F5A623;
}

/* ---------- Épuré (défaut) ---------- */
:root, [data-theme="epure"] {
  --fond: #FFFAF2;
  --fond-motif: none;
  --surface: #FFFFFF;
  --surface-image: none;
  --surface-bord: #EFE3D0;
  --texte: var(--m-brun);
  --texte-doux: #7A5A45;
  --accent: var(--m-orange);
  --accent-fort: var(--m-orange-fort);
  --accent-texte: #FFFFFF;
  --accent-doux: #FDEDE3;
  --secondaire: var(--m-olive);
  --secondaire-doux: #EEF1E2;
  --mise-en-avant: var(--m-moutarde);
  --ligne: #EFE3D0;
  --police-texte: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-titre: "Nunito", system-ui, sans-serif;
  --titre-graisse: 800;
  --titre-echelle: 1;
  --titre-couleur: var(--m-brun);
  --rayon: 18px;
  --ombre: 0 1px 2px rgba(92, 46, 18, .05), 0 6px 20px rgba(92, 46, 18, .07);
  --tuile-fond: var(--surface);
  --tuile-icone-fond: var(--accent-doux);
  --tuile-icone: var(--accent);
  --nav-fond: rgba(255, 255, 255, .94);
  color-scheme: light;
}

/* ---------- Carnet de recettes à l'ancienne ---------- */
[data-theme="carnet"] {
  --fond: #EADBBE;
  /* Toile de reliure : léger tissage */
  --fond-motif:
    repeating-linear-gradient(45deg, rgba(92, 46, 18, .035) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(92, 46, 18, .03) 0 2px, transparent 2px 6px);
  --surface: #FBF4E3;
  /* Page lignée avec marge rouge */
  --surface-image:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(70, 105, 140, .12) 31px 32px);
  --surface-bord: #E2CFAC;
  --texte: #4A2A16;
  --texte-doux: #74533B;
  --accent: #C8551E;
  --accent-fort: #9E4113;   /* carnet : 4,8:1 sur le papier */
  --accent-texte: #FFFFFF;
  --accent-doux: #F6E0CC;
  --secondaire: #556528;
  --secondaire-doux: #E6E6CC;
  --mise-en-avant: #E09A1E;
  --ligne: #DCC7A2;
  --police-texte: "Nunito", system-ui, sans-serif;
  --police-titre: "Caveat", "Segoe Print", cursive;
  --titre-graisse: 700;
  --titre-echelle: 1.45;
  --titre-couleur: #3E2210;
  --rayon: 6px;
  --ombre: 0 1px 0 rgba(74, 42, 22, .08), 0 8px 18px rgba(74, 42, 22, .14);
  --tuile-fond: var(--surface);
  --tuile-icone-fond: transparent;
  --tuile-icone: #B24A16;
  --nav-fond: rgba(251, 244, 227, .96);
  color-scheme: light;
}

/* ---------- Plan de travail : bois, farine et fiches ---------- */
[data-theme="plan-travail"] {
  /* Ardoise de cuisine : pierre gris-bleu, grain et traces de craie effacée (texture : decor-ardoise.svg) */
  --fond: #2E3437;
  --fond-motif:
    radial-gradient(ellipse 60% 45% at 18% 12%, rgba(240, 238, 230, .07), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(240, 238, 230, .05), transparent 70%),
    linear-gradient(170deg, #343B3F, #262B2E);
  --surface: #FFF9EE;
  --surface-image: none;
  --surface-bord: #E9D7BC;
  --texte: #4E2810;
  --texte-doux: #7A5A45;
  --accent: var(--m-orange);
  --accent-fort: var(--m-orange-fort);
  --accent-texte: #FFFFFF;
  --accent-doux: #FCE6D7;
  --secondaire: var(--m-olive);
  --secondaire-doux: #EAEEDB;
  --mise-en-avant: var(--m-moutarde);
  --ligne: #EADBC4;
  --police-texte: "Nunito", system-ui, sans-serif;
  --police-titre: "Fredoka", "Nunito", system-ui, sans-serif;
  --titre-graisse: 600;
  --titre-echelle: 1.08;
  --titre-couleur: #4E2810;
  /* Textes posés directement sur l'ardoise : écrits à la craie */
  --sur-fond: #F1EEE6;
  --sur-fond-doux: rgba(241, 238, 230, .72);
  --sur-fond-police: "Caveat", "Nunito", cursive;
  --sur-fond-echelle: 1.45;
  --rayon: 14px;
  --ombre: 0 2px 0 rgba(0, 0, 0, .25), 0 14px 30px rgba(0, 0, 0, .45);
  --tuile-fond: var(--surface);
  --tuile-icone-fond: var(--m-creme);
  --tuile-icone: var(--m-orange-fort);
  --nav-fond: rgba(255, 249, 238, .97);
  color-scheme: light;
}

/* ---------- Touches propres à chaque thème ---------- */

/* Carnet : bout de ruban adhésif sur les fiches, titres manuscrits soulignés */
[data-theme="carnet"] .carte,
[data-theme="carnet"] .tuile {
  position: relative;
}
[data-theme="carnet"] .carte::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 96px;
  height: 22px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(245, 214, 140, .62);
  border-left: 1px dashed rgba(120, 90, 40, .25);
  border-right: 1px dashed rgba(120, 90, 40, .25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
[data-theme="carnet"] .tuile::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-width: 0 18px 18px 0;
  border-style: solid;
  border-color: transparent var(--fond) rgba(0, 0, 0, .08) transparent;
}
[data-theme="carnet"] .tuile .tuile-icone { border: 2px solid currentColor; border-radius: 50%; }
[data-theme="carnet"] h1, [data-theme="carnet"] h2 { text-decoration: underline wavy rgba(200, 85, 30, .35); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
[data-theme="carnet"] .onglet-actif { background: var(--accent-fort); color: var(--accent-texte); }

/* Plan de travail : fiches posées un peu de travers, tuiles façon carreaux */
[data-theme="plan-travail"] .fiche-posee:nth-child(odd) { transform: rotate(-.6deg); }
[data-theme="plan-travail"] .fiche-posee:nth-child(even) { transform: rotate(.5deg); }
[data-theme="plan-travail"] .tuile { border-bottom: 4px solid var(--surface-bord); }
[data-theme="plan-travail"] .tuile-icone { box-shadow: inset 0 0 0 2px var(--surface-bord); }

@media (prefers-reduced-motion: reduce) {
  [data-theme="plan-travail"] .fiche-posee { transform: none !important; }
}

/* ---------- Champs de saisie selon le thème ---------- */
/* Épuré : champ net, fond légèrement teinté, halo orange au focus */
:root, [data-theme="epure"] {
  --champ-fond: #FFFDF9;
  --champ-fond-focus: #FFFFFF;
  --champ-bord: 2px solid #EADBC4;
  --champ-rayon: 12px;
}
/* Carnet : on écrit sur une ligne du cahier, à la main */
[data-theme="carnet"] {
  --champ-fond: transparent;
  --champ-fond-focus: rgba(255, 250, 238, .7);
  --champ-bord: 0 solid transparent;
  --champ-bord-bas: 2px dashed #B9946A;
  --champ-rayon: 0;
  --champ-padding: 6px 4px 4px;
  --champ-police: "Caveat", "Segoe Print", cursive;
  --champ-taille: 1.45rem;
  --champ-ombre: none;
  --champ-ombre-focus: 0 2px 0 0 var(--accent);
  --champ-autofill: #F6EBD3;
}
[data-theme="carnet"] input:focus, [data-theme="carnet"] select:focus, [data-theme="carnet"] textarea:focus { border-bottom-style: solid; }
[data-theme="carnet"] textarea {
  border: 0;
  background: repeating-linear-gradient(transparent 0 2.05rem, #D9C29A 2.05rem calc(2.05rem + 1px));
  line-height: calc(2.05rem + 1px);
}
/* Plan de travail : petite étiquette de papier posée sur l'ardoise */
[data-theme="plan-travail"] {
  --champ-fond: #FFFDF6;
  --champ-fond-focus: #FFFFFF;
  --champ-bord: 1px solid #DCC3A0;
  --champ-bord-bas: 3px solid #D2B48C;
  --champ-rayon: 8px;
  --champ-police: "Fredoka", "Nunito", sans-serif;
  --champ-taille: 1.05rem;
  --champ-ombre: inset 0 2px 4px rgba(78, 40, 16, .06);
  --champ-ombre-focus: inset 0 2px 4px rgba(78, 40, 16, .06), 0 0 0 3px rgba(232, 96, 28, .22);
  --champ-autofill: #FDF1E4;
}

/* ---------- Couleur des boutons selon l'action (charte) ---------- */
:root, [data-theme="epure"] {
  --bouton-principal: var(--accent-fort);   /* avancer : se connecter, continuer, activer */
  --bouton-valider: #5A6B2A;                /* valider, enregistrer : vert olive */
  --bouton-attention: #E3A21A;              /* à surveiller : bloquer, envoyer un lien */
  --bouton-attention-texte: #3E2210;
  --bouton-danger: #B5402E;                 /* supprimer, désactiver : rouge brique */
}
[data-theme="carnet"] {
  --bouton-valider: #556528;
  --bouton-attention: #D9961A;
  --bouton-danger: #A63A27;
}
[data-theme="plan-travail"] {
  --bouton-valider: #56682A;
  --bouton-attention: #E8A520;
  --bouton-danger: #B03C29;
}

/* ---------- Décor de cuisine en fond (croquis répétés, couleur selon le thème) ---------- */
:root, [data-theme="epure"] { --decor-couleur: #C9A688; --decor-opacite: .26; --scene-opacite: .92; }
[data-theme="carnet"] { --decor-couleur: #8E6A48; --decor-opacite: .16; --scene-opacite: .85; }
[data-theme="plan-travail"] { --decor-couleur: #F1EEE6; --decor-opacite: .07; --scene-opacite: 1; }