/* ==========================================================================
   Revila theme — Editeasy
   Reprend la palette et la typo de la boutique /commander-preview.
   Surcharge style.css. À charger APRÈS style.css dans templates/index.html.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,400;1,500;1,600&family=Manrope:wght@400;500;600;700&display=swap');

:root {
    --rev-paper: #F3E9D3;       /* fond principal, crème chaud */
    --rev-kraft: #C7B896;       /* beige kraft */
    --rev-seal: #B63A2E;        /* rouge cire, accents & CTA */
    --rev-seal-dark: #8E2C22;   /* hover */
    --rev-ink: #141414;         /* noir profond, titres */
    --rev-graphite: #6B655D;    /* gris moyen, texte secondaire */
    --rev-cream: #FFFCF4;       /* blanc crème, cards */
    --rev-border: rgba(20, 20, 20, 0.08);

    --rev-font-display: "Cormorant Garamond", Georgia, serif;
    --rev-font-editorial: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- Base --- */
body {
    background: var(--rev-paper);
    color: var(--rev-ink);
    font-family: var(--rev-font-editorial);
    font-feature-settings: "ss01" on, "cv11" on;
}

.container {
    max-width: 800px;
    padding: 24px 24px 56px;
}

/* --- Header Revila --- */
.rev-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-top: 12px;
}

.rev-header img.rev-logo {
    height: 44px;
    width: auto;
    display: block;
}

.rev-eyebrow {
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--rev-graphite);
    text-align: center;
}

/* --- Titles --- */
h1, h2, h3 {
    font-family: var(--rev-font-display);
    color: var(--rev-ink);
    letter-spacing: -0.01em;
}

h1 {
    font-style: italic;
    font-weight: 500;
    font-size: 2.6rem;
    margin-bottom: 8px;
}

h1 .v2 {
    color: var(--rev-seal);
    font-style: normal;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

h2 {
    font-style: italic;
    font-weight: 500;
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.subtitle {
    font-family: var(--rev-font-editorial);
    color: var(--rev-graphite);
    font-size: 0.95rem;
    margin-bottom: 28px;
}

/* --- Sections / cards --- */
section {
    background: var(--rev-cream);
    border: 1px solid var(--rev-border);
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03);
}

section.collapsed {
    padding: 18px 24px;
}

.summary-check {
    color: var(--rev-seal);
}

.summary-text {
    color: var(--rev-graphite);
    font-family: var(--rev-font-editorial);
}

.summary-edit {
    color: var(--rev-seal);
    font-weight: 500;
}

.options-group-label {
    font-family: var(--rev-font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--rev-ink);
}

/* --- Dropzone --- */
.dropzone {
    background: var(--rev-paper);
    border: 2px dashed var(--rev-kraft);
    border-radius: 20px;
}

.dropzone:hover,
.dropzone.dragover {
    border-color: var(--rev-seal);
    background: rgba(182, 58, 46, 0.05);
}

.dropzone-content svg {
    color: var(--rev-seal);
}

.dropzone-content p {
    color: var(--rev-ink);
    font-family: var(--rev-font-editorial);
}

.dropzone-content .hint,
.hint {
    color: var(--rev-graphite);
}

/* --- Buttons --- */
.btn {
    font-family: var(--rev-font-editorial);
    font-weight: 600;
    border-radius: 999px;
    padding: 16px 32px;
    box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05);
    transition: background 0.2s, color 0.2s, transform 0.1s;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--rev-seal);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background: var(--rev-seal-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--rev-seal);
    border: 1.5px solid var(--rev-seal);
    box-shadow: none;
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(182, 58, 46, 0.08);
}

.btn-small {
    padding: 10px 22px;
    font-size: 0.9rem;
}

/* --- Toggles --- */
.switch input:checked + .switch-slider {
    background: var(--rev-seal);
}

/* --- Music / pace / orient cards --- */
.music-option,
.pace-option,
.orient-card {
    background: var(--rev-paper);
    border: 2px solid transparent;
    border-radius: 18px;
}

.music-option:hover,
.pace-option:hover,
.orient-card:hover {
    border-color: var(--rev-kraft);
}

.music-option.selected,
.pace-option.selected,
.orient-card.selected {
    border-color: var(--rev-seal);
    background: rgba(182, 58, 46, 0.06);
}

