/**
 * Theme Name:     EveningPrimrose
 * Author:         Mark-André Macao
 * Template:       hello-elementor
 * Text Domain:	   eveningprimrose
 * Description:    Ceci est le thème enfant officiel du site de Mark-André PHP-CSS-JAVA
 * Theme URI:      https://markandremacao.com
 * Author URI:     https://markandremacao.com
 * Version:        0.1
 * License:        2025
 */

/* Intégration de la police personnalisée */
@font-face {
  font-family: 'Dreaming Outloud Script';
  src: url('fonts/DreamingOutloudScript.woff2') format('woff2'),
       url('fonts/DreamingOutloudScript.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Écran principal */
body .custom-password-screen {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #000 !important;
  color: #fff !important;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
}

/* Titre "Bonjour !" */
body .custom-password-screen .hello-title {
  font-family: 'Dreaming Outloud Script', cursive !important;
  font-size: 5rem;
  margin-bottom: 1rem;
  color: #fff !important;
}

/* Texte secondaire */
body .custom-password-screen .subtext {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #fff !important;
}

/* Champ mot de passe */
body .custom-password-form input[type="password"] {
  width: 300px;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid white;
  background: transparent;
  color: white;
  text-align: center;
  margin-bottom: 1.5rem;
  font-family: Helvetica, Arial, sans-serif;
  border-radius: 4px;
}

body .custom-password-form input::placeholder {
  color: #fff;
  opacity: 0.7;
}

/* Bouton Valider */
body .custom-password-form button {
  padding: 6px 30px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1rem;
  background: transparent;
  color: white;
  border: 1px solid white;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

body .custom-password-form button:hover {
  background: white;
  color: black;
}

/* Message d'erreur */
body .password-error {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  margin-top: 1rem;
  color: red;
}

/* ===========================
   DARK/LIGHT – articles uniquement
   =========================== */

/* Pré-peinture : noir par défaut sur les articles (avant que le JS n'agisse) */
html:has(body[class*="postid-"]):not(.theme-light) {
  background:#000; color:#eaeaea;
}

/* Variables de thème */
html.theme-dark, body.theme-dark {
  --page-bg:#000;
  --page-fg:#eaeaea;
  --link:#9ecbff;
  --icon-gray:#8a8a8a; /* couleur des icônes soleil/lune */
}
html.theme-light, body.theme-light {
  --page-bg:#fff;
  --page-fg:#111;
  --link:#0b57d0;
  --icon-gray:#8a8a8a;
}

/* Fond & texte de base */
html, body {
  background-color: var(--page-bg) !important;
  color: var(--page-fg) !important;
  transition: color .25s ease, background-color .25s ease, background .25s ease;
}

/* Neutraliser les fonds posés par le thème/Elementor (scope articles) */
body[class*="postid-"] #page,
body[class*="postid-"] .site,
body[class*="postid-"] .site-content,
body[class*="postid-"] .content-area,
body[class*="postid-"] #primary,
body[class*="postid-"] #main,
body[class*="postid-"] .hfeed,
body[class*="postid-"] .site-main,
body[class*="postid-"] .entry-content,
body[class*="postid-"] .elementor,
body[class*="postid-"] .elementor-section,
body[class*="postid-"] .elementor-container,
body[class*="postid-"] .elementor-column,
body[class*="postid-"] .elementor-widget-wrap,
body[class*="postid-"] .elementor-widget,
body[class*="postid-"] .elementor-location-single,
body[class*="postid-"] .elementor-location-header,
body[class*="postid-"] .elementor-location-footer {
  background: transparent !important;
  color: var(--page-fg) !important;
}

/* Couleurs globales Elementor pour que les widgets suivent (scope articles) */
body[class*="postid-"]{
  --e-global-color-text: var(--page-fg) !important;
  --e-global-color-primary: var(--page-fg) !important;
  --e-global-color-secondary: var(--link) !important;
  --e-global-color-accent: var(--link) !important;
}

/* Liens */
body[class*="postid-"] a { color: var(--link) !important; }

/* ===========================
   Switch soleil / lune
   =========================== */
.switch{
  -webkit-tap-highlight-color:transparent;
  background:none !important; border:0 !important; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  z-index:9999; pointer-events:auto; touch-action:manipulation;
  appearance:none; -webkit-appearance:none;
}

/* 🔒 Coupe tous les halos/focus par défaut du thème Hello/Elementor sur CE bouton seulement */
#themeToggle,
#themeToggle:focus,
#themeToggle:focus-visible,
#themeToggle:focus-within,
#themeToggle:hover,
#themeToggle:active{
  outline:none !important;
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
}
#themeToggle::before,
#themeToggle::after,
#themeToggle:focus::before,
#themeToggle:focus::after,
#themeToggle:focus-visible::before,
#themeToggle:focus-visible::after{
  content:none !important;
  box-shadow:none !important;
  outline:none !important;
}

/* ♿️ Accessibilité focus : seulement au clavier sur desktop, halo GRIS discret */
@media (any-hover: hover) and (pointer: fine){
  #themeToggle:focus-visible{
    outline:2px solid #888 !important;
    outline-offset:4px !important;
    border-radius:999px;
  }
}

