/* ========================================
   HERO SECTION - D20 DICE
   ======================================== */

.hero-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f5 100%);
}

.hero-bg-pattern {
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(var(--primary-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(var(--secondary-rgb), 0.05) 0%, transparent 50%);
}

.hero-anim,
.hero-anim-btn {
    opacity: 0;
}

.hero-title {
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Dice Container */
.hero-dice-container {
    width: 200px;
    height: 200px;
}

.d20-canvas {
    width: 100% !important;
    height: 100% !important;
    cursor: pointer;
}

/* Dice Floating */
.hero-dice-floating {
    position: fixed;
    top: 100px;
    right: 30px;
    z-index: 100;
}

/* Dice Glow Effect */
.dice-glow {
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.3) 0%, rgba(var(--secondary-rgb), 0.1) 40%, transparent 70%);
    filter: blur(40px);
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}

/* Dice Result Display */
.dice-result-display {
    top: -10px;
    right: -10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(var(--primary-rgb), 0.2);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.dice-result-display.show {
    opacity: 1;
    transform: scale(1);
}

.dice-result-number {
    font-family: 'Marcellus', serif;
}

.dice-result-display.critical .dice-result-number {
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.dice-result-display.critical {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 255, 255, 0.95));
}

.dice-result-display.fumble .dice-result-number {
    color: var(--bs-danger);
}

.dice-result-display.fumble {
    border-color: var(--bs-danger);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(255, 255, 255, 0.95));
}

/* Dice Instructions */
.dice-instructions {
    backdrop-filter: blur(10px);
    margin-top: -15px;

}

/* Scroll Indicator */
.scroll-down-link {
    width: 50px;
    height: 50px;
    animation: bounceDown 2s ease-in-out infinite;
}

.scroll-down-link:hover {
    transform: translateY(-5px);
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

/* Responsive */
@media (max-width: 991.98px) {
    .dice-glow {
        width: 120px;
        height: 120px;
    }
}

/* ========================================
   AUTH PAGES (Login, Register, etc.)
   ======================================== */
.auth-bg-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(81deg, rgba(248, 247, 244, 1) 26% 11%, rgba(248, 247, 244, 0) 67%);
    z-index: 1;
}
.logo-bottom {
    transition: filter 0.5s ease;
}
.logo-bottom:hover {
    filter: drop-shadow(2px 5px 12px #00000063);
}

/* ========================================
   CAMPAIGN FORM 
   ======================================== */
.btn-check:checked + .btn-outline-tertiary {
    background-color: var(--bs-tertiary) !important;
    border-color: var(--bs-tertiary) !important;
    color: #fff !important;
}


/* Form switch styling */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Icon picker modal */
#iconPickerModal .icon-option:hover {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

#iconPickerModal .icon-option:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

/* preview card img  */
.campain-preview-form_card {
    transition: ease-in-out 0.5s;
}

.campain-preview-form_card:hover {
    filter: grayscale(1) !important;
}

.campain-preview-form_card:hover i {
    color: white !important;
}

/* ========================================
   X-CARD SHAPES
   ======================================== */
.shape-green {
    width: 16px;
    height: 16px;
    background-color: #28a745;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}
.shape-yellow {
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 16px solid #ffc107;
    display: inline-block;
    flex-shrink: 0;
}
.shape-red {
    width: 16px;
    height: 16px;
    background-color: #dc3545;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Étoiles cliquables des formulaires d'avis (campagnes, avis site, marketplace) */
.review-star {
    cursor: pointer;
}

/* Remplissage des étoiles au survol.
   Le kit Font Awesome est en mode webfont (kit.js → method: "css") : Solid et
   Regular partagent le même glyphe, seul le `font-weight` change (900 / 400).
   Survoler une étoile remplit donc toutes celles jusqu'à elle, sans JS :
     1. au survol du groupe, tout passe en plein ;
     2. les étoiles PLACÉES APRÈS celle survolée repassent en contour.
   Aucune règle hors survol : la note déjà choisie reste pilotée par les classes
   fa-solid / fa-regular posées en JS. */
#reviewStars:hover .review-star {
    font-weight: 900;
}

#reviewStars .review-star:hover ~ .review-star {
    font-weight: 400;
}

/* Masquage initial du profil avant l'animation GSAP d'intro
   (gated par .profile-anim, ajouté en JS → contenu visible si JS/GSAP absent) */
.profile-anim .js-profile-fade {
    opacity: 0;
}

/* Idem, générique pour les pages campagne (index & vue) */
.gsap-pending .gsap-fade {
    opacity: 0;
}

/* ========================================
   PLANNING DES SESSIONS
   Le style visuel (couleurs, bordures, fonds, flex, gaps, arrondis, sticky…)
   est porté par les classes utilitaires MDB / global.css dans le template et le JS.
   On ne garde ici que ce qui n'a AUCUN équivalent utilitaire :
   grille CSS 7 colonnes, tailles fixes en px et micro-tailles de police.
   ======================================== */
.planning-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
}
.planning-cell { min-height: 96px; }
.planning-cell--week { min-height: 220px; }
.planning-cell__num { width: 1.5rem; height: 1.5rem; font-size: 0.78rem; }

