/*
 * Mega menus par item de nav (pattern moderne type Apple / Stripe).
 * Chaque item de nav qui a un sous-menu contient un trigger + un panneau
 * fullwidth qui descend sous le header au hover/click.
 */

/* Item de nav avec sous-menu */
.mam-nav__item {
    position: static; /* le panel sera positionne par rapport au header */
    display: inline-flex;
    align-items: center;
}

/* Trigger (bouton label avec chevron) */
.mam-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: var(--sp-3) 0;
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: inherit;
    font-size: inherit;
    font-weight: inherit;
    position: relative;
    transition: color var(--dur-hover) var(--ease-editorial);
}

.mam-nav__trigger:hover,
.mam-nav__trigger[aria-expanded="true"] {
    color: var(--color-accent);
}

.mam-nav__trigger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sp-2);
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-hover) var(--ease-editorial);
}

.mam-nav__trigger[aria-expanded="true"]::after,
.mam-nav__item:hover .mam-nav__trigger::after {
    transform: scaleX(1);
}

.mam-nav__chevron {
    transition: transform var(--dur-hover) var(--ease-editorial);
}

.mam-nav__trigger[aria-expanded="true"] .mam-nav__chevron {
    transform: rotate(180deg);
}

/* Lien simple (pas de sous-menu) : meme style que l'existant */
.mam-nav__link {
    position: relative;
    padding-block: var(--sp-3);
    display: inline-block;
    color: inherit;
}

.mam-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sp-2);
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-hover) var(--ease-editorial);
}

.mam-nav__link:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.mam-nav__link:hover::after { transform: scaleX(1); }

/* =====================================================================
   Panel mega menu (dropdown riche qui descend sous le header)
   ===================================================================== */

.mam-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    /* Suit l'ambiance du body : paper en clair, ink-soft en sombre. */
    background: var(--color-bg);
    color: var(--color-text);
    border-top: 1px solid var(--color-hairline);
    box-shadow: 0 24px 48px -24px rgba(10, 10, 10, 0.18);
    z-index: calc(var(--z-header) - 1);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--dur-hover) var(--ease-editorial),
                transform var(--dur-hover) var(--ease-editorial),
                visibility 0s linear var(--dur-hover);
    visibility: hidden;
    /* Reset de l'heritage text-transform/letter-spacing de la nav parente */
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--fw-regular);
}

.mam-panel[hidden] {
    display: none;
}

.mam-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--dur-hover) var(--ease-editorial),
                transform var(--dur-hover) var(--ease-editorial),
                visibility 0s linear 0s;
}

/* Trait fuchsia de signature en bas du panel */
.mam-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-accent) 30%,
        var(--color-accent) 70%,
        transparent 100%);
    opacity: 0.6;
}

/* Rien de specifique pour l'overlay : le panel herite l'ambiance du body */

.mam-panel__inner {
    max-width: var(--content-wide);
    margin-inline: auto;
    padding: var(--sp-5) var(--gutter) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.mam-panel__inner--split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--sp-6);
    align-items: start;
}

@media (max-width: 1100px) {
    .mam-panel__inner--split {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
}

.mam-panel__head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.mam-panel__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
    font-weight: 340;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-text);
    text-transform: none;
}

.mam-panel__title em {
    font-style: italic;
    color: var(--color-accent);
    font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
}

/* Label "A la une" dans le panel split (sans kicker complet) */
.mam-panel__featured-label {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--sp-3);
}

.mam-panel__title em {
    font-style: italic;
    color: var(--color-accent);
    font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
}

.mam-panel__foot {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-hairline);
    display: flex;
    justify-content: flex-end;
}

/* Grille cartes (departements, agences) */
.mam-panel__grid {
    display: grid;
    gap: var(--sp-3);
}

.mam-panel__grid--6 {
    grid-template-columns: repeat(6, 1fr);
}

.mam-panel__grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 1400+ : full 6 cols pour "Construire" */
/* 1100-1399 : 3 cols (2 rangees) pour "Construire", 3 cols pour "Agences" */
@media (max-width: 1399px) {
    .mam-panel__grid--6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    /* Mobile gere par drawer, le panel est cache ici */
}

/* Carte dans le panel */
.mam-panel-card {
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    overflow: hidden;
}

.mam-panel-card:hover {
    text-decoration: none;
}

.mam-panel-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg-alt);
    position: relative;
}

.mam-panel-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-reveal) var(--ease-editorial);
}

.mam-panel-card:hover .mam-panel-card__media img {
    transform: scale(1.06);
}

.mam-panel-card__body {
    padding: var(--sp-2) 0 0;
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.mam-panel-card__code {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-md);
    color: var(--color-accent);
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}

