/* Teintes de service : sur chaque page, les tuiles reprennent la couleur du logo de la page
   (site bleu, audit jaune, automatisation vert, CRM rose, ambassadeurs violet), déclinée en teintes claires et foncées. */
body[data-s="site"]{--S:#3d5afe;--dk:82%;--on3:#fff}
body[data-s="audit"]{--S:#ffd43b;--dk:52%;--on3:#0E0E0C;--sh:#6b2d00}
body[data-s="auto"]{--S:#19d3a2;--dk:48%;--on3:#0E0E0C}
body[data-s="crm"]{--S:#f0507e;--dk:62%;--on3:#1a0710}
body[data-s="amb"]{--S:#7246f5;--dk:80%;--on3:#fff}
body[data-s]{
  --t0:color-mix(in srgb,var(--S) 9%,#fff);
  --t1:color-mix(in srgb,var(--S) 26%,#fff);
  --t2:color-mix(in srgb,var(--S) 52%,#fff);
  --t3:var(--S);
  --t4:color-mix(in srgb,var(--S) var(--dk),var(--sh,#000));
  --t5:color-mix(in srgb,var(--S) calc(var(--dk) - 22%),var(--sh,#000));
  --t6:color-mix(in srgb,var(--S) calc(var(--dk) - 42%),var(--sh,#000));
  --creme:var(--t0);--citron:var(--t1);--rose:var(--t2);--menthe:var(--t3);
  --violet:var(--t4);--terre:var(--t4);--bleu:var(--t5);--vert:var(--t5);--nuit:var(--t6);
  --noir:color-mix(in srgb,var(--S) 12%,#0E0E0C);
}
body[data-s] .bg-menthe{color:var(--on3)}
/* léger dégradé : une lumière en haut à gauche, une ombre en bas */
body[data-s] .t[class*="bg-"]{background-image:linear-gradient(155deg,rgba(255,255,255,.18),rgba(255,255,255,0) 46%,rgba(0,0,0,.16))}

/* photos et vidéos des tuiles : un voile de la couleur du service (mode « couleur »), pour que toute la page reste dans la même famille */
body[data-s] .grille .t:not(.t6b):has(video,img:not(.logo-in))::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--S);mix-blend-mode:color;opacity:.55}
body[data-s] .grille .t:not(.t6b):has(video,img:not(.logo-in))::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(10,10,10,.62),rgba(10,10,10,0) 55%),linear-gradient(160deg,color-mix(in srgb,var(--S) 22%,transparent),transparent 55%)}