/**
 * Popup Spiral — styles front.
 *
 * La structure vit ici ; chaque design n'injecte que des variables CSS
 * (--spiral-bg, --spiral-accent, --spiral-radius…) scopées par sa classe.
 */

/* ---------- Conteneur plein écran + positionnement ---------- */

.spiral-root {
    position: fixed;
    inset: 0;
    display: flex;
    padding: 24px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.spiral-root[hidden] {
    display: none;
}

.spiral-root.spiral-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Grille 3×3 : justify-content = horizontal, align-items = vertical. */
.spiral-pos-top-left      { justify-content: flex-start; align-items: flex-start; }
.spiral-pos-top-center    { justify-content: center;     align-items: flex-start; }
.spiral-pos-top-right     { justify-content: flex-end;   align-items: flex-start; }
.spiral-pos-center-left   { justify-content: flex-start; align-items: center; }
.spiral-pos-center        { justify-content: center;     align-items: center; }
.spiral-pos-center-right  { justify-content: flex-end;   align-items: center; }
.spiral-pos-bottom-left   { justify-content: flex-start; align-items: flex-end; }
.spiral-pos-bottom-center { justify-content: center;     align-items: flex-end; }
.spiral-pos-bottom-right  { justify-content: flex-end;   align-items: flex-end; }

/* Barres flottantes : pleine largeur, collées au bord. */
.spiral-pos-bar-top,
.spiral-pos-bar-bottom {
    padding: 0;
}

.spiral-pos-bar-top    { align-items: flex-start; }
.spiral-pos-bar-bottom { align-items: flex-end; }

.spiral-pos-bar-top .spiral-popup,
.spiral-pos-bar-bottom .spiral-popup {
    width: 100%;
    max-width: none;
    border-radius: 0;
    max-height: 100vh;
    max-height: 100dvh;
}

/* ---------- Overlay ---------- */

.spiral-overlay {
    position: absolute;
    inset: 0;
}

.spiral-mode-dim .spiral-overlay {
    background: rgba(0, 0, 0, 0.55);
}

.spiral-mode-blur .spiral-overlay {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Sans overlay (notices, barres) : la page reste utilisable. */
.spiral-mode-none {
    pointer-events: none;
}

.spiral-mode-none .spiral-overlay {
    display: none;
}

.spiral-mode-none.spiral-open .spiral-popup {
    pointer-events: auto;
}

/* ---------- Le popup lui-même (consomme les variables du design) ---------- */

/* Jamais d'overflow ici : la croix « à l'extérieur » (top négatif) doit rester
   visible — le scroll de secours vit dans .spiral-body. */
.spiral-popup {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--spiral-width, min(560px, 92vw));
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    background: var(--spiral-bg, #ffffff);
    color: var(--spiral-text, #1e293b);
    font-family: var(--spiral-font, inherit);
    border: var(--spiral-border, 0 solid transparent);
    border-radius: var(--spiral-radius, 12px);
    box-shadow: var(--spiral-shadow, 0 8px 30px rgba(0, 0, 0, 0.15));
    transform: translateY(14px);
    transition: transform 0.25s ease;
}

/* Taille automatique : la largeur suit le contenu (plafonnée). Les positions
   barre gardent leur pleine largeur (sélecteur plus spécifique). */
.spiral-size-auto {
    width: fit-content;
    max-width: min(820px, 94vw);
}

/* Hauteur personnalisée : contenu centré via marges auto — contrairement à
   justify-content: center, elles se replient à 0 quand le contenu déborde,
   sans jamais tronquer le haut dans un conteneur scrollable. */
.spiral-has-height .spiral-body {
    flex: 1;
}

/* Position verticale du texte dans le cadre (effet visible quand le cadre est
   plus haut que le texte). Les marges auto en flex sont sûres même en zone
   scrollable — contrairement à justify-content, elles ne tronquent pas le haut. */
.spiral-valign-center .spiral-content {
    margin-top: auto;
    margin-bottom: auto;
}

.spiral-valign-bottom .spiral-content {
    margin-top: auto;
}

.spiral-open .spiral-popup {
    transform: translateY(0);
}

/* Scroll de secours : n'apparaît que si le contenu dépasse l'écran. */
.spiral-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    border-radius: inherit;
}

.spiral-content {
    padding: var(--spiral-padding, 28px);
    box-sizing: border-box;
    min-width: 0;
}

/* Taille du texte réglable ; les designs neutres (builder) gardent la leur. */
.spiral-popup:not(.spiral-neutral) .spiral-content {
    font-size: var(--spiral-text-size, 16px);
}

/* Réserve un espace en haut à droite : le contenu (un titre long, par ex.)
   ne passe jamais sous le bouton fermer intérieur. Le float ne décale que
   les premières lignes ; en dessous, le contenu reprend toute la largeur.
   Exclu : image à droite (le bouton est alors au-dessus de l'image) et
   design neutre (mise en page pilotée par le builder). */
.spiral-close-inside:not(.spiral-img-right):not(.spiral-neutral) .spiral-content::before {
    content: "";
    float: right;
    width: 44px;
    height: 40px;
}

/* Le style « texte Fermer » est plus large qu'une croix. */
.spiral-close-inside.spiral-closestyle-text:not(.spiral-img-right):not(.spiral-neutral) .spiral-content::before {
    width: 92px;
}

/* Les marges par défaut des titres (H2…) ne fusionnent pas avec le padding :
   sans ces remises à zéro, quelques px de dépassement suffisent à déclencher
   une barre de scroll fantôme. */
.spiral-content > :first-child {
    margin-top: 0;
}

.spiral-content > :last-child {
    margin-bottom: 0;
}

.spiral-content a {
    color: var(--spiral-accent, #2271b1);
}

.spiral-content .spiral-btn,
.spiral-content button,
.spiral-content input[type="submit"] {
    background: var(--spiral-accent, #2271b1);
    color: var(--spiral-btn-text, #ffffff);
    border: 0;
    border-radius: calc(var(--spiral-radius, 12px) / 2);
    padding: 10px 22px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

/* Taille du texte réglable pour le bouton d'action du popup. */
.spiral-content .spiral-btn {
    font-size: var(--spiral-btn-size, 16px);
}

/* ---------- Images ---------- */

.spiral-img-background {
    background-size: cover;
    background-position: center;
}

.spiral-actions {
    margin: 18px 0 0;
}

.spiral-align-left   { text-align: left; }
.spiral-align-center { text-align: center; }
.spiral-align-right  { text-align: right; }

.spiral-image-media {
    display: block;
    max-width: 100%;
    height: auto;
}

.spiral-image-banner {
    flex: none;
    width: var(--spiral-img-w, 100%);
    margin: 0 auto;
    border-radius: var(--spiral-radius, 12px) var(--spiral-radius, 12px) 0 0;
    overflow: hidden;
}

.spiral-image-banner .spiral-image-media {
    width: 100%;
    object-fit: cover;
}

/* Espacement optionnel autour de l'image (bannière et côtés). */
.spiral-imgpad-small .spiral-image {
    padding: 12px;
}

.spiral-imgpad-medium .spiral-image {
    padding: 24px;
}

.spiral-imgpad-custom .spiral-image {
    padding: var(--spiral-img-pad, 16px);
}

.spiral-imgpad-small .spiral-image .spiral-image-media,
.spiral-imgpad-medium .spiral-image .spiral-image-media,
.spiral-imgpad-custom .spiral-image .spiral-image-media {
    border-radius: calc(var(--spiral-radius, 12px) / 2);
}

/* Bordure optionnelle autour de l'image. */
.spiral-imgborder-thin .spiral-image .spiral-image-media {
    border: 1px solid var(--spiral-img-border-color, #e2e8f0);
    box-sizing: border-box;
}

.spiral-imgborder-thick .spiral-image .spiral-image-media {
    border: 3px solid var(--spiral-img-border-color, #e2e8f0);
    box-sizing: border-box;
}

.spiral-imgborder-custom .spiral-image .spiral-image-media {
    border: var(--spiral-img-border-w, 2px) solid var(--spiral-img-border-color, #e2e8f0);
    box-sizing: border-box;
}

.spiral-img-left .spiral-body,
.spiral-img-right .spiral-body {
    align-items: stretch;
}

.spiral-img-left .spiral-body {
    flex-direction: row;
}

.spiral-img-right .spiral-body {
    flex-direction: row-reverse;
}

/* Colonne image (gauche/droite) : la largeur choisie, plafonnée à la moitié. */
.spiral-image-side {
    flex: 0 0 min(var(--spiral-img-w, 40%), 50%);
    overflow: hidden;
}

.spiral-img-left .spiral-image-side {
    border-radius: var(--spiral-radius, 12px) 0 0 var(--spiral-radius, 12px);
}

.spiral-img-right .spiral-image-side {
    border-radius: 0 var(--spiral-radius, 12px) var(--spiral-radius, 12px) 0;
}

.spiral-image-side .spiral-image-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Bouton fermer ---------- */

.spiral-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--spiral-close-bg, rgba(0, 0, 0, 0.08));
    color: var(--spiral-close-color, inherit);
    border: 0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.spiral-close:hover {
    background: var(--spiral-close-hover-bg, rgba(0, 0, 0, 0.18));
    color: var(--spiral-close-hover-color, var(--spiral-close-color, inherit));
    text-decoration: none;
}

/* Croix dessinée en CSS : centrage optique parfait, indépendant de la police
   (le glyphe × a son encre au-dessus du centre géométrique). */
.spiral-close::before,
.spiral-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.spiral-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.spiral-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Les templates surchargés gardent leur <span>&times;</span> : on le masque,
   la croix CSS prend le relais. */
.spiral-close span {
    display: none;
}

.spiral-close-style-text {
    width: auto;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 13px;
    /* Contraste garanti : repli sur la paire accent / texte de bouton,
       déjà lisible dans tous les designs. */
    background: var(--spiral-close-bg, var(--spiral-accent, #1e293b));
    color: var(--spiral-close-color, var(--spiral-btn-text, #ffffff));
}

.spiral-close-style-text::before,
.spiral-close-style-text::after {
    content: none;
}

.spiral-close-style-text:hover {
    background: var(--spiral-close-hover-bg, var(--spiral-accent, #1e293b));
    color: var(--spiral-close-hover-color, var(--spiral-btn-text, #ffffff));
    filter: brightness(0.94);
}

/* Croix à l'extérieur du popup (au-dessus, à droite). */
.spiral-close-outside .spiral-close {
    top: -40px;
    right: 0;
    background: rgba(255, 255, 255, 0.92);
    color: #1e293b;
}

.spiral-close-outside {
    margin-top: 40px;
    /* La marge de la croix consomme 40px du budget hauteur. */
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
    .spiral-root {
        padding: 12px;
    }

    .spiral-popup {
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }

    .spiral-size-auto {
        width: fit-content;
        max-width: 100%;
    }

    /* Le confort de lecture prime : padding réduit sur petit écran
       (min() préserve le padding 0 du design neutre). */
    .spiral-content {
        padding: min(var(--spiral-padding, 28px), 20px);
    }

    .spiral-img-left .spiral-body,
    .spiral-img-right .spiral-body {
        flex-direction: column;
    }

    .spiral-image-side {
        flex: none;
        border-radius: var(--spiral-radius, 12px) var(--spiral-radius, 12px) 0 0 !important;
    }

    /* La croix « à l'extérieur » sortirait de l'écran : elle repasse dedans. */
    .spiral-close-outside {
        margin-top: 0;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }

    .spiral-close-outside .spiral-close {
        top: 10px;
        right: 10px;
        background: var(--spiral-close-bg, rgba(0, 0, 0, 0.08));
        color: var(--spiral-close-color, inherit);
    }
}

/* ---------- Accessibilité : réduire les animations si demandé ---------- */

@media (prefers-reduced-motion: reduce) {
    .spiral-root,
    .spiral-popup {
        transition: none;
    }
}