/*
 * CMS 300 « Mois sans tabac » : onglets Je trouve mon matériel / Je comprends
 * mon sevrage / Le calendrier du défi (maquette Figma LPV_B2C_MoisSansTabac,
 * itération 2).
 *
 * Contenu : od_cms_lang.content.
 * Comportements : themes/vapoteur/js/cms-300.js, qui pose .mst--js sur .mst.
 * Sans cette classe (éditeur TinyMCE, JS indisponible) tout reste affiché, à
 * plat, pour que chaque onglet et chaque texte reste lisible et modifiable.
 *
 * Toutes les règles sont scopées sous .cms-300 (classe body du front et du
 * body de l'éditeur, cf. AdminCmsController::EDITOR_STYLED_CMS).
 */

.cms-300 .mst {
    --mst-orange: var(--secondary-default, #f28231);
    --mst-orange-dark: #b1550c;
    /* Orange des vignettes produits (--lpv-color-02) : choix actifs des fenêtres (maquette). */
    --mst-orange-alt: var(--lpv-color-02, #ef791b);
    --mst-turquoise: var(--lpv-color-01, #2cc1b2);
    --mst-turquoise-dark: #1e8379;
    --mst-yellow: #ead700;
    --mst-gold: #f0bc4a;
    --mst-yellow-hover: #e5cc28;
    --mst-text: var(--lpv-color-03, #484d52);
    --mst-text-strong: #1a1a1a;
    --mst-text-soft: #5c5c58;
    --mst-beige: var(--lpv-color-15, #edebe4);
    --mst-beige-warm: #f6f3ea;
    --mst-beige-disabled: #f8f7f4;
    --mst-sage: #d9e4da;
    --mst-border: var(--lpv-color-04, #e4decb);
    --mst-border-hover: #c5bb9b;
    --mst-line: #e6e1d4;
    --mst-line-hover: #b8b09c;
    --mst-white: var(--lpv-color-16, #fff);
    --mst-title: var(--lpv-font-01, "bebasneue", Arial, sans-serif);
    --mst-body: "Lato", var(--lpv-font-06, Arial, sans-serif);
    --mst-hand: "Caveat", var(--lpv-font-02, cursive);
    --mst-content-w: 940px;
    --mst-gutter: 20px;
    --mst-section-pad: 38px;
    --mst-radius-card: 40px;
    --mst-radius-box: 20px;
    --mst-radius-btn: 6px;
    --mst-focus: 0 0 0 2px var(--mst-white), 0 0 0 4px var(--mst-turquoise);

    margin: 0;
    color: var(--mst-text);
    font: 14px/22px var(--mst-body);
    text-align: left;
}

/* ---------------------------------------------------------------------------
 * Remise à zéro des styles CMS hérités (cms.css : h2 ::before/::after, marges
 * des listes, couleurs des liens) — :where() pour laisser gagner les composants.
 *
 * Les widgets d'autres feuilles (vignettes produits {PRODUCTS} et je débute,
 * calculateurs) en sont exclus par :not(:where(…) *), de spécificité nulle.
 * ------------------------------------------------------------------------- */

.cms-300 .mst :where(p, ul, ol, li, figure, details, summary):not(:where(.vignettes-container, .vignette, .bloc-conso, .fancy-vapevscig) *) {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    list-style: none;
}

/* cms.css : .cms-page ul:not(.product-list-container) (0,2,1) et son li (0,2,2)
 * battent le :where() ci-dessus ; on ne neutralise que leurs marges. */
.cms-300 .mst ul:not(.product-list-container):not(:where(.vignettes-container, .vignette, .bloc-conso, .fancy-vapevscig) *) {
    margin: 0;
    line-height: inherit;
}

.cms-300 .mst ul:not(.product-list-container) li:not(:where(.vignettes-container, .vignette, .bloc-conso, .fancy-vapevscig) *) {
    margin: 0;
}

/* cms.css limite aussi la largeur des h2 et leur ajoute du padding. */
.cms-300 .mst :where(h1, h2, h3):not(:where(.vignettes-container, .vignette, .bloc-conso, .fancy-vapevscig) *) {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    color: inherit;
    font: 30px/34px var(--mst-title);
    font-weight: normal;
    text-align: left;
    text-transform: uppercase;
}

.cms-300 .mst :where(h3):not(:where(.vignettes-container, .vignette, .bloc-conso, .fancy-vapevscig) *) {
    font-size: 20px;
    line-height: 22px;
}

.cms-300 .mst :where(h1, h2, h3):not(:where(.vignettes-container, .vignette, .bloc-conso, .fancy-vapevscig) *):before,
.cms-300 .mst :where(h1, h2, h3):not(:where(.vignettes-container, .vignette, .bloc-conso, .fancy-vapevscig) *):after {
    content: none;
    display: none;
    flex: none;
    margin: 0;
    border: 0;
}

.cms-300 .mst :where(a):not(:where(.vignettes-container, .vignette, .bloc-conso, .fancy-vapevscig) *) {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease-in-out;
}

.cms-300 .mst :where(a):not(:where(.vignettes-container, .vignette, .bloc-conso, .fancy-vapevscig) *):hover,
.cms-300 .mst :where(a):not(:where(.vignettes-container, .vignette, .bloc-conso, .fancy-vapevscig) *):focus {
    color: inherit;
}

.cms-300 .mst :where(strong) {
    font-weight: 700;
}

.cms-300 .mst img:not(:where(.vignettes-container, .vignette, .bloc-conso, .fancy-vapevscig) *) {
    max-width: 100%;
    height: auto;
}

/* Texte rédigé librement dans l'éditeur (accordéons, étapes, cartes, conseils) :
 * listes et liens retrouvent une apparence de texte courant. */
.cms-300 .mst :is(.mst-intro, .mst-accordion__body, .mst-step, .mst-tool, .mst-advice__body, .mst-day) :is(ul, ol):not([class]) {
    margin: 0 0 10px;
    padding-left: 20px;
}

.cms-300 .mst :is(.mst-intro, .mst-accordion__body, .mst-step, .mst-tool, .mst-advice__body, .mst-day) ul:not([class]) > li {
    list-style: disc;
}

.cms-300 .mst :is(.mst-intro, .mst-accordion__body, .mst-step, .mst-tool, .mst-advice__body, .mst-day) ol:not([class]) > li {
    list-style: decimal;
}

.cms-300 .mst :is(.mst-intro, .mst-accordion__body, .mst-step, .mst-tool, .mst-advice__body, .mst-day) p a:not([class]) {
    text-decoration: underline;
}

.cms-300 .mst :where(a, button, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--mst-focus);
}

/* La page occupe toute la largeur : les bandes de couleur vont bord à bord et
 * .mst-wrap recentre le contenu. Pas de 100vw (barre de défilement comptée). */
.cms-300 .cms-page-id-300 {
    width: 100%;
    max-width: none;
    padding: 0;
}

/* ---------------------------------------------------------------------------
 * Mise en page
 * ------------------------------------------------------------------------- */

.cms-300 .mst-section {
    position: relative;
    padding: var(--mst-section-pad) 0;
    background: var(--mst-white);
}

.cms-300 .mst-section--beige {
    background: var(--mst-beige);
}

.cms-300 .mst-section--orange {
    background: var(--mst-orange);
    color: var(--mst-white);
}

.cms-300 .mst-section--bordered {
    border-top: 2px solid var(--mst-border);
}

.cms-300 .mst-section--tight + .mst-section--bordered,
.cms-300 .mst-section--tight {
    padding-top: var(--mst-section-pad);
}

/* Motif de vagues de la maquette, blanc sur fond transparent. */
.cms-300 .mst-section--motif:before,
.cms-300 .mst-banner-cta--orange:before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/cms-300/motif.webp) center / cover no-repeat;
    opacity: .2;
    pointer-events: none;
}

.cms-300 .mst-section--beige.mst-section--motif:before {
    opacity: .6;
}

.cms-300 .mst-wrap {
    position: relative;
    width: calc(100% - var(--mst-gutter) * 2);
    max-width: var(--mst-content-w);
    margin: 0 auto;
    box-sizing: border-box;
}

.cms-300 .mst-section h2 {
    margin: 0 0 20px;
}

.cms-300 .mst-section--orange h2 {
    color: var(--mst-white);
}

.cms-300 .mst-intro {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: -5px 0 20px;
}

.cms-300 .mst-intro--narrow {
    max-width: 620px;
}

.cms-300 .mst-section--beige .mst-intro,
.cms-300 .mst-section--bordered .mst-intro {
    color: var(--mst-text-soft);
}

/* Maquette : sur fond beige à motif (étapes du sevrage, calculateur), l'intro
 * garde la couleur du texte courant. */
.cms-300 .mst-section--beige.mst-section--motif .mst-intro {
    color: var(--mst-text);
}

/* Maquette : « Les moyens à votre disposition », titre et intro en noir. */
.cms-300 .mst .mst-wrap:has(.mst-tools) > h2,
.cms-300 .mst-wrap:has(.mst-tools) > .mst-intro {
    color: var(--mst-text-strong);
}

.cms-300 .mst-section--orange .mst-intro {
    color: var(--mst-white);
}

.cms-300 .mst-hand {
    color: var(--mst-orange);
    font: 22px/26px var(--mst-hand);
}

.cms-300 .mst-accent {
    color: var(--mst-turquoise);
    font-weight: 700;
    text-decoration: underline;
}

/* Lien « Fagerström » (test de la HAS) : la remise à zéro des liens lui
 * donnerait la couleur du texte au survol. */
.cms-300 .mst a.mst-accent:hover,
.cms-300 .mst a.mst-accent:focus {
    color: var(--mst-turquoise-dark);
}

/* ---------------------------------------------------------------------------
 * Boutons (Figma Button/Type=Secondary | Tertiary | Info)
 * ------------------------------------------------------------------------- */

.cms-300 .mst .mst-btn {
    display: inline-flex;
    gap: 4px;
    min-height: 34px;
    padding: 2px 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--mst-radius-btn);
    background: var(--mst-border);
    color: var(--mst-text);
    font: 20px/1 var(--mst-title);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.cms-300 .mst .mst-btn--orange {
    background: var(--mst-orange);
    color: var(--mst-white);
}

.cms-300 .mst .mst-btn--orange:hover,
.cms-300 .mst .mst-btn--orange:focus-visible {
    background: var(--mst-orange-dark);
    color: var(--mst-white);
}

.cms-300 .mst .mst-btn--beige:hover,
.cms-300 .mst .mst-btn--beige:focus-visible {
    background: #d9d1ba;
    color: var(--mst-text);
}

.cms-300 .mst .mst-btn--yellow {
    min-height: 30px;
    padding: 2px 8px;
    background: var(--mst-yellow);
    color: var(--mst-text);
}

.cms-300 .mst .mst-btn--yellow:hover,
.cms-300 .mst .mst-btn--yellow:focus-visible {
    background: var(--mst-yellow-hover);
    color: var(--mst-text);
}

.cms-300 .mst .mst-btn[aria-disabled="true"],
.cms-300 .mst .mst-btn:disabled {
    box-shadow: inset 0 0 0 2px var(--mst-border);
    background: var(--mst-beige-disabled);
    color: var(--mst-border);
    cursor: default;
    pointer-events: none;
}

.cms-300 .mst .mst-btn--arrow:after,
.cms-300 .mst .mst-btn--back:before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url(../img/cms-300/icon-arrow-right.svg) center / contain no-repeat;
    mask: url(../img/cms-300/icon-arrow-right.svg) center / contain no-repeat;
}

.cms-300 .mst .mst-btn--back:before {
    -webkit-mask-image: url(../img/cms-300/icon-arrow-left.svg);
    mask-image: url(../img/cms-300/icon-arrow-left.svg);
}

/* Bouton rond à flèche (carrousels, panneau du calendrier) */
.cms-300 .mst .mst-round {
    display: inline-flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--mst-text);
    border-radius: 50%;
    background: var(--mst-white);
    color: var(--mst-text);
    cursor: pointer;
}

.cms-300 .mst .mst-round:before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url(../img/cms-300/icon-arrow-left.svg) center / contain no-repeat;
    mask: url(../img/cms-300/icon-arrow-left.svg) center / contain no-repeat;
}

.cms-300 .mst .mst-round--next:before {
    -webkit-mask-image: url(../img/cms-300/icon-arrow-right.svg);
    mask-image: url(../img/cms-300/icon-arrow-right.svg);
}

.cms-300 .mst .mst-round:hover {
    background: var(--mst-beige);
}

.cms-300 .mst .mst-round:disabled {
    opacity: .3;
    cursor: default;
}

/* ---------------------------------------------------------------------------
 * Bannière et onglets
 * ------------------------------------------------------------------------- */

.cms-300 .mst-banner {
    margin: 0;
    background: #cee0d0;
    line-height: 0;
}

.cms-300 .mst .mst-banner__title {
    display: block;
    margin: 0;
    line-height: 0;
    text-align: center;
}

.cms-300 .mst .mst-banner__img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.cms-300 .mst .mst-banner__img--mobile {
    display: none;
}

/* Front : les deux images deviennent un <picture> (PageContent::bannerPicture()). */
.cms-300 .mst .mst-banner__picture {
    display: block;
}

/* Éditeur : les deux variantes restent visibles pour pouvoir les remplacer. */
.cms-300.mce-content-body .mst .mst-banner__img--mobile {
    display: block;
    max-width: 480px;
}

.cms-300 .mst-tabs {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin: 0;
    padding: 0 var(--mst-gutter);
    /* Ligne de base en ombre interne : une bordure débordante (margin -2px) serait
     * rognée par le défilement horizontal du mobile. */
    box-shadow: inset 0 -2px 0 var(--mst-border);
    background: var(--mst-white);
}

.cms-300 .mst-tabs li {
    display: flex;
    flex: 0 0 auto;
}

.cms-300 .mst .mst-tabs a {
    display: flex;
    min-height: 54px;
    box-sizing: border-box;
    align-items: center;
    border-bottom: 2px solid transparent;
    color: var(--mst-turquoise);
    font: 20px/20px var(--mst-title);
    text-transform: uppercase;
    white-space: nowrap;
}

.cms-300 .mst .mst-tabs a:hover {
    color: var(--mst-turquoise-dark);
}

.cms-300 .mst .mst-tabs a[aria-selected="true"] {
    border-bottom-color: var(--mst-text);
    color: var(--mst-text);
}

.cms-300 .mst--js .mst-panel:not(.is-active) {
    display: none;
}

/* ---------------------------------------------------------------------------
 * Chiffres clés
 * ------------------------------------------------------------------------- */

.cms-300 .mst-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.cms-300 .mst-stats--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.cms-300 .mst-stat {
    display: flex;
    flex-direction: column;
    padding: 30px;
    box-sizing: border-box;
    border-radius: var(--mst-radius-card);
    background: var(--mst-beige);
    color: var(--mst-text-strong);
}

.cms-300 .mst-stat__head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    margin: 0 0 22px;
}

