/* MEDITRANS — décors saisonniers, 28/09/2026
 *
 * Tout ce fichier est porté par `body[data-decor="…"]`. Hors décor, pas une
 * règle ne s'applique : le site ne peut donc pas changer d'allure par accident
 * un jour de février.
 *
 * Aucune règle ne touche à la disposition, à la taille des textes, ni à la
 * position d'un bouton. Un régulateur qui prend un appel à trois heures du
 * matin doit retrouver son écran là où il l'a laissé, quel que soit le mois.
 * Le décor porte sur la couleur, un emblème et un bandeau.
 *
 * Le fichier est en deux temps. Chaque décor déclare **sa palette**, en cinq
 * variables ; l'habillage qui suit est écrit **une seule fois**, pour tous.
 * Trois décors recopiés trois fois, c'est trois occasions d'en corriger deux
 * sur trois et de laisser le troisième en arrière.
 */

/* ═══ Les palettes ═══════════════════════════════════════════════════════
 *
 * `--dec-rgb` porte les mêmes composantes que `--dec`, mais en clair : les
 * transparences de la charte sont écrites en `rgba(…)`, qui ne sait pas lire
 * une couleur hexadécimale.
 *
 * Ce qui n'est **jamais** touché, et pour cause :
 *
 * `--danger` reste rouge. Un dossier en alerte doit se distinguer du décor ;
 * noyer le rouge du danger dans la couleur de la saison est une confusion qui
 * coûte cher un jour de garde — c'est aussi pourquoi le décor de Noël est vert
 * et non rouge. `--green` et `--orange` restent eux aussi : ils portent un
 * sens (payé, en attente), pas une humeur.
 *
 * Le logo et le bleu marine de la marque ne bougent pas non plus. MediTrans
 * s'associe à une cause, elle ne se déguise pas.
 */

body[data-decor="octobre-rose"] {
  --dec:       #D6336C;
  --dec-vif:   #E8447D;
  --dec-clair: #F06595;
  --dec-pale:  #FFF0F6;
  --dec-fond:  #FFF7FA;
  --dec-rgb:   214, 51, 108;
}

/* Le site est déjà bleu : reprendre le bleu de la marque ne se verrait pas.
   Celui-ci est nettement plus profond que le bleu roi de MediTrans, et
   l'emblème — une moustache — lève le doute qui resterait. */
body[data-decor="novembre-bleu"] {
  --dec:       #1864AB;
  --dec-vif:   #1971C2;
  --dec-clair: #4DABF7;
  --dec-pale:  #E7F5FF;
  --dec-fond:  #F5FAFF;
  --dec-rgb:   24, 100, 171;
}

/* Vert sapin en couleur de tête. Le rouge de Noël n'entre pas dans la chrome :
   il appartient à l'alerte. Un dossier en danger et un bouton de fête de la
   même couleur, la nuit du 24, on ne peut pas se le permettre. */
body[data-decor="noel"] {
  --dec:       #2B8A3E;
  --dec-vif:   #2F9E44;
  --dec-clair: #51CF66;
  --dec-pale:  #EBFBEE;
  --dec-fond:  #F6FEF8;
  --dec-rgb:   43, 138, 62;
}

/* ═══ L'habillage, commun aux trois ══════════════════════════════════════
 *
 * Première version du décor : seules `--accent` et `--cyan` étaient
 * remplacées. Résultat à l'écran : rien. Toute la chrome — menu, onglets,
 * boutons, badges — est écrite en dur sur `var(--blue)` et sur une trentaine
 * de `rgba(0,87,255,…)` littéraux que nulle variable ne commande. Il ne
 * suffit pas de changer l'accent : il faut reprendre le bleu lui-même, et
 * chacun des littéraux qui lui échappent.
 */
