/* ═══════════════════════════════════════════════════════════
   N12A DESIGN SYSTEM — style.css
   Version : 2.0 — Refonte B2B Haut de Gamme
   Palette : Bleu Nuit · Cobalt · Bleu Pâle
   ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ────────────────────────────────────────────────────────── */
:root {
    /* Palette principale */
    --primary:        #1A56DB; /* Cobalt — CTAs, liens actifs    */
    --primary-dark:   #1347C8; /* Cobalt foncé — hover           */
    --primary-light:  #EEF3FF; /* Cobalt pâle — fonds de section */
    --secondary:      #2563EB; /* Bleu moyen — accents           */
    --success:        #10B981; /* Vert — états de succès         */
    --dark:           #0D1B2E; /* Bleu Nuit — texte principal    */
    --light:          #EEF3FF; /* Fond clair                     */
    --gray:           #6B7280; /* Texte secondaire               */
    --gray-light:     #F8F9FA; /* Fond neutre                    */
    --white:          #FFFFFF;

    /* Système de couleurs (mode clair) */
    --bg-primary:     #FFFFFF;
    --bg-secondary:   #EEF3FF;
    --text-primary:   #0D1B2E;
    --text-second:    #EEF3FF;
    --text-secondary: #6B7280;
    --border-color:   #E5E7EB;
    --shadow-color:   rgba(13, 27, 46, 0.1);

    /* Chatbot */
    --cb-primary:       #1A56DB;
    --cb-primary-dark:  #1347C8;
    --cb-primary-light: #EEF3FF;
    --cb-accent:        #2563EB;
    --cb-bg:            #ffffff;
    --cb-surface:       #f5f7fa;
    --cb-text:          #0D1B2E;
    --cb-text-muted:    #6B7280;
    --cb-border:        #E5E7EB;
    --cb-shadow:        0 20px 60px rgba(26, 86, 219, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08);
    --cb-radius:        18px;
    --cb-font:          'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Mode sombre */
[data-theme="dark"] {
    --bg-primary:     #1a1a1a;
    --bg-secondary:   #2d2d2d;
    --text-primary:   #FFFFFF;
    --text-secondary: #B0B0B0;
    --border-color:   #404040;
    --shadow-color:   rgba(255, 255, 255, 0.1);
    --light:          #2d2d2d;
    --dark:           #0D1B2E;
}

/* ──────────────────────────────────────────────────────────
   2. RESET & BASE
   ────────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ──────────────────────────────────────────────────────────
   3. TYPOGRAPHIE
   ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-family: 'Rubik', sans-serif;
}

h1, h2,
.fw-bold {
    font-weight: 800 !important;
}

h3, h4,
.fw-semi-bold {
    font-weight: 700 !important;
}

h5, h6,
.fw-medium {
    font-weight: 600 !important;
}

.text-muted {
    color: var(--text-secondary) !important;
}

/* ──────────────────────────────────────────────────────────
   4. SPINNER
   ────────────────────────────────────────────────────────── */
.spinner {
    width: 40px;
    height: 40px;
    background: var(--primary);
    margin: 100px auto;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@keyframes sk-rotateplane {
    0%   { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
    50%  { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
    100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity 0.5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/* ──────────────────────────────────────────────────────────
   5. BOUTONS
   ────────────────────────────────────────────────────────── */
.btn {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    border-radius: 6px;
    padding: 12px 28px;
    transition: all 0.25s ease;
}

.btn-primary,
.btn-secondary {
    color: #FFFFFF;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 16px rgba(26, 86, 219, 0.35);
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(26, 86, 219, 0.25);
    transform: translateY(-1px);
}

.btn-square {
    width: 36px;
    height: 36px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    border-radius: 6px;
}

.btn-sm-square {
    width: 30px;
    height: 30px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

/* Boutons d'erreur */
.error-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.btn-error {
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-error.primary {
    background-color: var(--primary);
    color: white;
}

.btn-error.secondary {
    background-color: var(--gray-light);
    color: var(--dark);
    border: 1px solid var(--border-color);
}

.btn-error:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(13, 27, 46, 0.1);
}

/* Dark Mode Toggle */
.dark-mode-toggle {
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 1000;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px var(--shadow-color);
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px var(--shadow-color);
}

@media (max-width: 768px) {
    .dark-mode-toggle {
        top: 15px;
        right: 70px;
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
}

/* ──────────────────────────────────────────────────────────
   6. NAVBAR
   ────────────────────────────────────────────────────────── */
.navbar-dark .navbar-nav .nav-link {
    font-family: 'Nunito', sans-serif;
    position: relative;
    margin-left: 25px;
    padding: 35px 0;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    outline: none;
    transition: 0.3s ease;
}

.sticky-top.navbar-dark .navbar-nav .nav-link {
    padding: 20px 0;
    color: var(--text-primary);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar-dark .navbar-brand h1 {
    color: #FFFFFF;
}

.navbar-dark .navbar-toggler {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .sticky-top.navbar-dark {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-primary);
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .sticky-top.navbar-dark {
        position: relative;
        background: var(--bg-primary);
    }

    .navbar-dark .navbar-nav .nav-link,
    .navbar-dark .navbar-nav .nav-link.show,
    .sticky-top.navbar-dark .navbar-nav .nav-link {
        padding: 10px 0;
        color: var(--text-primary);
    }

    .navbar-dark .navbar-brand h1 {
        color: var(--primary);
    }
}

@media (min-width: 992px) {
    .navbar-dark {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 999;
    }

    .sticky-top.navbar-dark {
        position: fixed;
        background: var(--bg-primary);
    }

    .navbar-dark .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 0;
        height: 2px;
        bottom: -1px;
        left: 50%;
        background: var(--primary);
        transition: 0.3s ease;
    }

    .navbar-dark .navbar-nav .nav-link:hover::before,
    .navbar-dark .navbar-nav .nav-link.active::before {
        width: 100%;
        left: 0;
    }

    .navbar-dark .navbar-nav .nav-link.nav-contact::before {
        display: none;
    }

    .sticky-top.navbar-dark .navbar-brand h1 {
        color: var(--primary);
    }
}

/* ──────────────────────────────────────────────────────────
   7. CAROUSEL / HERO
   ────────────────────────────────────────────────────────── */
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 27, 46, 0.72);
    z-index: 1;
}

[data-theme="dark"] .carousel-caption {
    background: rgba(26, 26, 26, 0.82);
}

@media (max-width: 576px) {
    .carousel-caption h5 {
        font-size: 14px;
        font-weight: 500 !important;
    }

    .carousel-caption h1 {
        font-size: 30px;
        font-weight: 600 !important;
    }
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

/* ──────────────────────────────────────────────────────────
   8. SECTION TITLE
   ────────────────────────────────────────────────────────── */
.section-title::before {
    position: absolute;
    content: "";
    width: 150px;
    height: 5px;
    left: 0;
    bottom: 0;
    background: var(--primary);
    border-radius: 2px;
}

.section-title.text-center::before {
    left: 50%;
    margin-left: -75px;
}

.section-title.section-title-sm::before {
    width: 90px;
    height: 3px;
}

.section-title::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 5px;
    bottom: 0;
    background: var(--bg-primary);
    animation: section-title-run 5s infinite linear;
}

.section-title.section-title-sm::after {
    width: 4px;
    height: 3px;
    animation: section-title-run-sm 5s infinite linear;
}

.section-title.text-center::after {
    animation: section-title-run-center 5s infinite linear;
}

@keyframes section-title-run {
    0%   { left: 0; }
    50%  { left: 145px; }
    100% { left: 0; }
}

@keyframes section-title-run-center {
    0%   { left: 50%; margin-left: -75px; }
    50%  { left: 50%; margin-left: 45px; }
    100% { left: 50%; margin-left: -75px; }
}

@keyframes section-title-run-sm {
    0%   { left: 0; }
    50%  { left: 85px; }
    100% { left: 0; }
}

/* ──────────────────────────────────────────────────────────
   9. SERVICE ITEMS
   ────────────────────────────────────────────────────────── */
.service-item {
    position: relative;
    height: 350px;
    padding: 30px;
    transition: 0.3s ease;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

[data-theme="dark"] .service-item {
    box-shadow: 0 0 20px var(--shadow-color);
}

.service-item .service-icon {
    margin-bottom: 30px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 2px;
    transform: rotate(-45deg);
}

.service-item .service-icon i {
    transform: rotate(45deg);
}

.service-item h4 {
    font-size: 1.15rem;
}

.service-item p {
    font-size: 0.9rem;
    line-height: 1.6;
}

.service-item a.btn {
    position: absolute;
    width: 60px;
    bottom: -48px;
    left: 50%;
    margin-left: -30px;
    opacity: 0;
}

.service-item:hover a.btn {
    bottom: -24px;
    opacity: 1;
}

@media (max-width: 991px) {
    .service-item {
        height: auto;
        min-height: 280px;
    }
}

@media (max-width: 576px) {
    .service-item {
        height: auto;
        min-height: 250px;
        padding: 20px;
    }
}

/* ──────────────────────────────────────────────────────────
   10. TESTIMONIALS
   ────────────────────────────────────────────────────────── */
.testimonial-carousel .owl-dots {
    margin-top: 15px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--border-color);
    border-radius: 2px;
    transition: 0.3s;
}

.testimonial-carousel .owl-dot.active {
    width: 30px;
    background: var(--primary);
}

.testimonial-carousel .owl-item.center {
    position: relative;
    z-index: 1;
}

.testimonial-carousel .owl-item .testimonial-item {
    transition: 0.3s;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.testimonial-carousel .owl-item.center .testimonial-item {
    background: var(--bg-primary) !important;
    box-shadow: 0 0 30px var(--shadow-color);
}

.testimonial-item.bg-light {
    border-left: 4px solid var(--primary);
}

/* Hauteur égale pour toutes les fiches du carousel */
.testimonial-carousel .owl-stage {
    display: flex;
}
.testimonial-carousel .owl-item {
    display: flex;
}
.testimonial-carousel .owl-item .card {
    width: 100%;
}

/* ──────────────────────────────────────────────────────────
   11. TEAM
   ────────────────────────────────────────────────────────── */
.team-item {
    transition: 0.3s;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.team-social {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.team-social a.btn {
    position: relative;
    margin: 0 3px;
    margin-top: 100px;
    opacity: 0;
}

.team-item:hover {
    box-shadow: 0 0 30px var(--shadow-color);
}

.team-item:hover .team-social {
    background: rgba(13, 27, 46, 0.72);
}

[data-theme="dark"] .team-item:hover .team-social {
    background: rgba(26, 26, 26, 0.9);
}

.team-item:hover .team-social a.btn:first-child {
    opacity: 1;
    margin-top: 0;
    transition: 0.3s 0s;
}

.team-item:hover .team-social a.btn:nth-child(2) {
    opacity: 1;
    margin-top: 0;
    transition: 0.3s 0.05s;
}

.team-item:hover .team-social a.btn:nth-child(3) {
    opacity: 1;
    margin-top: 0;
    transition: 0.3s 0.1s;
}

.team-item:hover .team-social a.btn:nth-child(4) {
    opacity: 1;
    margin-top: 0;
    transition: 0.3s 0.15s;
}

.team-item .team-img img,
.blog-item .blog-img img {
    transition: 0.3s;
}

.team-item:hover .team-img img,
.blog-item:hover .blog-img img {
    transform: scale(1.15);
}

/* ──────────────────────────────────────────────────────────
   12. FORMULAIRES
   ────────────────────────────────────────────────────────── */
.form-control {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.form-control:focus {
    background-color: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(26, 86, 219, 0.2);
}

.form-control::placeholder {
    color: var(--text-secondary);
}

.form-floating > .form-control,
.form-floating > .form-select {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(26, 86, 219, 0.15);
}

.form-floating > label {
    color: var(--text-secondary);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

[data-theme="dark"] .form-floating > .form-control,
[data-theme="dark"] .form-floating > .form-select {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* ──────────────────────────────────────────────────────────
   13. FORMULAIRE AUDIT IA
   ────────────────────────────────────────────────────────── */
.audit-form-container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    background: #FFFFFF !important;
    border-radius: 12px;
    padding: 35px;
    box-shadow: 0 10px 40px rgba(13, 27, 46, 0.2);
}

.audit-form-group {
    margin-bottom: 20px;
}

.audit-form-group label {
    font-weight: 600;
    color: #333 !important;
    margin-bottom: 8px;
    display: block;
    font-size: 0.95rem;
}

.audit-form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.25s;
    font-family: 'Nunito', sans-serif;
    background: #FFFFFF !important;
    color: #333 !important;
    box-sizing: border-box;
}

.audit-form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
}

.audit-form-group input::placeholder {
    color: #999 !important;
}

.audit-help-text {
    font-size: 0.85rem;
    color: #666 !important;
    margin-top: 4px;
}

/* Validation en ligne */
.audit-field-error {
    display: none;
    color: #e74c3c;
    font-size: 0.82em;
    margin-top: 5px;
}

.audit-field-error.visible {
    display: block;
}

input.audit-invalid {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.15) !important;
}

.audit-submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #FFFFFF !important;
    border: none;
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    font-family: 'Nunito', sans-serif;
}

.audit-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(26, 86, 219, 0.4);
}

.audit-submit-btn:active {
    transform: translateY(0);
}

.audit-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.audit-result-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 6px;
    display: none;
    font-size: 0.95rem;
}

.audit-result-message.success {
    background: #d4edda !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb;
}

.audit-result-message.error {
    background: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb;
}

/* Override dark mode pour le formulaire d'audit */
[data-theme="dark"] .audit-form-container,
[data-theme="dark"] .audit-form-group input {
    background: #FFFFFF !important;
    color: #333 !important;
}

[data-theme="dark"] .audit-form-group label {
    color: #333 !important;
}

[data-theme="dark"] .audit-form-group input::placeholder {
    color: #999 !important;
}

[data-theme="dark"] .audit-help-text {
    color: #666 !important;
}

/* Responsive — Audit Form */
@media (max-width: 991px) {
    .audit-form-container {
        max-width: 90%;
        padding: 30px 25px;
        margin: 20px auto;
    }
}

@media (max-width: 576px) {
    .audit-form-container {
        max-width: 95%;
        padding: 25px 20px;
        border-radius: 10px;
    }

    .audit-form-group {
        margin-bottom: 18px;
    }

    .audit-form-group input {
        padding: 11px 13px;
        font-size: 0.9rem;
    }

    .audit-submit-btn {
        padding: 12px;
        font-size: 0.95rem;
    }
}

@media (min-width: 1200px) {
    .audit-form-container {
        max-width: 550px;
        padding: 40px;
    }
}

/* ──────────────────────────────────────────────────────────
   14. CHATBOT N12A — Premium
   ────────────────────────────────────────────────────────── */

/* Bouton lanceur */
#n12a-chatbot-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9998;
    background: linear-gradient(135deg, var(--cb-primary), var(--cb-primary-dark));
    color: #fff;
    border: none;
    border-radius: 60px;
    padding: 0 20px 0 6px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(26, 86, 219, 0.35);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--cb-font);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    overflow: hidden;
}

#n12a-chatbot-launcher:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 40px rgba(26, 86, 219, 0.45);
}

#n12a-chatbot-launcher.active {
    border-radius: 50%;
    width: 52px;
    padding: 0;
    justify-content: center;
}

