/* =====================================================================
   La Petite Modeuse : formats pratiques
   Essayages, gestes d'entretien, atelier d'entretien (vitrine), symboles d'entretien.
   Même vocabulaire que le magazine : l'axe rouge laque, les numéros posés sur
   la ligne, l'Imbue calé contre l'axe, le rose poudré en aplat, angles vifs,
   aucune ombre. Classes lpm-fx-.
   ===================================================================== */

:root {
    --lpm-fx-ligne: 45px;                                   /* seconde ligne de la barre */
    --lpm-fx-haut: calc(92px + var(--lpm-fx-ligne));        /* hauteur réelle de la barre */
}
.admin-bar { --lpm-fx-haut: calc(124px + var(--lpm-fx-ligne)); }

/* ---------------------------------------------------------------------
   Barre : la seconde ligne, coupée par l'axe comme le wordmark
   --------------------------------------------------------------------- */

.lpm-nav-formats { display: none; }

.lpm-fx-barre {
    border-top: 1px solid var(--lpm-filet);
    background: var(--lpm-fond);
}
.lpm-fx-barre-int {
    height: 44px;
    display: grid;
    grid-template-columns: 1fr calc(2 * var(--lpm-bord)) 1fr;
    align-items: center;
}
.lpm-fx-barre-g,
.lpm-fx-barre-d {
    display: flex;
    gap: 28px;
    font-stretch: 80%;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
.lpm-fx-barre-g { grid-column: 1; justify-content: flex-end; }
.lpm-fx-barre-d { grid-column: 3; justify-content: flex-start; }
.lpm-fx-barre a { color: var(--lpm-encre); }
.lpm-fx-barre a:hover,
.lpm-fx-barre a[aria-current="page"] { color: var(--lpm-accent); }
.lpm-fx-barre a[aria-current="page"] { box-shadow: inset 0 -1px 0 currentColor; padding-bottom: 3px; }

/* ---------------------------------------------------------------------
   Communs
   --------------------------------------------------------------------- */

.lpm-fx-coiffe-titre { font-size: clamp(2.375rem, 3.8vw, 3.5rem); line-height: 1; }
.lpm-fx-coiffe .lpm-coiffe-desc p { margin: 0; }

.lpm-fx-h2 {
    font-family: var(--lpm-display);
    font-size: 2.125rem;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.005em;
    text-wrap: balance;
}
.lpm-fx-num {
    display: inline-block;
    margin-right: .4em;
    color: var(--lpm-accent);
    font-weight: 300;
    font-variant-numeric: lining-nums tabular-nums;
}
.lpm-fx-sous {
    margin: 28px 0 12px;
    font-family: var(--lpm-texte);
    font-stretch: 80%;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lpm-gris);
}
.lpm-fx-note {
    margin-top: 14px;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--lpm-gris);
}
.lpm-fx-signature {
    margin-top: 56px;
    padding-top: 18px;
    border-top: 1px solid var(--lpm-encre);
    font-size: .875rem;
    font-stretch: 88%;
    color: var(--lpm-gris);
}
.lpm-fx-liens a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--lpm-filet); }
.lpm-fx-liens a:hover { text-decoration-color: currentColor; }
.lpm-fx-sources { font-size: .9375rem; }
.lpm-fx-sources a { overflow-wrap: anywhere; }

.lpm-fx-sec { margin-top: 64px; scroll-margin-top: calc(var(--lpm-fx-haut) + 24px); }
.lpm-fx-sec > p:not(.lpm-fx-note),
.lpm-fx-corps > section > p:not(.lpm-fx-note):not(.lpm-label) { margin-top: 1em; font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }
.lpm-fx-sec > .lpm-fx-h2 + p { margin-top: 18px; }
.lpm-fx-sec .lpm-liste { margin-top: 18px; }

