/**
 * Styles — Module DIVI Hero Repère v1.2
 * @author  abalone Studio — https://abalone.studio
 *
 * v1.2 : retours client
 *  - padding-top réduit (espace au-dessus du titre)
 *  - citation statique dorée (remplace le ticker animé)
 *  - hover conservé MAIS tooltip sans scroll (auto-sizing)
 *  - proportions colonnes et min-height inchangées (v1.0 OK)
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500&display=swap');

/* ─── Variables par défaut ───────────────────────────────── */
.repere-hero-module {
    --rp-primary : #1f839b;
    --rp-accent  : #e8b119;
    --rp-dark    : #0f2b34;
    --rp-mid     : #2a5a6b;
    --rp-white   : #ffffff;
}

/* ─── Structure globale du Hero ──────────────────────────── */
.repere-hero-module {
    display              : grid;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows   : 1fr;
    align-items          : stretch;
    /* Nav fixe DIVI = 105px → la section occupe exactement le reste de l'écran */
    height               : calc(100vh - 105px);
    min-height           : calc(100vh - 105px);
    background           : linear-gradient(135deg, var(--rp-dark) 0%, var(--rp-mid) 60%, #1a6b80 100%);
    position             : relative;
    overflow             : hidden;
    padding              : 0;
    gap                  : 0;
    margin-top    : 0 !important;
    margin-bottom : 0 !important;
}

/* Motif de fond */
.repere-hero-module::before {
    content       : '';
    position      : absolute;
    inset         : 0;
    background    : url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index       : 0;
}

/* ─── Colonne gauche ─────────────────────────────────────── */
.repere-hero-module .rp-hero-content {
    position       : relative;
    z-index        : 1;
    /* CORRECTIF : 5rem au lieu de 9rem — dégager la nav fixe ~70px */
    padding        : 5rem 4rem 5rem 4rem;
    display        : flex;
    flex-direction : column;
    justify-content: center;
}

/* Surtitre */
.repere-hero-module .rp-hero-line-name {
    font-family    : 'DM Sans', sans-serif;
    font-size      : 0.75rem;
    font-weight    : 500;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : var(--rp-accent);
    margin-bottom  : 1rem;
    display        : flex;
    align-items    : center;
    gap            : 0.75rem;
}

.repere-hero-module .rp-hero-line-name::before {
    content    : '';
    display    : block;
    width      : 2rem;
    height     : 2px;
    background : var(--rp-accent);
    flex-shrink: 0;
}

/* Titre H1 */
.repere-hero-module .rp-hero-title {
    font-family  : 'Playfair Display', serif;
    font-size    : clamp(2.8rem, 5vw, 4.5rem);
    font-weight  : 700;
    color        : var(--rp-white);
    line-height  : 1.1;
    margin-bottom: 2rem;
    margin-top   : 0;
}

.repere-hero-module .rp-hero-title em {
    color      : var(--rp-accent);
    font-style : normal;
}

/* Texte intro */
.repere-hero-module .rp-hero-intro {
    font-family: 'DM Sans', sans-serif;
    font-size  : 1.05rem;
    line-height: 1.75;
    color      : rgba(255, 255, 255, 0.78);
    max-width  : 520px;
    margin     : 0 0 1.75rem 0;
}

/* ─── Citation dorée statique (remplace le ticker) ───────── */
/*
 * Bloc texte court sur fond doré, intégré en conclusion de l'intro.
 * Pas de cadre séparé, pas de défilement — texte statique éditable dans DIVI.
 */
.repere-hero-module .rp-hero-citation {
    display     : block;
    background  : none;
    color       : var(--rp-accent);
    font-family : 'Playfair Display', serif;
    font-size   : 1.5rem;
    font-weight : 700;
    font-style  : italic;
    line-height : 1.4;
    max-width   : 520px;
}

/* ─── Colonne droite — carte partenaire ──────────────────── */
.repere-hero-module .rp-partner-card {
    position       : relative;
    display        : flex;
    flex-direction : column;
    align-items    : stretch;
    /* La colonne prend exactement la hauteur de la grille */
    overflow       : hidden;
    z-index        : 1;
}

.repere-hero-module .rp-partner-photo-wrap {
    position   : relative;
    cursor     : pointer;
    /* Prend tout l'espace disponible dans la colonne */
    flex       : 1;
    overflow   : hidden;
    isolation  : isolate;
    /* min-height 0 pour ne pas déborder */
    min-height : 0;
}

.repere-hero-module .rp-partner-avatar {
    position : absolute;
    inset    : 0;
    overflow : hidden;
}

.repere-hero-module .rp-partner-avatar img {
    width          : 100%;
    height         : 100%;
    object-fit     : cover;
    /* Image ancrée en bas — les pieds/bas du sujet toujours visibles */
    object-position: center bottom;
    display        : block;
    transition     : transform 0.5s ease;
}

.repere-hero-module .rp-partner-photo-wrap:hover .rp-partner-avatar img {
    transform: scale(1.03);
}

/* Gradient bas — couvre le bas de la photo pour lisibilité du texte */
.repere-hero-module .rp-partner-photo-wrap::after {
    content        : '';
    position       : absolute;
    bottom         : 0;
    left           : 0;
    right          : 0;
    height         : 40%;
    background     : linear-gradient(to top, rgba(10, 35, 44, 0.92) 0%, transparent 100%);
    pointer-events : none;
    z-index        : 1;
}

/* Infos visibles (nom + rôle + hint) — calées en bas, jamais coupées */
.repere-hero-module .rp-partner-info {
    position   : absolute;
    bottom     : 0;
    left       : 0;
    right      : 0;
    /* Padding bas suffisant pour rester dans la section */
    padding    : 1.5rem 2rem 1.5rem;
    z-index    : 5;
    transition : opacity 0.3s ease;
}

.repere-hero-module .rp-partner-photo-wrap:hover .rp-partner-info {
    opacity       : 0;
    pointer-events: none;
}

.repere-hero-module .rp-partner-name {
    font-family  : 'Playfair Display', serif;
    font-size    : 1.8rem;
    color        : var(--rp-white);
    font-weight  : 700;
    margin-bottom: 0.2rem;
}

.repere-hero-module .rp-partner-role {
    font-size      : 0.95rem;
    color          : var(--rp-accent);
    letter-spacing : 0.12em;
    text-transform : uppercase;
}

.repere-hero-module .rp-partner-hover-hint {
    font-size    : 0.72rem;
    color        : rgba(255, 255, 255, 0.38);
    margin-top   : 1.5rem;
    letter-spacing: 0.04em;
    display      : flex;
    align-items  : center;
    gap          : 0.4rem;
}

.repere-hero-module .rp-partner-hover-hint::before {
    content   : '';
    display   : block;
    width     : 14px;
    height    : 1px;
    background: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

/* ─── Tooltip hover ──────────────────────────────────────── */
/*
 * Stratégie : le tooltip est positionné en absolu dans photo-wrap
 * (qui a overflow:hidden). Il s'étire de bottom:0 jusqu'en haut
 * automatiquement via top:0 quand ouvert → jamais de scroll,
 * jamais de débordement hors section.
 */
.repere-hero-module .rp-partner-tooltip {
    position      : absolute;
    /* Caché en dessous */
    top           : 100%;
    left          : 0;
    right         : 0;
    bottom        : 0;
    background    : rgba(10, 30, 40, 0.97);
    border-top    : 2px solid rgba(232, 177, 25, 0.45);
    padding       : 1.5rem 2rem 1.75rem;
    z-index       : 10;
    transition    : top 0.4s ease, opacity 0.4s ease;
    opacity       : 0;
    pointer-events: none;
    /* Scroll interne uniquement si le texte est vraiment trop long */
    overflow-y    : auto;
}

.repere-hero-module .rp-partner-photo-wrap:hover .rp-partner-tooltip {
    top           : 50%;
    opacity       : 1;
    pointer-events: auto;
}

.repere-hero-module .rp-partner-tooltip h4 {
    font-family  : 'Playfair Display', serif;
    font-size    : 1.8rem;
    color        : var(--rp-accent);
    margin-bottom: 0.75rem;
    margin-top   : 0;
    font-weight  : 700;
}

.repere-hero-module .rp-partner-tooltip p {
    font-size  : 0.95rem;
    color      : rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    margin     : 0 0 0.5rem 0;
}

.repere-hero-module .rp-partner-tooltip p:last-child {
    margin-bottom: 0;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 980px) {
    .repere-hero-module {
        grid-template-columns: 1fr;
        height                : auto;
        min-height            : auto;
    }

    .repere-hero-module .rp-hero-content {
        padding   : 5rem 2rem 3rem 2rem;
    }

    /* Colonne droite : hauteur auto pour que l'image s'affiche en entier */
    .repere-hero-module .rp-partner-card {
        height    : auto;
    }

    .repere-hero-module .rp-partner-photo-wrap {
        height    : 50vh;
        max-height: none;
        min-height: 0;
        flex      : none;
    }

    .repere-hero-module .rp-partner-avatar img {
        object-position: center top;
    }
}

@media (max-width: 480px) {
    .repere-hero-module .rp-hero-content {
        padding: 5rem 1.5rem 2.5rem 1.5rem;
    }

    .repere-hero-module .rp-hero-intro {
        font-size: 0.95rem;
    }

    .repere-hero-module .rp-hero-citation {
        font-size: 0.9rem;
    }
}