.cb-launcher-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.cb-launcher-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    padding: 2px;
}

.cb-launcher-text {
    white-space: nowrap;
    transition: opacity 0.2s, max-width 0.3s;
}

#n12a-chatbot-launcher.active .cb-launcher-text {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
}

.cb-launcher-pulse {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #10b981;
    border-radius: 50%;
    border: 2.5px solid #fff;
    animation: cb-pulse 2s ease-in-out infinite;
}

@keyframes cb-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.3); opacity: 0.7; }
}

/* Widget container */
#n12a-chatbot-widget {
    position: fixed;
    right: 24px;
    bottom: 90px;
    width: 380px;
    max-height: 72vh;
    min-height: 420px;
    background: var(--cb-bg);
    border-radius: var(--cb-radius);
    box-shadow: var(--cb-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
    font-family: var(--cb-font);
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#n12a-chatbot-widget.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Header chatbot */
.cb-header {
    background: linear-gradient(135deg, var(--cb-primary), var(--cb-primary-dark));
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.cb-header::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.cb-header::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 40%;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
}

.cb-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1;
}

.cb-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.cb-header-avatar img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
    padding: 2px;
}

.cb-header-meta h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.3px;
}

.cb-header-status {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.cb-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    animation: cb-pulse 2s ease-in-out infinite;
}

