/*!
 * SODIFERM — design system de la boutique publique
 * Couleurs issues du logo : brun rouille #94330F · or #F29D0F · crème.
 * Typographies : Fraunces (titres) + DM Sans (texte).
 * S'appuie sur Bootstrap 5.3 (grille, offcanvas, modales) déjà chargé.
 */

/* =========================================================
   1. Jetons
   ========================================================= */
:root {
    --sf-rust-50: #FBF1EC;
    --sf-rust-100: #F5DDD2;
    --sf-rust-200: #E9B9A5;
    --sf-rust-300: #D88A6C;
    --sf-rust-400: #BE5A35;
    --sf-rust-500: #A8431B;
    --sf-rust-600: #94330F;
    --sf-rust-700: #7A280B;
    --sf-rust-800: #5C1E09;
    --sf-rust-900: #3B1407;
    --sf-rust-950: #1F0A03;

    --sf-gold-50: #FFF8E8;
    --sf-gold-100: #FEEDC6;
    --sf-gold-200: #FCDB8E;
    --sf-gold-300: #F9C455;
    --sf-gold-400: #F6AE2A;
    --sf-gold-500: #F29D0F;
    --sf-gold-600: #D67E08;
    --sf-gold-700: #B0600A;

    --sf-cream-50: #FFFCF6;
    --sf-cream-100: #FDF6EA;
    --sf-cream-200: #F8EBD6;
    --sf-cream-300: #F0DCBC;

    --sf-leaf: #5B7630;

    /* Rôles (mode clair) */
    --sf-bg: #FDF6EA;
    --sf-bg-alt: #F8EBD6;
    --sf-surface: #FFFCF6;
    --sf-surface-2: #FFFFFF;
    --sf-text: #2A160B;
    --sf-text-2: #5E4636;
    --sf-muted: #76604F;
    --sf-border: rgba(92, 30, 9, .13);
    --sf-border-strong: rgba(92, 30, 9, .24);
    --sf-field-border: #937A67;   /* contour des champs : contraste >= 3:1 (WCAG 1.4.11) */
    --sf-focus: #B0600A;          /* anneau de focus clavier : or foncé, >= 3:1 sur crème */
    --sf-primary: #94330F;
    --sf-primary-hover: #7A280B;
    --sf-on-primary: #FFF8EC;
    --sf-accent: #F29D0F;
    --sf-on-accent: #2A160B;
    --sf-brand-text: #94330F;
    --sf-success: #2F7A3E;
    --sf-warning: #9A520A;
    --sf-danger: #B42318;
    --sf-shadow-rgb: 59, 20, 7;

    --sf-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --sf-font-sans: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

    --sf-r-sm: 10px;
    --sf-r-md: 16px;
    --sf-r-lg: 24px;
    --sf-r-xl: 36px;
    --sf-r-pill: 999px;

    --sf-sh-sm: 0 1px 2px rgba(var(--sf-shadow-rgb), .06), 0 2px 10px rgba(var(--sf-shadow-rgb), .05);
    --sf-sh-md: 0 14px 34px -14px rgba(var(--sf-shadow-rgb), .28), 0 2px 8px rgba(var(--sf-shadow-rgb), .05);
    --sf-sh-lg: 0 34px 70px -24px rgba(var(--sf-shadow-rgb), .38), 0 6px 18px rgba(var(--sf-shadow-rgb), .06);

    --sf-ease-out: cubic-bezier(.22, 1, .36, 1);
    --sf-ease-in-out: cubic-bezier(.65, 0, .35, 1);

    --sf-nav-h: 84px;
    --sf-section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);

    /* Compatibilité avec les anciens styles en ligne des pages */
    --primary-color: var(--sf-primary);
    --bg-app: var(--sf-bg);
    --bg-card: var(--sf-surface);
    --text-main: var(--sf-text);
    --text-heading: var(--sf-text);
    --text-muted: var(--sf-muted);
    --border-soft: var(--sf-border);

    /* Bootstrap */
    --bs-body-bg: var(--sf-bg);
    --bs-body-color: var(--sf-text);
    --bs-body-font-family: var(--sf-font-sans);
    --bs-border-color: var(--sf-border);
    --bs-link-color-rgb: 148, 51, 15;
    --bs-link-hover-color-rgb: 122, 40, 11;
    --bs-secondary-color: var(--sf-muted);
    --bs-emphasis-color: var(--sf-text);
    --bs-tertiary-bg: var(--sf-bg-alt);
    --bs-focus-ring-color: rgba(242, 157, 15, .45);
    color-scheme: light;
}

html.dark-mode {
    --sf-bg: #170C06;
    --sf-bg-alt: #1F120A;
    --sf-surface: #26160C;
    --sf-surface-2: #2F1C10;
    --sf-text: #FBEFDD;
    --sf-text-2: #E6D0B6;
    --sf-muted: #C2A88E;
    --sf-border: rgba(251, 239, 221, .12);
    --sf-border-strong: rgba(251, 239, 221, .22);
    --sf-field-border: #8A7361;
    --sf-focus: #F29D0F;
    --sf-primary: #B84A1F;
    --sf-primary-hover: #CC5A2A;
    --sf-on-primary: #FFF8EC;
    --sf-brand-text: #F6B04A;
    --sf-success: #7BC68A;
    --sf-warning: #F6B04A;
    --sf-danger: #F28B7F;
    --sf-shadow-rgb: 0, 0, 0;
    --bs-body-bg: var(--sf-bg);
    --bs-body-color: var(--sf-text);
    --bs-link-color-rgb: 246, 176, 74;
    --bs-link-hover-color-rgb: 249, 196, 85;
    color-scheme: dark;
}

/* =========================================================
   2. Base
   ========================================================= */
html { scroll-padding-top: calc(var(--sf-nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body.sf {
    margin: 0;
    font-family: var(--sf-font-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--sf-text);
    background: var(--sf-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    transition: background-color .4s ease, color .4s ease;
}
/* Grain papier, très léger */
body.sf::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .08 0 0 0 0 .03 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.dark-mode body.sf::after { opacity: .07; mix-blend-mode: screen; }

.sf h1, .sf h2, .sf h3, .sf h4, .sf h5, .sf h6,
.sf .h1, .sf .h2, .sf .h3, .sf .h4, .sf .h5, .sf .h6 {
    font-family: var(--sf-font-display);
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 50, "WONK" 0;
    color: var(--sf-text);
    font-weight: 650;
    letter-spacing: -.015em;
    line-height: 1.12;
    text-wrap: balance;
}
.sf p { text-wrap: pretty; }
.sf a { color: var(--sf-brand-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.sf a:hover { color: var(--sf-primary-hover); filter: none; }
html.dark-mode .sf a:hover { color: var(--sf-gold-300); }
.sf ::selection { background: var(--sf-gold-300); color: var(--sf-rust-950); }
.sf img { max-width: 100%; }
.sf :focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 3px; border-radius: 6px; }
.sf .text-muted { color: var(--sf-muted) !important; }
.sf .text-theme, .sf .price-tag { color: var(--sf-brand-text) !important; }
.sf hr { border-color: var(--sf-border); opacity: 1; }

.sf-skip {
    position: fixed; left: 1rem; top: -100px; z-index: 10000;
    background: var(--sf-rust-900); color: var(--sf-cream-100) !important;
    padding: .75rem 1.1rem; border-radius: var(--sf-r-sm); font-weight: 600; text-decoration: none;
    transition: top .25s var(--sf-ease-out);
}
.sf-skip:focus { top: 1rem; }

.sf-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Lenis (défilement doux) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* =========================================================
   3. Typographie & utilitaires de section
   ========================================================= */
.sf-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font: 600 .78rem/1.2 var(--sf-font-sans);
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--sf-brand-text);
    margin-bottom: 1.1rem;
}
.sf-eyebrow::before {
    content: ""; width: 26px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--sf-gold-500), var(--sf-rust-600));
}
.sf-eyebrow--center { justify-content: center; }
.sf-eyebrow--light { color: var(--sf-gold-300); }
.sf-display {
    font-size: clamp(2.7rem, 1.4rem + 5.2vw, 6rem);
    line-height: .98;
    letter-spacing: -.03em;
    font-weight: 600;
    margin: 0 0 1.4rem;
}
.sf-h2 {
    font-size: clamp(2.1rem, 1.35rem + 2.9vw, 3.75rem);
    line-height: 1.02;
    letter-spacing: -.025em;
    margin: 0 0 1rem;
}
.sf-h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); margin: 0 0 .5rem; }
.sf-display em, .sf-h2 em, .sf-page-hero__title em, .sf-h3 em, .sf-auth__box h1 em {
    font-style: italic;
    font-weight: 500;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    color: var(--sf-brand-text);
}
.sf-lead { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--sf-text-2); max-width: 36rem; }
.sf-section { padding-block: var(--sf-section-y); position: relative; }
.sf-section--alt { background: var(--sf-bg-alt); }
.sf-section__head { max-width: 46rem; margin-bottom: clamp(2.2rem, 1.5rem + 2vw, 3.5rem); }
.sf-section__head--center { margin-inline: auto; text-align: center; }
.sf-section__head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.sf-section__head--split > :first-child { max-width: 40rem; }

/* =========================================================
   4. Boutons
   ========================================================= */
.sf-btn {
    --btn-bg: var(--sf-primary);
    --btn-fg: var(--sf-on-primary);
    --btn-bd: transparent;
    --btn-hover: var(--sf-primary-hover);
    --btn-hover-fg: var(--btn-fg);
    --btn-icon-bg: rgba(255, 248, 236, .16);
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
    min-height: 54px; padding: .4rem 1.55rem;
    border-radius: var(--sf-r-pill); border: 1.5px solid var(--btn-bd);
    background: var(--btn-bg); color: var(--btn-fg) !important;
    font: 600 1rem/1.1 var(--sf-font-sans); letter-spacing: .01em;
    text-decoration: none !important; white-space: nowrap; cursor: pointer;
    transition: transform .35s var(--sf-ease-out), box-shadow .35s var(--sf-ease-out), color .35s, border-color .35s;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sf-btn::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
    background: var(--btn-hover);
    transform: translateY(102%); transition: transform .5s var(--sf-ease-out);
}
.sf-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(var(--sf-shadow-rgb), .45); color: var(--btn-hover-fg) !important; }
.sf-btn:hover::before { transform: translateY(0); }
.sf-btn:active { transform: translateY(0) scale(.98); }
.sf-btn--icon { padding-right: .45rem; }
.sf-btn__icon {
    width: 42px; height: 42px; flex: none; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    background: var(--btn-icon-bg); font-size: 1.05rem;
}
.sf-btn__icon i { display: block; transition: transform .5s var(--sf-ease-out); }
.sf-btn:hover .sf-btn__icon i { animation: sf-arrow .6s var(--sf-ease-out); }
@keyframes sf-arrow { 0% { transform: translateX(0); } 45% { transform: translateX(130%); } 46% { transform: translateX(-130%); } 100% { transform: translateX(0); } }
.sf-btn--gold { --btn-bg: var(--sf-gold-500); --btn-fg: var(--sf-rust-950); --btn-hover: var(--sf-gold-300); --btn-icon-bg: rgba(42, 22, 11, .1); }
.sf-btn--ghost { --btn-bg: transparent; --btn-fg: var(--sf-brand-text); --btn-bd: var(--sf-border-strong); --btn-hover: var(--sf-primary); --btn-hover-fg: var(--sf-on-primary); --btn-icon-bg: rgba(148, 51, 15, .1); }
.sf-btn--light { --btn-bg: var(--sf-cream-100); --btn-fg: var(--sf-rust-800); --btn-hover: #FFFFFF; --btn-icon-bg: rgba(148, 51, 15, .1); }
.sf-btn--sm { min-height: 44px; padding: .3rem 1.1rem; font-size: .92rem; }
.sf-btn--block { width: 100%; }
.sf-btn[disabled], .sf-btn.disabled { opacity: .45; pointer-events: none; }

.sf-link {
    display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
    font-weight: 600; color: var(--sf-text) !important; text-decoration: none !important;
}
.sf-link__play {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid var(--sf-border-strong); color: var(--sf-brand-text);
    transition: background-color .3s, color .3s, transform .4s var(--sf-ease-out);
}
.sf-link:hover .sf-link__play { background: var(--sf-primary); color: var(--sf-on-primary); transform: rotate(-12deg); }
.sf-link__label { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .45s var(--sf-ease-out); }
.sf-link:hover .sf-link__label { background-size: 100% 1.5px; }

/* Boutons historiques utilisés par les pages et le JS */
.sf .btn-theme {
    background: var(--sf-primary); color: var(--sf-on-primary); border: 0; border-radius: var(--sf-r-pill);
    font-weight: 600; padding-inline: 1.25rem; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    transition: background-color .25s, transform .25s var(--sf-ease-out), box-shadow .25s;
}
.sf .btn-theme.btn-sm { min-height: 38px; padding-inline: .95rem; font-size: .88rem; }
.sf .btn-theme.btn-lg { min-height: 54px; padding-inline: 1.6rem; font-size: 1.02rem; }
.sf .btn-theme:hover { background: var(--sf-primary-hover); color: var(--sf-on-primary); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(var(--sf-shadow-rgb), .5); }
.sf .btn-theme:focus-visible { color: var(--sf-on-primary); box-shadow: 0 0 0 3px var(--sf-surface), 0 0 0 6px var(--sf-focus); outline: none; }
.sf .btn-theme.disabled, .sf .btn-theme:disabled { background: var(--sf-primary); color: var(--sf-on-primary); opacity: .45; }
.sf .btn-outline-theme {
    border: 1.5px solid var(--sf-border-strong); color: var(--sf-brand-text); background: transparent;
    border-radius: var(--sf-r-pill); font-weight: 600; min-height: 44px; padding-inline: 1.2rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
}
.sf .btn-outline-theme:hover { background: var(--sf-primary); border-color: var(--sf-primary); color: var(--sf-on-primary); }
.sf .btn-outline-secondary { border-color: var(--sf-border-strong); color: var(--sf-text); border-radius: var(--sf-r-pill); }
.sf .btn-outline-secondary:hover { background: var(--sf-bg-alt); color: var(--sf-text); border-color: var(--sf-border-strong); }

/* =========================================================
   5. Navigation
   ========================================================= */
.sf-nav {
    position: fixed; inset: 0 0 auto 0; z-index: 1030;
    height: var(--sf-nav-h);
    display: flex; align-items: center;
    transition: transform .5s var(--sf-ease-out), background-color .4s, box-shadow .4s, height .4s var(--sf-ease-out);
}
.sf-nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: color-mix(in srgb, var(--sf-bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--sf-border);
    opacity: 0; transition: opacity .4s;
}
.sf-nav.is-scrolled { --sf-nav-h: 70px; }
.sf-nav.is-scrolled::before, .sf-nav.is-solid::before { opacity: 1; }
.sf-nav__bar { display: flex; align-items: center; gap: 1rem; width: 100%; }
.sf-nav__brand {
    display: inline-flex; align-items: center; gap: .7rem; text-decoration: none !important;
    color: var(--sf-text) !important; flex: none;
}
.sf-nav__brand img { height: 56px; width: auto; transition: height .4s var(--sf-ease-out); }
.sf-nav.is-scrolled .sf-nav__brand img { height: 48px; }
.sf-nav__name { font: 700 1.3rem/1 var(--sf-font-display); letter-spacing: .02em; font-variation-settings: "SOFT" 100; }
.sf-nav__name small { display: block; font: 500 .75rem/1.3 var(--sf-font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--sf-muted); margin-top: .2rem; }
.sf-logo--light { display: none; }
html.dark-mode .sf-logo--dark { display: none; }
html.dark-mode .sf-logo--light { display: inline-block; }

.sf-nav__links { display: flex; align-items: center; gap: .15rem; margin-inline: auto; }
.sf-nav__links a {
    position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: var(--sf-r-md);
    color: var(--sf-text) !important; font-weight: 500; font-size: .98rem; text-decoration: none;
    transition: background-color .25s, color .25s;
}
/* Icônes comme dans le menu mobile (masquées entre 992 et 1199 px, où la place manque) */
.sf-nav__links a i { font-size: 1rem; line-height: 1; color: var(--sf-brand-text); }
.sf-nav__links a:hover { background: color-mix(in srgb, var(--sf-primary) 8%, transparent); }
.sf-nav__links .dropdown-toggle::after { display: none; }   /* pas de flèche Bootstrap sur « Boutique » (comme avant) */
/* Page active — même mise en forme que le menu mobile : fond crème-or en fondu, contour or,
   barre or → rouille à gauche, icône en pastille rouille */
.sf-nav__links a.active {
    font-weight: 600; color: var(--sf-brand-text) !important;
    background: linear-gradient(90deg, var(--sf-gold-100), rgba(254, 237, 198, .2));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sf-gold-300) 60%, transparent), 0 8px 18px -12px rgba(242, 157, 15, .6);
}
.sf-nav__links a.active::before {
    content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--sf-gold-500), var(--sf-rust-600));
}
.sf-nav__links a.active i {
    width: 28px; height: 28px; margin-left: -2px; display: inline-grid; place-items: center; border-radius: 50%;
    font-size: .88rem; color: #FFF8EC; background: linear-gradient(135deg, var(--sf-rust-500), var(--sf-rust-700));
    box-shadow: 0 6px 12px -6px rgba(148, 51, 15, .7);
}
.sf-nav__links a.active:hover { background: linear-gradient(90deg, var(--sf-gold-100), var(--sf-gold-50)); }
html.dark-mode .sf-nav__links a.active { background: linear-gradient(90deg, rgba(242, 157, 15, .16), rgba(242, 157, 15, .02)); box-shadow: inset 0 0 0 1px rgba(246, 176, 74, .3); }
@media (max-width: 1199.98px) {
    .sf-nav__links a { padding-inline: .7rem; }
    .sf-nav__links a i, .sf-nav__links a.active i { display: none; }
}
.sf-nav__actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.sf-nav__links + .sf-nav__actions { margin-left: 0; }
.sf-icon-btn {
    position: relative; width: 44px; height: 44px; flex: none;
    display: inline-grid; place-items: center; border-radius: 50%;
    border: 1px solid transparent; background: transparent; color: var(--sf-text) !important;
    font-size: 1.15rem; text-decoration: none !important; cursor: pointer;
    transition: background-color .25s, border-color .25s, transform .3s var(--sf-ease-out);
}
.sf-icon-btn:hover { background: color-mix(in srgb, var(--sf-primary) 9%, transparent); border-color: var(--sf-border); }
.sf-icon-btn .icon-badge, .sf-badge-count {
    position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px;
    display: inline-grid; place-items: center; border-radius: 999px;
    background: var(--sf-gold-500); color: var(--sf-rust-950); border: 2px solid var(--sf-bg);
    font: 700 .75rem/1 var(--sf-font-sans);
}
.sf-badge-count.is-bump { animation: sf-bump .6s var(--sf-ease-out); }
@keyframes sf-bump { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.sf-nav__cta { margin-left: .4rem; }
.sf-nav__burger {
    width: 44px; height: 44px; border: 0; background: transparent; padding: 0; flex: none;
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border-radius: 50%;
}
.sf-nav__burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--sf-text); transition: transform .35s var(--sf-ease-out), width .35s var(--sf-ease-out); }
.sf-nav__burger span:last-child { width: 14px; margin-right: 8px; }
.sf-nav__burger:hover span:last-child { width: 22px; margin-right: 0; }
.sf .dropdown-menu {
    --bs-dropdown-bg: var(--sf-surface-2); --bs-dropdown-color: var(--sf-text); --bs-dropdown-link-color: var(--sf-text);
    --bs-dropdown-link-hover-bg: var(--sf-bg-alt); --bs-dropdown-link-active-bg: var(--sf-primary); --bs-dropdown-border-color: var(--sf-border);
    border-radius: var(--sf-r-md); box-shadow: var(--sf-sh-md); padding: .4rem;
}
.sf .dropdown-item { border-radius: 10px; padding: .55rem .8rem; font-weight: 500; }

.sf-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1031; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sf-gold-500), var(--sf-rust-600)); }

/* Espace réservé sous la barre fixe (pages internes) */
.sf-nav-spacer { height: var(--sf-nav-h); }

