/* ============================================================
   DivServices - css/ds-utilitaires.css
   ------------------------------------------------------------
   Ecrit a la main, en CSS PUR, pour les classes Tailwind que la
   version "CDN" ne genere pas (couleurs en crochets, fonds ds-*,
   variantes dark:, et quelques mises en page).
   Charge en dernier : il ne peut pas etre ecrase par erreur.
   ============================================================ */

/* ---------- Couleurs de texte ---------- */
.text-ds-dark{color:#16274b}
.text-ds-accent{color:#3b6fd4}
.text-ds-night{color:#0a1229}
.text-blue-400{color:#60a5fa}
.text-emerald-400{color:#34d399}
.text-green-400{color:#4ade80}
.text-red-400{color:#f87171}

/* ---------- Fonds de marque ---------- */
.bg-ds-bg{background-color:#eaf4fc}
.bg-ds-night{background-color:#0a1229}
.bg-ds-dark{background-color:#16274b;color:#fff}
.bg-ds-accent{background-color:#3b6fd4;color:#fff}
.bg-ds-card{background-color:#ffffff}
.bg-ds-card/70{background-color:rgba(255,255,255,.7)}
.bg-ds-accent/10{background-color:rgba(59,111,212,.10)}
.bg-white/5{background-color:rgba(255,255,255,.05)}
.bg-white/10{background-color:rgba(255,255,255,.10)}
.bg-white/20{background-color:rgba(255,255,255,.20)}
.bg-white/70{background-color:rgba(255,255,255,.70)}
.bg-[#f6f9fe]{background-color:#f6f9fe}
.bg-blue-500/10{background-color:rgba(59,130,246,.10)}
.bg-blue-500/15{background-color:rgba(59,130,246,.15)}
.bg-emerald-500/10{background-color:rgba(16,185,129,.10)}
.bg-emerald-500/15{background-color:rgba(16,185,129,.15)}
.bg-green-500/15{background-color:rgba(34,197,94,.15)}
.bg-amber-500/10{background-color:rgba(245,158,11,.10)}
.bg-red-500/10{background-color:rgba(239,68,68,.10)}

/* ---------- Degrades de marque ---------- */
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-from),var(--tw-to))}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-from),var(--tw-to))}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-from),var(--tw-to))}
.from-ds-dark{--tw-from:#16274b}
.from-ds-accent{--tw-from:#3b6fd4}
.from-amber-50{--tw-from:#fffbeb}
.from-amber-400{--tw-from:#fbbf24}
.from-emerald-500{--tw-from:#10b981}
.from-[#f6f9fe]{--tw-from:#f6f9fe}
.to-white{--tw-to:#ffffff}
.to-ds-accent{--tw-to:#3b6fd4}
.to-blue-400{--tw-to:#60a5fa}
.to-green-400{--tw-to:#4ade80}
.to-yellow-300{--tw-to:#fde047}
.to-[#e8f1fb]{--tw-to:#e8f1fb}
.via-[#1c3a6e]{--tw-mid:#1c3a6e}
.bg-gradient-to-r.via-[#1c3a6e]{background-image:linear-gradient(to right,#16274b,#1c3a6e,#3b6fd4)}
.bg-gradient-to-br.via-[#1c3a6e]{background-image:linear-gradient(to bottom right,#16274b,#1c3a6e,#3b6fd4)}

/* ---------- Bordures ---------- */
.border-ds-accent{border-color:#3b6fd4}
.border-ds-accent/30{border-color:rgba(59,111,212,.30)}
.border-ds-accent/60{border-color:rgba(59,111,212,.60)}
.border-ds-dark/20{border-color:rgba(22,39,75,.20)}

/* ---------- Espacements et dimensions ecrits en une fois ---------- */
.w-full{width:100%}
.h-full{height:100%}
.min-w-0{min-width:0}
.mx-auto{margin-left:auto;margin-right:auto}
.!mx-0{margin-left:0!important;margin-right:0!important}
.ml-auto{margin-left:auto}
.mt-auto{margin-top:auto}
.space-y-1>*+*{margin-top:.25rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-2.5>*+*{margin-top:.625rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-5>*+*{margin-top:1.25rem}
.font-normal{font-weight:400}
.text-base{font-size:1rem;line-height:1.5rem}
.no-underline{text-decoration-line:none}
.fill-current{fill:currentColor}
.block{display:block}
.group{position:relative}

/* ---------- Replis : focus / disabled ---------- */
.focus:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus:ring-2:focus{box-shadow:0 0 0 3px rgba(59,111,212,.35)}
.focus:ring-ds-accent:focus{outline:2px solid #3b6fd4;outline-offset:2px}
.focus:ring-emerald-500:focus{outline:2px solid #10b981;outline-offset:2px}
.disabled:opacity-40:disabled{opacity:.4;cursor:not-allowed}

/* ============================================================
   MODE SOMBRE (html.dark) : les variantes dark: du site
   ============================================================ */
html.dark .dark:text-white{color:#ffffff}
html.dark .dark:text-blue-400{color:#60a5fa}
html.dark .dark:text-emerald-400{color:#34d399}
html.dark .dark:text-green-400{color:#4ade80}
html.dark .dark:text-red-400{color:#f87171}
html.dark .dark:bg-ds-night{background-color:#0a1229}
html.dark .dark:bg-ds-accent{background-color:#3b6fd4}
html.dark .dark:bg-ds-card{background-color:#142142}
html.dark .dark:bg-ds-card/70{background-color:rgba(20,33,66,.7)}
html.dark .dark:bg-white/5{background-color:rgba(255,255,255,.05)}
html.dark .dark:bg-white/10{background-color:rgba(255,255,255,.10)}
html.dark .dark:bg-blue-500/10{background-color:rgba(59,130,246,.10)}
html.dark .dark:bg-blue-500/15{background-color:rgba(59,130,246,.15)}
html.dark .dark:bg-emerald-500/10{background-color:rgba(16,185,129,.10)}
html.dark .dark:bg-emerald-500/15{background-color:rgba(16,185,129,.15)}
html.dark .dark:bg-green-500/15{background-color:rgba(34,197,94,.15)}
html.dark .dark:bg-amber-500/10{background-color:rgba(245,158,11,.10)}
html.dark .dark:bg-red-500/10{background-color:rgba(239,68,68,.10)}
html.dark .dark:bg-[#0d1a35]{background-color:#0d1a35}
html.dark .dark:border-white/5{border-color:rgba(255,255,255,.05)}
html.dark .dark:border-white/10{border-color:rgba(255,255,255,.10)}
html.dark .dark:from-amber-500/10{--tw-from:rgba(245,158,11,.10)}
html.dark .dark:to-[#142142]{--tw-to:#142142}
html.dark .dark:hover:bg-white/15:hover{background-color:rgba(255,255,255,.15)}
html.dark .dark:hover:bg-white/20:hover{background-color:rgba(255,255,255,.20)}

/* ---------- Survols ---------- */
.hover:bg-white/20:hover{background-color:rgba(255,255,255,.20)}
.hover:bg-white/70:hover{background-color:rgba(255,255,255,.70)}
.hover:bg-slate-50:hover{background-color:#f8fafc}
.hover:bg-blue-600:hover{background-color:#2563eb}
.hover:bg-blue-700:hover{background-color:#1d4ed8}
.hover:bg-emerald-500:hover{background-color:#10b981}
.hover:bg-amber-600:hover{background-color:#d97706}
.hover:bg-[#22355e]:hover{background-color:#22355e}
.hover:text-ds-accent:hover{color:#3b6fd4}
.hover:text-white:hover{color:#ffffff}
.hover:opacity-100:hover{opacity:1}
.hover:opacity-80:hover{opacity:.8}
.hover:underline:hover{text-decoration-line:underline}
.hover:rotate-12:hover{transform:rotate(12deg)}

/* ---------- Points de rupture utilises (md:, sm:, xl:) ---------- */
@media (min-width:640px){
  .sm:block{display:block}
  .sm:hidden{display:none}
  .sm:flex{display:flex}
  .sm:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .md:block{display:block}
  .md:hidden{display:none}
  .md:flex{display:flex}
  .md:flex-row{flex-direction:row}
  .md:mt-0{margin-top:0}
  .md:mx-0{margin-left:0;margin-right:0}
  .md:text-base{font-size:1rem;line-height:1.5rem}
  .md:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1280px){
  .xl:block{display:block}
}
html.dark .dark:hover:bg-slate-200:hover{background-color:#e2e8f0}


/* ============================================================
   FONDS CLAIRS "NUS" EN MODE SOMBRE
   ------------------------------------------------------------
   Un bloc avec bg-white / bg-slate-50 / bg-blue-50 mais SANS
   couleur de texte devenait clair-sur-clair en mode sombre.
   On lui donne la surface sombre ET le texte clair du theme.
   ============================================================ */
html.dark .bg-white, html.dark .bg-slate-50, html.dark .bg-gray-50,
html.dark .bg-blue-50, html.dark .bg-emerald-50, html.dark .bg-amber-50,
html.dark .bg-red-50, html.dark .bg-[#f6f9fe], html.dark .bg-[#eef4fb] {
  background-color: #142142 !important;
  color: #eaf0ff !important;
}
html.dark .bg-white *, html.dark .bg-slate-50 *, html.dark .bg-blue-50 *,
html.dark .bg-emerald-50 *, html.dark .bg-amber-50 *, html.dark .bg-red-50 * {
  color: #eaf0ff !important;
}
html.dark .bg-white b, html.dark .bg-slate-50 b, html.dark .bg-blue-50 b,
html.dark .bg-white h1, html.dark .bg-white h2, html.dark .bg-white h3,
html.dark .bg-blue-50 h1, html.dark .bg-blue-50 h2, html.dark .bg-blue-50 h3 { color: #ffffff !important; }
/* ... sauf les textes colores (statuts), qui restent leur couleur */
html.dark .bg-white .text-green-600, html.dark .bg-white .text-emerald-600 { color: #4ade80 !important; }
html.dark .bg-white .text-red-500, html.dark .bg-white .text-red-600 { color: #f87171 !important; }
html.dark .bg-white .text-amber-500, html.dark .bg-white .text-amber-600 { color: #fbbf24 !important; }
html.dark .bg-white .text-ds-accent, html.dark .bg-white .text-blue-600 { color: #8fc2ff !important; }

/* ---------- Tableaux ---------- */
html.dark table thead th { background-color: #1a2a52 !important; color: #eaf0ff !important; }
html.dark table tbody tr { background-color: #142142 !important; color: #eaf0ff !important; }
html.dark table td { color: #dfe7fb !important; border-color: #22305f !important; }
html.dark table tbody tr:hover { background-color: #1b2c57 !important; }

/* ---------- Barres de defilement dans le theme ---------- */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #0a1229; }
html.dark ::-webkit-scrollbar-thumb { background: #2b3d6e; border-radius: 8px; }


/* ============================================================
   AFFICHAGE / MASQUAGE — indispensable : le salon de discussion
   utilise "hidden" pour cacher puis montrer ses deux ecrans.
   Sans ces deux lignes, "Entrer" ne faisait RIEN a l'ecran.
   ============================================================ */
.hidden{display:none !important}
.flex{display:flex}
.inline-flex{display:inline-flex}
.block{display:block}
.grid{display:grid}
.flex-col{flex-direction:column}
.flex-1{flex:1 1 0%}
.flex-none{flex:none}
.h-screen{height:100vh;height:100dvh}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.mx-auto{margin-left:auto;margin-right:auto}