/* ==========================================================================
   Pneus Point S — pages publiques /pneus et /pneus/ma-selection

   Toutes les couleurs passent par les variables du site garage avec une
   valeur de repli : `var(--fpg-primary, #004890)`. Le module s'aligne donc
   sur la charte du site quand `axium_site_garage` est installé, et reste
   présentable tout seul sur un autre site.

   Préfixe `aps-` : aucune collision possible avec les classes du site ou
   de Bootstrap.
   ========================================================================== */

.aps-wrap {
    color: var(--fpg-text, #28313d);
}

.aps-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.aps-container--etroit { max-width: 820px; }

.aps-section { padding: 48px 0; }
.aps-section--alt { background: var(--fpg-gray, #f9fafe); }
.aps-mt { margin-top: 40px; }
.aps-center { text-align: center; }

/* ── Hero ───────────────────────────────────────────────────────────── */

.aps-hero {
    background: linear-gradient(160deg,
        var(--fpg-dark, #232f3e) 0%,
        var(--fpg-dark-soft, #2e3d51) 100%);
    color: #fff;
    padding: 56px 0 44px;
}

.aps-hero--compact { padding: 36px 0 30px; }

.aps-hero h1 {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 700;
    margin: 10px 0 14px;
    color: #fff;
}

/* Le bleu de la charte est trop sombre sur fond sombre : on éclaircit. */
.aps-accent { color: #6fb4ff; }

.aps-kicker {
    display: inline-block;
    font-size: .8rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .82;
}

.aps-lead {
    font-size: 1.06rem;
    line-height: 1.6;
    max-width: 62ch;
    opacity: .93;
    margin: 0;
}

.aps-lead-sm {
    color: var(--fpg-text-soft, #5c6470);
    line-height: 1.6;
    max-width: 70ch;
}

.aps-hero-meta {
    margin: 16px 0 0;
    font-size: .92rem;
    opacity: .8;
}

.aps-h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 700;
    margin: 0;
}

/* Intertitre des index de fin de page : il ordonne une longue liste de
   liens, il ne doit pas rivaliser avec le titre de section. */
.aps-h3 {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0 0 12px;
}

/* ── Filtre ─────────────────────────────────────────────────────────── */

.aps-filtre {
    background: #fff;
    border: 1px solid var(--fpg-border, #e3e6ea);
    border-radius: var(--fpg-radius, 14px);
    box-shadow: var(--fpg-shadow, 0 10px 30px rgba(35, 47, 62, .12));
    padding: 20px;
    margin-top: -66px;      /* chevauche le hero : le filtre est l'action principale */
    position: relative;
    z-index: 2;
}

.aps-filtre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 12px;
    align-items: end;
}

.aps-champ { display: flex; flex-direction: column; }

.aps-champ label {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fpg-text-soft, #5c6470);
    margin-bottom: 5px;
}

.aps-champ select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fpg-border, #e3e6ea);
    border-radius: 9px;
    background: #fff;
    font-size: .96rem;
    color: var(--fpg-text, #28313d);
    min-height: 42px;
}

.aps-champ select:focus {
    outline: none;
    border-color: var(--fpg-primary, #004890);
    box-shadow: 0 0 0 3px rgba(0, 72, 144, .14);
}

/* Une option grisée signale une combinaison sans résultat plutôt que de
   disparaître : la liste garde sa hauteur et le choix reste compréhensible. */
.aps-champ select option:disabled { color: #b9bfc7; }

.aps-champ--action { justify-content: flex-end; }

.aps-aide {
    margin: 14px 0 0;
    font-size: .88rem;
    color: var(--fpg-text-soft, #5c6470);
}

/* ── Sélecteur véhicule ─────────────────────────────────────────────── */

.aps-vehicule {
    margin-top: 14px;
    border-top: 1px solid var(--fpg-border, #e3e6ea);
    padding-top: 14px;
}

.aps-lien-bouton {
    background: none;
    border: none;
    padding: 0;
    color: var(--fpg-primary, #004890);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.aps-veh-panneau { margin-top: 14px; }

.aps-veh-tailles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.aps-taille {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    border: 1px solid var(--fpg-border, #e3e6ea);
    background: var(--fpg-gray, #f9fafe);
    border-radius: 12px;
    padding: 7px 14px;
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.aps-taille:hover {
    border-color: var(--fpg-primary, #004890);
    color: var(--fpg-primary, #004890);
}

/* Monte constructeur : mise en avant, c'est le choix par défaut du client. */
.aps-taille--origine {
    background: #fff;
    border-color: var(--fpg-primary, #004890);
}

.aps-taille-note {
    font-size: .72rem;
    font-weight: 500;
    color: var(--fpg-text-soft, #5c6470);
    text-transform: none;
}

/* ── Monte différente avant / arrière ───────────────────────────────── */

.aps-taille--duo { cursor: default; gap: 6px; }

.aps-duo { display: flex; gap: 6px; }

.aps-duo-btn {
    border: 1px solid var(--fpg-border, #e3e6ea);
    background: #fff;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
}

.aps-duo-btn:hover {
    border-color: var(--fpg-primary, #004890);
    background: var(--fpg-primary, #004890);
    color: #fff;
}

/* Bandeau de suivi : il reste visible tant que les deux essieux ne sont
   pas choisis — c'est là que le client oublie la seconde taille. */
.aps-monte {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 2px solid var(--fpg-primary, #004890);
    border-radius: var(--fpg-radius, 14px);
    padding: 14px 18px;
    margin-bottom: 20px;
}

.aps-monte-txt { display: flex; flex-direction: column; gap: 2px; }

.aps-monte-txt strong {
    font-size: .95rem;
    color: var(--fpg-dark, #232f3e);
}

.aps-monte-txt span {
    font-size: .87rem;
    color: var(--fpg-text-soft, #5c6470);
}

.aps-monte-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Étiquette d'essieu sur une ligne du récapitulatif. */
.aps-essieu {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--fpg-primary, #004890);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.aps-veh-note {
    margin: 10px 0 0;
    font-size: .87rem;
    color: var(--fpg-text-soft, #5c6470);
}

/* ── Résultats ──────────────────────────────────────────────────────── */

.aps-resultats-tete {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Résultats en LIGNES pleine largeur, pas en grille de cartes : c'est ce
   qui laisse la rangée saison + étiquette européenne tenir d'un seul
   tenant. Dans une carte de 268 px, six badges se cassaient sur trois
   lignes et la comparaison entre références devenait illisible. */
.aps-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aps-liste[aria-busy="true"] { opacity: .5; }

/* La liste est remplie après le chargement : sans hauteur réservée, tout
   ce qui la suit saute quand les résultats arrivent. */
.aps-liste { min-height: 420px; }

/* Grille nommée plutôt que flex : la rangée de badges est un rang à part
   entière, ce qui permet de la faire passer sous l'image en pleine largeur
   sur mobile sans toucher au DOM. */
.aps-ref {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 190px 150px;
    grid-template-areas:
        "visuel ident  prix actions"
        "visuel badges prix actions";
    align-items: center;
    gap: 0 18px;
    background: #fff;
    border: 1px solid var(--fpg-border, #e3e6ea);
    border-radius: var(--fpg-radius, 14px);
    padding: 14px 18px;
}

.aps-ref > .aps-visuel { grid-area: visuel; }
.aps-ref > .aps-ref-ident { grid-area: ident; align-self: end; }
.aps-ref > .aps-badges { grid-area: badges; align-self: start; }
.aps-ref > .aps-prix { grid-area: prix; }
.aps-ref > .aps-actions { grid-area: actions; }

.aps-ref:hover {
    border-color: var(--fpg-primary, #004890);
    box-shadow: var(--fpg-shadow, 0 10px 30px rgba(35, 47, 62, .12));
}

/* Identité : dimension, gamme. Prend toute la place restante. */
.aps-ref-ident {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Visuel de gamme : une seule image pour toutes les tailles du profil.
   Le cadre suit le format natif des visuels de l'enseigne (bandeau ~3:2) —
   un cadre carré rognait le logo ou laissait deux bandes vides.
   Réservé même sans image, pour que les lignes restent alignées. */
.aps-visuel {
    flex: none;
    width: 118px;
    height: 80px;
    border-radius: 10px;
    background: var(--fpg-gray, #f9fafe);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.aps-visuel--vide { background: transparent; }

.aps-visuel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.aps-dim {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 1.18rem;
    font-weight: 700;
    margin: 0;
    color: var(--fpg-dark, #232f3e);
}

.aps-gamme {
    margin: 2px 0 0;
    font-size: .88rem;
    color: var(--fpg-text-soft, #5c6470);
}

/* Une seule ligne en écran large : les badges sont la signature visuelle
   de la référence, l'alignement se lit d'une ligne à l'autre. Sur mobile
   ils passent à la ligne (rang pleine largeur sous l'image). */
.aps-badges {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.aps-badges::-webkit-scrollbar { display: none; }

.aps-badges:empty { display: none; }

/* Une seule rangée : saison, étiquette européenne et particularités
   techniques. Même hauteur, même rythme — l'œil balaie la ligne d'un coup
   au lieu de sauter entre deux blocs de mise en forme différente. */
.aps-bdg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .01em;
    background: var(--fpg-gray, #f9fafe);
    border: 1px solid var(--fpg-border, #e3e6ea);
    color: var(--fpg-text-soft, #5c6470);
    white-space: nowrap;
}

.aps-bdg-picto {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.aps-bdg--ete    { background: #fff4e0; border-color: #f6d9a8; color: #8a5b00; }
.aps-bdg--4s     { background: #e7f3ea; border-color: #bcdcc4; color: #21603a; }
.aps-bdg--hiver  { background: #e8f1fb; border-color: #bcd6f0; color: #14487e; }

/* Étiquette européenne : la lettre garde sa couleur réglementaire, le
   libellé reste neutre pour ne pas noyer le code couleur. */
.aps-bdg--eco {
    background: #fff;
    padding-left: 3px;
    font-weight: 600;
}

.aps-bdg-classe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    font-size: .78rem;
    font-weight: 800;
}

.aps-bdg--bruit {
    background: var(--fpg-dark, #232f3e);
    border-color: var(--fpg-dark, #232f3e);
    color: #fff;
    font-weight: 600;
}

.aps-bdg--bruit b { font-weight: 800; }

.aps-bdg--tech {
    background: #fff;
    text-transform: uppercase;
    font-size: .71rem;
}

.aps-prix {
    flex: none;
    width: 190px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 18px;
    border-left: 1px solid var(--fpg-border, #e3e6ea);
}

.aps-prix-ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: .88rem;
    color: var(--fpg-text-soft, #5c6470);
}

.aps-prix-ligne b { color: var(--fpg-dark, #232f3e); font-size: 1rem; }

.aps-prix-ligne--fort b {
    font-size: 1.16rem;
    color: var(--fpg-primary, #004890);
}

.aps-pose {
    margin: 4px 0 0;
    font-size: .8rem;
    color: var(--fpg-text-soft, #5c6470);
}

.aps-actions {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 150px;
}

.aps-actions .aps-btn { width: 100%; }

.aps-vide {
    text-align: center;
    padding: 34px 20px;
    color: var(--fpg-text-soft, #5c6470);
}

.aps-mention {
    margin-top: 22px;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--fpg-text-soft, #5c6470);
}

/* ── Boutons ────────────────────────────────────────────────────────── */

.aps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: .94rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.aps-btn--primary {
    background: var(--fpg-primary, #004890);
    color: #fff;
}

.aps-btn--primary:hover {
    background: var(--fpg-primary-dark, #003a73);
    color: #fff;
}

.aps-btn--outline {
    background: #fff;
    border-color: var(--fpg-border, #e3e6ea);
    color: var(--fpg-dark, #232f3e);
}

.aps-btn--outline:hover {
    border-color: var(--fpg-primary, #004890);
    color: var(--fpg-primary, #004890);
}

.aps-btn--ghost {
    background: var(--fpg-gray, #f9fafe);
    border-color: var(--fpg-border, #e3e6ea);
    color: var(--fpg-text-soft, #5c6470);
}

.aps-btn--sm { padding: 8px 13px; font-size: .87rem; }
.aps-btn--lg { padding: 14px 24px; font-size: 1rem; }

/* ── Fiche d'une référence ──────────────────────────────────────────── */

.aps-fil {
    font-size: .86rem;
    color: var(--fpg-text-soft, #5c6470);
    margin-bottom: 18px;
}

/* Souligné, pas seulement coloré : un lien qui ne se distingue que par sa
   couleur est invisible pour un daltonien. */
.aps-fil a { color: var(--fpg-primary, #004890); text-decoration: underline; }

.aps-fiche {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}

.aps-fiche-visuel {
    flex: none;
    width: 420px;
    max-width: 100%;
}

/* Image entière, jamais rognée : le visuel de l'enseigne porte le logo et
   le nom de gamme, les couper vide le visuel de son identité. */
#aps-vue-principale {
    width: 100%;
    height: auto;
    display: block;
    background: var(--fpg-gray, #f9fafe);
    border-radius: var(--fpg-radius, 14px);
}

.aps-vignettes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.aps-vignette {
    width: 76px;
    height: 54px;
    padding: 2px;
    border: 2px solid var(--fpg-border, #e3e6ea);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}

.aps-vignette img { width: 100%; height: 100%; object-fit: contain; }

.aps-vignette--active { border-color: var(--fpg-primary, #004890); }

.aps-fiche-corps { flex: 1 1 320px; min-width: 0; }

.aps-fiche-titre {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    margin: 0;
    color: var(--fpg-dark, #232f3e);
}

.aps-fiche-gamme {
    margin: 4px 0 14px;
    font-size: 1rem;
    color: var(--fpg-text-soft, #5c6470);
}

.aps-fiche-prix {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--fpg-gray, #f9fafe);
    border-radius: var(--fpg-radius, 14px);
}

.aps-actions--fiche {
    flex-direction: row;
    width: auto;
    margin-top: 18px;
}

/* Chaque section de la fiche est un bloc identifiable : sur fond blanc et
   sans cadre, caractéristiques et autres tailles se confondaient avec le
   descriptif au-dessus. */
.aps-fiche-texte, .aps-fiche-carac,
.aps-fiche-liens, .aps-fiche-unique { margin-top: 28px; }

.aps-texte-unique {
    line-height: 1.7;
    color: var(--fpg-text, #28313d);
    max-width: 72ch;
    margin: 14px 0 0;
}

.aps-texte-unique a {
    color: var(--fpg-primary, #004890);
    text-decoration: underline;
}

.aps-bloc {
    background: var(--fpg-gray, #f9fafe);
    border: 1px solid var(--fpg-border, #e3e6ea);
    border-radius: var(--fpg-radius, 14px);
    padding: 24px 26px;
}

.aps-bloc > .aps-h2 {
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 2px solid var(--fpg-primary, #004890);
    display: inline-block;
}

.aps-fiche-texte p {
    line-height: 1.7;
    color: var(--fpg-text, #28313d);
    max-width: 72ch;
}

/* Caractéristiques en paires libellé/valeur. Fond blanc sur le gris du
   bloc : les lignes se détachent au lieu de flotter. */
.aps-carac {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px 16px;
    margin: 18px 0 0;
}

.aps-carac > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--fpg-border, #e3e6ea);
    border-radius: 9px;
}

.aps-carac dt { color: var(--fpg-text-soft, #5c6470); font-size: .88rem; }

.aps-carac dd {
    margin: 0;
    font-weight: 700;
    font-size: .95rem;
    text-align: right;
    color: var(--fpg-dark, #232f3e);
}

/* Autres tailles : de vraies pastilles cliquables, prix bien lisible. */
.aps-tailles-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.aps-tailles-liens .aps-taille {
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-color: var(--fpg-border, #e3e6ea);
    padding: 10px 16px;
    gap: 2px;
}

.aps-tailles-liens .aps-taille:hover {
    border-color: var(--fpg-primary, #004890);
    box-shadow: var(--fpg-shadow, 0 10px 30px rgba(35, 47, 62, .12));
}

.aps-tailles-liens .aps-taille-note {
    color: var(--fpg-primary, #004890);
    font-weight: 700;
    font-size: .82rem;
}

/* Lien discret vers la fiche, posé à la suite de la dimension : il ne doit
   pas concurrencer le bouton d'achat, qui reste l'action principale. */
.aps-lien-detail {
    margin-left: 12px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--fpg-primary, #004890);
    text-decoration: underline;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Récapitulatif ──────────────────────────────────────────────────── */

.aps-recap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aps-visuel--sm { width: 58px; height: 58px; border-radius: 8px; }

/* Flex et non grille : la vignette est facultative, une grille à colonnes
   fixes décalerait toute la ligne quand la gamme n'a pas encore d'image. */
.aps-recap-ligne {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--fpg-border, #e3e6ea);
    border-radius: var(--fpg-radius, 14px);
    padding: 16px 44px 16px 18px;
}

.aps-recap-desc { flex: 1 1 200px; min-width: 0; }

.aps-recap-desc h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fpg-dark, #232f3e);
}

.aps-recap-desc p {
    margin: 2px 0 0;
    font-size: .86rem;
    color: var(--fpg-text-soft, #5c6470);
}

.aps-recap-qte { display: flex; flex-direction: column; }

.aps-recap-qte label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fpg-text-soft, #5c6470);
    margin-bottom: 4px;
}

.aps-recap-qte select {
    padding: 7px 10px;
    border: 1px solid var(--fpg-border, #e3e6ea);
    border-radius: 8px;
    background: #fff;
    min-height: 38px;
}

.aps-recap-prix { text-align: right; }

.aps-recap-prix div {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    font-size: .88rem;
    color: var(--fpg-text-soft, #5c6470);
}

.aps-recap-prix b { color: var(--fpg-dark, #232f3e); min-width: 78px; }

.aps-suppr {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: #b9bfc7;
    cursor: pointer;
}

.aps-suppr:hover { color: #c0392b; }

.aps-total {
    margin-top: 18px;
    background: var(--fpg-gray, #f9fafe);
    border: 1px solid var(--fpg-border, #e3e6ea);
    border-radius: var(--fpg-radius, 14px);
    padding: 18px;
}

.aps-total-ligne {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: .95rem;
    color: var(--fpg-text-soft, #5c6470);
}

.aps-total-ligne b { color: var(--fpg-dark, #232f3e); }

.aps-total-ligne--final {
    border-top: 2px solid var(--fpg-border, #e3e6ea);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fpg-dark, #232f3e);
}

.aps-total-ligne--final b {
    font-size: 1.35rem;
    color: var(--fpg-primary, #004890);
}

/* ── Offres associées ───────────────────────────────────────────────── */

.aps-offres {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.aps-offre {
    background: #fff;
    border: 1px solid var(--fpg-border, #e3e6ea);
    border-radius: var(--fpg-radius, 14px);
    padding: 16px 18px;
}

.aps-offre:has(.aps-offre-case:checked) {
    border-color: var(--fpg-primary, #004890);
    box-shadow: 0 0 0 3px rgba(0, 72, 144, .1);
}

.aps-offre-tete {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.aps-offre-case { width: 19px; height: 19px; flex: none; cursor: pointer; }

.aps-offre-titre {
    flex: 1;
    font-weight: 700;
    color: var(--fpg-dark, #232f3e);
}

.aps-offre-prix {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}

.aps-prix-barre { color: #b9bfc7; font-size: .88rem; }

.aps-offre-prix b {
    font-size: 1.16rem;
    color: var(--fpg-primary, #004890);
}

.aps-offre-accroche {
    margin: 8px 0 0 31px;
    font-size: .89rem;
    color: var(--fpg-text-soft, #5c6470);
}

.aps-offre-detail { margin: 10px 0 0 31px; }

.aps-offre-detail summary {
    cursor: pointer;
    font-size: .87rem;
    font-weight: 600;
    color: var(--fpg-primary, #004890);
}

.aps-offre-detail ul {
    margin: 10px 0 0;
    padding-left: 20px;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--fpg-text-soft, #5c6470);
}

.aps-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.aps-cta .aps-btn { flex: 1 1 240px; }

/* ── Mobile ─────────────────────────────────────────────────────────── */

/* En dessous de 900 px, les quatre colonnes d'une ligne ne tiennent plus :
   la référence se replie — visuel et identité côte à côte, puis les
   étiquettes en rang pleine largeur sous l'image (elles débordaient de la
   colonne identité et obligeaient à faire défiler), puis prix et boutons. */
@media (max-width: 900px) {
    .aps-ref {
        position: relative;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "visuel ident"
            "badges badges"
            "prix prix"
            "actions actions";
        gap: 10px 14px;
    }

    /* Le lien fiche quitte le fil du titre pour le coin supérieur droit :
       inline, il cassait l'alignement du titre sur le visuel dès que la
       dimension pliait. L'identité se réserve la place à droite pour ne
       jamais passer dessous. */
    .aps-ref .aps-lien-detail {
        position: absolute;
        top: 13px;
        right: 16px;
        margin-left: 0;
    }

    /* La saison rejoint le coin droit, sous le lien fiche : c'est le seul
       badge qui qualifie le pneu d'un mot, il gagne à être vu sans balayer
       la rangée du bas (qui garde 3PMSF, étiquette UE et technique). */
    .aps-ref .aps-bdg--ete,
    .aps-ref .aps-bdg--hiver,
    .aps-ref .aps-bdg--4s {
        position: absolute;
        top: 36px;
        right: 16px;
    }

    .aps-ref > .aps-ref-ident {
        align-self: center;
        padding-right: 104px;
    }

    .aps-prix {
        width: auto;
        padding-left: 0;
        padding-top: 12px;
        border-left: none;
        border-top: 1px solid var(--fpg-border, #e3e6ea);
    }

    .aps-actions {
        flex-direction: row;
        width: auto;
    }

    .aps-actions .aps-btn { flex: 1; }
}

@media (max-width: 768px) {
    .aps-filtre { margin-top: 0; }
    .aps-hero { padding: 40px 0 32px; }
    .aps-section { padding: 32px 0; }

    .aps-visuel { width: 92px; height: 62px; }

    .aps-recap-ligne {
        gap: 12px;
    }

    .aps-recap-qte, .aps-recap-prix { flex: 1 1 100%; }

    .aps-recap-prix { text-align: left; }
    .aps-recap-prix div { justify-content: flex-start; }
    .aps-cta .aps-btn { flex: 1 1 100%; }
}

/* Écran étroit : l'étiquette européenne se resserre sur sa lettre colorée
   (le libellé complet reste en title) pour que la rangée de badges tienne
   d'un seul tenant — elle défile au doigt si la référence en porte trop. */
@media (max-width: 640px) {
    .aps-bdg-lib { display: none; }
    .aps-bdg--eco { padding-right: 3px; }
}

/* Liste de dimensions compatibles : beaucoup de valeurs courtes, on les
   laisse respirer plutôt que de forcer une colonne étroite. */
.aps-dim-liste {
    font-weight: 500 !important;
    font-size: .82rem !important;
    line-height: 1.6;
    text-align: left !important;
    color: var(--fpg-text-soft, #5c6470) !important;
}

.aps-carac > div:has(.aps-dim-liste) {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* ── Colonne latérale (sélecteur d'affectation chaînes) ─────────────── */

.aps-avec-lateral {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.aps-lateral-corps { flex: 1 1 auto; min-width: 0; }

/* Collante : le client fait défiler les modèles tout en gardant sa
   dimension sous les yeux. */
.aps-lateral {
    flex: none;
    width: 268px;
    position: sticky;
    top: 20px;
    background: #fff;
    border: 2px solid var(--fpg-primary, #004890);
    border-radius: var(--fpg-radius, 14px);
    padding: 18px;
}

.aps-lateral[hidden] { display: none; }

.aps-lateral-titre {
    margin: 0 0 4px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--fpg-dark, #232f3e);
}

.aps-lateral-aide {
    margin: 0 0 14px;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--fpg-text-soft, #5c6470);
}

.aps-lateral .aps-champ { margin-bottom: 10px; }

.aps-lateral-res {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--fpg-border, #e3e6ea);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aps-lateral-trouve {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: var(--fpg-gray, #f9fafe);
    border-radius: 9px;
}

.aps-lateral-trouve strong {
    font-size: .88rem;
    color: var(--fpg-dark, #232f3e);
}

.aps-lateral-trouve span {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fpg-primary, #004890);
}

.aps-lateral-trouve .aps-btn { margin-top: 4px; }

.aps-lateral-vide {
    margin: 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--fpg-text-soft, #5c6470);
}

/* Sous 900 px la colonne quitte le flux : elle ne vit plus qu'en panneau
   posé sur le bas d'écran, ouvert par le bouton flottant. */
@media (max-width: 900px) {
    .aps-avec-lateral { flex-direction: column; }
    .aps-lateral { display: none; width: 100%; position: static; }
}

/* ── Accès mobile aux filtres : panneau posé sur le bas d'écran ─────── */

/* Bouton fixe en bas d'écran : sur téléphone les filtres quittent le flux,
   ce bouton les rouvre à portée de pouce. */
.aps-flottant {
    position: fixed;
    left: 50%;
    /* Posé au-dessus de la barre CTA du site garage (Contact | Tél | RDV,
       ~58 px), présente sur toutes ces pages en mobile. */
    bottom: calc(70px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border: none;
    border-radius: 999px;
    background: var(--fpg-primary, #004890);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(35, 47, 62, .28);
    cursor: pointer;
}

.aps-flottant[hidden] { display: none; }

.aps-flottant-picto { font-size: 1.15rem; line-height: 1; }

/* La barre flottante du site (Rechercher + Mon RDV, z 1055) occupe le même
   emplacement que les accès filtres ci-dessus (bottom 70px, centrés) et les
   recouvrait entièrement sur téléphone. Sur les pages catalogue (pneus et
   boutique — seules à charger cette feuille) on l'efface en mobile : le
   filtre reprend la main. Desktop non concerné (la barre part en bas-droite
   à partir de 901px). */
@media (max-width: 900px) {
    .fpg-barre-outils { display: none !important; }
}

/* Plusieurs accès flottants côte à côte (boutique : filtre + sélecteur).
   La barre porte le positionnement, les boutons redeviennent des éléments
   de flux — et peuvent se serrer sur les petits écrans. */
.aps-flottants {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(70px + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    pointer-events: none;
}

.aps-flottants .aps-flottant {
    position: static;
    transform: none;
    pointer-events: auto;
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    padding: 13px 18px;
}

@media (min-width: 901px) {
    .aps-flottants { display: none; }
}

@media (min-width: 901px) {
    /* En écran large la colonne est déjà visible : le bouton n'a aucun sens. */
    .aps-flottant { display: none !important; }
}

/* Voile sous le panneau : matérialise la superposition et ferme au toucher.
   Au-dessus de la barre CTA du site garage (z-index 1050), qui doit passer
   sous le panneau ouvert. */
.aps-voile {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(35, 47, 62, .45);
}

.aps-voile[hidden] { display: none; }

/* Croix et bouton « Voir les résultats » : n'existent que dans le panneau
   mobile — l'écran large garde ses filtres en place dans la page. */
.aps-sheet-fermer, .aps-sheet-voir { display: none; }

@keyframes aps-sheet-monte {
    from { transform: translateY(48px); opacity: .5; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 900px) {
    /* La grille de filtres pneus ne tient pas sur un petit écran : elle
       quitte le flux et ne s'affiche plus qu'en panneau. */
    .aps-filtre--mobile { display: none; }

    .aps-filtre--mobile.aps-sheet--ouvert,
    .aps-lateral.aps-sheet--ouvert {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* La colonne sticky desktop pose `top: 20px` : combiné à `bottom: 0`
           en fixed, le panneau s'étirerait sur tout l'écran. */
        top: auto;
        z-index: 1070;
        width: auto;
        margin: 0;
        max-height: 84vh;
        max-height: 84dvh;
        overflow-y: auto;
        border: none;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -14px 40px rgba(35, 47, 62, .35);
        padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
        animation: aps-sheet-monte .22s ease-out;
    }

    .aps-sheet--ouvert .aps-sheet-fermer {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 50%;
        background: var(--fpg-gray, #f9fafe);
        color: var(--fpg-dark, #232f3e);
        font-size: 1.05rem;
        line-height: 1;
        cursor: pointer;
    }

    /* Collé au bas du panneau pendant son défilement : la sortie vers les
       résultats reste toujours sous le pouce. */
    .aps-sheet--ouvert .aps-sheet-voir {
        display: block;
        width: 100%;
        margin-top: 16px;
        position: sticky;
        bottom: 0;
    }

    /* Le bouton flotte au-dessus du bas de liste : on dégage la place. */
    .aps-liste { padding-bottom: 70px; }
}

/* ── Chaussettes proposées d'après les pneus du panier ──────────────── */

.aps-upsell-chaine { margin-top: 22px; }

.aps-upsell-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

.aps-upsell-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--fpg-border, #e3e6ea);
    border-radius: 10px;
    padding: 12px 14px;
}

.aps-upsell-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aps-upsell-txt strong {
    font-size: .92rem;
    color: var(--fpg-dark, #232f3e);
}

.aps-upsell-txt span {
    font-size: .82rem;
    color: var(--fpg-text-soft, #5c6470);
}

.aps-upsell-prix b {
    font-size: 1.05rem;
    color: var(--fpg-primary, #004890);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .aps-upsell-item { flex-wrap: wrap; }
    .aps-upsell-item .aps-btn { flex: 1 1 100%; }
}

/* ── Marquage loi Montagne (3PMSF) ──────────────────────────────────── */

/* Bandeau assumé : c'est l'argument qui déclenche l'achat, et le
   pictogramme est ce que le client cherchera sur le produit. */
.aps-loi-montagne {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0 4px;
    padding: 14px 16px;
    background: #e8f1fb;
    border: 2px solid var(--fpg-primary, #004890);
    border-radius: var(--fpg-radius, 14px);
}

.aps-3pmsf {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background: #fff;
    color: var(--fpg-primary, #004890);
}

.aps-loi-montagne > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.aps-loi-montagne strong {
    font-size: 1rem;
    color: var(--fpg-dark, #232f3e);
}

.aps-loi-montagne span {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--fpg-text-soft, #5c6470);
}

@media (max-width: 640px) {
    .aps-loi-montagne { align-items: flex-start; }
}

/* Badge 3PMSF : premier de la rangée, en bleu plein. C'est le critère qui
   décide un achat avant un départ au ski, pas une mention technique. */
.aps-bdg--pmsf {
    background: var(--fpg-primary, #004890);
    border-color: var(--fpg-primary, #004890);
    color: #fff;
    gap: 5px;
}

.aps-bdg--pmsf svg { flex: none; }