/* Menu mobile (offcanvas) */
.sf .mobile-menu-panel { width: min(360px, 88vw); background: var(--sf-bg); color: var(--sf-text); border-right: 0 !important; }
.sf .mobile-menu-panel .offcanvas-header { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--sf-border); }
.sf .mobile-menu-panel .offcanvas-header img { height: 48px; width: auto; }
.sf-mnav { list-style: none; margin: 0; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .15rem; }
.sf-mnav a, .sf-mnav button {
    display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 52px; padding: .65rem .9rem;
    border: 0; background: transparent; border-radius: var(--sf-r-md); text-align: left;
    font: 600 1.15rem/1.2 var(--sf-font-display); color: var(--sf-text) !important; text-decoration: none !important;
    transition: background-color .25s, padding-left .35s var(--sf-ease-out);
}
.sf-mnav a i, .sf-mnav button i { font-size: 1.1rem; color: var(--sf-brand-text); width: 24px; text-align: center; }
.sf-mnav a:hover, .sf-mnav button:hover { background: var(--sf-bg-alt); padding-left: 1.15rem; }
/* Page active (menu mobile) : fond crème-or en fondu, barre or → rouille à gauche, icône en pastille rouille */
.sf-mnav a.active {
    position: relative; color: var(--sf-brand-text) !important;
    background: linear-gradient(90deg, var(--sf-gold-100), rgba(254, 237, 198, 0));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sf-gold-300) 60%, transparent);
}
.sf-mnav a.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--sf-gold-500), var(--sf-rust-600)); }
.sf-mnav a.active i { width: 32px; height: 32px; margin-left: -4px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 1rem; color: #FFF8EC; background: linear-gradient(135deg, var(--sf-rust-500), var(--sf-rust-700)); box-shadow: 0 6px 12px -6px rgba(148, 51, 15, .7); }
html.dark-mode .sf-mnav a.active { background: linear-gradient(90deg, rgba(242, 157, 15, .16), rgba(242, 157, 15, 0)); box-shadow: inset 0 0 0 1px rgba(246, 176, 74, .3); }
.sf-mnav hr { margin: .6rem .9rem; }
.sf-mnav .is-danger, .sf-mnav .is-danger i { color: var(--sf-danger) !important; }
.sf-mnav__foot { margin-top: auto; padding: 1.25rem; border-top: 1px solid var(--sf-border); display: flex; align-items: center; gap: 1rem; }
.sf-mnav__foot img { width: 64px; height: auto; }
/* logo du menu mobile, juste après « Contact » : même largeur que les liens (marges internes comprises) */
/* Hauteur bornée : le logo occupe l'espace libre entre « Contact » et le slogan, de sorte que menu + logo + slogan
   tiennent dans l'écran sans défiler (il rétrécit sur petit écran, jamais plus large que les liens) */
.sf .mobile-menu-panel .sf-mnav { flex: 1 1 auto; min-height: 0; }
.sf-mnav__logo { flex: 1 1 0; min-height: 72px; display: flex; justify-content: center; padding: 1rem 0 .4rem; line-height: 0; }
.sf-mnav__logo img { width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: 50% 50%; }   /* (pas de « display » ici : la bascule clair/sombre .sf-logo--dark/--light doit s'appliquer) */
.sf-mnav__foot p { margin: 0; font: 600 .95rem/1.35 var(--sf-font-display); color: var(--sf-brand-text); }
.sf-mnav__foot { justify-content: center; text-align: center; }   /* slogan centré sous le logo du menu */
.sf-mnav__foot p { flex: 1; }

/* =========================================================
   6. Ouverture animée (haut de l'accueil)
   ========================================================= */
.sf-hero__tag {
    display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .95rem .45rem .5rem; margin-bottom: 1.4rem;
    border-radius: var(--sf-r-pill); background: var(--sf-surface); border: 1px solid var(--sf-border);
    box-shadow: var(--sf-sh-sm); font-size: .88rem; font-weight: 600; color: var(--sf-text-2);
}
.sf-hero__tag-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sf-gold-100); color: var(--sf-rust-600); }
html.dark-mode .sf-hero__tag-dot { background: rgba(242, 157, 15, .18); color: var(--sf-gold-300); }
.sf-hl { display: block; }
.sf-hero__lead { margin-bottom: 2rem; }
.sf-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.sf-hero__cue-mouse { width: 24px; height: 38px; border-radius: 14px; border: 1.5px solid var(--sf-border-strong); position: relative; flex: none; }
.sf-hero__cue-mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; border-radius: 4px; background: var(--sf-gold-500); transform: translateX(-50%); animation: sf-wheel 1.8s var(--sf-ease-in-out) infinite; }
@keyframes sf-wheel { 0% { opacity: 0; transform: translate(-50%, -3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes sf-drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(0, -14px, 0) rotate(3deg); } }

/* =================================================================
   Film d'ouverture (inc_film.php + film.js) — sous l'en-tête, avant l'ouverture animée
   Par défaut (sans JS / mouvement réduit) : affiche finale seule. .is-live = film piloté par film.js.
   ================================================================= */
.sf-film { --g: clamp(10px, 1.2vw, 18px); position: relative; background: var(--sf-bg); }
.sf-film__pin { padding: var(--sf-nav-h) var(--g) var(--g); }
.sf-film__stage {
    position: relative; isolation: isolate; overflow: hidden; border-radius: var(--sf-r-xl);
    min-height: clamp(460px, 78svh, 760px); color: #FFF4E2;
    background: #1A0803; box-shadow: 0 30px 60px -30px rgba(59, 20, 7, .55);
    display: grid; place-items: center;
}
.sf-film.is-live .sf-film__stage { height: calc(100vh - var(--sf-nav-h) - var(--g)); height: calc(100svh - var(--sf-nav-h) - var(--g)); min-height: 0; display: block; }
.sf-film__bg, .sf-film__fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sf-film__bg { z-index: -1; }

/* Ciels : un par chapitre, fondus l'un dans l'autre */
.sf-film__sky { position: absolute; inset: 0; opacity: 0; background: radial-gradient(70% 80% at var(--x, 50%) var(--y, 45%), var(--a) 0%, var(--b) 45%, #140602 100%); }
.sf-film__sky:nth-child(1) { --a: #5C1E09; --b: #2A0E04; }
.sf-film__sky:nth-child(2) { --a: #B0600A; --b: #3B1407; --x: 60%; }
.sf-film__sky:nth-child(3) { --a: #D67E08; --b: #4A1A08; --x: 60%; }
.sf-film__sky:nth-child(4) { --a: #F29D0F; --b: #5C1E09; --x: 58%; --y: 40%; }
.sf-film__sky:nth-child(5) { --a: #A8431B; --b: #2A0E04; --x: 62%; }
.sf-film__sky:nth-child(6) { --a: #C98A74; --b: #3B1407; --x: 60%; }
.sf-film__sky:nth-child(7) { --a: #94330F; --b: #1F0A03; --x: 60%; }
.sf-film__sky:nth-child(8) { --a: #F6AE2A; --b: #5C1E09; --x: 60%; --y: 50%; }
.sf-film__sky:nth-child(9) { --a: #7A280B; --b: #1F0A03; --y: 40%; }
.sf-film:not(.is-live) .sf-film__sky:nth-child(9) { opacity: 1; }
.sf-film__rays {
    position: absolute; left: 50%; top: 45%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; opacity: .22; mix-blend-mode: screen;
    background: repeating-conic-gradient(from 0deg, rgba(252, 219, 142, .5) 0deg 4deg, transparent 4deg 16deg);
    -webkit-mask: radial-gradient(closest-side, #000 0%, transparent 70%); mask: radial-gradient(closest-side, #000 0%, transparent 70%);
    animation: sf-spin 90s linear infinite;
}
.sf-film__halo {
    position: absolute; left: 50%; top: 45%; width: min(70vh, 80vw); height: min(70vh, 80vw); margin: calc(min(70vh, 80vw) / -2) 0 0 calc(min(70vh, 80vw) / -2);
    border-radius: 50%; background: radial-gradient(closest-side, rgba(249, 196, 85, .5), rgba(242, 157, 15, .12) 55%, transparent 100%);
}
.sf-film__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* Générique */
.sf-film__open { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 1.25rem; visibility: hidden; }
.sf-film__presents { margin: 0 0 1.1rem; font: 600 .78rem/1 var(--sf-font-sans); letter-spacing: .42em; text-transform: uppercase; color: var(--sf-gold-300); }
.sf-film__title { margin: 0; font: 600 clamp(2.6rem, 1.2rem + 6vw, 6.4rem)/.98 var(--sf-font-display); letter-spacing: -.02em; font-variation-settings: "SOFT" 50; perspective: 800px; }
.sf-film__title span, .sf-film__title em { display: block; }
.sf-film__title em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--sf-gold-400); text-shadow: 0 0 40px rgba(242, 157, 15, .35); }
.sf-film__title .sf-film__ch { display: inline-block; will-change: transform; }
.sf-film__rule { display: block; width: 120px; height: 1.5px; margin: 1.6rem auto 1rem; background: linear-gradient(90deg, transparent, var(--sf-gold-400), transparent); }
.sf-film__sub { margin: 0; font: italic 400 clamp(1rem, .9rem + .4vw, 1.25rem)/1.4 var(--sf-font-display); color: rgba(255, 244, 226, .72); }

/* Chapitres */
.sf-film__scene { position: absolute; inset: 0; visibility: hidden; }
.sf-film__word {
    position: absolute; left: 60%; top: 46%; translate: -50% -50%; white-space: nowrap; user-select: none;
    font: 700 clamp(4rem, 1rem + 12vw, 15rem)/.85 var(--sf-font-display); letter-spacing: -.03em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(252, 219, 142, .26);
}
.sf-film__word > span { display: block; }
.sf-film__fig { position: absolute; left: 60%; top: 47%; width: min(64vh, 44vw); height: min(64vh, 44vw); margin: 0; translate: -50% -50%; }
.sf-film__bob { position: absolute; inset: 0; display: grid; place-items: center; animation: sf-drift 6s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.sf-film__img { grid-area: 1 / 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; will-change: transform; }
.sf-film__scene--trio .sf-film__img { position: absolute; max-width: 58%; max-height: 58%; }
.sf-film__scene--trio .sf-film__img:nth-child(1) { left: 4%; top: 18%; max-height: 72%; }
.sf-film__scene--trio .sf-film__img:nth-child(2) { right: -2%; top: 0; }
.sf-film__scene--trio .sf-film__img:nth-child(3) { right: 0; bottom: 0; }
.sf-film__shards { position: absolute; left: 50%; top: 55%; }
.sf-film__shards i { position: absolute; width: 22px; height: 18px; margin: -9px 0 0 -11px; background: linear-gradient(135deg, #F3DEC4, #C9A27A); clip-path: polygon(0 20%, 60% 0, 100% 70%, 30% 100%); opacity: 0; }
.sf-film__shards i:nth-child(3n) { width: 14px; height: 12px; }

/* Sous-titres */
.sf-film__caps { position: absolute; left: clamp(1.25rem, 5vw, 4.5rem); bottom: clamp(5.5rem, 12vh, 8rem); width: min(30rem, 36vw); }
.sf-film__cap { position: absolute; left: 0; bottom: 0; width: 100%; visibility: hidden; }
.sf-film__kicker { margin: 0 0 .7rem; font: 700 .76rem/1 var(--sf-font-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--sf-gold-300); display: flex; align-items: center; gap: .7rem; }
.sf-film__kicker::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.sf-film__h { margin: 0 0 .7rem; font: 600 clamp(2rem, 1.2rem + 2.6vw, 3.6rem)/1.02 var(--sf-font-display); letter-spacing: -.01em; color: #FFF4E2; }
.sf-film__txt { margin: 0; font-size: clamp(1rem, .95rem + .25vw, 1.15rem); line-height: 1.5; color: rgba(255, 244, 226, .75); }

/* Affiche finale */
.sf-film__end { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 1.2rem; padding: 3rem 1.25rem; }
.sf-film.is-live .sf-film__end { position: absolute; inset: 0; align-content: center; visibility: hidden; }
.sf-film__logo { width: clamp(110px, 16vh, 170px); height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.sf .sf-film__end-title { margin: 0; max-width: 16ch; font: 600 clamp(2rem, 1.2rem + 3vw, 4rem)/1.02 var(--sf-font-display); color: #FFF4E2; }
.sf-film__end-title em { color: var(--sf-gold-400); font-variation-settings: "SOFT" 100, "WONK" 1; }
.sf-film__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .4rem; }
.sf-btn--film { --btn-bg: transparent; --btn-fg: #FFF4E2; --btn-bd: rgba(255, 244, 226, .35); --btn-hover: #FFF4E2; --btn-hover-fg: var(--sf-rust-800); }

/* Effets de pellicule */
.sf-film__fx { z-index: 3; }
.sf-film__flash { position: absolute; inset: 0; background: radial-gradient(circle at 60% 50%, #FFF8E6, #FCDB8E 40%, rgba(242, 157, 15, 0) 80%); opacity: 0; }
.sf-film__grain {
    position: absolute; inset: -50%; opacity: .1; mix-blend-mode: overlay; animation: sf-grain .9s steps(6) infinite;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes sf-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(-2%, -4%); } }
.sf-film__vignette { position: absolute; inset: 0; box-shadow: inset 0 0 160px 40px rgba(10, 3, 1, .75); border-radius: inherit; }
.sf-film__band { position: absolute; left: 0; right: 0; height: 50.5%; background: #0B0301; transform: scaleY(0); }
.sf-film__band--t { top: 0; transform-origin: 50% 0; }
.sf-film__band--b { bottom: 0; transform-origin: 50% 100%; }
.sf-film.is-off .sf-film__rays, .sf-film.is-off .sf-film__grain, .sf-film.is-off .sf-film__bob { animation-play-state: paused; }

/* Lecteur */
.sf-film__hud { display: none; }
.sf-film.is-live .sf-film__hud {
    position: absolute; z-index: 4; left: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vh, 1.6rem);
    display: flex; align-items: center; gap: 1rem;
}
.sf-film__play {
    flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem;
    color: #FFF4E2; background: rgba(255, 244, 226, .1); border: 1px solid rgba(255, 244, 226, .28);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s, transform .3s var(--sf-ease-out);
}
.sf-film__play:hover { background: var(--sf-gold-500); color: var(--sf-rust-950); transform: scale(1.06); }
.sf-film__track { flex: 1; min-width: 0; }
.sf-film__chapter { margin: 0 0 .45rem; font: 600 .78rem/1 var(--sf-font-sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 244, 226, .85); }
.sf-film__bar { position: relative; height: 3px; border-radius: 3px; background: rgba(255, 244, 226, .2); }
.sf-film__fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sf-gold-400), var(--sf-gold-600)); }
.sf-film__tick {
    position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 0; background: none; cursor: pointer;
}
.sf-film__tick::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #3B1407; border: 1.5px solid rgba(255, 244, 226, .6); transition: transform .25s var(--sf-ease-out), background-color .25s; }
.sf-film__tick.is-past::after { background: var(--sf-gold-400); border-color: var(--sf-gold-400); }
.sf-film__tick:hover::after, .sf-film__tick:focus-visible::after { transform: scale(1.5); }
.sf-film__cue { flex: none; display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 244, 226, .8); opacity: 0; transition: opacity .5s; }
.sf-film__cue .sf-hero__cue-mouse { border-color: rgba(255, 244, 226, .6); }
.sf-film.is-cue .sf-film__cue { opacity: 1; }

@media (max-width: 991.98px) {
    .sf-film__word { left: 50%; top: 34%; }
    .sf-film__fig { left: 50%; top: 36%; width: min(44svh, 80vw); height: min(44svh, 80vw); }
    .sf-film__caps { left: 1.25rem; right: 1.25rem; width: auto; bottom: 5.4rem; }
    .sf-film__h { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); }
    .sf-film__txt { font-size: .98rem; }
    .sf-film__rays, .sf-film__halo { top: 36%; }
    .sf-film__vignette { box-shadow: inset 0 0 90px 20px rgba(10, 3, 1, .7); }
    .sf-film__cue { display: none; }
}
@media (max-width: 575.98px) {
    .sf-film__stage { border-radius: var(--sf-r-lg); }
    .sf-film__txt { display: none; }
    .sf-film__caps { bottom: 5rem; }
}

.sf-intro { position: relative; background: var(--sf-bg); scroll-margin-top: calc(-1 * (var(--sf-nav-h) + 12px)); --ring: min(70vh, 44vw); --fx: 71%; --fy: 54%; }
.sf-intro__pin { position: relative; isolation: isolate; overflow: hidden; }

/* Fond animé : teintes par étape, halos qui dérivent, anneau, plumes */
.sf-intro__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sf-intro__tint { position: absolute; inset: 0; opacity: 0; background: radial-gradient(55% 70% at var(--fx) var(--fy), var(--t) 0%, transparent 72%); }
.sf-intro__tint:nth-child(1) { --t: #FDE7B8; opacity: 1; }
.sf-intro__tint:nth-child(2) { --t: #FBE0B0; }
.sf-intro__tint:nth-child(3) { --t: #FFE89A; }
.sf-intro__tint:nth-child(4) { --t: #E6EFD0; }   /* aliment : vert tendre, assorti au sac */
.sf-intro__tint:nth-child(5) { --t: #EFE5DA; }
.sf-intro__tint:nth-child(6) { --t: #F7D8C6; }
.sf-intro__tint:nth-child(7) { --t: #F9D3C2; }
.sf-intro__tint:nth-child(8) { --t: #F3E4CC; }
html.dark-mode .sf-intro__tint:nth-child(odd) { --t: rgba(242, 157, 15, .18); }
html.dark-mode .sf-intro__tint:nth-child(even) { --t: rgba(190, 90, 53, .24); }
/* Halos en dégradé radial (pas de filtre flou : bien plus léger à animer) */
.sf-intro__blob { position: absolute; border-radius: 50%; opacity: .75; will-change: transform; animation: sf-blob 18s ease-in-out infinite alternate; background: radial-gradient(closest-side, var(--b) 0%, transparent 100%); }
.sf-intro__blob--a { width: 58vw; height: 58vw; left: -20vw; top: -22vw; --b: var(--sf-gold-200); }
.sf-intro__blob--b { width: 50vw; height: 50vw; right: -17vw; bottom: -21vw; --b: var(--sf-rust-100); animation-duration: 23s; animation-delay: -7s; }
.sf-intro__blob--c { width: 32vw; height: 32vw; left: 33%; top: 52%; --b: #FFE9A8; animation-duration: 27s; animation-delay: -12s; }
html.dark-mode .sf-intro__blob { opacity: .16; }
@keyframes sf-blob { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(7vw, 5vw, 0) scale(1.18); } 100% { transform: translate3d(-5vw, 7vw, 0) scale(.92); } }
.sf-intro__ring {
    position: absolute; left: var(--fx); top: var(--fy); width: var(--ring); height: var(--ring);
    margin: calc(var(--ring) / -2) 0 0 calc(var(--ring) / -2); border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, var(--sf-rust-600) 32%, transparent);
}
.sf-intro__ring::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%); }
html.dark-mode .sf-intro__ring { border-color: rgba(246, 176, 74, .28); }
html.dark-mode .sf-intro__ring::before { background: radial-gradient(circle, rgba(242, 157, 15, .14), transparent 70%); }
.sf-intro__deco { position: absolute; width: clamp(30px, 3.4vw, 54px); height: auto; opacity: .9; }
.sf-intro__deco--2 { left: 47%; top: 14%; }
.sf-intro__deco--3 { right: 4%; top: 20%; }
.sf-intro__deco--4 { left: 53%; bottom: 5%; }

/* Étapes : par défaut (sans JS / mouvement réduit), les unes sous les autres */
.sf-intro__frames { display: grid; }
.sf-frame {
    position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center;
    gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); width: 100%; max-width: 1320px; margin-inline: auto;
    padding: clamp(2.5rem, 2rem + 4vw, 5.5rem) clamp(1rem, 3vw, 1.5rem);
}
.sf-frame--hero { padding-top: calc(var(--sf-nav-h) + clamp(1.5rem, 1rem + 3vw, 3.5rem)); }
.sf-frame__copy { position: relative; z-index: 2; max-width: 36rem; }
.sf-frame__fig { position: relative; margin: 0; height: clamp(260px, 58vh, 600px); display: grid; place-items: center; }
.sf-frame__img, .sf-frame__float { grid-area: 1 / 1; }
.sf-frame__img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 28px 34px rgba(var(--sf-shadow-rgb), .22)); will-change: transform; }
.sf-frame__float { height: 100%; width: 100%; display: grid; place-items: center; animation: sf-drift 6s ease-in-out infinite; }
.sf-frame--hero .sf-frame__img { max-height: 78%; }
.sf-frame__img--aliment-chair { width: 80%; max-width: 80%; height: auto; }   /* sac couché, plus large que les autres visuels */
.sf-frame__img--mouton { width: 84%; max-width: 84%; height: auto; }          /* mouton de profil (image peu haute) */
.sf-frame__img--chevre { width: auto; max-height: min(50vh, 520px); }         /* grande image : bornée comme le cadre */
@media (max-width: 991.98px) { .sf-frame__img--chevre { max-height: min(36vh, 380px); } }
.sf-frame--trio .sf-frame__fig { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .5rem; }
.sf-frame--trio .sf-frame__img:nth-child(1) { grid-area: 1 / 1 / 3 / 2; max-height: 88%; }
.sf-frame--trio .sf-frame__img:nth-child(2) { grid-area: 1 / 2; }
.sf-frame--trio .sf-frame__img:nth-child(3) { grid-area: 2 / 2; }
.sf-frame__word {
    position: absolute; z-index: -1; left: var(--fx); top: 50%; transform: translate(-50%, -50%); pointer-events: none; user-select: none; white-space: nowrap;
    font: 700 clamp(3.5rem, 1rem + 9vw, 11rem)/.85 var(--sf-font-display); letter-spacing: -.03em;
    color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--sf-rust-600) 22%, transparent);
}
.sf-frame__word > span { display: block; }
.sf-frame--hero .sf-frame__word { display: none; }   /* l'œuf occupe seul le centre de la 1re étape */
html.dark-mode .sf-frame__word { -webkit-text-stroke-color: rgba(246, 176, 74, .22); }
.sf-frame__kicker { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--sf-brand-text); margin: 0 0 .6rem; }
.sf-frame__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.02; margin: 0 0 1rem; }
.sf-frame__text { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--sf-text-2); margin: 0; max-width: 32rem; }
.sf-intro__hud { display: none; }
.sf-intro__motion { display: none; margin: 1.4rem 0 0; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.sf-intro__motion small { color: var(--sf-muted); font-size: .85rem; }
.sf-intro.is-reduced .sf-intro__motion { display: flex; }
.sf-intro.is-reduced .sf-frame__float { animation: none; }

/* Mode épinglé (JS actif) : toutes les étapes superposées, plein écran */
.sf-intro.is-pinned .sf-intro__pin { height: 100vh; height: 100svh; }
.sf-intro.is-pinned .sf-intro__frames { position: absolute; inset: 0; }
.sf-intro.is-pinned .sf-frame {
    position: absolute; inset: 0; max-width: none; height: 100%;
    padding: calc(var(--sf-nav-h) + 1rem) max(1rem, calc((100vw - 1296px) / 2)) 4.5rem;
}
.sf-intro.is-pinned .sf-frame__fig { height: min(70vh, 44vw); }
.sf-intro.is-pinned .sf-intro__hud {
    position: absolute; left: 0; right: 0; bottom: 1.4rem; z-index: 3; display: flex; align-items: center; gap: 1.2rem;
    padding-inline: max(1rem, calc((100vw - 1296px) / 2)); font-size: .8rem; color: var(--sf-muted);
}
.sf-intro__bar { position: relative; width: min(260px, 30vw); height: 2px; border-radius: 2px; background: var(--sf-border); overflow: hidden; }
.sf-intro__fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sf-gold-500), var(--sf-rust-600)); }
.sf-intro__cue { display: inline-flex; align-items: center; gap: .75rem; margin-left: auto; letter-spacing: .22em; text-transform: uppercase; font-size: .75rem; }

/* La filière empilée (depuis le 2026-09-26, plus d'épinglage) : image et texte alternés,
   halo teinté et anneau derrière chaque image, fil or → rouille qui relie les étapes */
.sf-intro--stack .sf-intro__frames { position: relative; }
.sf-intro--stack .sf-frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 5vw, 7rem); padding-block: clamp(3rem, 2rem + 5vw, 7rem); }
.sf-intro--stack .sf-frame--hero { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.sf-intro--stack .sf-frame:nth-of-type(even) .sf-frame__fig { order: -1; }
.sf-intro--stack .sf-frame:nth-of-type(even) .sf-frame__word { left: 29%; }
.sf-intro--stack .sf-frame__copy { width: 100%; }
.sf-intro--stack .sf-frame:nth-of-type(even) .sf-frame__copy { margin-left: auto; }
.sf-intro--stack .sf-frame__word { --fx: 71%; z-index: 0; }   /* au-dessus du halo, sous l'image */
.sf-intro--stack .sf-frame__float, .sf-intro--stack .sf-frame--trio .sf-frame__img { position: relative; z-index: 1; }
.sf-intro--stack .sf-frame__fig::before,
.sf-intro--stack .sf-frame__fig::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(92%, 34rem); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.sf-intro--stack .sf-frame__fig::before { background: radial-gradient(circle, var(--t, #FDE7B8) 0%, color-mix(in srgb, var(--t, #FDE7B8) 40%, transparent) 42%, transparent 70%); }
.sf-intro--stack .sf-frame__fig::after { width: min(78%, 29rem); border: 1.5px dashed color-mix(in srgb, var(--sf-rust-600) 28%, transparent); }
.sf-intro--stack .sf-frame:nth-of-type(1) { --t: #FDE7B8; }
.sf-intro--stack .sf-frame:nth-of-type(2) { --t: #FBE0B0; }
.sf-intro--stack .sf-frame:nth-of-type(3) { --t: #FFE89A; }
.sf-intro--stack .sf-frame:nth-of-type(4) { --t: #E6EFD0; }
.sf-intro--stack .sf-frame:nth-of-type(5) { --t: #EFE5DA; }
.sf-intro--stack .sf-frame:nth-of-type(6) { --t: #F7D8C6; }
.sf-intro--stack .sf-frame:nth-of-type(7) { --t: #F9D3C2; }
.sf-intro--stack .sf-frame:nth-of-type(8) { --t: #F3E4CC; }
.sf-intro--stack .sf-frame:nth-of-type(9) { --t: #EFE3D0; }
.sf-intro--stack .sf-frame:nth-of-type(10) { --t: #ECE7D8; }   /* moutons : laine */
.sf-intro--stack .sf-frame:nth-of-type(11) { --t: #F6DCC0; }   /* chèvres : fauve */
html.dark-mode .sf-intro--stack .sf-frame:nth-of-type(odd) { --t: rgba(242, 157, 15, .22); }
html.dark-mode .sf-intro--stack .sf-frame:nth-of-type(even) { --t: rgba(190, 90, 53, .28); }
html.dark-mode .sf-intro--stack .sf-frame__fig::after { border-color: rgba(246, 176, 74, .26); }
/* Fil central et jalon de chaque étape */
.sf-intro__thread { position: absolute; left: 50%; top: clamp(4rem, 8vw, 8rem); bottom: clamp(4rem, 8vw, 8rem); width: 2px; margin-left: -1px; border-radius: 2px; transform-origin: 50% 0; pointer-events: none; opacity: .6; background: linear-gradient(var(--sf-gold-500), var(--sf-rust-600)); }
.sf-intro--stack .sf-frame::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--sf-bg); border: 2px solid var(--sf-gold-500); box-shadow: 0 0 0 6px color-mix(in srgb, var(--sf-gold-500) 16%, transparent); }

/* =========================================================
   Film de présentation (inc_video.php) — tout en haut de l'accueil
   ========================================================= */
.sf-reel { position: relative; background: var(--sf-bg); padding: calc(var(--sf-nav-h) + .75rem) 0 clamp(1rem, 2vw, 1.5rem); }
/* Même largeur que le contenu de l'en-tête (.container de Bootstrap) ; fond du cadre = fond de la version affichée */
.sf-reel__frame { position: relative; isolation: isolate; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; background: #FDF6EA; border-radius: 28px; box-shadow: var(--sf-sh-lg); }
html.dark-mode .sf-reel__frame { background: #140702; }
.sf-reel__video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
@media (max-width: 767.98px) {
    /* Mobile (clair comme sombre) : version portrait 3:5 dont le fond est exactement celui du site
       (#FDF6EA en clair, #170C06 en sombre) → pleine largeur d'écran, sans bordure ni ombre, fondue dans la page.
       Hauteur limitée à l'écran sous l'en-tête : tout le film est visible sans défiler (sur un écran plus court,
       la vidéo se réduit en « contain » et le fond de la page comble les côtés, sans raccord visible). */
    .sf-reel { padding: var(--sf-nav-h) 0 0; }
    .sf-reel__frame { width: 100vw; margin-inline: calc(50% - 50vw); aspect-ratio: auto; height: min(calc(100vw * 5 / 3), calc(100svh - var(--sf-nav-h))); border-radius: 0; box-shadow: none; }
    .sf-reel__frame, html.dark-mode .sf-reel__frame { background: var(--sf-bg); }
    .sf-reel__video { object-fit: contain; }
    /* Fondu imperceptible en haut et en bas : aucune ligne de raccord, quel que soit le rendu des couleurs du téléphone */
    .sf-reel__video { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%); }
}
/* Film qui avance au défilement (classe .is-scrub posée par initReel) : la section devient une piste haute,
   le cadre reste collé à l'écran le temps de la parcourir (≈ 1 écran de défilement toutes les 8 s de film) */
.sf-reel__cue { display: none; }
.sf-reel.is-scrub { height: 580vh; padding: 0; }
.sf-reel.is-scrub .sf-reel__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding: calc(var(--sf-nav-h) + .75rem) 0 1rem; }
.sf-reel.is-scrub .sf-reel__sticky > .container { width: 100%; }
/* même largeur que l'en-tête (.container), toujours remplie par la vidéo */
.sf-reel.is-scrub .sf-reel__frame { width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: calc(100svh - var(--sf-nav-h) - 1.75rem); }
.sf-reel.is-scrub .sf-reel__video { object-fit: cover; object-position: 50% 62%; }   /* écran peu haut : on rogne un peu en haut et en bas (répartition 62/38), la légende garde sa marge */
html:not(.dark-mode) .sf-reel.is-scrub .sf-reel__frame { background: #FDF6EA; }
html.dark-mode .sf-reel.is-scrub .sf-reel__frame { background: #120602; }
.sf-reel.is-scrub .sf-reel__video { cursor: default; }
.sf-reel.is-scrub .sf-reel__cue { position: absolute; left: 50%; bottom: 1.4rem; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem; transform: translateX(-50%);
    font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--sf-muted); pointer-events: none; transition: opacity .5s ease, transform .5s ease; }
html.dark-mode .sf-reel.is-scrub .sf-reel__cue { color: rgba(253, 246, 234, .7); }
.sf-reel__mouse { position: relative; width: 22px; height: 34px; border: 2px solid currentColor; border-radius: 12px; opacity: .8; }
.sf-reel__mouse i { position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--sf-gold-500); animation: sf-reel-wheel 1.6s ease-in-out infinite; }
@keyframes sf-reel-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.sf-motion-off .sf-reel__mouse i { animation: none; }
.sf-reel__frame.is-started .sf-reel__cue { opacity: 0; transform: translate(-50%, 10px); }
@media (max-width: 767.98px) {
    .sf-reel.is-scrub { height: 520vh; }
    .sf-reel.is-scrub .sf-reel__sticky { padding: var(--sf-nav-h) 0 0; align-items: flex-start; }
    .sf-reel.is-scrub .sf-reel__frame { width: 100vw; margin-inline: calc(50% - 50vw); height: min(calc(100vw * 5 / 3), calc(100svh - var(--sf-nav-h))); max-height: none; }
    /* mobile : la vidéo occupe toute la largeur de l'écran (comme l'en-tête) ; sur un écran plus court, on rogne un peu le haut et le bas, qui sont vides */
    .sf-reel.is-scrub .sf-reel__video { object-fit: cover; object-position: 50% 42%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%); }
    html:not(.dark-mode) .sf-reel.is-scrub .sf-reel__frame, html.dark-mode .sf-reel.is-scrub .sf-reel__frame { background: var(--sf-bg); }
    .sf-reel.is-scrub .sf-reel__cue { bottom: 1rem; }
}
/* =========================================================
   Vitrine de la boutique (boutique.php) : slider premium aux couleurs du logo, juste sous l'en-tête
   Produits (image, nom, prix) de la boutique choisie. Diapositives superposées dans une même cellule de grille :
   la plus haute donne la hauteur. Entrée : la photo se dévoile (masque + zoom), les textes montent en cascade.
   ========================================================= */
.sf-showcase { position: relative; padding: calc(var(--sf-nav-h) + .75rem) 0 clamp(1rem, 2vw, 1.75rem); background: var(--sf-bg); }
.sf-showcase[hidden] { display: none; }
.sf-showcase[hidden] + .sf-shop { padding-top: calc(var(--sf-nav-h) + 2.5rem); }   /* pas de vitrine (aucun produit) : le catalogue laisse la place à l'en-tête */
.sf-showcase__frame {
    position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; color: #FFF8EC;
    padding: clamp(1.25rem, 1rem + 2vw, 2.75rem) clamp(1.25rem, 1rem + 3vw, 3.5rem) clamp(1.1rem, 1rem + 1vw, 1.75rem);
    background:
        radial-gradient(60% 80% at 78% 45%, rgba(242, 157, 15, .38) 0%, rgba(242, 157, 15, 0) 62%),
        radial-gradient(40% 50% at 8% 100%, rgba(242, 157, 15, .16) 0%, rgba(242, 157, 15, 0) 70%),
        linear-gradient(135deg, #5C1E09 0%, #94330F 52%, #7A280B 100%);
    box-shadow: var(--sf-sh-lg);
}
/* grain très léger pour la matière */
.sf-showcase__frame::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; mix-blend-mode: overlay; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.sf-showcase__glow { position: absolute; z-index: -1; right: -12%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(252, 219, 142, .22), rgba(252, 219, 142, 0) 65%); animation: sf-blob 16s ease-in-out infinite alternate; }
.sf-showcase__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: clamp(.75rem, 2vw, 1.5rem); }
.sf-showcase__store { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .95rem; border-radius: 999px; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: rgba(255, 248, 236, .1); border: 1px solid rgba(255, 248, 236, .22); color: #FFF8EC; }
.sf-showcase__store i { color: var(--sf-gold-300); }
.sf-showcase__change { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; font-size: .92rem; color: #FDE7B8 !important; text-decoration: none; }
.sf-showcase__change:hover { color: #FFFFFF !important; }

.sf-showcase__stage { display: grid; touch-action: pan-y; }
.sf-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
    visibility: hidden; opacity: 0; transition: opacity .6s var(--sf-ease-out), visibility 0s linear .6s; }
.sf-slide.is-active { visibility: visible; opacity: 1; transition: opacity .6s var(--sf-ease-out), visibility 0s; z-index: 1; }
.sf-slide__copy { display: flex; flex-direction: column; align-items: flex-start; }
.sf-slide__copy > * { transform: translateY(28px); opacity: 0; transition: transform .8s var(--sf-ease-out), opacity .8s var(--sf-ease-out); }
.sf-slide.is-active .sf-slide__copy > * { transform: none; opacity: 1; }
.sf-slide.is-active .sf-slide__copy > :nth-child(2) { transition-delay: .08s; }
.sf-slide.is-active .sf-slide__copy > :nth-child(3) { transition-delay: .16s; }
.sf-slide.is-active .sf-slide__copy > :nth-child(4) { transition-delay: .24s; }
.sf-slide__cat { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sf-gold-300); margin-bottom: .9rem; }
.sf-slide__cat::before { content: ""; width: 2.2rem; height: 2px; background: currentColor; border-radius: 2px; }
.sf-slide__name { font-family: var(--sf-font-display); font-weight: 600; font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.2rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 1rem; color: #FFF8EC;
    font-variation-settings: "SOFT" 50, "opsz" 144; overflow-wrap: anywhere; }
.sf-slide__price { font-family: var(--sf-font-display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.3rem); line-height: 1; margin: 0 0 1.6rem; color: var(--sf-gold-300); }
.sf-slide__price small { font-family: "DM Sans", system-ui, sans-serif; font-size: .42em; font-weight: 700; letter-spacing: .08em; margin-left: .45rem; color: #FDE7B8; }
.sf-slide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.sf-slide__more { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 600; color: #FFF8EC !important; text-decoration: none; border-bottom: 1.5px solid rgba(255, 248, 236, .35); }
.sf-slide__more:hover { border-bottom-color: var(--sf-gold-300); }
.sf-slide__more i { transition: transform .35s var(--sf-ease-out); }
.sf-slide__more:hover i { transform: translateX(4px); }
/* Visuel : disque crème (photo en « assiette »), anneau pointillé or qui tourne lentement */
.sf-slide__media { position: relative; margin: 0; display: grid; place-items: center; }
.sf-slide__ring { position: absolute; width: min(100%, 30rem); aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(252, 219, 142, .5); animation: sf-spin 60s linear infinite; }
.sf-slide__disc { position: relative; display: block; width: min(86%, 26rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #FDF6EA;
    border: 8px solid rgba(255, 248, 236, .92); box-shadow: 0 40px 60px -24px rgba(20, 7, 2, .65), 0 0 0 1px rgba(255, 248, 236, .25);
    clip-path: circle(0% at 50% 50%); transition: clip-path 1s var(--sf-ease-out); }
.sf-slide.is-active .sf-slide__disc { clip-path: circle(50% at 50% 50%); }
/* photo entière (contain) avec une marge dans le disque : plus de recadrage « zoomé » */
.sf-slide__disc img { width: 100%; height: 100%; object-fit: contain; padding: 14%; display: block; transform: scale(1.08); transition: transform 1.6s var(--sf-ease-out);
    mix-blend-mode: multiply; }   /* le fond blanc des photos produit se fond dans le crème du disque (blanc × crème = crème) */
.sf-slide.is-active .sf-slide__disc img { transform: scale(1); }
.sf-slide[data-dir="prev"] .sf-slide__copy > * { transform: translateY(-22px); }
.sf-slide.is-active[data-dir="prev"] .sf-slide__copy > * { transform: none; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* Squelette (chargement) */
.sf-skel-line { display: block; height: 1.1rem; border-radius: 8px; margin-bottom: 1rem; background: linear-gradient(100deg, rgba(255,248,236,.08) 30%, rgba(255,248,236,.2) 50%, rgba(255,248,236,.08) 70%) 0 0 / 300% 100%; animation: sf-shimmer 1.4s linear infinite; }
.sf-skel-line--xl { height: 3.2rem; } .sf-skel-line--lg { height: 2.4rem; }
.sf-skel-disc { clip-path: none !important; background: linear-gradient(100deg, rgba(255,248,236,.1) 30%, rgba(255,248,236,.22) 50%, rgba(255,248,236,.1) 70%) 0 0 / 300% 100%; animation: sf-shimmer 1.4s linear infinite; border-color: rgba(255,248,236,.18); }
.sf-slide--skeleton .sf-slide__copy > * { opacity: 1; transform: none; }

/* Commandes : flèches (aux deux extrémités) et barre de progression */
.sf-showcase__controls { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: clamp(1rem, 2vw, 1.75rem); }
.sf-showcase__nav { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; font-size: 1.15rem;
    color: #FFF8EC; background: rgba(255, 248, 236, .08); border: 1px solid rgba(255, 248, 236, .3); transition: background-color .3s, color .3s, transform .3s var(--sf-ease-out); }
.sf-showcase__nav:hover { background: var(--sf-gold-500); color: var(--sf-rust-950); transform: translateY(-2px); }
.sf-showcase__nav:focus-visible { outline: 3px solid var(--sf-gold-300); outline-offset: 3px; }
.sf-showcase__progress { position: relative; height: 3px; margin-top: 1rem; border-radius: 3px; background: rgba(255, 248, 236, .16); overflow: hidden; }
.sf-showcase__progress i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sf-gold-300), var(--sf-gold-500)); border-radius: 3px; }
.sf-showcase__progress i.is-running { animation: sf-showcase-prog 6s linear forwards; }
.sf-showcase.is-paused .sf-showcase__progress i, .sf-showcase.is-offscreen .sf-showcase__progress i { animation-play-state: paused; }
@keyframes sf-showcase-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sf-showcase.is-loading .sf-showcase__controls, .sf-showcase.is-loading .sf-showcase__progress,
.sf-showcase.is-single .sf-showcase__controls, .sf-showcase.is-single .sf-showcase__progress { visibility: hidden; }
:root.sf-motion-off .sf-showcase__progress, :root.sf-motion-off .sf-showcase__glow, :root.sf-motion-off .sf-slide__ring { animation: none; }

@media (max-width: 767.98px) {
    .sf-showcase { padding-top: calc(var(--sf-nav-h) + .5rem); }
    .sf-showcase__frame { border-radius: 24px; }
    /* mobile : visuel au-dessus, textes centrés dessous */
    .sf-slide { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; text-align: center; }
    .sf-slide__media { order: -1; }
    .sf-slide__disc { width: min(72%, 17rem); border-width: 6px; }
    .sf-slide__ring { width: min(92%, 21rem); }
    .sf-slide__copy { align-items: center; }
    .sf-slide__name { font-size: clamp(1.8rem, 1.2rem + 4vw, 2.4rem); margin-bottom: .6rem; }
    .sf-slide__price { margin-bottom: 1.1rem; }
    .sf-slide__actions { justify-content: center; }
    .sf-showcase__nav { width: 44px; height: 44px; }
    .sf-showcase__change span, .sf-showcase__head { font-size: .8rem; }
}
@media (max-width: 991.98px) {   /* filière sur une colonne : image au-dessus du texte (règles plus bas) */
    .sf-intro__thread, .sf-intro--stack .sf-frame::before { display: none; }
    .sf-intro--stack .sf-frame { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem); }
    .sf-intro--stack .sf-frame__word, .sf-intro--stack .sf-frame:nth-of-type(even) .sf-frame__word { --fx: 50%; left: 50%; }
}

/* Séparateur premium entre les étapes de la filière (mobile / tablette) : deux traits or → rouille qui se
   dessinent depuis le centre, un œuf rouille bordé d'or portant le numéro de l'étape, deux losanges dorés */
.sf-frame-sep { display: none; }
@media (max-width: 991.98px) {
    .sf-frame-sep { position: relative; z-index: 2; display: flex; align-items: center; gap: .9rem; width: min(100%, 22rem); margin: .25rem auto; padding: .5rem 0; }
    .sf-frame-sep__line { position: relative; flex: 1; height: 2px; border-radius: 2px; }
    .sf-frame-sep__line::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--sf-gold-400) 45%, var(--sf-rust-600)); transform-origin: 100% 50%; }
    .sf-frame-sep__line:last-child::before { background: linear-gradient(90deg, var(--sf-rust-600), var(--sf-gold-400) 55%, transparent); transform-origin: 0 50%; }
    /* losange doré au bout intérieur de chaque trait */
    .sf-frame-sep__line::after { content: ""; position: absolute; top: 50%; right: -1px; width: 7px; height: 7px; margin-top: -3.5px; background: var(--sf-gold-500); transform: rotate(45deg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-gold-500) 18%, transparent); }
    .sf-frame-sep__line:last-child::after { right: auto; left: -1px; }
    .sf-frame-sep__egg { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 43px; filter: drop-shadow(0 8px 14px rgba(92, 30, 9, .28)); }
    .sf-frame-sep__egg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .sf-frame-sep__egg path { fill: var(--sf-rust-700); stroke: var(--sf-gold-400); stroke-width: 3.5; }
    .sf-frame-sep__egg::before { content: ""; position: absolute; left: 30%; top: 22%; width: 22%; height: 18%; border-radius: 50%; background: rgba(255, 255, 255, .22); transform: rotate(-25deg); z-index: 1; }   /* reflet */
    html.dark-mode .sf-frame-sep__egg path { fill: var(--sf-rust-800); stroke: var(--sf-gold-500); }
    html.dark-mode .sf-frame-sep__egg { filter: drop-shadow(0 0 16px rgba(242, 157, 15, .22)); }

    /* Entrée : les traits partent de l'œuf, l'œuf éclot en tournant légèrement */
    .sf-js:not(.sf-motion-off) .sf-frame-sep__line::before { transform: scaleX(0); transition: transform 1s cubic-bezier(.22, 1, .36, 1) .25s; }
    .sf-js:not(.sf-motion-off) .sf-frame-sep__line::after { opacity: 0; transform: rotate(45deg) scale(0); transition: opacity .4s ease .9s, transform .5s cubic-bezier(.34, 1.56, .64, 1) .9s; }
    .sf-js:not(.sf-motion-off) .sf-frame-sep__egg { opacity: 0; transform: scale(.4) rotate(-18deg); transition: opacity .5s ease, transform .8s cubic-bezier(.34, 1.56, .64, 1); }
    .sf-js:not(.sf-motion-off) .sf-frame-sep.is-in .sf-frame-sep__line::before { transform: scaleX(1); }
    .sf-js:not(.sf-motion-off) .sf-frame-sep.is-in .sf-frame-sep__line::after { opacity: 1; transform: rotate(45deg) scale(1); }
    .sf-js:not(.sf-motion-off) .sf-frame-sep.is-in .sf-frame-sep__egg { opacity: 1; transform: none; }
    /* léger balancement continu de l'œuf une fois posé */
    .sf-js:not(.sf-motion-off):not(.sf-motion-soft) .sf-frame-sep.is-in .sf-frame-sep__egg svg { animation: sf-sep-sway 4.5s ease-in-out 1.2s infinite; transform-origin: 50% 90%; }
}
@keyframes sf-sep-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } }

/* =========================================================
   7. Bandeau défilant
   ========================================================= */
.sf-marquee { position: relative; overflow: hidden; background: var(--sf-rust-800); color: var(--sf-cream-100); padding: 1.15rem 0; border-block: 1px solid rgba(255, 255, 255, .06); }
html.dark-mode .sf-marquee { background: #2A140A; }
.sf-marquee__track { display: flex; width: max-content; animation: sf-marquee 38s linear infinite; }
.sf-gsap .sf-marquee__track { animation: none; }
.sf-marquee:hover .sf-marquee__track { animation-play-state: paused; }
.sf-marquee__group { display: flex; align-items: center; flex: none; }
.sf-marquee__item { display: inline-flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; font: italic 500 clamp(1.25rem, 1rem + 1vw, 1.85rem)/1 var(--sf-font-display); font-variation-settings: "SOFT" 100, "WONK" 1; white-space: nowrap; }
.sf-marquee__item svg { width: 22px; height: 22px; flex: none; color: var(--sf-gold-400); }
@keyframes sf-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* =========================================================
   9. Catégories
   ========================================================= */
.sf-cats__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.8rem, .5rem + 1vw, 1.5rem); }   /* 5 produits depuis l'ajout des aliments */
.sf-tile {
    position: relative; display: block; overflow: hidden; isolation: isolate;
    aspect-ratio: 3 / 4.1; border-radius: var(--sf-r-lg); color: var(--sf-cream-50) !important; text-decoration: none !important;
    box-shadow: var(--sf-sh-md); background: var(--sf-rust-800);
}
.sf-tile img, .sf-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-tile img { position: absolute; inset: 0; z-index: -2; transform: scale(1.04); transition: transform 1.1s var(--sf-ease-out); }
.sf-tile::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(31, 10, 3, 0) 35%, rgba(31, 10, 3, .55) 62%, rgba(31, 10, 3, .92) 100%);
}
.sf-tile:hover img { transform: scale(1.12); }
.sf-tile__num { position: absolute; top: 1.1rem; left: 1.2rem; font: italic 400 1rem/1 var(--sf-font-display); opacity: .9; padding: .35rem .65rem; border-radius: var(--sf-r-pill); background: rgba(31, 10, 3, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sf-tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.3rem 1.3rem; }
.sf-tile__title { font: 650 clamp(1.3rem, 1.05rem + .8vw, 1.7rem)/1.05 var(--sf-font-display); color: #FFF8EC !important; margin: 0 0 .4rem; }
.sf-tile__text { font-size: .92rem; line-height: 1.45; color: rgba(255, 248, 236, .82); margin: 0; max-width: 22ch; }
.sf-tile__go {
    position: absolute; right: 1.1rem; bottom: 1.2rem; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; background: var(--sf-gold-500); color: var(--sf-rust-950);
    transform: translateY(8px) rotate(-45deg); opacity: 0; transition: transform .5s var(--sf-ease-out), opacity .4s;
}
.sf-tile:hover .sf-tile__go, .sf-tile:focus-visible .sf-tile__go { transform: none; opacity: 1; }
.sf-tile:focus-visible { outline-offset: 4px; }
/* Fond des tuiles « Nos produits » (fixe, aux couleurs du logo) + cercle pointillé. Les visuels d'origine le recouvrent
   (fond incrusté) ; une image remplacée depuis l'éditeur MYPOS (.sf-img-custom) se pose dessus sans le masquer. */
.sf-tile--rouille { background: radial-gradient(ellipse 80% 60% at 50% 36%, #B24A1E 0%, #963A14 45%, #6F250B 100%); }
.sf-tile--or { background: radial-gradient(ellipse 80% 60% at 50% 36%, #F8C75E 0%, #F3A61C 50%, #E08E08 100%); }
.sf-tile--sable { background: radial-gradient(ellipse 80% 60% at 50% 36%, #F9DE97 0%, #F3C45E 55%, #E9AE3C 100%); }
.sf-tile::before {
    content: ""; position: absolute; z-index: -3; left: 50%; top: 36%; width: 86%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border: 1.5px dashed rgba(255, 248, 236, .35); border-radius: 50%;
}
.sf-tile img.sf-img-custom {
    inset: 4% 7% 30%; width: 86%; height: 66%; object-fit: contain; object-position: 50% 50% !important;
    filter: drop-shadow(0 18px 16px rgba(31, 10, 3, .35));
}

/* =========================================================
   10. Boutique
   ========================================================= */
.sf-shop { background: var(--sf-bg-alt); }
.sf-store {
    display: flex; align-items: center; gap: 1rem; padding: .7rem .8rem .7rem 1.1rem; min-width: min(100%, 420px);
    border-radius: var(--sf-r-lg); background: var(--sf-surface); border: 1px solid var(--sf-border); box-shadow: var(--sf-sh-sm);
}
.sf-store__ico { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--sf-gold-100); color: var(--sf-rust-600); font-size: 1.2rem; }
html.dark-mode .sf-store__ico { background: rgba(242, 157, 15, .15); color: var(--sf-gold-300); }
.sf-store label { display: block; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--sf-muted); margin-bottom: .1rem; }
.sf .sf-store .form-select { border: 0; border-radius: 8px; background-color: transparent; padding: .1rem 2rem .1rem 0; font: 650 1.12rem/1.3 var(--sf-font-display); color: var(--sf-text); box-shadow: none; min-height: 36px; cursor: pointer; }
.sf .sf-store .form-select:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 4px; }
.sf-store:focus-within { border-color: var(--sf-gold-500); box-shadow: 0 0 0 4px rgba(242, 157, 15, .16); }
.sf-store__body { flex: 1; min-width: 0; }

.sf-feature { border-radius: var(--sf-r-xl); overflow: hidden; background: var(--sf-surface); border: 1px solid var(--sf-border); box-shadow: var(--sf-sh-md); margin-bottom: 2rem; }
.sf-feature .carousel-item { transition: transform .8s var(--sf-ease-out), opacity .6s; }
.sf-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 330px; }
.sf-promo__info { padding: clamp(1.6rem, 1rem + 3vw, 3.4rem); }
.sf-promo__badge { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: var(--sf-r-pill); background: var(--sf-gold-500); color: var(--sf-rust-950); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.sf-promo__name { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); margin: 0 0 .6rem; }
.sf-promo__desc { color: var(--sf-text-2); margin: 0 0 1.2rem; max-width: 38ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sf-promo__price { font: 650 1.7rem/1 var(--sf-font-display); color: var(--sf-brand-text); margin-bottom: 1.4rem; }
.sf-promo__price small { font: 600 .8rem var(--sf-font-sans); color: var(--sf-muted); margin-left: .2rem; }
.sf-promo__media { position: relative; height: 100%; min-height: 300px; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(60% 60% at 50% 55%, var(--sf-gold-100), transparent 75%), var(--sf-bg-alt); }
html.dark-mode .sf-promo__media { background: radial-gradient(60% 60% at 50% 55%, rgba(242, 157, 15, .14), transparent 75%), var(--sf-bg-alt); }
.sf-promo__media img { max-height: 280px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(var(--sf-shadow-rgb), .25)); }
.sf-feature .carousel-control-prev, .sf-feature .carousel-control-next { width: auto; top: auto; bottom: 1.2rem; opacity: 1; }
.sf-feature .carousel-control-prev { left: auto; right: 5.2rem; }
.sf-feature .carousel-control-next { right: 1.4rem; }
.sf-feature .carousel-indicators { justify-content: flex-start; margin: 0 0 1.5rem clamp(1.6rem, 1rem + 3vw, 3.4rem); }
.sf-feature .carousel-indicators [data-bs-target] { width: 26px; height: 4px; border-radius: 4px; background: var(--sf-rust-600); border: 0; opacity: .25; }
.sf-feature .carousel-indicators .active { opacity: 1; width: 44px; }
.header-promo-nav, .sf-round-btn {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: var(--sf-surface-2); border: 1px solid var(--sf-border); color: var(--sf-text); box-shadow: var(--sf-sh-sm);
    transition: background-color .25s, color .25s;
}
.carousel-control-prev:hover .header-promo-nav, .carousel-control-next:hover .header-promo-nav { background: var(--sf-primary); color: var(--sf-on-primary); }

.sf-filters { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; gap: .75rem; margin-bottom: 1rem; }
.sf-search { position: relative; }
.sf-search i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--sf-muted); pointer-events: none; }
.sf .sf-search .form-control { padding-left: 2.9rem; }
.sf .form-control, .sf .form-select {
    min-height: 52px; border-radius: var(--sf-r-md); border: 1.5px solid var(--sf-field-border); background-color: var(--sf-surface);
    color: var(--sf-text); font-size: 1rem; padding-inline: 1rem; transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.sf textarea.form-control { min-height: 140px; padding-block: .85rem; }
.sf .form-control::placeholder { color: color-mix(in srgb, var(--sf-muted) 75%, transparent); }
/* Erreur sous le champ (SF.showFieldErrors) : icône + texte, jamais la couleur seule */
.sf .form-control.is-invalid, .sf .form-select.is-invalid { border-color: var(--sf-danger); background-image: none; padding-right: 1rem; }
.sf .sf-pw .form-control.is-invalid { padding-right: 3.4rem; }
.sf-field-error { display: flex; align-items: flex-start; gap: .45rem; margin-top: .45rem; color: var(--sf-danger); font-size: .9rem; font-weight: 500; line-height: 1.35; }
.sf-field-error i { flex: none; margin-top: .1rem; }
.sf .form-control:focus, .sf .form-select:focus { border-color: var(--sf-focus); box-shadow: 0 0 0 4px rgba(242, 157, 15, .18); background-color: var(--sf-surface-2); color: var(--sf-text); }
.sf .form-label { font-weight: 600; font-size: .92rem; margin-bottom: .45rem; color: var(--sf-text); }
.sf .input-group-text { background: var(--sf-surface); border: 1.5px solid var(--sf-border); color: var(--sf-muted); border-radius: var(--sf-r-md); }
.sf-filters__btn { min-height: 52px; border-radius: var(--sf-r-md) !important; padding-inline: 1.2rem; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.sf-price-panel { padding: 1rem; border-radius: var(--sf-r-md); background: var(--sf-surface); border: 1px solid var(--sf-border); margin-bottom: 1rem; }

.sf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.8rem; }
.sf-chips__label { font-weight: 600; font-size: .9rem; color: var(--sf-muted); margin-right: .25rem; }
.sf .cat-chip {
    display: inline-flex; align-items: center; min-height: 42px; padding: .45rem 1.05rem; border-radius: var(--sf-r-pill);
    background: var(--sf-surface); color: var(--sf-text); border: 1.5px solid var(--sf-border);
    font-weight: 600; font-size: .9rem; cursor: pointer; user-select: none; white-space: nowrap;
    transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--sf-ease-out);
}
.sf .cat-chip:hover { border-color: var(--sf-gold-500); transform: translateY(-1px); }
.sf .cat-chip.active { background: var(--sf-rust-800); border-color: var(--sf-rust-800); color: var(--sf-cream-100); }
html.dark-mode .sf .cat-chip.active { background: var(--sf-gold-500); border-color: var(--sf-gold-500); color: var(--sf-rust-950); }

/* Carte produit */
.sf-product {
    position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--sf-r-lg); background: var(--sf-surface); border: 1px solid var(--sf-border);
    transition: transform .5s var(--sf-ease-out), box-shadow .5s var(--sf-ease-out), border-color .3s;
    animation: sf-rise .7s var(--sf-ease-out) both; animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes sf-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.sf-product:hover { transform: translateY(-6px); box-shadow: var(--sf-sh-lg); border-color: transparent; }
.sf-product:focus-within { border-color: var(--sf-gold-500); }
.sf-product__media {
    position: relative; aspect-ratio: 1 / .92; overflow: hidden; display: grid; place-items: center; padding: 1.1rem;
    background: radial-gradient(70% 70% at 50% 60%, var(--sf-surface-2), var(--sf-bg-alt));
}
.sf-product__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--sf-ease-out); }
/* Les fonds blancs des photos produits se fondent dans le décor crème ;
   en mode sombre, les produits restent présentés dans un « écrin » clair. */
.sf-product__media img, .sf-promo__media img, .sf-quick__media img, .sf-pdp__media img { mix-blend-mode: multiply; }
html.dark-mode .sf-product__media, html.dark-mode .sf-quick__media, html.dark-mode .sf-pdp__media,
html.dark-mode .sf-promo__media { background: radial-gradient(70% 70% at 50% 58%, #FBF3E6, #E9D6BC); }
html.dark-mode .sf-line__img, html.dark-mode .sf-cart-row img { background: #F3E6D2; }
.sf-product:hover .sf-product__media img { transform: scale(1.07) rotate(-1deg); }
.sf .wish-btn {
    position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; border: 1px solid var(--sf-border);
    background: color-mix(in srgb, var(--sf-surface-2) 88%, transparent); color: var(--sf-muted); font-size: 1rem;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .3s var(--sf-ease-out), color .25s, border-color .25s;
}
.sf .wish-btn:hover { transform: scale(1.1); color: #D92D20; }
.sf .wish-btn.active { color: #D92D20; border-color: rgba(217, 45, 32, .35); }
.sf .wish-btn.active i { animation: sf-bump .55s var(--sf-ease-out); }
.sf-stock {
    position: absolute; left: .7rem; top: .75rem; z-index: 2; display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .6rem; border-radius: var(--sf-r-pill); font-size: .75rem; font-weight: 700;
    background: color-mix(in srgb, var(--sf-surface-2) 88%, transparent); color: var(--sf-success); border: 1px solid var(--sf-border);
}
.sf-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sf-stock.is-low { color: var(--sf-warning); }
.sf-stock.is-out { color: var(--sf-danger); }
.sf .quick-btn {
    position: absolute; left: 50%; bottom: .8rem; z-index: 2; transform: translate(-50%, 14px); opacity: 0;
    display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .35rem 1rem; border: 0; border-radius: var(--sf-r-pill);
    background: var(--sf-rust-900); color: var(--sf-cream-100); font-size: .82rem; font-weight: 600; white-space: nowrap;
    transition: transform .4s var(--sf-ease-out), opacity .3s;
}
.sf-product:hover .quick-btn, .sf .quick-btn:focus-visible { opacity: 1; transform: translate(-50%, 0); }
/* Écrans tactiles : pastille « œil » discrète dans le coin, libellé conservé pour les lecteurs d'écran */
@media (hover: none) {
    .sf .quick-btn { opacity: 1; left: auto; right: .55rem; bottom: .55rem; transform: none; width: 38px; height: 38px; min-height: 0; padding: 0; justify-content: center; font-size: 0; gap: 0; background: color-mix(in srgb, var(--sf-rust-900) 85%, transparent); }
    .sf .quick-btn i { font-size: 1rem; }
    .sf-product:hover .quick-btn { transform: none; }
}
.sf-product__body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.sf-product__cat { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--sf-brand-text); }
.sf-product__name { font: 600 1.08rem/1.25 var(--sf-font-display); margin: 0; color: var(--sf-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-product__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.sf-price { font: 650 1.3rem/1 var(--sf-font-display); color: var(--sf-text); font-variant-numeric: tabular-nums; }
.sf-price small { font: 600 .8rem var(--sf-font-sans); color: var(--sf-muted); margin-left: .1rem; letter-spacing: .04em; }
.sf-add {
    width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center;
    background: var(--sf-primary); color: var(--sf-on-primary); font-size: 1.1rem; cursor: pointer;
    transition: transform .35s var(--sf-ease-out), background-color .25s;
}
.sf-add:hover { background: var(--sf-gold-500); color: var(--sf-rust-950); transform: rotate(-8deg) scale(1.06); }
.sf-add:active { transform: scale(.94); }
/* Produit épuisé (stock relu toutes les 30 s) : bouton d'ajout grisé et inactif */
.sf-add:disabled, .sf-add:disabled:hover { background: var(--sf-border); color: var(--sf-muted); transform: none; cursor: not-allowed; }
.sf-stock { white-space: nowrap; transition: color .3s; }

.sf-skel { border-radius: var(--sf-r-lg); height: 100%; min-height: 330px; background: linear-gradient(100deg, var(--sf-surface) 30%, var(--sf-bg-alt) 50%, var(--sf-surface) 70%) 0 0 / 300% 100%; border: 1px solid var(--sf-border); animation: sf-shimmer 1.4s linear infinite; }
@keyframes sf-shimmer { to { background-position: -150% 0; } }
.sf-empty { text-align: center; padding: 3.5rem 1rem; color: var(--sf-muted); }
.sf-empty svg { width: 120px; height: auto; margin-bottom: 1rem; }
.sf-empty p { font-size: 1.05rem; margin: 0 auto; max-width: 32ch; }
/* Favoris vides : poule, poussin et œuf */
.sf-empty .sf-empty__hen { display: block; width: 190px; height: auto; margin: 0 auto 1.2rem; filter: drop-shadow(0 16px 20px rgba(var(--sf-shadow-rgb), .2)); }
/* Photo détourée (blog : poussin, patte sur l'œuf) — le PNG a de larges marges transparentes, compensées par les marges négatives */
.sf-empty__photo { display: block; width: 220px; height: auto; margin: -52px auto -40px; filter: drop-shadow(0 16px 18px rgba(var(--sf-shadow-rgb), .18)); }
.sf .pagination { gap: .4rem; }
.sf .page-link { border-radius: 50% !important; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--sf-border); background: var(--sf-surface); color: var(--sf-text) !important; font-weight: 600; padding: 0; }
.sf .page-item.active .page-link { background: var(--sf-primary) !important; border-color: var(--sf-primary) !important; color: var(--sf-on-primary) !important; }

/* Tiroirs panier / favoris & aperçu */
.sf .offcanvas { --bs-offcanvas-bg: var(--sf-bg); --bs-offcanvas-color: var(--sf-text); border-left-color: var(--sf-border) !important; }
.sf .offcanvas-title { font: 650 1.45rem/1.1 var(--sf-font-display); }
.sf .offcanvas-header { padding: 1.3rem 1.4rem; }
.sf .btn-close { opacity: .7; }
html.dark-mode .sf .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.sf-line { display: flex; align-items: center; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid var(--sf-border); }
.sf-line__img { width: 60px; height: 60px; flex: none; border-radius: 14px; object-fit: contain; background: var(--sf-surface); border: 1px solid var(--sf-border); padding: 4px; }
.sf-line__main { flex: 1; min-width: 0; }
.sf-line__name { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.sf-line__meta { font-size: .82rem; color: var(--sf-muted); }
.sf-qty { display: inline-flex; align-items: center; gap: .15rem; padding: 3px; border-radius: var(--sf-r-pill); border: 1px solid var(--sf-border); background: var(--sf-surface); }
.sf .qty-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--sf-text); font-weight: 700; display: grid; place-items: center; }
.sf .qty-btn:hover { background: var(--sf-bg-alt); }
/* Zones de toucher agrandies (>= 44 px) sans changer le dessin des petits boutons */
.sf .qty-btn, .sf-add { position: relative; }
.sf .qty-btn::after, .sf .wish-btn::after, .sf .quick-btn::after, .sf-add::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; }
.sf-qty__n { min-width: 24px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-drawer-foot { border-top: 1px solid var(--sf-border); padding: 1.2rem 1.4rem 1.4rem; background: var(--sf-surface); }
.sf-drawer-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.sf-drawer-total span:first-child { font-weight: 600; color: var(--sf-muted); }
.sf-drawer-total .price-tag { font: 650 1.6rem/1 var(--sf-font-display); }
.sf .modal-content { background: var(--sf-bg); color: var(--sf-text); border-radius: var(--sf-r-xl) !important; border: 0; box-shadow: var(--sf-sh-lg); }
.sf-quick__media { background: radial-gradient(70% 70% at 50% 55%, var(--sf-surface-2), var(--sf-bg-alt)); display: grid; place-items: center; padding: 2rem; min-height: 320px; }
.sf-quick__media img { max-height: 300px; object-fit: contain; }
.sf-quick__body { padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); }
.sf-quick__body h4 { font-size: 1.8rem; }

/* Badges historiques */
.sf .badge-cat { background: color-mix(in srgb, var(--sf-primary) 10%, transparent); color: var(--sf-brand-text); border: 1px solid color-mix(in srgb, var(--sf-primary) 30%, transparent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; padding: .45em .8em; border-radius: var(--sf-r-pill); }

/* =========================================================
   11. Engagements
   ========================================================= */
.sf-values__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.sf-values__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sf-value {
    position: relative; padding: 1.7rem 1.5rem 1.6rem; border-radius: var(--sf-r-lg); background: var(--sf-surface); border: 1px solid var(--sf-border);
    transition: transform .5s var(--sf-ease-out), box-shadow .5s var(--sf-ease-out);
}
.sf-value:hover { transform: translateY(-4px); box-shadow: var(--sf-sh-md); }
.sf-value:nth-child(2), .sf-value:nth-child(4) { top: 2.2rem; }
.sf-value__ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 1.2rem; background: var(--sf-gold-100); color: var(--sf-rust-600); font-size: 1.45rem; }
html.dark-mode .sf-value__ico { background: rgba(242, 157, 15, .14); color: var(--sf-gold-300); }
.sf-value h3 { font-size: 1.3rem; margin: 0 0 .45rem; }
.sf-value p { margin: 0; color: var(--sf-text-2); font-size: .98rem; }
.sf-values__aside { position: sticky; top: calc(var(--sf-nav-h) + 2rem); }
/* Sac d'aliment sous les cartes : pleine largeur des deux colonnes, halo vert tendre + anneau pointillé comme dans la filière */
.sf-values__feed { grid-column: 1 / -1; position: relative; isolation: isolate; margin: calc(2.2rem + 1.5rem) 0 0; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.5rem) 0; }
.sf-values__feed::before, .sf-values__feed::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.sf-values__feed::before { width: min(100%, 27rem); aspect-ratio: 1; background: radial-gradient(circle, #E6EFD0 0%, color-mix(in srgb, #E6EFD0 45%, transparent) 40%, transparent 70%); }
.sf-values__feed::after { width: min(80%, 22rem); aspect-ratio: 1; border: 1.5px dashed color-mix(in srgb, var(--sf-rust-600) 28%, transparent); }
html.dark-mode .sf-values__feed::before { background: radial-gradient(circle, rgba(190, 210, 120, .2) 0%, transparent 68%); }
html.dark-mode .sf-values__feed::after { border-color: rgba(246, 176, 74, .26); }
.sf-values__feed img { width: min(78%, 25rem); height: auto; rotate: -4deg; filter: drop-shadow(0 28px 30px rgba(var(--sf-shadow-rgb), .22)); }
/* Schéma de la filière (de l'œuf au poulet prêt à cuire) */
.sf-cycle {
    position: relative; isolation: isolate; overflow: hidden; margin: 2rem 0 0; border-radius: var(--sf-r-xl);
    padding: clamp(1.3rem, 1rem + 1.2vw, 2rem) clamp(1.2rem, .9rem + 1.4vw, 2.2rem);
    background: radial-gradient(90% 70% at 100% 0%, rgba(242, 157, 15, .26), transparent 65%), linear-gradient(160deg, #FFF9EE, #FBE6C2);
    border: 1px solid rgba(242, 157, 15, .32); box-shadow: var(--sf-sh-md);
}
.sf-cycle::after {   /* anneau en pointillés, rappel de l'ouverture animée */
    content: ""; position: absolute; z-index: -1; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%;
    border: 1.5px dashed rgba(148, 51, 15, .2);
}
html.dark-mode .sf-cycle { background: radial-gradient(90% 70% at 100% 0%, rgba(242, 157, 15, .16), transparent 65%), linear-gradient(160deg, #2A170C, #3A1D0D); border-color: rgba(246, 176, 74, .2); }
html.dark-mode .sf-cycle::after { border-color: rgba(246, 176, 74, .2); }
.sf-cycle__title { font: 600 .78rem/1.2 var(--sf-font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sf-brand-text); margin: 0 0 1.2rem; }
.sf-cycle__track { position: relative; --ico: clamp(60px, 30px + 4vw, 80px); }
.sf-cycle__line {   /* fil conducteur or → rouille entre les étapes, tracé au défilement */
    position: absolute; left: calc(var(--ico) / 2 - 1.5px); top: calc(var(--ico) / 2); bottom: calc(var(--ico) / 2);
    width: 3px; border-radius: 3px; transform-origin: 50% 0; background: linear-gradient(var(--sf-gold-500), var(--sf-rust-600));
}
.sf-cycle__steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.sf-cycle__step { display: grid; grid-template-columns: var(--ico) minmax(0, 1fr); align-items: center; gap: 1rem; }
.sf-cycle__ico {
    width: var(--ico); height: var(--ico); border-radius: 50%; display: grid; place-items: center; background: #FFFCF6;
    box-shadow: 0 0 0 3px rgba(242, 157, 15, .6), 0 12px 22px -12px rgba(var(--sf-shadow-rgb), .45);
}
.sf-cycle__ico img { width: 74%; height: 74%; object-fit: contain; }
.sf-cycle__ico--egg img { width: 50%; height: 50%; }
.sf-cycle__ico--hen img { width: 82%; height: 82%; }
.sf-cycle__step--end .sf-cycle__ico { box-shadow: 0 0 0 3px var(--sf-rust-600), 0 0 0 8px rgba(148, 51, 15, .14), 0 12px 22px -12px rgba(var(--sf-shadow-rgb), .45); }
.sf-cycle__txt { font-size: .93rem; line-height: 1.45; color: var(--sf-text-2); }
.sf-cycle__txt b { display: block; margin-bottom: .1rem; font: 600 1.1rem/1.2 var(--sf-font-display); color: var(--sf-text); }
.sf-cycle__step--end .sf-cycle__txt b { color: var(--sf-brand-text); }
/* Images en parallaxe : débord haut/bas pour ne jamais laisser apparaître le fond */
img[data-parallax] { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }

/* =========================================================
   12. Galerie
   ========================================================= */
.sf-gallery__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 9vw, 150px); gap: clamp(.6rem, .4rem + .8vw, 1.2rem); }
.sf-shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--sf-r-lg); background: var(--sf-bg-alt); }
.sf-shot img { will-change: transform; }
.sf-shot figcaption {
    position: absolute; left: .8rem; bottom: .8rem; padding: .4rem .8rem; border-radius: var(--sf-r-pill);
    background: rgba(31, 10, 3, .55); color: #FFF8EC; font-size: .8rem; font-weight: 600;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sf-shot--a { grid-column: span 5; grid-row: span 3; }
.sf-shot--b { grid-column: span 4; grid-row: span 2; }
.sf-shot--c { grid-column: span 3; grid-row: span 2; }
.sf-shot--d { grid-column: span 3; grid-row: span 2; }
.sf-shot--e { grid-column: span 4; grid-row: span 2; }
.sf-shot--f { grid-column: span 5; grid-row: span 2; }
.sf-quote {
    grid-column: span 7; grid-row: span 1; border-radius: var(--sf-r-lg); padding: 1.4rem 1.6rem;
    display: flex; align-items: center; gap: 1.2rem; background: var(--sf-rust-800); color: var(--sf-cream-100);
}
.sf-quote p { margin: 0; font: italic 500 clamp(1.05rem, .9rem + .6vw, 1.45rem)/1.3 var(--sf-font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.sf-quote svg { width: 42px; height: 42px; flex: none; color: var(--sf-gold-400); }

/* =========================================================
   13. FAQ
   ========================================================= */
.sf-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
.sf-faq__list { display: grid; gap: .8rem; }
.sf-faq details { border-radius: var(--sf-r-lg); background: var(--sf-surface); border: 1px solid var(--sf-border); transition: box-shadow .4s, border-color .3s; }
.sf-faq details[open] { box-shadow: var(--sf-sh-md); border-color: transparent; }
.sf-faq summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.25rem 1.4rem; font: 600 1.12rem/1.3 var(--sf-font-display); min-height: 60px;
}
.sf-faq summary::-webkit-details-marker { display: none; }
.sf-faq summary::after {
    content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--sf-border-strong);
    background:
        linear-gradient(var(--sf-brand-text), var(--sf-brand-text)) center / 12px 1.8px no-repeat,
        linear-gradient(var(--sf-brand-text), var(--sf-brand-text)) center / 1.8px 12px no-repeat;
    transition: transform .4s var(--sf-ease-out), background-color .3s;
}
.sf-faq details[open] summary::after { transform: rotate(135deg); background-color: var(--sf-gold-100); }
.sf-faq__a { padding: 0 1.4rem 1.3rem; color: var(--sf-text-2); }
.sf-faq__a p { margin: 0; }

/* =========================================================
   14. Appel à l'action
   ========================================================= */
.sf-cta {
    position: relative; overflow: hidden; isolation: isolate; border-radius: var(--sf-r-xl);
    padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(1.5rem, 1rem + 4vw, 5rem);
    background: radial-gradient(60% 90% at 90% 10%, rgba(242, 157, 15, .35), transparent 60%), var(--sf-rust-800);
    color: var(--sf-cream-100);
}
.sf-cta h2 { color: #FFF8EC !important; max-width: 16ch; }
.sf-cta h2 em { color: var(--sf-gold-300) !important; }
.sf-cta p { color: rgba(255, 248, 236, .82); max-width: 44ch; font-size: 1.1rem; }
.sf-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.sf-cta__art { position: absolute; right: clamp(1rem, 4vw, 5rem); bottom: 0; width: clamp(170px, 8rem + 14vw, 360px); height: auto; z-index: -1; }
.sf-cta__art--photo { bottom: clamp(1rem, 3vw, 2.5rem); width: clamp(170px, 6rem + 14vw, 330px); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .35)); }
/* Aile, filets et cuisse de poulet composés (À propos) */
.sf-cta__art--cuts { display: block; bottom: 0; width: clamp(190px, 7rem + 18vw, 420px); aspect-ratio: 1 / .95; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .35)); }
.sf-cta__art--cuts img { position: absolute; height: auto; }
.sf-cta__art--cuts img:nth-child(1) { right: 2%; top: 0; width: 74%; transform: rotate(-6deg); }                  /* aile */
.sf-cta__art--cuts img:nth-child(2) { right: -2%; bottom: -5%; width: 60%; transform: rotate(4deg); }            /* filets (marges transparentes) */
.sf-cta__art--cuts img:nth-child(3) { left: -4%; bottom: 12%; width: 56%; transform: rotate(-14deg); }             /* cuisse, au premier plan */
.sf-cta .sf-btn--ghost { --btn-fg: #FFF8EC; --btn-bd: rgba(255, 248, 236, .35); --btn-hover: #FFF8EC; --btn-hover-fg: var(--sf-rust-800); --btn-icon-bg: rgba(255, 248, 236, .12); }

/* =========================================================
   15. Pied de page
   ========================================================= */
/* Couleurs du pied de page : claires en mode jour, sombres en mode nuit */
.sf-footer {
    --ft-bg: var(--sf-cream-200); --ft-text: var(--sf-text-2); --ft-link: var(--sf-text); --ft-hover: var(--sf-primary);
    --ft-head: var(--sf-primary); --ft-strong: var(--sf-text); --ft-line: var(--sf-border); --ft-line-2: var(--sf-border-strong);
}
html.dark-mode .sf-footer {
    --ft-bg: var(--sf-rust-950); --ft-text: rgba(255, 248, 236, .78); --ft-link: rgba(255, 248, 236, .86); --ft-hover: var(--sf-gold-300);
    --ft-head: var(--sf-gold-400); --ft-strong: #FFF8EC; --ft-line: rgba(255, 248, 236, .12); --ft-line-2: rgba(255, 248, 236, .18);
}
.sf-footer { position: relative; overflow: hidden; margin-top: clamp(2rem, 1rem + 3vw, 4rem); background: var(--ft-bg); color: var(--ft-text); border-top: 1px solid var(--ft-line); padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.sf-footer a { color: var(--ft-link) !important; text-decoration: none; }
.sf-footer a:hover { color: var(--ft-hover) !important; }
.sf-footer__brand img { height: 92px; width: auto; margin-bottom: 1.2rem; }
.sf-footer__brand p { max-width: 32ch; font-size: .98rem; }
.sf-footer h2 { font: 600 .78rem/1.2 var(--sf-font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ft-head) !important; margin: 0 0 1.2rem; }
.sf-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; font-size: .98rem; }
.sf-footer__pay { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.sf-footer__pay span { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: var(--sf-r-pill); border: 1px solid var(--ft-line-2); font-size: .82rem; font-weight: 600; color: var(--ft-strong); }
.sf-footer__bottom { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: .8rem 2rem; margin-top: 3.5rem; padding: 1.4rem 0; border-top: 1px solid var(--ft-line); font-size: .85rem; }
.sf-to-top {
    position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1020; width: 50px; height: 50px; border-radius: 50%; border: 0;
    display: grid; place-items: center; background: var(--sf-rust-900); color: var(--sf-cream-100); box-shadow: var(--sf-sh-md);
    opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s, transform .45s var(--sf-ease-out);
}
.sf-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sf-story-active .sf-to-top { opacity: 0; transform: translateY(16px); pointer-events: none; }
.sf-to-top:hover { background: var(--sf-gold-500); color: var(--sf-rust-950); }

/* =========================================================
   16. Pages internes
   ========================================================= */
.sf-page-hero {
    position: relative; overflow: hidden;
    padding: calc(var(--sf-nav-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem)) 0 clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
    background:
        radial-gradient(45% 80% at 88% 20%, color-mix(in srgb, var(--sf-gold-200) 65%, transparent), transparent 70%),
        var(--sf-bg);
    border-bottom: 1px solid var(--sf-border);
}
html.dark-mode .sf-page-hero { background: radial-gradient(45% 80% at 88% 20%, rgba(242, 157, 15, .14), transparent 70%), var(--sf-bg); }
.sf-page-hero__title { font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.8rem); line-height: 1; letter-spacing: -.03em; margin: 0 0 1rem; max-width: 16ch; }
.sf-page-hero__lead { font-size: 1.15rem; color: var(--sf-text-2); max-width: 44rem; margin: 0; }
.sf-page-hero__art { position: absolute; right: clamp(-2rem, 2vw, 3rem); bottom: -10px; width: clamp(150px, 8rem + 12vw, 330px); height: auto; pointer-events: none; opacity: .95; }
/* Contact : poule, poussin et œuf sous les coordonnées */
.sf-contact__photo { width: 240px; height: auto; filter: drop-shadow(0 18px 22px rgba(var(--sf-shadow-rgb), .2)); }
/* Illustration calée sur le titre (blog) : centrée verticalement sur le h1, alignée sur le bord droit du contenu */
.sf-page-hero__titlerow { position: relative; }
.sf-page-hero__art--title { top: 50%; bottom: auto; right: 0; translate: 0 -50%; width: clamp(150px, 5rem + 13vw, 300px); }
/* Photo détourée (À propos : poule, poussin et œuf) : ombre douce, posée au-dessus du bord bas */
.sf-page-hero__art--photo {
    bottom: 1rem; opacity: 1; filter: drop-shadow(0 24px 30px rgba(var(--sf-shadow-rgb), .22));
    width: auto; height: clamp(150px, 8rem + 12vw, 330px); max-height: calc(100% - var(--sf-nav-h) - 2rem);   /* proportions gardées, jamais sous l'en-tête */
}
.sf-page-hero--compact { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.sf-page-hero--compact .sf-page-hero__title { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); }
.sf-page-hero--compact .sf-page-hero__art { width: clamp(120px, 6rem + 9vw, 240px); }
.sf-page-hero--compact .sf-page-hero__art--photo { width: auto; height: clamp(120px, 6rem + 9vw, 240px); }   /* photo : proportions gardées */
.sf-steps-bar { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: 0; margin: 1.4rem 0 0; }
.sf-steps-bar li { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; color: var(--sf-muted); }
.sf-steps-bar li span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; border: 1.5px solid var(--sf-border-strong); background: var(--sf-surface); }
.sf-steps-bar li + li::before { content: ""; width: 28px; height: 1.5px; background: var(--sf-border-strong); margin-right: .9rem; }
.sf-steps-bar li.is-active { color: var(--sf-text); }
.sf-steps-bar li.is-active span { background: var(--sf-primary); border-color: var(--sf-primary); color: var(--sf-on-primary); }
.sf-steps-bar li.is-done span { background: var(--sf-gold-200); border-color: var(--sf-gold-500); color: var(--sf-rust-800); }
.min-w-0 { min-width: 0; }
.sf-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .86rem; color: var(--sf-muted); margin-bottom: 1.4rem; }
.sf-crumbs a { color: var(--sf-muted) !important; text-decoration: none; }
.sf-crumbs a:hover { color: var(--sf-brand-text) !important; }
.sf-crumbs span[aria-hidden] { opacity: .5; }
.sf-page { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) 0; }

.sf-card, .sf .boutique-card, .sf .card {
    background: var(--sf-surface); color: var(--sf-text); border: 1px solid var(--sf-border); border-radius: var(--sf-r-lg);
    box-shadow: var(--sf-sh-sm);
}
.sf-card--pad { padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }
.sf-card__title { font-size: 1.35rem; margin: 0 0 1.1rem; display: flex; align-items: center; gap: .6rem; }
.sf-card__title i { color: var(--sf-brand-text); }
.sf .boutique-card-hover { transition: transform .5s var(--sf-ease-out), box-shadow .5s var(--sf-ease-out); }
.sf .boutique-card-hover:hover { transform: translateY(-4px); box-shadow: var(--sf-sh-md); }

/* Segmenté (retrait / livraison) */
.sf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sf-seg .btn-check + label {
    display: flex; align-items: center; gap: .75rem; padding: .95rem 1rem; min-height: 64px; border-radius: var(--sf-r-md);
    border: 1.5px solid var(--sf-border); background: var(--sf-surface); cursor: pointer; font-weight: 600;
    transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.sf-seg .btn-check + label i { font-size: 1.3rem; color: var(--sf-brand-text); }
.sf-seg .btn-check:checked + label { border-color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 7%, var(--sf-surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-primary) 14%, transparent); }
.sf-seg .btn-check:focus-visible + label { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-note { display: flex; gap: .75rem; padding: 1rem 1.1rem; border-radius: var(--sf-r-md); background: var(--sf-bg-alt); border: 1px dashed var(--sf-border-strong); font-size: .94rem; color: var(--sf-text-2); }
.sf-note i { color: var(--sf-brand-text); font-size: 1.1rem; margin-top: .1rem; }

/* Récapitulatif / totaux */
.sf-summary { position: sticky; top: calc(var(--sf-nav-h) + 1.5rem); }
.sf-summary__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; padding: .35rem 0; }
.sf-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; margin-top: .6rem; border-top: 1px solid var(--sf-border); }
.sf-summary__total span:first-child { font-weight: 600; }
.sf-summary__total .price-tag { font: 650 1.9rem/1 var(--sf-font-display); }

/* Panier (page) */
.sf-cart-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto auto; align-items: center; gap: 1rem; padding: 1rem 1.1rem; }
.sf-cart-row + .sf-cart-row { border-top: 1px solid var(--sf-border); }
.sf-cart-row img { width: 72px; height: 72px; border-radius: 16px; object-fit: contain; background: var(--sf-bg-alt); padding: 6px; }
.sf-cart-row__total { font: 650 1.1rem var(--sf-font-display); min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.sf-cart-row__rm { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--sf-muted); display: grid; place-items: center; }
.sf-cart-row__rm:hover { background: rgba(180, 35, 24, .1); color: var(--sf-danger); }

/* Blog */
.sf-post { display: flex; flex-direction: column; height: 100%; border-radius: var(--sf-r-lg); overflow: hidden; background: var(--sf-surface); border: 1px solid var(--sf-border); color: var(--sf-text) !important; text-decoration: none !important; transition: transform .5s var(--sf-ease-out), box-shadow .5s var(--sf-ease-out); }
.sf-post:hover { transform: translateY(-6px); box-shadow: var(--sf-sh-lg); }
.sf-post__media { aspect-ratio: 16 / 10.5; overflow: hidden; background: var(--sf-bg-alt); }
/* image de l'article affichée EN ENTIER (plus de recadrage/zoom : photos détourées, carrées ou en hauteur) */
/* (image en absolu dans le cadre : elle ne peut plus déborder du cadre, ni être agrandie au-delà de sa taille réelle) */
.sf-post__media { position: relative; }
/* marge intérieure fixe (max 88 % × 84 %) : une image détourée au ras de ses bords (poule de l'article « poulets de
   chair », contenu de 3 à 495 px sur 500) ne paraît plus zoomée à côté des images qui ont déjà du vide autour */
.sf-post__media > img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 88%; max-height: 84%; object-fit: contain; transition: transform 1s var(--sf-ease-out); }
.sf-post:hover .sf-post__media > img { transform: scale(1.03); }
.sf-post__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem 1.4rem 1.5rem; flex: 1; }
.sf-post__date { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-brand-text); }
.sf-post__title { font-size: 1.35rem; line-height: 1.2; margin: 0; }
.sf-post__excerpt { color: var(--sf-text-2); font-size: .97rem; margin: 0; }
.sf-post__more { margin-top: auto; padding-top: .6rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; color: var(--sf-brand-text); }
.sf-post__more i { transition: transform .4s var(--sf-ease-out); }
.sf-post:hover .sf-post__more i { transform: translateX(5px); }
.sf-post--lead { display: grid; grid-template-columns: 1.15fr 1fr; }
.sf-post--lead .sf-post__media { aspect-ratio: auto; min-height: 340px; }
.sf-post--lead .sf-post__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.sf-post__ph { width: 100%; height: 100%; min-height: 200px; display: grid; place-items: center; background: radial-gradient(60% 70% at 50% 60%, var(--sf-gold-100), var(--sf-bg-alt)); }
html.dark-mode .sf-post__ph { background: radial-gradient(60% 70% at 50% 60%, rgba(242, 157, 15, .14), var(--sf-bg-alt)); }
.sf-post__ph img { width: 42%; height: auto; max-height: 75%; object-fit: contain; }
.sf-post:hover .sf-post__ph img { transform: scale(1.06) rotate(-3deg); }
.sf-article { font-size: 1.12rem; line-height: 1.85; color: var(--sf-text); }
.sf-article p { margin: 0 0 1.3rem; }
/* image de couverture affichée en entier, à sa taille naturelle au plus (jamais agrandie ni recadrée) */
.sf-article__cover { display: block; width: auto; max-width: 100%; height: auto; max-height: min(520px, 70vh); object-fit: contain; margin: 0 auto 2.5rem; border-radius: var(--sf-r-xl); }

/* Compte, confirmation */
.sf-avatar { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; background: linear-gradient(135deg, var(--sf-gold-300), var(--sf-rust-500)); color: #FFF8EC; font: 650 2rem/1 var(--sf-font-display); }
.sf-order { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: .6rem 1.2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--sf-border); }
.sf-order:last-child { border-bottom: 0; }
.sf-order__id { font: 650 1.05rem var(--sf-font-display); }
.sf-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: var(--sf-r-pill); font-size: .8rem; font-weight: 700; }
.sf-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sf-pill--warning { background: rgba(214, 126, 8, .13); color: var(--sf-warning); }
.sf-pill--info { background: rgba(47, 106, 122, .13); color: #2F6A7A; }
.sf-pill--success { background: rgba(47, 122, 62, .13); color: var(--sf-success); }
.sf-pill--primary { background: rgba(148, 51, 15, .12); color: var(--sf-brand-text); }
.sf-pill--danger { background: rgba(180, 35, 24, .12); color: var(--sf-danger); }
.sf-pill--secondary { background: var(--sf-bg-alt); color: var(--sf-muted); }
html.dark-mode .sf-pill--info { color: #8FD0DF; }
.sf-check {
    width: 96px; height: 96px; margin: 0 auto 1.4rem; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle, var(--sf-gold-100) 0 60%, transparent 61%), conic-gradient(var(--sf-gold-500), var(--sf-rust-600), var(--sf-gold-500));
}
.sf-check svg { width: 48px; height: 48px; }
.sf-check path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: sf-draw .9s .3s var(--sf-ease-out) forwards; }
@keyframes sf-draw { to { stroke-dashoffset: 0; } }

/* Authentification */
.sf-auth {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 2rem);
    min-height: 100svh; padding: calc(var(--sf-nav-h) + .75rem) clamp(.75rem, 2vw, 1.5rem) clamp(.75rem, 2vw, 1.5rem);
}
.sf-auth__visual { position: relative; overflow: hidden; margin: 0; border-radius: var(--sf-r-xl); min-height: 520px; }
.sf-auth__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-auth__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 10, 3, .05) 40%, rgba(31, 10, 3, .78)); }
/* Variante aux couleurs du logo (connexion) : détouré posé sur un fond rouille éclairé d'un halo or */
.sf-auth__visual--brand { background: radial-gradient(circle at 50% 40%, rgba(249, 196, 85, .55) 0%, rgba(242, 157, 15, 0) 42%), radial-gradient(120% 90% at 50% 35%, #BE5A35 0%, var(--sf-rust-600) 50%, var(--sf-rust-900) 100%); }
.sf-auth__visual--brand::before { content: ""; position: absolute; left: 50%; top: 40%; width: min(78%, 560px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.5px dashed rgba(252, 219, 142, .45); }
.sf-auth__visual--brand img { inset: auto; left: 50%; top: 40%; width: min(72%, 520px); height: auto; translate: -50% -50%; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(31, 10, 3, .45)); }
.sf-auth__visual--brand::after { background: linear-gradient(180deg, rgba(31, 10, 3, 0) 60%, rgba(31, 10, 3, .7)); }
/* Variante or (inscription) : même composition, fond or éclairé, anneau rouille */
.sf-auth__visual--gold { background: radial-gradient(circle at 50% 40%, rgba(255, 244, 214, .7) 0%, rgba(255, 244, 214, 0) 42%), radial-gradient(120% 90% at 50% 35%, var(--sf-gold-300) 0%, var(--sf-gold-500) 50%, var(--sf-gold-700) 100%); }
.sf-auth__visual--gold::before { border-color: rgba(148, 51, 15, .35); }
.sf-auth__visual--gold img { filter: drop-shadow(0 26px 30px rgba(92, 30, 9, .35)); }
.sf-auth__visual--gold::after { background: linear-gradient(180deg, rgba(59, 20, 7, 0) 55%, rgba(59, 20, 7, .78)); }
.sf-auth__quote { position: absolute; left: clamp(1.5rem, 1rem + 2vw, 3rem); right: clamp(1.5rem, 1rem + 2vw, 3rem); bottom: clamp(1.5rem, 1rem + 2vw, 3rem); z-index: 2; color: #FFF8EC; }
.sf-auth__quote p { font: italic 500 clamp(1.4rem, 1rem + 1.4vw, 2.2rem)/1.2 var(--sf-font-display); font-variation-settings: "SOFT" 100, "WONK" 1; margin: 0 0 .6rem; color: #FFF8EC; }
.sf-auth__quote span { font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.sf-auth__form { display: grid; place-items: center; padding: 2rem clamp(.5rem, 1rem + 2vw, 3rem); }
.sf-auth__box { width: 100%; max-width: 440px; }
.sf-auth__box h1 { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); margin-bottom: .5rem; }
.sf-pw { position: relative; }
.sf-pw .form-control { padding-right: 3.4rem; }
.sf-pw button { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--sf-muted); }
.sf-pw button:hover { color: var(--sf-text); background: var(--sf-bg-alt); }

/* À propos */
.sf-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
/* sac d'aliment sous le collage (page À propos) */
.sf-about__visuals { display: flex; flex-direction: column; gap: clamp(1rem, .6rem + 1.4vw, 1.6rem); }
.sf-about__feed { position: relative; margin: 0; overflow: hidden; aspect-ratio: 2.1 / 1; border-radius: var(--sf-r-xl); box-shadow: var(--sf-sh-lg);
    display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 5% 11% 4%; }
.sf-about__feed img { flex: 1; min-height: 0; width: 100%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(31, 10, 3, .45)); transform: rotate(-3deg); }
.sf-about__feed figcaption { flex: none; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sf-gold-300); }

/* texte « Notre histoire » (page À propos) */
.sf-about__txt p { color: var(--sf-muted); line-height: 1.75; margin-bottom: 1rem; }
.sf-about__txt strong { color: var(--sf-text); }
.sf-about__sign { margin: 1.4rem 0 .4rem !important; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--sf-gold-500);
    font-family: var(--sf-font-display); font-style: italic; font-size: 1.2rem; line-height: 1.5 !important; color: var(--sf-rust-600) !important;
    font-variation-settings: "SOFT" 100, "WONK" 1; }