.cms-300 .mst-stat__number {
    color: var(--mst-orange);
    font: 34px/34px var(--mst-title);
    font-weight: normal;
    text-transform: uppercase;
    text-shadow: 0 3px 0 var(--mst-white), 0 -3px 0 var(--mst-white), 3px 0 0 var(--mst-white), -3px 0 0 var(--mst-white),
        2px 2px 0 var(--mst-white), -2px -2px 0 var(--mst-white), 2px -2px 0 var(--mst-white), -2px 2px 0 var(--mst-white);
}

.cms-300 .mst-stat__label {
    flex: 1 1 180px;
    font-size: 12px;
    line-height: 16px;
}

.cms-300 .mst-stat__source {
    margin-top: 4px;
    color: var(--mst-turquoise);
    font-weight: 700;
    line-height: 24px;
}

.cms-300 .mst .mst-stat__source a {
    color: var(--mst-turquoise);
    text-decoration: underline;
}

.cms-300 .mst .mst-stat__source a:hover,
.cms-300 .mst .mst-stat__source a:focus {
    color: var(--mst-turquoise-dark);
}

/* Citation liée dans le texte d'un chiffre clé (ANSES). */
.cms-300 .mst .mst-stat__text a {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Cartes « Comment ça marche ? »
 * ------------------------------------------------------------------------- */

.cms-300 .mst-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.cms-300 .mst-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
    border-radius: var(--mst-radius-card);
    background: var(--mst-white);
    color: var(--mst-text);
    text-align: center;
}

