.homepage {
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: darkgray;
    background-image: url('/media/homepage2.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.statement-div {
    position: fixed;
    bottom: 10vh;
    left: 7vh;
    color: white;
}

 .slogan {
    font-family: var(--font-display);
    font-size: clamp(28px, 10vh, 70px); 
    width: 100%;
    font-weight: 200;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    letter-spacing: -0.06em;
    margin-bottom: 20px;
    margin-left: 10px;
}
.subtext {
    width: 52%;
    font-size: clamp(14px, 3vh, 18px);
    margin-left: 10px;
}
.home-user-icon{
    position: absolute;
    top: 0; left: 0px;
    width: 100%;
    display: flex;
    justify-content: space-between; /* logo à gauche, boutons à droite */
    align-items: center;
    padding: 20px 20px 20px 40px;
}
.home-user-icon .icon-wrapper-buttons {
    display: flex;
    gap: 40px;
}
.home-logo{
    width: 250px;
    height: auto;      
}
.home-a {
    text-decoration:none;
    font-size: 20px;
    font-family: var(--font-display);
    letter-spacing: 0.03em;
}
.home-login {
    color:white;
    border: 1px solid white;
    border-radius:var(--border-radius);
    padding: 5px 15px 5px 15px;
}

.home-login:hover, .home-login:visited {
    background-color: white;
    color: black;
    text-decoration:none;
}

.home-subscribe {
    color: black;
    background-color: white;
    border: 1px solid white;
    border-radius:var(--border-radius);
    padding: 5px 15px 5px 15px;
    margin-right: 20px;
}
.home-subscribe:hover{
    background-color: var(--bs-primary-500);
    border: 1px solid var(--bs-primary-500);
    color: white;
}

.image-row {
    display: flex;           /* aligne les images horizontalement */
    justify-content: flex-start; /* centre les images dans la div */
    gap: 20px;               /* espace entre les images */
    align-items: center; 
    width: max-content;
    padding:10px;
    background-color: white;
    border-radius: 45px;
    margin-bottom: 20px;
}

.row-img {
    width: auto;   /* largeur fixe pour chaque image */
    height: 75px;   
}
.row-img.orange{
    height: 60px;
}





/* ============================================================
 * GRILLE DES SERVICES
 * 3 cartes responsive (auto-fit : 1 → 2 → 3 colonnes selon la
 * largeur disponible, jamais plus de 3).
 * ============================================================ */
.home-services {
    max-width: 1200px;
    padding:100px 50px;
}

.home-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-left:20px;
}

/* Carte individuelle */
.home-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    min-height: 240px;
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease;
}
.home-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0px 0 30px;
}

.home-section-title-text {
    font-size: var(--small);
    font-weight: 600;
    color: var(--dark-gray);
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-section-title-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--light-gray), transparent);
}

/* Barre de couleur (accent service) en haut de la carte.
 * Au repos elle est rétractée à 15%, au hover elle s'étend à 100%. */
.home-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent, var(--gray));
    transform: scaleX(0.15);
    transform-origin: left;
    transition: transform 0.35s ease;
}

/* Halo diffus derrière la carte, révélé au hover */
.home-service-card::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -40%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--card-accent, var(--tvconnect-blue)), transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

/* États hover */
.home-service-card:hover {
    /* transform: translateY(-4px); */
    box-shadow: 0 20px 40px rgba(9, 100, 147, 0.08);
}

.home-service-card:hover::before {
    transform: scaleX(1);
}

.home-service-card:hover::after {
    opacity: 0.12;
}

/* Variable CSS par couleur de service */
.home-service-card--purple   { --card-accent: var(--bs-primary-500);   }
.home-service-card--pink { --card-accent: var(--bs-primary-200); }
.home-service-card--yellow   { --card-accent: var(--increment-yellow);   }
.home-service-card--gray   { --card-accent: var(--gray);   }
/* .home-service-card.is-inactive { --card-accent: var(--light-gray); } */

/* En-tête de carte : icône + badge de statut */
.home-service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-service-card-icon {
    font-size: 36px;
    color: var(--card-accent, var(--tvconnect-blue));
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 8px;
    border: 1px solid var(--very-light-gray);
}

.home-service-card-status {
    font-size: var(--very-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--green);
    padding: 4px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: rgba(69, 160, 73, 0.08);
}

/* Corps de la carte */
.home-service-card-body {
    margin: 10px 0;
}

