/* In-house components: member area, free calendar, offers, reviews...
   Generic components are styled in rationnelle-ui.css. */


/* --- Comparison: bullets aligned across columns ---------------------------
   Each bullet is two lines tall once the three columns sit side by side, so a
   wrapping label does not shift the others. */
@media (min-width: 992px) {
    #comparison .list.list-icons li {
        min-height: 80px;
    }
}

/* --- Comparison: card header and separated rows --------------------------
   Tinted header with the option name, one row per bullet divided by a rule.
   The header follows the card's top radius. */
.comparatif-entete {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 28px;
    background: var(--surface-basse);
    border-bottom: 1px solid var(--bordure, #e3e1de);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.comparatif-carte-rationnelle .comparatif-entete {
    background: var(--primary-rgba-10);
}

/* Same header height on both sides so rows stay aligned. */
@media (min-width: 992px) {
    .comparatif-entete {
        min-height: 104px;
    }
}

.comparatif-entete p {
    color: var(--texte-secondaire);
}

.comparatif-pastille {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--bordure, #e3e1de);
    color: var(--texte-secondaire);
}

.comparatif-carte-rationnelle .comparatif-pastille {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

#comparison .comparatif-liste li {
    display: flex;
    align-items: center;
    padding: 14px 0 14px 32px;
    margin: 0;
    border-bottom: 1px solid var(--bordure, #e3e1de);
}

#comparison .comparatif-liste li:last-child {
    border-bottom: 0;
}

#comparison .comparatif-liste li > i {
    top: 50%;
    transform: translateY(-50%);
}

/* --- Process: number badge offset from the circle --------------------------
   Pushed along the diagonal, outside the disc. Centring in percent of the badge,
   offset in pixels, so all numbers land on the same point whatever their width. */
#features .process-step-circle .badge {
    transform: translate(-50%, -50%) translate(7px, -7px);
}

/* --- Highlighted phrase in a heading ---------------------------------------
   Headings are bold; the highlighted phrase uses the brand colour and a wavy
   underline. Offset in em so the line keeps its distance at any size. */
/* A lead that reads like a heading without being one: the H1 stays for the promise. */
.accroche-titre {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* ============================================================
   Container width on large screens
   ------------------------------------------------------------
   A proportional margin rather than a fixed cap: 84vw leaves 8 % on each
   side (109 px at 1366, 128 px at 1600). The 1440 px cap stops line length
   from growing; beyond 1715 px it takes over and the margin keeps growing.
   No extra padding: the margin already keeps content off the edges, the
   grid gutter is enough. Same selector as the legacy theme for equal
   specificity. Header and footer follow, so logo, menu and content align.
   The member area uses `container-fluid` and keeps the full width.
   ============================================================ */
@media (min-width: 1200px) {
    .container:not(.container-bs):not(.container-xl-custom):not(.container-xxl-custom) {
        max-width: min(1440px, 84vw);
    }
}

#cookieBanner .alert-dark,
#cookieBanner .alert-dark p {
    color: #dee2e6;
}

#cookieBanner .alert-dark .alert-link {
    color: #fff;
    text-decoration: underline;
}

/* ============================================================
   PRINT, BLUR AND GAUGES: shared rules
   ============================================================
   Used by partials included both on the public page and in the member area
   (`_complements.html` gauges, `_transition.html` bars), so they live here.
   `.no-print` too.
   ============================================================ */
@media print {
    .no-print,
    #header,
    #footer,
    .paywall-overlay {
        display: none !important;
    }

    .print-sheet {
        box-shadow: none !important;
        border: none !important;
    }

    .tab-pane {
        display: block !important;
        opacity: 1 !important;
    }

    #cookieBanner {
        display: none !important;
    }
}

/* Visual masking of paid content. The server never sends real values when
   `is_locked` is true: the blur is only cosmetic. */
.locked-blur {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

/* Public page sample: a preview, not a wall. One height-capped excerpt, faded
   at the bottom, enough to recognise the deliverable. */
.echantillon-verrouille {
    max-height: 320px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}

/* The teaser's six categories on an even row: two lines reserved for each
   label, truncated beyond (the full name is in the shopping list). */
.teaser-categorie-nom,
.teaser-categorie-aliment {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.6em;
}

/* Supplement dose gauges */
.supp-bar {
    height: 6px;
    border-radius: 3px;
    background: #eee7db;
    overflow: hidden;
}

.supp-bar-fill {
    height: 100%;
    border-radius: 3px;
}

/* Day-by-day bars of the transition protocol */
.day-bar {
    height: 48px;
    background: #eee7db;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.day-bar-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary);
    opacity: .85;
}
.text-10 { font-size: clamp(2.125rem, 1.647rem + 1.96vw, 4rem) !important;          line-height: 1.08; }
.text-11 { font-size: clamp(2.375rem, 1.833rem + 2.22vw, 4.5rem) !important;        line-height: 1.05; }
.text-12 { font-size: clamp(2.625rem, 2.02rem + 2.48vw, 5rem) !important;           line-height: 1.05; }

/* ============================================================
   RADII AND ELEVATION: one system each
   ============================================================
   Radius token at 12 px; pills stay for badges. Legacy `box-shadow-N` and
   `shadow` both map to three softer, consistent levels.
   ============================================================ */
:root {
    --border-radius: 12px;
    --border-radius2x: 20px;

    /* Three levels, named by use rather than value. */
    --ombre-1: 0 1px 2px rgba(32, 30, 29, .06), 0 2px 8px rgba(32, 30, 29, .06);
    --ombre-2: 0 2px 4px rgba(32, 30, 29, .05), 0 8px 24px rgba(32, 30, 29, .08);
    --ombre-3: 0 4px 8px rgba(32, 30, 29, .05), 0 16px 40px rgba(32, 30, 29, .10);
}

.box-shadow-1, .shadow-sm { box-shadow: var(--ombre-1) !important; }
.box-shadow-2, .box-shadow-3, .shadow { box-shadow: var(--ombre-2) !important; }
.box-shadow-4, .box-shadow-5, .box-shadow-6, .shadow-lg { box-shadow: var(--ombre-3) !important; }
.box-shadow-1-hover:hover { box-shadow: var(--ombre-2) !important; }
[class*="box-shadow-"]:before,
[class*="box-shadow-"]:after {
    pointer-events: none !important;
}

/* ============================================================
   MEMBER AREA: fixed sidebar on a brand background
   ============================================================
   Fixed bar on desktop, sliding drawer on phones.
   Background `--primary-300`, not `--primary`: white on #723b15 is 8.93:1, so
   every state stays compliant (6.4:1 sub-items, 6.9:1 hover, 5.5:1 active).
   ============================================================ */
:root {
    --espace-largeur: 264px;
    --espace-fond: var(--primary-300);
}

.espace-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--espace-largeur);
    background: var(--espace-fond);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1040;
}

.espace-sidebar-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
}

.espace-logo img {
    display: block;
    width: 176px;
    height: auto;
}

.espace-fermer {
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    padding: .25rem .5rem;
}

.espace-compte {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 1rem 1rem;
    padding: .625rem .75rem;
    background: rgba(255, 255, 255, .10);
    border-radius: var(--border-radius);
    font-size: .875rem;
    /* A long email address must not widen the bar. */
    overflow: hidden;
}

.espace-compte-icone {
    flex: 0 0 auto;
    opacity: .85;
}

.espace-compte-nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.espace-nav {
    flex: 1 1 auto;
    padding: 0 .75rem;
}

.espace-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.espace-lien,
.espace-lien-discret {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    margin-bottom: .125rem;
    border-radius: var(--border-radius);
    color: #fff;
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease;
}

.espace-lien i,
.espace-lien-discret i {
    width: 1.125rem;
    text-align: center;
    flex: 0 0 auto;
    opacity: .9;
}

