/* ═══════════════════════════════════════════════════════════════
   PB Page Banner — styles front-end
   Sobre, institutionnel, Swiss-style. Animations au chargement.
═══════════════════════════════════════════════════════════════ */

/* ── Variables par défaut ──────────────────────────────────── */
.pb-page-banner {
    --pb-dur:       700ms;
    --pb-ease:      cubic-bezier(0.22, 1, 0.36, 1);
    --pb-line-w:    40px;
    --pb-line-h:    3px;
    --pb-gap:       20px;

    position: relative;
    display:  flex;
    align-items: flex-end;
    width: 100%;
    overflow: hidden;
}

/* ── Fond (calque séparé pour indépendance du transform) ──── */
.pb-banner__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* ── Conteneur inner ──────────────────────────────────────── */
.pb-banner__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 48px 40px;
}

/* ── Alignement ──────────────────────────────────────────── */
.pb-banner--center .pb-banner__inner {
    align-items: center;
    text-align: center;
}
.pb-banner--center .pb-banner__line {
    margin-left: auto;
    margin-right: auto;
}

/* ── Fil d'ariane ─────────────────────────────────────────── */
.pb-banner__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    line-height: 1;
}

.pb-banner__bc-item {
    color: rgba(255,255,255,0.50);
    text-decoration: none;
    transition: color 0.2s;
}
.pb-banner__bc-item:hover { color: rgba(255,255,255,0.9); }
.pb-banner__bc-item--current { color: #fff; }

.pb-banner__bc-sep {
    color: rgba(255,255,255,0.30);
    font-size: 10px;
}

/* ── Wrapper texte (reçoit --pb-dur) ─────────────────────── */
.pb-banner__text-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--pb-gap);
}

/* ── Ligne accent ─────────────────────────────────────────── */
.pb-banner__line {
    display: block;
    width: var(--pb-line-w);
    height: var(--pb-line-h);
    background-color: #c8102e;
    flex-shrink: 0;
}