.home-service-card-title {
    font-size: var(--large);
    font-weight: 500;
    color: var(--very-dark-gray);
    margin: 0 0 8px;
}

.home-service-card-description {
    font-size: var(--small);
    color: var(--dark-gray);
    line-height: 1.5;
    margin: 0;
}

.card-cta-row {
    display: flex;
    justify-content: center;
    padding:20px 0;
}

/* CTA (call-to-action) en bas de carte */
.home-service-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--medium);
    font-weight: 600;
    /* background-color: var(--card-accent, var(--tvconnect-blue)); */
    background-color: white;
    border: 2.5px solid var(--card-accent);
    transition: gap 0.25s ease;
    border-radius: 35px;
    color: var(--card-accent);
    /* color: white; */
    padding: 15px 20px;
    /* margin-right: 5px;
    margin-bottom: 5px; */
}

.home-service-card-cta .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.home-service-card:hover .home-service-card-cta {
    background-color: var(--card-accent, var(--tvconnect-blue));
    /* background-color: white; */
    /* color: var(--card-accent); */
    color: white;
}

/* .home-service-card:hover .home-service-card-cta {
    gap: 10px;
} */

/* .home-service-card:hover .home-service-card-cta .material-symbols-outlined {
    transform: translateX(3px);
} */

/* -----------------------------------------------------------
 * Carte inactive (service non activé pour l'utilisateur)
 *
 * Règles produit :
 *   - Pas de liseré coloré : on remplace l'accent par un gris
 *     neutre, que la carte soit au repos ou survolée.
 *   - Seul le CTA du bas est cliquable et réagit au hover ; le
 *     reste de la carte est "inerte". On utilise `pointer-events`
 *     plutôt que de dupliquer le markup, ce qui évite de
 *     restructurer la boucle PHP dans index.php.
 * ----------------------------------------------------------- */
.campaigns-list-title.home{
    font-size: var(--main-title-size);
}

.tv-reach-extend-gradient {
    background: linear-gradient(90deg, var(--bs-primary-300), var(--bs-primary-100));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ============================================================
 * SECTION "COMMENT ÇA MARCHE ?"
 * Frise de 4 étapes reliées par un connecteur, avec repli en
 * grille 2 puis 1 colonne sur petits écrans.
 * ============================================================ */
.home-how {
    max-width: 1200px;
    padding: 20px 50px 80px;
}

.home-how-heading {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--dark-gray);
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    max-width: 720px;
}

.home-how-subheading {
    font-size: var(--medium);
    color: var(--dark-gray);
    line-height: 1.6;
    max-width: 680px;
    margin: 0 0 50px;
}

.home-how-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.home-how-step {
    position: relative;
    text-align: center;
    padding-top: 32px;
}

.home-how-step-number {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bs-primary-400), var(--bs-primary-200));
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    border-radius: 50%;
}

.home-how-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 52px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    background: linear-gradient(to right, var(--bs-primary-200), var(--light-gray));
}

.home-how-step-icon {
    display: block;
    font-size: 28px;
    color: var(--bs-primary-400);
    margin-bottom: 10px;
}

.home-how-step-title {
    font-size: var(--large);
    font-weight: 600;
    color: var(--very-dark-gray);
    margin: 0 0 8px;
}

.home-how-step-description {
    font-size: var(--small);
    color: var(--dark-gray);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
 * SECTION "QUI SOMMES-NOUS ?"
 * Deux colonnes : discours institutionnel + carte des logos
 * partenaires (régies ADMTV + Retency).
 * ============================================================ */
.home-about {
    max-width: 1200px;
    padding: 20px 50px 100px;
}

.home-about-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 60px;
}

.home-about-content {
    flex: 1 1 480px;
}

.home-about-heading {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--very-dark-gray);
    letter-spacing: -0.01em;
    margin: 0 0 20px;
}

.home-about-text {
    font-size: var(--medium);
    color: var(--dark-gray);
    line-height: 1.7;
    margin: 0 0 16px;
}

.home-about-text strong {
    color: var(--very-dark-gray);
}

.home-about-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: var(--medium);
    font-weight: 600;
    color: var(--bs-primary-400);
    text-decoration: none;
}

.home-about-link .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.home-about-link:hover {
    color: var(--bs-primary-500);
}

.home-about-link:hover .material-symbols-outlined {
    transform: translateX(3px);
}

