/* ==========================================================
   Animations Organic Square
   - uniquement si JavaScript est actif (html.js) : sans JS, tout reste visible
   - désactivées si l'utilisateur préfère réduire les animations
   - seulement opacity / transform : pas de ralentissement de la page
   ========================================================== */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }

@media (prefers-reduced-motion: no-preference) {

    /* ---------- Transitions douces entre les pages (navigateurs récents) ---------- */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: vt-out .22s ease both; }
    ::view-transition-new(root) { animation: vt-in .38s var(--ease-out) both; }
    .header { view-transition-name: header; }
    .ticker { view-transition-name: ticker; }
    @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
    @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

    /* ---------- Barre de progression de lecture sous le header ---------- */
    @supports (animation-timeline: scroll()) {
        .header::after {
            content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
            background: linear-gradient(90deg, var(--brand), var(--lime));
            transform-origin: 0 50%; transform: scaleX(0);
            animation: read-progress linear both; animation-timeline: scroll(root);
        }
        @keyframes read-progress { to { transform: scaleX(1); } }
    }

    /* ---------- Entrée du hero au chargement ---------- */
    html.js .hero__main > *,
    html.js .page-hero > * { animation: rise-in .8s var(--ease-out) both; }
    html.js .hero__main > :nth-child(2), html.js .page-hero > :nth-child(2) { animation-delay: .08s; }
    html.js .hero__main > :nth-child(3), html.js .page-hero > :nth-child(3) { animation-delay: .16s; }
    html.js .hero__main > :nth-child(4), html.js .page-hero > :nth-child(4) { animation-delay: .24s; }
    html.js .hero__main > :nth-child(n+5), html.js .page-hero > :nth-child(n+5) { animation-delay: .32s; }
    html.js .hero > .tile { animation: tile-in .9s var(--ease-out) both; }
    html.js .hero > .hero__main { animation-delay: 0s; }
    html.js .hero > .hero__photo { animation-delay: .12s; }
    html.js .hero > .hero__days { animation-delay: .24s; }
    html.js .hero > .hero__herbs { animation-delay: .34s; }
    html.js .hero__photo img { animation: ken-burns 2.2s var(--ease-out) both; }
    html.js .hero__float { animation: rise-in .7s .7s var(--ease-out) both; }
    html.js .cats .cat { animation: rise-in .6s var(--ease-out) both; }
    html.js .cats .cat:nth-child(1) { animation-delay: .45s; }
    html.js .cats .cat:nth-child(2) { animation-delay: .5s; }
    html.js .cats .cat:nth-child(3) { animation-delay: .55s; }
    html.js .cats .cat:nth-child(4) { animation-delay: .6s; }
    html.js .cats .cat:nth-child(5) { animation-delay: .65s; }
    html.js .cats .cat:nth-child(n+6) { animation-delay: .7s; }

    @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
    @keyframes tile-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
    @keyframes ken-burns { from { transform: scale(1.12); } }

    /* ---------- Apparition au défilement, élément par élément ---------- */
    html.js .anim { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0s); }
    html.js .anim--left { transform: translateX(-30px); }
    html.js .anim--zoom { transform: scale(.94); }
    html.js .anim.is-in { opacity: 1; transform: none; }

    /* ---------- Surligneur sur les mots en italique vert ---------- */
    html.js h1 em, html.js h2 em {
        background: linear-gradient(transparent 68%, rgba(200, 241, 105, .6) 68%, rgba(200, 241, 105, .6) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
        transition: background-size .9s .25s var(--ease-out);
        padding: 0 .04em;
    }
    html.js h1 em, html.js .is-in h2 em, html.js h2.is-in em { background-size: 100% 100%; }
    html.js h1 em { transition-delay: .6s; }
    .season-feature h3 em, .cta-band h2 em, .footer em { background: none; }

    /* ---------- Détails vivants ---------- */
    /* (ancien flottement des pastilles remplacé par les photos détourées) */
    @keyframes float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -10px; rotate: 6deg; } }

    .fruit-row.is-bump .fruit { animation: pop .4s var(--ease-spring); }
    @keyframes pop { 40% { transform: scale(1.18); } }

    .calendar td.is-on::before { transform-origin: 0 50%; }
    html.js .calendar:not(.is-in) td.is-on::before { transform: scaleX(0); }
    .calendar td.is-on::before { transition: transform .7s var(--ease-out); }
    .calendar tbody tr:nth-child(3n+2) td.is-on::before { transition-delay: .08s; }
    .calendar tbody tr:nth-child(3n) td.is-on::before { transition-delay: .16s; }

    .service__icon, .fact .ico, .checks .ico { transition: transform .35s var(--ease-spring); }
    .service:hover .service__icon, .fact:hover .ico { transform: rotate(-8deg) scale(1.1); }

    /* Réponses de la FAQ qui se déplient en douceur (Chrome 131+) */
    :root { interpolate-size: allow-keywords; }
    .faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete; }
    .faq__item[open]::details-content { block-size: auto; }

    /* ---------- Panier : bouton « ajouté » et image qui s'envole ---------- */
    .add.is-added { background: var(--ink); color: var(--lime); animation: pop .45s var(--ease-spring); }
    .add.is-added .ico { display: none; }
    .add.is-added::after { content: "✓"; font-weight: 800; font-size: 17px; }
    .fly-to-cart { position: fixed; z-index: 100; pointer-events: none; border-radius: 16px; object-fit: cover; box-shadow: 0 16px 40px -12px rgba(21, 48, 31, .5); }
    .drawer .line { animation: rise-in .45s var(--ease-out) both; }
    .drawer .line:nth-child(2) { animation-delay: .05s; }
    .drawer .line:nth-child(3) { animation-delay: .1s; }
    .drawer .line:nth-child(n+4) { animation-delay: .15s; }

    /* Boutons : léger reflet au survol */
    .btn--lime, .btn--dark { position: relative; overflow: hidden; }
    .btn--lime::before, .btn--dark::before {
        content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
        transition: transform .7s var(--ease-out);
    }
    .btn--lime:hover::before, .btn--dark:hover::before { transform: translateX(120%) skewX(-20deg); }
}

/* Fruits et légumes détourés : flottement lent, chacun à son rythme */
@media (prefers-reduced-motion: no-preference) {
    .floaty__item, .band__fruit { animation: drift 7s ease-in-out infinite; }
    .floaty__item--2, .band__fruit--2 { animation-duration: 8.5s; animation-delay: -2s; }
    .floaty__item--3, .band__fruit--3 { animation-duration: 6.5s; animation-delay: -4s; }
    .floaty__item--4 { animation-duration: 9s; animation-delay: -1s; }
    .floaty__item--5 { animation-duration: 7.5s; animation-delay: -5s; }
    .floaty__item--6 { animation-duration: 8s; animation-delay: -3s; }
    @keyframes drift {
        0%, 100% { translate: 0 0; rotate: -3deg; }
        33% { translate: 6px -14px; rotate: 3deg; }
        66% { translate: -5px -6px; rotate: -1deg; }
    }
    /* Au survol du bloc, les produits s'écartent légèrement */
    .season-feature:hover .floaty__item { scale: 1.06; transition: scale .6s var(--ease-out); }
    .floaty__item { transition: scale .6s var(--ease-out); }
}