.planning-event {
    font-size: 0.74rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.planning-event:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
.planning-event__meta { font-size: 0.68rem; }

/* Décalage du panneau collant sous la navbar (à combiner avec .sticky-top) */
.planning-detail-card { top: calc(var(--nav-height) + 1rem); }

.planning-icon { width: 40px; height: 40px; }
.planning-campaign-filter { max-height: 40vh; }
.min-w-0 { min-width: 0; }

@media (max-width: 575.98px) {
    .planning-cell { min-height: 72px; }
    .planning-event__meta:not(:last-child) { display: none; }
}

/* ========================================
   NAVBAR - SOUS-MENU AU SURVOL
   Le dropdown utilise les classes MDB (dropdown / dropdown-menu / dropdown-item).
   MDB n'ouvre qu'au clic : on ajoute ici uniquement l'ouverture au survol sur
   desktop. Mobile (tap) et mise en page sont gérés par MDB / utilitaires.
   ======================================== */
.nav-dropdown-caret {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.nav-hover-dropdown:hover .nav-dropdown-caret,
.nav-hover-dropdown.show .nav-dropdown-caret {
    transform: rotate(180deg);
}

/* */
@media (min-width: 768px) {
    .navbar .nav-hover-dropdown > .dropdown-menu {
        position: fixed;
        top: calc(var(--nav-height) + var(--nav-offset, 0px) - 15px);
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0;
    }
}

/* Largeur mini d'une colonne pour éviter des liens trop comprimés (desktop) */
.nav-dropdown-col {
    min-width: 240px;
}

/* Mobile (burger) : le sous-menu se déplie en flux et pousse le contenu
   sous le lien cliqué (on annule le positionnement absolu/popper de MDB).
   Les colonnes sont empilées (flex-column via utilitaire) et pleine largeur. */
@media (max-width: 767.98px) {
    .navbar .nav-hover-dropdown .dropdown-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none;
    }
    .nav-dropdown-col {
        min-width: 0;
    }
}

.table-responsive { position: relative; }

/* Sondages — sélecteur de disponibilité.
   Le look (bordure, rounded, padding, couleurs) vient des utilitaires MDB sur le
   markup ; ici uniquement l'état coché, impossible en utilitaire sans classes .btn. */
.poll-choice { cursor: pointer; }
.poll-choice input:checked + span { color: #fff; font-weight: 600; }
.poll-choice--yes input:checked + span { background-color: var(--bs-success); border-color: var(--bs-success); }
.poll-choice--no input:checked + span { background-color: var(--bs-danger); border-color: var(--bs-danger); }
.poll-choice--maybe input:checked + span { background-color: var(--bs-warning); border-color: var(--bs-warning); color: #212529; }
.poll-choice input:focus-visible + span { outline: 2px solid rgba(var(--bs-primary-rgb), 0.5); outline-offset: 2px; }

/* Sondages — colonnes « tout le monde dispo » cliquables (création de session).
   Toute la cellule est cliquable via .poll-slot-link (lien en recouvrement). Au survol
   de l'en-tête, un popin .poll-slot-create__popin apparaît (purement visuel :
   pointer-events:none pour que le clic atteigne le lien). .table-responsive est en
   position:relative, donc ces éléments absolus sont clippés et ne débordent pas la page. */
.poll-slot-cell { cursor: pointer; }
.poll-slot-cell:hover { box-shadow: inset 0 0 0 2px var(--bs-success); }
.poll-slot-link { position: absolute; inset: 0; z-index: 1; }
.poll-slot-create__popin {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
    padding: .35rem .6rem;
    border-radius: .5rem;
    background-color: var(--bs-success);
    color: #fff;
    font-size: .8rem;
    line-height: 1.2;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}
.poll-slot-create:hover .poll-slot-create__popin,
.poll-slot-create:focus-within .poll-slot-create__popin {
    opacity: 1;
    visibility: visible;
}

/* Carte fiche cliquable (onglet Fiches du profil) */
.sheet-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sheet-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}
.sheet-card-arrow {
    transition: transform 0.25s ease, color 0.25s ease;
}
.sheet-card:hover .sheet-card-arrow {
    transform: translateX(3px);
    color: var(--bs-primary) !important;
}

/* ========================================
   HOMEPAGE
   La mise en page (grilles, spacing, couleurs, ombres, arrondis) est portée par
   les utilitaires MDB / global.css dans les partials front/home/_partials/*.
   On ne garde ici que ce qui n'a AUCUN équivalent utilitaire : tailles fixes en px
   (pastilles d'icônes), ratios/hauteurs d'images, masquage initial des animations
   GSAP et la bande CTA en dégradé de la DA.
   ======================================== */

/* Masquage initial du contenu animé avant l'intro GSAP
   (gated par .gsap-pending, retiré en JS → contenu visible si JS/GSAP absent) */
.gsap-pending .home-anim {
    opacity: 0;
}

/* Pastilles d'icônes rondes (tailles fixes sans équivalent utilitaire) */
.home-feature-icon {
    width: 64px;
    height: 64px;
}
.home-list-icon {
    width: 40px;
    height: 40px;
}

/* Cartes campagnes de la home : hauteurs d'image et logo superposé identiques
   au module Campaign (aucun utilitaire pour ces dimensions fixes). */
.home-campaign-card,
.home-partner-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home-campaign-card:hover,
.home-partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12) !important;
}
.home-campaign-card__img {
    height: 180px;
    object-fit: cover;
}
.home-campaign-card__logo {
    width: 60px;
    height: 60px;
    object-fit: cover;
    bottom: -30px;
    left: 20px;
}

