/* Modales du site ouvertes depuis la timeline : Réglages et consorts (menu-modal.css), Partager,
 * Langue, Connexion, popups #newpop, Ask, Mon compte. Palette : tokens.css.
 * Les !important répondent à ceux des fichiers de base (en-têtes « skin premium »). */

/* ---------- Réglages, Notifications, Téléchargement, Certificat : variables --mm-* ---------- */
/* La nuit existe déjà dans menu-modal.css ; seul le mi-jour manque. */
html.cpath.midday .loecsen-menu-modal {
  --mm-accent: #08818e;
  --mm-accent-ink: #066b76;
  --mm-accent-soft: rgb(8 129 142 / 12%);
  --mm-accent-ring: rgb(8 129 142 / 30%);
  --mm-ink: var(--pt-ink);
  --mm-ink-2: var(--pt-ink-2);
  --mm-ink-3: var(--pt-ink-3);
  --mm-surface: var(--pt-surface-2);
  --mm-card: var(--pt-surface);
  --mm-line: var(--pt-line);
  --mm-line-strong: var(--pt-line-strong);
  --mm-scroll: var(--pt-scroll);
  --mm-control: var(--pt-surface-3);
  --mm-veil: rgb(241 237 251 / 90%);
  --mm-shadow: 0 32px 80px -24px rgb(56 40 110 / 55%), 0 0 0 1px var(--pt-line);
}
/* Mon compte : mêmes variables, à reprendre après le bloc nuit d'account-preview.css. */
html.cpath.midday #accountpreview {
  --mm-ink: var(--pt-ink);
  --mm-ink-2: var(--pt-ink-2);
  --mm-ink-3: var(--pt-ink-3);
  --mm-surface: var(--pt-surface-2);
  --mm-card: var(--pt-surface);
  --mm-line: var(--pt-line);
}
/* Encart « connecte-toi » de Téléchargement / Certificat : carte claire en dur. */
html.cpath:is(.midday, .night) #learn #learn_notco {
  background: var(--pt-surface-2);
  border-color: var(--pt-line);
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) #learn #learn_notco > span {
  color: var(--pt-ink);
}

/* ---------- Coques blanches : Partager, Langue, Connexion ---------- */
html.cpath:is(.midday, .night) #loecsen-share-modal.loecsen-share-modal,
html.cpath:is(.midday, .night) #loecsen-share-modal :is(.loecsen-share-modal__dialog, .loecsen-share-modal__body),
html.cpath:is(.midday, .night) #earth.navs.tabcontent.loecsen-earth-modal,
html.cpath:is(.midday, .night) #earth :is(.loecsen-earth-modal__dialog, .loecsen-earth-modal__body, .earth-region-panels),
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal,
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal .infos,
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal .tabs-content > [id$="tab-content"] {
  background: var(--pt-surface);
  background-color: var(--pt-surface);
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) #loecsen-share-modal .loecsen-share-modal__title,
html.cpath:is(.midday, .night) #earth .title.loecsen-earth-modal__title,
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal .title {
  background: var(--pt-surface) !important;
  border-bottom-color: var(--pt-line);
  color: var(--pt-ink) !important;
}
html.cpath:is(.midday, .night) #loecsen-share-modal .loecsen-share-modal__title .close.icon,
html.cpath:is(.midday, .night) #earth .loecsen-earth-modal__title .close.icon,
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal .title .close.icon {
  fill: var(--pt-ink-2) !important;
  color: var(--pt-ink-2) !important;
}

/* ---------- Langue ---------- */
html.cpath:is(.midday, .night) #earth .earth-region-tabs {
  background: var(--pt-surface-2);
  border-bottom-color: var(--pt-line);
}
html.cpath:is(.midday, .night) #earth .earth-region-tab {
  color: var(--pt-ink-2);
}
html.cpath:is(.midday, .night) #earth .earth-region-tab.active {
  background: var(--pt-surface);
  border-color: var(--pt-line);
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) #earth .earth-region-panel > li a,
html.cpath:is(.midday, .night) #earth #from_lang_choices li,
html.cpath:is(.midday, .night) #earth #from_lang_choices li a {
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) #earth :is(#from_lang_choices li:hover, .earth-region-panel > li:hover) {
  background: var(--pt-surface-2);
}
html.cpath:is(.midday, .night) #earth #from_lang_choices .checkbox {
  background: var(--pt-surface-2);
}
html.cpath:is(.midday, .night) #earth .earth-back {
  color: var(--pt-ink-2);
}

/* ---------- Connexion ---------- */
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal .tabs {
  background: var(--pt-surface-2) !important;
  border-bottom-color: var(--pt-line) !important;
}
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal .tabs h3 a,
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal .tabs h3 a:visited {
  color: var(--pt-ink-2) !important;
}
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal :is(label, p, .hr-text, .lm-free-offer) {
  color: var(--pt-ink-2);
}
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal .hr-text:after {
  background-color: var(--pt-surface);
  color: var(--pt-ink-3);
}
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal .lm-free-offer {
  background: var(--pt-surface-2);
  border-bottom-color: var(--pt-line);
}
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal :is(.form-control, form .input) {
  background: var(--pt-surface-2);
  border-color: var(--pt-line-strong);
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal :is(.form-control, form .input)::placeholder {
  color: var(--pt-ink-3);
}
/* Remplissage automatique du navigateur : sinon fond clair imposé sur un texte clair. */
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal :is(.form-control, form .input):-webkit-autofill {
  -webkit-text-fill-color: var(--pt-ink);
  box-shadow: inset 0 0 0 40px var(--pt-surface-2);
}
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal button.auth_google {
  background-color: var(--pt-surface-2);
  border-color: var(--pt-line-strong) !important;
  color: var(--pt-ink) !important;
}
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal .info {
  color: var(--pt-ink-3);
}
html.cpath:is(.midday, .night) #DivLogin.loecsen-login-modal :is(.link, #legal_link) {
  color: var(--pt-accent-ink);
}

