/* ==========================================================
 * DBC · Animated Title — v2
 * 5 effets : split-3d, liquid-fill, scrambled-decode,
 * x-ray-reveal, magnetic-words
 * Couleurs & typographie surchargées par Elementor
 * ========================================================== */

.dbc-at {
    --dbc-at-accent-1: #f49826;
    --dbc-at-accent-2: #e25312;
    --dbc-at-accent-angle: 135deg;
    --dbc-at-eyebrow-line-1: #f49826;
    --dbc-at-eyebrow-line-2: #e25312;

    /* Variables d'alignement (surchargées par Elementor) */
    --dbc-at-align: flex-start;
    --dbc-at-text-align: left;
    --dbc-at-mx: 0;
    --dbc-at-mx-r: auto;

    position: relative;
    line-height: 1.15;
    text-align: var(--dbc-at-text-align);
    display: flex;
    flex-direction: column;
    align-items: var(--dbc-at-align);
}

/* H1 SEO — 3 modes d'affichage */

/* Mode 1 : sr-only — invisible mais lu par Google */
.dbc-at-h1--sr-only,
.dbc-at__h1-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;
}

/* Mode 2 : eyebrow — petit sur-titre */
.dbc-at-h1--eyebrow {
    display: block;
    margin: 0 0 14px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dbc-at-blue-1, #0d4899);
    line-height: 1.3;
}

/* Mode 3 : overtitle — grand titre au-dessus du widget */
.dbc-at-h1--overtitle {
    display: block;
    margin: 0 0 24px 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.25;
    color: #0a1929;
    text-align: var(--dbc-at-text-align);
}

/* Sous-titre / Description */
.dbc-at__subtitle {
    margin: 24px 0 0 0;
    max-width: 620px;
    text-align: var(--dbc-at-text-align);
}

/* ============ EYEBROW ============ */
.dbc-at__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: var(--dbc-at-align, flex-start);
}

.dbc-at__eyebrow > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.dbc-at__eyebrow-line {
    display: inline-block;
    height: 2px;
    background: linear-gradient(90deg, var(--dbc-at-eyebrow-line-1), var(--dbc-at-eyebrow-line-2));
    border-radius: 2px;
    flex-shrink: 0;
}

/* ============ TITRE ============ */
.dbc-at__title {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: var(--dbc-at-align, flex-start);
    column-gap: 0.28em;
    row-gap: 0;
    line-height: 1.1;
}

.dbc-at__title > * {
    line-height: 1.1;
}

.dbc-at__plain { display: inline-block; }

.dbc-at__accent {
    display: inline-block;
    position: relative;
    background: linear-gradient(var(--dbc-at-accent-angle), var(--dbc-at-accent-1) 0%, var(--dbc-at-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.08em;
}

/* ==========================================================
 * EFFET 1 — SPLIT 3D
 * ========================================================== */

.dbc-at--split-3d .dbc-at__accent {
    perspective: 1200px;
    -webkit-text-fill-color: initial;
    background: none;
    /* Espace de respiration pour la rotation 3D + italique */
    padding: 0.2em 0.25em 0.3em 0.1em;
    line-height: 1.4;
    overflow: visible;
}

/* Forcer overflow visible sur tous les conteneurs parents pour ne pas couper la 3D */
.dbc-at--split-3d .dbc-at__title {
    overflow: visible;
    line-height: 1.4;
}

.dbc-at--split-3d .dbc-at-word {
    overflow: visible;
    padding-bottom: 0.15em;
}

.dbc-at--split-3d .dbc-at__accent .dbc-at-char {
    display: inline-block;
    transform-origin: 50% 50% -20px;
    transform: rotateX(-90deg) translateZ(0);
    opacity: 0;
    background: linear-gradient(var(--dbc-at-accent-angle), var(--dbc-at-accent-1) 0%, var(--dbc-at-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Compensation italique : marge à droite pour ne pas coller au caractère suivant */
    margin-right: 0.02em;
    will-change: transform, opacity;
}

.dbc-at--split-3d.is-animating .dbc-at__accent .dbc-at-char {
    animation: dbcAtSplit3D 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dbcAtSplit3D {
    0%   { transform: rotateX(-90deg) translateZ(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: rotateX(0deg) translateZ(0); opacity: 1; }
}

/* ==========================================================
 * EFFET 2 — LIQUID FILL
 * ========================================================== */

.dbc-at--liquid-fill .dbc-at__accent {
    -webkit-text-fill-color: initial;
    background: none;
    color: rgba(244, 152, 38, 0.18);
    position: relative;
    overflow: hidden;
    padding-right: 0.15em;
    padding-left: 0.05em;
}

.dbc-at--liquid-fill .dbc-at__accent::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--dbc-at-accent-angle), var(--dbc-at-accent-1) 0%, var(--dbc-at-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1);
    font-style: inherit;
    font-weight: inherit;
}

.dbc-at--liquid-fill.is-animating .dbc-at__accent::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.dbc-at--liquid-fill .dbc-at__accent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10%;
    height: 110%;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(244, 152, 38, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(226, 83, 18, 0.3) 0%, transparent 50%);
    transform: translateY(100%);
    transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: -1;
    border-radius: 50% 50% 0 0 / 30px 30px 0 0;
}

.dbc-at--liquid-fill.is-animating .dbc-at__accent::after {
    transform: translateY(0);
}

/* ==========================================================
 * EFFET 3 — SCRAMBLED DECODE
 * ========================================================== */

.dbc-at--scrambled-decode .dbc-at__accent {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    letter-spacing: 0.02em;
    position: relative;
}

.dbc-at--scrambled-decode .dbc-at__accent::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--dbc-at-accent-1);
    animation: dbcAtBlink 0.9s steps(2) infinite;
}

@keyframes dbcAtBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.dbc-at--scrambled-decode.is-done .dbc-at__accent::after { display: none; }

/* ==========================================================
 * EFFET 4 — X-RAY REVEAL
 * ========================================================== */

.dbc-at--x-ray-reveal .dbc-at__accent {
    position: relative;
    color: rgba(13, 72, 153, 0.15);
    -webkit-text-fill-color: rgba(13, 72, 153, 0.15);
    background: none;
    overflow: hidden;
    padding-right: 0.15em;
    padding-left: 0.05em;
}

.dbc-at--x-ray-reveal .dbc-at__accent::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--dbc-at-accent-angle), var(--dbc-at-accent-1) 0%, var(--dbc-at-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1);
    font-style: inherit;
    font-weight: inherit;
}

