/*
 * Charte du site vitrine Alloala — « papier kraft & étiquettes de colis ».
 * Utilisé par site/home et site/legal (voir resources/views/site/partials/head-assets).
 * Les couleurs Tailwind (brand / ink / paper) reprennent ces tokens.
 */

/* ---------- Tokens ---------- */
:root {
    --ink: #0d2e64;        /* marine : texte, bordures, ombres pleines */
    --ink-900: #081d40;
    --ink-700: #284574;
    --ink-500: #5b6f91;
    --brand: #f4651c;      /* orange Alloala : action, trajet, accents */
    --brand-600: #d24f0f;
    --brand-700: #ae3c10;
    --paper: #f6f1e8;      /* fond kraft */
    --paper-200: #ece4d6;
    --green: #2f9e6a;      /* statut « livré » */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-drive: cubic-bezier(.65, 0, .35, 1);
    --shadow-hard: 6px 6px 0 var(--ink);
}

/* ---------- Base ---------- */
body { font-family: "Bricolage Grotesque", system-ui, sans-serif; background: var(--paper); }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

/* Grain papier kraft discret */
.grain::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Apparition au scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

/* ---------- Décor du hero (Sbeitla) : fondu vers le haut, léger parallaxe ---------- */
.hero-backdrop { opacity: .24; -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent);
    transform: translateY(calc(var(--hero-shift, 0) * 1px)); will-change: transform; }

/* ---------- Route de progression (sous la navbar) ---------- */
.road { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 24px); opacity: .18; }
.road-done { position: absolute; left: 0; bottom: -1px; height: 3px; background: var(--brand); width: calc(var(--p, 0) * 100%); }
.road-rider { position: absolute; bottom: -11px; left: calc(var(--p, 0) * (100% - 24px)); width: 24px; height: 24px; border-radius: 9999px; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--paper); }