/* L'aplat rose poudré : « En bref », matériel, points à vérifier. */
.lpm-fx-bref {
    padding: 30px 34px 22px;
    background: var(--lpm-poudre);
    scroll-margin-top: calc(var(--lpm-fx-haut) + 24px);
}
.lpm-fx-bref .lpm-label { color: #5E5A57; margin-bottom: 8px; }
.lpm-fx-bref .lpm-liste { margin-top: 18px; }
.lpm-fx-bref .lpm-liste li { margin-bottom: .7em; line-height: 1.55; }
.lpm-fx-sec.lpm-fx-bref { margin-top: 64px; }

/* Tableaux : le défilement horizontal reste dans le cadre, jamais sur la page. */
.lpm-fx-table-wrap {
    margin-top: 22px;
    max-width: 100%;
    overflow-x: auto;
    border-top: 1px solid var(--lpm-encre);
    -webkit-overflow-scrolling: touch;
}
.lpm-fx-table-wrap:focus-visible { outline-offset: 4px; }
.lpm-fx-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: .9375rem;
    line-height: 1.45;
}
.lpm-fx-table caption {
    caption-side: bottom;
    padding-top: 10px;
    text-align: left;
    font-size: .8125rem;
    color: var(--lpm-gris);
}
.lpm-fx-table th,
.lpm-fx-table td {
    padding: 12px 14px 11px 0;
    border-bottom: 1px solid var(--lpm-filet);
    text-align: left;
    vertical-align: top;
}
.lpm-fx-table thead th {
    font-family: var(--lpm-display);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.15;
    border-bottom-color: var(--lpm-encre);
}
.lpm-fx-table thead th a { color: var(--lpm-accent); }
.lpm-fx-table thead th a:hover { color: var(--lpm-encre); }
.lpm-fx-table tbody th {
    font-stretch: 88%;
    font-weight: 500;
    color: var(--lpm-encre);
    white-space: nowrap;
}
.lpm-fx-table--fiche { min-width: 0; }
.lpm-fx-table--fiche tbody th { width: 36%; color: var(--lpm-gris); font-weight: 400; }

/* Choix selon le cas */
.lpm-fx-cas { margin: 22px 0 0; border-top: 1px solid var(--lpm-encre); }
.lpm-fx-cas-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 24px;
    padding: 16px 0 15px;
    border-bottom: 1px solid var(--lpm-filet);
}
.lpm-fx-cas dt { font-family: var(--lpm-display); font-size: 1.25rem; line-height: 1.2; }
.lpm-fx-cas dd { margin: 0; line-height: 1.6; }

/* ---------------------------------------------------------------------
   Fiches de l'atelier : silhouettes 2:3, comme les sorties
   --------------------------------------------------------------------- */

.lpm-fx-grille {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px 32px;
}
.lpm-fx-grille--serree { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; margin-top: 26px; }
.lpm-fx-carte-lien { display: flex; flex-direction: column; gap: 6px; color: var(--lpm-encre); }
.lpm-fx-carte-visuel {
    display: grid;
    place-items: center;
    aspect-ratio: 2 / 3;
    margin-bottom: 10px;
    background: var(--lpm-poudre);
    color: var(--lpm-accent);
    overflow: hidden;
    position: relative;
}
/* L'axe traverse chaque silhouette, de haut en bas. */
.lpm-fx-carte-visuel::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    background: var(--lpm-accent);
    opacity: .35;
}
.lpm-fx-carte-visuel--photo::before { display: none; }
.lpm-fx-carte-visuel img { width: 100%; height: 100%; object-fit: cover; }
.lpm-fx-picto-grand { position: relative; width: 44%; height: auto; background: var(--lpm-poudre); padding: 6px 0; transition: transform .3s ease; }
.lpm-fx-carte-nom {
    font-family: var(--lpm-display);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.12;
    text-wrap: balance;
    transition: color .2s ease;
}
.lpm-fx-grille--serree .lpm-fx-carte-nom { font-size: 1.1875rem; }
.lpm-fx-carte-type { font-size: .875rem; line-height: 1.45; color: var(--lpm-gris); }
.lpm-fx-carte-stock {
    margin-top: 4px;
    font-stretch: 80%;
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lpm-gris);
}
.lpm-fx-carte-lien:hover .lpm-fx-carte-nom { color: var(--lpm-accent); }
.lpm-fx-carte-lien:hover .lpm-fx-picto-grand { transform: translateY(-4px); }

/* ---------------------------------------------------------------------
   Index des essayages : le programme, titre contre l'axe, numéro sur la ligne
   --------------------------------------------------------------------- */