body[data-decor] {
  --blue:        var(--dec);
  --blue-light:  var(--dec-clair);
  --blue-glow:   var(--dec-clair);
  --cyan:        var(--dec-clair);
  --cyan-light:  var(--dec-pale);
  --accent:      var(--dec);
  --primary:     var(--dec);

  --bg:          var(--dec-fond);
  --surface2:    var(--dec-fond);
  --border:      rgba(var(--dec-rgb), 0.14);
  --border-soft: rgba(var(--dec-rgb), 0.07);

  --glow-blue:   0 0 0 1px rgba(var(--dec-rgb),0.15), 0 4px 24px rgba(var(--dec-rgb),0.10);
  --glow-hover:  0 0 0 1px rgba(var(--dec-rgb),0.25), 0 8px 32px rgba(var(--dec-rgb),0.16);

  background:
    linear-gradient(180deg, rgba(var(--dec-rgb),0.06) 0%, rgba(var(--dec-rgb),0) 380px),
    var(--bg);
}

/* Les littéraux de la charte ne passent par aucune variable : chacun doit
   être repris nommément, sans quoi le menu et les onglets restent bleus au
   milieu d'un site rose. */
body[data-decor] .nav-item:hover,
body[data-decor] .tab-btn:hover {
  background: rgba(var(--dec-rgb), 0.07);
  color: var(--dec);
}
body[data-decor] .nav-item.active {
  background: linear-gradient(135deg, rgba(var(--dec-rgb),0.12) 0%, rgba(var(--dec-rgb),0.06) 100%);
  color: var(--dec);
  box-shadow: inset 3px 0 0 var(--dec);
}
body[data-decor] .tab-btn.active {
  background: linear-gradient(135deg, var(--dec), var(--dec-vif));
  box-shadow: 0 2px 10px rgba(var(--dec-rgb), 0.30);
}
body[data-decor] .btn-primary {
  background: linear-gradient(135deg, var(--dec) 0%, var(--dec-vif) 100%);
  box-shadow: 0 2px 8px rgba(var(--dec-rgb),0.28), 0 1px 2px rgba(var(--dec-rgb),0.20);
}
body[data-decor] .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(var(--dec-rgb),0.40), 0 1px 4px rgba(var(--dec-rgb),0.30);
}
body[data-decor] .badge-blue {
  background: rgba(var(--dec-rgb), 0.10);
  color: var(--dec);
}
body[data-decor] .card { border-color: var(--border); }
body[data-decor] .card:hover { border-color: rgba(var(--dec-rgb), 0.24); }
body[data-decor] .sidebar { box-shadow: 4px 0 24px rgba(var(--dec-rgb), 0.07); }
body[data-decor] .btn-gray:hover {
  color: var(--dec);
  border-color: rgba(var(--dec-rgb), 0.25);
}
body[data-decor] .form-input:focus,
body[data-decor] input:focus,
body[data-decor] select:focus,
body[data-decor] textarea:focus {
  box-shadow: 0 0 0 3px rgba(var(--dec-rgb), 0.12);
}
body[data-decor] tr:hover td { background: rgba(var(--dec-rgb), 0.03); }
body[data-decor] .quota-bar { background: rgba(var(--dec-rgb), 0.09); }
body[data-decor] ::-webkit-scrollbar-thumb { background: rgba(var(--dec-rgb), 0.20); }
body[data-decor] ::-webkit-scrollbar-thumb:hover { background: rgba(var(--dec-rgb), 0.34); }

/* Le halo de fond : sans lui, une nappe bleue reste au-dessus de tout le
   reste, et c'est la première chose que l'oeil attrape. */
body[data-decor]::before {
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(var(--dec-rgb),0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(var(--dec-rgb),0.06) 0%, transparent 60%);
}

/* ── L'écran de connexion ────────────────────────────────────────────────
   Le premier écran que voit le personnel, et le seul que voient les
   visiteurs : il porte sa propre feuille de couleurs (`cx-…`), qu'il faut
   reprendre nommément. */
