/* NELLO PLANNER : la feuille de la marque (charte du 03/11/2026).
   Chargee APRES style.css et stickers.css : elle redefinit les variables
   (couleurs, rayons, polices) et ajuste ce que la charte demande.

   Palette « Rose et bleu du planner » : papier #F5F3F4, gris perle #E7E4E6,
   taupe #4E4851, encre #2A2529, rose poudre #D0A8A6 (accent principal, en
   aplat, jamais en texte), rose profond #866365 (petit texte rose, liens),
   bleu poudre #C6DAF6 (second accent, discret), bleu nuit #37445D (texte
   sur le bleu). Le rose domine, le bleu repond.
   Bodoni Moda pour les titres (jamais sous 18 px), DM Sans pour le texte :
   licence SIL OFL (polices/OFL-*.txt), servies par le site lui-meme. */
@font-face{font-family:'Bodoni Moda Nello';font-style:normal;font-weight:400 900;
  font-display:swap;src:url(polices/bodoni-moda-nello.woff2) format('woff2')}
@font-face{font-family:'DM Sans Nello';font-style:normal;font-weight:100 1000;
  font-display:swap;src:url(polices/dm-sans-nello.woff2) format('woff2')}

:root{
  --papier:#F5F3F4;
  --carte:#FFFFFF;
  --encre:#2A2529;
  --doux:#4E4851;
  --filet:#E7E4E6;
  --actif:#4E4851;
  --accent:#866365;
  --focus:#37445D;
  --erreur:#9B2F3A;
  --titres:'Bodoni Moda Nello','Bodoni 72',Didot,Georgia,serif;
  --texte:'DM Sans Nello','Helvetica Neue',Arial,sans-serif;
  --titres-g1:500;
  --titres-g2:500;
  --rayon:6px;
  --rayon-petit:4px;
  --rayon-grand:8px;
  --ombre:0 2px 6px rgba(60,40,45,.07), 0 1px 1px rgba(60,40,45,.04);
  --ombre-rgb:60,40,45;
  --hachure-rgb:78,72,81;
  /* les aplats et les etats */
  --rose:#D0A8A6;
  --rose-pale:#F8F0EF;
  --bleu:#C6DAF6;
  --bleu-nuit:#37445D;
  --survol:#D0A8A6;
  --survol-2:#D0A8A6;
  --carte-survol:#D0A8A6;
  --visuel:#EDE9EB;
  --badge:#C6DAF6;
  --glissiere:#D8D3D6;
  --note:#F8F0EF;
  --pointille:#866365;
  --pointille-2:#C9BFC4;
  --pointille-3:#866365;
  --plan-filet:#E1C9C8;
  --plan-fond:#F8F0EF;
  --accent-halo:rgba(208,168,166,.45);
  --gris-fond:#ECE9EB;
  --gris-filet:#DCD7DA;
  --gris-texte:#5E5762;
  --gris-pointille:#B7AFB4;
  --flash:#F3E3E2;
  --ok-fond:#EAF1FC;
  --ok-filet:#C6DAF6;
  --ok:#37445D;
  --alerte-fond:#F8F0EF;
  --alerte-filet:#E1C9C8;
  --alerte:#7A3F45;
  --bouton-admin:#4E4851;
  --pre:#EFECEE;
  --champ-filet:#DCD7DA;
  --plaque:rgba(255,255,255,.94);
  --voile:rgba(245,243,244,.7);
  --fond-dialogue:rgba(42,37,41,.55);
  /* les pastilles de stickers de l'accueil : rose et bleu, pas de troisieme pastel */
  --deco-1:#D0A8A6;
  --deco-2:#C6DAF6;
  --deco-3:#E7E4E6;
  --deco-4:#866365;
  --deco-5:#D0A8A6;
}

body{font-family:var(--texte);color:var(--encre)}

/* --------------------------------------------------------------- en-tete
   Le logo NELLO / PLANNER (petite coupe) : un filet rose poudre le separe
   du titre. */
.tete-logo img{height:46px}
.tete-titre{border-left-color:var(--rose)}
.tete h1{font-weight:500;letter-spacing:0}
.tete-langue a{letter-spacing:.12em}

/* -------------------------------------------------------------- etiquettes
   Les petits titres de bloc : DM Sans en capitales espacees (la charte ne
   descend pas le Bodoni sous 18 px). */
.bloc h2,.stk-famille-nom{font-family:var(--texte);font-size:12px;font-weight:600;
  letter-spacing:.12em;color:var(--doux)}
.adm-h1,.carte-mot strong,.question .q,.stk-lot-mot strong{letter-spacing:0}

/* ----------------------------------------------------------------- l'accueil */
.carte{border-radius:var(--rayon-grand)}
a.carte:hover{box-shadow:0 2px 6px rgba(60,40,45,.10),0 12px 28px rgba(60,40,45,.10)}
.carte-visuel{background:var(--visuel)}
.carte-mot .carte-cta{color:var(--accent);letter-spacing:.12em}
.badge{background:var(--bleu);color:var(--bleu-nuit)}

/* ----------------------------------------------------------- les choix
   Le choix : un filet rose profond et un voile rose tres pale. */
.grille button.on,.chemin.on,.stk-col[aria-pressed="true"]{background:var(--rose-pale)}
.grille button:hover,.puce:hover,.chemin:hover,.famille:hover{border-color:var(--rose)}
.etape-couv.faite .num{background:var(--rose);color:var(--encre)}
.etape-changer{color:var(--accent)}
.interrupteur[aria-checked="true"] .glissiere{background:var(--accent)}

/* le texte a soi : le pointille rose profond est reserve a « a toi » */
.couv-texte,#base-hex{border-color:var(--filet)}

/* ----------------------------------------------------------------- boutons */
.bouton-plein{letter-spacing:.1em;font-weight:500}
.bouton-plein:hover{background:var(--encre);border-color:var(--encre)}
.bouton-plein.clair:hover{background:var(--carte)}

/* « c'est pret » : le taupe, et une coche rose */
.pret-coche{background:var(--rose);color:var(--encre)}
.pret-bouton{background:var(--carte)}

/* le message « telecharge » : le bleu repond */
.tele-fait{background:var(--ok-fond);border-color:var(--ok-filet);color:var(--bleu-nuit)}

/* ---------------------------------------------------------------- liens */
.feuilleter a,.etat a,.adm-page a{color:var(--accent)}

/* ---------------------------------------------------------------- admin */
.adm-bouton{background:var(--actif)}