/*
 * Toi & Moi - Styles CSS 1.1.0
 * Portée volontairement limitée aux titres et paragraphes éditoriaux.
 * Aucun bouton, formulaire, shortcode, image, carte, menu ou interface plugin
 * n'est ciblé par ce fichier.
 */

body.tm-css-active {
    --tm-css-bg: #071126;
    --tm-css-text: rgba(255, 250, 255, .94);
    --tm-css-text-soft: rgba(255, 240, 249, .84);
    --tm-css-pearl: #ffd7eb;
    --tm-css-accent: #ff76bd;
    --tm-css-accent-2: #d58aff;
    --tm-css-accent-3: #53b7ff;
    --tm-css-title-gradient: linear-gradient(105deg, #fffaff 0%, #ffd7eb 23%, #ff9dd2 43%, #d58aff 68%, #9f8bff 84%, #e8f7ff 100%);
    --tm-css-page-background: radial-gradient(circle at 16% 18%, rgba(255, 118, 189, .14), transparent 27%), radial-gradient(circle at 82% 24%, rgba(83, 183, 255, .14), transparent 24%), linear-gradient(145deg, #030817 0%, #07152f 48%, #111b46 100%);
    --tm-css-display: "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --tm-css-body: "Manrope", "Trebuchet MS", Verdana, sans-serif;
    --tm-css-title-glow: 0 0 18px rgba(255, 118, 189, .12);
    --tm-css-spark-opacity: .72;
    --tm-css-shimmer-duration: 8s;
    --tm-css-spark-duration: 4.8s;
}

body.tm-css-intensity-soft {
    --tm-css-title-glow: 0 0 11px color-mix(in srgb, var(--tm-css-accent) 12%, transparent);
    --tm-css-spark-opacity: .42;
    --tm-css-shimmer-duration: 12s;
    --tm-css-spark-duration: 7s;
}

body.tm-css-intensity-enchanted {
    --tm-css-title-glow: 0 0 12px color-mix(in srgb, var(--tm-css-pearl) 28%, transparent), 0 0 30px color-mix(in srgb, var(--tm-css-accent-2) 24%, transparent);
    --tm-css-spark-opacity: .92;
    --tm-css-shimmer-duration: 7s;
    --tm-css-spark-duration: 4.2s;
}

body.tm-css-intensity-intense {
    --tm-css-title-glow: 0 0 14px color-mix(in srgb, var(--tm-css-pearl) 34%, transparent), 0 0 38px color-mix(in srgb, var(--tm-css-accent) 34%, transparent);
    --tm-css-spark-opacity: 1;
    --tm-css-shimmer-duration: 6s;
    --tm-css-spark-duration: 3.6s;
}

body.tm-css-intensity-magical {
    --tm-css-title-glow: 0 0 15px color-mix(in srgb, var(--tm-css-pearl) 42%, transparent), 0 0 42px color-mix(in srgb, var(--tm-css-accent-2) 42%, transparent), 0 0 64px color-mix(in srgb, var(--tm-css-accent-3) 22%, transparent);
    --tm-css-spark-opacity: 1;
    --tm-css-shimmer-duration: 5.2s;
    --tm-css-spark-duration: 3.1s;
}

body.tm-css-intensity-fairy {
    --tm-css-title-glow: 0 0 16px color-mix(in srgb, #fff 54%, transparent), 0 0 46px color-mix(in srgb, var(--tm-css-accent) 48%, transparent), 0 0 72px color-mix(in srgb, var(--tm-css-accent-3) 30%, transparent);
    --tm-css-spark-opacity: 1;
    --tm-css-shimmer-duration: 4.5s;
    --tm-css-spark-duration: 2.7s;
}

/* Fond absolu 1.0.5 : image globale avec derogation des vraies images Elementor. */
html.tm-css-background-html,
body.tm-css-background:not(.wp-admin) {
    min-height: 100%;
    background-color: var(--tm-css-global-background-color, #020817) !important;
    background-image: var(
        --tm-css-global-background-image,
        linear-gradient(180deg, rgba(2, 4, 18, .12), rgba(17, 5, 35, .18)),
        url("../images/toi-moi-ciel-etoile-continu.webp")
    ) !important;
    background-position: var(--tm-css-global-background-position, center center) !important;
    background-size: var(--tm-css-global-background-size, cover) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

body.tm-css-background:not(.wp-admin) {
    min-height: 100vh;
}

body.tm-css-background:not(.wp-admin)::before {
    content: none !important;
    display: none !important;
}

body.tm-css-background:not(.wp-admin) :where(
    #page,
    #content,
    .site,
    .site-content,
    .site-main,
    main,
    .elementor-location-single
) {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"],
body.tm-css-background:not(.wp-admin)
.tm-css-background-page {
    background-color: transparent !important;
    box-shadow: none !important;
}

/*
 * Toutes les couches Elementor perdent couleur, ombre, filtre et flou.
 * Le JS decide ensuite si background-image doit etre vide ou conserver une URL.
 */
body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"]
:is(
    .e-con,
    .e-con-inner,
    .elementor-section,
    .elementor-container,
    .elementor-column,
    .elementor-column-wrap,
    .elementor-widget-wrap,
    .elementor-inner,
    .elementor-section-wrap,
    .elementor-widget,
    .elementor-widget-container,
    .elementor-background-overlay,
    .elementor-motion-effects-layer,
    .elementor-background-slideshow,
    .swiper-slide-bg
):not(.tm-css-keep-background, .tm-css-keep-background *) {
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    background-blend-mode: normal !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Aucune URL : la couche devient totalement transparente. */
body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"]
.tm-css-clear-background,
body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"].tm-css-clear-background {
    background-image: none !important;
}

/* Une URL existe : seule l'image est conservee, sans couleur ni gradient. */
body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"]
.tm-css-preserve-background-image,
body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"].tm-css-preserve-background-image {
    background-image: var(--tm-css-preserved-bg-image) !important;
    background-position: var(--tm-css-preserved-bg-position, center center) !important;
    background-size: var(--tm-css-preserved-bg-size, cover) !important;
    background-repeat: var(--tm-css-preserved-bg-repeat, no-repeat) !important;
    background-attachment: var(--tm-css-preserved-bg-attachment, scroll) !important;
}

/* Les images placees sur les pseudo-elements suivent la meme regle. */
body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"]
:is(
    .e-con,
    .e-con-inner,
    .elementor-section,
    .elementor-container,
    .elementor-column,
    .elementor-column-wrap,
    .elementor-widget-wrap,
    .elementor-widget,
    .elementor-widget-container
).tm-css-scanned-layer:not(.tm-css-keep-background, .tm-css-keep-background *)::before,
body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"]
:is(
    .e-con,
    .e-con-inner,
    .elementor-section,
    .elementor-container,
    .elementor-column,
    .elementor-column-wrap,
    .elementor-widget-wrap,
    .elementor-widget,
    .elementor-widget-container
).tm-css-scanned-layer:not(.tm-css-keep-background, .tm-css-keep-background *)::after {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
}

body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"]
.tm-css-preserve-before-image::before {
    background-image: var(--tm-css-preserved-before-image) !important;
    background-position: var(--tm-css-preserved-before-position, center center) !important;
    background-size: var(--tm-css-preserved-before-size, cover) !important;
    background-repeat: var(--tm-css-preserved-before-repeat, no-repeat) !important;
}

body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"]
.tm-css-preserve-after-image::after {
    background-image: var(--tm-css-preserved-after-image) !important;
    background-position: var(--tm-css-preserved-after-position, center center) !important;
    background-size: var(--tm-css-preserved-after-size, cover) !important;
    background-repeat: var(--tm-css-preserved-after-repeat, no-repeat) !important;
}

/* Les videos et separateurs restent masques ; les images de fond sont preservees. */
body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"]
:is(.elementor-background-video-container, .elementor-shape) {
    display: none !important;
}

/* Images ajoutees avec le widget Image : contenu conserve, effets Elementor retires. */
body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"]
.elementor-widget-image:not(.tm-css-keep-background) img {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

body.tm-css-background:not(.wp-admin)
.elementor[data-elementor-type="wp-page"]
.elementor-widget-heading .elementor-heading-title {
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

@media (max-width: 767px) {
    html.tm-css-background-html,
    body.tm-css-background:not(.wp-admin) {
        background-position: var(--tm-css-global-background-mobile-position, 52% center) !important;
    }
}

/*
 * TITRES
 * - aperçu d'administration ;
 * - zone opt-in .tm-css-content ;
 * - widget Elementor Heading ;
 * - titres saisis dans Elementor Text Editor ;
 * - blocs Titre WordPress.
 * Les templates header/footer/popup sont exclus à la racine Elementor.
 */
body.tm-css-active :where(
    :is(.tm-css-preview, .tm-css-content) :is(h1, h2, h3, h4, h5, h6),
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-heading .elementor-heading-title,
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-text-editor :is(h1, h2, h3, h4, h5, h6),
    .entry-content > :is(h1, h2, h3, h4, h5, h6),
    .entry-content :is(.wp-block-heading)
) {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 .72em;
    color: var(--tm-css-pearl) !important;
    font-family: var(--tm-css-display) !important;
    font-style: normal;
    font-weight: 600 !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance;
}

body.tm-css-active :where(
    :is(.tm-css-preview, .tm-css-content) :is(h1, h2, h3),
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-heading :is(h1, h2, h3).elementor-heading-title,
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-text-editor :is(h1, h2, h3),
    .entry-content > :is(h1, h2, h3),
    .entry-content :is(h1, h2, h3).wp-block-heading
) {
    padding-bottom: .19em;
    background-image: var(--tm-css-title-gradient);
    background-position: 20% 50%;
    background-size: 210% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--tm-css-title-glow);
}

body.tm-css-active :where(
    :is(.tm-css-preview, .tm-css-content) h1,
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) :is(.elementor-widget-heading, .elementor-widget-text-editor) h1,
    .entry-content h1.wp-block-heading,
    .entry-content > h1
) { font-size: clamp(3rem, 6.1vw, 5.4rem) !important; }

body.tm-css-active :where(
    :is(.tm-css-preview, .tm-css-content) h2,
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) :is(.elementor-widget-heading, .elementor-widget-text-editor) h2,
    .entry-content h2.wp-block-heading,
    .entry-content > h2
) { font-size: clamp(2.25rem, 4.5vw, 4rem) !important; }

body.tm-css-active :where(
    :is(.tm-css-preview, .tm-css-content) h3,
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) :is(.elementor-widget-heading, .elementor-widget-text-editor) h3,
    .entry-content h3.wp-block-heading,
    .entry-content > h3
) { font-size: clamp(1.75rem, 3vw, 2.65rem) !important; }

body.tm-css-active :where(
    :is(.tm-css-preview, .tm-css-content) h4,
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) :is(.elementor-widget-heading, .elementor-widget-text-editor) h4,
    .entry-content h4.wp-block-heading,
    .entry-content > h4
) { font-size: clamp(1.4rem, 2.1vw, 1.9rem) !important; }

body.tm-css-active :where(
    :is(.tm-css-preview, .tm-css-content) :is(h5, h6),
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) :is(.elementor-widget-heading, .elementor-widget-text-editor) :is(h5, h6),
    .entry-content :is(h5, h6).wp-block-heading,
    .entry-content > :is(h5, h6)
) {
    font-family: var(--tm-css-body) !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
}

body.tm-css-active :where(
    :is(.tm-css-preview, .tm-css-content) :is(h1, h2, h3),
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-heading :is(h1, h2, h3).elementor-heading-title,
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-text-editor :is(h1, h2, h3),
    .entry-content > :is(h1, h2, h3),
    .entry-content :is(h1, h2, h3).wp-block-heading
)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -.08em;
    left: 0;
    height: 7px;
    pointer-events: none;
    opacity: var(--tm-css-spark-opacity);
    background: radial-gradient(closest-side, #fff 0 25%, var(--tm-css-accent) 27% 42%, transparent 45%) 50% 50% / 12px 12px no-repeat, radial-gradient(closest-side, #fff 0 20%, var(--tm-css-accent-3) 24% 38%, transparent 42%) 100% 50% / 8px 8px no-repeat, linear-gradient(90deg, var(--tm-css-accent), var(--tm-css-accent-2) 56%, var(--tm-css-accent-3)) 0 50% / 100% 1px no-repeat;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tm-css-accent) 52%, transparent));
}

/*
 * PARAGRAPHES
 * Aucun p global sous .elementor : seulement le widget Text Editor.
 * Un formulaire inséré par Shortcode/HTML reste donc totalement intact.
 */
body.tm-css-active :where(
    :is(.tm-css-preview, .tm-css-content) p,
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-text-editor p,
    .entry-content > p,
    .entry-content .wp-block-paragraph
) {
    max-width: 72ch;
    margin: 0 0 1.15em;
    color: var(--tm-css-text-soft);
    font-family: var(--tm-css-body) !important;
    font-size: clamp(1rem, .94rem + .2vw, 1.125rem);
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: .006em;
}

body.tm-css-active :where(
    :is(.tm-css-preview, .tm-css-content) p.tm-css-lead,
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-text-editor p.tm-css-lead,
    .entry-content p.tm-css-lead
) {
    color: var(--tm-css-pearl) !important;
    font-family: var(--tm-css-display) !important;
    font-size: clamp(1.35rem, 1.1rem + .8vw, 1.9rem) !important;
    font-style: italic;
    font-weight: 600;
    line-height: 1.4;
}

body.tm-css-active :where(
    :is(.tm-css-preview, .tm-css-content) p :is(strong, b),
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-text-editor p :is(strong, b),
    .entry-content :is(p, .wp-block-paragraph) :is(strong, b)
) {
    color: #fff5fb;
    font-weight: 700;
    text-shadow: 0 0 10px color-mix(in srgb, var(--tm-css-accent) 24%, transparent);
}

/* Animation limitée aux titres reconnus ci-dessus. */
body.tm-css-motion :where(
    :is(.tm-css-preview, .tm-css-content) :is(h1, h2, h3),
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-heading :is(h1, h2, h3).elementor-heading-title,
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-text-editor :is(h1, h2, h3),
    .entry-content > :is(h1, h2, h3),
    .entry-content :is(h1, h2, h3).wp-block-heading
) {
    animation: tm-css-title-shimmer var(--tm-css-shimmer-duration, 8s) ease-in-out infinite;
}

body.tm-css-motion :where(
    :is(.tm-css-preview, .tm-css-content) :is(h1, h2, h3),
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-heading :is(h1, h2, h3).elementor-heading-title,
    .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-text-editor :is(h1, h2, h3),
    .entry-content > :is(h1, h2, h3),
    .entry-content :is(h1, h2, h3).wp-block-heading
)::after {
    animation: tm-css-star-breathe var(--tm-css-spark-duration, 4.8s) ease-in-out infinite;
}

@keyframes tm-css-title-shimmer {
    0%, 100% { background-position: 20% 50%; }
    50% { background-position: 88% 50%; }
}

@keyframes tm-css-star-breathe {
    0%, 100% { opacity: calc(var(--tm-css-spark-opacity) * .64); transform: scaleX(.96); }
    50% { opacity: var(--tm-css-spark-opacity); transform: scaleX(1); }
}

@media (max-width: 767px) {
    body.tm-css-active :where(
        :is(.tm-css-preview, .tm-css-content) :is(h1, h2, h3, h4, h5, h6),
        .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) :is(.elementor-widget-heading, .elementor-widget-text-editor) :is(h1, h2, h3, h4, h5, h6),
        .entry-content :is(h1, h2, h3, h4, h5, h6).wp-block-heading,
        .entry-content > :is(h1, h2, h3, h4, h5, h6)
    ) { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    body.tm-css-motion :where(
        :is(.tm-css-preview, .tm-css-content) :is(h1, h2, h3),
        .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-heading :is(h1, h2, h3).elementor-heading-title,
        .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) .elementor-widget-text-editor :is(h1, h2, h3),
        .entry-content > :is(h1, h2, h3),
        .entry-content :is(h1, h2, h3).wp-block-heading
    ) {
        animation: none !important;
    }
}