/* ============================================================
   LOYACARD — Styles principaux
   ============================================================ */

/* === Base === */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* === Hero gradient === */
.hero-gradient {
    background: radial-gradient(circle at top, rgba(0,0,0,0.02) 0%, transparent 70%);
}
.dark .hero-gradient {
    background: radial-gradient(circle at top, rgba(255,255,255,0.02) 0%, transparent 70%);
}

/* === Utilitaires visuels === */
.card-shadow {
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
.glass-panel {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.dark .glass-panel {
    background: rgba(30, 30, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* === Animation flottante des badges === */
@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* === Transition scroll illustration === */
.scroll-trigger-phone {
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   ILLUSTRATION IPHONE WALLET
   ============================================================ */

/* Cadre iPhone */
.iphone-frame {
    position: relative;
    width: 320px;
    height: 650px;
    background: #000;
    border-radius: 44px;
    border: 8px solid #1c1c1e;
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    /* Police système Apple pour un rendu authentique */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
                 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Écran */
.screen {
    height: 100%;
    background: #f2f2f7;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* === Animation flip carte (recto → verso SaaS) === */
.card-container {
    perspective: 1500px;
    width: 100%;
    height: 400px;
    z-index: 50;
    margin-top: 10px;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}

.card-container:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Verso carte */
.card-back {
    transform: rotateY(180deg);
    background: linear-gradient(145deg, #1e3a3a 0%, #0a1414 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    text-align: center;
}

/* Texture papier naturel recto */
.card-texture {
    background-color: #f4f1e1;
    background-image: url(https://www.transparenttextures.com/patterns/natural-paper.png);
}

/* === Simulation QR Code CSS === */
.qr-code-box {
    background: white;
    padding: 12px;
    border-radius: 12px;
    width: 110px;
    height: 110px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 5px;
}
.qr-pixel { background: #000; border-radius: 1px; }
.qr-empty { background: #fff; }

/* === Barre de navigation iOS avec flou === */
.tab-bar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}

/* === Heure status bar iOS === */
.status-time {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.5px;
    padding-left: 6px;
}

/* === Home indicator iOS === */
.home-indicator {
    width: 115px;
    height: 5px;
    background: #000;
    border-radius: 100px;
    margin: 8px auto 10px;
}

/* ============================================================
   TEXTE DE L'ILLUSTRATION RENDU PAR CSS — PROTECTION SEO
   ============================================================
   Toutes les inscriptions visibles à l'intérieur de l'illustration
   sont générées via la propriété CSS `content: attr(data-text)`.
   Les robots Google n'indexent pas le contenu généré par CSS comme
   texte de page, évitant ainsi de biaiser le référencement naturel
   avec des labels d'interface utilisateur ("Cartes", etc.).
   Le conteneur parent porte également aria-hidden="true" pour renforcer
   cette isolation côté accessibilité et robots.
   ============================================================ */
.illus-text::before {
    content: attr(data-text);
}

/* ============================================================
   SMOOTH SCROLL + OFFSET STICKY HEADER
   ============================================================ */
html {
    scroll-behavior: smooth;
}

/* Décalage pour le sticky header (~90px) sur toutes les sections ciblées */
section[id],
main[id] {
    scroll-margin-top: 90px;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal-section {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-section.revealed {
    opacity: 1;
    transform: none;
}

/* ============================================================
   FAQ — Icône rotation
   ============================================================ */
.faq-icon.rotate-180 {
    transform: rotate(180deg);
}