.mam-panel-card__name {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.mam-panel-card__meta {
    display: block;
    width: 100%;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    letter-spacing: 0.02em;
}

.mam-panel-card:hover .mam-panel-card__name {
    color: var(--color-accent);
}

/* Liste programmes (dans panel split) */
.mam-panel__list {
    list-style: none;
    padding: 0;
    margin: var(--sp-3) 0 var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.mam-panel__list li {
    border-bottom: 1px solid var(--color-hairline);
}

.mam-panel__list a {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 340;
    letter-spacing: -0.01em;
    color: var(--color-text);
    transition: color var(--dur-hover) var(--ease-editorial),
                transform var(--dur-hover) var(--ease-editorial);
}

.mam-panel__list a:hover {
    color: var(--color-accent);
    transform: translateX(4px);
    text-decoration: none;
}

/* Featured programmes (panel split, colonne droite) */
.mam-panel__featured {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.mam-panel .mam-panel-feature {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--sp-4);
    align-items: center;
    color: var(--color-text);
    padding: var(--sp-3);
    border: 1px solid var(--color-hairline);
    transition: border-color var(--dur-hover) var(--ease-editorial);
}

.mam-panel-feature:hover {
    border-color: var(--color-accent);
    text-decoration: none;
}

.mam-panel-feature__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg-alt);
}

/* Ruban statut compacte dans les features */
.mam-panel-feature__media .mam-ribbon {
    font-size: 0.6rem;
    padding: 4px 8px;
    letter-spacing: 0.1em;
}

.mam-panel-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-reveal) var(--ease-editorial);
}

.mam-panel-feature:hover .mam-panel-feature__media img {
    transform: scale(1.05);
}

.mam-panel-feature__body h4 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 340;
    margin: 0 0 var(--sp-1);
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.mam-panel-feature__body p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* =====================================================================
   Backdrop (assombrit la page quand le panel est ouvert)
   ===================================================================== */

.mam-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header) - 2);
    background: rgba(10, 10, 10, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-hover) var(--ease-editorial);
}

.mam-panel-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* =====================================================================
   Mobile : on masque les triggers+panels, le burger+drawer prennent le relais
   ===================================================================== */

@media (max-width: 899px) {
    .mam-nav__list { display: none; }
    .mam-panel { display: none !important; }
    .mam-burger { display: inline-flex; }
}

@media (min-width: 900px) {
    .mam-burger { display: none !important; }
}

/* =====================================================================
   Drawer mobile - styles inchanges (deja en place dans layout.css),
   just quelques overrides si besoin
   ===================================================================== */

/* Espacement code dans drawer (reutilise dans les listes du drawer aussi) */
.mam-megamenu__code {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.7em;
    color: var(--c-fuchsia-soft);
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 2ch;
}

/* =====================================================================
   Drawer mobile : groupes accordeon avec details/summary
   ===================================================================== */

.mam-drawer__group {
    border-bottom: 1px solid var(--color-hairline);
}

/* Reset des markers natifs de details/summary */
.mam-drawer__group summary {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    padding-right: var(--sp-6);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 320;
    letter-spacing: -0.015em;
    color: var(--color-text);
    cursor: pointer;
    position: relative;
}

.mam-drawer__group summary::-webkit-details-marker,
.mam-drawer__group summary::marker {
    display: none;
    content: "";
}

/* Chevron custom */
.mam-drawer__group summary::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--dur-hover) var(--ease-editorial);
}

.mam-drawer__group[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}

.mam-drawer__group-num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.55em;
    color: var(--color-accent);
    font-weight: 300;
    margin-right: var(--sp-2);
}

/* Listes de sous-items (departements) dans un group ouvert */
.mam-drawer__group ul {
    list-style: none;
    padding: 0 0 var(--sp-4);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mam-drawer__group ul li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mam-drawer__group ul a {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
    transition: color var(--dur-hover) var(--ease-editorial);
    letter-spacing: 0;
}

.mam-drawer__group ul a:hover {
    color: var(--color-text);
    text-decoration: none;
}

/* Code departement dans drawer - adaptatif */
.mam-drawer .mam-megamenu__code {
    color: var(--color-accent);
}

/* Liste simple en bas du drawer */
.mam-drawer__list--simple {
    list-style: none;
    padding: var(--sp-4) 0 0;
    margin: 0;
    border-top: 1px solid var(--color-hairline);
}

.mam-drawer__list--simple li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mam-drawer__list--simple a {
    display: block;
    padding: var(--sp-3) 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 320;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.mam-drawer__list--simple a:hover {
    color: var(--color-accent);
    text-decoration: none;
}