.cms-300 .mst-card__media {
    width: 100%;
    margin: 0 0 14px;
    overflow: hidden;
    border-radius: var(--mst-radius-box) var(--mst-radius-box) 0 0;
    background: var(--mst-beige);
    line-height: 0;
}

.cms-300 .mst .mst-card__media img {
    width: 100%;
}

.cms-300 .mst .mst-card__title {
    color: var(--mst-orange);
    font-size: 26px;
    line-height: 30px;
    text-align: center;
}

/* ---------------------------------------------------------------------------
 * Bandeaux d'appel à l'action (Figma rootFrame)
 * ------------------------------------------------------------------------- */

.cms-300 .mst-banner-cta {
    position: relative;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 0;
    padding: 20px;
    overflow: hidden;
    border-radius: 10px;
}

.cms-300 .mst-section--tight .mst-banner-cta,
.cms-300 .mst-contacts + .mst-banner-cta {
    margin-top: 0;
}

.cms-300 .mst-contacts + .mst-banner-cta {
    margin-top: 38px;
}

.cms-300 .mst-banner-cta--yellow {
    padding: 30px 20px;
    background: var(--mst-yellow);
    color: var(--mst-text);
}

.cms-300 .mst-banner-cta--orange {
    background: var(--mst-orange);
    color: var(--mst-white);
}

.cms-300 .mst-banner-cta__text,
.cms-300 .mst-banner-cta__action {
    position: relative;
    z-index: 1;
}

.cms-300 .mst-banner-cta__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 5px;
}

.cms-300 .mst-banner-cta__title {
    font: 20px/22px var(--mst-title);
    text-transform: uppercase;
}

.cms-300 .mst-banner-cta__action {
    flex: 0 0 auto;
}

.cms-300 .mst-banner-cta .mst-btn {
    min-height: 40px;
}

/* ---------------------------------------------------------------------------
 * Questionnaire « je débute »
 * Sur la page : le choix du profil seul (Figma « Guide d'achat »), qui reste en
 * place quand la fenêtre s'ouvre. Dans la fenêtre : le panneau .mst-deb--panel
 * (copie du choix du profil, questions, résultat), mis en forme par
 * cms-form-deb.css (moteur partagé avec les pages 38 et 62).
 * ------------------------------------------------------------------------- */

.cms-300 .mst-deb {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    margin: 20px 0 0;
    padding: 15px 20px;
    box-sizing: border-box;
    border: 2px solid var(--mst-border);
    border-radius: 10px;
    background: var(--mst-white);
}

.cms-300 .mst-deb__title,
.cms-300 .mst-deb__subtitle {
    color: var(--mst-turquoise);
    font: 25px/24px var(--mst-title);
    text-align: center;
    text-transform: uppercase;
}

.cms-300 .mst-deb__profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    justify-content: center;
}

.cms-300 .mst-deb__profiles li {
    display: grid;
    grid-template-columns: 46px auto;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    align-items: center;
    padding: 2px 4px;
    border-radius: 8px;
    color: var(--mst-text);
    font: 11px/12px Arial, sans-serif;
    cursor: pointer;
}

.cms-300 .mst-deb__profiles img {
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
    transition: transform .15s ease-in-out;
}

.cms-300 .mst-deb__profiles strong {
    align-self: end;
    font: 18px/16px var(--mst-title);
    font-weight: normal;
    text-transform: uppercase;
}

.cms-300 .mst-deb__profiles .mst-deb__hint {
    align-self: start;
    max-width: 110px;
}

.cms-300 .mst-deb__profiles li:hover img,
.cms-300 .mst-deb__profiles li:focus-visible img {
    transform: scale(1.06);
}

.cms-300 .mst-deb__profiles li[aria-checked="true"] strong {
    color: var(--mst-orange-alt);
}

/* Réponse cochée du questionnaire je débute (maquette de la fenêtre). */
.cms-300 .mst-deb .form-label-radio:has(input:checked) {
    color: var(--mst-orange-alt);
}

.cms-300 .mst-deb__profiles li[aria-checked="true"] img {
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--mst-orange-alt);
}

/* Libellés recopiés par cms-300.js dans le résultat : masqués une fois recopiés,
 * visibles dans l'éditeur. */
.cms-300 .mst--js .mst-deb__labels {
    display: none;
}

.cms-300 .mst-deb__question ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

/* Sur la page, avec JS, seul le choix du profil reste visible : le panneau
 * n'apparaît que dans la fenêtre, où il n'est plus enfant du bloc. */
.cms-300 .mst--js .mst-deb:not(.mst-deb--panel) > :not(.mst-deb__title):not(.mst-deb__profiles),
.cms-300 .mst--js .mst-deb__questions {
    display: none;
}

.cms-300 .mst-deb--panel {
    gap: 20px;
    margin: 0;
    padding: 0;
    border: 0;
}

.cms-300 .mst-deb .get-pack-deb {
    width: 100%;
}

.cms-300 .mst-deb .cms-form-debutant .white-content form {
    margin: 0 auto;
}

.cms-300 .mst-deb .mst-deb__result {
    width: 100%;
}

.cms-300 .mst-deb .mst-deb__result .h2 {
    margin: 0 0 20px;
    color: var(--mst-turquoise);
    font: 25px/24px var(--mst-title);
    text-align: center;
}

/* ---------------------------------------------------------------------------
 * Carrousels produits (marqueur {PRODUCTS}, CmsController::injectProducts)
 * ------------------------------------------------------------------------- */

.cms-300 .mst-head {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 40px;
}

.cms-300 .mst-head__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cms-300 .mst-head__text h2 {
    margin: 0;
}