html.dark-mode .sf-about__sign { color: var(--sf-gold-300) !important; }
.sf-about__collage { position: relative; aspect-ratio: 1 / 1; }
.sf-about__collage figure { position: absolute; margin: 0; overflow: hidden; box-shadow: var(--sf-sh-lg); }
.sf-about__collage img { width: 100%; height: 100%; object-fit: cover; }
.sf-about__c1 { left: 0; top: 0; width: 62%; height: 74%; border-radius: 999px 999px var(--sf-r-lg) var(--sf-r-lg); }
.sf-about__c2 { right: 0; bottom: 0; width: 50%; height: 52%; border-radius: var(--sf-r-xl); border: 8px solid var(--sf-bg); }
.sf-about__c3 { right: 6%; top: 6%; width: 26%; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--sf-bg); }
/* Fonds aux couleurs du logo : or (visuel de la tuile « poule ») et rouille (détourés posés dessus) */
.sf-about__c1 { background: radial-gradient(ellipse 80% 60% at 50% 36%, #F8C75E 0%, #F3A61C 50%, #E08E08 100%); isolation: isolate; }
.sf-about__c1 img { object-position: 50% 12%; position: relative; z-index: 1; }
/* Fond or conservé : une image remplacée depuis l'éditeur MYPOS (.sf-img-custom) se pose dessus, entière, sans le masquer */
.sf-about__c1::before {
    content: ""; position: absolute; z-index: 0; left: 50%; top: 40%; width: 86%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border: 1.5px dashed rgba(255, 248, 236, .45); border-radius: 50%;
}
.sf-about__c1 img.sf-img-custom { object-fit: contain; object-position: 50% 60%; padding: 12% 8% 6%; filter: drop-shadow(0 18px 16px rgba(31, 10, 3, .3)); }
.sf-about__c--rust { background: radial-gradient(circle at 50% 42%, #B4501F 0%, var(--sf-rust-600) 55%, var(--sf-rust-800) 100%); }
.sf-about__collage img.is-cutout { padding: 6%; filter: drop-shadow(0 14px 18px rgba(31, 10, 3, .45)); }   /* PNG à grandes marges transparentes : recadrés sur le sujet */
.sf-about__c2 img.is-cutout { object-position: 50% 55%; transform: scale(1.18); }
.sf-about__c3 img.is-cutout { object-position: 50% 47%; transform: scale(1.4); }
.sf-steps4 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; counter-reset: st; }   /* 5 étapes depuis l'ajout de l'aliment */
.sf-steps4 article { position: relative; border-radius: var(--sf-r-lg); overflow: hidden; background: var(--sf-surface); border: 1px solid var(--sf-border); }
.sf-steps4 figure { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; }   /* visuels des tuiles « Nos produits » (720×960) : sujet en haut, on retire le fond vide du bas */
.sf-steps4 figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; transition: transform 1s var(--sf-ease-out); }
.sf-steps4 article:hover figure img { transform: scale(1.07); }
.sf-steps4 div { padding: 1.2rem 1.3rem 1.4rem; }
/* visuel détouré (sac d'aliment) : fond rouille aux couleurs du logo, image entière */
.sf-steps4 figure.sf-steps4__cutout { display: grid; place-items: center; padding: 5%; background: radial-gradient(circle at 50% 42%, #B4501F 0%, var(--sf-rust-600) 55%, var(--sf-rust-800) 100%); }
.sf-steps4 figure.sf-steps4__cutout img { height: auto; max-height: 100%; object-fit: contain; object-position: 50% 50%; filter: drop-shadow(0 14px 18px rgba(31, 10, 3, .45)); transform: rotate(-4deg); }
.sf-steps4 article:hover figure.sf-steps4__cutout img { transform: rotate(-4deg) scale(1.07); }
/* Fonds fixes des visuels « Notre filière » (mêmes couleurs que les tuiles de l'accueil) : une image remplacée depuis
   l'éditeur MYPOS (.sf-img-custom) se pose dessus, entière, sans masquer le fond */
.sf-steps4 figure.sf-fond { position: relative; isolation: isolate; }
.sf-steps4 figure.sf-fond::before {
    content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 82%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border: 1.5px dashed rgba(255, 248, 236, .35); border-radius: 50%;
}
.sf-steps4 figure.sf-fond img { position: relative; z-index: 1; }
.sf-fond--rouille { background: radial-gradient(ellipse 80% 70% at 50% 45%, #B24A1E 0%, #963A14 45%, #6F250B 100%); }
.sf-fond--or { background: radial-gradient(ellipse 80% 70% at 50% 45%, #F8C75E 0%, #F3A61C 50%, #E08E08 100%); }
.sf-fond--sable { background: radial-gradient(ellipse 80% 70% at 50% 45%, #F9DE97 0%, #F3C45E 55%, #E9AE3C 100%); }
.sf-steps4 figure img.sf-img-custom { object-fit: contain; object-position: 50% 50%; padding: 8%; filter: drop-shadow(0 14px 16px rgba(31, 10, 3, .35)); }
.sf-steps4 h3 { font-size: 1.25rem; margin: 0 0 .4rem; }
.sf-steps4 h3::before { counter-increment: st; content: "0" counter(st); display: block; font: italic 400 .95rem var(--sf-font-display); color: var(--sf-brand-text); margin-bottom: .35rem; }
.sf-steps4 p { margin: 0; color: var(--sf-text-2); font-size: .95rem; }
.sf-hours { display: flex; align-items: center; gap: 1.2rem; }
.sf-hours__ico { width: 60px; height: 60px; flex: none; border-radius: 18px; display: grid; place-items: center; background: var(--sf-rust-600); color: var(--sf-cream-100); font-size: 1.5rem; }

/* Contact */
.sf-contact__info { display: grid; gap: 1rem; }
.sf-contact__item { display: flex; gap: 1rem; align-items: flex-start; }
.sf-contact__item i { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--sf-gold-100); color: var(--sf-rust-600); font-size: 1.2rem; }
html.dark-mode .sf-contact__item i { background: rgba(242, 157, 15, .14); color: var(--sf-gold-300); }
.sf-contact__item strong { display: block; font: 600 1.05rem var(--sf-font-display); }
.sf-contact__item span { color: var(--sf-text-2); font-size: .95rem; }

/* Produit (fiche) */
.sf-pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.sf-pdp__media { position: sticky; top: calc(var(--sf-nav-h) + 1.5rem); border-radius: var(--sf-r-xl); overflow: hidden; display: grid; place-items: center; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); min-height: 420px; background: radial-gradient(60% 60% at 50% 55%, var(--sf-surface-2), var(--sf-bg-alt)); border: 1px solid var(--sf-border); }
.sf-pdp__media img { max-height: 460px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(var(--sf-shadow-rgb), .22)); }
.sf-pdp__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.3rem); line-height: 1.02; margin: .6rem 0 .8rem; }
.sf-pdp__price { font: 650 clamp(1.9rem, 1.5rem + 1vw, 2.5rem)/1 var(--sf-font-display); color: var(--sf-brand-text); margin: 1.2rem 0 1.4rem; }
.sf-pdp__price small { font: 600 .9rem var(--sf-font-sans); color: var(--sf-muted); }
.sf-pdp__desc { color: var(--sf-text-2); font-size: 1.05rem; }
.sf-pdp__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.sf-pdp__perks { list-style: none; padding: 1.4rem 0 0; margin: 2rem 0 0; border-top: 1px solid var(--sf-border); display: grid; gap: .8rem; }
.sf-pdp__perks li { display: flex; align-items: center; gap: .75rem; color: var(--sf-text-2); font-size: .96rem; }
.sf-pdp__perks i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--sf-bg-alt); color: var(--sf-brand-text); }

/* Alertes Bootstrap */
.sf .alert { border-radius: var(--sf-r-md); border: 1px solid var(--sf-border); background: var(--sf-surface); color: var(--sf-text); }
.sf .alert-warning { border-color: rgba(214, 126, 8, .35); background: color-mix(in srgb, var(--sf-gold-100) 60%, var(--sf-surface)); }
html.dark-mode .sf .alert-warning { background: rgba(242, 157, 15, .1); }

/* SweetAlert2 aux couleurs de la marque */
.swal2-popup { border-radius: 28px !important; font-family: var(--sf-font-sans) !important; background: var(--sf-bg) !important; color: var(--sf-text) !important; }
.swal2-title { font-family: var(--sf-font-display) !important; color: var(--sf-text) !important; font-weight: 650 !important; }
.swal2-html-container { color: var(--sf-text-2) !important; }
.swal2-styled.swal2-confirm { background: var(--sf-primary) !important; border-radius: 999px !important; padding: .75rem 1.5rem !important; font-weight: 600 !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel { background: transparent !important; color: var(--sf-text) !important; border: 1.5px solid var(--sf-border-strong) !important; border-radius: 999px !important; padding: .72rem 1.4rem !important; font-weight: 600 !important; }
/* Contact : fenêtre de choix du canal d'envoi (WhatsApp / e-mail) */
.sf-send { display: grid; gap: .75rem; margin-top: .4rem; text-align: left; }
.sf-send__opt {
    display: flex; align-items: center; gap: 1rem; width: 100%; padding: .9rem 1rem; cursor: pointer; text-align: left;
    border: 1.5px solid var(--sf-border); border-radius: var(--sf-r-md); background: var(--sf-surface); color: var(--sf-text);
    transition: border-color .25s, box-shadow .25s, transform .25s var(--sf-ease-out);
}
.sf-send__opt:not([disabled]):hover, .sf-send__opt:not([disabled]):focus-visible { border-color: var(--sf-gold-400); box-shadow: 0 10px 22px -14px rgba(148, 51, 15, .55); transform: translateY(-2px); }
.sf-send__opt[disabled] { cursor: not-allowed; opacity: .5; }
.sf-send__ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; color: #FFF8EC; }
.sf-send__opt--whatsapp .sf-send__ico { background: linear-gradient(135deg, #2FD36B, #1DA851); }
.sf-send__opt--email .sf-send__ico { background: linear-gradient(135deg, var(--sf-rust-500), var(--sf-rust-700)); }
.sf-send__opt[disabled] .sf-send__ico { background: var(--sf-muted); }
.sf-send__txt { display: grid; gap: .15rem; min-width: 0; }
.sf-send__txt strong { font: 600 1.05rem/1.2 var(--sf-font-display); }
.sf-send__txt small { color: var(--sf-muted); font-size: .88rem; overflow-wrap: anywhere; }
.swal2-toast { border-radius: 16px !important; box-shadow: var(--sf-sh-lg) !important; }
.swal2-icon.swal2-success { border-color: var(--sf-gold-500) !important; color: var(--sf-gold-500) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--sf-gold-600) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(242, 157, 15, .3) !important; }

/* Élément qui « vole » vers le panier */
.sf-fly { position: fixed; z-index: 2000; width: 64px; height: 64px; border-radius: 50%; object-fit: contain; background: var(--sf-surface-2); box-shadow: var(--sf-sh-lg); pointer-events: none; padding: 6px; }

/* =========================================================
   17. Révélations (JS actif seulement)
   ========================================================= */
/* État d'attente : invisible ; le mouvement de départ (translation, bascule 3D, flou…) est posé par sodiferm.js */
.sf-js [data-reveal]:not(.is-revealed) { opacity: 0; }
.sf-js [data-reveal^="clip"]:not(.is-revealed) { opacity: 1; clip-path: inset(100% 0 0 0); }
.sf-js [data-reveal="clip-left"]:not(.is-revealed) { clip-path: inset(0 100% 0 0); }
.sf-js [data-reveal="clip-right"]:not(.is-revealed) { clip-path: inset(0 0 0 100%); }
.sf-js [data-reveal="clip-round"]:not(.is-revealed) { clip-path: circle(0% at 50% 50%); }
.sf-js [data-reveal="clip-diag"]:not(.is-revealed) { clip-path: polygon(0 0, 0 0, 0 0); }
.sf-no-anim [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }

/* Filet des sur-titres tracé à l'arrivée */
.sf-gsap .sf-eyebrow::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--sf-ease-out) .25s; }
.sf-gsap .sf-eyebrow--center::before { transform-origin: 100% 50%; }
.sf-gsap .sf-eyebrow.is-in::before, .sf-no-anim .sf-eyebrow::before, .sf-motion-off .sf-eyebrow::before { transform: none; }

/* Sections « feuille » : coins arrondis animés au défilement */
[data-transition~="curve"] {
    border-radius: var(--sf-curve-top, 0px) var(--sf-curve-top, 0px) var(--sf-curve-bottom, 0px) var(--sf-curve-bottom, 0px);
    box-shadow: 0 -30px 60px -44px rgba(var(--sf-shadow-rgb), .18);
}

/* Section qui change de ton pendant qu'on la parcourt (galerie de l'accueil) :
   thème clair → fond crème doré plus chaud (reste clair, demande client 2026-09-27) ; thème sombre → brun profond */
[data-transition~="tone"] { transition: background-color 1s var(--sf-ease-in-out); }
[data-transition~="tone"] .sf-h2, [data-transition~="tone"] .sf-h2 em, [data-transition~="tone"] .sf-eyebrow,
[data-transition~="tone"] .sf-quote, [data-transition~="tone"] .sf-shot { transition: color 1s var(--sf-ease-in-out), background-color 1s var(--sf-ease-in-out); }
[data-transition~="tone"].is-toned { background-color: var(--sf-gold-50); }
html.dark-mode [data-transition~="tone"].is-toned { background-color: #2A140A; }
html.dark-mode .is-toned .sf-h2 { color: #FFF8EC !important; }
html.dark-mode .is-toned .sf-h2 em { color: var(--sf-gold-300) !important; }
html.dark-mode .is-toned .sf-eyebrow { color: var(--sf-gold-300); }
html.dark-mode .is-toned .sf-quote { background: var(--sf-gold-500); color: var(--sf-rust-950); }
html.dark-mode .is-toned .sf-quote svg { color: var(--sf-rust-700); }
html.dark-mode .is-toned .sf-shot { background: #2A140A; }
.sf-split-line-mask { padding: 0 .08em .14em; margin: 0 -.08em -.14em; }
main:focus { outline: none; }

/* =========================================================
   18. Adaptatif
   ========================================================= */
@media (max-width: 1199.98px) {
    .sf-nav__links a { padding-inline: .6rem; font-size: .93rem; }
    .sf-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-tile { aspect-ratio: 4 / 3.6; }
    /* 5e tuile seule sur sa ligne : même taille que les autres, centrée */
    .sf-cats__grid .sf-tile:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(.8rem, .5rem + 1vw, 1.5rem) / 2); }
    .sf-steps4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    :root { --sf-nav-h: 72px; }
    .sf-nav__brand img { height: 46px; }
    .sf-nav.is-scrolled .sf-nav__brand img { height: 42px; }
    .sf-nav.is-scrolled { --sf-nav-h: 64px; }
    .sf-nav__bar { gap: .5rem; }
    .sf-nav__brand { margin-right: auto; }
    .sf-intro { --fx: 50%; --fy: 36%; --ring: 72vw; }
    .sf-frame { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
    .sf-frame:not(.sf-frame--hero) .sf-frame__fig { order: -1; }
    .sf-frame__fig { height: clamp(220px, 40vh, 420px); }
    .sf-frame__word { top: 34%; font-size: 24vw; }
    .sf-intro.is-pinned .sf-frame { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; padding-bottom: 3.8rem; }
    .sf-intro.is-pinned .sf-frame--hero { grid-template-rows: auto minmax(0, 1fr); }
    .sf-intro.is-pinned .sf-frame__fig { height: 100%; min-height: 0; }
    /* Piste de grille de taille fixe : les images se limitent réellement à la hauteur de leur cadre */
    .sf-intro.is-pinned .sf-frame:not(.sf-frame--trio):not(.sf-frame--hero) .sf-frame__fig { grid-template: 100% / 100%; }
    .sf-intro.is-pinned .sf-frame--hero .sf-display { font-size: clamp(2.1rem, 1.3rem + 5vw, 3.6rem); margin-bottom: .7rem; }
    .sf-intro.is-pinned .sf-frame--hero .sf-hero__lead { font-size: .95rem; line-height: 1.5; margin-bottom: 1rem; }
    /* Logo de la 1re étape : il occupe exactement la place restante sous le texte, sans jamais déborder */
    .sf-intro.is-pinned .sf-frame--hero { row-gap: .6rem; padding-bottom: 2.8rem; }
    .sf-intro.is-pinned .sf-frame--hero .sf-frame__fig { min-height: 120px; }
    .sf-intro.is-pinned .sf-frame--hero .sf-frame__float { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    .sf-intro.is-pinned .sf-frame--hero .sf-frame__img { max-height: 94%; max-width: 80%; }
    .sf-intro.is-pinned .sf-hero__ctas { flex-wrap: nowrap; gap: .9rem; }
    .sf-intro.is-pinned .sf-frame--hero .sf-hero__tag { margin-bottom: .8rem; }
    .sf-intro.is-pinned .sf-frame__title { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); margin-bottom: .5rem; }
    .sf-intro.is-pinned .sf-frame__text { font-size: .98rem; }
    .sf-intro__cue { display: none; }
    .sf-intro__deco--4 { display: none; }   /* petit œuf décoratif : ferait doublon sous le grand œuf */
    .sf-values__grid, .sf-faq__grid, .sf-about__grid, .sf-pdp { grid-template-columns: 1fr; }
    .sf-values__aside, .sf-pdp__media, .sf-summary { position: static; }
    .sf-promo { grid-template-columns: 1fr; }
    .sf-promo__media { order: -1; min-height: 220px; }
    .sf-promo__media img { max-height: 200px; }
    .sf-feature .carousel-control-prev, .sf-feature .carousel-control-next { top: 1rem; bottom: auto; }
    .sf-feature .carousel-indicators { display: none; }
    .sf-gallery__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 120px; }
    .sf-shot--a { grid-column: span 6; grid-row: span 3; }
    .sf-shot--b, .sf-shot--c, .sf-shot--d, .sf-shot--e { grid-column: span 3; grid-row: span 2; }
    .sf-shot--f { grid-column: span 6; grid-row: span 2; }
    .sf-quote { grid-column: span 6; }
    .sf-auth { grid-template-columns: 1fr; min-height: 0; }
    /* Visuel en bandeau compact au-dessus du formulaire */
    /* (sans la citation : le titre du formulaire, juste dessous, dit la même chose) */
    .sf-auth__visual { min-height: 0; height: clamp(240px, 58vw, 340px); border-radius: var(--sf-r-lg); }
    .sf-auth__visual::after, .sf-auth__quote { display: none; }
    .sf-auth__visual--brand::before { top: 50%; width: auto; height: 86%; }
    .sf-auth__visual--brand img { top: 50%; width: auto; height: 80%; max-width: 90%; }
    .sf-auth__form { padding-top: 1.5rem; padding-bottom: 3rem; }
    .sf-post--lead { grid-template-columns: 1fr; }
    .sf-post--lead .sf-post__media { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 767.98px) {
    body.sf { font-size: 1rem; }
    .sf-filters { grid-template-columns: 1fr 1fr; }
    .sf-search { grid-column: 1 / -1; }
    .sf-values__cards { grid-template-columns: 1fr; }
    .sf-value:nth-child(2), .sf-value:nth-child(4) { top: 0; }
    .sf-values__feed { order: -1; margin: 0 0 .5rem; }   /* mobile : le sac passe au-dessus de « Plusieurs boutiques » */
    .sf-cart-row { grid-template-columns: 60px minmax(0, 1fr) auto; }
    .sf-cart-row img { width: 60px; height: 60px; }
    .sf-cart-row .sf-qty { grid-column: 2; justify-self: start; }
    .sf-cart-row__total { grid-column: 3; grid-row: 1; }
    .sf-cart-row__rm { grid-column: 3; grid-row: 2; justify-self: end; }
    .sf-order { grid-template-columns: minmax(0, 1fr) auto; }
    .sf-page-hero__art { opacity: .35; }
    .sf-cta { padding-bottom: 210px; }
    .sf-cta__art { width: 170px; right: 1rem; }
    /* Galerie : cadres au format des photos (plus de vignettes portrait qui recadrent) et sans parallaxe, qui agrandit l'image */
    .sf-gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; grid-auto-flow: row dense; }
    .sf-shot--a, .sf-shot--b, .sf-shot--e, .sf-shot--f, .sf-quote { grid-column: span 2; grid-row: auto; }
    .sf-shot--c, .sf-shot--d { grid-column: span 1; grid-row: auto; aspect-ratio: 1 / 1; }
    .sf-shot--a, .sf-shot--b, .sf-shot--e { aspect-ratio: 4 / 3; }
    .sf-shot--f { aspect-ratio: 3 / 2; }
    .sf-shot img[data-parallax] { position: static; height: 100%; transform: none !important; }
}
@media (max-width: 575.98px) {
    .sf-nav__name { display: none; }
    .sf-cats__grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
    .sf-tile { aspect-ratio: 3 / 4; border-radius: var(--sf-r-md); }
    /* mobile : la 5e tuile (Aliments) s'aligne sur la largeur cumulée des deux tuiles du dessus (visuel paysage dédié) */
    .sf-cats__grid .sf-tile:last-child:nth-child(odd) { width: auto; justify-self: stretch; aspect-ratio: 16 / 9; }
    .sf-cats__grid .sf-tile:last-child:nth-child(odd) img { object-position: 50% 30%; }
    .sf-tile__text { display: none !important; }   /* l'emporte sur la classe Bootstrap d-block du balisage */
    .sf-tile__body { padding: 1rem .9rem; }
    .sf-tile__go { display: none; }
    .sf-steps4 { grid-template-columns: 1fr; }
    .sf-product__body { padding: .85rem .85rem .95rem; }
    .sf-price { font-size: 1.1rem; }
    .sf-add { width: 42px; height: 42px; }
    .sf-product__media { padding: .7rem; }
    .sf .wish-btn { width: 38px; height: 38px; top: .5rem; right: .5rem; }
    /* Mobile : pastille de stock compacte en bas à gauche de la photo (le cœur est en haut à droite,
       l'œil d'aperçu en bas à droite) ; peut passer sur deux lignes (« Bientôt en rupture : 3 ») */
    .sf-stock { top: auto; bottom: .5rem; left: .5rem; max-width: calc(100% - 3.4rem); padding: .25rem .5rem; gap: .3rem;
        font-size: .72rem; line-height: 1.2; white-space: normal; }
    .sf-stock::before { flex: none; }
    .sf .sf-store .form-select { font-size: 1rem; }
    .sf-store { gap: .75rem; padding: .6rem .7rem; }
    .sf-store__ico { width: 40px; height: 40px; }
}
/* En-tête mobile : icône « Boutique » active (page boutique) + 5 icônes qui doivent tenir sur les petits écrans */
.sf-icon-btn.active { background: color-mix(in srgb, var(--sf-primary) 12%, transparent); color: var(--sf-brand-text) !important; }
@media (max-width: 380px) {
    .sf-nav__actions { gap: .1rem; }
    .sf-icon-btn { width: 40px; height: 40px; font-size: 1.05rem; }
    .sf-nav__burger { width: 40px; }
}
@media (max-width: 420px) {
    .sf-seg { grid-template-columns: 1fr; }
    /* Ouverture : « Nos produits » réduit à son icône pour tenir sur la même ligne que le bouton */
    .sf-intro.is-pinned .sf-hero__ctas .sf-link__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sf-intro.is-pinned .sf-hero__ctas .sf-btn { padding-inline: 1.2rem .5rem; }
}

/* =========================================================
   Assistant conversationnel (assets/js/assistant.js + api_assistant.php)
   Bulle rouille et or en bas à droite ; fenêtre de discussion premium ; plein écran sur mobile
   ========================================================= */
.has-assistant .sf-to-top { bottom: calc(1.1rem + 76px); }
.sfa-launch {
    position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1045; width: 62px; height: 62px; border: 0; border-radius: 50%;
    display: grid; place-items: center; color: #FFF6E6; cursor: pointer;
    background: radial-gradient(120% 120% at 30% 20%, var(--sf-gold-400) 0%, var(--sf-rust-500) 45%, var(--sf-rust-800) 100%);
    box-shadow: 0 14px 30px -8px rgba(92, 30, 9, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .45s var(--sf-ease-out), box-shadow .3s;
}
.sfa-launch:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 20px 38px -10px rgba(92, 30, 9, .6), inset 0 1px 0 rgba(255, 255, 255, .35); }
.sfa-launch:focus-visible { outline: 3px solid var(--sf-gold-400); outline-offset: 3px; }
.sfa-launch i { position: absolute; font-size: 1.55rem; line-height: 1; transition: opacity .3s, transform .45s var(--sf-ease-out); }
.sfa-launch__close { opacity: 0; transform: rotate(-90deg) scale(.6); font-size: 1.3rem !important; }
.sfa-launch.is-open .sfa-launch__open { opacity: 0; transform: rotate(90deg) scale(.6); }
.sfa-launch.is-open .sfa-launch__close { opacity: 1; transform: none; }
.sfa-launch__ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--sf-gold-400); opacity: 0; animation: sfa-ring 2.8s ease-out infinite; }
.sfa-launch.is-open .sfa-launch__ring, .sf-motion-off .sfa-launch__ring { animation: none; }
.sfa-launch__dot { position: absolute; top: 5px; right: 5px; width: 13px; height: 13px; border-radius: 50%; background: #3DBA6F; border: 2px solid #FFF6E6; }
.sfa-launch.is-open .sfa-launch__dot { display: none; }
@keyframes sfa-ring { 0% { transform: scale(.9); opacity: .7; } 70%, 100% { transform: scale(1.35); opacity: 0; } }

.sfa-teaser {
    position: fixed; right: calc(1.1rem + 74px); bottom: calc(1.1rem + 10px); z-index: 1044; max-width: 250px; padding: .75rem 1rem;
    border-radius: 18px 18px 4px 18px; background: var(--sf-surface-2); color: var(--sf-text); font-size: .9rem; line-height: 1.35; cursor: pointer;
    border: 1px solid var(--sf-border); box-shadow: var(--sf-sh-lg);
    opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; transition: opacity .4s, transform .5s var(--sf-ease-out);
}
.sfa-teaser strong { color: var(--sf-rust-600); }
html.dark-mode .sfa-teaser strong { color: var(--sf-gold-400); }
.sfa-teaser.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.sfa-panel {
    position: fixed; right: 1.1rem; bottom: calc(1.1rem + 76px); z-index: 1046; width: min(400px, calc(100vw - 2.2rem)); height: min(640px, calc(100vh - 8rem));
    display: flex; flex-direction: column; overflow: hidden; border-radius: 26px;
    background: var(--sf-bg); color: var(--sf-text); border: 1px solid var(--sf-border);
    box-shadow: 0 40px 80px -30px rgba(59, 20, 7, .55), 0 10px 26px rgba(59, 20, 7, .12);
    transform-origin: calc(100% - 30px) calc(100% + 40px); opacity: 0; transform: translateY(18px) scale(.94);
    transition: opacity .3s ease, transform .45s var(--sf-ease-out);
}
.sfa-panel.is-open { opacity: 1; transform: none; }
.sf-motion-off .sfa-panel { transition: none; }

.sfa-head {
    display: flex; align-items: center; gap: .75rem; padding: 1rem 1rem 1rem 1.1rem; color: #FFF6E6; position: relative;
    background: radial-gradient(120% 160% at 0% 0%, var(--sf-rust-500) 0%, var(--sf-rust-700) 55%, var(--sf-rust-900) 100%);
}
.sfa-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--sf-gold-400), transparent); opacity: .8; }
/* logo : version rouille sur pastille crème en thème clair, version claire sur pastille sombre en thème sombre (comme l'en-tête du site) */
.sfa-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #FFF6E6; border: 2px solid var(--sf-gold-400); box-shadow: 0 4px 12px rgba(31, 10, 3, .3); }
html.dark-mode .sfa-avatar { background: #26160C; border-color: rgba(246, 176, 74, .55); }
.sfa-avatar img { width: 30px; height: auto; }
.sfa-head__txt { flex: 1; min-width: 0; }
.sfa-head { gap: .55rem !important; }
.sfa-head h2 { margin: 0; font-family: var(--sf-font-display); font-size: 1rem; font-weight: 600; color: #FFF6E6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfa-head .sfa-icon { width: 34px; height: 34px; }
.sfa-head .sfa-avatar { width: 42px; height: 42px; }
.sfa-head p { margin: .1rem 0 0; font-size: .78rem; opacity: .85; display: flex; align-items: center; gap: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfa-live { width: 8px; height: 8px; border-radius: 50%; background: #3DBA6F; box-shadow: 0 0 0 3px rgba(61, 186, 111, .25); }
.sfa-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #FFF6E6; background: rgba(255, 246, 230, .1); transition: background .2s; }
.sfa-icon:hover { background: rgba(255, 246, 230, .22); }
.sfa-icon:focus-visible { outline: 2px solid var(--sf-gold-400); outline-offset: 2px; }

.sfa-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem .9rem .6rem;
    background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--sf-gold-400) 9%, transparent), transparent 70%), var(--sf-bg); }