/* ---------- Boutons ---------- */
/* Bouton « départ » : l'icône scooter part à droite et revient par la gauche au survol */
@keyframes ride-out { 0% { transform: translateX(0); opacity: 1; } 45% { transform: translateX(160%); opacity: 0; } 46% { transform: translateX(-160%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.btn-ride .ride-icon { display: block; }
.btn-ride:hover .ride-icon, .btn-ride:focus-visible .ride-icon { animation: ride-out .7s var(--ease-drive); }
.btn-press { box-shadow: 0 6px 0 var(--brand-700); transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease; }
.btn-press:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--brand-700); }
.btn-press:active { transform: translateY(6px); box-shadow: 0 0 0 var(--brand-700); }

/* ---------- Ruban adhésif de colis ---------- */
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tape-track { display: flex; flex-shrink: 0; width: max-content; white-space: nowrap; animation: tape 32s linear infinite; }
.tape-track.reverse { animation-direction: reverse; animation-duration: 40s; }

/* ---------- Étiquette de colis : code-barres + scanner ---------- */
.barcode { position: relative; overflow: hidden; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px); }
.barcode::after { content: ''; position: absolute; top: -4px; bottom: -4px; left: -10%; width: 3px; background: #ff2d2d; box-shadow: 0 0 8px 2px rgba(255, 45, 45, .7); opacity: 0; }
@keyframes scan { 0% { left: -4%; opacity: 1; } 100% { left: 102%; opacity: 1; } }
.group:hover .barcode::after, .group:focus-visible .barcode::after { animation: scan .8s var(--ease-drive) 2 alternate; }

/* ---------- Tuiles catégories & cartes commerces ---------- */
/* Pastille d'action : la flèche part, le scooter arrive */
.swap { position: relative; overflow: hidden; }
.swap > * { transition: transform .45s var(--ease-drive), opacity .3s ease; }
.swap .swap-in { position: absolute; inset: 0; margin: auto; transform: translateX(-160%); opacity: 0; }
.group:hover .swap .swap-out, .group:focus-visible .swap .swap-out { transform: translateX(160%); opacity: 0; }
.group:hover .swap .swap-in, .group:focus-visible .swap .swap-in { transform: none; opacity: 1; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.08); } 70% { transform: rotate(8deg) scale(1.08); } }
.group:hover .tile-icon, .group:focus-visible .tile-icon { animation: wiggle .55s var(--ease-out); }
/* Bannière de repli quand le commerce n'a pas de photo */
.banner-pattern { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .09) 0 14px, transparent 14px 28px); }
/* Carrousel mobile */
.snap-row { scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.snap-row::-webkit-scrollbar { display: none; }
.snap-row > * { scroll-snap-align: start; }

/* ---------- Bento « Pourquoi Alloala » ---------- */
/* Chrono : l'anneau se remplit jusqu'à 30 min, l'aiguille tourne */
.clock-ring { stroke-dasharray: 302; stroke-dashoffset: 302; transition: stroke-dashoffset 1.8s var(--ease-drive) .3s; }
.in .clock-ring { stroke-dashoffset: 151; }
.clock-hand { transform-origin: 60px 60px; transform: rotate(0deg); transition: transform 1.8s var(--ease-drive) .3s; }
.in .clock-hand { transform: rotate(180deg); }
/* Cadenas qui se ferme */
.lock-shackle { transform: translateY(-3px); transition: transform .5s var(--ease-out) .6s; }
.in .lock-shackle { transform: none; }
/* Support : le livreur est en train d'écrire */
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.typing span { display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; animation: typing 1.2s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
/* Bulles qui arrivent l'une après l'autre */
.bubble { opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .4s ease, transform .4s var(--ease-out); }
.in .bubble { opacity: 1; transform: none; }
.in .bubble:nth-child(2) { transition-delay: .5s; }
.in .bubble:nth-child(3) { transition-delay: 1s; }

/* ---------- Tickets ---------- */
.ticket { --r: 9px;
    -webkit-mask: radial-gradient(var(--r) at 0 50%, #0000 98%, #000) 0 0/51% 100% no-repeat, radial-gradient(var(--r) at 100% 50%, #0000 98%, #000) 100% 0/51% 100% no-repeat;
    mask: radial-gradient(var(--r) at 0 50%, #0000 98%, #000) 0 0/51% 100% no-repeat, radial-gradient(var(--r) at 100% 50%, #0000 98%, #000) 100% 0/51% 100% no-repeat; }
.zigzag-b { -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50%/14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50%/14px 100%; }
.price-tag { clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); }

/* ---------- Tampon (s'abat à l'apparition) ---------- */
.stamp { border: 3px solid currentColor; border-radius: 10px; transform: rotate(-8deg); mix-blend-mode: multiply; }
@keyframes stamp-thump { 0% { transform: scale(2.2) rotate(-18deg); opacity: 0; } 60% { transform: scale(.92) rotate(-6deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
.stamp-thump { opacity: 0; }
.in .stamp-thump, .stamp-thump.in { animation: stamp-thump .55s var(--ease-out) .35s forwards; }

/* ---------- Signature tracée à la main ---------- */
.sign { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease-drive) .4s; }
.in .sign { clip-path: inset(0 0 0 0); }

/* ---------- Ticket de suivi (hero) ---------- */
.step-row { transition: opacity .35s ease, color .35s ease; opacity: .38; }
.step-row.done, .step-row.active { opacity: 1; }
.step-dot { transition: background-color .35s ease, transform .35s ease; }
.step-row.active .step-dot { background: var(--brand); transform: scale(1.25); box-shadow: 0 0 0 5px rgba(244, 101, 28, .2); }
.step-row.done .step-dot { background: var(--ink); }

/* ---------- Trajet « Comment ça marche » ---------- */
.how-rider { left: 0; transition: left 2.6s var(--ease-drive) .2s; }
.how-track.in .how-rider { left: calc(100% - 44px); }
.how-line { width: 0; transition: width 2.6s var(--ease-drive) .2s; }
.how-track.in .how-line { width: calc(100% - 44px); }
.how-vrider { top: -4px; transition: top 2.4s var(--ease-drive) .3s; }
.how-vtrack.in .how-vrider { top: calc(100% - 28px); }
.how-vline { height: 0; transition: height 2.4s var(--ease-drive) .3s; }
.how-vtrack.in .how-vline { height: calc(100% - 12px); }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.bob { animation: bob .6s ease-in-out infinite; }

/* ---------- Route animée entre sections ---------- */
@keyframes drive-across { from { transform: translateX(-80px); } to { transform: translateX(calc(100vw + 80px)); } }
@keyframes drive-back { from { transform: translateX(calc(100vw + 80px)) scaleX(-1); } to { transform: translateX(-80px) scaleX(-1); } }
@keyframes lane { from { background-position: 0 0; } to { background-position: -48px 0; } }
.street { position: relative; height: 72px; overflow: hidden; background: var(--ink); }
.street::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(246, 241, 232, .5) 0 24px, transparent 24px 48px); animation: lane 1.2s linear infinite; }
.street .vehicle { position: absolute; left: 0; animation: drive-across 9s linear infinite; }
.street .vehicle.lane-top { top: 6px; animation-name: drive-back; animation-duration: 13s; animation-delay: -5s; }
.street .vehicle.lane-bottom { bottom: 6px; }
.street:not(.in) .vehicle, .street:not(.in)::before { animation-play-state: paused; }

/* ---------- Notifications de suivi qui défilent (section téléchargement) ---------- */
@keyframes toast-cycle { 0%, 4% { transform: translateY(16px); opacity: 0; } 8%, 30% { transform: none; opacity: 1; } 34%, 100% { transform: translateY(-12px); opacity: 0; } }
.toast-stack { display: grid; }
.toast-stack > * { grid-area: 1 / 1; opacity: 0; animation: toast-cycle 9s var(--ease-out) infinite; }
.toast-stack > *:nth-child(2) { animation-delay: 3s; }
.toast-stack > *:nth-child(3) { animation-delay: 6s; }

/* ---------- ETA du ticket de suivi ---------- */
#eta.is-done { background: #e3f4ec; color: var(--green); }

/* ---------- Bouton retour en haut ---------- */
.to-top { opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .3s ease, transform .3s var(--ease-out); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover .ride-icon { animation: ride-up .6s var(--ease-drive); }
@keyframes ride-up { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-140%); opacity: 0; } 46% { transform: translateY(140%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* ---------- Pages légales ---------- */
.legal h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800; line-height: .95; letter-spacing: -.03em; }
.legal h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.legal section { border-top: 2px dashed rgba(13, 46, 100, .15); padding-top: 1.5rem; }
.legal a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.legal p, .legal li { color: var(--ink-700); line-height: 1.7; }
.legal strong { color: var(--ink); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .tape-track, .bob, .street::before, .street .vehicle, .toast-stack > *, .barcode::after,
    .btn-ride .ride-icon, .to-top .ride-icon, .tile-icon { animation: none !important; }
    .swap > * { transition: none !important; }
    .typing span { animation: none !important; opacity: 1; }
    .clock-ring, .clock-hand, .lock-shackle, .bubble { transition: none !important; }
    .clock-ring { stroke-dashoffset: 151; } .clock-hand { transform: rotate(180deg); } .lock-shackle { transform: none; } .bubble { opacity: 1; transform: none; }
    .how-rider, .how-line, .how-vrider, .how-vline, .sign, .to-top { transition: none !important; }
    .stamp-thump { opacity: 1 !important; animation: none !important; transform: rotate(-8deg); }
    .sign { clip-path: none !important; }
    .toast-stack > *:not(:first-child) { display: none; }
    .toast-stack > *:first-child { opacity: 1; }
}