.home-about-logos {
    flex: 1 1 360px;
    display: flex;
    justify-content: center;
}

/* Graphe "satellite" : logo ADMTV au centre, régies membres en
 * orbite autour, reliées par des rayons. Les 5 badges régies sont
 * des libellés texte en attendant les logos réels (TF1 Pub, M6
 * Unlimited, Canal+ Brand Solutions, France.tv Publicité, RMC BFM
 * Ads). */
.home-about-orbit {
    position: relative;
    width: 340px;
    height: 340px;
    margin: 10px auto;
}

.home-about-orbit-spoke {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 125px;
    height: 2px;
    background: linear-gradient(to right, var(--bs-primary-200), var(--light-gray));
    transform-origin: 0 50%;
    z-index: 0;
}

.home-about-orbit-spoke--1 { transform: rotate(-90deg); }
.home-about-orbit-spoke--2 { transform: rotate(-18deg); }
.home-about-orbit-spoke--3 { transform: rotate(54deg); }
.home-about-orbit-spoke--4 { transform: rotate(126deg); }
.home-about-orbit-spoke--5 { transform: rotate(198deg); }

.home-about-orbit-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(71, 25, 196, 0.15);
    padding: 11px;
    z-index: 2;
}

.home-about-orbit-hub-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home-about-orbit-item {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 112px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    padding: 4px 10px;
    z-index: 2;
}

.home-about-orbit-item span {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--bs-primary-400);
}

.home-about-orbit-item--1 { left: 170px; top: 45px; }
.home-about-orbit-item--2 { left: 289px; top: 131px; }
.home-about-orbit-item--3 { left: 244px; top: 271px; }
.home-about-orbit-item--4 { left: 97px;  top: 271px; }
.home-about-orbit-item--5 { left: 51px;  top: 131px; }

@media (max-width: 900px) {
    .home-how-steps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }

    .home-how-step:not(:last-child)::after {
        display: none;
    }

    .home-about-row {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .home-how-steps {
        grid-template-columns: 1fr;
    }
}

 .home-service-card.not-available,
.home-service-card.is-inactive {
    opacity: 0.85;
    /* Le <a> dans son ensemble n'intercepte plus la souris ; seul
       le CTA (ré-activé plus bas) reste cliquable / hoverable. */
    pointer-events: none;
}

/* Liseré supérieur gris au lieu de l'accent coloré. */
.home-service-card.not-available::before,
.home-service-card.is-inactive::before {
    background: var(--light-gray-indication);
}

.home-service-card.not-available .home-service-card-status,
.home-service-card.is-inactive .home-service-card-status {
    color: var(--gray);
    background: var(--very-light-gray);
}

.home-service-card.not-available .home-service-card-icon,
.home-service-card.is-inactive .home-service-card-icon {
    color: var(--gray);
}

/* ============================================================
 * HERO — page d'accueil publique (visiteurs non connectés)
 * Aplats de couleur ADMTV/plateforme (violet de la headbar +
 * accent jaune), continuité avec le dégradé de .navbar, logos
 * ADMTV / régies / opérateurs, léger mouvement en fond.
 * ============================================================ */
/* login.css met le body en flex centré (pensé pour le petit
 * formulaire de connexion) : ça empêche la hero pleine largeur de
 * s'étirer et laisse apparaître le fond blanc du body derrière. On
 * neutralise ça uniquement quand la hero est présente. */
body:has(.tvr-hero) {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

.tvr-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    background: var(--bs-primary-500);
}

.tvr-hero-band {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: radial-gradient(circle 140vmin at 100% 100%,
        var(--bs-primary-100) 0% 20%,
        var(--bs-primary-200) 20% 40%,
        var(--bs-primary-300) 40% 60%,
        var(--bs-primary-400) 60% 80%,
        var(--bs-primary-500) 80% 100%
    );
}

.tvr-hero-blob {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.tvr-hero-blob--a {
    top: -12%;
    right: -6%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, var(--bs-primary-200) 0%, transparent 70%);
    opacity: 0.5;
    animation: tvrFloatA 16s ease-in-out infinite;
}

.tvr-hero-blob--b {
    bottom: -14%;
    left: -8%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, var(--increment-yellow) 0%, transparent 70%);
    opacity: 0.16;
    animation: tvrFloatB 20s ease-in-out infinite;
}

@keyframes tvrFloatA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-18px, 22px) scale(1.06); }
}