.espace-lien:hover,
.espace-lien-discret:hover,
.espace-lien:focus-visible,
.espace-lien-discret:focus-visible {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

.espace-lien.actif {
    background: rgba(255, 255, 255, .18);
    font-weight: 700;
}

.espace-sous-nav {
    margin: .125rem 0 .5rem 2.1rem !important;
    border-left: 1px solid rgba(255, 255, 255, .22);
}

.espace-sous-lien {
    display: block;
    padding: .375rem .75rem;
    color: rgba(255, 255, 255, .8);
    font-size: .875rem;
    text-decoration: none;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.espace-sous-lien:hover,
.espace-sous-lien:focus-visible {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

.espace-sous-lien.actif {
    color: #fff;
    font-weight: 700;
    box-shadow: inset 2px 0 0 #fff;
}

.espace-sidebar-pied {
    padding: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.espace-lien-discret {
    font-size: .875rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .82);
}

/* --- Content column and top bar --------------------------------------------- */
.espace-contenu {
    margin-left: var(--espace-largeur);
}

/* On desktop the cookie banner starts where the content starts. `start-0` is
   !important, hence this one. */
@media (min-width: 992px) {
    body:has(.espace-sidebar) #cookieBanner {
        left: var(--espace-largeur) !important;
    }
}

.espace-topbar {
    display: none;
}

.espace-voile {
    position: fixed;
    inset: 0;
    background: rgba(32, 30, 29, .45);
    z-index: 1035;
}

/* --- Phone and tablet: the drawer ------------------------------------------- */
@media (max-width: 991.98px) {
    .espace-sidebar {
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: var(--ombre-3);
    }

    .espace-sidebar.ouvert {
        transform: translateX(0);
    }

    .espace-contenu {
        margin-left: 0;
    }

    .espace-topbar {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .625rem .75rem;
        background: var(--surface, #fff);
        border-bottom: 1px solid var(--bordure, #e3e1de);
        position: sticky;
        top: 0;
        z-index: 1020;
    }

    .espace-topbar-espace {
        flex: 1 1 auto;
    }

    .espace-topbar-logo img {
        display: block;
        height: auto;
    }

    .espace-burger {
        background: none;
        border: 1px solid var(--bordure, #e3e1de);
        border-radius: var(--border-radius);
        color: var(--texte, #201e1d);
        /* 44 px touch targets, as everywhere on the site. */
        min-width: 44px;
        min-height: 44px;
    }

    /* Page scroll is locked while the drawer is open. */
    body.espace-fige {
        overflow: hidden;
    }
}

@media (min-width: 992px) {
    .espace-voile {
        display: none;
    }
}

/* ============================================================
   DARK MODE
   ============================================================
   Role tokens (surface, text, border) get both value sets; component rules
   below are written once and read the tokens.
   · The visitor's choice beats the system's: `prefers-color-scheme` gives the
     default, `data-theme` on <html> (set by the toggle, stored locally)
     overrides it both ways.
   · Link orange changes value: #995427 is 2.91:1 on dark; #c67139 gives 4.64:1.
   · Buttons do not change: white on `--primary` is 4.54:1 on any background.
   Measured dark text contrast: 13.6:1 on a card, 15.1:1 on the page, 6.8:1
   for secondary text.
   ============================================================ */
:root {
    --lien: var(--primary-100);
    /* Success and danger colours become tokens with light and dark values, both
   readable. */
    --succes-texte: #08875b;
    --danger-texte: #eb0000;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="clair"]) {
        --surface: #16130f;
        --surface-basse: #0f0d0b;
        --surface-haute: #211d19;
        --texte: #ece7e1;
        --texte-secondaire: #aca49c;
        --bordure: #382f28;
        --lien: #c67139;
        /* Legacy text greys follow the theme. */
        --grey: #aca49c;
        --default: #aca49c;
        --succes-texte: #0cc082;
        --danger-texte: #ff5757;
        color-scheme: dark;
    }
}

:root[data-theme="sombre"] {
    --surface: #16130f;
    --surface-basse: #0f0d0b;
    --surface-haute: #211d19;
    --texte: #ece7e1;
    --texte-secondaire: #aca49c;
    --bordure: #382f28;
    --lien: #c67139;
    --grey: #aca49c;
    --default: #aca49c;
    --succes-texte: #0cc082;
    --danger-texte: #ff5757;
    color-scheme: dark;
}

.espace-topbar {
    background-color: var(--surface-haute);
    border-color: var(--bordure);
}

/* Alert banners in dark mode: same hue, translucent over the surface. */
:root[data-theme="sombre"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.35);
    color: var(--texte);
}
:root[data-theme="sombre"] .alert-info {
    background-color: rgba(13, 202, 240, 0.10);
    border-color: rgba(13, 202, 240, 0.30);
    color: var(--texte);
}
:root[data-theme="sombre"] .alert-success {
    background-color: rgba(12, 192, 130, 0.12);
    border-color: rgba(12, 192, 130, 0.35);
    color: var(--texte);
}
:root[data-theme="sombre"] .alert-danger {
    background-color: rgba(255, 87, 87, 0.12);
    border-color: rgba(255, 87, 87, 0.35);
    color: var(--texte);
}
:root[data-theme="sombre"] .alert .alert-link,
:root[data-theme="sombre"] .alert strong {
    color: inherit;
}

hr,
.border-top,
.border-bottom,
.border {
    border-color: var(--bordure) !important;
}

/* --- Theme toggle ------------------------------------------------------------- */
.bascule-theme {
    background: none;
    border: 1px solid var(--bordure);
    border-radius: var(--border-radius);
    color: var(--texte);
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
    padding: .25rem .625rem;
}

.bascule-theme:hover,
.bascule-theme:focus-visible {
    background-color: var(--surface-basse);
}

/* The icon shows the theme it switches to. */
.bascule-theme .icone-sombre { display: inline; }
.bascule-theme .icone-clair { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="clair"]) .bascule-theme .icone-sombre { display: none; }
    :root:not([data-theme="clair"]) .bascule-theme .icone-clair { display: inline; }
}

:root[data-theme="sombre"] .bascule-theme .icone-sombre { display: none; }
:root[data-theme="sombre"] .bascule-theme .icone-clair { display: inline; }

/* The member sidebar keeps its brand colour in both themes. */
.bascule-theme-espace .icone-sombre { display: inline; }
.bascule-theme-espace .icone-clair { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="clair"]) .bascule-theme-espace .icone-sombre { display: none; }
    :root:not([data-theme="clair"]) .bascule-theme-espace .icone-clair { display: inline; }
}

:root[data-theme="sombre"] .bascule-theme-espace .icone-sombre { display: none; }
:root[data-theme="sombre"] .bascule-theme-espace .icone-clair { display: inline; }

.text-dark,
.text-color-dark {
    color: var(--texte) !important;
}

.featured-box,
.featured-box .box-content {
    background-color: var(--surface-haute);
    border-color: var(--bordure);
}

/* --- Contrast fixes found by the two-theme audit ---------------------------
   Checked on the rendered DOM, walking up to the first opaque background. */

/* On a brand-colour band, highlights and eyebrows turn white. */
.bg-color-primary .title-highlight,
.bg-color-primary-200 .title-highlight,
.section-primary .title-highlight,
.call-to-action-primary .title-highlight,
[class*="bg-color-primary"] .text-color-tertiary,
.call-to-action-primary .text-color-tertiary {
    color: #fff !important;
    text-decoration-color: rgba(255, 255, 255, .65);
}

.price,
.plan-price .price,
.pricing-block .plan-price .price {
    color: var(--texte) !important;
}

/* The member area footer follows the theme like the content column. */
#footer.espace-contenu {
    background-color: var(--surface-basse);
    color: var(--texte-secondaire);
}

#footer.espace-contenu a {
    color: var(--texte-secondaire);
}

/* A bare link in these bands would inherit `a { color: var(--lien) }`. */
.alert-primary a, .alert-secondary a {
    color: #fff; /* --primary-inverse came from the legacy theme */
    text-decoration: underline;
}

/* Intended capitals: eyebrows, stat labels, badges, buttons. */
.text-uppercase {
    letter-spacing: 0.045em;
}


/* ══════════════════════════════════════════════════════════════════════
   Product screenshots
   ══════════════════════════════════════════════════════════════════════
   Captured in light theme only. In dark mode this frame makes a screenshot
   read as a screen rather than a hole in the page; in light mode it only
   separates it from the grey section. */
.capture-produit {
    border: 1px solid var(--bordure);
}


/* Product section header between 992 and 1249 px: the text size is fixed in
   this range so title and lead each fit on one line. Below 992 px wrapping
   is intended. */
@media (min-width: 992px) and (max-width: 1249.98px) {
    /* `!important` because the size utilities carry it too (see `.text-7`). */
    .entete-produit h2 {
        font-size: 1.86rem !important;
    }

    .entete-produit p {
        font-size: 1.12rem !important;
    }
}