.lpm-fx-ix { padding: 8px 0 120px; }
.lpm-fx-ix-liste { border-top: 1px solid var(--lpm-encre); position: relative; z-index: 1; }
.lpm-fx-ix-ligne {
    display: grid;
    grid-template-columns: 1fr calc(2 * var(--lpm-bord)) 1fr;
    align-items: start;
    padding: 36px 0 34px;
    border-bottom: 1px solid var(--lpm-filet);
}
.lpm-fx-ix-titre {
    grid-column: 1;
    text-align: right;
    font-family: var(--lpm-display);
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.04;
    text-wrap: balance;
}
.lpm-fx-ix-num {
    grid-column: 2;
    justify-self: center;
    padding: 6px 0;
    background: var(--lpm-fond);
    font-family: var(--lpm-display);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    color: var(--lpm-accent);
    font-variant-numeric: lining-nums tabular-nums;
}
.lpm-fx-ix-corps { grid-column: 3; max-width: 440px; }
.lpm-fx-ix-accroche { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--lpm-gris); }
.lpm-fx-ix-compte { margin-top: 14px; color: var(--lpm-encre); }
.lpm-fx-ix-ligne:hover .lpm-fx-ix-titre a { color: var(--lpm-accent); }

/* ---------------------------------------------------------------------
   Index des gestes : de part et d'autre de l'axe, sans image
   --------------------------------------------------------------------- */

.lpm-fx-tx { padding: 8px 0 120px; }
.lpm-fx-tx-geste {
    position: relative;
    display: grid;
    grid-template-columns: 1fr calc(2 * var(--lpm-bord)) 1fr;
    min-height: 220px;
}
.lpm-fx-tx-geste + .lpm-fx-tx-geste { margin-top: -40px; }
.lpm-fx-tx-geste .lpm-pas { top: 0; }
.lpm-fx-tx-texte { max-width: 430px; padding-top: 18px; }
.lpm-fx-tx-geste--g .lpm-fx-tx-texte { grid-column: 1; justify-self: end; text-align: right; }
.lpm-fx-tx-geste--d .lpm-fx-tx-texte { grid-column: 3; justify-self: start; }
.lpm-fx-tx-titre {
    margin-top: 10px;
    font-family: var(--lpm-display);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.08;
    text-wrap: balance;
}
.lpm-fx-tx-accroche { margin-top: 12px; font-size: 1rem; line-height: 1.55; color: var(--lpm-gris); }
.lpm-fx-tx-meta { margin-top: 14px; color: var(--lpm-encre); }
.lpm-fx-tx-geste:hover .lpm-pas { background: var(--lpm-accent); }
.lpm-fx-tx-geste:hover .lpm-pas-n,
.lpm-fx-tx-geste:hover .lpm-pas-l { color: #fff; }

/* ---------------------------------------------------------------------
   Essayage et geste : sommaire collant sous la barre + colonne
   --------------------------------------------------------------------- */

.lpm-fx-gd,
.lpm-fx-tu { padding: 24px 0 112px; border-top: 1px solid var(--lpm-filet); }
.lpm-fx-gd-grille {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
}
.lpm-fx-sommaire {
    position: sticky;
    top: calc(var(--lpm-fx-haut) + 24px);
    max-height: calc(100vh - var(--lpm-fx-haut) - 48px);
    overflow-y: auto;
    padding-top: 40px;
}
.lpm-fx-sommaire .lpm-label { padding-bottom: 12px; border-bottom: 1px solid var(--lpm-encre); }
.lpm-fx-sommaire li { border-bottom: 1px solid var(--lpm-filet); }
.lpm-fx-sommaire a {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 8px;
    padding: 10px 0 9px;
    font-size: .875rem;
    font-stretch: 92%;
    line-height: 1.35;
}
.lpm-fx-sommaire-n {
    font-family: var(--lpm-display);
    font-size: 1rem;
    color: var(--lpm-accent);
    font-variant-numeric: lining-nums tabular-nums;
}
.lpm-fx-corps { max-width: 720px; padding-top: 40px; }
.lpm-fx-corps > :first-child { margin-top: 0; }

/* Geste : le relevé, puis les étapes reliées par un filet de laque */
.lpm-fx-releve {
    display: flex;
    flex-wrap: wrap;
    margin: 16px 0 0;
    border-bottom: 1px solid var(--lpm-filet);
}
.lpm-fx-releve > div { padding: 14px 32px 16px 0; margin-right: 32px; border-right: 1px solid var(--lpm-filet); }
.lpm-fx-releve > div:last-child { border-right: 0; }
.lpm-fx-releve dt {
    font-stretch: 80%;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lpm-gris);
}
.lpm-fx-releve dd { margin: 6px 0 0; font-family: var(--lpm-display); font-size: 1.375rem; line-height: 1.2; }