.sfa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.sfa-msg { display: flex; align-items: flex-end; gap: .5rem; max-width: 100%; }
.sfa-msg.is-new { animation: sfa-in .45s var(--sf-ease-out) both; }
.sf-motion-off .sfa-msg.is-new { animation: none; }
@keyframes sfa-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sfa-msg--moi { justify-content: flex-end; }
.sfa-mini { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #FFF6E6; border: 1.5px solid color-mix(in srgb, var(--sf-gold-500) 60%, transparent); }
html.dark-mode .sfa-mini { background: #26160C; border-color: rgba(246, 176, 74, .45); }
.sfa-mini img { width: 18px; height: auto; }
.sfa-bubble { padding: .7rem .9rem; border-radius: 18px; font-size: .93rem; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.sfa-msg--ia .sfa-bubble { background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-bottom-left-radius: 6px; max-width: calc(100% - 38px); box-shadow: 0 6px 16px -10px rgba(59, 20, 7, .25); }
.sfa-msg--moi .sfa-bubble { background: linear-gradient(135deg, var(--sf-rust-600), var(--sf-rust-800)); color: #FFF6E6; border-bottom-right-radius: 6px; max-width: 82%; }
.sfa-bubble p { margin: 0 0 .45rem; }
.sfa-bubble p:last-child, .sfa-bubble ul:last-child { margin-bottom: 0; }
.sfa-bubble ul { margin: .1rem 0 .5rem; padding-left: 1.15rem; }
.sfa-bubble li { margin-bottom: .2rem; }
.sfa-bubble strong { color: var(--sf-rust-700); }
html.dark-mode .sfa-bubble strong { color: var(--sf-gold-300); }
.sfa-msg--moi .sfa-bubble strong { color: inherit; }
.sfa-bubble a { color: var(--sf-rust-600); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sf-gold-500) 70%, transparent); text-underline-offset: 3px; }
html.dark-mode .sfa-bubble a { color: var(--sf-gold-400); }

.sfa-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding-left: 38px; transition: opacity .4s; }
.sfa-chips.is-used { display: none; }
.sfa-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600; cursor: pointer;
    background: var(--sf-surface); color: var(--sf-rust-700); border: 1px solid color-mix(in srgb, var(--sf-rust-600) 28%, transparent); transition: background .2s, transform .2s, border-color .2s; }