/* ---------- Popups #newpop (classiques et pop-v2) ---------- */
html.cpath:is(.midday, .night) #newpop {
  background-color: var(--pt-veil);
}
html.cpath:is(.midday, .night) #newpop .popuppp,
html.cpath:is(.midday, .night) #newpop.pop-v2 .popuppp {
  background: var(--pt-surface);
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) #newpop .closeact {
  background: var(--pt-surface-2) !important;
  fill: var(--pt-ink-2);
  color: var(--pt-ink-2);
}
html.cpath:is(.midday, .night) #newpop .forgot-text,
html.cpath:is(.midday, .night) #newpop .forgot-help {
  color: var(--pt-ink-2);
}
html.cpath:is(.midday, .night) #newpop #forgot-email {
  background: var(--pt-surface-2);
  border-color: var(--pt-line-strong);
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) #newpop.pop-v2 {
  --pop-v2-title: var(--pt-ink);
  --pop-v2-body: var(--pt-ink-2);
}
html.cpath:is(.midday, .night) #newpop.pop-v2 .iconpp {
  border-color: var(--pt-surface);
}
/* Vague de bas de popup et trait sous le texte : images sur fond blanc, à fondre dans la surface.
   Sur la surface sombre elles ne se fondent pas : décor retiré en nuit. */
html.cpath.midday #newpop:is(.pop-v2, .pop-theme-locked) :is(.pop-v2-footer, .pop-v2-trait) {
  mix-blend-mode: multiply;
}
html.cpath.night #newpop:is(.pop-v2, .pop-theme-locked) :is(.pop-v2-footer, .pop-v2-trait) {
  display: none;
}
/* Popups .pop-theme-locked (compteur, temps gratuit…) : couleurs en dur dans
   ecoach_n.css, le titre foncé disparaissait sur la surface sombre. */
html.cpath:is(.midday, .night) #newpop.pop-theme-locked .pop-locked-title {
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) #newpop.pop-theme-locked :is(.pop-locked-text, .pop-locked-text p, .pop-locked-text-strong, .pop-timeup-sub, .pop-timeup-line) {
  color: var(--pt-ink-2);
}
html.cpath:is(.midday, .night) #newpop.pop-theme-locked :is(.pop-locked-text-soft, .pop-timeup-note) {
  color: var(--pt-ink-3);
}

/* ---------- Cadre #pup_result3 (contenus riches) : variables de CSS/pop-cadre.css ---------- */
html.cpath:is(.midday, .night) #cp3 {
  background-color: var(--pt-veil);
}
html.cpath:is(.midday, .night) #cp3 #pup_result3.pup_result {
  --pc-surface: var(--pt-surface);
  --pc-field: var(--pt-surface-2);
  --pc-title: var(--pt-ink);
  --pc-body: var(--pt-ink-2);
  --pc-line: var(--pt-line-strong);
  --pc-close-bg: var(--pt-surface-2);
  --pc-close-ink: var(--pt-ink-2);
  --pc-scroll: var(--pt-scroll);
  --pc-green-soft: var(--pt-accent-soft);
}
/* Signalement : dégradé blanc et bandeau blanc du bouton (acts/error.js), illisibles ici. */
html.cpath:is(.midday, .night) #cp3 #pup_result3.w_error > .content {
  background: none;
  border-color: var(--pt-line);
}
html.cpath:is(.midday, .night) #cp3 #pup_result3.w_error > .bot {
  background: none;
}
html.cpath:is(.midday, .night) #cp3 #pup_result3.w_error .err_tab_btn {
  background: var(--pt-surface-2);
  border-color: var(--pt-line-strong);
}
html.cpath:is(.midday, .night) #cp3 #pup_result3.w_error .err_tab_btn.active {
  background: var(--pt-accent-soft);
  border-color: var(--pt-accent);
}
/* Couleurs en dur des acts (texte #333, #555…) : à reprendre sur la surface sombre. Pas les boutons,
   texte blanc, ni les span : ceux qui ont une couleur la gardent (statuts, résultats). */
html.cpath:is(.midday, .night) #cp3 #pup_result3.pup_result .content :is(p, li, label, div, td, [style*="color"]):not(.nprogress-bar-button, .progress-bar-button, .btn_save) {
  color: var(--pt-ink-2) !important;
}

/* ---------- Ask Loecsen ---------- */
html.cpath:is(.midday, .night) #ask-loecsen-panel,
html.cpath:is(.midday, .night) #ask-loecsen-body {
  background: var(--pt-surface);
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) #ask-loecsen-body .ask-suggestions li button,
html.cpath:is(.midday, .night) .ask-gate-btn--question,
html.cpath:is(.midday, .night) .ask-actions a.ask-btn:not(.primary) {
  background: var(--pt-surface-2);
  border-color: var(--pt-line);
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) .ask-answer-box {
  background: var(--pt-accent-soft);
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) #ask-loecsen-body .ask-hint {
  color: var(--pt-accent-ink);
}
html.cpath:is(.midday, .night) #ask-loecsen-body .ask-sug-excerpt,
html.cpath:is(.midday, .night) #ask-loecsen-body .ask-write-email-hint {
  color: var(--pt-ink-2);
}
html.cpath:is(.midday, .night) #ask-loecsen-form :is(input, textarea),
html.cpath:is(.midday, .night) #ask-loecsen-body .ask-write-email {
  background: var(--pt-surface-2);
  border-color: var(--pt-line-strong);
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) .ask-gate-btn--rate {
  background: var(--pt-gold-soft);
  color: var(--pt-gold);
}