.lpm-fx-etapes { margin-top: 56px; }
/* Le filet de laque relie les numéros, étape après étape. */
.lpm-fx-etape::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 27px;
    width: 1px;
    background: var(--lpm-accent);
}
.lpm-fx-etape:last-child::before { bottom: auto; height: 24px; }
.lpm-fx-etape {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 24px;
    padding-bottom: 40px;
    scroll-margin-top: calc(var(--lpm-fx-haut) + 24px);
}
.lpm-fx-etape-n {
    position: relative;
    z-index: 1;
    justify-self: center;
    align-self: start;
    padding: 4px 0 6px;
    background: var(--lpm-fond);
    font-family: var(--lpm-display);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    color: var(--lpm-accent);
    font-variant-numeric: lining-nums tabular-nums;
}
.lpm-fx-etape-titre {
    font-family: var(--lpm-display);
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1.15;
}
.lpm-fx-etape-corps > p { margin-top: 10px; font-size: 1.0625rem; line-height: 1.7; }
.lpm-fx-attention {
    padding: 12px 16px;
    border-left: 1px solid var(--lpm-accent);
    background: var(--lpm-poudre);
    font-size: .9375rem !important;
    line-height: 1.55 !important;
}
.lpm-fx-attention strong { font-weight: 600; color: var(--lpm-accent); }
.lpm-fx-controle {
    margin-top: 16px;
    padding-top: 22px;
    border-top: 1px solid var(--lpm-encre);
    scroll-margin-top: calc(var(--lpm-fx-haut) + 24px);
}
.lpm-fx-controle p { margin-top: 14px; font-size: 1.0625rem; line-height: 1.7; }

/* ---------------------------------------------------------------------
   Atelier : onglets des rayons, puis grille
   --------------------------------------------------------------------- */

.lpm-fx-bt { padding: 24px 0 120px; border-top: 1px solid var(--lpm-filet); }
.lpm-fx-bt-rayons { display: flex; flex-wrap: wrap; gap: 8px; }
.lpm-fx-bt-rayons a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 14px 8px;
    border: 1px solid var(--lpm-filet);
    font-size: .875rem;
    font-stretch: 88%;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.lpm-fx-bt-rayons a:hover { border-color: var(--lpm-accent); }