.sfa-chip i { color: var(--sf-gold-600); }
.sfa-chip:hover { background: color-mix(in srgb, var(--sf-gold-400) 16%, var(--sf-surface)); border-color: var(--sf-gold-500); transform: translateY(-1px); }
html.dark-mode .sfa-chip { color: var(--sf-gold-300); border-color: rgba(246, 176, 74, .3); }

.sfa-cards { display: flex; gap: .55rem; overflow-x: auto; margin: .6rem -.2rem 0; padding: .1rem .2rem .35rem; scroll-snap-type: x mandatory; }
.sfa-card { flex: 0 0 132px; scroll-snap-align: start; display: flex; flex-direction: column; gap: .15rem; padding: .5rem; border-radius: 16px; text-decoration: none !important;
    background: var(--sf-bg); border: 1px solid var(--sf-border); color: var(--sf-text) !important; transition: transform .3s var(--sf-ease-out), box-shadow .3s; }
.sfa-card:hover { transform: translateY(-3px); box-shadow: var(--sf-sh-md); }
.sfa-card__img { height: 84px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(70% 70% at 50% 55%, var(--sf-surface-2), var(--sf-bg-alt)); }
.sfa-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sfa-card__nom { font-weight: 600; font-size: .8rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .25rem; }
.sfa-card__prix { font-family: var(--sf-font-display); font-weight: 600; color: var(--sf-rust-600); font-size: .92rem; }
html.dark-mode .sfa-card__prix { color: var(--sf-gold-400); }
.sfa-card__ok, .sfa-card__ko { font-size: .7rem; font-weight: 600; }
.sfa-card__ok { color: #2E8B57; }
.sfa-card__ko { color: #B23A2B; }

/* réponses rapides sous un message (choix de boutique, autre produit…) */
.sfa-sugg { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.sfa-sugg .sfa-chip { font-size: .78rem; padding: .4rem .75rem; text-align: left; }

/* carte de commande préparée par l'assistant */
.sfa-order { margin-top: .75rem; border-radius: 18px; overflow: hidden; background: var(--sf-bg); border: 1px solid color-mix(in srgb, var(--sf-gold-500) 45%, var(--sf-border)); box-shadow: 0 10px 24px -16px rgba(92, 30, 9, .45); }
.sfa-order__head { display: flex; align-items: center; gap: .45rem; padding: .6rem .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: #FFF6E6;
    background: linear-gradient(135deg, var(--sf-rust-600), var(--sf-rust-800)); }
.sfa-order__head i { color: var(--sf-gold-300); font-size: 1rem; }
.sfa-order__line { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-bottom: 1px solid var(--sf-border); }
.sfa-order__img { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(70% 70% at 50% 55%, var(--sf-surface-2), var(--sf-bg-alt)); }
.sfa-order__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sfa-order__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sfa-order__txt strong { font-size: .86rem; color: var(--sf-text) !important; }
.sfa-order__txt small { font-size: .72rem; color: var(--sf-muted); margin-top: .15rem; }
.sfa-order__qn { font-weight: 700; font-size: .9rem; }
.sfa-qty { flex: none; display: inline-flex; align-items: center; gap: .1rem; padding: 3px; border-radius: 999px; background: var(--sf-surface-2); border: 1px solid var(--sf-border); }
.sfa-qty button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--sf-rust-700); font-weight: 700; font-size: 1rem; line-height: 1; cursor: pointer; }
.sfa-qty button:hover { background: color-mix(in srgb, var(--sf-gold-400) 20%, transparent); }
html.dark-mode .sfa-qty button { color: var(--sf-gold-300); }
.sfa-qty output { min-width: 1.6rem; text-align: center; font-weight: 700; font-size: .9rem; }
.sfa-order__total { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .65rem .8rem .2rem; font-size: .82rem; color: var(--sf-muted); }
.sfa-order__total strong { font-family: var(--sf-font-display); font-size: 1.15rem; color: var(--sf-rust-600) !important; }
html.dark-mode .sfa-order__total strong { color: var(--sf-gold-400) !important; }
.sfa-order__btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: calc(100% - 1.6rem); margin: .55rem .8rem .3rem; padding: .75rem 1rem;
    border: 0; border-radius: 999px; font-weight: 700; font-size: .92rem; color: #2A0E05 !important; text-decoration: none !important; cursor: pointer;
    background: linear-gradient(135deg, var(--sf-gold-300), var(--sf-gold-500)); box-shadow: 0 10px 20px -10px rgba(214, 126, 8, .7); transition: transform .25s var(--sf-ease-out), box-shadow .25s; }
