@import "fonts-reading.css";
@import "main.css";
@import "book.css";
@import "bible.css";
@import "menus.css";
@import "blocks.css";
@import "home.css";
@import "elements.css";
@import "responsive.css";

:root {
    --fs-base: clamp(14px, 0.7vw, 18px);
    --fs-small: calc(var(--fs-base) * 0.85);
    --fs-large: calc(var(--fs-base) * 1.25);
    --fs-title: clamp(17px, 1.7vw, 24px);
    --fs-hero: clamp(32px, 4vw + 1rem, 64px);
    --fs-menu: clamp(16px, 0.5vw +0.5rem, 19px);
    --fs-menu: clamp(16px, 1.1vw, 19px);
    
}

html {
    font-size: clamp(16px, 1.1vw, 19px);
    color: var(--app-text);
}


html, body {
    height: 100%;
    margin: 0;
      overflow: hidden;   /* đź”’ pas de scroll global */

}
body {
    font-size: var(--fs-base);
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-title); }
small { font-size: var(--fs-small); }

body.ajax-loading {
    cursor: none; /* cache le curseur normal */
    pointer-events: none; /* bloque les clics */
}

#loading-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--app-primary);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: spin 1s linear infinite;
    z-index: 9999;
    display: none;
}

@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.ajax-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    z-index: 9999;
    pointer-events: none; /* juste visuel */
}

body {
    position: relative;
    
    background-color: var(--app-bg)!important;
    background: none;

}
.back {
    position: fixed; 
    inset: 0; 
    z-index: -1;
  
  background-color:var(--app-bg);
   background-image: var(--header-bg-image);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;

}

.back::before {
  content: "";
  position: absolute;
  inset: 0;

  /* plusieurs couches décalées pour casser la régularité */
  background:
    radial-gradient(circle at 12% 18%, 
    color-mix(in srgb, var(--app-body) 28%, transparent), transparent 65%), 
    radial-gradient(circle at 78% 22%, 
    color-mix(in srgb, var(--app-body) 18%, transparent), transparent 60%), 
    radial-gradient(circle at 35% 72%, color-mix(in srgb, 
    var(--app-body) 24%, transparent), transparent 62%), 
    radial-gradient(circle at 88% 68%, color-mix(in srgb, 
    var(--app-body) 20%, transparent), transparent 60%), 
    radial-gradient(circle at 52% 44%, color-mix(in srgb, 
    var(--app-body) 15%, transparent), transparent 70%);
  /* tailles différentes et non proportionnelles = irrégularité */
  background-size:
    160px 210px,
    230px 170px,
    190px 260px,
    250px 190px,
    300px 240px;

  background-repeat: repeat;

  /* flou pour casser les formes, mais pas trop */
  filter: blur(26px) contrast(150%);

  opacity: 0.55;
  pointer-events: none;
}
.app { 
    display: flex; flex-direction: column;
    height:100vh;
    height:100dvh;
    width:100%;
    position: relative; 
    z-index: 1; /* passe au-dessus de .back */ 
}
.site-header {
    flex: 0 0 auto;
    width:100%;
    position: sticky;
   
    top: 0;
    z-index: 1030;
    flex-shrink: 0;
    color: var(--app-text);
    text-align: center;
    padding-top: 0rem;
    padding-bottom: 1rem;
}

.app-layout {
    flex: 1;
    min-height: 0;
    overflow:hidden;
    padding: 0;
}

.app-layout > .row {
    height: 100%;
    min-height: 0;
    margin-left: 0;
    margin-right: 0;
}

.row {
    background: transparent;
    
    padding-bottom: 0rem;
}
.card-main-wrapper {
    z-index: 1020;
    
    display:flex;
    align-items:flex-start;
   
}
.toggle-header,
.toggle-card {
    display: none;
}

.offcanvas {
    z-index: 4000;
    background:linear-gradient(to bottom, var(--app-bg-menu), var(--app-bg), var(--app-secondary));
    color: var(--app-text);
    
}
#offcanvasLeft .my-close{
    margin-left: auto;
}
#offcanvasRight .offcanvas-header {
    display: flex;
    align-items: center;
}

#offcanvasRight .offcanvas-header h5 {
    flex: 1;
    text-align: center;
}

.my-close {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
}
.btn-search svg,
.my-close svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke: var(--app-text-muted);
}
.btn-search:hover{
}
.btn-search:hover svg,
.my-close:hover svg{
    text-shadow: 0 0 12px 5px var(--app-bg);
    stroke:var(--app-text);
    
}
.side-toggle {
    background: none;
    border: none;
    font-size: 1.4rem;
    padding: 0.25rem 0rem;
    color: var(--app-text);
    opacity: 0.6;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.side-toggle:hover {
    opacity: 1;
    transform: scale(1.05);
}

.side-toggle:focus {
    outline: none;
    box-shadow: none;
}
.site-footer {
    flex: 0 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "verse links";
    align-items: center;
     justify-items: stretch; /* important */
    color: var(--app-text);
    gap: 1rem;
    padding: 1rem 0.5rem;
    margin-top: 1rem;

background: radial-gradient(
  color-mix(in srgb, var(--app-primary-soft) 20%, var(--app-bg)),
  color-mix(in srgb, var(--app-bg-menu) 90%, var(--app-bg))
);
    border-top: 1px solid var(--app-primary-soft);
    font-size: var(--fs-large);
}

/* ton overlay existant */
#loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.0);
    pointer-events: none;
    z-index: 9999;
    display: none;
}

/* affiché quand body.loading */
body.loading #loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

/* spinner visible sur mobile */
.loading-spinner {
    width: 33px;
    height: 33px;
    border: 3px solid var(--app-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

#main-links{
    height: 50px;

    display:none;
}