/* ================================================
   Repeating Image Transition v4.3
   Auteur : Olivier Dhennin
   ================================================ */

/* ---- Loading ---- */
.rit-loading::before,
.rit-loading::after { content:''; position:fixed; z-index:100001; }
.rit-loading::before { top:0;left:0;width:100%;height:100%;background:var(--rit-bg,#fff); }
.rit-loading::after  {
    top:50%;left:50%;width:100px;height:1px;margin:0 0 0 -50px;
    background:var(--rit-text,#151515);
    animation:rit-loader 1.5s ease-in-out infinite alternate;
}
@keyframes rit-loader {
    0%    { transform:scaleX(0);   transform-origin:0% 50%; }
    50%   { transform:scaleX(1);   transform-origin:0% 50%; }
    50.1% { transform:scaleX(1);   transform-origin:100% 50%; }
    100%  { transform:scaleX(0);   transform-origin:100% 50%; }
}

/* ---- Section ---- */
.rit-s {
    position: relative;
    background: var(--rit-bg, #fff);
    color: var(--rit-text, #151515);
    /* overflow-x:clip (pas hidden) : empêche le débordement horizontal
       SANS créer de Block Formatting Context (BFC).
       overflow:hidden crée un BFC → espace parasite + footer qui remonte.
       overflow:clip = même effet visuel, zéro effet sur le layout. */
    overflow-x: clip;
}

/* ---- Heading ---- */
.rit-heading {
    display:flex; flex-wrap:wrap; align-items:flex-end;
    justify-content:space-between; gap:1rem;
    padding:4rem 1.5rem 2rem;
}
.rit-heading-title {
    font-family:var(--rit-ft,inherit); font-weight:700;
    font-size:var(--rit-xl,clamp(2rem,10vw,6rem));
    line-height:.9; text-transform:uppercase; letter-spacing:-.02em;
    color:var(--rit-text,#151515); margin:0;
}
.rit-heading-meta {
    font-family:var(--rit-fb,inherit); font-size:.9rem;
    color:var(--rit-text,#151515); opacity:.55; max-width:340px;
}
.rit-heading-meta::after {
    content:'\00B7'; font-family:serif; font-size:3rem;
    line-height:.2; vertical-align:middle; margin-left:.5rem;
}

/* ---- Grid ---- */
.rit-grid {
    padding: 0 1.5rem 3rem;
    display: grid;
    grid-template-columns: repeat(var(--rit-cols,4), 1fr);
    column-gap: var(--rit-gap, .5rem);
    row-gap: var(--rit-rowgap, 5rem);
    width: 100%;
}

/* ---- Item ---- */
.rit-item {
    margin:0; padding:0;
    display:flex; flex-direction:column; gap:.3rem;
    cursor:pointer;
    will-change:transform,clip-path;
    position:relative; overflow:hidden;
}

/* ---- Image principale ---- */
.rit-item-img {
    width:100%;
    aspect-ratio:var(--rit-aspect,4/5);
    background-size:cover;
    background-position:50% 50%;
    will-change:filter,opacity,transform;
    transition:
        filter    var(--rit-hdur,.45s) var(--rit-hease,ease),
        opacity   var(--rit-hdur,.45s) var(--rit-hease,ease),
        transform var(--rit-hdur,.45s) var(--rit-hease,ease);
    transform-origin:center;
    position:relative; z-index:1;
}

/* ---- Image hover (mode swap) ---- */
.rit-item-img-hover {
    position:absolute; top:0; left:0;
    width:100%;
    aspect-ratio:var(--rit-aspect,4/5);
    background-size:cover; background-position:50% 50%;
    opacity:0; z-index:2; pointer-events:none;
    transition:opacity var(--rit-hdur,.45s) var(--rit-hease,ease);
}

/* ==== HOVER MODES ==== */
.rit-s[data-hover-mode="bw_to_color"] .rit-item-img              { filter:grayscale(var(--rit-bw-amount,100%)); }
.rit-s[data-hover-mode="bw_to_color"] .rit-item:hover .rit-item-img { filter:grayscale(0%); }
.rit-s[data-hover-mode="color_to_bw"] .rit-item:hover .rit-item-img { filter:grayscale(var(--rit-bw-amount,100%)); }
.rit-s[data-hover-mode="opacity"]     .rit-item:hover .rit-item-img { opacity:var(--rit-hover-op,.7); }
.rit-s[data-hover-mode="scale"]       .rit-item:hover .rit-item-img { transform:scale(var(--rit-hover-sc,1.04)); }
.rit-s[data-hover-mode="swap"]        .rit-item:hover .rit-item-img-hover { opacity:1; }

/* ---- Curseur personnalisé ---- */
.rit-cur-dot {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%) scale(0);
    width:70px; height:70px; border-radius:50%;
    background:rgba(0,0,0,.82); color:#fff;
    font-family:var(--rit-fb,inherit);
    font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none; z-index:10;
    transition:transform .25s cubic-bezier(.19,1,.22,1), opacity .25s ease;
    opacity:0;
}
.rit-item:hover .rit-cur-dot { transform:translate(-50%,-50%) scale(1); opacity:1; }
.rit-s[data-cursor="1"] .rit-item { cursor:none; }

/* ---- Captions ---- */
.rit-cap { font-family:var(--rit-fb,inherit); color:var(--rit-caption,#151515); }
.rit-cap h3 { font-size:.85rem; font-weight:500; margin:0; letter-spacing:.01em; }
.rit-cap-tag  { display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; opacity:.55; margin-right:.5rem; }
.rit-cap-year { display:inline-block; font-size:.7rem; opacity:.4; }
.rit-cap-desc, .rit-cap-link { display:none; }
.rit-cap--below { padding-top:.35rem; display:flex; flex-direction:column; gap:.15rem; }
.rit-cap--overlay {
    position:absolute; bottom:0; left:0; right:0;
    padding:.6rem .75rem;
    background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 100%);
    color:#fff; opacity:0;
    transition:opacity var(--rit-hdur,.45s) var(--rit-hease,ease); z-index:3;
}
.rit-cap--overlay h3,
.rit-cap--overlay .rit-cap-tag,
.rit-cap--overlay .rit-cap-year { color:#fff; opacity:1; }
.rit-item:hover .rit-cap--overlay { opacity:1; }

/* ---- Movers (images fantômes GSAP) ---- */
/* Les movers ont un z-index > panel (100101+) → ils s'animent
   sur fond blanc (panel opaque), puis l'image panel se révèle
   par clip-path en dessous pendant que les movers sortent.     */
.rit-mover {
    position: fixed;
    background-size: cover;
    background-position: 50% 50%;
    will-change: transform, clip-path;
    pointer-events: none;
    /* z-index défini inline par GSAP : 100101, 100102, … */
}

/* =============================================================
   PANEL
   ─────────────────────────────────────────────────────────────
   z-index 100100 : passe au-dessus de Divi (~9999),
   de la barre admin WordPress (z-index 99999) et du footer.

   Le panel lui-même est TRANSPARENT : les movers (100000+)
   voyagent à travers la zone image avant que l'image finale
   se révèle par clip-path. C'est l'effet de la démo originale.

   Seule la zone texte (.rit-panel-content) a un fond blanc.
   ============================================================= */
.rit-panel {
    /* Positionnement — le panel est téléporté dans <body> par JS
       donc position:fixed est toujours relatif au viewport,
       indépendamment des transform/filter Divi sur les ancêtres */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* z-index : au-dessus de Divi (9999), barre admin WP (99999),
       logo watermark Divi (9999), et tout autre overlay */
    z-index: 100100;

    /* FOND OPAQUE : le panel doit cacher header/footer/toute la page.
       Sans background, ces éléments restent visibles à travers le panel
       malgré le z-index élevé. Les movers (100101+) s'animent au-dessus. */
    background: var(--rit-panel-bg, #fff);
    margin: 0; padding: 0;

    display: grid;
    gap: 0;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    overflow: hidden;

    /* ── MOBILE : image en haut (hauteur fixe), texte en bas ── */
    grid-template-columns: 100%;
    grid-template-rows: 45vh 1fr;
    grid-template-areas: 'pi' 'pc';
}

/* ── IMAGE dans le panel ── */
.rit-panel-img {
    grid-area: pi;
    /* Sur mobile : remplit exactement la cellule 45vh */
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* ── CONTENU TEXTE ──
   Le fond blanc est ICI uniquement — pas sur le panel entier.
   Ainsi les movers sont visibles dans la zone image transparente. */
.rit-panel-content {
    grid-area: pc;
    min-height: 0;       /* requis pour overflow dans une cellule grid */
    background: var(--rit-panel-bg, #fff);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    gap: .6rem;
    /* Padding safe-area pour iOS (barre de navigation) */
    padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    font-family: var(--rit-fb, inherit);
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.12) transparent;
}
.rit-panel-content::-webkit-scrollbar { width: 3px; }
.rit-panel-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 2px; }

/* =============================================================
   TABLETTE ≥ 640px
   Image à gauche (largeur auto déduite du ratio),
   texte à droite dans l'espace restant
   ============================================================= */
@media (min-width: 640px) {
    .rit-panel {
        padding: 1.5rem;
        gap: 1.5rem;
        grid-template-columns: auto 1fr;
        grid-template-rows: 100%;
        grid-template-areas: 'pi pc';
    }
    .rit-panel.rit-panel--right {
        grid-template-columns: 1fr auto;
        grid-template-areas: 'pc pi';
    }

    .rit-panel-img {
        /* Hauteur = hauteur du panel (100vh) moins le padding haut + bas */
        height: calc(100vh - 3rem);
        /* Largeur calculée automatiquement depuis le ratio */
        width: auto;
        aspect-ratio: var(--rit-aspect, 4/5);
        /* Sécurité : ne jamais dépasser la moitié de l'écran en largeur */
        max-width: 50vw;
        /* Ne jamais sortir de la hauteur viewport */
        max-height: calc(100vh - 3rem);
    }

    .rit-panel-content {
        background: transparent;
        padding: 1rem 0 .75rem;
        justify-content: flex-end;
        align-items: flex-end;
        text-align: right;
    }
}

/* =============================================================
   DESKTOP ≥ 1024px
   ============================================================= */
@media (min-width: 1024px) {
    .rit-panel {
        padding: 2rem;
        gap: 2rem;
    }

    .rit-panel-img {
        height: calc(100vh - 4rem);
        max-height: calc(100vh - 4rem);
        max-width: none;  /* lever la contrainte tablette */
    }

    /* Texte : marges intérieures avec clamp() pour tous les écrans */
    .rit-panel-content {
        padding: clamp(2rem, 5vh, 5rem) 0;
    }

    /* Image à droite → texte à gauche */
    .rit-panel--right .rit-panel-content {
        align-items: flex-start;
        text-align: left;
    }
    /* Image à gauche → texte à droite */
    .rit-panel:not(.rit-panel--right) .rit-panel-content {
        align-items: flex-end;
        text-align: right;
    }
}

/* ─── Très grands écrans ≥ 1600px ─── */
@media (min-width: 1600px) {
    .rit-panel { padding: 2.5rem; gap: 2.5rem; }
    .rit-panel-img {
        height: calc(100vh - 5rem);
        max-height: calc(100vh - 5rem);
    }
    .rit-panel-content { padding: clamp(2.5rem, 6vh, 6rem) 0; }
}

/* ── Éléments texte du panel ── */
.rit-panel-meta {
    display: flex; gap: .5rem; align-items: center;
    opacity: .4; font-size: .7rem;
    letter-spacing: .06em; text-transform: uppercase;
    flex-shrink: 0;
}
.rit-panel-title {
    font-family: var(--rit-ft, inherit); margin: 0;
    font-size: clamp(1rem, 2.5vw, 1.5rem); font-weight: 500;
    color: var(--rit-text, #151515); flex-shrink: 0; line-height: 1.2;
}
.rit-panel-desc {
    margin: 0; font-size: .85rem; opacity: .65;
    line-height: 1.65; max-width: 280px;
    color: var(--rit-text, #151515); flex-shrink: 0;
}
.rit-panel-link {
    display: inline-block; margin-top: .25rem;
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--rit-text, #151515); border-bottom: 1px solid currentColor;
    padding-bottom: 2px; text-decoration: none; transition: opacity .2s;
    flex-shrink: 0;
}
.rit-panel-link:hover { opacity: .5; }
.rit-panel-close {
    background: none; border: 0; padding: 0; margin-top: .5rem;
    font: inherit; cursor: pointer;
    color: var(--rit-close, #a22d1d);
    font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    transition: opacity .2s; flex-shrink: 0;
}
.rit-panel-close:hover { opacity: .6; }

/* ── Grille responsive ── */
@media (max-width: 768px) {
    .rit-grid { padding: 0 1rem 2rem; gap: var(--rit-gap, .5rem); row-gap: 2rem; }
    .rit-heading { padding: 2rem 1rem 1.5rem; }
}

/* ── Divers ── */
.rit-empty { padding: 2rem; color: #888; font-style: italic; }