/* ── Titre ────────────────────────────────────────────────── */
.pb-banner__title {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(28px, 5vw, 46px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.5px;
    max-width: 780px;
}

/* ── Sous-titre ───────────────────────────────────────────── */
.pb-banner__subtitle {
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,0.70);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0.15px;
    max-width: 640px;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS — état initial (avant reveal)
═══════════════════════════════════════════════════════════════ */

/* ── CLIP : révélation par masque vertical ──────────────── */
.pb-banner--anim-clip .pb-banner__line,
.pb-banner--anim-clip .pb-banner__title,
.pb-banner--anim-clip .pb-banner__subtitle,
.pb-banner--anim-clip .pb-banner__breadcrumb {
    clip-path: inset(0 0 100% 0);
    will-change: clip-path;
}

/* ── SLIDE : glissement depuis le bas ────────────────────── */
.pb-banner--anim-slide .pb-banner__line,
.pb-banner--anim-slide .pb-banner__title,
.pb-banner--anim-slide .pb-banner__subtitle,
.pb-banner--anim-slide .pb-banner__breadcrumb {
    opacity: 0;
    transform: translateY(28px);
    will-change: opacity, transform;
}

/* ── FADE : fondu simple ─────────────────────────────────── */
.pb-banner--anim-fade .pb-banner__line,
.pb-banner--anim-fade .pb-banner__title,
.pb-banner--anim-fade .pb-banner__subtitle,
.pb-banner--anim-fade .pb-banner__breadcrumb {
    opacity: 0;
    will-change: opacity;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS — état final (classe .pb-banner--revealed)
   Décalages cascadés pour chaque élément
═══════════════════════════════════════════════════════════════ */

/* CLIP revealed */
.pb-banner--anim-clip.pb-banner--revealed .pb-banner__breadcrumb {
    clip-path: inset(0 0 0% 0);
    transition: clip-path var(--pb-dur) var(--pb-ease);
    transition-delay: 0ms;
}
.pb-banner--anim-clip.pb-banner--revealed .pb-banner__line {
    clip-path: inset(0 100% 0 0);  /* ligne se dessine de gauche à droite */
    transition: clip-path calc(var(--pb-dur) * 0.7) var(--pb-ease);
    transition-delay: calc(var(--pb-dur) * 0.15);
}
.pb-banner--anim-clip.pb-banner--revealed .pb-banner__title {
    clip-path: inset(0 0 0% 0);
    transition: clip-path var(--pb-dur) var(--pb-ease);
    transition-delay: calc(var(--pb-dur) * 0.25);
}
.pb-banner--anim-clip.pb-banner--revealed .pb-banner__subtitle {
    clip-path: inset(0 0 0% 0);
    transition: clip-path var(--pb-dur) var(--pb-ease);
    transition-delay: calc(var(--pb-dur) * 0.42);
}

/* SLIDE revealed */
.pb-banner--anim-slide.pb-banner--revealed .pb-banner__breadcrumb {
    opacity: 1; transform: translateY(0);
    transition: opacity var(--pb-dur) var(--pb-ease), transform var(--pb-dur) var(--pb-ease);
    transition-delay: 0ms;
}
.pb-banner--anim-slide.pb-banner--revealed .pb-banner__line {
    opacity: 1; transform: translateY(0);
    transition: opacity calc(var(--pb-dur) * 0.8) var(--pb-ease), transform calc(var(--pb-dur) * 0.8) var(--pb-ease);
    transition-delay: calc(var(--pb-dur) * 0.12);
}
.pb-banner--anim-slide.pb-banner--revealed .pb-banner__title {
    opacity: 1; transform: translateY(0);
    transition: opacity var(--pb-dur) var(--pb-ease), transform var(--pb-dur) var(--pb-ease);
    transition-delay: calc(var(--pb-dur) * 0.22);
}
.pb-banner--anim-slide.pb-banner--revealed .pb-banner__subtitle {
    opacity: 1; transform: translateY(0);
    transition: opacity var(--pb-dur) var(--pb-ease), transform var(--pb-dur) var(--pb-ease);
    transition-delay: calc(var(--pb-dur) * 0.38);
}

/* FADE revealed */
.pb-banner--anim-fade.pb-banner--revealed .pb-banner__breadcrumb {
    opacity: 1;
    transition: opacity var(--pb-dur) ease;
    transition-delay: 0ms;
}
.pb-banner--anim-fade.pb-banner--revealed .pb-banner__line {
    opacity: 1;
    transition: opacity var(--pb-dur) ease;
    transition-delay: calc(var(--pb-dur) * 0.15);
}
.pb-banner--anim-fade.pb-banner--revealed .pb-banner__title {
    opacity: 1;
    transition: opacity var(--pb-dur) ease;
    transition-delay: calc(var(--pb-dur) * 0.28);
}
.pb-banner--anim-fade.pb-banner--revealed .pb-banner__subtitle {
    opacity: 1;
    transition: opacity var(--pb-dur) ease;
    transition-delay: calc(var(--pb-dur) * 0.45);
}

/* ── Pas d'animation ─────────────────────────────────────── */
.pb-banner--anim-none .pb-banner__line,
.pb-banner--anim-none .pb-banner__title,
.pb-banner--anim-none .pb-banner__subtitle,
.pb-banner--anim-none .pb-banner__breadcrumb {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
}

/* ── Respect reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pb-banner__line,
    .pb-banner__title,
    .pb-banner__subtitle,
    .pb-banner__breadcrumb {
        transition: none !important;
        animation: none !important;
        clip-path: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .pb-banner__inner { padding: 40px 32px; }
}

@media (max-width: 768px) {
    .pb-banner__inner  { padding: 36px 24px; gap: 10px; }
    .pb-banner__title  { font-size: clamp(24px, 6vw, 34px); }
    .pb-banner--center .pb-banner__breadcrumb { justify-content: center; }
}

@media (max-width: 480px) {
    .pb-banner__inner  { padding: 28px 20px; }
    .pb-banner__subtitle { font-size: 14px; }
}