/* Logo partenaire : format carré fixe, logos de ratios variés non déformés
   (partner.css n'est chargé que sur les pages du module). */
.home-partner-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}


/* Carte « Trouvez vos compagnons » — placeholder décoratif évoquant une carte
   (feature future). Trame légère sans équivalent utilitaire. */
.home-companions-map {
    min-height: 320px;
    background-color: var(--bs-light-gray);
    background-image:
        linear-gradient(rgba(var(--primary-rgb), 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-rgb), 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
}


/* ========================================
   MARKETPLACE (front)
   Ces règles vivaient dans modules/Marketplace/assets/styles/marketplace.css,
   jamais servi (`/styles/marketplace.css` → 404) : elles n'ont donc jamais été
   appliquées. Regroupées ici, dans la feuille chargée sur tout le front.
   Uniquement le non-utilitaire : dimensions fixes, superpositions et transitions.
   ======================================== */

/* Visuel des cartes de listing (hauteur fixe pour aligner les cartes) */
.marketplace-thumb {
    height: 180px;
    object-fit: cover;
}

/* 2e image de la galerie, révélée au survol de la carte */
.marketplace-card-hover {
    opacity: 0;
    transition: opacity 0.35s ease;
}
.marketplace-card:hover .marketplace-card-hover,
.marketplace-card:focus-within .marketplace-card-hover {
    opacity: 1;
}

/* Galerie de la page ressource : la couverture occupe toute la largeur de la
   colonne, ratio contraint pour éviter les images démesurées. */
.marketplace-gallery-main {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.marketplace-gallery-open {
    background: none;
    cursor: zoom-in;
}

/* Miniatures posées par-dessus la couverture, sur un voile pour rester lisibles */
.marketplace-gallery-thumbs {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}

.marketplace-gallery-thumb {
    width: 72px;
    height: 54px;
    opacity: 0.55;
    background: none;
    transition: opacity 0.25s ease, outline-color 0.25s ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.marketplace-gallery-thumb img {
    object-fit: cover;
}
.marketplace-gallery-thumb:hover,
.marketplace-gallery-thumb:focus-visible,
.marketplace-gallery-thumb.is-active {
    opacity: 1;
}
.marketplace-gallery-thumb.is-active {
    outline-color: #fff;
}

/* Vignettes de la galerie dans le formulaire créateur */
.marketplace-gallery-item {
    width: 64px;
    height: 48px;
    object-fit: cover;
}

/* Avatar de la page auteur */
.marketplace-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 3px solid var(--bs-primary);
}

/* Ancre des avis : décalée pour ne pas passer sous la navbar fixe */
.marketplace-reviews-anchor {
    scroll-margin-top: calc(var(--nav-height, 80px) + 1rem);
}

.marketplace-rating-link:hover {
    opacity: 0.85;
}

/* Avatar de l'auteur dans la liste des avis */
.marketplace-review-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
}