.cms-300 .mst-nav {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.cms-300 .mst-nav[hidden] {
    display: none;
}

.cms-300 .mst-products .vignettes-container {
    margin: 0;
    padding: 2px 2px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-color: var(--mst-orange) var(--mst-beige);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.cms-300 .mst-products .vignettes-container > .product-list-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    width: max-content;
    min-width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 !important;
}

/* Largeur de la vignette standard du site (--vignette-width de product_list.css). */
.cms-300 .mst-products .vignettes-container > .product-list-container > li {
    flex: 0 0 auto;
    margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Contact (« Une question avant de vous lancer ? »)
 * ------------------------------------------------------------------------- */

.cms-300 .mst-contacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cms-300 .mst-contact {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    border-radius: var(--mst-radius-box);
    background: var(--mst-beige);
    color: var(--mst-text-strong);
    text-align: center;
}

.cms-300 .mst-contact:before {
    content: "";
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mst-orange) url(../img/cms-300/icon-store.svg) center / 24px no-repeat;
}

.cms-300 .mst-contact--phone:before {
    background-image: url(../img/cms-300/icon-phone.svg);
}

.cms-300 .mst-contact--chat:before {
    background-image: url(../img/cms-300/icon-chat.svg);
}

.cms-300 .mst-contact__text {
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
 * Accordéons (details / summary natifs)
 * ------------------------------------------------------------------------- */

.cms-300 .mst-accordions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    counter-reset: mst-accordion;
}

.cms-300 .mst-accordion {
    padding: 20px 30px;
    border: 2px solid var(--mst-border);
    border-radius: var(--mst-radius-box);
    background: var(--mst-white);
    color: var(--mst-text);
    counter-increment: mst-accordion;
    transition: border-color .15s ease-in-out;
}

.cms-300 .mst-accordion:hover {
    border-color: var(--mst-border-hover);
}

.cms-300 .mst-accordion[open] {
    padding: 30px;
    border-color: var(--mst-orange);
    border-radius: var(--mst-radius-card);
}

.cms-300 .mst .mst-accordion summary {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--mst-text);
    font: 20px/22px var(--mst-title);
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}

.cms-300 .mst .mst-accordion summary::-webkit-details-marker {
    display: none;
}

.cms-300 .mst .mst-accordion summary:before {
    content: counter(mst-accordion);
    display: flex;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mst-beige-warm);
    color: var(--mst-text);
    font: 18px/1 var(--mst-title);
}

.cms-300 .mst .mst-accordion summary:after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background: var(--mst-turquoise);
    -webkit-mask: url(../img/cms-300/icon-plus.svg) center / contain no-repeat;
    mask: url(../img/cms-300/icon-plus.svg) center / contain no-repeat;
}

.cms-300 .mst .mst-accordion[open] summary:before {
    background: var(--mst-orange);
    color: var(--mst-white);
}

.cms-300 .mst .mst-accordion[open] summary:after {
    -webkit-mask-image: url(../img/cms-300/icon-minus.svg);
    mask-image: url(../img/cms-300/icon-minus.svg);
}

.cms-300 .mst-accordion__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.cms-300 .mst-accordion__body .mst-hand {
    font-size: 20px;
    line-height: 24px;
}

/* ---------------------------------------------------------------------------
 * Test de Fagerström
 * ------------------------------------------------------------------------- */

.cms-300 .mst-quiz-toggle {
    margin: 0 0 20px;
}

.cms-300 .mst .mst-quiz-toggle .mst-btn.is-open:after {
    -webkit-mask-image: url(../img/cms-300/icon-eye-off.svg);
    mask-image: url(../img/cms-300/icon-eye-off.svg);
}

.cms-300 .mst .mst-quiz-toggle .mst-btn.is-open {
    flex-direction: row-reverse;
}

.cms-300 .mst-quiz {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius-box);
    background: var(--mst-white);
}

.cms-300 .mst--js .mst-quiz:not(.is-open) {
    display: none;
}

.cms-300 .mst-quiz__header {
    position: relative;
    padding: 20px 68px 20px 20px;
    background: var(--mst-beige);
}

.cms-300 .mst-quiz__title {
    font: 20px/22px var(--mst-title);
    text-transform: uppercase;
}

.cms-300 .mst .mst-quiz__close {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.cms-300 .mst .mst-quiz__close:before,
.cms-300 .mst .mst-modal__close:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mst-turquoise);
    -webkit-mask: url(../img/cms-300/icon-close.svg) center / contain no-repeat;
    mask: url(../img/cms-300/icon-close.svg) center / contain no-repeat;
}

.cms-300 .mst-quiz__progress {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 20px 20px 0;
}

.cms-300 .mst-quiz__bars {
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
}

.cms-300 .mst-quiz__bars span {
    flex: 1 1 0;
    height: 6px;
    border-radius: 10px;
    background: var(--mst-beige);
    transition: background-color .2s ease-in-out;
}

.cms-300 .mst-quiz__bars span.is-done {
    background: var(--mst-orange);
}

.cms-300 .mst-quiz__count {
    flex: 0 0 auto;
    min-width: 24px;
    text-align: right;
}

.cms-300 .mst-quiz__question,
.cms-300 .mst-quiz__nav {
    padding: 20px;
}

.cms-300 .mst-quiz__question + .mst-quiz__question {
    border-top: 1px solid var(--mst-border);
}

.cms-300 .mst--js .mst-quiz__question {
    border-top: 0;
}

.cms-300 .mst--js .mst-quiz__nav {
    padding-top: 0;
}

.cms-300 .mst--js .mst-quiz__question:not(.is-current),
.cms-300 .mst--js .mst-quiz.is-done .mst-quiz__question,
.cms-300 .mst--js .mst-quiz.is-done .mst-quiz__nav,
.cms-300 .mst--js .mst-quiz:not(.is-done) .mst-quiz__result,
.cms-300 .mst--js .mst-quiz:not(.is-done) .mst-quiz__actions,
.cms-300 .mst--js .mst-quiz__result:not(.is-current) {
    display: none;
}

.cms-300 .mst-quiz__label {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.cms-300 .mst-quiz__label:before {
    content: attr(data-mst-number);
    display: none;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mst-orange);
    color: var(--mst-white);
    font: 18px/1 var(--mst-title);
}

.cms-300 .mst-quiz__label[data-mst-number]:before {
    display: flex;
}