.lpm-fx-bt-rayons a[aria-current="page"] { background: var(--lpm-accent); border-color: var(--lpm-accent); color: #fff; }
.lpm-fx-bt-n { font-family: var(--lpm-display); font-size: 1rem; color: var(--lpm-accent); }
.lpm-fx-bt-rayons a[aria-current="page"] .lpm-fx-bt-n { color: #fff; }
.lpm-fx-bt-note { max-width: 640px; margin: 22px 0 48px; }

/* ---------------------------------------------------------------------
   Fiche : la silhouette contre l'axe, les infos de l'autre côté
   --------------------------------------------------------------------- */

.lpm-fx-fp { padding: 48px 0 88px; }
.lpm-fx-fp-grille {
    display: grid;
    grid-template-columns: 1fr var(--lpm-bord) var(--lpm-bord) 1fr;
    align-items: start;
}
.lpm-fx-fp-visuel {
    grid-column: 1 / 3;
    justify-self: end;
    position: relative;
    display: grid;
    place-items: center;
    width: min(var(--lpm-sortie-l), 100%);
    aspect-ratio: 2 / 3;
    background: var(--lpm-poudre);
    color: var(--lpm-accent);
    overflow: hidden;
}
.lpm-fx-fp-visuel img { width: 100%; height: 100%; object-fit: cover; }
.lpm-fx-fp-visuel .lpm-fx-picto-grand { width: 46%; }
.lpm-fx-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 7px 10px 6px;
    background: var(--lpm-fond);
    font-stretch: 80%;
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lpm-accent);
}
.lpm-fx-badge--ligne { position: static; border: 1px solid var(--lpm-accent); }
.lpm-fx-fp-infos { grid-column: 4; max-width: 460px; padding-top: 4px; }
.lpm-fx-fp-infos .lpm-fil { margin-bottom: 20px; }
.lpm-fx-fp-titre {
    margin-top: 10px;
    font-family: var(--lpm-display);
    font-size: clamp(2.125rem, 3.2vw, 3rem);
    font-weight: 400;
    line-height: 1.02;
    text-wrap: balance;
}
.lpm-fx-fp-type { margin-top: 10px; font-size: 1rem; color: var(--lpm-gris); }
.lpm-fx-fp-resume { margin-top: 22px; font-size: .9375rem; line-height: 1.55; }
.lpm-fx-fp-prix {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--lpm-encre);
}
.lpm-fx-fp-prix-val { font-family: var(--lpm-display); font-size: 1.625rem; line-height: 1; color: var(--lpm-gris); }
.lpm-fx-fp-achat { display: flex; gap: 8px; margin-top: 18px; }
.lpm-fx-fp-achat input {
    width: 64px;
    padding: 12px 10px;
    border: 1px solid var(--lpm-filet);
    border-radius: 0;
    background: #fff;
    font: inherit;
    color: var(--lpm-gris);
}
.lpm-fx-fp-cta {
    flex: 1;
    padding: 13px 20px;
    border: 1px solid var(--lpm-filet);
    border-radius: 0;
    background: #F2F0EE;
    color: #77716C;
    font-size: .9375rem;
    font-stretch: 92%;
    cursor: not-allowed;
}
.lpm-fx-fp-dispo { margin-top: 12px; font-size: .875rem; line-height: 1.55; color: var(--lpm-gris); }
.lpm-fx-fp-meta { margin: 24px 0 0; }
.lpm-fx-fp-meta > div {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0 9px;
    border-top: 1px solid var(--lpm-filet);
}
.lpm-fx-fp-meta dt {
    padding-top: 3px;
    font-stretch: 80%;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lpm-gris);
}
.lpm-fx-fp-meta dd { margin: 0; font-size: .9375rem; }
.lpm-fx-fp-meta dd a { color: var(--lpm-accent); }

.lpm-fx-fp-suite { padding: 0 0 96px; }
.lpm-fx-onglets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 28px;
    padding: 14px 0 13px;
    border-top: 1px solid var(--lpm-encre);
    border-bottom: 1px solid var(--lpm-filet);
    font-stretch: 80%;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.lpm-fx-lecture { max-width: var(--lpm-mesure); margin-inline: auto; }
.lpm-fx-lecture > .lpm-fx-h2 { margin-top: 56px; }
.lpm-fx-lecture > p { margin-top: 1em; font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }
.lpm-fx-lecture > .lpm-fx-h2 + p { margin-top: 18px; }
.lpm-fx-voisins { border-top: 1px solid var(--lpm-filet); }

/* ---------------------------------------------------------------------
   Accueil, plan du site, suite d'article
   --------------------------------------------------------------------- */

.lpm-fx-acces { margin-top: 72px; }
.lpm-fx-acces-nom { font-size: 3rem; line-height: 1.02; }
.lpm-fx-plan-rayon {
    margin: 22px 0 10px;
    font-family: var(--lpm-display);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.15;
}
.lpm-fx-plan-rayon:first-of-type { margin-top: 0; }

