/* ═══════════════════════════════════════════════════════════════════════════
   APPARENCE — couleurs, tailles et espacements de toute l'application.
   Tout part d'ici : le mode nuit (par défaut), le mode jour, la taille des
   textes, la densité, la taille des icônes, le style des boutons et des
   cartes. Les autres feuilles de style n'utilisent que ces valeurs.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* La couleur principale du studio, écrite une seule fois par thème.
     Tout le reste s'en sert via rgba(var(--accent-rgb), …), donc la
     changer ici la change partout. */
  --accent-rgb:212,175,106;
  color-scheme:dark;

  /* ── réglages personnels (theme.js les change) ─────────────────────────── */
  --ech:1;              /* taille générale des textes */
  --ech-titre:1;        /* taille des titres */
  --dens:1;             /* densité : 0.82 compacte · 1 normale · 1.18 confortable */
  --ic:1;               /* taille des icônes */
  --rayon-btn:999px;    /* style des boutons */
  --rayon:18px;         /* coins des cartes */
  --rayon-sm:11px;
  --ombre-carte:0 18px 50px rgba(0,0,0,.6);
  --carte-fond:linear-gradient(180deg,var(--surface),var(--surface-b));
  --duree:1;            /* animations : 1 · 0.45 réduites · 0 aucune */

  /* ── couleurs (mode nuit) ──────────────────────────────────────────────── */
  --fond:#090806;
  --fond-creux:#0d0b08;          /* champs, zones en creux */
  --fond-barre:rgba(10,9,7,.95);  /* barres translucides */
  --surface:#15120e;              /* cartes */
  --surface-b:#110f0b;            /* bas du dégradé des cartes */
  --surface-2:#1a1711;            /* éléments posés sur une carte */
  --surface-3:#221e16;            /* pastilles, puces */
  --trait:#1f1b14;
  --trait-doux:#1c1812;
  --trait-fort:#3a3328;
  --texte:#f4eee3;
  --texte-doux:#b3a891;
  --texte-faible:#7a705d;
  --or-1:#f6e3b0; --or-2:#d9b36c; --or-3:#b88a42; --or-4:#8e6526;
  --gold:#d4af6a; --gold-clair:#f2dca6; --gold-fonce:#9c7532;
  --or:linear-gradient(135deg,var(--or-1) 0%,var(--or-2) 38%,var(--or-3) 70%,var(--or-4) 100%);
  --or-doux:linear-gradient(135deg,rgba(242,220,166,.16),rgba(184,138,66,.08));
  --sur-or:#1a1206;               /* texte écrit sur un bouton doré */
  --line:rgba(var(--accent-rgb),.22);   /* filets dorés */
  --line-or:rgba(var(--accent-rgb),.22);
  --line-or-fort:rgba(var(--accent-rgb),.5);
  --or-voile:rgba(var(--accent-rgb),.06);
  --or-voile-2:rgba(var(--accent-rgb),.12);
  --ok:#8cc49a; --ok-clair:#a9dcb5; --ok-fond:rgba(140,196,154,.12);
  --red:#e06a60; --rouge-clair:#f0a39c; --rouge-fond:rgba(224,106,96,.12);
  --warn:#e7a93b; --warn-clair:#f3c46d;
  --info:#7fb2e5; --info-clair:#b9d6f2;
  --wa:#25d366; --sur-wa:#04220f;
  --ombre-c:rgba(0,0,0,.5);
  --ombre:0 18px 50px rgba(0,0,0,.6);
  --ombre-douce:0 10px 28px rgba(0,0,0,.4);
  --lueur:0 8px 28px rgba(var(--accent-rgb),.18);
  --voile-clair:rgba(255,255,255,.06);
  --voile-sombre:rgba(0,0,0,.35);
  --sur-image:#fff;               /* texte posé sur une photo */
  --voile-photo:rgba(9,8,6,.72);  /* étiquettes posées sur une photo */
  --bloc-fond:linear-gradient(180deg,rgba(33,29,21,.97),rgba(24,21,15,.97));
  --bloc-fond-or:linear-gradient(180deg,rgba(54,44,24,.97),rgba(34,28,17,.97));
  --voile-fenetre:rgba(5,4,3,.82);/* derrière une fenêtre */

  /* anciens noms, gardés pour ne rien casser */
  --bg:var(--fond); --bg2:var(--fond-creux);
  --panel:var(--surface); --panel2:var(--surface-2); --panel3:var(--surface-3);
  --text:var(--texte); --dim:var(--texte-doux); --faint:var(--texte-faible);
  --green:var(--gold); --blue:#cdb98c;
  --radius:var(--rayon); --radius-sm:var(--rayon-sm); --shadow:var(--ombre);
  --font:"Jost","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --serif:"Cormorant","Cormorant Garamond",Georgia,"Times New Roman",serif;

  /* ── espacements qui suivent la densité ────────────────────────────────── */
  --pad-carte:calc(20px * var(--dens));
  --pad-ligne:calc(13px * var(--dens)) calc(16px * var(--dens));
  --pad-btn:calc(10px * var(--dens)) calc(20px * var(--dens));
  --pad-champ:calc(11px * var(--dens)) 14px;
  --gap:calc(14px * var(--dens));
  --gap-sm:calc(9px * var(--dens));
  --page-x:clamp(14px,3vw,26px);
}