.cms-300 .mst-quiz__answers {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cms-300 .mst-quiz__answers li {
    padding: 15px 20px;
    border: 2px solid var(--mst-line);
    border-radius: var(--mst-radius-box);
    color: var(--mst-text);
}

.cms-300 .mst-quiz__answers li:hover {
    border-color: var(--mst-line-hover);
}

.cms-300 .mst-quiz__answers li:focus-within {
    border-color: var(--mst-turquoise);
}

/* Règle séparée : un navigateur sans :has() ignorerait tout le groupe. */
.cms-300 .mst-quiz__answers li:has(input:checked) {
    border-color: var(--mst-turquoise);
}

.cms-300 .mst-quiz__answers label {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.cms-300 .mst .mst-quiz__answers input {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 2px solid var(--mst-turquoise);
    border-radius: 50%;
    background: var(--mst-white);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.cms-300 .mst .mst-quiz__answers input:checked {
    background: radial-gradient(circle, var(--mst-turquoise) 0 3px, var(--mst-white) 3.5px);
}

.cms-300 .mst .mst-quiz__answers input:focus-visible {
    outline: none;
    box-shadow: var(--mst-focus);
}

.cms-300 .mst-quiz__result {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 20px 0;
    padding: 30px;
    border: 2px solid var(--mst-line);
    border-radius: 10px;
    background: var(--mst-beige);
}

/* Le résultat reçoit le focus (lecteurs d'écran) : pas d'anneau pour autant. */
.cms-300 .mst .mst-quiz__result:focus {
    outline: none;
    box-shadow: none;
}

.cms-300 .mst-quiz__result-title {
    color: var(--mst-orange);
    font: 20px/22px var(--mst-title);
    text-transform: uppercase;
}

.cms-300 .mst-quiz__note {
    color: var(--mst-text-soft);
    font-size: 12px;
    font-style: italic;
    line-height: 16px;
}

.cms-300 .mst-quiz__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
}

.cms-300 .mst--js .mst-quiz__actions {
    margin: -10px 20px 20px;
    padding: 0 30px 30px;
    border: 2px solid var(--mst-line);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: var(--mst-beige);
}

.cms-300 .mst--js .mst-quiz.is-done .mst-quiz__result.is-current {
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

/* ---------------------------------------------------------------------------
 * Frise des étapes
 * ------------------------------------------------------------------------- */

.cms-300 .mst-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cms-300 .mst-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cms-300 .mst-step__label {
    color: var(--mst-turquoise-dark);
    font-weight: 700;
}

.cms-300 .mst .mst-step__title {
    color: var(--mst-orange);
    font-size: 20px;
    line-height: 22px;
}

.cms-300 .mst-steps__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

/* Avec JS : frise cliquable + une seule carte d'étape. */
.cms-300 .mst--js .mst-step:not(.is-current),
.cms-300 .mst--js .mst-step__label {
    display: none;
}

.cms-300 .mst-stepper {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 5px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.cms-300 .mst-stepper::-webkit-scrollbar {
    display: none;
}

.cms-300 .mst-stepper li {
    flex: 1 0 120px;
}

.cms-300 .mst .mst-stepper button {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 0;
    align-items: center;
    border: 0;
    background: none;
    color: var(--mst-text-soft);
    font: 14px/22px var(--mst-body);
    cursor: pointer;
}

.cms-300 .mst .mst-stepper__dot {
    position: relative;
    display: flex;
    width: 100%;
    height: 38px;
    align-items: center;
    justify-content: center;
}

/* Traits de liaison : moitié gauche et moitié droite de chaque étape. */
.cms-300 .mst .mst-stepper__dot:before,
.cms-300 .mst .mst-stepper__dot:after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 19px);
    height: 2px;
    background: var(--mst-line);
}

.cms-300 .mst .mst-stepper__dot:before {
    left: 0;
}

.cms-300 .mst .mst-stepper__dot:after {
    right: 0;
}

.cms-300 .mst .mst-stepper li:first-child .mst-stepper__dot:before,
.cms-300 .mst .mst-stepper li:last-child .mst-stepper__dot:after {
    display: none;
}

.cms-300 .mst .mst-stepper__number {
    display: flex;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--mst-line);
    border-radius: 50%;
    background: var(--mst-white);
    color: var(--mst-text-soft);
    font: 20px/1 var(--mst-title);
    transition: all .15s ease-in-out;
}

.cms-300 .mst .mst-stepper button:hover .mst-stepper__number {
    border-color: var(--mst-line-hover);
}

.cms-300 .mst .mst-stepper button:hover {
    color: var(--mst-text);
    font-weight: 700;
}

.cms-300 .mst .mst-stepper button:focus-visible {
    box-shadow: none;
}

.cms-300 .mst .mst-stepper button:focus-visible .mst-stepper__number {
    box-shadow: var(--mst-focus);
}

.cms-300 .mst .mst-stepper li.is-done .mst-stepper__number,
.cms-300 .mst .mst-stepper li.is-current .mst-stepper__number {
    border-color: var(--mst-turquoise);
    background: var(--mst-turquoise);
    color: var(--mst-white);
}

.cms-300 .mst .mst-stepper li.is-current .mst-stepper__number {
    box-shadow: 0 0 0 4px rgba(44, 193, 178, .2);
}

.cms-300 .mst .mst-stepper li.is-done button,
.cms-300 .mst .mst-stepper li.is-current button {
    color: var(--mst-turquoise-dark);
}

.cms-300 .mst .mst-stepper li.is-current button {
    font-weight: 700;
}

.cms-300 .mst .mst-stepper li.is-done .mst-stepper__dot:before,
.cms-300 .mst .mst-stepper li.is-done .mst-stepper__dot:after,
.cms-300 .mst .mst-stepper li.is-current .mst-stepper__dot:before,
.cms-300 .mst .mst-stepper li.is-current .mst-stepper__dot:after {
    background: var(--mst-turquoise);
}

.cms-300 .mst-steps__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    border: 2px solid var(--mst-line);
    border-radius: var(--mst-radius-card);
    background: var(--mst-white);
}

.cms-300 .mst-steps__card .mst-step {
    gap: 10px;
}

.cms-300 .mst-steps__card-head {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.cms-300 .mst-pill {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 18px;
    background: var(--mst-orange);
    color: var(--mst-white);
    font: 14px/10px var(--mst-title);
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Les moyens à votre disposition
 * ------------------------------------------------------------------------- */

.cms-300 .mst-tools-carousel {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 0;
}

/* Flèches hors de la colonne de contenu seulement quand la page a la place. */
@media only screen and (min-width: 1100px) {
    .cms-300 .mst-tools-carousel {
        margin: 0 -48px;
    }
}

/* Chevron dessiné par ::before : un masque sur le bouton effacerait son anneau de focus. */
.cms-300 .mst .mst-tools-carousel__arrow {
    position: relative;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.cms-300 .mst .mst-tools-carousel__arrow:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mst-turquoise);
    -webkit-mask: url(../img/cms-300/icon-chevron-left.svg) center / contain no-repeat;
    mask: url(../img/cms-300/icon-chevron-left.svg) center / contain no-repeat;
}

.cms-300 .mst .mst-tools-carousel__arrow--next:before {
    -webkit-mask-image: url(../img/cms-300/icon-chevron-right.svg);
    mask-image: url(../img/cms-300/icon-chevron-right.svg);
}

.cms-300 .mst .mst-tools-carousel__arrow:disabled {
    visibility: hidden;
}

.cms-300 .mst-tools {
    display: grid;
    grid-auto-columns: calc((100% - 40px) / 3);
    grid-auto-flow: column;
    gap: 20px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.cms-300 .mst-tools::-webkit-scrollbar {
    display: none;
}

.cms-300 .mst-tool {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 30px;
    box-sizing: border-box;
    border-radius: var(--mst-radius-card);
    background: var(--mst-beige);
    scroll-snap-align: start;
}

.cms-300 .mst-tool:before {
    content: "";
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    background: url(../img/cms-300/moyen-substituts.svg) left top / contain no-repeat;
}

.cms-300 .mst-tool--professionnel:before {
    background-image: url(../img/cms-300/moyen-professionnel.svg);
}

.cms-300 .mst-tool--applications:before {
    background-image: url(../img/cms-300/moyen-applications.svg);
}

.cms-300 .mst-tool--vape:before {
    flex-basis: 73px;
    height: 73px;
    margin-top: -13px;
    background-image: url(../img/cms-300/moyen-vape.svg);
}

.cms-300 .mst .mst-tool h3 {
    margin: 0 0 -12px;
    color: var(--mst-text);
}

.cms-300 .mst-conclusion {
    margin: 20px 0 0;
}

/* ---------------------------------------------------------------------------
 * Calculateur d'économies (encart ; le calculateur s'ouvre en fenêtre)
 * ------------------------------------------------------------------------- */

.cms-300 .mst-calc {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding: 15px 40px;
    border: 2px solid var(--mst-border);
    border-radius: 10px;
    background: var(--mst-white);
    text-align: center;
}

.cms-300 .mst-calc__title,
.cms-300 .mst-calc__subtitle {
    font: 20px/20px var(--mst-title);
    text-transform: uppercase;
}

.cms-300 .mst-calc__subtitle {
    color: var(--mst-turquoise);
}

.cms-300 .mst-calc__illustration {
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: center;
    padding: 8px 0 11px;
}

.cms-300 .mst .mst-calc__illustration img + img {
    box-sizing: content-box;
    padding-left: 22px;
    border-left: 2px solid var(--mst-border);
}

/* ---------------------------------------------------------------------------
 * Pour aller plus loin
 * ------------------------------------------------------------------------- */

.cms-300 .mst-resources {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 20px;
}

.cms-300 .mst-resources__intro {
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: var(--mst-text-soft);
}

.cms-300 .mst-resources__intro h2 {
    margin: 0;
    color: var(--mst-text);
}

.cms-300 .mst-resources__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 5px;
}

.cms-300 .mst-resources__buttons .mst-btn {
    width: 100%;
}

.cms-300 .mst .mst-resources__internal h3,
.cms-300 .mst .mst-external__title {
    margin: 0 0 10px;
    color: var(--mst-orange);
}

.cms-300 .mst .mst-links a {
    display: flex;
    gap: 25px;
    min-height: 56px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--mst-line);
    color: var(--mst-text-strong);
    font-weight: 700;
    line-height: 24px;
}