.dbc-at--x-ray-reveal.is-animating .dbc-at__accent::before {
    clip-path: inset(0 0 0 0);
}

.dbc-at--x-ray-reveal .dbc-at__accent::after {
    content: '';
    position: absolute;
    top: -10%;
    bottom: -10%;
    width: 30px;
    left: -30px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(244, 152, 38, 0) 20%,
        rgba(244, 152, 38, 0.9) 50%,
        rgba(244, 152, 38, 0) 80%,
        transparent 100%
    );
    filter: blur(8px);
    opacity: 0;
    pointer-events: none;
}

.dbc-at--x-ray-reveal.is-animating .dbc-at__accent::after {
    animation: dbcAtXrayBeam 1.2s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes dbcAtXrayBeam {
    0%   { left: -30px; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

.dbc-at--x-ray-reveal[data-loop="1"].is-animating .dbc-at__accent::after {
    animation: dbcAtXrayBeam 3s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

/* ==========================================================
 * EFFET 5 — MAGNETIC WORDS
 * ========================================================== */

.dbc-at--magnetic-words .dbc-at__accent {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    cursor: default;
}

.dbc-at--magnetic-words .dbc-at__accent .dbc-at-char {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    background: linear-gradient(var(--dbc-at-accent-angle), var(--dbc-at-accent-1) 0%, var(--dbc-at-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dbc-at--magnetic-words .dbc-at__accent::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at var(--dbc-at-mx, 50%) var(--dbc-at-my, 50%),
        rgba(244, 152, 38, 0.15) 0%,
        transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: 50%;
}

.dbc-at--magnetic-words .dbc-at__accent:hover::before { opacity: 1; }

/* ============ RESPONSIVE ============ */
/* Tablette */
@media (max-width: 1024px) {
    .dbc-at__title { font-size: clamp(34px, 6vw, 48px) !important; gap: 0.24em !important; }
}

/* Mobile */
@media (max-width: 768px) {
    .dbc-at__title { font-size: clamp(28px, 8vw, 40px) !important; gap: 0.2em !important; }
    .dbc-at__subtitle { font-size: 15px !important; }
    .dbc-at__eyebrow { font-size: 11px !important; gap: 10px; }
}

/* Petit mobile */
@media (max-width: 480px) {
    .dbc-at__title { font-size: clamp(24px, 8.5vw, 32px) !important; letter-spacing: -0.5px !important; }
    .dbc-at__subtitle { font-size: 14px !important; }
    .dbc-at__eyebrow { font-size: 10.5px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dbc-at *, .dbc-at *::before, .dbc-at *::after {
        animation: none !important;
        transition: none !important;
    }
    .dbc-at--liquid-fill .dbc-at__accent::before,
    .dbc-at--x-ray-reveal .dbc-at__accent::before {
        clip-path: inset(0) !important;
    }
}