/* A page that locks its theme offers no toggle. See `{% block theme_impose %}`
   in index.html: the home page is light by design. */
[data-theme-verrouille] .bascule-theme {
    display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════
   Breakdown donut legend
   ══════════════════════════════════════════════════════════════════════
   Rendered in HTML, not in the canvas (Chart.js clips it on narrow columns):
   it wraps, follows the dark theme through `--texte`, is selectable and read
   aloud. The swatch colour is set by the script from the brand tokens. */
.donut-legende {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--texte);
}

.donut-legende li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* A label never breaks in the middle: it wraps as a whole. */
    white-space: nowrap;
}

.donut-puce {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

/* On the public page the chart initialises when the Nutrition tab opens: the
   list stays empty until then and reserves no space. */
.donut-legende:empty {
    margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   The donut card aligns with the neighbouring tile grid
   ══════════════════════════════════════════════════════════════════════
   The canvas has no own height: `.donut-boite` takes the remaining space
   (`flex: 1 1 auto`) and `maintainAspectRatio: false` lets Chart.js fit it.
   The donut stays round, centred on the smaller dimension. `min-height` covers
   the stacked phone layout. */
.carte-camembert {
    display: flex;
    flex-direction: column;
}

.donut-boite {
    position: relative;
    flex: 1 1 auto;
    min-height: 190px;
}

.donut-boite > canvas {
    position: absolute;
    inset: 0;
}


/* The "My plan" tile grid fills its column: `align-content: stretch` spreads
   the two tile rows, `h-100` fills each cell. Below 576 px tiles are full
   width and follow each other. */
@media (min-width: 576px) {
    /* `flex`, not `height: 100%`: a percentage does not resolve against a parent
   sized by the flex flow. */
    .tuiles-ration {
        display: flex;
        flex-direction: column;
    }

    .tuiles-ration > .row {
        flex: 1 1 auto;
        align-content: stretch;
    }

    /* Stretched tiles centre label, figure and unit vertically. */
    .tuiles-ration .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* ============================================================
   .box-shadow-1: a positioning context for its pseudo-element
   ============================================================
   The shadow is drawn on an absolute `::before`, sized to the nearest
   positioned ancestor. Give the element its own context; elements already
   positioned by a class keep their position. */
.box-shadow-1:not(.position-absolute):not(.position-fixed):not(.position-sticky):not(.p-absolute):not(.p-fixed) {
    position: relative;
}

/* Help centre: the full-width "Getting started" section lists its articles on
   two columns on wide screens. */
@media (min-width: 992px) {
    .aide-deux-colonnes { column-count: 2; column-gap: 2.5rem; }
    .aide-deux-colonnes > li { break-inside: avoid; }
}

/* Help articles: the `.lead` intro keeps the body font. */
.article-content .lead {
    font-size: inherit;
    font-weight: inherit;
    /* Same line height as paragraphs. */
    line-height: 26px;
    letter-spacing: normal;
}

.vitrine-etapes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vitrine-etape {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    text-align: left;
    color: var(--texte);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.vitrine-etape:hover {
    background: rgba(255, 255, 255, .6);
}

.vitrine-etape:focus-visible {
    outline: 3px solid var(--primary-rgba-40);
    outline-offset: 2px;
}

.vitrine-etape.is-active {
    background: #fff;
    border-color: var(--primary-rgba-20);
    box-shadow: 0 10px 30px -12px rgba(114, 59, 21, .28);
}

.vitrine-numero {
    flex: 0 0 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    color: var(--primary-100);
    background: var(--primary-rgba-10);
    border-radius: 50%;
    transition: background-color .2s, color .2s;
}

.vitrine-etape.is-active .vitrine-numero {
    color: #fff;
    background: var(--primary);
}

.vitrine-libelle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
}

.vitrine-libelle strong {
    font-size: 1.05rem;
    color: var(--texte);
}

.vitrine-detail {
    font-size: .95rem;
    color: var(--texte-secondaire);
}

.vitrine-cadre {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(114, 59, 21, .12);
    border-radius: 14px;
    box-shadow: 0 30px 60px -25px rgba(114, 59, 21, .35), 0 8px 20px -10px rgba(0, 0, 0, .12);
}

.vitrine-barre {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #f6f1ec;
    border-bottom: 1px solid rgba(114, 59, 21, .1);
}

.vitrine-pastilles {
    display: inline-flex;
    gap: 6px;
}

.vitrine-pastilles i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e2d5ca;
}

.vitrine-adresse {
    flex: 1;
    max-width: 360px;
    margin: 0 auto;
    padding: 3px 12px;
    font-size: .8rem;
    text-align: center;
    color: var(--texte-secondaire);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #fff;
    border-radius: 999px;
}

.vitrine-ecrans {
    display: grid;
}

.vitrine-ecran {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}

.vitrine-ecran.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease;
}

.vitrine-ecran img {
    display: block;
    width: 100%;
    height: auto;
}

.vitrine-legende {
    display: none;
    margin: 14px 0 0;
    text-align: center;
    color: var(--texte-secondaire);
}

@media (prefers-reduced-motion: reduce) {
    .vitrine-ecran,
    .vitrine-ecran.is-active {
        transition: none;
    }
}

@media (max-width: 991.98px) {
    .vitrine-etapes {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        /* The active pill's shadow must not be clipped. */
        padding: 4px 2px 10px;
    }

    .vitrine-etapes::-webkit-scrollbar {
        display: none;
    }

    .vitrine-etape {
        flex: 0 0 auto;
        width: auto;
        align-items: center;
        gap: 8px;
        padding: 8px 14px 8px 8px;
        border-radius: 999px;
        border-color: rgba(114, 59, 21, .12);
        background: rgba(255, 255, 255, .6);
    }

    .vitrine-numero {
        flex-basis: 26px;
        height: 26px;
        font-size: .8rem;
    }

    .vitrine-libelle strong {
        font-size: .92rem;
        white-space: nowrap;
    }

    .vitrine-detail {
        display: none;
    }

    .vitrine-legende {
        display: block;
    }

    .vitrine-barre {
        padding: 8px 10px;
    }

    .vitrine-pastilles i {
        width: 8px;
        height: 8px;
    }
}

/* Full step title in the left column; one word on the mobile pill row. */
.vitrine-titre-court {
    display: none;
}

@media (max-width: 991.98px) {
    .vitrine-titre-long {
        display: none;
    }

    .vitrine-titre-court {
        display: inline;
    }
}

/* Home budget table: aligned figures, no heavy borders. */
.tableau-budget th,
.tableau-budget td {
    padding: .75rem .5rem;
    vertical-align: middle;
}

.tableau-budget td {
    white-space: nowrap;
}

/* Home FAQ: room reserved for the chevron so long questions do not run under it. */
#faqAccordion .accordion-toggle {
    padding-right: 3.75rem !important;
}

@media (max-width: 575.98px) {
    .tableau-budget th,
    .tableau-budget td {
        padding: .6rem .3rem;
        font-size: .9rem;
    }

    .tableau-budget tbody th {
        white-space: nowrap;
    }
}

/* Mobile action bar on the home page; the back-to-top button rises above it
   while it is visible. */
.barre-action-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid rgba(114, 59, 21, .12);
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .25);
}

.barre-action-mobile[hidden] {
    display: none !important;
}

@media (min-width: 992px) {
    .barre-action-mobile {
        display: none !important;
    }
}


/* --- Free calendar: print stylesheet ---------------------------------------
   Same content as the screen, styled as a document: white, thin rules, plain
   week titles, sections that do not split across pages. */
.impression-seulement {
    display: none;
}

