/* ============================================================
   WEATHERING — Page "Les cartes"
   Réutilise les variables globales de style.css
   ============================================================ */

.cards-page {
    background-color: var(--color-teal-dark);
    padding-top: calc(var(--header-height) + 1.5rem);
    min-height: 100vh;
    color: var(--color-text-light);
}

.cards-page-title {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 56px);
    margin-bottom: 0.4rem;
    letter-spacing: 1px;
}

.cards-page-count {
    color: rgba(245, 241, 232, 0.6);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* ---------- SIDEBAR / FILTRES ---------- */

.cards-sidebar {
    background-color: #18383A;
    border-radius: 20px;
    padding: 2rem 1.5rem;
    position: sticky;
    top: calc(var(--header-height) + 3rem);
}

.filter-group { margin-bottom: 2rem; }
.filter-group:last-of-type { margin-bottom: 1rem; }

.filter-title {
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 14px;
    color: rgba(245, 241, 232, 0.5);
    display: flex;
    pointer-events: none;
}

.search-input {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 14px 12px 40px;
    color: var(--color-white);
    font-size: 0.85rem;
    font-family: var(--font-body);
    transition: border-color var(--transition-fast);
}

.search-input::placeholder { color: rgba(245, 241, 232, 0.5); }

.search-input:focus {
    outline: none;
    border-color: var(--color-coral-light);
}

/* --- Type : hexagones SVG --- */

.type-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.type-btn {
    background: transparent;
    border: none;
    padding: 6px 2px;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.type-btn:hover { transform: translateY(-2px); }

.type-hex {
    width: 100%;
    max-width: 54px;
    height: auto;
    display: block;
    transition: opacity var(--transition-fast), filter var(--transition-fast);
    opacity: 0.5;
    filter: grayscale(0.35);
}

.type-hex .hex-shape { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1.5; }
.type-hex .hex-glyph { fill: #ffffff; }

.type-btn:hover .type-hex { opacity: 0.85; filter: grayscale(0.1); }

.type-btn.active .type-hex {
    opacity: 1;
    filter: none;
}

.type-btn.active .type-hex .hex-shape {
    stroke: #ffffff;
    stroke-width: 2.5;
}

.type-label {
    font-size: 0.7rem;
    color: rgba(245, 241, 232, 0.55);
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: color var(--transition-fast);
}

.type-btn.active .type-label { color: var(--color-white); }

/* Couleurs par type (hexagone rempli) */
.type-btn[data-value="atmospherique"] .hex-shape { fill: #8b7fb8; }
.type-btn[data-value="anthropique"]   .hex-shape { fill: #4d4d4d; }
.type-btn[data-value="oceanique"]     .hex-shape { fill: #4a90a4; }
.type-btn[data-value="terrestre"]     .hex-shape { fill: #5fa86f; }

/* Glyphes : terre & anthropique en trait */
.type-btn[data-value="terrestre"] .hex-glyph {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Pills (contenu + durée) --- */

.pill-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pill-filter-stack {
    flex-direction: column;
    align-items: flex-start;
}

.pill-btn {
    background-color: var(--color-teal);
    color: var(--color-white);
    border: 1px solid var(--color-teal);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pill-btn:hover { background-color: #0f92a0; border-color: #0f92a0; }

.pill-btn.active {
    background-color: #17a7b5;
    border-color: #eafcff;
    color: var(--color-white);
}

.filter-actions {
    margin-top: 1.5rem;
    text-align: center;
}

.reset-btn {
    background: transparent;
    border: none;
    color: rgba(245, 241, 232, 0.7);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 8px;
    transition: color var(--transition-fast);
}

.reset-btn:hover { color: var(--color-coral-light); }

.apply-filters-btn { display: none; }

/* ---------- GRILLE DE CARTES ---------- */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
}

.card-tile {
    position: relative;
    cursor: pointer;
    border-radius: 25px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    background-color: var(--color-cream);
    aspect-ratio: 2 / 3;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.card-tile:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.4);
}

.card-tile .card-visual,
.card-tile .card-visual img,
.card-tile .card-visual svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* ---------- PANNEAU DE DÉTAIL (tiroir, haut de grille) ---------- */

.cards-area { position: relative; }

.card-detail {
    display: none;
    gap: 2rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    align-items: center;
    scroll-margin-top: calc(var(--header-height) + 20px);
}

.card-detail.open { display: flex; }

/* Fond crème = le "tiroir" qui s'étire (liseré discret, façon maquette) */
.card-detail-bg {
    position: absolute;
    inset: 0;
    background-color: var(--color-cream);
    border: 2px solid rgba(13, 127, 140, 0.55);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    z-index: 0;
}

/* Carte : illustration complète, largeur fixe + ratio carte (stable, sans JS).
   Centrée verticalement : remplit la hauteur pour les cartes normales,
   reste propre (petit espace haut/bas) pour les cartes très chargées. */
.card-detail-thumb {
    position: relative;
    z-index: 2;
    align-self: center;
    flex: 0 0 auto;
    width: clamp(200px, 20vw, 250px);
    aspect-ratio: 674 / 1040;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.card-detail-thumb img,
.card-detail-thumb svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-detail-info {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    color: var(--color-text-dark);
    display: flex;
    flex-direction: column;
}

.card-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: transparent;
    border: none;
    color: var(--color-text-dark);
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--transition-fast);
}

.card-detail-close:hover { background-color: rgba(0, 0, 0, 0.08); }

/* Animation d'ouverture — jouée uniquement à la première ouverture */
.card-detail.animate-in .card-detail-bg { animation: drawerReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.card-detail.animate-in .card-detail-thumb { animation: thumbPop 0.4s ease both; }
.card-detail.animate-in .card-detail-info { animation: infoFade 0.42s ease-in 0.26s both; }

@keyframes drawerReveal {
    from { clip-path: inset(0 100% 0 0 round 18px); }
    to   { clip-path: inset(0 0 0 0 round 18px); }
}

@keyframes thumbPop {
    from { opacity: 0; transform: translateY(-8px) scale(0.94); }
    to   { opacity: 1; transform: none; }
}

@keyframes infoFade {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
}

/* Typo détail (partagée avec le bottom sheet mobile) */
.card-detail-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: var(--color-coral-dark);
    margin-bottom: 0.25rem;
    padding-right: 2.5rem;
}

.card-detail-body h2, .card-detail-info h2 {
    color: var(--color-text-dark);
    font-family: var(--font-display);
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
    line-height: 1.05;
}

.card-detail-body h3, .card-detail-info h3 {
    color: var(--color-text-dark);
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    margin-top: 1.1rem;
    margin-bottom: 0.6rem;
}

.card-detail-explication {
    color: #333;
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 0.25rem;
}

/* Carte active dans la grille : état "hover" figé (sans cadre) */
.card-tile.is-active {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
}

/* ---------- LISTE DE RESSOURCES ---------- */

.card-resources-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.card-resource {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.card-resource:last-child { border-bottom: none; }

.card-resource-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-top: 2px;
}

.card-resource-icon svg { width: 17px; height: 17px; }

.res-video     { background-color: #c0392b; }
.res-audio     { background-color: #8e44ad; }
.res-ecrit     { background-color: #2c6e75; }
.res-interactif{ background-color: #2980b9; }
.res-actions   { background-color: #27884f; }

.card-resource-text {
    font-size: 0.92rem;
    line-height: 1.4;
    color: #333;
    min-width: 0;
}

.card-resource-source {
    font-weight: 700;
    color: var(--color-text-dark);
}

.card-resource-text a {
    color: var(--color-coral-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.card-resource-text a:hover { color: var(--color-coral-light); }

.card-resource-duration {
    display: inline-block;
    font-size: 0.75rem;
    color: #777;
    white-space: nowrap;
    margin-left: 0.35rem;
}

/* ---------- BOUTONS CTA (style pâteux Weathering) ---------- */

.card-cta-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2.5rem;
    row-gap: 1.75rem;
    margin-top: auto;
    padding-top: 0.75rem;
}

.card-cta {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 13px 26px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    color: var(--color-white);
    background: transparent;
    border: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.card-cta svg { width: 16px; height: 16px; }

/* Bouton plein (primaire) */
.card-cta::before,
.card-cta::after {
    content: '';
    position: absolute;
    inset: -7px -15px;
    -webkit-mask: url('../svg/btn-shape.svg') no-repeat center / 100% 100%;
    mask: url('../svg/btn-shape.svg') no-repeat center / 100% 100%;
    transition: background-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.card-cta::before { background-color: var(--color-coral-light); z-index: -1; }
.card-cta::after  { background-color: var(--color-coral-shadow); transform: translate(3px, 3px); z-index: -2; }

.card-cta:hover { color: var(--color-white); }
.card-cta:hover::before { background-color: var(--color-coral-dark); }
.card-cta:hover::after  { opacity: 0; transform: translate(0, 0); }

/* Bouton contour : fond plein (link-shape-fill) + cadre coral (link-shape) par-dessus */
.card-cta-outline { color: var(--color-coral-light); }
.card-cta-outline::before {
    -webkit-mask: url('../svg/link-shape-fill.svg') no-repeat center / 100% 100%;
    mask: url('../svg/link-shape-fill.svg') no-repeat center / 100% 100%;
    background-color: #ffffff;
    z-index: -1;
}
.card-cta-outline::after {
    -webkit-mask: none;
    mask: none;
    background: url('../svg/link-shape.svg') no-repeat center / 100% 100%;
    transform: none;
    z-index: -1;
}
.card-cta-outline:hover { color: var(--color-white); }
.card-cta-outline:hover::before { background-color: var(--color-coral-light); }

/* ---------- ÉTAT VIDE ---------- */

.cards-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-white);
}

.cards-empty-state p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* ---------- FILTRES ACTIFS (chips) ---------- */

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.active-filters:empty { display: none; }

.active-filter-chip {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    border: none;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.85rem;
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.active-filter-chip:hover { background-color: rgba(255, 255, 255, 0.28); }

.active-filter-chip svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ---------- OVERLAY (mobile) ---------- */

.filters-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1090;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.filters-overlay.open { opacity: 1; pointer-events: auto; }

.filters-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: 8px;
    z-index: 2;
    display: none;
}

.filter-toggle {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--color-white);
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color var(--transition-fast);
}

.filter-toggle:hover { background-color: rgba(255, 255, 255, 0.1); }

.filter-toggle-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background-color: var(--color-coral-light);
    color: #fff;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- BOTTOM SHEET (mobile) ---------- */

.card-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
}

.card-modal[aria-hidden="false"] { pointer-events: auto; }

.card-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-modal[aria-hidden="false"] .card-modal-backdrop { opacity: 1; }

.card-modal-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-cream);
    border-radius: 24px 24px 0 0;
    padding: 1.5rem 1.5rem 2.5rem;
    height: 78vh;
    max-height: 78vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
    -webkit-overflow-scrolling: touch;
    color: var(--color-text-dark);
}

.card-modal[aria-hidden="false"] .card-modal-sheet { transform: translateY(0); }

.card-modal-handle {
    width: 44px;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    margin: 0 auto 1rem;
}

.card-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--color-text-dark);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color var(--transition-fast);
    z-index: 2;
}

.card-modal-close:hover { background-color: rgba(0, 0, 0, 0.08); }

.card-modal-thumb {
    width: 110px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.card-modal-thumb img,
.card-modal-thumb svg { width: 100%; height: auto; display: block; }

.card-modal-head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-right: 2rem;
}

.card-modal-content h2 {
    color: var(--color-text-dark);
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.card-modal-content h3 {
    color: var(--color-text-dark);
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    margin-top: 1rem;
    margin-bottom: 0.6rem;
}

.card-modal-content .card-detail-title {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.card-modal-content p.card-detail-explication {
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {
    .cards-sidebar-col { position: relative; }

    /* Empêche les panneaux hors-écran (menu, filtres) de déborder à droite.
       'clip' n'interfère pas avec position:sticky, contrairement à 'hidden'. */
    html { overflow-x: clip; }
    body { overflow-x: clip; }

    .cards-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: min(400px, 92vw);
        height: 100%;
        border-radius: 0;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--transition-med);
        z-index: 1100;
        padding-top: 4rem;
    }

    .cards-sidebar.open { transform: translateX(0); }

    .filters-close-btn { display: block; }

    /* La recherche est dans la barre mobile en haut → on masque celle de la sidebar */
    .filter-group-search { display: none; }

    .apply-filters-btn {
        display: inline-flex;
        margin-top: 1rem;
        width: 100%;
    }

    .cards-main-col { width: 100%; }

    .cards-grid { grid-template-columns: repeat(2, 1fr); }

    .card-tile:hover {
        transform: none;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    }

    /* Sur mobile on utilise le bottom sheet, pas le volet du haut */
    .card-detail { display: none !important; }

    /* Boutons CTA empilés et centrés dans le bottom sheet */
    .card-cta-row {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .card-modal .card-cta {
        width: 100%;
        max-width: 300px;
    }

    /* Sécurité anti-débordement horizontal */
    .cards-page,
    .cards-page .container-fluid,
    .cards-main-col,
    .cards-grid { overflow-x: hidden; }
}

@media (min-width: 992px) {
    .mobile-search-bar { display: none; }
    .filter-toggle { display: none; }
    .card-modal { display: none; }

    /* Plafonne la largeur du contenu et le centre → cartes de taille raisonnable
       et marges maîtrisées, sans trop resserrer sur les écrans larges. */
    .cards-page > .container-fluid {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Sidebar un peu plus large (30 % au lieu de 25 %) */
    .cards-sidebar-col { flex: 0 0 30%; max-width: 30%; }
    .cards-main-col { flex: 0 0 70%; max-width: 70%; }
}

@media (max-width: 575.98px) {
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .cards-page-title {
        font-size: 1.75rem;
        margin-bottom: 0.25rem;
    }

    .card-modal-sheet { height: 82vh; max-height: 82vh; }
}

.mobile-search-bar { margin-bottom: 1.5rem; }

@media (min-width: 992px) {
    .card-cta-row .card-cta { flex: 1 1 0; }
}