.music-option svg,
.orient-card.selected svg {
    color: var(--rev-seal);
}

.music-option span,
.pace-option strong {
    color: var(--rev-ink);
    font-family: var(--rev-font-editorial);
    font-weight: 600;
}

.music-option small,
.pace-option small {
    color: var(--rev-graphite);
}

/* --- Music tracks --- */
.music-track {
    background: var(--rev-paper);
    border-radius: 14px;
}

.music-track:hover {
    background: rgba(199, 184, 150, 0.25);
}

.music-track.selected {
    border-color: var(--rev-seal);
    background: rgba(182, 58, 46, 0.06);
}

.music-track-name {
    color: var(--rev-ink);
}

.music-track-meta {
    color: var(--rev-graphite);
}

.music-play-btn {
    background: var(--rev-cream);
    border: 1px solid var(--rev-border);
    color: var(--rev-seal);
}

.music-play-btn:hover {
    background: rgba(182, 58, 46, 0.08);
    border-color: var(--rev-seal);
}

/* --- Custom music upload --- */
.custom-music-btn {
    background: var(--rev-cream);
    border: 1.5px dashed var(--rev-seal);
    color: var(--rev-seal);
    border-radius: 14px;
}

.custom-music-btn:hover {
    background: rgba(182, 58, 46, 0.06);
}

.custom-music-name {
    color: var(--rev-ink);
}

/* --- Advanced options / selects --- */
.advanced-options {
    border-top-color: var(--rev-border);
}

.advanced-options summary {
    color: var(--rev-graphite);
}

.style-select {
    background: var(--rev-cream);
    color: var(--rev-ink);
    border: 1px solid var(--rev-border);
    border-radius: 12px;
    font-family: var(--rev-font-editorial);
}

.style-select:hover,
.style-select:focus {
    border-color: var(--rev-seal);
}

/* --- Consent --- */
.consent-label input[type="checkbox"] {
    accent-color: var(--rev-seal);
}

/* --- Spinner & progress --- */
.spinner {
    border-color: var(--rev-kraft);
    border-top-color: var(--rev-seal);
}

.progress-bar {
    background: var(--rev-kraft);
}

.progress-fill {
    background: linear-gradient(90deg, var(--rev-seal), var(--rev-seal-dark));
}

/* --- File strip / cards --- */
.file-card {
    background: var(--rev-kraft);
    border-radius: 14px;
}

.file-card.drag-over {
    border-color: var(--rev-seal);
}

.strip-scroll-btn {
    background: var(--rev-cream);
    border: 1px solid var(--rev-border);
    color: var(--rev-graphite);
    border-radius: 12px;
}

.strip-scroll-btn:hover {
    background: rgba(182, 58, 46, 0.08);
    color: var(--rev-seal);
    border-color: var(--rev-seal);
}

/* --- Orient info --- */
.orient-info {
    background: var(--rev-paper);
    color: var(--rev-ink);
    border-radius: 14px;
}

.orient-info .checkmark {
    color: var(--rev-seal);
}

/* --- Done --- */
#section-done h2 {
    color: var(--rev-seal);
}

/* --- Tooltip --- */
.info-tooltip::after {
    background: var(--rev-ink);
    color: var(--rev-cream);
    font-family: var(--rev-font-editorial);
}

/* --- Error --- */
.error-text {
    background: rgba(182, 58, 46, 0.08);
    color: var(--rev-seal);
    border: 1px solid rgba(182, 58, 46, 0.25);
    border-radius: 14px;
}

/* --- Mobile responsive --- */
@media (max-width: 560px) {
    .container {
        padding: 16px 16px 40px;
    }
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.25rem;
    }
    section {
        padding: 22px 18px;
        border-radius: 20px;
    }
    .btn {
        padding: 14px 26px;
    }
}