.lpm-fx-suite {
    margin-top: 56px;
    padding: 26px 30px 18px;
    background: var(--lpm-poudre);
}
.lpm-fx-suite .lpm-label { color: #5E5A57; }
.lpm-fx-suite-titre {
    margin-top: 8px;
    font-family: var(--lpm-display);
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 1.1;
}
.lpm-fx-suite ul { margin-top: 14px; }
.lpm-fx-suite li { padding: 12px 0 11px; border-top: 1px solid #E5CBC2; }
.lpm-fx-suite li .lpm-rub-label { display: block; margin-bottom: 4px; }
.lpm-fx-suite li a { font-size: 1.0625rem; line-height: 1.4; }

/* ---------------------------------------------------------------------
   Symboles d'entretien
   --------------------------------------------------------------------- */

.lpm-fx-sy { padding: 40px 0 112px; border-top: 1px solid var(--lpm-filet); }
.lpm-fx-sy-grille {
    display: grid;
    grid-template-columns: 1fr calc(2 * var(--lpm-bord)) 1fr;
    align-items: start;
}
.lpm-fx-sy-form { grid-column: 1; min-width: 0; }
.lpm-fx-sy-form > .lpm-fx-h2 { text-align: right; }
.lpm-fx-sy-form > .lpm-fx-note { text-align: right; max-width: 30em; margin-left: auto; }
.lpm-fx-sy-famille {
    margin: 36px 0 0;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--lpm-encre);
    min-width: 0;
}
.lpm-fx-sy-famille legend { padding: 0; float: left; width: 100%; }
.lpm-fx-sy-famille legend + * { clear: both; }
.lpm-fx-sy-famille-nom {
    display: block;
    margin-top: 6px;
    font-family: var(--lpm-display);
    font-size: 1.75rem;
    line-height: 1.1;
}
.lpm-fx-sy-aide { clear: both; padding-top: 8px; font-size: .875rem; line-height: 1.5; color: var(--lpm-gris); }
.lpm-fx-sy-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lpm-fx-sy-option { position: relative; cursor: pointer; }
.lpm-fx-sy-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lpm-fx-sy-tuile {
    display: grid;
    place-items: center;
    width: 64px;
    height: 60px;
    border: 1px solid var(--lpm-filet);
    background: var(--lpm-fond);
    color: var(--lpm-encre);
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.lpm-fx-sy-option:hover .lpm-fx-sy-tuile { border-color: var(--lpm-accent); }
.lpm-fx-sy-option input:checked + .lpm-fx-sy-tuile {
    border-color: var(--lpm-accent);
    background: var(--lpm-poudre);
    color: var(--lpm-accent);
    box-shadow: inset 0 0 0 1px var(--lpm-accent);
}
.lpm-fx-sy-option input:focus-visible + .lpm-fx-sy-tuile { outline: 1px solid var(--lpm-accent); outline-offset: 3px; }
.lpm-fx-sy-svg { display: block; width: 44px; height: auto; }
.lpm-fx-sy-absent {
    font-stretch: 80%;
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.lpm-fx-sy-reset { margin-top: 36px; background: var(--lpm-fond); cursor: pointer; }

.lpm-fx-sy-resultat {
    grid-column: 3;
    position: sticky;
    top: calc(var(--lpm-fx-haut) + 24px);
    max-height: calc(100vh - var(--lpm-fx-haut) - 48px);
    overflow-y: auto;
    padding: 4px 0 8px;
    min-width: 0;
}
.lpm-fx-sy-resultat > .lpm-fx-h2 { margin-top: 32px; font-size: 1.75rem; }
/* Le ruban : une étiquette tissée, blanche, à bord franc. */
.lpm-fx-sy-ruban {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-height: 72px;
    margin-top: 12px;
    padding: 12px 18px;
    border: 1px solid var(--lpm-encre);
    border-left: 6px solid var(--lpm-accent);
    background: var(--lpm-fond);
    color: var(--lpm-encre);
}
.lpm-fx-sy-ruban .lpm-fx-sy-svg { width: 40px; }
.lpm-fx-sy-ruban-vide { font-size: .875rem; color: var(--lpm-gris); }
.lpm-fx-sy-ruban--mobile { display: none; }
.lpm-fx-sy-lecture { margin-top: 16px; counter-reset: lpm-sy; }
.lpm-fx-sy-lecture li {
    position: relative;
    padding: 14px 0 13px 40px;
    border-top: 1px solid var(--lpm-filet);
    font-size: .9375rem;
    line-height: 1.55;
    counter-increment: lpm-sy;
}
.lpm-fx-sy-lecture li::before {
    content: counter(lpm-sy, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 12px;
    font-family: var(--lpm-display);
    font-size: 1.25rem;
    color: var(--lpm-accent);
}
.lpm-fx-sy-lecture li .lpm-rub-label { display: block; margin-bottom: 3px; }
.lpm-fx-sy-lecture li strong { font-weight: 600; }
.lpm-fx-sy-lecture .lpm-fx-sy-lecture-vide { padding-left: 0; color: var(--lpm-gris); counter-increment: none; }
.lpm-fx-sy-lecture .lpm-fx-sy-lecture-vide::before { display: none; }

.lpm-fx-sy-ref { padding: 96px 0 104px; border-top: 1px solid var(--lpm-filet); }
.lpm-fx-sy-ref-grille {
    display: grid;
    grid-template-columns: 1fr calc(2 * var(--lpm-bord)) 1fr;
    row-gap: 56px;
    position: relative;
    z-index: 1;
}
.lpm-fx-sy-ref-bloc:nth-child(odd) { grid-column: 1; }
.lpm-fx-sy-ref-bloc:nth-child(even) { grid-column: 3; }
.lpm-fx-sy-ref-ligne {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 12px 0 11px;
    border-bottom: 1px solid var(--lpm-filet);
}
.lpm-fx-sy-ref-ligne dt { color: var(--lpm-encre); }
.lpm-fx-sy-ref-ligne dd { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--lpm-gris); }
.lpm-fx-sy-ref-ligne dd strong { display: block; color: var(--lpm-encre); font-weight: 600; }
.lpm-fx-sy-methode { padding: 0 0 112px; }
.lpm-fx-sy-methode .lpm-fx-lecture > .lpm-fx-h2:first-child { margin-top: 0; }

/* =====================================================================
   Entre-deux
   ===================================================================== */

@media (max-width: 1180px) {
    .lpm-fx-barre-g, .lpm-fx-barre-d { gap: 20px; letter-spacing: .12em; }
    .lpm-fx-gd-grille { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
    .lpm-fx-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lpm-fx-ix-titre { font-size: 1.875rem; }
    .lpm-fx-acces-nom { font-size: 2.5rem; }
}

/* =====================================================================
   Mobile : l'axe au bord gauche, tout passe à sa droite
   ===================================================================== */

@media (max-width: 899px) {
    :root { --lpm-fx-haut: 76px; }
    .admin-bar { --lpm-fx-haut: 122px; }

    /* Barre : la seconde ligne quitte l'en-tête, les formats passent dans le menu. */
    .lpm-fx-barre { display: none; }
    .lpm-nav-formats {
        display: flex;
        flex-direction: column;
        margin-top: 24px;
        padding-top: 14px;
        border-top: 1px solid var(--lpm-encre);
    }
    .lpm-nav-formats a {
        display: block;
        padding: 10px 0 9px;
        border-bottom: 1px solid var(--lpm-filet);
        font-family: var(--lpm-display);
        font-size: 1.5rem;
        line-height: 1.15;
        color: var(--lpm-encre);
    }
    .lpm-nav-formats a[aria-current="page"] { color: var(--lpm-accent); }

    .lpm-fx-coiffe-titre { font-size: 2.375rem; line-height: 1.04; }
    .lpm-fx-h2 { font-size: 1.75rem; }
    .lpm-fx-sec { margin-top: 48px; }
    .lpm-fx-sec > p:not(.lpm-fx-note),
    .lpm-fx-lecture > p,
    .lpm-fx-etape-corps > p,
    .lpm-fx-controle p { font-size: 1rem; line-height: 1.65; }
    .lpm-fx-bref { padding: 24px 20px 16px; }
    .lpm-fx-cas-ligne { grid-template-columns: 1fr; gap: 6px; }

    /* Index des essayages */
    .lpm-fx-ix { padding: 0 0 72px; }
    .lpm-fx-ix-ligne { display: block; position: relative; padding: 24px 0 22px; }
    .lpm-fx-ix-num { position: absolute; left: -35px; top: 22px; width: 30px; text-align: center; font-size: 1.375rem; }
    .lpm-fx-ix-titre { text-align: left; font-size: 1.625rem; line-height: 1.1; }
    .lpm-fx-ix-corps { margin-top: 10px; max-width: none; }
    .lpm-fx-ix-accroche { font-size: .9375rem; }

    /* Index des gestes */
    .lpm-fx-tx { padding: 0 0 72px; }
    .lpm-fx-tx-geste { display: block; min-height: 0; padding: 6px 0 26px; border-bottom: 1px solid var(--lpm-filet); }
    .lpm-fx-tx-geste + .lpm-fx-tx-geste { margin-top: 24px; }
    .lpm-fx-tx-geste .lpm-pas { left: -20px; top: 4px; }
    .lpm-fx-tx-texte,
    .lpm-fx-tx-geste--g .lpm-fx-tx-texte { max-width: none; padding-top: 0; text-align: left; }
    .lpm-fx-tx-titre { font-size: 1.625rem; }
    .lpm-fx-tx-accroche { font-size: .9375rem; }

    /* Essayage et geste : le sommaire reste en tête, il ne colle plus */
    .lpm-fx-gd,
    .lpm-fx-tu { padding: 8px 0 72px; }
    .lpm-fx-gd-grille { display: block; }
    .lpm-fx-sommaire { position: static; max-height: none; overflow: visible; padding-top: 24px; }
    .lpm-fx-corps { max-width: none; }
    .lpm-fx-releve > div { padding: 12px 18px 14px 0; margin-right: 18px; }
    .lpm-fx-releve dd { font-size: 1.125rem; }
    .lpm-fx-etapes { margin-top: 40px; }
    .lpm-fx-etape::before { left: 17px; }
    .lpm-fx-etape { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-bottom: 32px; }
    .lpm-fx-etape-n { font-size: 1.5rem; }
    .lpm-fx-etape-titre { font-size: 1.375rem; }

    /* Fiches */
    .lpm-fx-grille,
    .lpm-fx-grille--serree { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
    .lpm-fx-carte-nom,
    .lpm-fx-grille--serree .lpm-fx-carte-nom { font-size: 1.0625rem; }
    .lpm-fx-carte-type { font-size: .8125rem; }

    /* Atelier */
    .lpm-fx-bt { padding: 8px 0 72px; }
    .lpm-fx-bt-rayons a { padding: 8px 11px 7px; font-size: .8125rem; }
    .lpm-fx-bt-note { margin: 18px 0 32px; }

    /* Fiche */
    .lpm-fx-fp { padding: 24px 0 56px; }
    .lpm-fx-fp-grille { display: block; }
    .lpm-fx-fp-visuel { margin-left: -19px; width: calc(100% + 19px); max-width: 300px; }
    .lpm-fx-fp-infos { max-width: none; padding-top: 28px; }
    .lpm-fx-fp-titre { font-size: 2.125rem; }
    .lpm-fx-onglets { justify-content: flex-start; gap: 6px 18px; }
    .lpm-fx-fp-suite { padding-bottom: 64px; }

    /* Accueil, suite */
    .lpm-fx-acces { margin-top: 64px; }
    .lpm-fx-acces-nom { font-size: 2.25rem; }
    .lpm-fx-suite { padding: 22px 20px 14px; }

    /* Symboles : le ruban colle sous la barre pendant qu'on choisit */
    .lpm-fx-sy { padding: 24px 0 64px; }
    .lpm-fx-sy-grille { display: block; }
    .lpm-fx-sy-form > .lpm-fx-h2,
    .lpm-fx-sy-form > .lpm-fx-note { text-align: left; margin-left: 0; }
    .lpm-fx-sy-ruban--mobile {
        display: flex;
        position: sticky;
        top: calc(var(--lpm-fx-haut) + 8px);
        z-index: 5;
        min-height: 60px;
        margin-top: 18px;
        padding: 8px 12px;
    }
    .lpm-fx-sy-ruban--mobile .lpm-fx-sy-svg { width: 32px; }
    .lpm-fx-sy-tuile { width: 56px; height: 54px; }
    .lpm-fx-sy-svg { width: 38px; }
    .lpm-fx-sy-famille-nom { font-size: 1.5rem; }
    .lpm-fx-sy-resultat { position: static; max-height: none; overflow: visible; margin-top: 48px; }
    .lpm-fx-sy-resultat > .lpm-fx-sy-ruban { display: none; }
    .lpm-fx-sy-resultat > .lpm-fx-h2 { margin-top: 8px; }
    .lpm-fx-sy-ref { padding: 64px 0 64px; }
    .lpm-fx-sy-ref-grille { display: block; }
    .lpm-fx-sy-ref-bloc + .lpm-fx-sy-ref-bloc { margin-top: 48px; }
    .lpm-fx-sy-methode { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .lpm-fx-carte-lien:hover .lpm-fx-picto-grand { transform: none; }
}

/* Symboles décrits en toutes lettres (marques GINETEX non reproduites) */
.lpm-fx-sy-tuile { width: auto; min-width: 7.5em; height: auto; min-height: 46px; padding: 6px 8px; }
.lpm-fx-sy-mot { display: block; font-size: .78rem; line-height: 1.25; text-align: center; max-width: 11em; }
.lpm-fx-sy-ref-liste dt .lpm-fx-sy-mot { text-align: left; font-weight: 600; }
.lpm-fx-sy-ruban .lpm-fx-sy-mot { display: inline-block; margin: 2px 6px 2px 0; padding: 4px 8px; border: 1px solid currentColor; }