/* ===========================================================================
   franck-gamme-neuve — Habillage Renault (v2, specs design juin 2026)
   public/renault/assets/css/franck-gamme-neuve.css
   =========================================================================== */

.franck-gamme-neuve {
    --fgn-cols: 3;
    --fgn-density-width: 86%;
    --fgn-content-padding-x: 42px;
    --fgn-card-gap: 28px;
    --fgn-header-gap: 42px;

    --fgn-yellow: #ffd200;
    --fgn-badge:  #2ba9e0;
    --fgn-ink:    #111114;
    --fgn-muted:  #6b7280;
    --fgn-font:   'NouvelR', 'Jost', 'Work Sans', system-ui, sans-serif;

    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* WRAPPER */
.franck-gamme-neuve-wrapper { position: relative; width: 100%; box-sizing: border-box; }
.franck-gamme-neuve-wrapper--full { width: 100%; max-width: 100%; margin-left: 0; }

/* INNER */
.franck-gamme-neuve__inner {
    position: relative; z-index: 1;
    width: var(--fgn-density-width, 86%);
    max-width: 1680px; margin: 0 auto;
    padding-left: var(--fgn-content-padding-x, 42px);
    padding-right: var(--fgn-content-padding-x, 42px);
    box-sizing: border-box;
}
.franck-gamme-neuve--compact .franck-gamme-neuve__inner { --fgn-density-width: 72%; }
.franck-gamme-neuve--normal  .franck-gamme-neuve__inner { --fgn-density-width: 86%; }
.franck-gamme-neuve--large   .franck-gamme-neuve__inner { --fgn-density-width: 94%; }
.franck-gamme-neuve--xxl     .franck-gamme-neuve__inner { --fgn-density-width: 100%; max-width: none; }

/* HEADER */
.franck-gamme-neuve__header { margin: 0 0 var(--fgn-header-gap, 42px); text-align: center; }
.franck-gamme-neuve__title { font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 12px; }
.franck-gamme-neuve__subtitle { line-height: 1.6; margin: 0 0 28px; }

/* FILTRES — centrés, texte seul (actif: extrabold + liseré jaune) */
.franck-gamme-neuve__filters {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 22px;
}
.franck-gamme-neuve__filter {
    background: transparent; border: 0; cursor: pointer;
    padding: 2px 0 4px;
    color: var(--fgn-ink);
    font-family: var(--fgn-font);
    font-size: 16px; line-height: 24px; letter-spacing: 0.2px;
    text-transform: uppercase;
    font-weight: 400;                 /* inactif : Regular */
    border-bottom: 3px solid transparent;
    transition: border-color .2s ease;
}
.franck-gamme-neuve__filter.is-active {
    font-weight: 800;                 /* actif : ExtraBold */
    border-bottom-color: var(--fgn-yellow);
}

/* GRILLE */
.franck-gamme-neuve__grid {
    display: grid;
    grid-template-columns: repeat(var(--fgn-cols, 3), minmax(0, 1fr));
    gap: var(--fgn-card-gap, 28px);
    justify-items: center;
}

/* CARTE — 367 x 398 */
.franck-gamme-neuve__card {
    width: 100%; max-width: 367px; min-height: 398px;
    display: flex; flex-direction: column;
    background: #fff; color: var(--fgn-ink); text-decoration: none;
}
.franck-gamme-neuve__card:hover { text-decoration: none; }

/* IMAGE — 325 x 183 */
.franck-gamme-neuve__image {
    width: 100%; max-width: 325px; height: 183px;
    margin: 0 auto; overflow: hidden; background: #fff;
}
.franck-gamme-neuve__image img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center; display: block;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.franck-gamme-neuve__card:hover .franck-gamme-neuve__image img { transform: scale(1.03); }
.franck-gamme-neuve__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #eef2f7, #dbe3ef); }

/* CORPS */
.franck-gamme-neuve__body {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 10px; padding: 18px 4px 8px;
}

/* MOTORISATIONS — "disponible en" sur sa ligne, tous les badges sur la ligne suivante */
.franck-gamme-neuve__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.franck-gamme-neuve__badge-label {
    width: 100%;
    color: var(--fgn-muted);
    font-family: var(--fgn-font);
    font-weight: 400; font-size: 12px; line-height: 18px;
    text-transform: lowercase;
}
.franck-gamme-neuve__badge {
    box-sizing: border-box;
    width: auto; min-width: 0; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 8px;
    border: 1px solid var(--fgn-badge); border-radius: 4px;
    color: var(--fgn-badge);
    font-family: var(--fgn-font);
    font-weight: 400; font-size: 12px; line-height: 18px;
    white-space: nowrap; text-transform: none;
}

/* MODÈLE — 16/700/uppercase */
.franck-gamme-neuve__model {
    margin: 4px 0 0;
    font-family: var(--fgn-font);
    font-weight: 700; font-size: 16px; line-height: 16px;
    text-transform: uppercase; color: var(--fgn-ink);
}

/* PRIX — 16/400/lowercase */
.franck-gamme-neuve__price {
    margin: 0;
    font-family: var(--fgn-font);
    font-weight: 400; font-size: 16px; line-height: 20px;
    text-transform: lowercase; color: var(--fgn-ink);
}

/* CLASSE ÉNERGÉTIQUE — label 11/400 #656666 */
.franck-gamme-neuve__energy {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-family: var(--fgn-font);
    font-weight: 400; font-size: 11px; line-height: 16px; color: #656666;
}

/* Pastille — lettre À GAUCHE */
.EfficiencyClass__thumbnail {
    display: inline-flex; align-items: center; justify-content: flex-start;
    min-width: 34px; height: 24px;
    padding: 0 14px 0 8px;
    color: #fff; font-weight: 800; font-size: 13px; line-height: 1;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}
.EfficiencyClass__thumbnail.is-classA { background-color: #289548; }
.EfficiencyClass__thumbnail.is-classB { background-color: #75ac40; }
.EfficiencyClass__thumbnail.is-classC { background-color: #c9d22a; color: #111; }
.EfficiencyClass__thumbnail.is-classD { background-color: #ebec00; color: #111; }
.EfficiencyClass__thumbnail.is-classE { background-color: #e9b818; color: #111; }
.EfficiencyClass__thumbnail.is-classF { background-color: #cf661c; }
.EfficiencyClass__thumbnail.is-classG { background-color: #c10f19; }

/* Popover image classe énergétique au survol */
.franck-gamme-neuve__energy-trigger { position: relative; display: inline-flex; align-items: center; }
.franck-gamme-neuve__energy-popover {
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(6px);
    z-index: 30; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    background: #fff; padding: 10px; border-radius: 4px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.franck-gamme-neuve__energy-popover img { display: block; max-width: 240px; height: auto; }
.franck-gamme-neuve__energy-trigger:hover .franck-gamme-neuve__energy-popover {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* LIEN DÉCOUVRIR — 16/700/lowercase, liseré jaune (hover noir) */
.franck-gamme-neuve__discover {
    margin-top: 12px; padding-bottom: 2px;
    font-family: var(--fgn-font);
    font-weight: 700; font-size: 16px; line-height: 16px;
    text-transform: lowercase; color: var(--fgn-ink);
    border-bottom: 3px solid var(--fgn-yellow);
    transition: border-color .2s ease;
}
.franck-gamme-neuve__card:hover .franck-gamme-neuve__discover { border-bottom-color: var(--fgn-ink); }

/* "VOIR PLUS" */
.franck-gamme-neuve__card.is-hidden { display: none; }
.franck-gamme-neuve__more-wrap { display: flex; justify-content: center; margin-top: 32px; }
.franck-gamme-neuve__more {
    display: inline-flex; align-items: center; gap: 8px;
    height: 48px; padding: 0 26px;
    border: 2px solid var(--fgn-ink); border-radius: 0;
    background: #fff; color: var(--fgn-ink);
    font-size: 15px; font-weight: 800; cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.franck-gamme-neuve__more:hover { background: var(--fgn-ink); color: #fff; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .franck-gamme-neuve--cols-2 .franck-gamme-neuve__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .franck-gamme-neuve--cols-3 .franck-gamme-neuve__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .franck-gamme-neuve--cols-4 .franck-gamme-neuve__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .franck-gamme-neuve--cols-5 .franck-gamme-neuve__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .franck-gamme-neuve { --fgn-content-padding-x: 22px; }
}
@media (max-width: 640px) {
    .franck-gamme-neuve__grid { grid-template-columns: 1fr !important; }
    .franck-gamme-neuve { --fgn-content-padding-x: 18px; }
}

/* "voir plus" — bouton noir, hover inversé + cartes repliées */
.franck-gamme-neuve__card.is-collapsed { display: none; }
.franck-gamme-neuve__more { background: var(--fgn-ink); color: #fff; border: 2px solid var(--fgn-ink); text-transform: none; }
.franck-gamme-neuve__more:hover { background: #fff; color: var(--fgn-ink); }

/* "voir plus" : toggle (revele/replie, bouton toujours visible) */
.franck-gamme-neuve__grid.is-expanded .franck-gamme-neuve__card.is-collapsed { display: flex; }

/* === Alignement du contenu des cartes === */
.franck-gamme-neuve__card { display: flex; flex-direction: column; }
.franck-gamme-neuve__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.franck-gamme-neuve__badges { min-height: 54px; align-content: flex-end; }
.franck-gamme-neuve__energy { margin-top: auto; }

/* Badge largeur auto — motorisations */
.franck-gamme-neuve__badge {
    width: auto;
    min-width: 0;
    max-width: none;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
}