body[data-decor] .cx-saisie:focus {
  box-shadow: 0 0 0 4px rgba(var(--dec-rgb), .15);
}
body[data-decor] .cx-oeil:hover {
  color: var(--dec);
  background: rgba(var(--dec-rgb), .07);
}
body[data-decor] .cx-entrer {
  background: linear-gradient(135deg, var(--dec) 0%, var(--dec-vif) 100%);
  box-shadow: 0 6px 20px rgba(var(--dec-rgb), .28);
}
body[data-decor] .cx-entrer:hover  { box-shadow: 0 10px 28px rgba(var(--dec-rgb), .36); }
body[data-decor] .cx-entrer:active { box-shadow: 0 4px 14px rgba(var(--dec-rgb), .30); }

/* ── Le ruban ─────────────────────────────────────────────────────────────
 * Première version : deux barres inclinées en sens contraire. De près, ce
 * n'était pas un ruban mais une croix — deux traits qui se coupent, sans la
 * boucle qui fait justement le ruban. Deux rectangles ne peuvent pas rendre
 * une forme qui se replie sur elle-même.
 *
 * Il est donc tracé en SVG, comme deux brins qui se croisent bas et se
 * rejoignent haut. Toujours pas d'image à télécharger — ce qui compte sur la
 * connexion d'une ambulance —, toujours net à tous les zooms, et il prend la
 * couleur du texte qui l'entoure.
 */
.decor-ruban {
  display: inline-block;
  width: 16px;
  height: 23px;
  vertical-align: -5px;
  flex: none;
  color: var(--accent);
}
.decor-ruban svg { display: block; width: 100%; height: 100%; }

/* Chaque emblème a ses proportions. La moustache est large et plate : la
   forcer dans la boîte du ruban l'étirerait en hauteur, et une moustache
   étirée ne ressemble plus à rien. */
.decor-embleme-moustache { width: 30px; height: 10px; vertical-align: 0; }
.decor-embleme-sapin     { width: 17px; height: 24px; }

/* ── Le bandeau de sensibilisation ────────────────────────────────────────
 * Il se place sous l'en-tête, dans le flux : superposé, il masquerait la
 * première ligne d'un tableau, et c'est toujours celle qu'on cherche.
 */
.decor-bandeau {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  margin: 0 0 16px;
  background: var(--dec-pale, #FFF0F6);
  border: 1px solid rgba(var(--dec-rgb, 214,51,108), 0.22);
  border-radius: var(--rs, 8px);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text, #0A1628);
}
.decor-bandeau .decor-titre {
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.decor-bandeau .decor-message { color: var(--text2, #4B6080); }

/* Le bouton de fermeture masque le bandeau pour la session en cours
   seulement : il revient à la connexion suivante. Le faire disparaître pour
   de bon ferait qu'un mois de sensibilisation ne durerait qu'un matin. */
.decor-bandeau .decor-fermer {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--text3, #8BA3C4);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.decor-bandeau .decor-fermer:hover { background: rgba(var(--dec-rgb), 0.10); }

/* ── L'écran de connexion ─────────────────────────────────────────────────
 * C'est le premier écran que voit le personnel en arrivant, et le seul que
 * voient les visiteurs. Le ruban y est plus visible, le reste inchangé.
 */
.decor-connexion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dec);
}
.decor-connexion .decor-ruban { width: 20px; height: 29px; }

/* Les personnes qui règlent leur appareil sur « animations réduites » ne
   reçoivent aucun mouvement : le ruban reste, il ne pulse pas. */
@media (prefers-reduced-motion: no-preference) {
  body[data-decor] .decor-connexion .decor-ruban {
    animation: decor-souffle 3.2s ease-in-out infinite;
  }
}
@keyframes decor-souffle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

/* Impression : le décor ne part jamais sur papier. Une facture ou un rapport
   imprimé depuis l'écran doit sortir identique à celui d'un autre mois. */
@media print {
  .decor-bandeau, .decor-connexion, .decor-ruban { display: none !important; }
}