.cb-header-status span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.cb-header-actions {
    display: flex;
    gap: 6px;
    z-index: 1;
}

.cb-header-btn {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.2s;
    backdrop-filter: blur(10px);
}

.cb-header-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Zone de messages */
.cb-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: var(--cb-surface);
    scroll-behavior: smooth;
}

.cb-messages::-webkit-scrollbar { width: 5px; }
.cb-messages::-webkit-scrollbar-track { background: transparent; }
.cb-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* Bulles de messages */
.cb-msg {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    animation: cb-msg-in 0.35s ease-out;
}

@keyframes cb-msg-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cb-msg.user { flex-direction: row-reverse; }

.cb-msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--cb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    align-self: flex-end;
}

.cb-msg.user .cb-msg-avatar { background: #64748b; }

.cb-msg-content { max-width: 78%; }

.cb-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--cb-text);
    word-wrap: break-word;
}

.cb-msg.bot .cb-msg-bubble {
    background: #fff;
    border: 1px solid var(--cb-border);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cb-msg.user .cb-msg-bubble {
    background: linear-gradient(135deg, var(--cb-primary), var(--cb-primary-dark));
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(26, 86, 219, 0.25);
}

.cb-msg-time {
    font-size: 10px;
    color: var(--cb-text-muted);
    margin-top: 4px;
    padding: 0 4px;
}

.cb-msg.user .cb-msg-time { text-align: right; }

.cb-msg-bubble a { color: var(--cb-primary); text-decoration: underline; font-weight: 600; }
.cb-msg.user .cb-msg-bubble a { color: #fff; }
.cb-msg-bubble strong { font-weight: 700; }
.cb-msg-bubble ul, .cb-msg-bubble ol { margin: 6px 0 2px 16px; padding: 0; }
.cb-msg-bubble li { margin-bottom: 2px; }
.cb-msg-bubble code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* Indicateur de frappe */
.cb-typing {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    animation: cb-msg-in 0.3s ease-out;
}

.cb-typing-avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--cb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    align-self: flex-end;
}

.cb-typing-dots {
    background: #fff;
    border: 1px solid var(--cb-border);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    padding: 12px 18px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.cb-typing-dots span {
    width: 7px;
    height: 7px;
    background: var(--cb-primary);
    border-radius: 50%;
    opacity: 0.4;
    animation: cb-dot-bounce 1.4s ease-in-out infinite;
}

.cb-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.cb-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes cb-dot-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%            { transform: translateY(-6px); opacity: 1; }
}

/* Boutons d'action */
.cb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.cb-action-btn {
    border: 1.5px solid var(--cb-border);
    background: #fff;
    color: var(--cb-text);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--cb-font);
    display: flex;
    align-items: center;
    gap: 5px;
}