.cms-300 .mst .mst-links a:after,
.cms-300 .mst .mst-external a:after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: var(--mst-turquoise);
    -webkit-mask: url(../img/cms-300/icon-arrow-right.svg) center / contain no-repeat;
    mask: url(../img/cms-300/icon-arrow-right.svg) center / contain no-repeat;
}

.cms-300 .mst .mst-links a:hover {
    color: var(--mst-turquoise-dark);
}

.cms-300 .mst-external {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cms-300 .mst-external li {
    display: flex;
    flex-direction: column;
}

.cms-300 .mst .mst-external a {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    align-self: flex-start;
    color: var(--mst-text-strong);
    font-weight: 700;
    line-height: 24px;
}

.cms-300 .mst .mst-external a:after {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    -webkit-mask-image: url(../img/cms-300/icon-arrow-up-right.svg);
    mask-image: url(../img/cms-300/icon-arrow-up-right.svg);
}

.cms-300 .mst .mst-external a:hover {
    color: var(--mst-turquoise-dark);
}

.cms-300 .mst-external__text {
    color: var(--mst-text-soft);
    font-size: 12px;
    line-height: 16px;
}

/* ---------------------------------------------------------------------------
 * Calendrier du défi
 * ------------------------------------------------------------------------- */

.cms-300 .mst-challenge {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}

.cms-300 .mst-challenge__text {
    display: flex;
    flex: 0 1 659px;
    flex-direction: column;
    gap: 20px;
    color: var(--mst-text-soft);
}

.cms-300 .mst-challenge__text h2 {
    margin: 0;
    color: var(--mst-text);
}

.cms-300 .mst-challenge__text .mst-hand {
    font-size: 25px;
    line-height: 32px;
}

.cms-300 .mst-progress {
    display: flex;
    flex: 0 0 266px;
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px 10px;
    box-sizing: border-box;
    border-radius: var(--mst-radius-box);
    background: var(--mst-beige);
}

.cms-300 .mst-progress__day {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.cms-300 .mst .mst-progress__day strong {
    color: var(--mst-orange);
    font: 34px/1 var(--mst-title);
    font-weight: normal;
    text-transform: uppercase;
    text-shadow: 0 2px 0 var(--mst-white), 0 -2px 0 var(--mst-white), 2px 0 0 var(--mst-white), -2px 0 0 var(--mst-white);
}

.cms-300 .mst-progress__bar {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--mst-white);
}

.cms-300 .mst-progress__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--mst-orange);
}

.cms-300 .mst--js .mst-progress:not(.is-running) .mst-progress__day,
.cms-300 .mst--js .mst-progress:not(.is-running) .mst-progress__bar,
.cms-300 .mst--js .mst-progress:not(.is-running) .mst-progress__remaining,
.cms-300 .mst--js .mst-progress:not(.is-one) .mst-progress__remaining-one,
.cms-300 .mst--js .mst-progress.is-one .mst-progress__remaining,
.cms-300 .mst--js .mst-progress:not(.is-last) .mst-progress__last,
.cms-300 .mst--js .mst-progress.is-last .mst-progress__remaining,
.cms-300 .mst--js .mst-progress:not(.is-before) .mst-progress__before,
.cms-300 .mst--js .mst-progress:not(.is-after) .mst-progress__after {
    display: none;
}

/* Avant le 1er novembre, le conseil vide (« Patience ! ») dit déjà tout : pas de compteur (retour post-MEP). */
.cms-300 .mst--js .mst-progress.is-before {
    display: none;
}

/* Avec JS : [carte = en-tête + grille] | panneau du conseil. */
.cms-300 .mst-calendar {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cms-300 .mst--js .mst-calendar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    align-items: stretch;
}

.cms-300 .mst-calendar__card {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 60px 30px;
    box-sizing: border-box;
    border: 2px solid var(--mst-line);
    border-radius: var(--mst-radius-box);
    background: var(--mst-white);
}

.cms-300 .mst-calendar__head {
    display: flex;
    gap: 20px 40px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.cms-300 .mst-calendar__title {
    font: 34px/34px var(--mst-title);
    text-transform: uppercase;
}

.cms-300 .mst-calendar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--mst-text-soft);
    font-size: 12px;
    line-height: 16px;
}

.cms-300 .mst-calendar__legend li {
    display: flex;
    gap: 6px;
    align-items: center;
}

.cms-300 .mst-calendar__legend li:before {
    content: "";
    width: 9px;
    height: 9px;
    box-sizing: border-box;
    border-radius: 3px;
}

.cms-300 .mst-calendar__legend--past:before {
    border: 2px solid var(--mst-turquoise);
    background: var(--mst-beige-warm);
}

.cms-300 .mst .mst-calendar__legend--today:before {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: var(--mst-orange);
}

.cms-300 .mst-calendar__legend--locked:before {
    border: 2px dashed var(--mst-line);
    background: var(--mst-white);
}

.cms-300 .mst-calendar__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.cms-300 .mst .mst-day-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    aspect-ratio: 1;
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--mst-turquoise);
    border-radius: 16px;
    background: var(--mst-beige-warm);
    color: var(--mst-text-strong);
    font: 20px/22px var(--mst-title);
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}

.cms-300 .mst .mst-day-cell--past:after {
    content: "";
    position: absolute;
    top: -9px;
    right: -9px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mst-sage);
}

.cms-300 .mst .mst-day-cell--past:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 10px;
    height: 10px;
    background: var(--mst-text);
    -webkit-mask: url(../img/cms-300/icon-check.svg) center / contain no-repeat;
    mask: url(../img/cms-300/icon-check.svg) center / contain no-repeat;
}

.cms-300 .mst .mst-day-cell--past:hover {
    background: var(--mst-line);
}

.cms-300 .mst .mst-day-cell--past[aria-pressed="true"] {
    background: var(--mst-turquoise);
    color: var(--mst-white);
}

.cms-300 .mst .mst-day-cell--today {
    border: 1px solid var(--mst-beige-warm);
    background: var(--mst-orange);
    color: var(--mst-white);
}

.cms-300 .mst .mst-day-cell--today:hover {
    background: var(--mst-orange-dark);
}

.cms-300 .mst .mst-day-cell__today {
    font: 14px/14px var(--mst-title);
    text-transform: uppercase;
}

.cms-300 .mst .mst-day-cell--locked {
    border: 2px dashed var(--mst-line);
    background: var(--mst-white);
    color: var(--mst-line);
    cursor: default;
}

