/* ============================================================
   THEME — DevXpert Sàrl
   Vert forêt / Inter

   Règle : ce fichier ne redéfinit QUE les tokens --s2-* et
   les décorations visuelles. Il ne touche jamais à la
   structure des composants (padding, display, flex…).
   À charger APRÈS smartsite.min.css.
============================================================ */


/* ============================================================
   1. DESIGN TOKENS — Palette & typographie
============================================================ */
:root {
    /* Palette primaire — Vert original */
    --s2-color-primary:        #234e41;
    --s2-color-primary-rgb:    35, 78, 65;
    --s2-color-primary-light:  #e8f1ee;
    --s2-color-primary-dark:   #1a3a2f;
    --s2-color-secondary:      #5a7d6f;
    --s2-color-accent:         #6db193;

    /* Neutres (Conservés gris/ardoise comme demandé précédemment) */
    --s2-color-bg:             #ffffff;
    --s2-color-bg-alt:         #f8fafc;
    --s2-color-text:           #0f172a;
    --s2-color-text-muted:     #475569;
    --s2-color-border:         rgba(35, 78, 65, 0.15); /* Bordures vertes */

    /* Polices */
    --s2-font-sans:  'Inter', system-ui, sans-serif;
    --s2-font-body:  'Inter', system-ui, sans-serif;

    /* Ombres teintées */
    --s2-shadow-sm: 0 1px 4px rgba(51, 65, 85, 0.06);
    --s2-shadow:    0 4px 16px rgba(51, 65, 85, 0.09);
    --s2-shadow-lg: 0 12px 32px rgba(51, 65, 85, 0.12);

    /* Contact block — ratio info / formulaire */
    --s2-contact-cols: 5fr 7fr;
}


/* ============================================================
   2. HERO — dégradé vert original
============================================================ */
.s2-hero {
    background: linear-gradient(135deg, #dceee6 0%, #eef6f2 60%, #f7faf8 100%);
    min-height: 55vh;
}


/* ============================================================
   3. TAGLINE — pill accent
============================================================ */
.s2-tagline {
    background-color: rgba(109, 177, 147, 0.12);
    color: var(--s2-color-primary);
    border-radius: var(--s2-radius-pill);
    padding: 0.35em 1em;
    display: inline-block;
    letter-spacing: 0.06em;
}


/* ============================================================
   4. CALLOUT — arrondi décoratif
============================================================ */
.s2-callout {
    border-radius: var(--s2-radius);
}


/* ============================================================
   12. FOOTER — fond clair DevXpert
============================================================ */
.s2-footer {
    background-color: var(--s2-color-primary-light);
    color: var(--s2-color-text);
    border-top: 1px solid var(--s2-color-border);
}

.s2-footer a {
    color: var(--s2-color-text);
}
.s2-footer a:hover {
    color: var(--s2-color-accent);
}

.s2-footer-brand {
    color: var(--s2-color-primary);
    font-family: var(--s2-font-sans);
    font-size: 1.2rem;
}


/* ============================================================
   13. HERO — tagline pill & animations
============================================================ */
.s2-hero .s2-tagline {
    opacity: 0;
    animation: s2-fadeInUp 0.8s ease-out forwards;
}
.s2-hero .s2-hero-title {
    opacity: 0;
    animation: s2-fadeInUp 0.8s ease-out 0.15s forwards;
}
.s2-hero .s2-hero-subtitle {
    opacity: 0;
    animation: s2-fadeInUp 0.8s ease-out 0.3s forwards;
}
.s2-hero .s2-hero-actions {
    opacity: 0;
    animation: s2-fadeInUp 0.8s ease-out 0.45s forwards;
}


/* ============================================================
   14. BLOCKQUOTE — callout spéciale "Qui sommes-nous"
============================================================ */
.theme-blockquote {
    background-color: var(--s2-color-primary-light);
    border-left: 5px solid var(--s2-color-primary);
    padding: 2rem;
    border-radius: var(--s2-radius);
}


/* ============================================================
   15. TECH STACK — logos technologiques
============================================================ */
.theme-tech-stack {
    border: 1px solid var(--s2-color-border);
    border-radius: var(--s2-radius-lg);
    padding: 2rem 2.5rem;
    background-color: var(--s2-color-bg);
}

.theme-tech-group {
    border-left: 1px solid var(--s2-color-border);
    padding-left: 1rem;
}
.theme-tech-group:first-child {
    border-left: none;
}

.theme-tech-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.theme-tech-logo:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
.theme-tech-logo img {
    max-width: 64px;
    max-height: 64px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 575px) {
    .theme-tech-group {
        border-left: none;
    }
}
@media (min-width: 576px) and (max-width: 991px) {
    .theme-tech-group:nth-child(odd) {
        border-left: none;
    }
}


/* ============================================================
   16. CONSULTING CARDS — cards avec en-têtes colorés
============================================================ */
.theme-card-header {
    border-radius: var(--s2-radius) var(--s2-radius) 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    transition: transform 0.3s ease;
}
.theme-card-header img {
    transition: transform 0.3s ease;
}
.s2-card:hover .theme-card-header img {
    transform: scale(1.1);
}


/* ============================================================
   17. ABOUT — photo ronde
============================================================ */
.theme-photo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: var(--s2-shadow);
}