.switch__track{
  position:relative; width:64px; height:36px; border-radius:999px;
  transition:background-color .25s ease, box-shadow .25s ease;
  background:#2f3135; box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
}
.switch__thumb{
  position:absolute; top:4px; left:4px; width:28px; height:28px; border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  will-change:transform;
}

/* Icônes recolorables (gris via mask) */
.switch__icon{
  position:absolute; top:50%; width:16px; height:16px; transform:translateY(-50%);
  pointer-events:none; opacity:.6; transition:opacity .25s ease;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
  background:none;
  background-color:var(--icon-gray); /* <- change si tu veux un autre gris */
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
          mask-repeat:no-repeat;          mask-position:center;          mask-size:contain;
}
.switch__icon--sun { left:10px;  -webkit-mask-image:url("https://markandremacao.com/wp-content/uploads/2025/09/EP_SU.svg"); mask-image:url("https://markandremacao.com/wp-content/uploads/2025/09/EP_SU.svg"); }
.switch__icon--moon{ right:10px; -webkit-mask-image:url("https://markandremacao.com/wp-content/uploads/2025/09/EP_MO.svg"); mask-image:url("https://markandremacao.com/wp-content/uploads/2025/09/EP_MO.svg"); }

/* États visuels du switch */
body.theme-light .switch__track{ background:#e9e9e9; box-shadow:inset 0 2px 6px rgba(0,0,0,.15); }
body.theme-dark  .switch__track{ background:#2f3135; box-shadow:inset 0 2px 6px rgba(0,0,0,.35); }

body.theme-light .switch__thumb{ transform:translateX(28px); background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); }
body.theme-dark  .switch__thumb{ transform:translateX(0);    background:#6f6f6f; }

body.theme-light .switch__icon--sun { opacity:.95; }
body.theme-light .switch__icon--moon{ opacity:.25; }
body.theme-dark  .switch__icon--sun { opacity:.25; }
body.theme-dark  .switch__icon--moon{ opacity:.95; }

/* Texte accessible (invisible visuellement) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* (Option) bouton flottant si besoin : ajouter la classe switch--fab au bouton
.switch.switch--fab{ position:fixed; bottom:16px; left:16px; }
*/

/* Mode clair : on enlève uniquement le fond du conteneur marqué .image-none */
body.theme-light .image-none{
  background: none !important;
  background-image: none !important;      /* coupe l'image/gradient en background */
}

/* Superposition Elementor (sections ET containers flex) */
body.theme-light .image-none > .elementor-background-overlay{
  display: none !important;                /* coupe le voile/gradient au-dessus */
}

/* Si un gradient/fond est posé via ::before/::after */
body.theme-light .image-none::before,
body.theme-light .image-none::after{
  content: none !important;
  display: none !important;
}

/* Cas où l’“image” est un <img> dans le conteneur (pas un background CSS) */
body.theme-light .image-none > img{
  display: none !important;
}


/* --- Mrs Saint Delafield sur le titre --- */
.hero-zoom{
  font-family: "Mrs Saint Delafield", cursive;
  /* taille responsive, ajuste si besoin */
  font-size: clamp(60px, 9vw, 160px);
  line-height: 1;
  letter-spacing: .02em;
  /* animation */
  --scale: 1;                       /* mis à jour par JS */
  transform: scale(var(--scale));
  transform-origin: left center;
  will-change: transform;
  backface-visibility: hidden;
}

/* Anti-coupure si parent a overflow caché */
.hero-zoom{ overflow: visible; }

/* Moins d’animation si l’utilisateur préfère */
@media (prefers-reduced-motion: reduce){
  .hero-zoom{ transform: none !important; }
}

/* Petites tailles : zoom un peu moins fort par défaut (si tu ne mets pas de data-attrs) */
@media (max-width: 640px){
  .hero-zoom{ font-size: clamp(50px, 12vw, 120px); }
}

/* Patch global anti-scroll horizontal (articles) */
html,
body[class*="postid-"] {
  max-width: 100%;
  overflow-x: hidden;
}

/* === Exclure un popup du dark mode sans changer son fond d'origine === */

/* Garde tes couleurs de fond du popup ; on ne touche PAS au background */
body.theme-dark .no-dark,
body.theme-dark .no-dark * {
  color: #111 !important;            /* texte lisible */
}
body.theme-dark .no-dark a {
  color: #0b57d0 !important;         /* liens lisibles */
}

/* Annule toute couleur de fond que nous aurions forcée avant */
body.theme-dark .no-dark .dialog-widget-content,
body.theme-dark .no-dark .elementor-widget-container,
body.theme-dark .no-dark .modal-content,
body.theme-dark .no-dark .pum-content,
body.theme-dark .no-dark .mfp-content {
  background: unset !important;      /* ← laisse ton gris d'origine s'afficher */
}

/* Si l'overlay du popup a été touché ailleurs, tu peux réactiver sa teinte ainsi :
body.theme-dark .no-dark-overlay { background: rgba(0,0,0,.55) !important; }
*/

/* Toast "Lien copié" */
.ep-share-toast {
  position: fixed;
  z-index: 99999;
  transform: translate(-50%, -12px);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.85);
  color: #fff;
  font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.ep-share-toast.is-in { opacity: 1; transform: translate(-50%, -20px); }

/* Couper les halos exotiques de certains thèmes sur ce bouton */
.ep-share a:focus,
.ep-share a:focus-visible,
.ep-share button:focus,
.ep-share button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Étoile clignotante douce (pulse + léger glow) */
.twinkle{
  display:inline-block;               /* pour pouvoir scaler sans bouger la ligne */
  line-height:1;                      /* évite les sauts */
  animation: twinkle 1.3s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity, filter;
}

/* Animation */
@keyframes twinkle{
  0%,100%{
    opacity:0;
    transform: scale(.98) rotate(-2deg);
    filter: drop-shadow(0 0 0 rgba(255,220,120,0));
  }
  50%{
    opacity:1;
    transform: scale(1.06) rotate(0deg);
    /* léger halo doré (change la couleur si tu veux) */
    filter: drop-shadow(0 0 6px rgba(255,235,160,.8))
            drop-shadow(0 0 14px rgba(255,215,120,.6));
  }
}

/* Respect “réduire les animations” */
@media (prefers-reduced-motion: reduce){
  .twinkle{ animation:none; }
}

/* ================================
   IN-APP (Instagram/FB) FALLBACKS
   ================================ */

/* Viewport height plus fiable dans les webviews */
@supports (height: 100dvh) {
  .eb-archives__window { height: min(86dvh, 820px) !important; }
  .eb-archives__sheet  { max-height: 80dvh !important; }
}

/* Scroll fluide et fiable dans les webviews */
.eb-archives,
.eb-archives__content,
.eb-archives__sidebar,
.eb-archives__main,
.eb-archives__preview,
.eb-archives__sheet-body {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Force le compositing pour limiter des bugs d’affichage dans IAB */
.eb-archives__window { transform: translateZ(0); }

/* ====== Switch soleil/lune : fallback si mask-image indisponible ====== */
/* (Le JS ajoute .is-iab sur <html> dans l’in-app Instagram/FB) */

.is-iab .switch__icon{
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
  opacity: .9;
}

/* soleil */
.is-iab .switch__icon--sun{
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%238a8a8a'%3E%3Cpath d='M6.76 4.84l-1.8-1.79L3.17 4.84l1.79 1.8 1.8-1.8zm10.48 0l1.79-1.79 1.79 1.79-1.79 1.8-1.79-1.8zM12 4V1h0v3zm0 19v-3h0v3zM4 12H1v0h3zm19 0h-3v0h3zM6.76 19.16l-1.8 1.8-1.79-1.8 1.79-1.79 1.8 1.79zm12.28 0l1.79 1.8-1.79 1.8-1.79-1.8 1.79-1.8zM12 7a5 5 0 100 10 5 5 0 000-10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}

/* lune */
.is-iab .switch__icon--moon{
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%238a8a8a'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}

/* ====== Emoji/étoiles “twinkle” : fallback sans filter drop-shadow ====== */
.is-iab .twinkle{
  animation: twinkle-iab 1.3s ease-in-out infinite;
  filter: none !important;
  text-shadow: 0 0 0 rgba(0,0,0,0);
}
@keyframes twinkle-iab{
  0%,100%{ opacity:.15; transform:scale(.98) rotate(-2deg); text-shadow:none; }
  50%    { opacity:1;   transform:scale(1.06) rotate(0);   text-shadow:0 0 6px rgba(255,235,160,.8), 0 0 12px rgba(255,215,120,.6); }
}

/* Petites sécurités pour que tes styles restent au-dessus des thèmes/overlays */
.eb-archives__backdrop { z-index: 0; }
.eb-archives__window   { z-index: 1; position: relative; }