.sfa-order__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -10px rgba(214, 126, 8, .8); }
.sfa-order__btn.is-ok, .sfa-order__btn.is-done { background: linear-gradient(135deg, #43B97A, #2E8B57); color: #FFF !important; box-shadow: none; }
.sfa-order.is-done .sfa-order__btn { margin-bottom: .8rem; }
.sfa-order__hint { margin: 0 .8rem .7rem; font-size: .68rem; text-align: center; color: var(--sf-muted); }

.sfa-typing .sfa-bubble { display: flex; gap: 5px; align-items: center; padding: .85rem 1rem; }
.sfa-typing i { width: 8px; height: 10px; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; background: var(--sf-gold-500); animation: sfa-dot 1.1s ease-in-out infinite; }
.sfa-typing i:nth-child(2) { animation-delay: .15s; background: var(--sf-rust-400); }
.sfa-typing i:nth-child(3) { animation-delay: .3s; background: var(--sf-rust-600); }
@keyframes sfa-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-5px); opacity: 1; } }

.sfa-form { display: flex; align-items: flex-end; gap: .5rem; margin: 0 .8rem; padding: .45rem .45rem .45rem .95rem; border-radius: 22px;
    background: var(--sf-surface-2); border: 1.5px solid var(--sf-border); transition: border-color .2s, box-shadow .2s; }
.sfa-form:focus-within { border-color: var(--sf-gold-500); box-shadow: 0 0 0 4px rgba(242, 157, 15, .15); }
.sfa-form textarea { flex: 1; border: 0; outline: 0; resize: none; background: transparent; color: var(--sf-text); font: inherit; font-size: .95rem; line-height: 1.4; padding: .45rem 0; max-height: 120px; }
.sfa-form textarea::placeholder { color: var(--sf-muted); }
.sfa-form textarea:focus, .sfa-form textarea:focus-visible { outline: 0 !important; box-shadow: none !important; border: 0 !important; }   /* le contour est porté par le cadre */
.sfa-send { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #FFF6E6; cursor: pointer;
    background: linear-gradient(135deg, var(--sf-gold-500), var(--sf-rust-600)); transition: transform .2s, opacity .2s; }
