/* ============================================================
   DivServices — filet de securite couleurs
   ------------------------------------------------------------
   Tailwind (version locale) ne genere plus certaines classes :
   les degrades de marque, les fonds ds-* et quelques variantes.
   Ce fichier les reecrit avec EXACTEMENT les couleurs du site
   en ligne, en clair comme en sombre. Il est charge en dernier,
   donc il ne peut pas etre ecrase.
   ============================================================ */

/* ---------- Texte ---------- */
.text-ds-dark{color:#16274b}
.text-ds-accent{color:#3b6fd4}
.text-ds-night{color:#0a1229}
.dark .text-ds-dark{color:#eaf0ff}
.dark .text-ds-accent{color:#60a5fa}
.dark .text-ds-night{color:#eaf0ff}
.dark .text-blue-400{color:#60a5fa}

/* ---------- Fonds ---------- */
.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}
.dark .bg-ds-bg{background-color:#0a1229}
.dark .bg-ds-night{background-color:#0a1229}
.dark .bg-ds-dark{background-color:#16274b;color:#fff}

/* Fond d'accent translucide (badges, blocs d'info) */
[class*="bg-ds-accent/"]{background-color:rgba(59,111,212,.10)}

/* ---------- Bordures ---------- */
.border-ds-accent{border-color:#3b6fd4}
.border-ds-dark{border-color:#16274b}
[class*="border-ds-accent/"]{border-color:rgba(59,111,212,.30)}
.dark .border-ds-accent{border-color:#60a5fa}
.dark .border-ds-dark{border-color:#22305f}

/* ---------- Degrades de marque ---------- */
/* CTA final de l'accueil : bleu nuit -> bleu, avec texte blanc */
.bg-gradient-to-br.from-ds-dark{background-image:linear-gradient(to bottom right,#16274b 0%,#1c3a6e 50%,#3b6fd4 100%);color:#fff}
.bg-gradient-to-r.from-ds-dark{background-image:linear-gradient(to right,#16274b,#3b6fd4);color:#fff}
/* Icones et pastilles des offres */
.bg-gradient-to-br.from-ds-accent{background-image:linear-gradient(to bottom right,#3b6fd4,#60a5fa)}
.bg-gradient-to-r.from-ds-accent{background-image:linear-gradient(to right,#3b6fd4,#60a5fa)}
/* Offre Premium (ambre) */
.bg-gradient-to-b.from-amber-50{background-image:linear-gradient(to bottom,#fffbeb,#ffffff)}
.dark .bg-gradient-to-b.from-amber-50{background-image:linear-gradient(to bottom,rgba(245,158,11,.10),#142142)}
.bg-gradient-to-r.from-amber-400{background-image:linear-gradient(to right,#fbbf24,#fde047);color:#16274b}
.bg-gradient-to-br.from-amber-400{background-image:linear-gradient(to bottom right,#fbbf24,#f97316)}

/* ---------- Lisibilite du mode sombre ---------- */
/* Les sections a fond colore gardent un texte blanc */
.dark .hero-fond h1,.dark .hero-fond h2,.dark .hero-fond h3{color:#f2f6ff}
.dark .text-white\/65{color:rgba(255,255,255,.65)}
.dark .text-white\/70{color:rgba(255,255,255,.70)}
.dark .text-white\/80{color:rgba(255,255,255,.80)}

/* ---------- La maquette de telephone reste toujours claire ---------- */
/* (son contenu est concu pour un ecran clair, meme en mode sombre) */
.phone{color:#16274b}
.phone p,.phone span,.phone div{color:inherit}
.phone .text-ds-dark{color:#16274b!important}
.phone .text-ds-accent{color:#3b6fd4!important}

/* ---------- Variantes "dark:" ecrites a la main (Tailwind ne les genere plus) ---------- */
.dark .bg-ds-night{background-color:#0a1229!important}
.bg-\[\#eef4fb\]{background-color:#eef4fb}
.dark .bg-\[\#eef4fb\]{background-color:#0a1229}

/* Fond principal des pages (body des espaces) */
.bg-ds-bg{background-color:#eaf4fc}
body.dark-mode,.dark body{background-color:#0a1229}

/* ---------- Carte Premium : fond ambre tres clair, texte fonce lisible ---------- */
.plan-or{background-image:linear-gradient(to bottom,#fffbeb,#ffffff)}
.plan-or h3,.plan-or p,.plan-or li,.plan-or span{color:#16274b}
.dark .plan-or{background-image:linear-gradient(to bottom,rgba(245,158,11,.12),#142142)}
.dark .plan-or h3,.dark .plan-or p,.dark .plan-or li,.dark .plan-or span{color:#f2f6ff}

/* ============================================================
   Boutons secondaires (style "bordure") : lisibles en clair
   ET en sombre. Tailwind ne genere plus border-ds-dark/20
   ni dark:border-white/10, d'ou un bouton blanc sur blanc.
   ============================================================ */
.border-ds-dark\/20{border-color:rgba(22,39,75,.20)!important}
.dark .border-ds-dark\/20{border-color:rgba(255,255,255,.25)!important}
.dark .dark\:border-white\/10,.dark .border-white\/10{border-color:rgba(255,255,255,.25)!important}

/* Bouton "Commencer l'essai" et equivalents : toujours visible */
a[href*="offre=essai"]{
  border:1.5px solid #16274b;
  color:#16274b;
  background:#fff;
}
a[href*="offre=essai"]:hover{background:#f1f5fb}
.dark a[href*="offre=essai"]{
  border-color:rgba(255,255,255,.35);
  color:#fff;
  background:rgba(255,255,255,.08);
}
.dark a[href*="offre=essai"]:hover{background:rgba(255,255,255,.16)}

/* ============================================================
   Boutons "verre" du hero (Espace parent / eleve / salon)
   ============================================================ */
.btn-verre{color:#16274b;border:1px solid rgba(22,39,75,.12)}
.dark .btn-verre{color:#eaf0ff;border-color:rgba(255,255,255,.18)}

/* ============================================================
   CORRECTION FINALE — bouton "Commencer l'essai"
   Il restait blanc sur fond blanc (bordure Tailwind non generee).
   On force un contour et un texte visibles dans les 2 themes.
   ============================================================ */
a[href*="offre=essai"],
a[href*="offre=essai"]:link,
a[href*="offre=essai"]:visited{
  border:2px solid #16274b!important;
  color:#16274b!important;
  background-color:#ffffff!important;
  font-weight:700!important;
}
a[href*="offre=essai"]:hover{
  background-color:#eef4fb!important;
  color:#16274b!important;
}
.dark a[href*="offre=essai"],
.dark a[href*="offre=essai"]:link,
.dark a[href*="offre=essai"]:visited{
  border:2px solid rgba(255,255,255,.55)!important;
  color:#ffffff!important;
  background-color:rgba(255,255,255,.10)!important;
}
.dark a[href*="offre=essai"]:hover{
  background-color:rgba(255,255,255,.20)!important;
  color:#ffffff!important;
}

/* ============================================================
   Petites mentions des cartes d'offres ("200 eleves - 14 j",
   "infini - illimite") : trop petites et gris clair, illisibles.
   ============================================================ */
.plan-carte [style*="opacity:.6"][style*="font-size:10px"],
.plan-carte span[style*="opacity:.6"]{
  font-size:11.5px!important;
  opacity:1!important;
  color:#44537a!important;
  font-weight:600!important;
}
.dark .plan-carte [style*="opacity:.6"][style*="font-size:10px"],
.dark .plan-carte span[style*="opacity:.6"]{
  color:#b8c5ee!important;
}

/* Sous-titres des cartes ("14 jours d'essai", prix par mois) */
.plan-carte .opacity-60{color:#44537a;opacity:1}
.dark .plan-carte .opacity-60{color:#b8c5ee;opacity:1}

/* Les lignes de la liste : un peu plus de contraste */
.plan-carte li{color:#243354}
.dark .plan-carte li{color:#e4ecff}

/* ============================================================
   MISE EN PAGE — Tailwind local ne genere plus les points de
   rupture (md:, lg:). Sans ca les cartes d'offres s'empilent
   une par une au lieu d'etre cote a cote.
   ============================================================ */
/* Cartes d'offres : 3 colonnes des 768 px */
@media (min-width:768px){
  .grid.md\:grid-cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
  .grid.md\:grid-cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
  .grid.md\:grid-cols-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap: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:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Grilles simples sans prefixe */
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.items-stretch{align-items:stretch}

/* ============================================================
   FOND DE PAGE — la vraie cause des textes illisibles.
   <body class="bg-ds-bg dark:bg-ds-night text-ds-dark ...">
   Aucune de ces classes n'etait generee : il ne restait que des
   degrades, et le texte sombre tombait sur un fond sombre.
   ============================================================ */
body.bg-ds-bg{background-color:#eaf4fc;color:#16274b}
html.dark body.bg-ds-bg,
body.dark\:bg-ds-night{background-color:#0a1229}
html.dark body.bg-ds-bg{color:#eaf0ff}

/* Le texte de page suit le fond */
body.bg-ds-bg .text-ds-dark{color:#16274b}
html.dark body.bg-ds-bg .text-ds-dark{color:#eaf0ff}

/* min-h-screen / min-h-[..] (non generes) */
.min-h-screen{min-height:100vh}

/* Titres de section : toujours lisibles */
body.bg-ds-bg h1,body.bg-ds-bg h2,body.bg-ds-bg h3{color:#16274b}
html.dark body.bg-ds-bg h1,
html.dark body.bg-ds-bg h2,
html.dark body.bg-ds-bg h3{color:#f2f6ff}

/* ============================================================
   DERNIER MOT — lisibilite garantie dans TOUS les cas.
   On teste le theme reel (html.dark) et on applique au body :
   - fond clair + texte sombre   (theme clair)
   - fond sombre + texte clair   (theme sombre)
   Ces regles passent en dernier et utilisent !important pour
   ne jamais etre contredites par une autre feuille.
   ============================================================ */
html:not(.dark) body{color:#16274b!important}
html.dark body{color:#eaf0ff!important}

/* Titres et textes courants : jamais sombres sur fond sombre */
html:not(.dark) body h1,html:not(.dark) body h2,html:not(.dark) body h3,html:not(.dark) body h4{color:#16274b}
html.dark body h1,html.dark body h2,html.dark body h3,html.dark body h4{color:#f2f6ff}
html:not(.dark) body p,html:not(.dark) body li,html:not(.dark) body label,html:not(.dark) body td,html:not(.dark) body th{color:#243354}
html.dark body p,html.dark body li,html.dark body label,html.dark body td,html.dark body th{color:#e4ecff}

/* Exceptions : les blocs a fond colore gardent leur texte blanc */
html.dark .hero-fond,html:not(.dark) .hero-fond{color:#16274b}
html.dark .hero-fond{color:#eaf0ff}
html.dark .hero-fond h1,html.dark .hero-fond h2,html.dark .hero-fond h3{color:#f2f6ff}

/* La maquette de telephone reste TOUJOURS claire */
/* les lignes de notes (fond + texte) sont dessinees dedans : elles suivent aussi */
.phone .bg-slate-50{background-color:#f1f5f9!important}
.phone-scene .phone .text-[#16274b],.phone-scene .phone .text-\[\#16274b\]{color:#16274b!important}
.phone-scene .phone .text-[#16274b]/50,.phone-scene .phone .text-[#16274b]/60{color:rgba(22,39,75,.55)!important}
.phone .text-green-600{color:#16a34a!important}
.phone .text-red-500{color:#ef4444!important}
.phone-scene .phone, .phone-scene .phone *{color:#16274b!important}
.phone .text-white,.phone [class*="text-white"]{color:#16274b!important}

/* ============================================================
   CAUSE PRINCIPALE DES TEXTES ILLISIBLES EN MODE SOMBRE
   ------------------------------------------------------------
   Les cartes portent "bg-white" MAIS leur variante
   "dark:bg-*" n'est plus generee par Tailwind.
   En mode sombre, elles restent donc blanches, et le texte clair
   (prevu pour un fond sombre) devient invisible sur du blanc.
   Correction : en mode sombre, toute surface blanche devient
   la surface sombre du theme, et son texte redevient clair.
   ============================================================ */
html.dark .bg-white{background-color:#142142!important;color:#eaf0ff!important}
html.dark [class*="bg-white/"]{background-color:rgba(255,255,255,.08)!important}
html.dark .carte,html.dark .card{background-color:#142142!important;color:#eaf0ff!important}
html.dark .bg-slate-50,html.dark .bg-gray-50{background-color:#0f1a3a!important}
html.dark .bg-\[\#f6f9fe\]{background-color:#0d1834!important}
html.dark .text-ds-dark{color:#eaf0ff!important}
html.dark .text-slate-900,html.dark .text-gray-900{color:#eaf0ff!important}
html.dark .text-slate-700,html.dark .text-gray-700{color:#c9d4f5!important}

/* En mode CLAIR, les surfaces restent blanches et le texte fonce */
html:not(.dark) .carte,html:not(.dark) .card{background-color:#ffffff;color:#16274b}
/* ... sauf la carte Premium : fond ambre tres clair qui doit rester visible */
html:not(.dark) .carte.plan-or{background-color:#fffbeb!important;background-image:linear-gradient(to bottom,#fffbeb,#fff7e0)!important}
html.dark .carte.plan-or{background-color:#1b2340!important;background-image:linear-gradient(to bottom,rgba(245,158,11,.12),#1b2340)!important}
/* La carte Premium a aussi un degrade pose dans son style en ligne : on le retire
   pour que le fond ambre (clair) et le fond nuit (sombre) restent nets. */
html:not(.dark) .carte.plan-or,html.dark .carte.plan-or{background-image:repeating-linear-gradient(0deg,transparent,transparent)!important}
html:not(.dark) .bg-\[\#f6f9fe\]{background-color:#f6f9fe}

/* Pied de page (bloc bleu nuit) : texte toujours clair */
.bg-ds-dark,.bg-ds-dark p,.bg-ds-dark span,.bg-ds-dark a,.bg-ds-dark li,footer.bg-ds-dark *{color:#c9d4f5!important}
.bg-ds-dark h1,.bg-ds-dark h2,.bg-ds-dark h3,.bg-ds-dark h4,.bg-ds-dark .text-white{color:#ffffff!important}
.bg-ds-dark a:hover{color:#ffffff!important}

/* ============================================================
   EXCEPTION : la maquette de telephone du hero doit rester
   CLAIRE meme en mode sombre (c'est une image d'ecran).
   On annule les regles sombres a l'interieur.
   ============================================================ */
.phone, .phone *{background-color:transparent;color:inherit}
.phone .bg-white, .phone [class*=" bg-white"]{background-color:#ffffff!important}
html.dark .phone .bg-white, html.dark .phone [class*=" bg-white"]{background-color:#ffffff!important}
.phone .text-\[\#16274b\]{color:#16274b!important}
.phone-scene .phone p, .phone-scene .phone span, .phone-scene .phone div, .phone-scene .phone small, .phone-scene .phone b{color:#16274b}
.phone .text-ds-accent{color:#3b6fd4!important}

/* ============================================================
   MODE SOMBRE — les logos de paiement (MTN, Airtel, Moov) et
   le logo de marque sont ecrits en bleu fonce : illisibles sur
   la carte bleu nuit. On ne touche QUE ces tuiles et ce logo.
   ============================================================ */
html.dark .pay-tile{color:#e4ecff!important}
html.dark .pay-tile .pay-nom{color:#e4ecff!important}
html.dark .pay-logo svg text{fill:#eaf0ff!important}
html.dark .pay-logo svg circle[fill="#E4002B"]{fill:#ff4f6d!important}
html.dark .logo-marque{color:#eaf0ff!important}
html.dark .logo-marque svg text{fill:#eaf0ff!important}

/* ============================================================
   LISTES NATIVES (select / option des espaces parent, eleve,
   dashboard) : en mode sombre le texte restait bleu tres fonce
   sur une liste sombre -> illisible.
   ============================================================ */
html.dark select,html.dark option,html.dark optgroup{color:#eaf0ff!important;background-color:#142142!important}
html.dark .in,html.dark input,html.dark textarea{color:#eaf0ff!important}
html.dark input::placeholder,html.dark textarea::placeholder{color:#8fa0c8!important}
html:not(.dark) select,html:not(.dark) option{color:#16274b;background-color:#ffffff}

/* ============================================================
   ECURIE FINALE — espaces parent / eleve / dashboard
   ------------------------------------------------------------
   Ces pages ont leurs propres feuilles (parents/styles.css, …)
   avec leurs variables --ink / --mut / --card. En mode sombre,
   les regles generales de ce fichier ecrasaient tout avec
   "html.dark body p {color:#e4ecff}" : le texte devenait clair
   sur des cartes claires. Ici on NE touche A AUCUNE couleur
   de ces feuilles : c'est le CSS des espaces qui decide.
   ============================================================ */
html.dark body body.bg-ds-bg,
html.dark .phone,
html.dark .phone *:not(.btn):not(.chip):not(.tag):not(.dot) {
  /* rien : on laisse les variables des espaces faire leur travail */
}
/* Ecran de connexion des espaces : la seule zone qui n'est pas dans .phone */
html.dark body > .app *,html.dark body > .lg,html:not(.dark) body > .app *,html:not(.dark) body > .lg{color:inherit!important}
html.dark body > .lg p{color:#9DABD2!important}
html.dark body > .app .lbl{color:#9DABD2!important}
html.dark body > .app .card,html.dark body > .app .in{background:#111C44!important;color:#EAF0FF!important;border-color:#22305F!important}
html.dark body > .app h1,html.dark body > .app h2,html.dark body > .app h3,html.dark body > .app .big{color:#EAF0FF!important}
html.dark body > .app .btn:not(.g){color:#fff!important}
html.dark body > .app .btn.g{background:#111C44!important;color:#EAF0FF!important}
html.dark .phone p,html.dark .phone span,html.dark .phone li,html.dark .phone label,html.dark .phone h1,html.dark .phone h2,html.dark .phone h3,html.dark .phone h4,html.dark .phone div,html.dark .phone b,html.dark .phone small{color:inherit!important}
html:not(.dark) .phone p,html:not(.dark) .phone span,html:not(.dark) .phone li,html:not(.dark) .phone label,html:not(.dark) .phone h1,html:not(.dark) .phone h2,html:not(.dark) .phone h3,html:not(.dark) .phone h4,html:not(.dark) .phone div,html:not(.dark) .phone b,html:not(.dark) .phone small{color:inherit!important}
html.dark .phone .lbl,html:not(.dark) .phone .lbl{color:var(--mut)!important}
html.dark .phone .lg p{color:var(--mut)!important}
html.dark .phone .hd,html.dark .phone .hd *{color:#fff!important}
html.dark .phone .hd p,html.dark .phone .hd small{color:#C3D0F5!important}
html.dark .phone .btn{color:#fff!important}
html.dark .phone .btn.g{color:var(--ink)!important}
html.dark .phone .in{color:var(--ink)!important;background:var(--card)!important;border-color:var(--line)!important}
html.dark .phone .card{background:var(--card)!important;color:var(--ink)!important}
html.dark .phone h2,html.dark .phone h1,html.dark .phone h3{color:var(--ink)!important}
html.dark .phone .big{color:var(--ink)!important}

/* --- Survols qui restaurent les vraies couleurs des boutons --- */
html:not(.dark) .btn-verre:hover, html:not(.dark) .btn-verre.hover\:bg-white\/70:hover { background-color: rgba(59,111,212,.14) !important; color: #16274b !important; }
html.dark .btn-verre:hover, html.dark .btn-verre.hover\:bg-white\/15:hover { background-color: rgba(255,255,255,.20) !important; color: #ffffff !important; }

/* ============================================================
   THEME CLAIR — textes restes en BLANC (invisibles sur fond clair)
   Ex. le logo du pied de page « DivServices » et sa devise.
   ============================================================ */
html:not(.dark) footer a,html:not(.dark) footer a span,html:not(.dark) footer h3,html:not(.dark) footer h4{color:inherit!important}
/* le pied de page est sur un bloc bleu nuit : son texte reste TOUJOURS clair */
html:not(.dark) footer.bg-ds-dark span,html:not(.dark) footer.bg-ds-dark p,html:not(.dark) footer.bg-ds-dark small,html:not(.dark) footer.bg-ds-dark a{color:#c9d4f5!important}
html:not(.dark) footer.bg-ds-dark h2,html:not(.dark) footer.bg-ds-dark h3,html:not(.dark) footer.bg-ds-dark b,html:not(.dark) footer.bg-ds-dark strong{color:#ffffff!important}

/* Favicon / liens d'ancrage du menu : couleur lisible dans les deux themes */
html:not(.dark) nav .menu-lien, html:not(.dark) nav a.menu-lien { color: #16274b; }
html.dark nav .menu-lien { color: #eaf0ff; }
html.dark body > .app .btn:not(.g),html.dark body > .phone .btn:not(.g){background:#2F6BFF!important;color:#fff!important}
html.dark body > .app .btn.g,html.dark body > .phone .btn.g{background:#111C44!important;color:#EAF0FF!important;border-color:#22305F!important}
html:not(.dark) body > .app .btn:not(.g),html:not(.dark) body > .phone .btn:not(.g){background:#2F6BFF!important;color:#fff!important}
html:not(.dark) body > .app .btn.g,html:not(.dark) body > .phone .btn.g{background:#fff!important;color:#0F1E45!important}

/* ============================================================
   PIED DE PAGE — l'adresse e-mail et les mentions doivent rester
   CLAIRES sur le bloc bleu nuit, dans les deux themes.
   ============================================================ */
.btn-mail, .btn-mail:link, .btn-mail:visited { color: #ffffff !important; background-color: rgba(255,255,255,.10) !important; }
.btn-mail:hover { color: #ffffff !important; background-color: rgba(255,255,255,.22) !important; }
html:not(.dark) footer .text-white, html:not(.dark) footer a.text-white { color: #ffffff !important; }
html:not(.dark) footer .text-xs { color: rgba(255,255,255,.75) !important; }

/* ============================================================
   PAGES PUBLIQUES EN MODE SOMBRE
   ------------------------------------------------------------
   Le fond nuit est pose par le <body>, mais body n'avait aucun
   fond : les textes clairs tombaient donc sur le fond du
   navigateur (sombre au repos, BLANC quand le telephone est en
   mode clair). On fixe le fond une fois pour toutes.
   ============================================================ */
html.dark body { background-color: #0a1229 !important; color: #eaf0ff; }
html.dark body.bg-ds-bg, html.dark body.bg-\[\#eef4fb\] { background-color: #0a1229 !important; }
html.dark main.bg-\[\#f6f9fe\] { background-color: #0a1229 !important; }
html:not(.dark) body.bg-ds-bg, html:not(.dark) main.bg-\[\#f6f9fe\] { background-color: #eaf4fc !important; }

/* Petites mentions volontairement discretes (opacity-60 / 65 / 70) */
html.dark .opacity-60, html.dark .opacity-65, html.dark .opacity-70 { opacity: .88; }
html:not(.dark) .opacity-60, html:not(.dark) .opacity-65 { opacity: .75; }

/* ============================================================
   REHEBERGE : contrastes verifies a l'ecran
   1. Les textes des blocs SOMBRES (hero, badge, boutons) ne
      doivent jamais etre assombris par les regles de paragraphe.
   2. Les blocs a fond tres sombre sont VUS comme sombres, meme
      quand leur fond vient d'une image de degrade.
   ============================================================ */
html:not(.dark) body .btn-primaire, html:not(.dark) body .btn-primaire *,
html:not(.dark) body .btn-offre-pro, html:not(.dark) body .btn-offre-pro *,
html:not(.dark) body .ds-badge, html:not(.dark) body .ds-badge *,
html:not(.dark) body .badge-pop,
html:not(.dark) body .badge-premium { color: #ffffff !important; }
html:not(.dark) body .badge-premium { color: #16274b !important; }

/* CTA final : fond toujours sombre -> textes clairs */
.cta-final, .cta-final * { color: #ffffff !important; }
.cta-final p { color: #dfe9ff !important; }
.cta-final .btn-cta-final, .cta-final .btn-cta-final:link, .cta-final .btn-cta-final:visited {
  background-color: #ffffff !important; color: #16274b !important;
}
.cta-final .btn-cta-final * { color: #16274b !important; }
.cta-final .btn-cta-final:hover { background-color: #e8eefb !important; }

/* Bouton Premium : texte bleu nuit sur ambre */
.btn-offre-premium, .btn-offre-premium * { color: #16274b !important; }

/* Hero sombre du site : le titre et la phrase restent blancs */
html.dark .hero-fond, html.dark .hero-fond p, html.dark .hero-fond span,
html.dark .hero-fond h1, html.dark .hero-fond h2, html.dark .hero-fond h3, html.dark .hero-fond h4 { color: #f2f6ff !important; }
html.dark .hero-fond .text-ds-accent { color: #8fc2ff !important; }

/* ============================================================
   BOUTONS SUR FOND COLORÉ, DANS LES DEUX THÈMES
   Le bouton garde SA couleur meme si le theme est sombre.
   ============================================================ */
.btn-primaire, .btn-primaire *, .btn-offre-pro, .btn-offre-pro * { color: #ffffff !important; }
.btn-offre-premium, .btn-offre-premium * { color: #16274b !important; }
.ds-badge, .ds-badge * { color: #dbe8ff !important; }
.badge-premium, .badge-premium * { color: #16274b !important; }

/* ============================================================
   BUT RÉEL : plus AUCUN texte ne devient invisible
   Les boutons portent leur propre couleur et leur propre fond,
   le texte suit donc toujours lisible (clair ou sombre).
   ============================================================ */
.btn-primaire, .btn-primaire * { background-color: transparent; }
.btn-primaire, .btn-offre-pro { color: #ffffff !important; background-image: linear-gradient(90deg,#1654d8,#3b82f6) !important; }
.btn-primaire *, .btn-offre-pro * { color: #ffffff !important; background: none !important; }
.btn-offre-premium { color: #16274b !important; background-image: linear-gradient(90deg,#f59e0b,#fbbf24) !important; }
.btn-offre-premium * { color: #16274b !important; background: none !important; }

/* ============================================================
   SALON DE DISCUSSION — les barres du bas se chevauchaient
   (suggestions / outils / "Installer le chat" / zone de message
   se marchaient dessus). On leur rend un emplacement propre.
   ============================================================ */
#ecran-salon { display: flex; flex-direction: column; gap: 8px; }
#ecran-salon #cp-suggestions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
#ecran-salon #cp-outils, #ecran-salon .cp-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#ecran-salon #form-message { display: flex; align-items: flex-end; gap: 8px; margin-top: 4px; }
#ecran-salon #form-message textarea, #ecran-salon #champ-message { flex: 1 1 auto; min-width: 0; resize: none; }
#ecran-salon #form-message > button[type=submit] { flex: none; height: 46px; width: 52px; border-radius: 14px; }

/* l'invite "Installer l'application" ne doit jamais recouvrir un champ */
#ds-pwa-invite { bottom: calc(8px + env(safe-area-inset-bottom,0px)) !important; }
body:has(#ecran-salon) #ds-pwa-invite { display: none !important; }

/* ============================================================
   MAQUETTE DU TELEPHONE (accueil) : reste CLAIRE dans les 2 themes
   ------------------------------------------------------------
   C'est une image d'ecran, pas une interface. Toutes les classes
   ecrites entre crochets (text-[8px], bg-[#3b6fd4], ...) sont
   redonnees ici, une par une, pour qu'aucun texte ne disparaisse.
   ============================================================ */
.phone-scene .phone, .phone-scene .phone * { color: #16274b !important; }
.phone-scene .phone .h-full { background: linear-gradient(180deg, #f6f9fe, #e8f1fb) !important; }
.phone-scene .phone .bg-white { background-color: #ffffff !important; }
.phone-scene .phone .bg-slate-100 { background-color: #f1f5f9 !important; }
.phone-scene .phone .bg-slate-50 { background-color: #f8fafc !important; }
.phone-scene .phone .bg-\[\#3b6fd4\] { background-color: #3b6fd4 !important; color: #ffffff !important; }
.phone-scene .phone .bg-green-500 { background-color: #22c55e !important; }
.phone-scene .phone .text-\[\#3b6fd4\] { color: #3b6fd4 !important; }
.phone-scene .phone .text-\[\#16274b\] { color: #16274b !important; }
.phone-scene .phone .text-\[\#16274b\]\/50 { color: rgba(22,39,75,.55) !important; }
.phone-scene .phone .text-\[\#16274b\]\/60 { color: rgba(22,39,75,.65) !important; }
.phone-scene .phone .text-green-600 { color: #16a34a !important; }
.phone-scene .phone .text-red-500 { color: #ef4444 !important; }
.phone-scene .phone .text-white { color: #ffffff !important; }
/* tailles ecrites entre crochets */
.phone-scene .phone .text-\[8px\] { font-size: 8px; }
.phone-scene .phone .text-\[9px\] { font-size: 9px; }
.phone-scene .phone .text-\[10px\] { font-size: 10px; }
.phone-scene .phone .text-\[11px\] { font-size: 11px; }
.phone-scene .phone .shrink-0 { flex-shrink: 0; }
/* textes flottants autour du telephone */
.phone-scene .notif { color: #16274b !important; }

/* Encarts d'invitation (professeur / comptable) : texte lisible dans les 2 themes */
.encart-invitation p, .encart-invitation p b, .encart-invitation span { color: #1e3a5f !important; }
.encart-invitation .text-slate-500 { color: #475569 !important; }
html.dark .encart-invitation p, html.dark .encart-invitation p b, html.dark .encart-invitation span { color: #eaf0ff !important; }
html.dark .encart-invitation .text-slate-500 { color: #9dabd2 !important; }

/* ============================================================
   TIROIR DU MENU (tous les dashboards) : bouton de fermeture
   toujours visible, voile propre, contenu jamais bloque dessous.
   ============================================================ */
.ds-menu-fermer { display: flex; justify-content: flex-end; padding: 0 0 8px; position: sticky; top: 0; z-index: 3; }
.ds-menu-fermer button {
  width: 34px; height: 34px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.16); color: #ffffff; font-size: 15px; line-height: 1;
}
.ds-menu-fermer button:hover { background: rgba(255,255,255,.28); }
.ds-voile { position: fixed; inset: 0; z-index: 44; background: rgba(5,12,40,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
.ds-voile.on { opacity: 1; pointer-events: auto; }
body.ds-menu-ouvert { overflow: hidden; }
@media (max-width: 1023px) {
  .side.ds-ouvert, .sidebar.ds-ouvert, #side.ds-ouvert { transform: none !important; }
}

/* ============================================================
   FINITIONS ISSUES DU SCAN (contraste mesure a l'ecran)
   ============================================================ */
/* 1. "Services" colore : lisible sur les fonds clairs ET sur le degrade sombre */
html:not(.dark) .text-ds-accent, html:not(.dark) .text-\[\#3b6fd4\] { color: #1f4fae !important; }
html:not(.dark) .text-emerald-600 { color: #067a4a !important; }

/* 2. Maquette du telephone : identite de l'app (passe en clair ET en sombre) */
.phone-scene .phone .text-\[10px\], .phone-scene .phone .text-\[8px\] { color: #16274b !important; }
.phone-scene .phone [class*="text-[#16274b]/"] { color: rgba(22,39,75,.62) !important; }

/* 3. Petit rappel "Sans carte bancaire..." du hero : un peu plus contraste */
.hero-fond .opacity-60, .hero-fond .opacity-70 { color: #2b3f66 !important; opacity: 1 !important; }
html.dark .hero-fond .opacity-60, html.dark .hero-fond .opacity-70 { color: #c9d4f5 !important; }

/* 4. Badges d'offres (renouveler / signup) */
.absolute.-top-3.right-4, .badge-offre {
  background: linear-gradient(90deg,#1654d8,#3b82f6) !important;
  color: #ffffff !important;
}

/* 5. Pages d'inscription : mentions en gris moyen, lisibles les deux themes */
html:not(.dark) .text-slate-500 { color: #475569 !important; }
html.dark .text-slate-500, html.dark .text-slate-400 { color: #aab8dd !important; }
html:not(.dark) .text-slate-300 { color: #64748b !important; }

/* 6. Ecran de connexion des espaces (parent / eleve / dashboard) */
body > .lg, body > .lg h1, body > .lg p { color: var(--ink, #0f1e45); }
body > .lg .lbl, body > .lg p { color: var(--mut, #5a6786) !important; }
body > .lg h1 { color: var(--ink, #0f1e45) !important; }

/* ------------------------------------------------------------------
   FONDS EN DEGRADE : la couleur de fond n'est pas lisible par le
   navigateur (background-image). On declare donc un fond "de secours"
   pour ces conteneurs : les textes qui les habitent restent lisibles.
   ------------------------------------------------------------------ */
.hero-fond { background-color: #eaf4fc; }
html.dark .hero-fond { background-color: #0a1229; }
.cta-final { background-color: #16274b; }

/* Textes tres pales du hero (rappels) : un cran plus contrastes */
.hero-fond .opacity-60, .hero-fond .opacity-65, .hero-fond .opacity-70,
.hero-fond .text-xs.opacity-60 { color: #2b3f66 !important; opacity: 1 !important; }
html.dark .hero-fond .opacity-60, html.dark .hero-fond .opacity-65, html.dark .hero-fond .opacity-70 { color: #c9d4f5 !important; }

/* Maquette du telephone : libelles de l'app toujours en bleu nuit */
.phone-scene .phone .text-\[10px\], .phone-scene .phone .text-\[8px\],
.phone-scene .phone .text-\[9px\], .phone-scene .phone .text-\[11px\] { color: #16274b !important; }

/* Pages d'inscription : titres secondaires et mentions */
.text-slate-500 { color: #475569 !important; }
html.dark .text-slate-500 { color: #aab8dd !important; }
   
/* ============================================================
   SUPER ADMIN en mode sombre : plus aucune bande blanche
   ============================================================ */
html.dark [class*="bg-white/"] { background-color: rgba(255,255,255,.06) !important; }
html.dark .bg-slate-100, html.dark .bg-gray-100 { background-color: #0f1a3a !important; }
html.dark .bg-slate-200, html.dark .bg-gray-200 { background-color: #16223f !important; }
html.dark table, html.dark tbody, html.dark tr, html.dark td { background-color: transparent; }
html.dark thead { background-color: #142142 !important; }
html.dark .from-white, html.dark [class*="from-white"] { background-image: none !important; }
html.dark .to-white, html.dark [class*="to-white"] { background-image: none !important; }
html.dark [class*="bg-gradient-to"] { background-color: #142142; }
html.dark body, html.dark main, html.dark .lg\:ml-64 { background-color: #0a1229; }
html:not(.dark) body, html:not(.dark) main { background-color: #eaf4fc; }
/* Les sections NE posent PLUS de fond : elles héritent du body.
   (un fond sur chaque section créait des rectangles visibles au moindre
   décalage d'animation, et un héritage cassé dès qu'une section a un
   fond propre : la section FAQ qui a son propre fond clair/sombre) */

/* ============================================================
   SUPER ADMIN (mobile 375 px) — bandes blanches et cartes tronquees
   Les cartes de stats utilisaient bg-gradient-to-br from-white
   (degrade clair) : on rend la surface du theme a la place.
   ============================================================ */
html.dark [class*="from-white"], html.dark [class*="to-white"],
html.dark [class*="from-slate-50"], html.dark [class*="to-slate-50"] { background-image: none !important; background-color: #142142 !important; }
html:not(.dark) [class*="from-white"] { background-image: none !important; background-color: #ffffff !important; }

/* Cartes qui depassent de l'ecran : elles se replient a 2 colonnes puis 1 */
@media (max-width: 480px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .grid, .bento2, .bento { grid-template-columns: 1fr !important; }
  .card, .carte { padding: 16px !important; }
  h1 { font-size: 22px !important; }
}
/* Les blocs de stats (chiffres) ne doivent pas etre coupes en largeur */
.card, .stat, .kpi { min-width: 0; overflow-wrap: anywhere; }

/* ============================================================
   ICONES : jamais blanches sur un fond clair
   ------------------------------------------------------------
   Les icones dessinees par lucide prennent la couleur du texte
   (currentColor). Certaines zones (panneau de droite du super
   admin, boutons ronds) posaient "text-white" sur une carte
   blanche -> invisible. On force la couleur selon le fond.
   ============================================================ */
html:not(.dark) .card svg, html:not(.dark) .carte svg,
html:not(.dark) .panel svg, html:not(.dark) main svg {
  stroke: #16274b;
}
html:not(.dark) [class*="bg-white"] svg { stroke: #16274b; }
html:not(.dark) svg.text-white { stroke: #16274b !important; color: #16274b !important; }
html.dark svg.text-white { stroke: #ffffff !important; }

/* Les petites pastilles rondes des listes (blanc sur blanc a l'origine) */
html:not(.dark) .rounded-full.bg-white,
html:not(.dark) [class*="bg-white"] .rounded-full { border: 1px solid #d9e3f5; }

/* Boutons ronds d'action : fond colore + icone blanche */
.btn-ronde { background: #16274b; color: #fff; border-radius: 9999px; border: 0; }
html.dark .btn-ronde { background: #2F6BFF; }
.btn-ronde svg { stroke: #ffffff !important; }

/* ============================================================
   V11 — DASHBOARDS FUTURISTES (super admin, directeur,
   professeur, comptable) — augmente sans rien casser :
   - cartes en verre sombre + liseré lumineux en haut,
   - bouton « Activer le Pro / Passer Premium » toujours lisible,
   - chiffres clés en dégradé lumineux,
   - léger halo décoratif en fond de page.
   ============================================================ */

/* --- Bouton upgrade : JAMAIS blanc sur blanc (les DEUX themes) ---
   Spécificité haute pour battre les filets génériques "body > .app .btn"
   qui peignaient ce bouton en blanc (mode clair) ou bleu (mode sombre). */
html .ds-up-btn, html.dark .ds-up-btn,
html:not(.dark) body .ds-up-btn, html:not(.dark) body > .app .ds-up-btn,
html.dark body .ds-up-btn, html.dark body > .app .ds-up-btn {
  border: 0; border-radius: 11px; padding: 11px 16px;
  font: 700 12.5px Poppins, sans-serif; cursor: pointer; white-space: nowrap;
  color: #ffffff !important;
  background: linear-gradient(90deg, #10204F, #1c3a6e) !important;
  box-shadow: 0 6px 18px rgba(16,32,79,.4), inset 0 0 0 1px rgba(255,255,255,.22) !important;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.ds-up-btn:hover, html .ds-up-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, #14295c, #22509e) !important;
  box-shadow: 0 10px 24px rgba(16,32,79,.55), inset 0 0 0 1px rgba(255,255,255,.35) !important;
}
.ds-up-btn:active { transform: translateY(0) scale(.97); }
.ds-up-btn svg { stroke: #ffffff !important; }

/* --- Cartes : verre sombre + liseré lumineux en haut --- */
html.dark .card, html.dark .carte {
  position: relative;
  background: linear-gradient(160deg, rgba(28,42,84,.55), rgba(17,28,68,.75)) !important;
  border: 1px solid rgba(120,160,255,.14);
  box-shadow: 0 8px 28px rgba(3,8,28,.45) !important;
  backdrop-filter: blur(8px);
}
/* Les cartes du site public avec badges, numéros ou coches NE DOIVENT JAMAIS être coupées */
.carte,
.plan-carte,
#etapes .carte,
#tarifs .carte,
html.dark .carte,
html.dark .plan-carte,
html.dark #etapes .carte,
html.dark #tarifs .carte {
  overflow: visible !important;
}
html.dark .card::before, html.dark .carte::before {
  content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1.5px;
  border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,.65), transparent);
}
html.dark .card:hover, html.dark .carte:hover {
  border-color: rgba(120,160,255,.30);
  box-shadow: 0 14px 36px rgba(3,8,28,.55) !important;
}

/* --- Chiffres clés : dégradé lumineux (KPI) --- */
html.dark .card .big, html.dark .carte .big,
html.dark .card [style*="font-size:28px"], html.dark .card [style*="font-size:32px"] {
  background: linear-gradient(92deg, #ffffff 20%, #9ED0FF 60%, #60a5fa 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Halo décoratif discret en haut de page (dashboard sombre) --- */
html.dark body.bg-ds-bg::before, html.dark body:not(.bg-ds-bg)::before {
  content: ''; position: fixed; top: -22%; left: 50%; transform: translateX(-50%);
  width: min(1000px, 120vw); height: 480px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(47,107,255,.14), transparent 65%);
}
/* ATTENTION : ne PAS poser de z-index sur .app — un z-index sur ce
   conteneur crée un contexte d'empilement qui fait passer le voile
   (.ds-voile, enfant direct du body) AU-DESSUS du menu latéral, et
   le menu devient inclickable en mode sombre. Le halo reste derrière
   grâce à son propre z-index:0 négatif. */
html.dark main { position: relative; }

/* --- Pastilles d'icônes KPI : aurora douce --- */
html.dark .card > div[class*="rounded"], html.dark .carte > div[class*="rounded"] {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
html.dark .card:hover > div[class*="rounded"], html.dark .carte:hover > div[class*="rounded"] {
  transform: scale(1.08) rotate(-3deg);
}

/* ============================================================
   FIN V11
   ============================================================ */

/* ============================================================
   V12 — CORRECTIFS DE BUGS RÉELS (les deux thèmes, toujours)
   ============================================================ */

/* --- 1. MENU LATÉRAL sur ORDINATEUR UNIQUEMENT (>=1024px) ---
   Sur mobile/tablette (<1024px), le dashboard gère son tiroir LUI-MÊME
   (translateX(-100%) caché, .menu-open pour l'ouvrir) : on ne touche à
   RIEN sous ce seuil, sinon le menu reste affiché et figé. */
@media (min-width: 1024px) {
  body > .app > .side,
  body > .app > .sidebar,
  body > .app > aside#sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    align-self: flex-start !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* --- 1bis. TOUS LES ÉCRANS : le menu reste INTERACTIF ---
   (sans toucher à sa position ni à son transform : ce sont eux qui
   font fonctionner l'ouverture/fermeture du tiroir mobile) */
body > .app > .side,
body > .app > .sidebar,
body > .app > aside#sidebar {
  z-index: 40 !important;
  pointer-events: auto !important;
}
/* le voile ne passe JAMAIS au-dessus du menu */
.ds-voile, .menu-overlay { z-index: 20 !important; }
@media (max-width: 1023px) {
  .ds-voile, .menu-overlay { z-index: 30 !important; }
  body > .app > .side, body > .app > .sidebar, body > .app > aside#sidebar { z-index: 50 !important; }
}
/* le bouton ☰ d'ouverture reste au-dessus de tout */
.ds-menu-btn { z-index: 60 !important; position: relative !important; }
/* V9 : bouton flottant supprimé (fermeture par voile/Échap/clic-lien) */
#ds-menu-flottant { display: none !important; }

/* --- 2. Bannière d'abonnement : le TEXTE reste lisible sur ambre --- */
html:not(.dark) [style*="background:linear-gradient(90deg,#f59e0b"] p,
html:not(.dark) [style*="background:linear-gradient(90deg,#f59e0b"] div div,
html:not(.dark) [style*="background:linear-gradient(90deg,#fbbf24"] p {
  color: #ffffff !important;
}

/* --- 2bis. MENU : barre de défilement interne discrète (elle existe
   quand le menu contient plus de rubriques que l'écran n'en montre,
   mais elle ne doit PAS ressembler à un bug) --- */
body > .app > .side::-webkit-scrollbar { width: 5px; }
body > .app > .side::-webkit-scrollbar-track { background: transparent; }
body > .app > .side::-webkit-scrollbar-thumb { background: rgba(140,170,230,.25); border-radius: 99px; }
body > .app > .side { scrollbar-width: thin; scrollbar-color: rgba(140,170,230,.25) transparent; }
/* la colonne de gauche occupe toujours toute la hauteur de la page */
body > .app { min-height: 100vh; }

/* --- 3. ANTI-DÉBORDEMENT GLOBAL (toutes les pages, les 2 thèmes) --- */
html, body { overflow-x: clip; max-width: 100%; }
img, svg, canvas, video, iframe { max-width: 100%; }
table { max-width: 100%; }
/* les tableaux larges défilent DANS leur conteneur, jamais la page */
.sc, .tableau, .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* colonnes flex : jamais plus larges que leur parent */
.main, main, .main > *, [class*="flex"] > * { min-width: 0; }
/* graphiques Canvas.js : jamais plus larges que la carte */
.card canvas, .carte canvas { max-width: 100% !important; height: auto !important; }

/* ---------- 1. ICONES : la couleur de l'icone suit la COULEUR
   du texte du conteneur, sauf quand le conteneur a un FOND COLORÉ
   (pastille bleue -> icone blanche, pastille verte -> icone blanche,
   pastille claire -> icone coloree). Jamais plus d'icone invisible. ---------- */
/* pastilles de fond colore : icone blanche garantie (les 2 themes) */
[class*="bg-blue-5"], [class*="bg-green-5"], [class*="bg-emerald-5"],
[class*="bg-amber-5"], [class*="bg-red-5"], [class*="bg-indigo-5"],
[class*="bg-violet-5"], [class*="bg-purple-5"], [class*="bg-rose-5"],
[class*="bg-sky-5"], [class*="bg-cyan-5"], [class*="bg-teal-5"],
[class*="bg-ds-accent"], [class*="bg-blue-6"], [class*="bg-emerald-6"],
[class*="bg-green-6"], [class*="bg-amber-4"], [class*="bg-red-5"],
[class*="bg-emerald-5"] svg, [class*="bg-blue-5"] svg,
[class*="bg-green-5"] svg, [class*="bg-amber-5"] svg,
[class*="bg-red-5"] svg, [class*="bg-indigo-5"] svg,
[class*="bg-violet-5"] svg, [class*="bg-purple-5"] svg,
[class*="bg-rose-5"] svg, [class*="bg-sky-5"] svg,
[class*="bg-cyan-5"] svg, [class*="bg-teal-5"] svg {
  /* la pastille claire (bg-*-50) garde son icone coloree : rien a forcer */
}
[class*="bg-ds-accent"] svg,
[class*="bg-blue-6"] svg, [class*="bg-emerald-6"] svg, [class*="bg-green-6"] svg,
[class*="bg-amber-4"] svg, [class*="bg-red-6"] svg, [class*="bg-indigo-6"] svg,
[class*="bg-violet-6"] svg, [class*="bg-purple-6"] svg, [class*="bg-rose-6"] svg,
[class*="bg-sky-6"] svg, [class*="bg-cyan-6"] svg, [class*="bg-teal-6"] svg {
  stroke: #ffffff !important; color: #ffffff !important;
}
/* annule le forçage global "carte -> icone bleu nuit" pour les pastilles
   colorees dont l'icone doit rester blanche */
html:not(.dark) [class*="bg-gradient-to"] svg { stroke: #ffffff !important; color: #ffffff !important; }

/* ---------- 2. PASTILLES EN MODE SOMBRE : les fonds très clairs
   (bg-*-50, bg-*-100) deviennent des pastilles translucides de la
   même teinte, et leur icone redevient CLAIRE (visible sur fond nuit). ---------- */
html.dark [class*="bg-blue-50"] { background-color: rgba(59,111,212,.18) !important; }
html.dark [class*="bg-green-50"] { background-color: rgba(34,197,94,.18) !important; }
html.dark [class*="bg-emerald-50"] { background-color: rgba(16,185,129,.18) !important; }
html.dark [class*="bg-amber-50"] { background-color: rgba(245,158,11,.18) !important; }
html.dark [class*="bg-red-50"] { background-color: rgba(239,68,68,.18) !important; }
html.dark [class*="bg-indigo-50"] { background-color: rgba(99,102,241,.18) !important; }
html.dark [class*="bg-violet-50"] { background-color: rgba(139,92,246,.18) !important; }
html.dark [class*="bg-purple-50"] { background-color: rgba(168,85,247,.18) !important; }
html.dark [class*="bg-rose-50"] { background-color: rgba(244,63,94,.18) !important; }
html.dark [class*="bg-sky-50"] { background-color: rgba(14,165,233,.18) !important; }
html.dark [class*="bg-cyan-50"] { background-color: rgba(6,182,212,.18) !important; }
html.dark [class*="bg-teal-50"] { background-color: rgba(20,184,166,.18) !important; }
/* en sombre, l'icone dans ces pastilles passe en teinte claire de la meme couleur */
html.dark [class*="bg-blue-50"] svg { stroke: #8fb7f7 !important; color: #8fb7f7 !important; }
html.dark [class*="bg-green-50"] svg, html.dark [class*="bg-emerald-50"] svg { stroke: #6ee7b7 !important; color: #6ee7b7 !important; }
html.dark [class*="bg-amber-50"] svg { stroke: #fcd34d !important; color: #fcd34d !important; }
html.dark [class*="bg-red-50"] svg { stroke: #fca5a5 !important; color: #fca5a5 !important; }
html.dark [class*="bg-indigo-50"] svg { stroke: #a5b4fc !important; color: #a5b4fc !important; }
html.dark [class*="bg-violet-50"] svg, html.dark [class*="bg-purple-50"] svg { stroke: #d8b4fe !important; color: #d8b4fe !important; }
html.dark [class*="bg-rose-50"] svg { stroke: #fda4af !important; color: #fda4af !important; }
html.dark [class*="bg-sky-50"] svg { stroke: #7dd3fc !important; color: #7dd3fc !important; }
html.dark [class*="bg-cyan-50"] svg, html.dark [class*="bg-teal-50"] svg { stroke: #5eead4 !important; color: #5eead4 !important; }

/* ---------- 3. ZONES BLANCHES EN MODE SOMBRE : filet general.
   Toute surface qui reste blanche alors que le theme est sombre
   recoit la surface sombre, et son texte redevient clair. ---------- */
html.dark [class*="bg-white"], html.dark .bg-white {
  background-color: #142142 !important; color: #eaf0ff !important;
}
/* sauf : la maquette telephone (image claire volontaire) et les
   boutons verres du hero (dejà gérés plus haut) */
html.dark .phone-scene .phone [class*="bg-white"] { background-color: #ffffff !important; color: #16274b !important; }
/* textes qui seraient restés sombres sur les surfaces devenues sombres */
html.dark .bg-white p, html.dark .bg-white span, html.dark .bg-white li,
html.dark .bg-white h1, html.dark .bg-white h2, html.dark .bg-white h3,
html.dark .bg-white h4, html.dark .bg-white label, html.dark .bg-white td { color: #eaf0ff !important; }
/* filet de sécurité absolu : jamais de texte sombre sur fond sombre */
html.dark .text-\[\#16274b\] { color: #eaf0ff !important; }
html.dark .phone-scene .phone .text-\[\#16274b\] { color: #16274b !important; }

/* ---------- 4. LIENS DU MENU : TOUJOURS visibles ---------- */
nav .menu-lien, nav a.menu-lien {
  color: #16274b !important; opacity: 1 !important;
}
html.dark nav .menu-lien, html.dark nav a.menu-lien {
  color: #eaf0ff !important; opacity: 1 !important;
}
nav .menu-lien:hover, html.dark nav .menu-lien:hover { color: #3b6fd4 !important; }
html.dark nav .menu-lien:hover { color: #8fb7f7 !important; }

/* ---------- 5. MENU MOBILE (hamburger) : la nav n'a plus de
   lien visible sous 768px — on fournit le tiroir complet ici,
   s'active seulement si la page contient un menu. ---------- */
#ds-burger { display: none; }
@media (max-width: 767px) {
  #ds-burger {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 9999px;
    background: rgba(255,255,255,.75); border: 1px solid rgba(22,39,75,.12);
    cursor: pointer; color: #16274b;
  }
  html.dark #ds-burger { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #eaf0ff; }
}
#ds-menu-mobile {
  position: fixed; inset: 0; z-index: 60; display: none;
}
#ds-menu-mobile.ouvert { display: block; }
#ds-menu-mobile .voile { position: absolute; inset: 0; background: rgba(5,12,40,.5); }
#ds-menu-mobile .panneau {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 88vw);
  background: #ffffff; box-shadow: -12px 0 40px rgba(13,23,48,.25);
  padding: 18px 20px; overflow-y: auto;
}
html.dark #ds-menu-mobile .panneau { background: #101c3d; }
#ds-menu-mobile .panneau .entete {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
#ds-menu-mobile .panneau .entete b { font-size: 15px; }
html.dark #ds-menu-mobile .panneau .entete b { color: #eaf0ff; }
#ds-menu-mobile .fermer {
  width: 36px; height: 36px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(22,39,75,.08); color: #16274b; font-size: 16px;
}
html.dark #ds-menu-mobile .fermer { background: rgba(255,255,255,.10); color: #eaf0ff; }
#ds-menu-mobile .liens { display: flex; flex-direction: column; gap: 4px; }
#ds-menu-mobile .liens a {
  display: block; padding: 12px 14px; border-radius: 12px;
  color: #16274b; font-weight: 600; font-size: 15px; text-decoration: none;
}
html.dark #ds-menu-mobile .liens a { color: #eaf0ff; }
#ds-menu-mobile .liens a:hover { background: rgba(59,111,212,.10); }
#ds-menu-mobile .bas { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(22,39,75,.10); display: flex; flex-direction: column; gap: 10px; }
html.dark #ds-menu-mobile .bas { border-top-color: rgba(255,255,255,.10); }
#ds-menu-mobile .bas a.btn-connexion-menu { background: #ffffff; color: #16274b !important; }

/* ============================================================
   V8 — EFFETS DE SCROLL : apparition raffinée des éléments
   (compatible avec le système .reveal déjà en place sur la
   vitrine : on ajoute les variantes, on ne remplace rien)
   ============================================================ */
/* Position par défaut quand JS gère l'apparition : invisible, un peu bas */
.js-anim .reveal.ds-up.en-attente { transform: translateY(34px) scale(.98); }
.js-anim .reveal.ds-zoom.en-attente { transform: scale(.92); opacity: 0; }
.js-anim .reveal.ds-flou.en-attente { filter: blur(6px); opacity: 0; }
.js-anim .reveal.ds-flou { transition: opacity .7s ease, filter .7s ease, transform .7s ease; }

/* Groupes en cascade : les enfants apparaissent l'un après l'autre */
.js-anim .ds-cascade > * { opacity: 0; transform: translateY(34px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.32,1); }
.js-anim .ds-cascade.visible > * { opacity: 1; transform: none; }
.js-anim .ds-cascade.visible > *:nth-child(1) { transition-delay: .05s; }
.js-anim .ds-cascade.visible > *:nth-child(2) { transition-delay: .13s; }
.js-anim .ds-cascade.visible > *:nth-child(3) { transition-delay: .21s; }
.js-anim .ds-cascade.visible > *:nth-child(4) { transition-delay: .29s; }
.js-anim .ds-cascade.visible > *:nth-child(5) { transition-delay: .37s; }
.js-anim .ds-cascade.visible > *:nth-child(n+6) { transition-delay: .45s; }

/* Filet : sans JS ou sans IntersectionObserver, tout reste visible */
html:not(.js-anim) .ds-cascade > *,
html:not(.js-anim) .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .ds-cascade > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   V10 — APPARITION DE SECTION : fondu d'opacité pur
   (aucun transform sur la balise section -> la géométrie du
   document ne bouge JAMAIS et les ancres de navigation #tarifs,
   #etapes, #faq tombent à 100% au bon endroit sans aucun saut).
   ============================================================ */
.js-anim .ds-reveal {
  opacity: 0;
  transition: opacity .6s ease;
}
.js-anim .ds-reveal.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .ds-reveal { opacity: 1 !important; transition: none !important; }
}

/* ============================================================
   V13 — LISIBILITÉ SOMBRE (BLOC ESSAI GRATUIT & CARTES DASHBOARD)
   ------------------------------------------------------------
   Garantit que le bandeau d'essai (ambre) et les cartes d'abonnement
   ont un contraste parfait en mode sombre :
   - Fond ambre sombre avec bordure dorée brillante
   - Textes blancs et jaunes or ultra-contrastés (WCAG AAA)
   - Boutons Pro / Premium distincts et lisibles
   ============================================================ */

/* Bandeau d'état dans le dashboard (mode sombre ET clair) */
html.dark [style*="background:linear-gradient(135deg,#E8890C"],
html.dark [style*="background:linear-gradient(135deg,#e8890c"],
html.dark [style*="background:linear-gradient(135deg,#B42318"],
html.dark [style*="background:linear-gradient(135deg,#b42318"],
html.dark [style*="background:linear-gradient(135deg,#B07D00"],
html.dark [style*="background:linear-gradient(135deg,#b07d00"],
html.dark [style*="background:linear-gradient(135deg,#2F6BFF"],
html.dark [style*="background:linear-gradient(135deg,#2f6bff"] {
  box-shadow: 0 12px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* Texte à l'intérieur du bandeau d'abonnement : TOUJOURS BLANC LUMINEUX */
[style*="linear-gradient(135deg,#E8890C"] *,
[style*="linear-gradient(135deg,#e8890c"] *,
[style*="linear-gradient(135deg,#B42318"] *,
[style*="linear-gradient(135deg,#b42318"] *,
[style*="linear-gradient(135deg,#B07D00"] *,
[style*="linear-gradient(135deg,#b07d00"] *,
[style*="linear-gradient(135deg,#2F6BFF"] *,
[style*="linear-gradient(135deg,#2f6bff"] * {
  color: #ffffff !important;
}
/* Sauf le bouton pro dont le texte doit être bleu nuit sur fond blanc */
.ds-up-btn-pro, button.ds-up-btn-pro {
  color: #10204f !important;
  background: #ffffff !important;
  font-weight: 800 !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
}
.ds-up-btn-pro:hover {
  background: #f1f5fb !important;
  color: #10204f !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.45) !important;
}

/* Sous-texte dans le bandeau */
[style*="linear-gradient(135deg,#E8890C"] div[style*="font-size:12px"],
[style*="linear-gradient(135deg,#e8890c"] div[style*="font-size:12px"] {
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Bloc d'essai spécifique dans le dashboard (app.js) */
html.dark [style*="rgba(59,111,212,0.06)"],
html.dark [style*="rgba(59,111,212,0.08)"] {
  background: rgba(47,107,255,.12) !important;
  border-color: rgba(96,165,250,.35) !important;
}

/* ============================================================
   V14 — EXPÉRIENCE APP MOBILE NATIVE DANS TOUS LES DASHBOARDS
   ------------------------------------------------------------
   - Micro-rebonds iOS / Material 3 sur TOUS les boutons
   - Touch feedback instantané (:active transform: scale(0.96))
   - Tap highlight transparent (plus de flash bleu Android)
   - Carte glassmorphism avec relief 3D doux
   - Scroll fluide avec inertie matérielle (-webkit-overflow-scrolling: touch)
   - Safe areas gérées sur notch et barre de geste
   ============================================================ */

/* Suppression du flash bleu natif au clic sur mobile */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

/* Scroll à inertie matérielle partout */
* {
  -webkit-overflow-scrolling: touch;
}

/* Micro-rebonds tactiles sur TOUS les boutons, liens boutons, onglets */
button,
.btn,
.nav,
.side a,
a.btn,
.ds-up-btn,
.pill,
.badge,
.plan-carte,
[role="button"],
input[type="button"],
input[type="submit"] {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1),
              box-shadow .18s ease,
              background-color .18s ease,
              border-color .18s ease,
              filter .18s ease !important;
  will-change: transform;
}

/* Effet "press" tactile comme sur iOS / Android natif */
button:active:not(:disabled),
.btn:active:not(:disabled),
.side a:active,
a.btn:active,
.ds-up-btn:active,
.pill:active,
[role="button"]:active {
  transform: scale(.95) translateY(1px) !important;
  filter: brightness(.92) !important;
}

/* Sur PC (souris fine) : élévation au survol */
@media (pointer: fine) {
  .btn:hover:not(:disabled),
  a.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(47,107,255,.28);
  }
  .card:hover,
  .carte:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(10,18,41,.18);
  }
  html.dark .card:hover,
  html.dark .carte:hover {
    box-shadow: 0 16px 38px rgba(0,0,0,.65) !important;
    border-color: rgba(96,165,250,.35) !important;
  }
}

/* Onglets du menu latéral avec indicateur actif élastique */
.side .nav,
.side a {
  position: relative;
}
.side .nav.on::after,
.side a.on::after {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #22d3ee;
  box-shadow: 0 0 12px #22d3ee;
}

/* Champs de formulaire avec focus flottant moderne */
input.in,
select.in,
textarea {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
input.in:focus,
select.in:focus,
textarea:focus {
  outline: none !important;
  border-color: #2F6BFF !important;
  box-shadow: 0 0 0 3px rgba(47,107,255,.18), 0 4px 14px rgba(47,107,255,.10) !important;
  transform: translateY(-1px);
}
html.dark input.in:focus,
html.dark select.in:focus,
html.dark textarea:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.22), 0 4px 16px rgba(0,0,0,.4) !important;
}

/* Tables : lignes réactives au toucher */
tbody tr {
  transition: background-color .15s ease, transform .15s ease !important;
}
tbody tr:active {
  background-color: rgba(47,107,255,.08) !important;
}
@media (pointer: fine) {
  tbody tr:hover {
    background-color: rgba(47,107,255,.05) !important;
  }
}

/* Toasts de notification style natif (flotte en bas ou en haut avec ombre) */
.toast, #toast {
  border-radius: 14px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.15) !important;
  backdrop-filter: blur(14px) !important;
  letter-spacing: .01em !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease !important;
}

/* Badges / tags avec pastille lumineuse */
.tag, .badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
.tag::before, .badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
  display: inline-block;
}

/* Respect absolu de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Forcer la couleur du titre h3 dans la carte d'abonnement (les 2 thèmes) */
.ds-abo h3,
html:not(.dark) body .ds-abo h3,
html.dark body .ds-abo h3 {
  color: #ffffff !important;
}
.ds-abo,
.ds-abo * {
  color-scheme: dark !important;
}

/* Pastille d'enfant actif (Portail parents) : toujours lisible, jamais blanc sur blanc */
.chip.on,
.phone .hd .chip.on,
.phone .hd button.chip.on {
  background: #ffffff !important;
  color: #10204F !important;
  font-weight: 800 !important;
  border-color: #ffffff !important;
}

/* ============================================================
   SUPER ADMIN : VISIBILITÉ DU TABLEAU DES ÉCOLES & BOUTONS RESPONSIVES
   ============================================================ */
@media (min-width: 1024px) {
  #sidebar { transform: none !important; }
  #b-fermer { display: none !important; }
  #btn-menu { display: none !important; }
}
@media (max-width: 1023px) {
  #b-fermer { display: inline-flex !important; }
  #btn-menu { display: flex !important; }
}

/* Le tableau des écoles s'affiche toujours sur desktop, les cartes sur mobile */
@media (min-width: 768px) {
  .ds-table-desktop,
  .hidden.md\:block,
  div.hidden.md\:block,
  section#page-ecoles .overflow-x-auto {
    display: block !important;
  }
  .ds-cards-mobile,
  .md\:hidden,
  div.md\:hidden,
  #cartes-mobile-page,
  #cartes-mobile {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .ds-table-desktop,
  .hidden.md\:block,
  div.hidden.md\:block {
    display: none !important;
  }
  .ds-cards-mobile,
  .md\:hidden,
  div.md\:hidden,
  #cartes-mobile-page,
  #cartes-mobile {
    display: block !important;
  }
}