.cb-action-btn:hover {
    border-color: var(--cb-primary);
    color: var(--cb-primary);
    background: var(--cb-primary-light);
    transform: translateY(-1px);
}

/* Suggestions rapides */
.cb-suggestions {
    padding: 10px 16px 6px;
    background: #fff;
    border-top: 1px solid var(--cb-border);
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cb-suggestions::-webkit-scrollbar { display: none; }

.cb-suggestion {
    border: 1.5px solid var(--cb-border);
    background: var(--cb-surface);
    color: var(--cb-text-muted);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    font-family: var(--cb-font);
    flex-shrink: 0;
}

.cb-suggestion:hover {
    border-color: var(--cb-primary);
    color: var(--cb-primary);
    background: var(--cb-primary-light);
}

/* Zone de saisie */
.cb-input-area {
    padding: 12px 14px;
    background: #fff;
    border-top: 1px solid var(--cb-border);
    display: flex;
    gap: 8px;
    align-items: center;
}

.cb-input-field {
    flex: 1;
    border: 1.5px solid var(--cb-border);
    border-radius: 24px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-family: var(--cb-font);
    background: var(--cb-surface);
    color: var(--cb-text);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.cb-input-field:focus {
    border-color: var(--cb-primary);
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
    background: #fff;
}

.cb-input-field::placeholder { color: #a0aec0; }

.cb-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--cb-primary), var(--cb-primary-dark));
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.25s;
    flex-shrink: 0;
}

.cb-send-btn:hover { transform: scale(1.08); box-shadow: 0 4px 15px rgba(26, 86, 219, 0.35); }
.cb-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.cb-footer {
    text-align: center;
    padding: 6px;
    font-size: 10px;
    color: #b0bec5;
    background: #fff;
    border-top: 1px solid #f0f2f5;
}

.cb-footer a { color: var(--cb-primary); text-decoration: none; font-weight: 700; }

@media (max-width: 575.98px) {
    #n12a-chatbot-widget {
        right: 0; left: 0; bottom: 0; top: 0;
        width: 100%; max-height: 100vh; min-height: 100vh;
        border-radius: 0;
    }

    #n12a-chatbot-launcher { right: 12px; bottom: 12px; }
    .cb-header { padding: 14px 16px; border-radius: 0; }
}

/* ──────────────────────────────────────────────────────────
   15. WIDGET PRISE DE RENDEZ-VOUS
   ────────────────────────────────────────────────────────── */

/* Bouton flottant */
.appointment-floating-btn {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(26, 86, 219, 0.4);
    z-index: 999;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.appointment-floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(26, 86, 219, 0.6);
}

@keyframes pulse-appointment {
    0%, 100% { box-shadow: 0 4px 20px rgba(26, 86, 219, 0.4), 0 0 0 0 rgba(26, 86, 219, 0.7); }
    50%       { box-shadow: 0 4px 20px rgba(26, 86, 219, 0.4), 0 0 0 15px rgba(26, 86, 219, 0); }
}

.appointment-floating-btn.pulse { animation: pulse-appointment 2s infinite; }

/* Overlay */
.appointment-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.appointment-overlay.active { display: block; opacity: 1; }