.sfa-send:hover { transform: scale(1.06); }
.sfa-form.is-busy .sfa-send { opacity: .5; pointer-events: none; }
/* ---- mode vocal ---- */
.sfa-icon.is-on { background: var(--sf-gold-500); color: #2A0E05; }
.sfa-mic { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    border: 1.5px solid color-mix(in srgb, var(--sf-rust-600) 35%, transparent); background: var(--sf-surface); color: var(--sf-rust-600); transition: background .2s, color .2s, transform .2s; }
.sfa-mic:hover { background: color-mix(in srgb, var(--sf-gold-400) 18%, var(--sf-surface)); transform: scale(1.05); }
html.dark-mode .sfa-mic { color: var(--sf-gold-300); border-color: rgba(246, 176, 74, .4); }
.sfa-mic i { position: relative; z-index: 1; font-size: 1.05rem; }
.sfa-mic__wave { position: absolute; inset: -2px; border-radius: 50%; opacity: 0; }
.sfa-form.is-listening { border-color: var(--sf-rust-500); box-shadow: 0 0 0 4px rgba(168, 67, 27, .16); }
.sfa-form.is-listening .sfa-mic { background: linear-gradient(135deg, var(--sf-rust-500), var(--sf-rust-700)); color: #FFF6E6; border-color: transparent; }
.sfa-form.is-listening .sfa-mic__wave { opacity: 1; border: 2px solid var(--sf-gold-400); animation: sfa-rec 1.3s ease-out infinite; }
.sfa-form.is-listening .sfa-send { opacity: .45; }
/* conversation vocale en cours (entre deux tours de parole) : micro teinté, prêt à se rouvrir */
.sfa-form.is-conv:not(.is-listening) .sfa-mic { background: color-mix(in srgb, var(--sf-gold-400) 26%, var(--sf-surface)); border-color: var(--sf-rust-500); box-shadow: 0 0 0 3px rgba(168, 67, 27, .12); }
/* carte de commande remplacée ou annulée ; carte « Votre panier » */
.sfa-order.is-stale { opacity: .55; filter: saturate(.6); }
.sfa-order.is-stale .sfa-order__hint { margin-top: .6rem; }
.sfa-cart .sfa-order__btn { margin-bottom: .8rem; }
/* carte « Confirmer la commande » : coordonnées du client + envoi */
.sfa-valid__infos { margin: .55rem .8rem .2rem; padding: .6rem .7rem; display: grid; gap: .35rem; border-radius: 12px;
    background: color-mix(in srgb, var(--sf-gold-400) 12%, var(--sf-surface)); border: 1px solid color-mix(in srgb, var(--sf-gold-400) 35%, transparent); }
.sfa-valid__infos > div { display: grid; grid-template-columns: 5.6rem 1fr; gap: .5rem; align-items: baseline; }
.sfa-valid__infos dt { margin: 0; font-size: .68rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--sf-muted); }
.sfa-valid__infos dd { margin: 0; font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.sfa-valid__actions { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: 0 .8rem .75rem; font-size: .74rem; }
.sfa-valid__actions a { color: var(--sf-rust-600); text-decoration: underline; text-underline-offset: 2px; }
html.dark-mode .sfa-valid__actions a { color: var(--sf-gold-300); }
.sfa-valid__actions button { border: 0; background: none; padding: .25rem .1rem; color: var(--sf-muted); font: inherit; text-decoration: underline; cursor: pointer; }
.sfa-valid.is-done .sfa-order__hint, .sfa-valid.is-stale .sfa-order__hint { margin-top: .5rem; }
/* coordonnées modifiables avant confirmation */
.sfa-valid__form { margin: .55rem .8rem .1rem; display: grid; gap: .55rem; min-width: 0; }
.sfa-valid__form *, .sfa-valid__form *::before, .sfa-valid__form *::after { box-sizing: border-box; }
.sfa-valid__form input, .sfa-valid__form textarea, .sfa-valid__mode button { max-width: 100%; }
.sfa-valid__champ { display: grid; gap: .2rem; margin: 0; }
.sfa-valid__champ[hidden] { display: none; }
.sfa-valid__champ > span { font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--sf-muted); }
.sfa-valid__champ input, .sfa-valid__champ textarea { width: 100%; min-height: 42px; padding: .5rem .7rem; border-radius: 10px; font: inherit; font-size: 16px; /* 16px : pas de zoom auto sur iPhone */
    color: var(--sf-ink, inherit); background: var(--sf-surface); border: 1.5px solid color-mix(in srgb, var(--sf-gold-400) 45%, transparent); resize: vertical; transition: border-color .2s, box-shadow .2s; }
.sfa-valid__champ input:focus, .sfa-valid__champ textarea:focus { outline: none; border-color: var(--sf-rust-500); box-shadow: 0 0 0 3px rgba(168, 67, 27, .14); }
.sfa-valid__champ .is-invalid { border-color: #D4462B; box-shadow: 0 0 0 3px rgba(212, 70, 43, .14); }
.sfa-valid__mode { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.sfa-valid__mode button { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 40px; padding: .4rem .5rem; border-radius: 10px; cursor: pointer;
    font: inherit; font-size: .76rem; font-weight: 600; color: var(--sf-muted); background: var(--sf-surface); border: 1.5px solid color-mix(in srgb, var(--sf-gold-400) 35%, transparent); }
.sfa-valid__mode button.is-on { color: var(--sf-rust-600); border-color: var(--sf-rust-500); background: color-mix(in srgb, var(--sf-gold-400) 16%, var(--sf-surface)); }
html.dark-mode .sfa-valid__mode button.is-on { color: var(--sf-gold-300); border-color: var(--sf-gold-400); }
.sfa-valid__paie { margin: 0; font-size: .72rem; color: var(--sf-muted); display: flex; gap: .4rem; align-items: center; }
.sfa-valid__err { margin: 0; font-size: .74rem; font-weight: 600; color: #D4462B; }
.sfa-valid__err:empty { display: none; }
@keyframes sfa-rec { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.sfa-live--rec { background: #E0442B !important; box-shadow: 0 0 0 3px rgba(224, 68, 43, .3) !important; animation: sfa-blink 1s ease-in-out infinite; }
@keyframes sfa-blink { 50% { opacity: .35; } }
.sfa-lire { display: inline-flex; align-items: center; gap: .35rem; margin-top: .55rem; padding: .28rem .7rem .28rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; cursor: pointer;
    border: 1px solid var(--sf-border); background: var(--sf-bg); color: var(--sf-rust-600); transition: background .2s, border-color .2s; }
.sfa-lire:hover { border-color: var(--sf-gold-500); }
html.dark-mode .sfa-lire { color: var(--sf-gold-300); }
.sfa-lire.is-on { background: linear-gradient(135deg, var(--sf-gold-300), var(--sf-gold-500)); color: #2A0E05; border-color: transparent; }
.sfa-lire.is-on > .bi { display: none; }
.sfa-eq { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.sfa-lire.is-on .sfa-eq { display: inline-flex; }
.sfa-eq i { display: block; width: 3px; height: 100%; border-radius: 2px; background: currentColor; animation: sfa-eq .9s ease-in-out infinite; transform-origin: bottom; }
.sfa-eq i:nth-child(2) { animation-delay: .15s; } .sfa-eq i:nth-child(3) { animation-delay: .3s; }
@keyframes sfa-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.sfa-msg.is-speaking .sfa-bubble { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sf-gold-500) 55%, transparent), 0 8px 20px -10px rgba(214, 126, 8, .5); }

.sfa-foot { margin: .45rem .8rem .7rem; font-size: .7rem; text-align: center; color: var(--sf-muted); }
.sfa-foot a { color: inherit; font-weight: 600; }

@media (max-width: 575.98px) {
    /* Mobile : même fenêtre flottante que sur ordinateur (coins arrondis, au-dessus de la bulle), à la largeur de l'écran */
    .sfa-panel { right: .75rem; left: .75rem; width: auto; bottom: calc(.9rem + 66px); height: min(600px, calc(100vh - 7.5rem)); height: min(600px, calc(100dvh - 7.5rem)); border-radius: 24px; }
    .sfa-head { padding: .8rem .8rem .8rem .9rem; }
    .sfa-head h2 { font-size: .95rem; }
    .sfa-head .sfa-icon { width: 32px; height: 32px; }
    .sfa-head .sfa-avatar { width: 38px; height: 38px; }
    .sfa-head .sfa-avatar img { width: 25px; }
    .sfa-launch { width: 56px; height: 56px; right: .9rem; bottom: .9rem; }
    .has-assistant .sf-to-top { bottom: calc(.9rem + 68px); right: .9rem; }
    .sfa-teaser { right: calc(.9rem + 66px); bottom: calc(.9rem + 6px); max-width: 210px; }
    .sfa-form textarea { font-size: 16px; }   /* évite le zoom automatique d'iOS */
}

/* Mouvement réduit : réglage de l'appareil (sauf si le visiteur a réactivé les animations)
   ou choix explicite du visiteur (bouton « Animations » du pied de page). */
@media (prefers-reduced-motion: reduce) {
    :root:not(.sf-motion-on) *, :root:not(.sf-motion-on) *::before, :root:not(.sf-motion-on) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    :root:not(.sf-motion-on) .sf-marquee__track { animation: none; }
    :root.sf-js:not(.sf-motion-on) [data-reveal] { opacity: 1; transform: none; clip-path: none; }
}
:root.sf-motion-off *, :root.sf-motion-off *::before, :root.sf-motion-off *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
:root.sf-motion-off .sf-marquee__track { animation: none; }
:root.sf-js.sf-motion-off [data-reveal] { opacity: 1; transform: none; clip-path: none; }

/* Version allégée (sf-motion-soft) : plus d'animations en boucle ; le bandeau reste fixe */
:root.sf-motion-soft .sf-marquee__track,
:root.sf-motion-soft .sf-intro__blob,
:root.sf-motion-soft .sf-frame__float,
:root.sf-motion-soft .sf-film__bob,
:root.sf-motion-soft .sf-film__rays,
:root.sf-motion-soft .sf-film__grain,
:root.sf-motion-soft .sf-hero__cue-mouse::after { animation: none !important; }
.sf-motion-toggle {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .3rem .8rem; border-radius: var(--sf-r-pill);
    border: 1px solid var(--ft-line-2, rgba(255, 248, 236, .18)); background: transparent; color: var(--ft-link, rgba(255, 248, 236, .86)); font-size: .82rem; font-weight: 600;
}
.sf-motion-toggle:hover { border-color: var(--sf-gold-400); color: var(--ft-hover, var(--sf-gold-300)); }

/* =========================================================
   Produits très clairs et peu colorés (plateau d'œufs, emballage blanc…) : fond brun plus sombre pour le contraste.
   La classe .is-pale est posée sur le cadre par sfTone() (inc_head.php) quand la photo détourée est claire et terne.
   Même rendu en thème clair et sombre ; plus de « multiply » (il assombrirait la photo sur ce fond).
   ========================================================= */
.sf-product__media.is-pale, .sf-quick__media.is-pale, .sf-pdp__media.is-pale,
html.dark-mode .sf-product__media.is-pale, html.dark-mode .sf-quick__media.is-pale, html.dark-mode .sf-pdp__media.is-pale {
    background: radial-gradient(70% 70% at 50% 52%, #8A4A26 0%, #5C1E09 68%, #3B1407 100%);
}
.sf-slide__disc.is-pale { background: radial-gradient(70% 70% at 50% 50%, #8A4A26 0%, #5C1E09 70%, #3B1407 100%); border-color: rgba(255, 248, 236, .4); }
.is-pale > img { mix-blend-mode: normal; filter: drop-shadow(0 18px 22px rgba(20, 7, 2, .45)); }
.sf-product__media.is-pale, .sf-quick__media.is-pale, .sf-pdp__media.is-pale, .sf-slide__disc.is-pale { transition: background .4s ease; }
/* Produit en rupture : carte affichée normalement (photo non altérée, demande du client), prix en gris */

.sf-product.is-out .sf-price { color: var(--sf-muted); }
/* Vitrine : pastille de stock sous le prix (vert = en stock, or = bientôt en rupture, corail = rupture) */
.sf-slide__stock { display: inline-flex; align-items: center; gap: .45rem; margin: -.6rem 0 1.4rem; padding: .35rem .8rem; border-radius: 999px;
    font-size: .85rem; font-weight: 700; color: #FFF8EC; background: rgba(255, 248, 236, .1); border: 1px solid rgba(255, 248, 236, .22); white-space: nowrap; }
.sf-slide__stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8FE0A0; }
.sf-slide__stock.is-low::before { background: var(--sf-gold-400); }
.sf-slide__stock.is-out { color: #FFD9D0; }
.sf-slide__stock.is-out::before { background: #FF8A73; }
.sf-slide.is-active .sf-slide__copy > :nth-child(5) { transition-delay: .32s; }
/* Produit en rupture dans la vitrine : bouton inactif (photo non altérée) */

.sf-slide .sf-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 767.98px) { .sf-slide__stock { margin: -.3rem 0 1rem; } }
/* =========================================================
   Boutique (boutique.php) : transitions d'entrée variées
   Désactivées avec « Animations : réduites » (html.sf-motion-off).
   ========================================================= */
/* 1. Ouverture de la vitrine : le cadre s'ouvre comme une fenêtre, puis l'en-tête et les commandes arrivent */
.sf-js:not(.sf-motion-off) .is-shop .sf-showcase__frame { animation: sf-frame-open 1.3s var(--sf-ease-out) both; }
.sf-js:not(.sf-motion-off) .is-shop .sf-showcase__head > * { animation: sf-fade-down .8s var(--sf-ease-out) .55s both; }
.sf-js:not(.sf-motion-off) .is-shop .sf-showcase__head > :nth-child(2) { animation-delay: .7s; }
.sf-js:not(.sf-motion-off) .is-shop .sf-showcase__controls { animation: sf-fade-up .8s var(--sf-ease-out) .8s both; }
@keyframes sf-frame-open { from { clip-path: inset(7% 9% 7% 9% round 64px); transform: scale(.985); } to { clip-path: inset(0 0 0 0 round var(--sf-frame-r, 32px)); transform: none; } }
@keyframes sf-fade-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes sf-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 767.98px) { .sf-showcase__frame { --sf-frame-r: 24px; } }

/* 2. Diapositives : trois effets pour le visuel, en alternance (iris par défaut, balancier, chute avec rebond) */
.sf-slide[data-fx="swing"] .sf-slide__disc, .sf-slide[data-fx="drop"] .sf-slide__disc {
    clip-path: circle(50% at 50% 50%); opacity: 0; transition: transform 1.1s var(--sf-ease-out), opacity .7s ease; }
.sf-slide[data-fx="swing"] .sf-slide__disc { transform: translateX(18%) rotate(10deg) scale(.9); }
.sf-slide[data-fx="drop"] .sf-slide__disc { transform: translateY(-24%) scale(.92); transition-timing-function: cubic-bezier(.34, 1.56, .64, 1), ease; }
.sf-slide.is-active[data-fx="swing"] .sf-slide__disc, .sf-slide.is-active[data-fx="drop"] .sf-slide__disc { opacity: 1; transform: none; }
.sf-slide[data-fx="swing"] .sf-slide__ring { animation-direction: reverse; }

/* 3. Cartes produit : apparition au défilement, en cascade (--d posé par revealCards), 4 effets alternés,
      photo dévoilée de bas en haut ; une fois entrée, la carte retrouve son survol habituel */
.sf-js:not(.sf-motion-off) .sf-product {
    animation: none; opacity: 0;
    transition: opacity .7s ease var(--d, 0ms), transform .95s var(--sf-ease-out) var(--d, 0ms), box-shadow .5s var(--sf-ease-out), border-color .3s;
}
.sf-js:not(.sf-motion-off) .sf-product[data-fx="rise"]  { transform: translateY(34px); }
.sf-js:not(.sf-motion-off) .sf-product[data-fx="zoom"]  { transform: scale(.9); }
.sf-js:not(.sf-motion-off) .sf-product[data-fx="tilt"]  { transform: perspective(1000px) rotateX(16deg) translateY(24px); transform-origin: 50% 100%; }
.sf-js:not(.sf-motion-off) .sf-product[data-fx="slide"] { transform: translateX(-28px) rotate(-1.5deg); }
.sf-js:not(.sf-motion-off) .sf-product.is-in { opacity: 1; transform: none; }
.sf-js:not(.sf-motion-off) .sf-product.is-in:hover { transform: translateY(-6px); }
.sf-js:not(.sf-motion-off) .sf-product .sf-product__media { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--sf-ease-out) calc(var(--d, 0ms) + 120ms), background .4s ease; }
.sf-js:not(.sf-motion-off) .sf-product.is-in .sf-product__media { clip-path: inset(0 0 0 0); }
.sf-js:not(.sf-motion-off) .sf-product .sf-product__body > * { opacity: 0; transform: translateY(10px); transition: opacity .6s ease calc(var(--d, 0ms) + 260ms), transform .7s var(--sf-ease-out) calc(var(--d, 0ms) + 260ms); }
.sf-js:not(.sf-motion-off) .sf-product.is-in .sf-product__body > * { opacity: 1; transform: none; }
/* =====================================================================================================
   FILM EN VERRE 3D de l'accueil (inc_video.php + assets/js/glass-film.js, moteur du skill premium-3d-glass)
   Photos de l'ancienne vidéo en 3D ; ambiance sombre (html.dark-mode) ou claire crème et or (réglages en fin de bloc),
   légendes en alternance (en bas sur mobile), voiles de transition (barres cinéma, éclair doré) pilotés par
   --gf-bars / --gf-flash, 11 effets d'arrivée des titres (data-fx).
   ===================================================================================================== */
.sf-gf__canvas, .sf-gf__veil, .sf-gf__caps, .sf-gf__dots { display: none; }
.sf-reel__frame.is-gf { background: #130703 !important; }
.sf-reel__frame.is-gf .sf-reel__video { display: none; }
.sf-reel__frame.is-gf .sf-gf__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
.sf-reel__frame.is-gf.is-gf-ready .sf-gf__canvas { opacity: 1; }
/* piste de défilement plus longue que la vidéo : 16 images en 9 parties (17 « plans » de long, l'œuf en a un long) */
.sf-reel.sf-gf.is-scrub:has(.is-gf) { height: 1500vh; }
@media (max-width: 767.98px) { .sf-reel.sf-gf.is-scrub:has(.is-gf) { height: 1320vh; } }

/* voiles : vignettage, barres cinéma (transitions), éclair doré (plongée, éclats) */
.sf-reel__frame.is-gf .sf-gf__veil { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 214, 150, calc(var(--gf-flash, 0) * .95)) 0%, rgba(242, 157, 15, calc(var(--gf-flash, 0) * .55)) 38%, transparent 72%),
                radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .45) 100%); }
.sf-reel__frame.is-gf .sf-gf__veil::before, .sf-reel__frame.is-gf .sf-gf__veil::after { content: ""; position: absolute; left: 0; right: 0; height: calc(var(--gf-bars, 0) * 7%); background: #000; }
.sf-reel__frame.is-gf .sf-gf__veil::before { top: 0; }
.sf-reel__frame.is-gf .sf-gf__veil::after { bottom: 0; }

/* image de départ (1re scène) : visible tout de suite, la 3D apparaît par-dessus en fondu puis l'image s'efface ;
   le titre « L'œuf » s'affiche aussi d'emblée (pas d'écran de chargement) */
.sf-gf__poster { display: none; }
.sf-reel__frame.is-gf .sf-gf__poster { display: block; position: absolute; inset: 0; transition: opacity .5s ease .8s, visibility 0s 1.3s; }
.sf-gf__poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
@media (max-width: 767.98px) { .sf-gf__poster img { object-position: 50% 0; } }
html.dark-mode .sf-reel__frame.is-gf .sf-gf__poster--clair, html:not(.dark-mode) .sf-reel__frame.is-gf .sf-gf__poster--sombre { display: none; }
.sf-reel__frame.is-gf.is-gf-ready .sf-gf__poster { opacity: 0; visibility: hidden; }
.sf-reel__frame.is-gf .sf-gf__canvas { transition-duration: .7s; }
.sf-reel__frame.is-gf:not(.is-gf-ready) .sf-gf__cap:first-child { opacity: 1; visibility: visible; transition: none; }
.sf-reel__frame.is-gf:not(.is-gf-ready) .sf-gf__cap:first-child :is(.sf-gf__num, .sf-gf__text) { opacity: 1; transform: none; transition: none; }
.sf-gf__cap.is-instant, .sf-gf__cap.is-instant * { transition: none !important; animation: none !important; }

/* légendes */
.sf-reel__frame.is-gf .sf-gf__caps { display: block; position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.sf-gf__cap { position: absolute; top: 50%; width: min(38%, 30rem); transform: translateY(-50%); color: #FDF6EA; opacity: 0; visibility: hidden;
    transition: opacity .4s ease, visibility 0s .4s; }
.sf-gf__cap[data-side="left"] { left: clamp(1.25rem, 6%, 5rem); }
.sf-gf__cap[data-side="right"] { right: clamp(1.25rem, 6%, 5rem); text-align: right; }
.sf-gf__cap.is-in { opacity: 1; visibility: visible; transition-delay: 0s; pointer-events: auto; }
.sf-gf__num { display: inline-block; margin-bottom: .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .24em; color: #F6AE2A;
    opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s var(--sf-ease-out, ease); }
.sf-gf__num i { font-style: normal; color: rgba(253, 246, 234, .45); letter-spacing: .1em; }
.sf-gf__title { margin: 0 0 .7rem; font-family: var(--sf-font-display); font-weight: 600; font-size: clamp(2rem, 4.4vw, 4.1rem); line-height: 1.02;
    letter-spacing: -.01em; color: #FDF6EA !important; text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
.sf-gf__text { margin: 0; max-width: 26rem; font-size: clamp(.95rem, 1.25vw, 1.12rem); line-height: 1.55; color: rgba(253, 246, 234, .78);
    opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .8s var(--sf-ease-out, ease); }
.sf-gf__cap[data-side="right"] .sf-gf__text { margin-left: auto; }
.sf-gf__cap.is-in .sf-gf__num { opacity: 1; transform: none; transition-delay: .05s; }
.sf-gf__cap.is-in .sf-gf__text { opacity: 1; transform: none; transition-delay: .45s; }
.sf-gf__cta { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.2rem; padding: .8rem 1.4rem; border-radius: 999px; font-weight: 700;
    color: #2a1004 !important; background: linear-gradient(135deg, #F8C25C, #F29D0F); box-shadow: 0 10px 30px -8px rgba(242, 157, 15, .7); text-decoration: none;
    opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .8s var(--sf-ease-out, ease), box-shadow .3s ease; }
.sf-gf__cap.is-in .sf-gf__cta { opacity: 1; transform: none; transition-delay: .7s; }
.sf-gf__cta:hover { box-shadow: 0 14px 36px -8px rgba(242, 157, 15, .9); }

/* lettres découpées par glass-film.js : .w (mot) > .c (lettre), --i = rang de la lettre, --n = nombre de lettres */
.sf-gf__title .w { display: inline-block; white-space: nowrap; }
.sf-gf__title .c { display: inline-block; will-change: transform, opacity; }
.sf-gf__cap:not(.is-in) .c, .sf-gf__cap:not(.is-in) .sf-gf__title { transition-duration: .3s !important; transition-delay: 0s !important; }
/* 1. rise : les lettres montent d'un masque */
.sf-gf__cap[data-fx="rise"] .w { overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.sf-gf__cap[data-fx="rise"] .c { transform: translateY(110%); transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 32ms); }
.sf-gf__cap[data-fx="rise"].is-in .c { transform: none; }
/* 2. blur : mise au point, l'espacement se resserre */
.sf-gf__cap[data-fx="blur"] .c { opacity: 0; filter: blur(14px); transform: scale(1.25); transition: opacity 1s ease calc(var(--i) * 26ms), filter 1.1s ease calc(var(--i) * 26ms), transform 1.1s ease calc(var(--i) * 26ms); }
.sf-gf__cap[data-fx="blur"].is-in .c { opacity: 1; filter: none; transform: none; }
/* 3. flip : chaque lettre bascule en 3D */
.sf-gf__cap[data-fx="flip"] .w { perspective: 600px; }
.sf-gf__cap[data-fx="flip"] .c { opacity: 0; transform: rotateX(-100deg); transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.2, .9, .3, 1.2) calc(var(--i) * 40ms), opacity .5s ease calc(var(--i) * 40ms); }
.sf-gf__cap[data-fx="flip"].is-in .c { opacity: 1; transform: none; }
/* 4. wipe : rideau découvert par une barre dorée */
.sf-gf__cap[data-fx="wipe"] .sf-gf__title { position: relative; clip-path: inset(0 100% 0 0); transition: clip-path 1.15s cubic-bezier(.7, 0, .2, 1); }
.sf-gf__cap[data-fx="wipe"][data-side="right"] .sf-gf__title { clip-path: inset(0 0 0 100%); }
.sf-gf__cap[data-fx="wipe"].is-in .sf-gf__title { clip-path: inset(0 0 0 0); }
/* 5. scramble : décodage lettre à lettre (glass-film.js) */
.sf-gf__cap[data-fx="scramble"] .c { color: #FDF6EA; }
/* 6. drop : chute avec rebond */
.sf-gf__cap[data-fx="drop"] .c { opacity: 0; transform: translateY(-140%) rotate(-14deg); transition: transform .85s cubic-bezier(.34, 1.7, .5, 1) calc(var(--i) * 45ms), opacity .4s ease calc(var(--i) * 45ms); }
.sf-gf__cap[data-fx="drop"].is-in .c { opacity: 1; transform: none; }
/* 7. depth : le titre arrive du fond, flou puis net */
.sf-gf__cap[data-fx="depth"] .sf-gf__title { opacity: 0; transform: scale(1.8); filter: blur(20px); transform-origin: 30% 50%;
    transition: opacity 1s ease, transform 1.3s cubic-bezier(.16, 1, .3, 1), filter 1.2s ease; }
.sf-gf__cap[data-fx="depth"][data-side="right"] .sf-gf__title { transform-origin: 70% 50%; }
.sf-gf__cap[data-fx="depth"].is-in .sf-gf__title { opacity: 1; transform: none; filter: none; }
/* 8. type : machine à écrire, curseur doré */
.sf-gf__cap[data-fx="type"] .c { opacity: 0; }
.sf-gf__cap[data-fx="type"] .c.is-typed { opacity: 1; }
.sf-gf__cap[data-fx="type"].is-in .sf-gf__title::after { content: ""; display: inline-block; width: .06em; height: .9em; margin-left: .06em; vertical-align: -.08em; background: #F6AE2A; animation: sf-gf-caret .8s steps(1) infinite; }
@keyframes sf-gf-caret { 50% { opacity: 0; } }
/* 9. slide : les mots glissent depuis les deux côtés */
.sf-gf__cap[data-fx="slide"] .c { opacity: 0; transition: transform 1s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 22ms), opacity .6s ease calc(var(--i) * 22ms); }
.sf-gf__cap[data-fx="slide"] .w:nth-child(odd) .c { transform: translateX(-70px); }
.sf-gf__cap[data-fx="slide"] .w:nth-child(even) .c { transform: translateX(70px); }
/* (sélecteur aussi précis que celui des mots pairs/impairs, sinon les mots restaient décalés : « La      cuisse ») */
.sf-gf__cap[data-fx="slide"].is-in .w:nth-child(n) .c { opacity: 1; transform: none; }
/* 10. shine : le titre se resserre puis un reflet doré le traverse. Le reflet est une COPIE du titre posée par-dessus
   (::after, texte de aria-label) : un dégradé découpé sur des lettres animées séparément restait invisible (Brave/Chrome) */
.sf-gf__cap[data-fx="shine"] .sf-gf__title { position: relative; opacity: 0; letter-spacing: .12em; transition: opacity .8s ease, letter-spacing 1.2s cubic-bezier(.16, 1, .3, 1); }
.sf-gf__cap[data-fx="shine"].is-in .sf-gf__title { opacity: 1; letter-spacing: -.01em; }
.sf-gf__cap[data-fx="shine"] .sf-gf__title[aria-label]::after { content: attr(aria-label); position: absolute; inset: 0; pointer-events: none; letter-spacing: -.01em;
    background: linear-gradient(100deg, transparent 38%, rgba(255, 210, 122, .9) 47%, #fff 50%, rgba(255, 210, 122, .9) 53%, transparent 62%) 140% 0 / 300% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
.sf-gf__cap[data-fx="shine"].is-in .sf-gf__title::after { animation: sf-gf-shine 2.2s ease .6s both; }
@keyframes sf-gf-shine { from { background-position: 140% 0; } to { background-position: -40% 0; } }
/* 11. split : les lettres convergent depuis le centre */
.sf-gf__cap[data-fx="split"] .c { opacity: 0; transform: translateX(calc((var(--i) - var(--n) / 2) * .45em)) scale(.3); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 18ms), opacity .7s ease calc(var(--i) * 18ms); }
.sf-gf__cap[data-fx="split"].is-in .c { opacity: 1; transform: none; }
/* 12. stamp : chaque lettre tombe de haut comme un tampon, avec un léger rebond */
.sf-gf__cap[data-fx="stamp"] .c { opacity: 0; transform: scale(2.4) rotate(9deg); filter: blur(6px);
    transition: transform .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * 45ms), opacity .35s ease calc(var(--i) * 45ms), filter .5s ease calc(var(--i) * 45ms); }
.sf-gf__cap[data-fx="stamp"].is-in .c { opacity: 1; transform: none; filter: none; }
/* 13. glow : les lettres s'allument en or, puis reprennent la couleur du titre */
.sf-gf__cap[data-fx="glow"] .c { opacity: 0; color: #FFD27A; text-shadow: 0 0 22px rgba(246, 174, 42, .95), 0 0 6px rgba(255, 220, 150, .9); transform: translateY(-.15em);
    transition: opacity .5s ease calc(var(--i) * 70ms), transform .7s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 70ms), color 1.1s ease calc(var(--i) * 70ms + .5s), text-shadow 1.3s ease calc(var(--i) * 70ms + .5s); }
.sf-gf__cap[data-fx="glow"].is-in .c { opacity: 1; transform: none; color: inherit; text-shadow: inherit; }

/* bouton son (ambiance de ferme + voix off) */
.sf-gf__sound { display: none; }
.sf-reel__frame.is-gf .sf-gf__sound:not([hidden]) { display: inline-flex; position: absolute; top: 1rem; right: 1rem; z-index: 4; align-items: center; gap: .5rem;
    min-height: 44px; padding: .55rem 1rem; border: 1px solid rgba(253, 246, 234, .25); border-radius: 999px; cursor: pointer;
    font: 600 .82rem/1 var(--sf-font-body, inherit); letter-spacing: .02em; color: #FDF6EA; background: rgba(20, 8, 3, .45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s ease, border-color .3s ease, transform .2s ease; }
.sf-gf__sound i { font-size: 1.05rem; }
.sf-gf__sound:hover { background: rgba(20, 8, 3, .65); border-color: rgba(246, 174, 42, .6); }
.sf-gf__sound:active { transform: scale(.96); }
.sf-gf__sound.is-on { border-color: rgba(246, 174, 42, .7); }
.sf-gf__sound.is-on i { color: #F6AE2A; }
.sf-gf__sound:focus-visible { outline: 2px solid #F6AE2A; outline-offset: 3px; }
html:not(.dark-mode) .sf-reel__frame.is-gf .sf-gf__sound:not([hidden]) { color: #2a1004; background: rgba(253, 246, 234, .7); border-color: rgba(42, 16, 4, .18); }
html:not(.dark-mode) .sf-gf__sound:hover { background: rgba(253, 246, 234, .95); border-color: rgba(181, 101, 10, .5); }
html:not(.dark-mode) .sf-gf__sound.is-on i { color: #B5650A; }
@media (max-width: 575.98px) { .sf-reel__frame.is-gf .sf-gf__sound:not([hidden]) { top: .6rem; right: .6rem; width: 44px; padding: 0; justify-content: center; } .sf-gf__sound span { display: none; } }
/* langue du film (légendes + voix off) : FR | EN, dans l'en-tête en haut à droite (accueil seulement) */
.sf-nav__lang[hidden] { display: none !important; }
.sf-nav__lang { display: inline-flex; align-items: center; gap: .1rem; height: 40px; margin-left: .35rem; padding: .25rem; border: 1px solid var(--sf-border, rgba(42, 16, 4, .18));
    border-radius: 999px; cursor: pointer; background: transparent; color: var(--sf-muted, rgba(42, 16, 4, .6));
    font: 700 .74rem/1 var(--sf-font-body, inherit); letter-spacing: .08em; transition: border-color .3s ease, transform .2s ease; }
.sf-nav__lang span { display: grid; place-items: center; min-width: 2rem; height: 100%; border-radius: 999px; transition: background .3s ease, color .3s ease; }
.sf-nav__lang span.is-on { color: #FDF6EA; background: var(--sf-primary, #94330F); }
.sf-nav__lang:hover { border-color: var(--sf-gold-500, #F29D0F); }
.sf-nav__lang:active { transform: scale(.96); }
.sf-nav__lang:focus-visible { outline: 2px solid var(--sf-gold-500, #F29D0F); outline-offset: 3px; }
html.dark-mode .sf-nav__lang span.is-on { color: #2a1004; background: var(--sf-gold-500, #F6AE2A); }
@media (max-width: 575.98px) { .sf-nav__lang { height: 36px; margin-left: .15rem; } .sf-nav__lang span { min-width: 1.75rem; } }

/* pastilles de chapitre */
.sf-reel__frame.is-gf .sf-gf__dots { display: flex; position: absolute; left: 50%; bottom: 1.1rem; z-index: 3; transform: translateX(-50%); gap: .15rem; }
.sf-gf__dots button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.sf-gf__dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
    background: rgba(253, 246, 234, .35); transition: transform .35s ease, background .35s ease; }
.sf-gf__dots button.is-on::before { background: #F6AE2A; transform: scale(1.6); box-shadow: 0 0 12px rgba(246, 174, 42, .8); }
.sf-gf__dots button:hover::before { background: #FDF6EA; }
.sf-reel__frame.is-gf .sf-reel__cue { color: rgba(253, 246, 234, .7); bottom: 2.9rem; }

@media (max-width: 767.98px) {
    .sf-reel.is-scrub .sf-reel__frame.is-gf { height: calc(100svh - var(--sf-nav-h)); }
    .sf-gf__cap, .sf-gf__cap[data-side="left"], .sf-gf__cap[data-side="right"] { top: auto; bottom: 3.4rem; left: 1.25rem; right: 1.25rem; width: auto; transform: none; text-align: center; }
    .sf-gf__text, .sf-gf__cap[data-side="right"] .sf-gf__text { margin: 0 auto; }
    .sf-gf__title { font-size: clamp(2rem, 9vw, 2.8rem); }
    .sf-gf__cap[data-fx="wipe"][data-side="right"] .sf-gf__title { clip-path: inset(0 100% 0 0); }
    .sf-gf__cap[data-fx="wipe"].is-in .sf-gf__title { clip-path: inset(0 0 0 0); }
    .sf-reel__frame.is-gf .sf-gf__dots { bottom: .6rem; }
    .sf-reel__frame.is-gf .sf-reel__cue { display: none; }
}
/* ambiance claire (thème clair du site) : fond crème, textes brun foncé, voiles adoucis */
html:not(.dark-mode) .sf-reel__frame.is-gf { background: #FDF6EA !important; }
html:not(.dark-mode) .sf-reel__frame.is-gf .sf-gf__veil {
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 250, 238, var(--gf-flash, 0)) 0%, rgba(255, 222, 160, calc(var(--gf-flash, 0) * .85)) 45%, rgba(253, 246, 234, calc(var(--gf-flash, 0) * .6)) 100%),
                radial-gradient(ellipse 120% 90% at 50% 50%, transparent 60%, rgba(120, 60, 20, .14) 100%); }
html:not(.dark-mode) .sf-reel__frame.is-gf .sf-gf__veil::before, html:not(.dark-mode) .sf-reel__frame.is-gf .sf-gf__veil::after { background: #2a1004; }
html:not(.dark-mode) .sf-gf__cap { color: #2a1004; }
html:not(.dark-mode) .sf-gf__num { color: #B5650A; }
html:not(.dark-mode) .sf-gf__num i { color: rgba(42, 16, 4, .45); }
html:not(.dark-mode) .sf-gf__title { color: #2a1004 !important; text-shadow: 0 2px 24px rgba(253, 246, 234, .9); }
html:not(.dark-mode) .sf-gf__text { color: rgba(42, 16, 4, .78); }
html:not(.dark-mode) .sf-gf__cap[data-fx="scramble"] .c { color: #2a1004; }
html:not(.dark-mode) .sf-gf__cap[data-fx="shine"] .sf-gf__title::after { background-image: linear-gradient(100deg, transparent 38%, rgba(242, 157, 15, .95) 47%, #FFE2A8 50%, rgba(242, 157, 15, .95) 53%, transparent 62%); }
html:not(.dark-mode) .sf-gf__cta { box-shadow: 0 10px 26px -10px rgba(181, 101, 10, .6); }
html:not(.dark-mode) .sf-gf__dots button::before { background: rgba(42, 16, 4, .28); }
html:not(.dark-mode) .sf-gf__dots button.is-on::before { background: #E08A1C; box-shadow: 0 0 10px rgba(224, 138, 28, .6); }
html:not(.dark-mode) .sf-gf__dots button:hover::before { background: #2a1004; }
html:not(.dark-mode) .sf-reel__frame.is-gf .sf-reel__cue { color: rgba(42, 16, 4, .65); }

/* animations coupées : les titres apparaissent sans effet */
.sf-motion-off .sf-gf__cap .sf-gf__title::after { display: none; }
.sf-motion-off .sf-gf__cap .c, .sf-motion-off .sf-gf__cap .sf-gf__title, .sf-motion-off .sf-gf__cap .w { transition: none !important; animation: none !important; transform: none !important; filter: none !important; clip-path: none !important; }

/* =====================================================================================================
   Cercles en pointillés autour des images RETIRÉS (demande client, 2026-10-05) : filière de l'accueil, tuiles
   « Nos produits », vitrine boutique, sac d'aliment, schéma de la filière, À propos, connexion. Les halos colorés restent.
   ===================================================================================================== */
.sf-intro__ring, .sf-slide__ring,
.sf-intro--stack .sf-frame__fig::after, .sf-tile::before, .sf-values__feed::after, .sf-cycle::after,
.sf-auth__visual--brand::before, .sf-about__c1::before, .sf-steps4 figure.sf-fond::before { display: none !important; }

/* =====================================================================================================
   FILM 3D SANS BORDURES (2026-10-05) : pleine largeur et pleine hauteur sous l'en-tête, sans coins arrondis, sans
   ombre, sans barres noires ni vignettage sombre ; bords haut/bas fondus dans la page. Les transitions entre parties
   se font dans la scène (feuille aux coins arrondis qui monte, teinte propre à chaque partie, glass-film.js).
   ===================================================================================================== */
.sf-reel.sf-gf.is-scrub:has(.is-gf) .sf-reel__sticky { padding: var(--sf-nav-h) 0 0; align-items: stretch; }
.sf-reel.sf-gf.is-scrub:has(.is-gf) .sf-reel__sticky > .container { max-width: none; padding: 0; }
.sf-reel.sf-gf.is-scrub .sf-reel__frame.is-gf { width: 100vw; margin-inline: calc(50% - 50vw); height: calc(100svh - var(--sf-nav-h)); max-height: none; aspect-ratio: auto;
    border-radius: 0; box-shadow: none; background: var(--sf-bg) !important; }
html:not(.dark-mode) .sf-reel.sf-gf.is-scrub .sf-reel__frame.is-gf, html.dark-mode .sf-reel.sf-gf.is-scrub .sf-reel__frame.is-gf { background: var(--sf-bg) !important; }
.sf-reel__frame.is-gf .sf-gf__canvas, .sf-reel__frame.is-gf .sf-gf__poster {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 93%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 93%, transparent 100%); }
.sf-reel__frame.is-gf .sf-gf__veil { background: radial-gradient(ellipse at 50% 50%, rgba(255, 214, 150, calc(var(--gf-flash, 0) * .95)) 0%, rgba(242, 157, 15, calc(var(--gf-flash, 0) * .55)) 38%, transparent 72%); }
.sf-reel__frame.is-gf .sf-gf__veil::before, .sf-reel__frame.is-gf .sf-gf__veil::after { display: none; }
html:not(.dark-mode) .sf-reel__frame.is-gf .sf-gf__veil { background: radial-gradient(ellipse at 50% 50%, rgba(255, 250, 238, var(--gf-flash, 0)) 0%, rgba(255, 222, 160, calc(var(--gf-flash, 0) * .85)) 45%, rgba(253, 246, 234, calc(var(--gf-flash, 0) * .6)) 100%); }

/* =====================================================================================================
   SITE BILINGUE + VOIX OFF (2026-10-07) : sélecteur FR | EN de l'en-tête (lien, toutes les pages), bouton « Écouter »
   (assets/js/voix-off.js) et surlignage discret du bloc en cours de lecture.
   ===================================================================================================== */
a.sf-nav__lang { color: var(--sf-text) !important; text-decoration: none !important; font: 700 .72rem/1 var(--sf-font-body, inherit); letter-spacing: .06em; }
a.sf-nav__lang span:not(.is-on) { opacity: .7; }
a.sf-nav__lang:hover span:not(.is-on) { opacity: 1; }
.sf-nav__voix[hidden] { display: none !important; }
.sf-nav__voix.is-on { color: #FDF6EA !important; background: var(--sf-primary, #94330F); border-color: transparent; box-shadow: 0 0 0 4px rgba(242, 157, 15, .25); }
.sf-nav__voix.is-on i { animation: sf-voix-pulse 1.6s ease-in-out infinite; }
.sf-nav__voix.is-armed:not(.is-on) { box-shadow: 0 0 0 2px rgba(242, 157, 15, .55); }
@keyframes sf-voix-pulse { 50% { transform: scale(1.15); } }
html.dark-mode .sf-nav__voix.is-on { color: #2a1004 !important; background: var(--sf-gold-500, #F6AE2A); }
/* Voix off : bloc en cours de lecture (classes posées par voix-off.js).
   Texte ordinaire : léger voile doré. Élément qui a son propre fond ou sa bordure (bouton rouille, bouton contour, pastille,
   badge…) ou texte clair sur fond foncé (.sf-voix-lit--anneau) : anneau doré seulement — fond, couleurs et forme intacts
   (le voile donnait un fond beige aux boutons marron : texte blanc illisible le temps de la lecture). */
.sf-voix-lit:not(.sf-voix-lit--anneau) { border-radius: 6px; background: rgba(242, 157, 15, .14); box-shadow: 0 0 0 6px rgba(242, 157, 15, .14); transition: background .4s ease, box-shadow .4s ease; }
html.dark-mode .sf-voix-lit:not(.sf-voix-lit--anneau) { background: rgba(246, 174, 42, .16); box-shadow: 0 0 0 6px rgba(246, 174, 42, .16); }
.sf-voix-lit.sf-voix-lit--anneau { outline: 3px solid rgba(242, 157, 15, .85); outline-offset: 4px; }
html.dark-mode .sf-voix-lit.sf-voix-lit--anneau { outline-color: rgba(246, 174, 42, .9); }
@media (max-width: 399.98px) { .sf-nav__actions .sf-icon-btn { width: 36px; height: 36px; } }

/* EN-TÊTE MOBILE — 7 boutons (boutique, voix off, thème, favoris, panier, compte, langue) qui tiennent sur l'écran (2026-10-07).
   La langue devient un bouton rond comme les icônes : il affiche seulement l'autre langue (« EN » sur le site français). */
@media (max-width: 991.98px) {
    a.sf-nav__lang { width: 44px; height: 44px; flex: none; margin-left: 0; padding: 0; gap: 0; justify-content: center;
        border-radius: 50%; border: 1px solid var(--sf-border, rgba(42, 16, 4, .18)); font-size: .74rem; letter-spacing: .04em; }
    a.sf-nav__lang span.is-on { display: none; }
    a.sf-nav__lang span:not(.is-on) { opacity: 1; min-width: 0; height: auto; background: none; }
}
@media (max-width: 575.98px) {
    .sf-nav__bar { gap: .35rem; }
    .sf-nav__actions { gap: 0; }
    .sf-nav__actions .sf-icon-btn, a.sf-nav__lang { width: 38px; height: 38px; font-size: 1.02rem; }
    a.sf-nav__lang { font-size: .7rem; }
    .sf-nav__burger { width: 38px; }
    .sf-nav__brand img, .sf-nav.is-scrolled .sf-nav__brand img { height: 42px; }
}
@media (max-width: 374.98px) {
    .sf-nav__actions .sf-icon-btn, a.sf-nav__lang { width: 35px; height: 35px; font-size: .96rem; }
    a.sf-nav__lang { font-size: .66rem; }
    .sf-nav__burger { width: 34px; }
    .sf-nav__brand img, .sf-nav.is-scrolled .sf-nav__brand img { height: 38px; }
}
/* SÉLECTEUR DE LANGUE « PREMIUM » (2026-10-07) — affiche la langue COURANTE.
   Ordinateur : pastille FR | EN à anneau or → rouille, langue active en médaillon dégradé.
   Mobile / tablette : médaillon rond (même taille que les icônes) avec la langue courante en Fraunces ;
   un toucher passe à l'autre langue (indiqué par le petit losange doré et l'aria-label). */
a.sf-nav__lang {
    border: 1.5px solid transparent !important;
    background: linear-gradient(var(--sf-bg, #FDF6EA), var(--sf-bg, #FDF6EA)) padding-box,
                linear-gradient(135deg, #F6B94A, #F29D0F 40%, #94330F) border-box;
    box-shadow: 0 2px 10px -4px rgba(148, 51, 15, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
    font-family: var(--sf-font-display) !important; font-weight: 600 !important; font-variation-settings: "SOFT" 50;
    letter-spacing: .05em; transition: box-shadow .35s ease, transform .3s ease;
}
a.sf-nav__lang:hover { box-shadow: 0 6px 18px -6px rgba(148, 51, 15, .5), inset 0 1px 0 rgba(255, 255, 255, .6); }
a.sf-nav__lang span.is-on {
    background: linear-gradient(140deg, #B5440F, #94330F 55%, #6E230A) !important; color: #FDF6EA !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px -2px rgba(110, 35, 10, .6);
}
html.dark-mode a.sf-nav__lang {
    background: linear-gradient(var(--sf-bg, #170C06), var(--sf-bg, #170C06)) padding-box, linear-gradient(135deg, #FFD27A, #F29D0F 45%, #B5650A) border-box;
    box-shadow: 0 2px 12px -4px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 210, 122, .12);
}
html.dark-mode a.sf-nav__lang span.is-on { background: linear-gradient(140deg, #FFD27A, #F29D0F 60%, #D9820B) !important; color: #2a1004 !important; }

@media (max-width: 991.98px) {
    a.sf-nav__lang { position: relative; overflow: visible; }
    /* la langue courante, en grand, dans un médaillon */
    a.sf-nav__lang span.is-on { display: grid !important; place-items: center; width: calc(100% - 6px); height: calc(100% - 6px);
        min-width: 0; border-radius: 50%; font-size: .78rem; letter-spacing: .04em; opacity: 1; }
    a.sf-nav__lang span:not(.is-on) { display: none !important; }
    /* petit losange doré : « touchez pour changer » */
    a.sf-nav__lang::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 8px; height: 8px; transform: rotate(45deg);
        background: linear-gradient(135deg, #FFD27A, #F29D0F); border: 1.5px solid var(--sf-bg, #FDF6EA); border-radius: 2px;
        box-shadow: 0 1px 3px rgba(110, 35, 10, .35); }
    html.dark-mode a.sf-nav__lang::after { border-color: var(--sf-bg, #170C06); }
    a.sf-nav__lang:active span.is-on { transform: scale(.92); }
    a.sf-nav__lang span.is-on { transition: transform .25s ease; }
}
@media (max-width: 575.98px) { a.sf-nav__lang span.is-on { font-size: .72rem; } }
@media (max-width: 374.98px) { a.sf-nav__lang span.is-on { font-size: .68rem; } a.sf-nav__lang::after { width: 7px; height: 7px; } }
/* EN-TÊTE ORDINATEUR (2026-10-07) : avec le casque et la pastille de langue, « À propos » passait sur 2 lignes.
   Les liens ne se coupent plus ; boutons de droite et pastille resserrés, liens plus compacts sur les écrans moyens. */
.sf-nav__links a { white-space: nowrap; }
@media (min-width: 992px) {
    .sf-nav__bar { gap: .75rem; }
    .sf-nav__actions { gap: .15rem; }
    a.sf-nav__lang { margin-left: .2rem; }
}
@media (min-width: 992px) and (max-width: 1599.98px) {
    .sf-nav__links { gap: .05rem; }
    .sf-nav__links a { padding-inline: .62rem; gap: .4rem; }
    .sf-nav__actions .sf-icon-btn { width: 40px; height: 40px; font-size: 1.08rem; }
    a.sf-nav__lang { height: 38px; }
    a.sf-nav__lang span { min-width: 1.85rem; }
    .sf-nav__name small { letter-spacing: .16em; }
}
@media (min-width: 992px) and (max-width: 1299.98px) {
    .sf-nav__name small { display: none; }
    .sf-nav__links a { padding-inline: .5rem; font-size: .92rem; }
}
/* VOIX OFF GLOBALE (2026-10-07) : petit message quand le navigateur attend un geste avant de lancer le son */
.sf-voix-toast { position: fixed; z-index: 1085; left: 50%; top: calc(var(--sf-nav-h, 80px) + 10px); transform: translate(-50%, -8px); opacity: 0;
    display: inline-flex; align-items: center; gap: .55rem; max-width: calc(100vw - 32px); padding: .6rem 1rem .6rem .75rem; border-radius: 999px;
    background: linear-gradient(135deg, #B5440F, #94330F 60%, #6E230A); color: #FDF6EA; font: 600 .86rem/1.25 var(--sf-font-sans, sans-serif);
    box-shadow: 0 10px 30px -10px rgba(110, 35, 10, .55), 0 0 0 1.5px rgba(242, 157, 15, .55); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.sf-voix-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.sf-voix-toast i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(253, 246, 234, .16); font-size: .9rem;
    animation: sf-voix-pulse 1.6s ease-in-out infinite; }
html.dark-mode .sf-voix-toast { background: linear-gradient(135deg, #FFD27A, #F29D0F 60%, #D9820B); color: #2a1004; }
html.dark-mode .sf-voix-toast i { background: rgba(42, 16, 4, .12); }
@media (prefers-reduced-motion: reduce) { .sf-voix-toast, .sf-voix-toast i { transition: none; animation: none; } }