/* ============================================================
   18. SECTION HEADER
============================================================ */
/* Supprimé : la ligen sous le titre aléatoire */


/* ============================================================
   19. NAV — ombre portée après scroll
============================================================ */
.s2-nav--scrolled {
    box-shadow: 0 2px 12px rgba(35, 78, 65, 0.1);
}

.s2-nav-links > li > a:hover,
.s2-has-dropdown > details > summary:hover {
    color: var(--s2-color-primary);
    background-color: var(--s2-color-primary-light);
    border-radius: var(--s2-radius-sm);
}


/* ============================================================
   20. BOUTONS — ombres colorées + léger lift
============================================================ */
.s2-btn--primary {
    box-shadow: 0 4px 14px rgba(35, 78, 65, 0.25);
}
.s2-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(35, 78, 65, 0.32);
}
.s2-btn--ghost:hover,
.s2-btn--outline:hover {
    transform: translateY(-1px);
}


/* ============================================================
   21. CARDS — bordure + ombre teintées
============================================================ */
.s2-card:not(.theme-no-hover):hover {
    border-color: var(--s2-color-accent);
    box-shadow: 0 10px 28px rgba(35, 78, 65, 0.13);
}

.theme-no-hover {
    transition: none !important;
}
.theme-no-hover:hover {
    transform: none !important;
    box-shadow: var(--s2-shadow-sm) !important;
    border-color: var(--s2-color-border) !important;
}


/* ============================================================
   22. FEATURES — icône avec fond pill
============================================================ */
.s2-feature-icon {
    background-color: var(--s2-color-primary-light);
    color: var(--s2-color-primary);
    border-radius: var(--s2-radius);
    font-size: 1.6rem;
}


/* ============================================================
   23. SECTION --primary — couleur de fond surchargée
============================================================ */
.s2-section--primary {
    background: linear-gradient(135deg, var(--s2-color-primary) 0%, var(--s2-color-primary-dark) 100%);
}


/* ============================================================
   24. CONTACT — fond de la colonne info
============================================================ */
.s2-contact-info {
    background-color: var(--s2-color-bg-alt);
    border-right: 1px solid var(--s2-color-border);
}

@media (max-width: 991px) {
    .s2-contact-info {
        border-right: none;
        border-bottom: 1px solid var(--s2-color-border);
    }
}


/* ============================================================
   25. FORMULAIRE — focus accent vert
============================================================ */
.s2-input:focus,
.s2-textarea:focus,
.s2-select:focus {
    border-color: var(--s2-color-accent);
    box-shadow: 0 0 0 3px rgba(109, 177, 147, 0.18);
}

.feedforms-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: -0.125em;
    animation: feedforms-spin 1s linear infinite;
}

@keyframes feedforms-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.form-submitted {
    opacity: 0.6;
    pointer-events: none;
}

.s2-feedback.feedback-processing {
    display: block;
    background-color: #f8f9fa;
    color: var(--s2-color-text-muted);
    border-top: 1px solid var(--s2-color-border);
}

.s2-feedback.feedback-success {
    display: block;
    background-color: var(--s2-color-success-bg);
    color: var(--s2-color-success);
    border-top: 1px solid var(--s2-color-success-border);
}

.s2-feedback.feedback-error {
    display: block;
    background-color: var(--s2-color-danger-bg);
    color: var(--s2-color-danger);
    border-top: 1px solid var(--s2-color-danger-border);
}