/**
 * Vitrine CSS - Styles pour les pages publiques
 */

/* ==========================================================================
   Phase 5 / A11y : prefers-reduced-motion
   Désactive animations / transitions pour les utilisateurs qui le demandent
   au niveau OS (handicaps vestibulaires, sensibilité au mouvement).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Tunnel réservation — animation entre étapes (Phase C.4)
   Fade-in léger + déplacement vertical sur le panneau qui s'affiche.
   ========================================================================== */
@keyframes panel-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.stepper-panel.just-shown {
    animation: panel-fade-in 220ms ease-out;
}

/* ==========================================================================
   Variables CSS
   ========================================================================== */
:root {
    --vitrine-primary: #2c5f2d;
    --vitrine-primary-light: #4a8f4b;
    --vitrine-primary-dark: #1e4620;
    --vitrine-secondary: #97bc62;
    --vitrine-accent: #daa520;
    --vitrine-dark: #1a1a2e;
    --vitrine-gray: #6c757d;
    --vitrine-light: #f8f9fa;
    --vitrine-white: #ffffff;
    --vitrine-border: #dee2e6;
    --vitrine-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    --vitrine-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
    --vitrine-radius: 12px;
    --vitrine-radius-lg: 20px;
}

/* ==========================================================================
   Base
   ========================================================================== */
.vitrine-body {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    min-height: 100vh;
}

.vitrine-main {
    flex: 1;
    padding: 2rem 0;
}

/* ==========================================================================
   Header — deux etats : .header-top (blanc/vert) et .header-scrolled (vert/blanc)
   ========================================================================== */
#header.header-top {
    background: #ffffff;
    color: #1A2E22;
    border-bottom: 1px solid #e5e7eb;
}

#header.header-scrolled {
    background: #1A2E22;
    color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}

#header.header-top .header-btn-outline { border-color: rgba(26, 46, 34, .3); }
#header.header-top .header-btn-outline:hover { background: rgba(26, 46, 34, .06); }
#header.header-scrolled .header-btn-outline { border-color: rgba(255, 255, 255, .3); }
#header.header-scrolled .header-btn-outline:hover { background: rgba(255, 255, 255, .1); }

#header.header-top .header-logo-icon { background: rgba(26, 46, 34, .08); border-color: rgba(26, 46, 34, .25); }
#header.header-scrolled .header-logo-icon { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #2D4632; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #1A2E22; }

.hero-gradient { background: linear-gradient(rgba(26, 46, 34, 0.4), rgba(26, 46, 34, 0.6)); }
.text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }

/* ==========================================================================
   Footer
   ========================================================================== */
.vitrine-footer {
    background: var(--vitrine-dark);
    color: rgba(255, 255, 255, 0.6);
}

.vitrine-footer a {
    transition: color 0.2s ease;
}

/* ==========================================================================
   Article — typographie du contenu rédactionnel (page détail blog)
   Le contenu vient d'un WYSIWYG (Quill) → on applique des styles cohérents
   à toutes les balises HTML produites sans dépendre d'un plugin externe.
   ========================================================================== */
.article-content { line-height: 1.8; }
.article-content h2,
.article-content h3,
.article-content h4 {
    font-family: 'Playfair Display', serif;
    color: #1A2E22;
    font-weight: 700;
    margin: 2.5rem 0 1rem;
    line-height: 1.3;
}
.article-content h2 { font-size: 2rem; }
.article-content h3 { font-size: 1.5rem; }
.article-content h4 { font-size: 1.25rem; }
.article-content p { margin-bottom: 1.25rem; }
.article-content a { color: #2D4632; text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: #1A2E22; }
.article-content strong { color: #1A2E22; font-weight: 600; }
.article-content ul,
.article-content ol { margin: 1.25rem 0 1.25rem 1.5rem; padding-left: 1rem; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-bottom: 0.5rem; }
.article-content blockquote {
    border-left: 4px solid #C5A880;
    padding: 0.5rem 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #4a5568;
    background: #F9F7F2;
    border-radius: 0 0.5rem 0.5rem 0;
}
.article-content img {
    border-radius: 0.75rem;
    margin: 1.5rem 0;
    max-width: 100%;
    height: auto;
}
.article-content figure { margin: 1.5rem 0; }
.article-content figcaption { font-size: 0.875rem; color: #6b7280; text-align: center; margin-top: 0.5rem; }
.article-content code {
    background: #f3f4f6;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
    font-size: 0.95em;
}
.article-content pre {
    background: #1A2E22;
    color: #f5f5f5;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}
.article-content pre code { background: transparent; padding: 0; color: inherit; }
.article-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 2.5rem 0; }