.cms-300 .mst .mst-day-cell--locked:after {
    content: "";
    width: 16px;
    height: 16px;
    background: url(../img/cms-300/icon-lock.svg) center / contain no-repeat;
}

.cms-300 .mst-advice {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid var(--mst-line);
    border-radius: var(--mst-radius-box);
    background: var(--mst-white);
}

.cms-300 .mst-advice__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
}

.cms-300 .mst-advice__label {
    color: var(--mst-text-soft);
    font-weight: 700;
    line-height: 24px;
}

.cms-300 .mst-advice__badge {
    padding: 4px 8px;
    border-radius: 18px;
    background: var(--mst-orange);
    color: var(--mst-white);
    font: 14px/10px var(--mst-title);
    text-transform: uppercase;
}

.cms-300 .mst-advice__nav {
    display: flex;
    flex-basis: 100%;
    gap: 8px;
}

.cms-300 .mst-advice__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 20px;
    color: var(--mst-text-soft);
}

.cms-300 .mst .mst-advice__body h3,
.cms-300 .mst .mst-advice__empty-title {
    color: var(--mst-text);
    font: 34px/34px var(--mst-title);
    text-transform: uppercase;
}

.cms-300 .mst-advice__body p:has(> .mst-btn) {
    margin-top: auto;
}

.cms-300 .mst .mst-advice__body .mst-btn {
    width: 100%;
}

.cms-300 .mst .mst-advice__body img {
    display: block;
    width: 100%;
    border-radius: 8px;
}

/* Miniature d'une vidéo (cms-300.js, initVideos()) : format 4:5 des visuels, recadrée,
 * collée à son bouton en bas du conseil ; un clic ouvre la vidéo comme le bouton. */
.cms-300 .mst .mst-advice__body .mst-video-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-top: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: var(--mst-beige);
    cursor: pointer;
}

.cms-300 .mst-advice__body .mst-video-preview + p:has(> .mst-btn) {
    margin-top: 0;
}

.cms-300 .mst .mst-advice__body .mst-video-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    opacity: 0;
    transition: opacity .2s;
}

.cms-300 .mst .mst-advice__body .mst-video-preview.is-loaded img {
    opacity: 1;
}

/* Bouton lecture : disque orange, triangle blanc. */
.cms-300 .mst .mst-advice__body .mst-video-preview::before,
.cms-300 .mst .mst-advice__body .mst-video-preview::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
}

.cms-300 .mst .mst-advice__body .mst-video-preview::before {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: var(--mst-orange);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    transition: transform .2s;
}

.cms-300 .mst .mst-advice__body .mst-video-preview::after {
    margin: -11px 0 0 -6px;
    border-width: 11px 0 11px 18px;
    border-style: solid;
    border-color: transparent transparent transparent var(--mst-white);
}

.cms-300 .mst .mst-advice__body .mst-video-preview:hover::before {
    transform: scale(1.08);
}

.cms-300 .mst .mst-advice__body .mst-video-preview:focus-visible {
    outline: none;
    box-shadow: var(--mst-focus);
}

.cms-300 .mst-advice__empty {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--mst-text-soft);
}

.cms-300 .mst--js .mst-advice:not(.is-empty) .mst-advice__empty,
.cms-300 .mst--js .mst-advice.is-empty .mst-advice__badge,
.cms-300 .mst--js .mst-advice.is-empty .mst-advice__nav,
.cms-300 .mst--js .mst-advice.is-empty .mst-advice__body {
    display: none;
}

.cms-300 .mst--js .mst-days,
.cms-300 .mst--js .mst-conso {
    display: none;
}

/* Diaporama d'une case (plusieurs images) */
.cms-300 .mst-slides {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cms-300 .mst-slides__track {
    display: flex;
    overflow-x: auto;
    border-radius: 8px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.cms-300 .mst-slides__track::-webkit-scrollbar {
    display: none;
}

/* Cadre de l'image : porte les flèches superposées. */
.cms-300 .mst-slides__frame {
    position: relative;
}

/* Glisser à la souris (cms-300.js) : la piste suit le pointeur, sans aimantation ni animation. */
.cms-300 .mst-slides__track.is-dragging {
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
}

.cms-300 .mst .mst-slides__track.is-dragging img {
    cursor: grabbing;
}

.cms-300 .mst .mst-slides__track img {
    flex: 0 0 100%;
    scroll-snap-align: start;
    border-radius: 0;
}

.cms-300 .mst-slides__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.cms-300 .mst-slides__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mst-line);
}

.cms-300 .mst-slides__dots span.is-current {
    background: var(--mst-gold);
}

/* Flèches posées sur l'image, à 3 px de ses bords et centrées en hauteur
 * (maquette « Slideshow ») ; la bande entre les deux laisse passer clic et glisser. */
.cms-300 .mst-slides__nav {
    position: absolute;
    top: 50%;
    right: 3px;
    left: 3px;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.cms-300 .mst .mst-slides__nav .mst-round {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-color: var(--mst-text-strong);
    color: var(--mst-text-strong);
    pointer-events: auto;
}

.cms-300 .mst .mst-slides__arrow:before {
    width: 6px;
    height: 7px;
    -webkit-mask-image: url(../img/cms-300/icon-chevron-small-left.svg);
    mask-image: url(../img/cms-300/icon-chevron-small-left.svg);
}

.cms-300 .mst .mst-slides__arrow--next:before {
    -webkit-mask-image: url(../img/cms-300/icon-chevron-small-right.svg);
    mask-image: url(../img/cms-300/icon-chevron-small-right.svg);
}

/* Visuels du conseil : un clic les ouvre en grand (cms-300.js, initZoom()). */
.cms-300 .mst .mst-advice__body img.mst-zoomable {
    cursor: zoom-in;
}

.cms-300 .mst .mst-advice__body img.mst-zoomable:focus-visible {
    outline: none;
    box-shadow: var(--mst-focus);
}

/* Dans un diaporama, la piste (overflow) rognerait l'anneau extérieur : il est
 * dessiné à l'intérieur de l'image. */
.cms-300 .mst .mst-slides__track img.mst-zoomable:focus-visible {
    outline: 3px solid var(--mst-turquoise);
    outline-offset: -3px;
    box-shadow: none;
}

/* Compte : bloc réservé aux visiteurs non connectés (classe body hors cache). */
.cms-300.logged .mst-account {
    display: none;
}

/* ---------------------------------------------------------------------------
 * Fenêtre (questionnaire je débute, calculateurs, vidéo)
 * Posée dans .mst, donc sous .center_column : les styles des widgets existants,
 * souvent préfixés .center_column, s'y appliquent.
 * ------------------------------------------------------------------------- */

.cms-300 .mst-modal {
    position: fixed;
    inset: 0;
    z-index: 8000;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    background: rgba(72, 77, 82, .6);
}

.cms-300 .mst-modal[hidden] {
    display: none;
}

.cms-300 .mst-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 793px;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--mst-white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
}

/* Seul le corps défile : le bouton de fermeture reste en place. */
.cms-300 .mst-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 40px 20px 20px;
    overflow: auto;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

.cms-300 .mst .mst-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.cms-300 .mst-modal--video .mst-modal__dialog {
    max-width: 1056px;
    background: #000;
}

.cms-300 .mst-modal--video .mst-modal__body {
    padding: 40px 0 0;
    overflow: hidden;
}

.cms-300 .mst-modal--video .mst-modal__close:before {
    background: var(--mst-white);
}

