/* ===== Cartes des randonnées et trails gravés — page brouillon =====
   S'ajoute à cartes.css (mêmes variables .cm, cartes .cm-card). Vidéo du héros
   et vignettes : rendus Blender (E:\mountain-clean-app\Blender_scene\cartes,
   parcours_cartes.py → render_parcours.py → export_parcours.py) ; contenu
   dynamique : js/parcours-brouillon.js. */

/* ----- Héros vidéo : le vol au ras du tracé, puis le tableau au mur -----
   La vidéo est en 16:9 et la boîte aussi : l'image n'est jamais rognée, le
   cadre de la fin (à droite) reste entier. Le texte occupe le mur, à gauche. */
.cp-hero {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: #e9e3da;
    color: var(--cm-ink);
}

.cp-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    background: #e9e3da;
}

.cp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(236, 230, 221, 0.94) 0%, rgba(236, 230, 221, 0.82) 26%, rgba(236, 230, 221, 0) 44%);
    pointer-events: none;
}

.cp-hero .cm-wrap { width: min(1600px, calc(100% - 8vw)); }
.cp-hero__body { max-width: min(520px, 34vw); padding: 40px 0; }

.cp-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.6vw, 3.6rem);
    line-height: 1.04;
    margin: 14px 0 18px;
    color: #24170e;
    text-wrap: balance;
}

.cp-hero p {
    font-size: clamp(0.98rem, 1.1vw, 1.1rem);
    line-height: 1.65;
    color: #5a4738;
    margin: 0 0 24px;
}

.cp-hero__toggle {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: rgba(29, 21, 15, 0.55);
    color: #f5ebdd;
    font-size: 0.85rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.25s ease;
}

.cp-hero__toggle:hover { background: rgba(29, 21, 15, 0.8); }
.cp-hero__toggle:focus-visible { outline: 2px solid #f5ebdd; outline-offset: 3px; }

/* ----- Galerie : onglets + recherche ----- */
.cp-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
}

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

.cp-search i {
    position: absolute;
    left: 14px;
    color: var(--cm-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.cp-search input {
    width: 240px;
    padding: 11px 14px 11px 36px;
    border: 1px solid var(--cm-line);
    border-radius: 999px;
    background: var(--cm-card);
    font: inherit;
    font-size: 0.9rem;
    color: var(--cm-ink);
}

.cp-search input:focus { outline: 2px solid var(--cm-accent); outline-offset: 2px; border-color: transparent; }

.cp-seg__count {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-left: 2px;
}

.cp-empty {
    grid-column: 1 / -1;
    padding: 40px 0;
    text-align: center;
    color: var(--cm-muted);
}

.cm-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.84rem;
    color: var(--cm-muted);
    margin: 2px 0 0;
}

.cm-card__facts i { color: var(--cm-accent); margin-right: 5px; font-size: 0.78rem; }

/* course citée à titre descriptif (le nom de la carte reste neutre) : discret */
.cp-mention {
    margin: -2px 0 2px;
    font-size: 0.72rem;
    line-height: 1.45;
    font-style: italic;
    color: var(--cm-muted);
    opacity: 0.85;
}

.cm-card__cta {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--cm-accent);
}

.cp-legal {
    margin-top: 26px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--cm-muted);
    max-width: 900px;
}

@media (max-width: 1100px) {
    .cp-hero__body { max-width: 42vw; }
}

/* téléphone : la vidéo en entier, le texte dessous */
@media (max-width: 760px) {
    .cp-hero { display: block; aspect-ratio: auto; }
    .cp-hero__video { position: static; display: block; height: auto; aspect-ratio: 16 / 9; }
    .cp-hero::before { display: none; }
    .cp-hero .cm-wrap { width: calc(100% - 32px); }
    .cp-hero__body { max-width: none; padding: 26px 0 40px; }
    .cp-hero__toggle { top: calc(100vw * 9 / 16 - 52px); bottom: auto; right: 12px; width: 36px; height: 36px; }
    .cp-search input { width: 100%; }
    .cp-search { flex: 1 1 100%; }
}