/* Modal */
.appointment-modal {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: 0 10px 50px rgba(13, 27, 46, 0.4);
    z-index: 9999;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.appointment-modal.active {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Header modal */
.appointment-modal-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.appointment-modal-header::before {
    content: '';
    position: absolute;
    top: -50%; right: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse-header-widget 15s ease-in-out infinite;
}

@keyframes pulse-header-widget {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%       { transform: scale(1.1) rotate(180deg); }
}

.appointment-modal-header h2 {
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.appointment-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.appointment-close-btn:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }

/* Corps modal */
.appointment-modal-body {
    padding: 30px;
    max-height: calc(90vh - 90px);
    overflow-y: auto;
    background: var(--bg-primary);
}

.appointment-modal-body::-webkit-scrollbar { width: 8px; }
.appointment-modal-body::-webkit-scrollbar-track { background: var(--light); border-radius: 10px; }
.appointment-modal-body::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }

/* Barre de progression widget */
.step-progress-widget {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
    position: relative;
    padding: 0 10px;
}

.step-progress-widget::before {
    content: '';
    position: absolute;
    top: 20px; left: 0; right: 0;
    height: 3px;
    background: var(--border-color);
    z-index: 0;
}

.progress-line-widget {
    position: absolute;
    top: 20px; left: 0;
    height: 3px;
    background: var(--primary);
    transition: width 0.4s ease;
    z-index: 1;
}

.step-item-widget {
    position: relative;
    z-index: 2;
    text-align: center;
    flex: 1;
}

.step-circle-widget {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.step-item-widget.active .step-circle-widget {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(26, 86, 219, 0.12);
}

.step-item-widget.completed .step-circle-widget {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.step-label-widget {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.step-item-widget.active .step-label-widget { color: var(--primary); }

/* Étapes formulaire */
.form-step-widget { display: none; animation: fadeInUpWidget 0.4s ease; }
.form-step-widget.active { display: block; }

@keyframes fadeInUpWidget {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

.step-title-widget {
    font-family: 'Rubik', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
}

/* Cartes de services widget */
.service-grid-widget {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.service-card-widget {
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-primary);
    position: relative;
    overflow: hidden;
}

.service-card-widget::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.service-card-widget:hover { border-color: var(--primary); box-shadow: 0 4px 15px rgba(26, 86, 219, 0.15); transform: translateY(-2px); }
.service-card-widget:hover::before, .service-card-widget.selected::before { transform: scaleX(1); }
.service-card-widget.selected { border-color: var(--primary); background: linear-gradient(to bottom, rgba(26, 86, 219, 0.04), var(--bg-primary)); }

.service-icon-widget { font-size: 2rem; margin-bottom: 10px; display: block; }

.service-card-widget h3 {
    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.service-card-widget p { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 10px; line-height: 1.4; }
.service-duration-widget { color: var(--primary); font-weight: 700; font-size: 0.85rem; }

/* Créneaux horaires */
.time-slots-grid-widget {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.time-slot-widget {
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-primary);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.time-slot-widget:hover:not(.unavailable) { border-color: var(--primary); transform: translateY(-2px); }
.time-slot-widget.selected { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 3px 10px rgba(26, 86, 219, 0.3); }
.time-slot-widget.unavailable { opacity: 0.3; cursor: not-allowed; }

/* Récapitulatif widget */
.summary-box-widget {
    background: linear-gradient(135deg, rgba(26, 86, 219, 0.04) 0%, rgba(37, 99, 235, 0.04) 100%);
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
}

.summary-item-widget {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(26, 86, 219, 0.1);
}

.summary-item-widget:last-child { border-bottom: none; }
.summary-label-widget { font-weight: 700; color: var(--text-secondary); font-size: 0.9rem; }
.summary-value-widget { color: var(--text-primary); font-weight: 600; text-align: right; font-size: 0.9rem; }

/* Boutons navigation widget */
.btn-navigation-widget { display: flex; gap: 12px; margin-top: 25px; }

.btn-prev-widget, .btn-next-widget {
    flex: 1;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 6px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
}

.btn-prev-widget { background: var(--light); color: var(--text-primary); border: 2px solid var(--border-color); }
.btn-prev-widget:hover { background: var(--border-color); transform: translateX(-3px); }
.btn-next-widget { background: linear-gradient(to right, var(--primary), var(--secondary)); color: white; }
.btn-next-widget:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(26, 86, 219, 0.4); }
.btn-next-widget:disabled { opacity: 0.6; cursor: not-allowed; }

/* Succès widget */
.success-message-widget { text-align: center; padding: 40px 20px; }

.success-icon-widget {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, var(--success), #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2.5rem;
    color: white;
    animation: scaleInWidget 0.5s ease;
}

@keyframes scaleInWidget {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.success-message-widget h2 { font-family: 'Rubik', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--text-primary); margin-bottom: 15px; }
.success-message-widget p  { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; margin-bottom: 12px; }

/* Responsive widget */
@media (max-width: 768px) {
    .appointment-floating-btn { bottom: 80px; right: 20px; width: 55px; height: 55px; }
    .appointment-modal { width: 95%; max-height: 95vh; }
    .appointment-modal-header { padding: 20px; }
    .appointment-modal-header h2 { font-size: 1.4rem; }
    .appointment-modal-body { padding: 20px; }
    .service-grid-widget { grid-template-columns: 1fr; }
    .time-slots-grid-widget { grid-template-columns: repeat(3, 1fr); }
    .btn-navigation-widget { flex-direction: column; }
    .step-label-widget { font-size: 0.65rem; }
    .step-circle-widget { width: 35px; height: 35px; }
}

@media (max-width: 480px) {
    .appointment-modal-header h2 { font-size: 1.2rem; }
    .time-slots-grid-widget { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .time-slot-widget { padding: 10px; font-size: 0.85rem; }
}

/* ──────────────────────────────────────────────────────────
   16. ACCORDION (FAQ)
   ────────────────────────────────────────────────────────── */
.accordion-item {
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
    border-radius: 8px !important;
    overflow: hidden;
}

.accordion-button {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    padding: 18px 24px;
}

.accordion-button:not(.collapsed) {
    color: var(--primary);
    background-color: var(--bg-secondary);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(26, 86, 219, 0.15);
    border-color: var(--primary);
}

.accordion-body {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    padding: 16px 24px 24px;
    background-color: var(--bg-primary);
}

[data-theme="dark"] .accordion-button { background-color: var(--bg-primary); color: var(--text-primary); }
[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--bg-secondary); color: var(--primary); }
[data-theme="dark"] .accordion-body { background-color: var(--bg-primary); color: var(--text-secondary); }
[data-theme="dark"] .accordion-item { border-color: var(--border-color); }

@media (max-width: 576px) {
    .accordion-button { font-size: 0.95rem; padding: 14px 18px; }
}

/* ──────────────────────────────────────────────────────────
   17. TABLEAUX
   ────────────────────────────────────────────────────────── */
.table { color: var(--text-primary); }

.table > :not(caption) > * > * {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table thead.bg-primary th {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* ──────────────────────────────────────────────────────────
   18. LAYOUT — FAITS / CHIFFRES CLÉS
   ────────────────────────────────────────────────────────── */
@media (min-width: 991.98px) {
    .facts {
        position: relative;
        margin-top: -75px;
        z-index: 1;
    }
}

/* ──────────────────────────────────────────────────────────
   19. LAYOUT — FONDS D'EN-TÊTE PAR PAGE
   ────────────────────────────────────────────────────────── */
.bg-header {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-11.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerApropos {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-Apropos.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerPolitiques {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-politiques.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerMention {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-MentionLegal.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerServices {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-services.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerTarifs {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-tarifs.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerTemoignage {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-temoignageClient.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerFaq {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-Faq.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerWebdesign {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-webdesing.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerInfographie {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-infographie.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerRessources {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-ressourcesOutils.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerPortfolio {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-portfolio.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerContact {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-contact.jpg) center center no-repeat;
    background-size: cover;
}

.bg-headerDevis {
    background: linear-gradient(rgba(13, 27, 46, 0.72), rgba(13, 27, 46, 0.72)), url(../img/carousel-devis.jpg) center center no-repeat;
    background-size: cover;
}

/* Dark mode overrides pour les fonds d'en-tête */
[data-theme="dark"] .bg-header,
[data-theme="dark"] .bg-headerApropos,
[data-theme="dark"] .bg-headerPolitiques,
[data-theme="dark"] .bg-headerMention,
[data-theme="dark"] .bg-headerServices,
[data-theme="dark"] .bg-headerTarifs,
[data-theme="dark"] .bg-headerTemoignage,
[data-theme="dark"] .bg-headerFaq,
[data-theme="dark"] .bg-headerWebdesign,
[data-theme="dark"] .bg-headerInfographie,
[data-theme="dark"] .bg-headerRessources,
[data-theme="dark"] .bg-headerPortfolio,
[data-theme="dark"] .bg-headerContact,
[data-theme="dark"] .bg-headerDevis {
    filter: brightness(0.85);
}

/* ──────────────────────────────────────────────────────────
   20. LAYOUT — FOOTER
   ────────────────────────────────────────────────────────── */
.bg-dark {
    background-color: #0D1B2E !important;
}

[data-theme="dark"] .bg-dark {
    background-color: #0D1B2E !important;
}

.text-light {
    color: var(--text-secondary) !important;
}

@media (min-width: 767.98px) {
    .footer-about {
        margin-bottom: -75px;
    }
}

.link-animated a {
    transition: 0.3s;
    color: var(--text-secondary);
}

.link-animated a:hover {
    padding-left: 10px;
    color: var(--primary);
}

/* ──────────────────────────────────────────────────────────
   21. SECTIONS IA (Page spécifiques)
   ────────────────────────────────────────────────────────── */
.ia-section-highlight {
    background-color: var(--bg-secondary);
}

.ia-cta-section {
    background: linear-gradient(135deg, #0D1B2E 0%, #102255 50%, var(--primary) 100%);
}

.ia-result-box {
    background: var(--bg-secondary);
    border-left: 4px solid var(--primary);
    transition: transform 0.2s ease;
}

.ia-result-box:hover { transform: translateY(-2px); }

/* Service detail cards */
.service-detail-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: box-shadow 0.3s ease;
}

.service-detail-card:hover { box-shadow: 0 10px 30px var(--shadow-color); }

.service-detail-card h2 { font-size: 1.6rem; }

.service-detail-card h5 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-detail-card ul li { padding: 6px 0; }

.service-detail-card .badge {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px;
    letter-spacing: 0.3px;
}

.service-detail-card .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(26, 86, 219, 0.3);
}

[data-theme="dark"] .service-detail-card { background: var(--bg-secondary); border-color: var(--border-color); }

@media (max-width: 991px) {
    .service-detail-card { padding: 30px !important; }
    .ia-cta-section h1 { font-size: 1.5rem; }
}

@media (max-width: 576px) {
    .service-detail-card { padding: 20px !important; }
    .service-detail-card h2 { font-size: 1.3rem; }
    .ia-result-box { padding: 15px !important; }
}

/* ──────────────────────────────────────────────────────────
   22. WIDGET PRISE DE RDV — Page dédiée (rendez-vous.html)
   ────────────────────────────────────────────────────────── */
.appointment-container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-primary);
    border-radius: 15px;
    box-shadow: 0 0 45px rgba(13, 27, 46, 0.15);
    overflow: hidden;
}

.appointment-header {
    background: linear-gradient(to right, var(--primary), var(--secondary));
    color: white;
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.appointment-header::before {
    content: '';
    position: absolute;
    top: -50%; right: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse-header 15s ease-in-out infinite;
}

@keyframes pulse-header {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%       { transform: scale(1.1) rotate(180deg); }
}

.appointment-header h1 {
    font-family: 'Rubik', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.appointment-header p { font-size: 1.1rem; opacity: 0.95; position: relative; z-index: 1; }

.appointment-body { padding: 40px; background: var(--bg-primary); }

.step-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
    padding: 0 20px;
}

.step-progress::before {
    content: '';
    position: absolute;
    top: 25px; left: 0; right: 0;
    height: 3px;
    background: var(--border-color);
    z-index: 0;
}

.progress-line {
    position: absolute;
    top: 25px; left: 0;
    height: 3px;
    background: var(--primary);
    transition: width 0.4s ease;
    z-index: 1;
}

.step-item { position: relative; z-index: 2; text-align: center; flex: 1; }

.step-circle {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.step-item.active .step-circle {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(26, 86, 219, 0.1);
}

.step-item.completed .step-circle {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.step-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.step-item.active .step-label { color: var(--primary); }

.form-step { display: none; animation: fadeInUp 0.4s ease; }
.form-step.active { display: block; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.step-title { font-family: 'Rubik', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--text-primary); margin-bottom: 25px; }

.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; }

.service-card {
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-primary);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.service-card:hover { border-color: var(--primary); box-shadow: 0 5px 20px rgba(26, 86, 219, 0.15); transform: translateY(-3px); }
.service-card:hover::before, .service-card.selected::before { transform: scaleX(1); }
.service-card.selected { border-color: var(--primary); background: linear-gradient(to bottom, rgba(26, 86, 219, 0.04), var(--bg-primary)); }
.service-card h3 { font-family: 'Rubik', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.service-card p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 12px; line-height: 1.5; }
.service-duration { color: var(--primary); font-weight: 700; font-size: 0.9rem; }

.time-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-top: 20px; }

.time-slot { padding: 15px; border: 2px solid var(--border-color); border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: var(--bg-primary); font-weight: 600; color: var(--text-primary); }
.time-slot:hover:not(.unavailable) { border-color: var(--primary); transform: translateY(-2px); }
.time-slot.selected { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 4px 12px rgba(26, 86, 219, 0.3); }
.time-slot.unavailable { opacity: 0.3; cursor: not-allowed; }

.appointment-form-label { font-weight: 600; color: var(--text-primary); margin-bottom: 8px; display: block; }
.appointment-form-control { width: 100%; border: 2px solid var(--border-color); border-radius: 8px; padding: 12px 16px; font-size: 1rem; transition: all 0.3s ease; background: var(--bg-primary); color: var(--text-primary); }
.appointment-form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(26, 86, 219, 0.15); outline: none; }

.summary-box {
    background: linear-gradient(135deg, rgba(26, 86, 219, 0.04) 0%, rgba(37, 99, 235, 0.04) 100%);
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
}

.summary-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(26, 86, 219, 0.1); }
.summary-item:last-child { border-bottom: none; }
.summary-label { font-weight: 700; color: var(--text-secondary); }
.summary-value { color: var(--text-primary); font-weight: 600; text-align: right; }

.btn-navigation { display: flex; gap: 15px; margin-top: 30px; }

.btn-prev, .btn-next {
    flex: 1;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 6px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-prev { background: var(--light); color: var(--text-primary); border: 2px solid var(--border-color); }
.btn-prev:hover { background: var(--border-color); transform: translateX(-3px); }
.btn-next { background: linear-gradient(to right, var(--primary), var(--secondary)); color: white; }
.btn-next:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(26, 86, 219, 0.4); }

.success-message { text-align: center; padding: 60px 30px; }

.success-icon {
    width: 100px; height: 100px;
    background: linear-gradient(135deg, var(--success), #20c997);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 3rem;
    color: white;
    animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.success-message h2 { font-family: 'Rubik', sans-serif; font-size: 2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; }
.success-message p  { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.8; margin-bottom: 15px; }

@media (max-width: 768px) {
    .appointment-header h1 { font-size: 1.8rem; }
    .appointment-body { padding: 25px; }
    .service-grid { grid-template-columns: 1fr; }
    .time-slots-grid { grid-template-columns: repeat(3, 1fr); }
    .btn-navigation { flex-direction: column; }
    .step-progress { padding: 0; }
    .step-label { font-size: 0.7rem; }
    .step-circle { width: 40px; height: 40px; font-size: 1rem; }
    .step-title { font-size: 1.5rem; }
}

@media (max-width: 576px) {
    .appointment-header { padding: 30px 20px; }
    .appointment-header h1 { font-size: 1.5rem; }
    .appointment-body { padding: 20px 15px; }
}

/* ──────────────────────────────────────────────────────────
   23. MISCELLANEOUS
   ────────────────────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    display: none;
    left: 25px;
    bottom: 25px;
    z-index: 99;
}

.container-fluid {
    background-color: var(--bg-primary);
}

.bg-light {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .bg-white  { background-color: var(--bg-primary) !important; }
[data-theme="dark"] .bg-light  { background-color: var(--bg-secondary) !important; }
[data-theme="dark"] .text-dark { color: var(--text-primary) !important; }

[data-theme="dark"] .border-bottom { border-color: var(--border-color) !important; }
[data-theme="dark"] .shadow { box-shadow: 0 0.5rem 1rem var(--shadow-color) !important; }

/* Topbar */
.topbar-inner {
    height: 45px;
}

/* Section intro (centré, largeur contrainte) */
.section-intro {
    max-width: 700px;
    margin: 0 auto;
}

/* CTA box centré */
.cta-box {
    max-width: 700px;
    margin: 0 auto;
}

/* Images de services */
.service-img {
    object-fit: cover;
    height: 100%;
    min-height: 300px;
}

/* Bande copyright footer */
.footer-copyright {
    background: #060F1C;
}

.copyright-inner {
    height: 75px;
}

/* Section intro : largeurs contraintes réutilisables */
.section-intro-sm  { max-width: 600px; margin: 0 auto; }
.section-intro-md  { max-width: 650px; margin: 0 auto; }

/* Carousel caption inner */
.carousel-caption-inner { max-width: 900px; }

/* Chiffres clés — Facts */
.fact-card { height: 150px; }
.fact-icon  { width: 60px; height: 60px; flex-shrink: 0; }

/* Icônes résultats secteur */
.result-icon { width: 50px; height: 50px; flex-shrink: 0; }

/* Avatars témoignages — voir règle consolidée en fin de fichier */

/* Section fond Bleu Nuit */
.section-dark {
    background: var(--dark);
}

/* Cartes sécurité (fond sombre semi-transparent) */
.security-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.security-icon { width: 60px; height: 60px; }

/* Tech badges */
.tech-badge {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tech-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color) !important;
}

/* ──────────────────────────────────────────────────────────
   24. PAGES SPÉCIFIQUES — CSS extrait des blocs <style>
   ────────────────────────────────────────────────────────── */

/* ── offre-audit.html ── */
.deliverable-card  { border-left: 4px solid var(--primary); }
.deliverable-icon  { width: 55px; height: 55px; flex-shrink: 0; }
.card-bonus        { border-left-color: var(--success) !important; background: #f0fff4; }
.step-number       { width: 50px; height: 50px; border-radius: 50%; font-size: 1.4rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.guarantee-badge   { border: 2px solid var(--success); border-radius: 12px; }
.score-bar         { height: 12px; border-radius: 6px; background: #e9ecef; overflow: hidden; }
.score-fill        { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--success), #20c997); transition: width 1s ease; }
.faq-audit .accordion-button:not(.collapsed) { background: rgba(26, 86, 219, 0.08); color: var(--primary); }

/* ── aPropos.html ── */
.about-img         { min-height: 500px; }
.about-feature-img { min-height: 350px; }
.img-cover         { object-fit: cover; }

/* ── faq.html & tarifs.html ── */
.card-featured    { z-index: 1; }
.price-label      { font-size: 16px; line-height: 40px; }
.price-suffix     { font-size: 14px; }
.price-free       { font-size: 36px; }
.cta-gradient     { background: linear-gradient(135deg, #091E3E 0%, #0a2a5e 50%, #06A3DA 100%); }

/* ═══ PLACEHOLDER: agent-faq-tarifs ═══ */

/* ── contact.html / contact.php ── */
.contact-textarea {
    height: 150px;
}

/* ═══ PLACEHOLDER: agent-contact ═══ */

/* ═══ PLACEHOLDER: agent-webdesign-infographie ═══ */

/* ── cas-concret.html & partenaires.html ── */
.pdf-icon  { width: 50px; height: 50px; min-width: 50px; flex-shrink: 0; }
.tool-card { transition: transform .2s, box-shadow .2s; cursor: default; }
.tool-card:hover { transform: translateY(-6px); box-shadow: 0 14px 35px rgba(0,0,0,.13) !important; }
.tool-logo { width: 64px; height: 64px; object-fit: contain; }
.tool-logo-placeholder { width: 64px; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; }
.tool-badge { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.category-label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid; padding-bottom: .4rem; display: inline-block; }
.why-card { border-top: 3px solid var(--bs-primary); }

/* ── partenaires.html extras ── */
.bg-night         { background: var(--dark) !important; }
.section-intro-lg { max-width: 650px; }

/* ═══ PLACEHOLDER: agent-cas-partenaires ═══ */

/* ── blog.html ── */
.blog-card { transition: transform .2s, box-shadow .2s; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,.12) !important; }
.blog-category { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.blog-thumb { height: 200px; object-fit: cover; width: 100%; }
.blog-thumb-placeholder { height: 200px; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.tag-filter .btn { border-radius: 50px; font-size: .85rem; }
.reading-time { font-size: .8rem; }

/* ── ressourcesOutils.html ── */
.cta-gradient-ressources { background: linear-gradient(135deg, #091E3E 0%, #0a2a5e 50%, #06A3DA 100%); }
.section-intro  { max-width: 600px; }
.text-intro     { max-width: 700px; margin: 0 auto; }
.icon-sm        { width: 50px; height: 50px; min-width: 50px; flex-shrink: 0; }
.icon-md        { width: 60px; height: 60px; flex-shrink: 0; }

/* ═══ PLACEHOLDER: agent-temoignages-blog-ressources ═══ */

/* ═══ PLACEHOLDER: agent-legal ═══ */

/* ── devis.html ── */
.devis-section { padding: 60px 0; }
.devis-form-container { max-width: 900px; margin: 0 auto; padding: 0 15px; }
.devis-step { display: none; }
.devis-step.active { display: block; animation: fadeInStep 0.4s ease; }
@keyframes fadeInStep { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.step-indicator { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; }
.step-dot { width: 12px; height: 12px; border-radius: 50%; background: #dee2e6; transition: all 0.3s; cursor: pointer; }
.step-dot.active { background: var(--primary); transform: scale(1.3); }
.step-dot.completed { background: var(--primary); opacity: 0.6; }
.step-label { text-align: center; margin-bottom: 30px; }
.step-label h3 { color: var(--primary); font-weight: 700; margin-bottom: 5px; }
.step-label p { color: #6c757d; font-size: 15px; }
.service-option { border: 2px solid #e9ecef; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; background: #fff; height: 100%; }
.service-option:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(26,86,219,.12); }
.service-option.selected { border-color: var(--primary); background: rgba(26,86,219,.04); box-shadow: 0 4px 15px rgba(26,86,219,.15); }
.service-option.selected .service-check { background: var(--primary); color: #fff; }
.service-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #dee2e6; display: flex; align-items: center; justify-content: center; transition: all 0.3s; font-size: 14px; }
.service-option .service-icon { font-size: 28px; color: var(--primary); margin-bottom: 10px; }
.service-option h5 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.service-option p { font-size: 13px; color: #6c757d; margin-bottom: 0; }
.service-option .price-tag { font-size: 13px; font-weight: 600; color: var(--primary); margin-top: 8px; }
.ia-options-group { display: none; margin-top: 20px; padding: 20px; background: linear-gradient(135deg, rgba(26,86,219,.03) 0%, rgba(26,86,219,.08) 100%); border-radius: 12px; border: 1px dashed rgba(26,86,219,.3); }
.ia-options-group.visible { display: block; animation: fadeInStep 0.4s ease; }
.ia-options-group h6 { font-weight: 700; color: var(--primary); margin-bottom: 15px; }
.ia-sub-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.ia-sub-option:last-child { border-bottom: none; }
.ia-sub-option input[type="checkbox"] { margin-top: 3px; accent-color: var(--primary); width: 18px; height: 18px; flex-shrink: 0; }
.ia-sub-option label { cursor: pointer; font-size: 14px; }
.ia-sub-option label strong { display: block; margin-bottom: 2px; }
.ia-sub-option label span { color: #6c757d; font-size: 13px; }
.budget-option { border: 2px solid #e9ecef; border-radius: 10px; padding: 15px 20px; cursor: pointer; transition: all 0.3s; text-align: center; }
.budget-option:hover { border-color: var(--primary); }
.budget-option.selected { border-color: var(--primary); background: rgba(26,86,219,.04); }
.budget-option h6 { font-weight: 700; margin-bottom: 3px; }
.budget-option small { color: #6c757d; }
.devis-nav { display: flex; justify-content: space-between; margin-top: 30px; gap: 15px; }
.btn-devis-prev { background: transparent; border: 2px solid #dee2e6; color: #6c757d; padding: 12px 30px; border-radius: 50px; font-weight: 600; cursor: pointer; transition: all 0.3s; }
.btn-devis-prev:hover { border-color: #adb5bd; color: #333; }
.btn-devis-next { background: var(--primary); border: none; color: #fff; padding: 12px 30px; border-radius: 50px; font-weight: 600; cursor: pointer; transition: all 0.3s; margin-left: auto; }
.btn-devis-next:hover { background: #1446b8; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(26,86,219,.3); }
.btn-devis-submit { background: linear-gradient(135deg, var(--primary), #1446b8); border: none; color: #fff; padding: 15px 40px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: all 0.3s; font-size: 16px; width: 100%; }
.btn-devis-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(26,86,219,.35); }
.recap-card { background: #f8f9fa; border-radius: 12px; padding: 20px; margin-bottom: 15px; }
.recap-card h6 { font-weight: 700; color: var(--primary); margin-bottom: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
.recap-item { font-size: 14px; padding: 4px 0; }
.recap-item i { color: var(--primary); margin-right: 8px; width: 16px; }
.timeline-option { border: 2px solid #e9ecef; border-radius: 10px; padding: 12px 18px; cursor: pointer; transition: all 0.3s; text-align: center; }
.timeline-option:hover { border-color: var(--primary); }
.timeline-option.selected { border-color: var(--primary); background: rgba(26,86,219,.04); }
.devis-success { display: none; text-align: center; padding: 60px 20px; }
.devis-success.visible { display: block; animation: fadeInStep 0.5s ease; }
.devis-success i { font-size: 64px; color: #28a745; margin-bottom: 20px; }
.devis-success h2 { font-weight: 800; margin-bottom: 10px; }
@media (max-width: 768px) { .service-option { padding: 15px; } .service-option .service-icon { font-size: 22px; } }
/* Inline style classes for devis forms */
.section-intro-xl { max-width: 700px; }
.category-header   { letter-spacing: 1px; color: #333; }
.price-strike      { text-decoration: line-through; color: #999; }
.form-input-tall   { height: 55px; }

/* ── témoignages ── */
.testimonial-avatar {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px;
    max-width: 60px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

/* ── index.php extras ── */
.carousel-caption-inner { max-width: 900px; }
.fact-box { height: 150px; }
.audit-field-error { display:none; color:#e74c3c; font-size:0.82em; margin-top:5px; }
.audit-field-error.visible { display:block; }
input.audit-invalid { border-color:#e74c3c !important; box-shadow:0 0 0 2px rgba(231,76,60,.15) !important; }