.cms-300 .mst-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.cms-300 .mst-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cms-300 .mst-modal--calc .mst-modal__dialog {
    width: auto;
    max-width: 100%;
    background: transparent;
    box-shadow: none;
}

.cms-300 .mst-modal--calc .mst-modal__body {
    padding: 0;
}

.cms-300 .mst-modal--calc .mst-modal__close {
    top: 10px;
    right: 10px;
}

.cms-300 .mst-modal--calc #vapevscigInline {
    width: 333px;
    max-width: 100%;
    margin: 0 !important;
}

/* Chargement du calculateur d'économies. */
.cms-300 .mst-calc-modal.is-loading {
    display: flex;
    width: 333px;
    max-width: 100%;
    min-height: 200px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--mst-white);
}

.cms-300 .mst-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--mst-beige);
    border-top-color: var(--mst-turquoise);
    border-radius: 50%;
    animation: mst-spin .8s linear infinite;
}

@keyframes mst-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cms-300 .mst-spinner {
        animation-duration: 2.4s;
    }
}

/* Agrandissement d'un visuel : image 4:5 + points + flèches tiennent dans la
 * hauteur de l'écran (154 px = marges de la fenêtre, points, flèches), sans
 * descendre sous 400 px (écran très bas : le corps de la fenêtre défile).
 * dvh : hauteur réellement visible sur mobile, barres du navigateur affichées. */
.cms-300 .mst-modal--zoom .mst-modal__dialog {
    max-width: max(400px, min(680px, calc((100vh - 154px) * .8 + 40px)));
    max-width: max(400px, min(680px, calc((100dvh - 154px) * .8 + 40px)));
}

.cms-300 .mst .mst-zoom img {
    display: block;
    width: 100%;
    height: auto;
}

/* Calculateur de consommation de e-liquide (cms-consommation-part.tpl), dans la
 * fenêtre : cms-v2.css n'est pas chargé sur cette page, on reprend ici son
 * apparence de la page 83. */
.cms-300 .mst-modal .bloc-conso {
    max-width: 330px;
    margin: 0 auto;
    border: 2px solid var(--mst-border);
    border-radius: 10px;
}

.cms-300 .mst-modal .bloc-conso form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    text-align: center;
}

.cms-300 .mst-modal .bloc-conso form p {
    color: var(--mst-text);
    font: 20px/1 var(--mst-title);
    text-align: center;
    text-transform: uppercase;
}

.cms-300 .mst-modal .bloc-conso fieldset {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.cms-300 .mst-modal .bloc-conso fieldset > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.cms-300 .mst-modal .bloc-conso fieldset span {
    color: var(--mst-orange-alt);
    font: 20px/1 var(--mst-title);
    text-transform: uppercase;
}

.cms-300 .mst-modal .bloc-conso .input-group {
    display: flex;
    width: 184px;
    align-items: center;
    justify-content: space-between;
    border: 2px solid var(--mst-border);
    border-radius: 5px;
}

.cms-300 .mst-modal .bloc-conso .btn-qty {
    display: flex;
    width: 40px;
    height: 26px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    cursor: pointer;
}

.cms-300 .mst-modal .bloc-conso input {
    width: 80px;
    border: 0;
    background: none;
    color: var(--mst-text);
    font: 16px/26px var(--mst-title);
    text-align: center;
}

.cms-300 .mst-modal .bloc-conso .text-vert {
    color: var(--mst-turquoise);
}

/* Maquette : nombre du résultat dans l'orange des choix actifs
 * (!important : global.css impose .text-orange en !important). */
.cms-300 .mst-modal .bloc-conso .text-orange {
    color: var(--mst-orange-alt) !important;
}

/* ---------------------------------------------------------------------------
 * Tablette et mobile
 * ------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    .cms-300 .mst-tools-carousel {
        margin: 0;
    }

    .cms-300 .mst-tools {
        grid-auto-columns: min(296px, 85%);
    }

    .cms-300 .mst .mst-tools-carousel__arrow {
        display: none;
    }

    .cms-300 .mst--js .mst-calendar {
        grid-template-columns: minmax(0, 1fr);
    }

    /* La case sélectionnée garde son conseil sous sa rangée (annotation Figma). */
    .cms-300 .mst-calendar__grid .mst-advice {
        grid-column: 1 / -1;
        margin: 8px 0;
    }

    /* Conseil sur toute la largeur de la grille : les visuels (format 4:5 des
     * posts Instagram) gardent une taille de téléphone, centrés. */
    .cms-300 .mst .mst-advice__body > p > img,
    .cms-300 .mst-advice__body .mst-slides,
    .cms-300 .mst .mst-advice__body .mst-video-preview {
        width: 100%;
        max-width: 360px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media only screen and (max-width: 767px) {
    .cms-300 .mst {
        --mst-section-pad: 40px;
    }

    .cms-300 .mst .mst-banner__img--desktop {
        display: none;
    }

    .cms-300 .mst .mst-banner__img--mobile {
        display: block;
    }

    /* Visuel mobile dessiné pour 393 px (786 px en @2x) : pas d'agrandissement flou au-delà. */
    .cms-300 .mst .mst-banner__img {
        max-width: 480px;
    }

    .cms-300 .mst-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cms-300 .mst-tabs::-webkit-scrollbar {
        display: none;
    }

    .cms-300 .mst-stats,
    .cms-300 .mst-stats--3,
    .cms-300 .mst-cards,
    .cms-300 .mst-contacts,
    .cms-300 .mst-resources,
    .cms-300 .mst-external {
        grid-template-columns: minmax(0, 1fr);
    }

    .cms-300 .mst-deb__profiles {
        flex-direction: column;
        align-items: flex-start;
        align-self: center;
    }

    .cms-300 .mst-banner-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .cms-300 .mst-banner-cta .mst-btn {
        width: 100%;
    }

    .cms-300 .mst-head {
        align-items: flex-start;
    }

    .cms-300 .mst-steps__nav,
    .cms-300 .mst-quiz__actions {
        flex-direction: column;
    }

    .cms-300 .mst-steps__nav .mst-btn,
    .cms-300 .mst-quiz__actions .mst-btn {
        width: 100%;
    }

    .cms-300 .mst-stepper li {
        flex-basis: 100px;
    }

    .cms-300 .mst-quiz__header {
        padding: 24px 60px 24px 20px;
    }

    .cms-300 .mst-quiz__result {
        padding: 20px;
    }

    .cms-300 .mst--js .mst-quiz__actions {
        padding: 0 20px 20px;
    }

    .cms-300 .mst-steps__card {
        padding: 30px;
    }

    .cms-300 .mst-challenge {
        flex-direction: column;
        align-items: stretch;
    }

    .cms-300 .mst-challenge__text {
        flex-basis: auto;
    }

    .cms-300 .mst-progress {
        flex-basis: auto;
    }

    .cms-300 .mst-calendar__card {
        gap: 18px;
        padding: 20px 14px;
    }

    .cms-300 .mst-calendar__title {
        flex: 1 1 auto;
    }

    .cms-300 .mst-calendar__legend {
        flex-direction: column;
    }

    .cms-300 .mst-calendar__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .cms-300 .mst .mst-day-cell {
        aspect-ratio: auto;
        min-height: 60px;
        padding: 10px 4px;
    }

    .cms-300 .mst .mst-day-cell__today {
        font-size: 12px;
    }

    .cms-300 .mst-advice {
        padding: 20px;
    }

    .cms-300 .mst-modal {
        padding: 10px;
    }
}

@media only screen and (max-width: 360px) {
    .cms-300 .mst .mst-day-cell__today {
        font-size: 10px;
        overflow-wrap: anywhere;
    }
}