@keyframes tvrFloatB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -16px) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .tvr-hero-blob {
        animation: none;
    }
}

/* Variante login / inscription : même fond (bande + halos), sans le
 * contenu marketing (accroche / sous-titre / logos partenaires) —
 * juste le logo en haut et l'encart centré par-dessus. */
.tvr-hero--panel {
    display: flex;
    flex-direction: column;
}

.tvr-hero-panel-wrap {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    padding-top: 8vh;
}

.tvr-hero-panel-wrap .login-container,
.tvr-hero-panel-wrap .subscribe-container {
    /* login.css met "margin: auto" (+ margin-top fixe) sur ces cartes :
     * en flex, l'auto-margin du bas absorbe tout l'espace libre et les
     * pousse en haut au lieu de les centrer. On repart d'un margin net. */
    margin: 0 auto;
}

/* Reach TV Extend login logo is 100px tall (index.php) vs 90px on the main
 * site -- keep the subscribe logo in step with the login page per context. */
.tvr-hero-panel-wrap .register-logo img {
    height: 100px;
}

.tvr-hero-panel-wrap .login_button,
.tvr-hero-panel-wrap .register_button {
    background-color: var(--bs-primary-500);
}

.tvr-hero-panel-wrap .login_button:hover,
.tvr-hero-panel-wrap .register_button:hover {
    background-color: var(--bs-primary-400);
}

.tvr-hero-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 28px 48px;
}

.tvr-hero-logo {
    height: 70px;
    width: auto;
}

.tvr-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tvr-btn {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 999px;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.tvr-btn--ghost {
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.tvr-btn--ghost:hover {
    background: var(--white);
    color: var(--bs-primary-500);
}

.tvr-btn--solid {
    color: var(--very-dark-gray);
    background: var(--increment-yellow);
    border: 1px solid var(--increment-yellow);
}

.tvr-btn--solid:hover {
    background: var(--increment-light-yellow);
    border-color: var(--increment-light-yellow);
}

.tvr-hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: 60px 48px 40px;
}

.tvr-hero-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
}

.tvr-hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 5vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0 0 20px;
}

.tvr-hero-title-accent {
    color: var(--increment-yellow);
}

.tvr-hero-subtitle {
    font-family: var(--font-family);
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    max-width: 560px;
    margin: 0;
}

.tvr-hero-trust {
    position: relative;
    z-index: 2;
    padding: 44px 48px 64px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.tvr-trust-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tvr-trust-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
}

.tvr-trust-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.tvr-trust-admtv {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.tvr-trust-admtv img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tvr-trust-badge {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 8px 16px;
}

.tvr-trust-operator {
    background: var(--white);
    border-radius: 12px;
    padding: 8px 18px;
    height: 44px;
    display: flex;
    align-items: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.tvr-trust-operator img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

@media (max-width: 600px) {
    .tvr-hero-topbar {
        padding: 20px 20px;
    }

    .tvr-hero-content {
        padding: 40px 20px 24px;
    }

    .tvr-hero-trust {
        padding: 32px 20px 48px;
    }

    .tvr-trust-items {
        gap: 10px;
    }
}

.home-service-card.is-inactive .home-service-card-cta {
    /* color: var(--gray); */
    /* Ré-autorise la souris sur la zone du CTA uniquement. */
    pointer-events: auto;
    cursor: pointer;
}

.home-service-card.not-available .home-service-card-cta {
    color: var(--gray);
    border-color:var(--gray);
}


/* Hover sur le CTA : on colore et on décale la flèche, sans
   toucher au reste de la carte. */
/* .home-service-card.is-inactive .home-service-card-cta:hover {
    color: var(--tvconnect-blue);
    gap: 10px;
} */

.home-service-card.is-inactive .home-service-card-cta:hover .material-symbols-outlined {
    transform: translateX(3px);
}

/* Important : même si `pointer-events` est désactivé sur la carte,
   le `:hover` du CTA remonte jusqu'au parent `<a>`. On neutralise
   donc explicitement les effets de hover de la carte (translateY,
   ombre, expansion du liseré, halo) pour que SEUL le CTA bouge. */
.home-service-card.is-inactive:hover {
    transform: none;
    box-shadow: none;
}

.home-service-card.is-inactive:hover::before {
    transform: scaleX(0.15);
}

.home-service-card.is-inactive:hover::after {
    opacity: 0;
}