@media print {
    @page {
        size: A4;
        margin: 14mm 14mm 16mm;
    }

    .calendrier-offert {
        font-size: 10pt;
        line-height: 1.45;
        color: #222;
        padding: 0 !important;
        max-width: none;
    }

    .calendrier-offert .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .calendrier-offert .impression-seulement {
        display: block;
    }

    .calendrier-offert .impression-entete {
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #ae6332;
        padding-bottom: 4px;
        margin-bottom: 12px;
        font-size: 9pt;
        color: #555;
    }

    .calendrier-offert .impression-marque {
        font-weight: 800;
        color: #ae6332;
    }

    .calendrier-offert .impression-pied {
        margin-top: 14px;
        padding-top: 6px;
        border-top: 1px solid #ccc;
        font-size: 8.5pt;
        color: #555;
    }

    .calendrier-offert .badge,
    .calendrier-offert .progress,
    .calendrier-offert .repartition-semaine,
    .calendrier-offert .doses-masquees,
    .calendrier-offert i.fas,
    .calendrier-offert .toggle-title:before,
    .calendrier-offert .toggle-title:after {
        display: none !important;
    }

    .calendrier-offert h1 {
        font-size: 16pt;
        margin-bottom: 2px;
    }

    .calendrier-offert h1 .text-color-primary {
        color: #222 !important;
    }

    .calendrier-offert .card,
    .calendrier-offert .alert,
    .calendrier-offert .toggle > section {
        box-shadow: none !important;
        background: #fff !important;
        color: #222 !important;
        border: 1px solid #d9d4ce !important;
        border-radius: 4px !important;
        padding: 8px 10px !important;
        margin-bottom: 8px !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .calendrier-offert .card-header,
    .calendrier-offert .card-body {
        background: #fff !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .calendrier-offert .alert-primary {
        border: 1px solid #ae6332 !important;
    }

    .calendrier-offert .alert-danger {
        border: 1px solid #b3261e !important;
    }

    .calendrier-offert .alert-success {
        border: 1px solid #1f7a4d !important;
    }

    .calendrier-offert .alert-warning {
        border: 1px solid #c28a12 !important;
    }

    .calendrier-offert .alert strong,
    .calendrier-offert .card-title,
    .calendrier-offert h3,
    .calendrier-offert h4,
    .calendrier-offert h5 {
        color: #222 !important;
        font-size: 10.5pt !important;
    }

    .calendrier-offert .toggle-title {
        display: block;
        background: none !important;
        color: #ae6332 !important;
        font-weight: 800;
        font-size: 11pt;
        padding: 0 0 4px !important;
        border: 0 !important;
        border-bottom: 1px solid #ae6332 !important;
        margin-bottom: 6px;
    }

    .calendrier-offert .toggle-content {
        padding: 0 !important;
    }

    .calendrier-offert .form-check {
        padding-left: 0;
        margin-bottom: 2px !important;
    }

    .calendrier-offert .form-check-input {
        display: none;
    }

    .calendrier-offert .form-check-label:before {
        content: "\2610\00a0\00a0";
    }

    .calendrier-offert .list-icons li {
        padding-left: 0 !important;
    }

    .calendrier-offert .list-icons li:before {
        content: "\2022\00a0";
    }

    /* All text black, including text that was white on an orange title band. */
    .calendrier-offert p,
    .calendrier-offert li,
    .calendrier-offert label,
    .calendrier-offert span,
    .calendrier-offert .alert *,
    .calendrier-offert .text-color-grey {
        color: #222 !important;
    }

    .calendrier-offert p,
    .calendrier-offert li {
        line-height: 1.4 !important;
        margin-bottom: 3px !important;
        font-size: 9.5pt !important;
    }

    .calendrier-offert ul {
        margin-top: 3px !important;
        margin-bottom: 0 !important;
    }

    .calendrier-offert *,
    .calendrier-offert *:after {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Screen columns become a grid: signs and questions two per row. */
    .calendrier-offert .row:has(> .col-xl-6),
    .calendrier-offert .row:has(> .col-md-6) {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
        margin: 0 !important;
    }

    .calendrier-offert .row:has(> .col-xl-6) > .col-xl-6,
    .calendrier-offert .row:has(> .col-md-6) > .col-md-6 {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .calendrier-offert .toggle-content span,
    .calendrier-offert .toggle-content strong {
        font-size: 9.5pt !important;
    }

    .calendrier-offert h3 {
        margin: 10px 0 6px !important;
    }
}

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a,
.pricing-table .plan .plan-price .price-label,
.pricing-block .plan-price .price-label,
.plan-price .price-label {
    font-size: max(12px, 0.75rem);
}

:root:not([data-theme="sombre"]) .text-muted {
    color: #6b625a !important;
}

/* Landing page top on phones: tighter spacing; desktop unchanged. */
@media (max-width: 767.98px) {
    .hero-atterrissage {
        padding-top: 16px !important;
    }
    .hero-atterrissage > .container {
        padding-top: 0 !important;
    }
}

/* Sticky "Calculate the ration" button on phones (landing pages). */
.barre-calcul {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--light, #ffffff);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
}

/* --- Beta-tester reviews (home, partials/_avis_beta.html) ------------------
   Looping ribbon without a library. The review set is rendered twice; each
   set ends with a gap equal to the card gap, so -50 % lands exactly on the
   second copy and the seam is invisible.
   Card width is relative to the viewport (cqw units): five reviews from
   1440 px, four on laptops, three then two below, one and a peek on phones.
   The ribbon scrolls for everyone, reduced motion included; hover pauses it. */
.avis-fenetre {
    container-type: inline-size;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.avis-ruban {
    --avis-ecart: 20px;
    display: flex;
    width: max-content;
    animation: avis-defilement calc(var(--avis-nombre, 5) * 9s) linear infinite;
}
.avis-ruban:hover,
.avis-ruban:focus-within,
.avis-ruban:focus {
    animation-play-state: paused;
}
.avis-ruban:focus-visible {
    outline: 2px solid var(--tertiary);
    outline-offset: 4px;
}
.avis-serie {
    display: flex;
    gap: var(--avis-ecart);
    padding-right: var(--avis-ecart);
}
.avis-carte {
    flex: 0 0 auto;
    width: calc((100cqw - 4 * var(--avis-ecart)) / 5);
    margin: 0;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: rgba(0, 0, 0, .16);
    color: #fff;
}
.avis-guillemet {
    font-size: 1.4rem;
    color: var(--tertiary);
    margin-bottom: 10px;
}
.avis-texte {
    flex: 1 1 auto;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: #fff;
}
.avis-signature {
    font-size: .9rem;
    color: rgba(255, 255, 255, .85);
}
.avis-signature strong {
    color: #fff;
}
/* Discreet but readable: review provenance must stay visible. */
.avis-provenance {
    font-size: .78rem;
    color: #fff;
}
@keyframes avis-defilement {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (max-width: 1439.98px) {
    .avis-carte {
        width: calc((100cqw - 3 * var(--avis-ecart)) / 4);
    }
}
@media (max-width: 1199.98px) {
    .avis-carte {
        width: calc((100cqw - 2 * var(--avis-ecart)) / 3);
    }
}
@media (max-width: 991.98px) {
    .avis-carte {
        width: calc((100cqw - var(--avis-ecart)) / 2);
    }
}
@media (max-width: 767.98px) {
    .avis-ruban {
        --avis-ecart: 14px;
    }
    .avis-carte {
        width: 82cqw;
    }
}

/* --- "Free calendar" campaign page -------------------------------------------
   The form card is the page's only action: tinted hero, brand-colour outline,
   clear shadow and a band naming what you get. */
.hero-campagne {
    background: #f8efe6 !important;
}
.carte-calendrier {
    border: 2px solid var(--primary) !important;
    box-shadow: 0 18px 40px rgba(174, 99, 50, .22) !important;
    overflow: hidden;
}
.carte-calendrier-bandeau {
    background: var(--primary);
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
}
/* On phones the lead and title are smaller so the form stays on the first
   screen; desktop unchanged. */
@media (max-width: 767.98px) {
    .hero-campagne .accroche-titre,
    .hero-campagne h1 {
        font-size: 1.45rem !important;
    }
    .hero-campagne .lead {
        font-size: 1rem !important;
    }
    /* Section titles stay below the page title. */
    .titre-campagne {
        font-size: 1.25rem !important;
    }
}
/* Phone: title alone, larger and centred; less space between form and example. */
@media (max-width: 991.98px) {
    .hero-campagne h1 {
        font-size: 1.75rem !important;
        text-align: center;
    }
    .hero-campagne > .container { padding-bottom: 0 !important; }
    .hero-campagne { padding-bottom: 24px !important; }
    .hero-campagne + .section { padding-top: 24px !important; }
    .hero-campagne + .section > .container { padding-top: 0 !important; }
}
:root[data-theme="sombre"] .hero-campagne {
    background: #2a221c !important;
}

/* --- Raw/kibble split of a transition week --------------------------------
   (partials/_transition.html). Two labelled parts on a visible background. */
.repartition-semaine {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
/* On phones the bar goes under the week title; on desktop it sits next to the grams. */
@media (max-width: 575.98px) {
    .repartition-semaine {
        margin-top: 12px;
    }
}
.repartition-cru,
.repartition-croquettes {
    padding: 8px 10px;
    min-width: max-content;
}
.repartition-cru {
    background: var(--primary);
    color: #ffffff;
}
.repartition-croquettes {
    flex: 1 1 auto;
    background: #efe2d4;
    color: #5a4636;
    text-align: right;
}
:root[data-theme="sombre"] .repartition-croquettes {
    background: #3a2f27;
    color: #e8d9ca;
}


/* ══════════════════════════════════════════════════════════════════════
   Member area visual system
   ══════════════════════════════════════════════════════════════════════
   Scoped to `.espace-contenu` (espace/_base.html): public pages, the free
   calendar and the result page are unaffected, even when sharing a partial.
   1. Buttons in normal case. Three variants: primary (`btn-primary`),
      secondary (`btn-light border`), discreet (`btn-link`).
   2. Three alert roles from the palette: info (olive), caution (amber),
      danger (red). Translucent background, theme text, same in both themes.
   3. Footer at the bottom on short pages. */

/* 1. Boutons */
.espace-contenu .btn-modern {
    text-transform: none;
    letter-spacing: normal;
    font-size: .95rem;
}

/* 2. Alertes */
.espace-contenu .alert {
    color: var(--texte, #212529);
    border-width: 1px;
    border-style: solid;
    border-radius: 14px;
}
/* Legacy white text in `.alert-primary` is reset for the translucent background. */
.espace-contenu .alert .alert-heading,
.espace-contenu .alert strong,
.espace-contenu .alert :is(p, h1, h2, h3, h4, h5, h6, li, i) {
    color: inherit;
}
.espace-contenu .alert .alert-link {
    color: var(--lien);
}

/* Info: anything informative without urgency, success included. */
.espace-contenu .alert.alert-info,
.espace-contenu .alert.alert-primary,
.espace-contenu .alert.alert-secondary,
.espace-contenu .alert.alert-success,
.espace-contenu .alert.alert-default {
    background-color: rgba(122, 132, 80, .10);
    border-color: rgba(122, 132, 80, .30);
    --pastille: var(--secondary-100);
}

/* Caution: to do soon (weigh-in, bag to finish). */
.espace-contenu .alert.alert-warning {
    background-color: rgba(201, 138, 0, .12);
    border-color: rgba(201, 138, 0, .35);
    --pastille: #c98a00;
}

/* Danger: do not serve, irreversible action. */
.espace-contenu .alert.alert-danger {
    background-color: rgba(220, 53, 69, .10);
    border-color: rgba(220, 53, 69, .30);
    --pastille: var(--danger-texte);
}

/* `bg-color-grey` keeps its neutral background: these notes have no role. */
.espace-contenu .alert.bg-color-grey {
    border-color: var(--bordure, #dee2e6);
}

/* 3. Footer at the bottom of the screen */
.body:has(.espace-sidebar) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.body:has(.espace-sidebar) > .main {
    flex: 1 0 auto;
}

/* 4. Thawing on phones: "J'ai sorti ce sachet" is tapped one-handed in the
   evening. 44 px tall. */
@media (max-width: 575.98px) {
    .espace-contenu .defrost-mark-btn {
        min-height: 44px;
        padding: .5rem 1rem;
    }
}

/* 5. Long page summary (espace/alimentation/_sommaire.html): a row that
   scrolls sideways on phones, anchors clear of the top bar. */
.espace-contenu .sommaire-espace ul {
    overflow-x: auto;
    padding-bottom: .25rem;
    -webkit-overflow-scrolling: touch;
}
.espace-contenu :is(#transition-avant, #transition-semaines, #transition-difficultes,
                    #transition-questions, #courses-congelateur, #courses-liste,
                    #preparer-le-lot) {
    scroll-margin-top: 5rem;
}

/* 6. Tab bar, phone and tablet (espace/_base.html): five equal tabs fixed at
   the bottom, 60 px plus the iPhone home indicator area. Page and cookie
   banner rise accordingly. Below the overlay and the menu drawer (1035, 1040). */
@media (max-width: 991.98px) {
    .espace-onglets {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        min-height: 60px;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: var(--surface-haute, #fff);
        border-top: 1px solid var(--bordure, #e3e1de);
        box-shadow: 0 -2px 8px rgba(32, 30, 29, .06);
    }
    .espace-onglet {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        min-height: 60px;
        padding: .35rem .15rem;
        background: none;
        border: 0;
        color: var(--texte-secondaire, #6b6b6b);
        font-size: .7rem;
        line-height: 1.1;
        text-decoration: none;
        text-align: center;
    }
    .espace-onglet i {
        font-size: 1.15rem;
    }
    .espace-onglet span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .espace-onglet.actif,
    .espace-onglet[aria-expanded="true"] {
        color: var(--lien);
        font-weight: 700;
    }
    .espace-onglet:focus-visible {
        outline: 2px solid var(--lien);
        outline-offset: -4px;
    }
    .body:has(.espace-onglets) {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
    body:has(.espace-onglets) #cookieBanner {
        bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }
}


/* --- Result page offer card ------------------------------------------------
   A real sales card: promise and four illustrated benefits on the left, price
   and button in a cream panel on the right. On phones: title, price,
   benefits, button. */
.offre-resultat {
    display: grid;
    grid-template-areas: "entete" "tarif" "avantages" "action";
    background: var(--surface, #fff);
    border: 1px solid var(--primary-rgba-20);
    border-radius: 20px;
    box-shadow: 0 24px 48px -24px rgba(114, 59, 21, .35);
    overflow: hidden;
}

.offre-resultat-entete { grid-area: entete; padding: 28px 24px 8px; }
.offre-resultat-tarif { grid-area: tarif; padding: 12px 24px 4px; }
.offre-resultat-avantages { grid-area: avantages; }
.offre-resultat-action { grid-area: action; padding: 8px 24px 28px; }

.offre-resultat-pastille {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--secondary-rgba-10);
    color: var(--secondary-300);
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.offre-resultat-titre {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 8px;
    color: var(--texte, #201e1d);
}

.offre-resultat-sous-titre {
    font-size: 1.05rem;
    color: var(--texte-secondaire, #6b6b6b);
    margin: 0;
}

.offre-resultat-libelle {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 6px;
}

.offre-resultat-montant {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.offre-resultat-prix {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--texte, #201e1d);
    letter-spacing: -.02em;
}

.offre-resultat-periode {
    font-size: 1.05rem;
    color: var(--texte-secondaire, #6b6b6b);
    margin-left: 6px;
}

.offre-resultat-engagement {
    font-size: .9rem;
    color: var(--texte-secondaire, #6b6b6b);
    margin: 8px 0 0;
}

.offre-resultat-avantages {
    list-style: none;
    margin: 0;
    padding: 16px 24px 8px;
}

.offre-resultat-avantages li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--bordure, #e3e1de);
}

.offre-resultat-avantages li:first-child { border-top: 0; }

.offre-resultat-avantages strong {
    display: block;
    font-size: 1.08rem;
    color: var(--texte, #201e1d);
    line-height: 1.35;
}

.offre-resultat-avantages li > span:last-child {
    font-size: .92rem;
    color: var(--texte-secondaire, #6b6b6b);
    line-height: 1.45;
}

.offre-resultat-icone {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-rgba-10);
    color: var(--primary);
    font-size: 1.15rem;
}

.offre-resultat-bouton {
    font-size: 1.1rem !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    border-radius: 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 12px 24px -10px rgba(174, 99, 50, .6);
}

.offre-resultat-garanties {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin: 14px 0 4px;
    padding: 0;
    font-size: .88rem;
    color: var(--texte, #201e1d);
}

.offre-resultat-garanties i {
    color: var(--secondary);
    margin-right: 6px;
}

.offre-resultat-moyens {
    text-align: center;
    font-size: .8rem;
    color: var(--texte-secondaire, #6b6b6b);
    margin: 0 0 14px;
}

.offre-resultat-autres {
    display: block;
    text-align: center;
    font-size: .92rem;
    font-weight: 600;
    padding: 10px 0 0;
    border-top: 1px solid var(--bordure, #e3e1de);
}

@media (min-width: 992px) {
    .offre-resultat {
        grid-template-columns: 1.35fr 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "entete tarif"
            "avantages tarif"
            "avantages action";
        max-width: 1040px;
        margin-left: auto;
        margin-right: auto;
    }

    .offre-resultat-entete { padding: 40px 40px 8px; }
    .offre-resultat-titre { font-size: 2rem; }
    .offre-resultat-avantages { padding: 16px 40px 36px; }

    /* The price panel fills the right column, on cream. */
    .offre-resultat-tarif,
    .offre-resultat-action {
        background: var(--tertiary--300);
        padding-left: 36px;
        padding-right: 36px;
        border-left: 1px solid var(--primary-rgba-10);
    }

    .offre-resultat-tarif {
        padding-top: 48px;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .offre-resultat-action { padding-top: 20px; padding-bottom: 36px; }
    .offre-resultat-prix { font-size: 3.8rem; }
}


/* --- Gap at 100 % raw (free calendar, confirmation) -------------------------
   What the usual rule's grams cover once the pet is fully raw. Same
   comparison as the result page. */
.ecart-cru-complet {
    background: var(--tertiary--300);
    border: 1px solid var(--primary-rgba-20);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 4px 0 8px;
    text-align: left;
}

.ecart-cru-complet-titre {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--texte, #201e1d);
    margin: 0 0 4px;
}

.ecart-cru-complet-texte {
    font-size: .92rem;
    color: var(--texte-secondaire, #6b6b6b);
    margin: 0 0 14px;
}

.ecart-cru-complet-ligne {
    display: grid;
    grid-template-columns: 11.5rem 1fr 3.2rem;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    margin-top: 8px;
}

.ecart-cru-complet-ligne .progress {
    height: .8rem;
    margin: 0;
    background: rgba(0, 0, 0, .06);
}

/* On phones the label sits above its bar: both bars keep the same width and start. */
@media (max-width: 575.98px) {
    .ecart-cru-complet-ligne {
        grid-template-columns: 1fr 3.2rem;
        row-gap: 4px;
    }
    .ecart-cru-complet-ligne > span {
        grid-column: 1 / -1;
    }
}

.ecart-cru-complet-plan {
    font-weight: 700;
    color: var(--secondary-300);
}

.ecart-cru-complet-ligne strong {
    text-align: right;
    color: var(--texte, #201e1d);
}

/* --- Free calendar collapsible blocks -------------------------------------- */
.bloc-replie {
    border: 1px solid var(--bordure, #e3e1de);
    border-radius: 12px;
    padding: 14px 18px;
    background: var(--surface, #fff);
}

.bloc-replie > summary {
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--texte, #201e1d);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 32px;
}

.bloc-replie > summary::-webkit-details-marker { display: none; }

.bloc-replie > summary::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: var(--primary);
}

.bloc-replie[open] > summary::after { content: "−"; }

@media print {
    .bloc-replie > summary { display: none; }
}


/* --- Plan grid (home, offers page, member area) ----------------------------
   Cards follow the result page sales card (`.offre-resultat`). In the
   monthly/yearly toggle an inactive panel is simply hidden and the height
   follows the content. */
.formules .content-switcher { position: static !important; display: none; opacity: 1; }
.formules .content-switcher.active { display: block; }
.formules .content-switcher-wrapper { height: auto !important; }

.formules-bascule {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 0 0 36px;
}

.formules-bascule-libelle {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--texte, #201e1d);
}

.formules-bascule-remise {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--secondary-rgba-10);
    color: var(--secondary-300);
    font-size: .78rem;
    font-weight: 700;
}

.formule {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
    border: 1px solid var(--bordure, #e3e1de);
    border-radius: 20px;
    padding: 32px 28px 28px;
    box-shadow: 0 18px 40px -28px rgba(114, 59, 21, .35);
}

.formule-recommandee {
    border: 2px solid var(--primary);
    box-shadow: 0 28px 56px -26px rgba(174, 99, 50, .45);
    background: linear-gradient(180deg, var(--tertiary--300) 0, var(--surface, #fff) 180px);
}

.formule-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.formule-nom {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--texte, #201e1d);
    text-transform: none;
}

.formule-role {
    color: var(--texte-secondaire, #6b6b6b);
    margin: 0;
}

.formule-prix-zone { margin: 22px 0 6px; }

.formule-prix {
    margin: 0;
    color: var(--texte-secondaire, #6b6b6b);
    font-size: 1rem;
}

.formule-prix span {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--texte, #201e1d);
    margin-right: 4px;
}

.formule-prix-note {
    margin: 2px 0 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--secondary-300);
}

.formule-avantages {
    list-style: none;
    margin: 18px 0 8px;
    padding: 0;
}

.formule-avantages li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--bordure, #e3e1de);
}

.formule-avantages li:first-child { border-top: 0; }

.formule-avantages strong {
    display: block;
    font-size: 1.04rem;
    line-height: 1.35;
    color: var(--texte, #201e1d);
}

.formule-avantages li > span:last-child {
    font-size: .9rem;
    line-height: 1.45;
    color: var(--texte-secondaire, #6b6b6b);
}

.formule-icone {
    flex: 0 0 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-rgba-10);
    color: var(--primary);
    font-size: 1.05rem;
}

.formule-detail {
    margin: 4px 0 8px;
    font-size: .92rem;
}

.formule-detail > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--primary);
    padding: 6px 0;
}

.formule-detail ul {
    margin: 6px 0 0;
    padding-left: 1.2rem;
    color: var(--texte-secondaire, #6b6b6b);
    line-height: 1.7;
}

.formule-action { margin-top: auto; padding-top: 16px; }

.formule-recommandee .btn-primary.formule-bouton {
    box-shadow: 0 12px 24px -10px rgba(174, 99, 50, .6);
}

.formule-unique {
    display: grid;
    gap: 20px;
    align-items: center;
    background: var(--surface, #fff);
    border: 1px dashed var(--primary-rgba-40);
    border-radius: 20px;
    padding: 26px 28px;
}

.formule-unique-surtitre {
    display: inline-block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 6px;
}

.formule-unique-liste {
    list-style: none;
    margin: 14px 0 12px;
    padding: 0;
}

.formule-unique-liste li { padding: 3px 0; color: var(--texte, #201e1d); }
.formule-unique-liste i { color: var(--secondary); margin-right: 10px; }

.formule-unique-limite {
    margin: 0;
    font-size: .9rem;
    color: var(--texte-secondaire, #6b6b6b);
}

.formule-unique-limite i { color: var(--primary); margin-right: 8px; }

.formule-unique-prix .formule-prix span { font-size: 2.3rem; }
.formule-unique-prix .btn { margin-top: 14px; }

@media (min-width: 768px) {
    .formule-unique {
        grid-template-columns: 1fr 260px;
        gap: 36px;
    }
    .formule-unique-prix { text-align: center; }
}

.formules-paiement {
    text-align: center;
    margin-top: 40px;
    color: var(--texte, #201e1d);
}

.formules-paiement p { margin: 0; }
.formules-paiement i { color: var(--secondary); margin-right: 8px; }

.formules-paiement-moyens {
    margin-top: 6px !important;
    font-size: .88rem;
    color: var(--texte-secondaire, #6b6b6b);
}


/* --- Offers page header --------------------------------------------------- */
.tarifs-entete {
    background: linear-gradient(180deg, var(--tertiary--300) 0%, var(--surface, #fff) 100%);
    padding: 28px 0 8px;
    text-align: center;
}

.tarifs-fil {
    justify-content: center;
    font-size: .85rem;
    margin-bottom: 18px;
}

.tarifs-surtitre {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px;
}

.tarifs-titre {
    font-size: 2rem;
    line-height: 1.32;
    max-width: 820px;
    margin: 0 auto 14px;
    color: var(--texte, #201e1d);
}

.tarifs-argument {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--texte-secondaire, #6b6b6b);
}

/* Member area video: a discreet link in the header, the video below the plans. */
.tarifs-lien-video {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.tarifs-lien-video:hover { color: var(--primary-200); text-decoration: underline; }

.tarifs-video {
    padding: 8px 0 64px;
    text-align: center;
    scroll-margin-top: 90px;
}

.tarifs-video-titre {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--texte, #201e1d);
}

.tarifs-video-texte {
    max-width: 640px;
    margin: 0 auto 24px;
    line-height: 1.6;
    color: var(--texte-secondaire, #6b6b6b);
}

.tarifs-video-cadre {
    max-width: 880px;
    margin: 0 auto;
    border-radius: var(--border-radius2x, 20px);
    overflow: hidden;
    box-shadow: var(--ombre-3);
    background: #201e1d;
}

.tarifs-video-cadre video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.tarifs-animal {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 22px auto 0;
    padding: 8px 10px 8px 16px;
    border-radius: 999px;
    background: var(--surface, #fff);
    border: 1px solid var(--primary-rgba-20);
    font-weight: 600;
    color: var(--texte, #201e1d);
}

.tarifs-animal i { color: var(--primary); }

.tarifs-animal-modifier {
    border: 0;
    background: var(--primary-rgba-10);
    color: var(--primary-300);
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 12px;
}

@media (min-width: 992px) {
    .tarifs-entete { padding: 40px 0 12px; }
    .tarifs-titre { font-size: 2.6rem; line-height: 1.2; }
}

.choix-animal { border-radius: 20px; border: 0; }
.choix-animal-titre { font-size: 1.4rem; font-weight: 800; }
.choix-animal-aide { color: var(--texte-secondaire, #6b6b6b); margin-bottom: 16px; }

/* A single solid button per grid: the recommended plan's. */
.formule:not(.formule-recommandee) .btn-primary.formule-bouton:not(.disabled) {
    background: var(--primary-rgba-10);
    border-color: var(--primary-rgba-30);
    color: var(--primary-300);
    box-shadow: none;
}
.formule:not(.formule-recommandee) .btn-primary.formule-bouton:not(.disabled):hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Two callout styles. Info: cream with a brown rule. Caution: light
   terracotta, terracotta title. Red stays for health ("Call your vet"). */
.body:not(:has(.espace-sidebar)) .main .alert:not(.alert-dark) {
    color: var(--texte, #201e1d);
    border: 1px solid transparent;
    border-radius: 16px;
}
.body:not(:has(.espace-sidebar)) .main .alert:not(.alert-dark) :is(p, li, h1, h2, h3, h4, h5, h6, strong, i, span) {
    color: inherit;
}
/* The dark simulator band ("Standard BARF ration") keeps light text. */
.body:not(:has(.espace-sidebar)) .main .alert.alert-dark,
.body:not(:has(.espace-sidebar)) .main .alert.alert-dark * {
    color: #fff;
}
.body:not(:has(.espace-sidebar)) .main .alert:is(.alert-primary, .alert-info, .alert-success, .alert-secondary, .alert-default, .alert-light) {
    background: var(--tertiary--300);
    border-color: var(--tertiary-100);
    --pastille: var(--primary-300);
}
.body:not(:has(.espace-sidebar)) .main .alert.alert-warning {
    background: var(--primary-rgba-10);
    border-color: var(--primary-rgba-20);
    --pastille: var(--primary);
}
.body:not(:has(.espace-sidebar)) .main .alert.alert-warning > strong:first-child,
.body:not(:has(.espace-sidebar)) .main .alert.alert-warning .alert-heading {
    color: var(--primary-200);
}
.body:not(:has(.espace-sidebar)) .main .alert.alert-danger {
    background: rgba(192, 57, 43, .07);
    border-color: rgba(192, 57, 43, .22);
    --pastille: #c0392b;
}
.body:not(:has(.espace-sidebar)) .main .alert.alert-danger > strong:first-child {
    color: #a93226;
}
.body:not(:has(.espace-sidebar)) .main .alert a:not(.btn) {
    color: var(--primary-200);
    text-decoration: underline;
}

/* Footer in the brand's dark brown. On phone and tablet each column collapses
   (details.pied-section). */
#footer:not(.espace-contenu) {
    background: #402310;
    border-top: 0;
    color: rgba(255, 255, 255, .78);
}
#footer:not(.espace-contenu) a,
#footer:not(.espace-contenu) li {
    color: rgba(255, 255, 255, .82);
}
/* Footer links take the colour of the surrounding text. */
#footer:not(.espace-contenu) .pied-section a { color: rgba(255, 255, 255, .82) !important; }
#footer:not(.espace-contenu) a:hover,
#footer:not(.espace-contenu) .pied-section a:hover { color: #fff !important; }
#footer:not(.espace-contenu) .footer-copyright {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
#footer:not(.espace-contenu) .badge-dark {
    background: rgba(255, 255, 255, .1) !important;
    color: #fff;
}
.pied-avertissement {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    color: rgba(255, 255, 255, .78);
}
.pied-avertissement strong { color: #fff; }

.pied-titre {
    list-style: none;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 12px;
}
.pied-titre::-webkit-details-marker { display: none; }

@media (max-width: 991.98px) {
    .pied-colonne { border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .pied-titre {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 48px;
        margin: 0;
        cursor: pointer;
    }
    .pied-titre::after { content: "+"; font-size: 1.4rem; color: rgba(255, 255, 255, .7); }
    .pied-section[open] > .pied-titre::after { content: "−"; }
    .pied-section[open] > ul { padding-bottom: 14px; }
}
@media (min-width: 992px) {
    .pied-titre { pointer-events: none; }
}

/* Darker, more readable body text; at least 16 px on phones with comfortable
   line height. */
.body:not(:has(.espace-sidebar)) .main {
    color: #3a2f28;
}
.body:not(:has(.espace-sidebar)) .main .text-color-grey {
    color: #5f544c !important;
}
.body:not(:has(.espace-sidebar)) .main p {
    line-height: 1.6;
}
/* The home mock-ups (.a-app, .a-feuille) are excluded: they imitate an app
   screen and a document at scale, not reading text. */
@media (max-width: 575.98px) {
    .body:not(:has(.espace-sidebar)) .main p:not(.a-app *, .a-feuille *),
    .body:not(:has(.espace-sidebar)) .main li:not(.a-app *, .a-feuille *) {
        font-size: max(1em, 16px);
    }
}

/* Footer content keeps off the screen edges on phones. */
@media (max-width: 991.98px) {
    #footer:not(.espace-contenu) > .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* The "Encrypted connection" badge clears the closing rule. */
.pied-section .badge { margin-bottom: 18px; }

/* --- Why choose Rationnelle, under the simulator ----------------------------
   Three identical white cards. No side rule. */
.pourquoi-titre {
    text-align: center;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--texte, #201e1d);
    margin: 0 0 28px;
}
.pourquoi-carte {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(64, 35, 16, .08);
    border-radius: 20px;
    padding: 28px 26px 26px;
    box-shadow: 0 14px 34px rgba(64, 35, 16, .07);
}
.pourquoi-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--primary-rgba-10);
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 18px;
}
.pourquoi-carte h3 {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--texte, #201e1d);
    margin: 0 0 10px;
}
.pourquoi-carte p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}
.pourquoi-lien {
    display: inline-block;
    margin-top: 16px;
    font-weight: 700;
    color: var(--primary-200);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pourquoi-lien:hover { color: var(--primary); }
@media (max-width: 575.98px) {
    .pourquoi-titre { font-size: 1.6rem; margin-bottom: 20px; }
    .pourquoi-carte { padding: 24px 20px 22px; }
}

/* --- Reviews on phones: three stacked cards --------------------------------- */
@media (max-width: 767.98px) {
    .avis-fenetre {
        -webkit-mask-image: none;
        mask-image: none;
        container-type: normal;
    }
    .avis-ruban {
        animation: none;
        width: auto;
        display: block;
    }
    .avis-serie[aria-hidden="true"] { display: none; }
    .avis-serie {
        flex-direction: column;
        padding-right: 0;
    }
    .avis-carte { width: 100%; }
    .avis-beta:not(.avis-tous) .avis-serie .avis-carte:nth-child(n+4) { display: none; }
    .avis-plus {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .7);
        color: #fff;
    }
    .avis-plus:hover { background: rgba(255, 255, 255, .12); color: #fff; }
}
@media (max-width: 767.98px) {
    .avis-fenetre { padding-left: 20px; padding-right: 20px; }
}

/* Home headline: enough line height so the wavy underline clears the next line. */
.accroche-accueil { line-height: 1.28 !important; }
.accroche-accueil .title-highlight { text-underline-offset: .16em; }

/* --- Callouts: no side rule ------------------------------------------------
   A callout is recognised by its background, thin outline and, when it opens
   with an icon, a solid pill in its role colour. */
:is(.main, .espace-contenu) .alert.d-flex:not(.alert-dark) > i:first-child {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 12px 0 0 !important;
    font-size: .85rem;
    line-height: 1;
    background: var(--pastille, var(--primary));
    color: #fff !important;
}
:is(.main, .espace-contenu) .alert.d-flex.align-items-start:not(.alert-dark) > i:first-child { margin-top: -4px !important; }

/* Highlighted member card (expired plan, getting started, next bag):
   terracotta outline and lightly tinted background. */
.carte-mise-en-avant {
    border: 1px solid var(--primary-rgba-20) !important;
    background-image: linear-gradient(180deg, var(--primary-rgba-10), transparent 140px);
}

/* Campaign page testimonials as cards. */
.temoignage {
    background: var(--tertiary--300);
    border: 1px solid var(--tertiary-100);
    border-radius: 16px;
    padding: 20px 22px;
}
.temoignage p { font-size: 1.05rem; color: var(--texte, #201e1d); }
/* Same pill when the icon opens the callout title. */
:is(.main, .espace-contenu) .alert:not(.alert-dark) > :is(.alert-heading, strong):first-child > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 8px !important;
    vertical-align: -7px;
    font-size: .78rem;
    background: var(--pastille, var(--primary));
    color: #fff !important;
}
:is(.main, .espace-contenu) .alert:not(.alert-dark) > :is(.alert-heading, strong):first-child:has(> i:first-child) {
    display: flex;
    align-items: center;
}
:is(.main, .espace-contenu) .alert:not(.alert-dark) > :is(.alert-heading, strong):first-child > i:first-child {
    flex: 0 0 28px;
    vertical-align: middle;
}
.conclusion-calculateur h2 { color: var(--texte, #201e1d); }

/* Campaign page consent checkbox: 24 px, the whole sentence is clickable
   (label for=). */
.accord-campagne {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0;
}
.accord-campagne .form-check-input {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0;
    float: none;
    cursor: pointer;
}
.accord-campagne .form-check-label { cursor: pointer; padding-top: 2px; }
/* The whole block is a touch area: soft background and outline, full-width
   label, turns green once checked. */
.accord-campagne {
    position: relative;
    padding: .75rem .9rem;
    border: 1px solid var(--bordure, #e3e1de);
    border-radius: 12px;
    background: var(--r-creme, #fbf7f0);
    transition: border-color .15s, background-color .15s;
}
.accord-campagne .form-check-label { flex: 1; }
.accord-campagne .form-check-label::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.accord-campagne:hover { border-color: var(--r-argile, #ae6332); }
.accord-campagne:has(.form-check-input:checked) { border-color: #9cc5ab; background: #eef6f0; }
/* The white form card restores dark text on the dark hero. */
.carte-calendrier { color: var(--texte, #2b3631); }
.carte-calendrier-sous { display: block; margin-top: .15rem; font-size: .82rem; font-weight: 500; opacity: .9; }

/* --- Free calendar modal, home page ----------------------------------------
   Phone: sheet sliding up, in two steps. The `etape-2` class on the modal
   shows the second half of the form. */
@media (max-width: 767.98px) {
    .lead-fenetre .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        max-width: none;
        min-height: 0;
        align-items: flex-end;
        transform: translateY(100%);
        transition: transform .25s ease-out;
    }
    .lead-fenetre.show .modal-dialog { transform: none; }
    .lead-fenetre .modal-content {
        border-radius: 20px 20px 0 0 !important;
        max-height: 92vh;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .lead-fenetre .modal-title { font-size: 1.15rem !important; }
    .lead-fenetre:not(.etape-2) .lead-etape-2,
    .lead-fenetre.etape-2 .lead-etape-1,
    .lead-fenetre:not(.etape-2) .lead-repere-2,
    .lead-fenetre.etape-2 .lead-repere-1 { display: none; }
}
/* Desktop: wider and tighter so the submit button fits a laptop screen. */
@media (min-width: 768px) {
    .lead-fenetre .modal-dialog {
        max-width: 640px;
        margin-top: 16px;
        margin-bottom: 16px;
        min-height: calc(100% - 32px);
    }
    .lead-fenetre .modal-body .form-group,
    .lead-fenetre .modal-body ul.list { margin-bottom: 12px !important; }
    .lead-fenetre .modal-body ul.list li { margin-bottom: 4px; }
}

/* --- Secondary pages ------------------------------------------------------- */
/* Easy-to-tap buttons: at least 48 px tall. */
.bouton-48 {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 22px;
    padding-right: 22px;
}
.aide-connexion > summary { font-size: .95rem; }
/* Terms of sale: light article headings. */
.articles-cgv .toggle > .toggle-title,
.articles-cgv .toggle.active > .toggle-title {
    background: var(--tertiary--300) !important;
    color: var(--primary-200) !important;
    border: 1px solid var(--tertiary-100) !important;
    font-size: 1.05rem;
}
.articles-cgv .toggle > .toggle-title:before { border-color: var(--primary-200) !important; }

/* Thawing schedule (partials/alimentation/_decongelation.html): step numbers
   in solid pills, linked by a rule. */
.process-vertical .process-step {
    position: relative;
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
}
.process-vertical .process-step:last-child {
    padding-bottom: 0;
}
.process-vertical .process-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2.75rem;
    bottom: .25rem;
    left: calc(1.25rem - 1px);
    width: 2px;
    border-radius: 2px;
    background: var(--bordure);
}
.process-vertical .process-step-circle {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 6px 14px -8px rgba(174, 99, 50, .8);
}
.process-vertical .process-step-circle-content {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.process-vertical .process-step-content {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: .3rem;
}

/* Shopping list item inputs (partials/alimentation/_articles.html): two equal
   columns, label above, equal-width units. */
.champs-article {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.champ-article {
    display: block;
    margin: 0;
    cursor: default;
}
.champ-article-libelle {
    display: block;
    margin-bottom: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--texte-secondaire);
}
.champ-article .input-group {
    flex-wrap: nowrap;
}
.champ-article .form-control {
    min-width: 0;
    width: 100%;
    font-weight: 600;
}
.champ-article .input-group-text {
    flex: 0 0 3.5rem;
    justify-content: center;
}
.champ-article .confirmation-enregistre {
    display: block;
    margin: .25rem 0 0;
}
/* No browser spinners: they took half the field on phones. */
.champ-article input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.champ-article input[type="number"]::-webkit-outer-spin-button,
.champ-article input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Rules restored from the legacy stylesheet ----------------------------- */

/* Solid terracotta. */
.btn.bouton-plan-complet,
.btn.bouton-plan-complet:visited {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    white-space: normal;
    max-width: 100%;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 22px;
    box-shadow: 0 10px 20px -10px rgba(174, 99, 50, .6);
}
.btn.bouton-plan-complet:hover,
.btn.bouton-plan-complet:focus {
    background: var(--primary-200);
    border-color: var(--primary-200);
    color: #fff;
}

/* Free calendar headline, brown variant. */
.title-highlight.title-highlight-brun {
    color: var(--primary-300);
    text-decoration-color: var(--primary-300);
}

/* Review provenance on the campaign page, small. */
.body .main p.avis-provenance-clair { font-size: .78rem !important; line-height: 1.5; }

/* Bouton tertiaire (partage WhatsApp) : fond creme, texte sombre. */
.btn-tertiary {
    background-color: var(--tertiary);
    border-color: var(--tertiary);
    color: var(--tertiary-inverse);
}
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary:active {
    color: var(--tertiary-inverse);
    background-color: var(--tertiary-100);
    border-color: var(--tertiary-100);
}

/* "My pets" weigh-in on small phones: the button moves below the field, full width. */
@media (max-width: 399.98px) {
    .form-pesee .input-group { flex-wrap: wrap; }
    .form-pesee .input-group > span.input-group-text:last-of-type { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
    .form-pesee .btn-peser-submit { flex: 1 0 100%; justify-content: center; margin: .5rem 0 0 !important; border-radius: 12px !important; }
}