/* ── MODE JOUR ─────────────────────────────────────────────────────────────
   Les mêmes repères, en clair : fond ivoire, cartes blanches, or plus foncé
   pour rester lisible. */
:root[data-theme="clair"]{
  --accent-rgb:154,115,37;
  color-scheme:light;
  --fond:#f6f2e9;
  --fond-creux:#fffdf8;
  --fond-barre:rgba(255,253,248,.95);
  --surface:#ffffff;
  --surface-b:#fdfbf5;
  --surface-2:#f7f2e6;
  --surface-3:#efe7d5;
  --trait:#e4dcc8;
  --trait-doux:#ece5d5;
  --trait-fort:#cdbf9e;
  --texte:#1e1a12;
  --texte-doux:#5d5442;
  --texte-faible:#8a8070;
  --or-1:#d9b36c; --or-2:#c39a4e; --or-3:#a87f34; --or-4:#8a6626;
  --gold:#9a7325; --gold-clair:#7d5c18; --gold-fonce:#6b4f14;
  --or-doux:linear-gradient(135deg,rgba(var(--accent-rgb),.12),rgba(var(--accent-rgb),.05));
  --sur-or:#241a08;
  --line:rgba(var(--accent-rgb),.25); --line-or:rgba(var(--accent-rgb),.25); --line-or-fort:rgba(var(--accent-rgb),.55);
  --or-voile:rgba(var(--accent-rgb),.07);
  --or-voile-2:rgba(var(--accent-rgb),.14);
  --ok:#1f7a45; --ok-clair:#176437; --ok-fond:rgba(31,122,69,.12);
  --red:#c1352b; --rouge-clair:#a82b22; --rouge-fond:rgba(193,53,43,.1);
  --warn:#9a6b0f; --warn-clair:#7d5608;
  --info:#2c6ca8; --info-clair:#1f5583;
  --ombre-c:rgba(74,60,28,.13);
  --ombre:0 16px 40px rgba(60,48,20,.14);
  --ombre-douce:0 8px 22px rgba(60,48,20,.1);
  --lueur:0 8px 24px rgba(var(--accent-rgb),.2);
  --voile-clair:rgba(0,0,0,.04);
  --voile-sombre:rgba(0,0,0,.08);
  --blue:#2c6ca8;
  --voile-photo:rgba(30,26,18,.6);
  --voile-fenetre:rgba(40,33,18,.35);
}

/* le mode automatique suit le téléphone ou l'ordinateur */
@media (prefers-color-scheme:light){
  :root[data-theme-choix="auto"]{
    --accent-rgb:154,115,37;
    color-scheme:light;
    --fond:#f6f2e9; --fond-creux:#fffdf8; --fond-barre:rgba(255,253,248,.95);
    --surface:#ffffff; --surface-b:#fdfbf5; --surface-2:#f7f2e6; --surface-3:#efe7d5;
    --trait:#e4dcc8; --trait-doux:#ece5d5; --trait-fort:#cdbf9e;
    --texte:#1e1a12; --texte-doux:#5d5442; --texte-faible:#8a8070;
    --or-1:#d9b36c; --or-2:#c39a4e; --or-3:#a87f34; --or-4:#8a6626;
    --gold:#9a7325; --gold-clair:#7d5c18; --gold-fonce:#6b4f14;
    --or-doux:linear-gradient(135deg,rgba(var(--accent-rgb),.12),rgba(var(--accent-rgb),.05));
    --sur-or:#241a08;
    --line:rgba(var(--accent-rgb),.25); --line-or:rgba(var(--accent-rgb),.25); --line-or-fort:rgba(var(--accent-rgb),.55);
    --or-voile:rgba(var(--accent-rgb),.07); --or-voile-2:rgba(var(--accent-rgb),.14);
    --ok:#1f7a45; --ok-clair:#176437; --ok-fond:rgba(31,122,69,.12);
    --red:#c1352b; --rouge-clair:#a82b22; --rouge-fond:rgba(193,53,43,.1);
    --warn:#9a6b0f; --warn-clair:#7d5608; --info:#2c6ca8; --info-clair:#1f5583; --blue:#2c6ca8;
    --ombre-c:rgba(74,60,28,.13); --ombre:0 16px 40px rgba(60,48,20,.14); --ombre-douce:0 8px 22px rgba(60,48,20,.1);
    --lueur:0 8px 24px rgba(var(--accent-rgb),.2);
    --voile-clair:rgba(0,0,0,.04); --voile-sombre:rgba(0,0,0,.08);
    --voile-photo:rgba(30,26,18,.6); --voile-fenetre:rgba(40,33,18,.35);
  --bloc-fond:linear-gradient(180deg,#ffffff,#fbf6ea);
  --bloc-fond-or:linear-gradient(180deg,#fdf3dd,#f8ead0);
  }
}

/* ── bases communes ───────────────────────────────────────────────────────── */
html{font-size:calc(16px * var(--ech));-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box;min-width:0}
body{background:var(--fond);color:var(--texte)}
img,svg,video,canvas,iframe{max-width:100%}
table{max-width:100%}
/* rien ne sort de l'écran : les longs mots et les liens se coupent */
body,.card,.ligne,.feuille-boite,.modal-box,p,li,td,th,b,span,em,small,h1,h2,h3{overflow-wrap:anywhere}
input,select,textarea,button{font-family:inherit}