/* ===== Aperçu Revila — clone vanilla de components/MockupPreview.tsx ===== */
.revila-preview-block {
    margin-top: 32px;
    padding: 28px 24px;
    background: var(--rev-cream, #FAF6EE);
    border: 1px solid var(--rev-kraft, #E6D9C2);
    border-radius: 16px;
    text-align: center;
}
.revila-preview-block h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.8rem;
    color: var(--rev-ink, #141414);
    margin: 0 0 8px;
}
.revila-preview-tagline {
    font-size: 0.95rem;
    color: var(--rev-graphite, #5A554E);
    margin: 0 0 24px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.mockup-wrap {
    position: relative;
    margin: 0 auto 56px;
    width: max-content;
}
.mockup-scene {
    position: relative;
    perspective: 900px;
    margin: 0 auto;
    /* Dimensions : photo portrait (200×280) + phone à droite (130×260)
       → scene 330 × 280 + dépassement bas du phone (87) = 367 */
    width: 330px;
    height: 367px;
}
.mockup-scene[data-orientation="landscape"] {
    width: 460px;
    height: 320px;
}
.mockup-photo {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 280px;
    transform: rotateX(10deg) rotateY(-4deg);
    transform-style: preserve-3d;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 30px 60px -12px rgba(0, 0, 0, 0.5),
        0 18px 28px -8px rgba(0, 0, 0, 0.35),
        0 4px 10px rgba(0, 0, 0, 0.15);
    background: #f5f5f5;
}
.mockup-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mockup-phone {
    position: absolute;
    width: 130px;
    height: 260px;
    /* CSS variables pilotées par JS pour les phases idle/centered/settling */
    left: var(--phone-left, 200px);
    top: var(--phone-top, 0px);
    transform: rotateX(10deg) rotateY(-4deg);
    transform-style: preserve-3d;
    transition:
        left var(--phone-transition, 1000ms) cubic-bezier(0.4, 0, 0.2, 1),
        top var(--phone-transition, 1000ms) cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}
.mockup-scene[data-orientation="landscape"] .mockup-phone {
    width: 260px;
    height: 120px;
}
.mockup-phone-body {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 18px;
    padding: 7px;
    box-shadow:
        0 25px 50px -10px rgba(0, 0, 0, 0.55),
        0 12px 20px -5px rgba(0, 0, 0, 0.3);
    position: relative;
    box-sizing: border-box;
}
.mockup-phone-screen {
    width: 100%;
    height: 100%;
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.mockup-phone-screen:focus-visible {
    outline: 2px solid var(--rev-seal, #B63A2E);
    outline-offset: 2px;
}
.mockup-home-screen {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.4s ease;
}
.mockup-home-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mockup-video-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mockup-video-layer video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    display: block;
}
.mockup-scene[data-phase="centered"] .mockup-home-screen,
.mockup-scene[data-phase="settling"] .mockup-home-screen,
.mockup-scene[data-phase="playing"] .mockup-home-screen {
    opacity: 0;
}
.mockup-scene[data-phase="centered"] .mockup-video-layer,
.mockup-scene[data-phase="settling"] .mockup-video-layer,
.mockup-scene[data-phase="playing"] .mockup-video-layer {
    opacity: 1;
}
.mockup-control-hint {
    position: absolute;
    bottom: -42px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.mockup-control-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--rev-graphite, #5A554E);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.2s;
    cursor: pointer;
}
.mockup-control-btn:hover {
    color: var(--rev-ink, #141414);
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.revila-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.revila-cta-buttons .btn {
    min-width: 200px;
}
@media (max-width: 540px) {
    /* transform: scale() ne réduit PAS la boîte de layout : la scene garde
       330/460 px de large et faisait déborder la page à droite sur mobile.
       overflow:hidden sur le bloc coupe ce débordement structurel, et
       .mockup-wrap repasse en largeur fluide (max-content débordait). */
    .revila-preview-block {
        overflow: hidden;
        padding-left: 12px;
        padding-right: 12px;
    }
    .mockup-wrap {
        width: auto;
        max-width: 100%;
    }
    /* zoom et PAS transform scale : zoom réduit la vraie boîte de layout,
       le contenu suivant se replace naturellement. L'ancien couple
       scale + margin-bottom négatif laissait la boîte pleine hauteur et le
       margin -60px superposait « Jouer la démo » sur « Télécharger »
       (bug iPhone, retour user 06/2026 : chevauchement mesuré 34 px,
       avec zoom : 14 px d'écart). */
    .mockup-scene {
        zoom: 0.78;
    }
    /* Paysage : 460 px x 0.78 = 359 px peints, encore trop large pour la zone
       utile (~350 px). 0.62 = 285 px, marge confortable. */
    .mockup-scene[data-orientation="landscape"] {
        zoom: 0.62;
    }
    .revila-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .revila-cta-buttons .btn {
        width: 100%;
        min-width: 0;
    }
}