/* File: /assets/css/components.css */
/* ─────────────────────────────────────────────────────────────
   COMPOSANTS CSS — Won Marketing
   Tous les éléments d'interface réutilisables.
   Dépend de variables.css et animations.css.
───────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   BOUTONS
═══════════════════════════════════════════════════════════ */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--sp-2);
    padding:         0.75rem 1.75rem;
    font-family:     var(--font-sans);
    font-size:       var(--text-base);
    font-weight:     var(--fw-semibold);
    line-height:     1;
    letter-spacing:  var(--ls-tight);
    border:          2px solid transparent;
    border-radius:   var(--radius-full);
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    position:        relative;
    overflow:        hidden;
    transition:
        background   var(--transition-base),
        color        var(--transition-base),
        border-color var(--transition-base),
        box-shadow   var(--transition-base),
        transform    var(--transition-fast);
    -webkit-user-select: none;
    user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn svg    { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* Primaire */
.btn-primary {
    background:  var(--gradient-brand);
    color:       #fff;
    box-shadow:  var(--shadow-brand);
}
.btn-primary:hover {
    box-shadow:  var(--shadow-brand-lg);
    transform:   translateY(-2px);
    filter:      brightness(1.08);
}

/* Secondaire (outline) */
.btn-secondary {
    background:   transparent;
    color:        var(--clr-primary-400);
    border-color: var(--clr-primary-400);
}
.btn-secondary:hover {
    background:   var(--clr-primary-400);
    color:        #fff;
    box-shadow:   var(--shadow-brand);
    transform:    translateY(-2px);
}

/* Fantôme */
.btn-ghost {
    background:   transparent;
    color:        var(--clr-text-secondary);
    border-color: var(--clr-border);
}
.btn-ghost:hover {
    background:   var(--clr-bg-muted);
    color:        var(--clr-text-primary);
    border-color: var(--clr-border-focus);
}

/* Blanc (sur fond sombre) */
.btn-white {
    background:  #fff;
    color:       var(--clr-primary-500);
    box-shadow:  var(--shadow-md);
}
.btn-white:hover {
    box-shadow:  var(--shadow-lg);
    transform:   translateY(-2px);
}

/* Tailles */
.btn-sm  { padding: 0.5rem 1.25rem;  font-size: var(--text-sm); }
.btn-lg  { padding: 1rem 2.25rem;    font-size: var(--text-md); }
.btn-xl  { padding: 1.125rem 2.75rem; font-size: var(--text-lg); }
.btn-icon{
    padding: 0.7rem;
    border-radius: var(--radius-full);
    aspect-ratio: 1;
}

/* Désactivé */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor:  not-allowed;
    pointer-events: none;
}

/* Loading spinner */
.btn-loading {
    pointer-events: none;
    opacity: 0.8;
}
.btn-loading::after {
    content:      '';
    width:        1em;
    height:       1em;
    border:       2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius:50%;
    animation:    spinSlow 0.7s linear infinite;
    margin-left:  var(--sp-2);
}

/* ═══════════════════════════════════════════════════════════
   BADGES & LABELS
═══════════════════════════════════════════════════════════ */
.badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--sp-1);
    padding:       0.25rem 0.75rem;
    font-size:     var(--text-xs);
    font-weight:   var(--fw-semibold);
    letter-spacing:var(--ls-wide);
    text-transform:uppercase;
    border-radius: var(--radius-full);
    white-space:   nowrap;
}
.badge-primary {
    background: rgba(79,110,247,.12);
    color:      var(--clr-primary-400);
    border:     1px solid rgba(79,110,247,.25);
}
.badge-accent {
    background: rgba(139,92,246,.12);
    color:      var(--clr-accent-400);
    border:     1px solid rgba(139,92,246,.25);
}
.badge-gradient {
    background: var(--gradient-brand);
    color:      #fff;
    border:     none;
}
.badge-success {
    background: rgba(16,185,129,.12);
    color:      var(--clr-success);
    border:     1px solid rgba(16,185,129,.25);
}
.badge-dot::before {
    content:       '';
    display:       inline-block;
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    currentColor;
    animation:     pulse 2s ease-in-out infinite;
}

/* Label de section (au-dessus des titres) */
.section-label {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-2);
    padding:        0.35rem 1rem;
    background:     var(--glass-bg);
    backdrop-filter:var(--glass-blur);
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-full);
    font-size:      var(--text-xs);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color:          var(--clr-primary-400);
    box-shadow:     var(--glass-shadow);
}

/* ═══════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════ */
.card {
    background:    var(--clr-bg-card);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    padding:       var(--sp-8);
    transition:
        box-shadow  var(--transition-base),
        transform   var(--transition-base),
        border-color var(--transition-base);
}
.card:hover {
    box-shadow:   var(--shadow-lg);
    border-color: var(--clr-border-focus);
    transform:    translateY(-4px);
}

/* Card glass */
.card-glass {
    background:     var(--glass-bg);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border:         1px solid var(--glass-border);
    border-radius:  var(--radius-xl);
    padding:        var(--sp-8);
    box-shadow:     var(--glass-shadow);
}

/* Card service (icône + titre + texte) */
.card-service {
    background:    var(--clr-bg-card);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    padding:       var(--sp-8);
    display:       flex;
    flex-direction:column;
    gap:           var(--sp-4);
    transition:
        box-shadow   var(--transition-base),
        transform    var(--transition-base),
        border-color var(--transition-base);
    position: relative;
    overflow: hidden;
}
.card-service::before {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    var(--gradient-subtle);
    opacity:       0;
    transition:    opacity var(--transition-base);
    border-radius: inherit;
}
.card-service:hover {
    box-shadow:   var(--shadow-brand);
    border-color: rgba(79,110,247,.35);
    transform:    translateY(-6px);
}
.card-service:hover::before { opacity: 1; }

.card-service__icon {
    width:          52px;
    height:         52px;
    border-radius:  var(--radius-lg);
    background:     var(--gradient-brand);
    display:        flex;
    align-items:    center;
    justify-content:center;
    color:          #fff;
    font-size:      1.4rem;
    flex-shrink:    0;
    position:       relative;
    z-index:        1;
    box-shadow:     var(--shadow-brand);
    transition:     transform var(--transition-bounce);
}
.card-service:hover .card-service__icon {
    transform: rotate(-5deg) scale(1.08);
}

.card-service__title {
    font-size:   var(--text-lg);
    font-weight: var(--fw-semibold);
    color:       var(--clr-text-primary);
    position:    relative;
    z-index:     1;
}
.card-service__text {
    font-size:   var(--text-sm);
    color:       var(--clr-text-muted);
    line-height: var(--lh-relaxed);
    position:    relative;
    z-index:     1;
}
.card-service__link {
    display:     inline-flex;
    align-items: center;
    gap:         var(--sp-1);
    font-size:   var(--text-sm);
    font-weight: var(--fw-semibold);
    color:       var(--clr-primary-400);
    text-decoration: none;
    margin-top:  auto;
    position:    relative;
    z-index:     1;
    transition:  gap var(--transition-fast);
}
.card-service__link:hover { gap: var(--sp-2); }

/* Card portfolio */
.card-portfolio {
    border-radius: var(--radius-xl);
    overflow:      hidden;
    background:    var(--clr-bg-card);
    border:        1px solid var(--clr-border);
    transition:
        box-shadow  var(--transition-base),
        transform   var(--transition-base);
}
.card-portfolio:hover {
    box-shadow: var(--shadow-xl);
    transform:  translateY(-6px);
}
.card-portfolio__image {
    width:      100%;
    aspect-ratio:16/9;
    object-fit: cover;
    display:    block;
    transition: transform 0.5s var(--ease-out-expo);
}
.card-portfolio:hover .card-portfolio__image {
    transform: scale(1.04);
}
.card-portfolio__body {
    padding: var(--sp-6);
}
.card-portfolio__tag {
    font-size:     var(--text-xs);
    font-weight:   var(--fw-semibold);
    color:         var(--clr-primary-400);
    text-transform:uppercase;
    letter-spacing:var(--ls-wide);
    margin-bottom: var(--sp-2);
}
.card-portfolio__title {
    font-size:     var(--text-lg);
    font-weight:   var(--fw-semibold);
    color:         var(--clr-text-primary);
    margin-bottom: var(--sp-2);
}
.card-portfolio__desc {
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
    line-height:var(--lh-relaxed);
}

/* Card témoignage */
.card-testimonial {
    background:    var(--clr-bg-card);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    padding:       var(--sp-8);
    position:      relative;
}
.card-testimonial::before {
    content:     '"';
    position:    absolute;
    top:         var(--sp-4);
    right:       var(--sp-6);
    font-size:   5rem;
    line-height: 1;
    color:       var(--clr-primary-400);
    opacity:     0.12;
    font-family: Georgia, serif;
}
.card-testimonial__text {
    font-size:   var(--text-md);
    color:       var(--clr-text-secondary);
    line-height: var(--lh-relaxed);
    font-style:  italic;
    margin-bottom:var(--sp-6);
}
.card-testimonial__author {
    display:    flex;
    align-items:center;
    gap:        var(--sp-3);
}
.card-testimonial__avatar {
    width:         48px;
    height:        48px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid var(--clr-primary-400);
}
.card-testimonial__avatar-placeholder {
    width:          48px;
    height:         48px;
    border-radius:  50%;
    background:     var(--gradient-brand);
    display:        flex;
    align-items:    center;
    justify-content:center;
    color:          #fff;
    font-weight:    var(--fw-bold);
    font-size:      var(--text-md);
    flex-shrink:    0;
}
.card-testimonial__name {
    font-weight: var(--fw-semibold);
    color:       var(--clr-text-primary);
    font-size:   var(--text-base);
}
.card-testimonial__role {
    font-size: var(--text-sm);
    color:     var(--clr-text-muted);
}

/* Stars */
.stars {
    display:      flex;
    gap:          2px;
    margin-bottom:var(--sp-4);
    color:        #F59E0B;
    font-size:    1rem;
}

/* ═══════════════════════════════════════════════════════════
   FORMULAIRES
═══════════════════════════════════════════════════════════ */
.form-group {
    display:       flex;
    flex-direction:column;
    gap:           var(--sp-2);
}
.form-label {
    font-size:   var(--text-sm);
    font-weight: var(--fw-medium);
    color:       var(--clr-text-secondary);
}
.form-label span { color: var(--clr-error); margin-left: 2px; }

.form-control {
    width:         100%;
    padding:       0.75rem 1rem;
    background:    var(--clr-bg-card);
    border:        1.5px solid var(--clr-border);
    border-radius: var(--radius-md);
    font-family:   var(--font-sans);
    font-size:     var(--text-base);
    color:         var(--clr-text-primary);
    transition:
        border-color var(--transition-fast),
        box-shadow   var(--transition-fast),
        background   var(--transition-fast);
    outline:       none;
    -webkit-appearance: none;
    appearance:    none;
}
.form-control::placeholder { color: var(--clr-text-muted); }
.form-control:hover  { border-color: var(--clr-text-muted); }
.form-control:focus  {
    border-color: var(--clr-border-focus);
    box-shadow:   0 0 0 3px rgba(79,110,247,.15);
    background:   var(--clr-bg);
}
.form-control:invalid:not(:placeholder-shown) {
    border-color: var(--clr-error);
    box-shadow:   0 0 0 3px rgba(239,68,68,.12);
}
textarea.form-control {
    resize:     vertical;
    min-height: 140px;
    line-height:var(--lh-relaxed);
}
select.form-control {
    cursor:           pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A99' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-hint {
    font-size: var(--text-xs);
    color:     var(--clr-text-muted);
}
.form-error {
    font-size: var(--text-xs);
    color:     var(--clr-error);
    display:   none;
}
.form-group.has-error .form-error   { display: block; }
.form-group.has-error .form-control { border-color: var(--clr-error); }
.form-group.is-valid  .form-control { border-color: var(--clr-success); }

/* Checkbox & radio custom */
.form-check {
    display:    flex;
    align-items:center;
    gap:        var(--sp-3);
    cursor:     pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width:         18px;
    height:        18px;
    border:        2px solid var(--clr-border);
    border-radius: 4px;
    background:    var(--clr-bg-card);
    cursor:        pointer;
    transition:    all var(--transition-fast);
    accent-color:  var(--clr-primary-400);
    flex-shrink:   0;
}
.form-check input[type="radio"] { border-radius: 50%; }

/* ═══════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════ */
.navbar {
    position:       fixed;
    top:            0;
    left:           0;
    right:          0;
    z-index:        var(--z-sticky);
    height:         var(--navbar-height);
    background:     var(--navbar-bg);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom:  1px solid var(--navbar-border);
    box-shadow:     var(--navbar-shadow);
    transition:
        height      var(--transition-base),
        background  var(--transition-base),
        box-shadow  var(--transition-base);
}
.navbar.scrolled {
    height:    var(--navbar-height-scroll);
    box-shadow:var(--shadow-md);
}
.navbar__container {
    max-width:  var(--container-max);
    margin:     0 auto;
    padding:    0 var(--container-px);
    height:     100%;
    display:    flex;
    align-items:center;
    justify-content:space-between;
    gap:        var(--sp-8);
}
.navbar__logo {
    display:    flex;
    align-items:center;
    gap:        var(--sp-3);
    text-decoration:none;
    flex-shrink:0;
}
.navbar__logo img {
    height: 36px;
    width:  auto;
    transition: transform var(--transition-base);
}
.navbar__logo:hover img { transform: scale(1.04); }
.navbar__logo-text {
    font-size:   var(--text-lg);
    font-weight: var(--fw-bold);
    color:       var(--clr-text-primary);
    letter-spacing: var(--ls-tight);
}

/* Menu desktop */
.navbar__menu {
    display:    flex;
    align-items:center;
    gap:        var(--sp-1);
    list-style: none;
    margin:     0;
    padding:    0;
}
.navbar__link {
    display:        block;
    padding:        var(--sp-2) var(--sp-3);
    font-size:      var(--text-sm);
    font-weight:    var(--fw-medium);
    color:          var(--clr-text-secondary);
    text-decoration:none;
    border-radius:  var(--radius-md);
    transition:
        color      var(--transition-fast),
        background var(--transition-fast);
    white-space:    nowrap;
}
.navbar__link:hover,
.navbar__link.active {
    color:      var(--clr-primary-400);
    background: rgba(79,110,247,.08);
}

/* Actions droite (thème + CTA) */
.navbar__actions {
    display:    flex;
    align-items:center;
    gap:        var(--sp-3);
    flex-shrink:0;
}

/* Bouton thème */
.theme-toggle {
    width:          38px;
    height:         38px;
    border-radius:  var(--radius-full);
    border:         1.5px solid var(--clr-border);
    background:     var(--clr-bg-card);
    color:          var(--clr-text-secondary);
    cursor:         pointer;
    display:        flex;
    align-items:    center;
    justify-content:center;
    transition:
        background   var(--transition-fast),
        border-color var(--transition-fast),
        color        var(--transition-fast),
        transform    var(--transition-fast);
    font-size:      1.05rem;
}
.theme-toggle:hover {
    background:   var(--clr-bg-muted);
    border-color: var(--clr-border-focus);
    color:        var(--clr-primary-400);
    transform:    rotate(20deg);
}

/* Burger mobile */
.navbar__burger {
    display:        none;
    flex-direction: column;
    justify-content:center;
    align-items:    center;
    gap:            5px;
    width:          38px;
    height:         38px;
    background:     none;
    border:         1.5px solid var(--clr-border);
    border-radius:  var(--radius-md);
    cursor:         pointer;
    padding:        0;
    transition:     border-color var(--transition-fast);
}
.navbar__burger span {
    display:       block;
    width:         20px;
    height:        2px;
    background:    var(--clr-text-secondary);
    border-radius: 2px;
    transition:
        transform  var(--transition-base),
        opacity    var(--transition-base),
        width      var(--transition-base);
}
.navbar__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__burger.open span:nth-child(2) { opacity: 0; width: 0; }
.navbar__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile */
.navbar__mobile {
    position:       fixed;
    top:            var(--navbar-height);
    left:           0;
    right:          0;
    bottom:         0;
    background:     var(--clr-bg);
    z-index:        calc(var(--z-sticky) - 1);
    padding:        var(--sp-6) var(--container-px);
    transform:      translateX(100%);
    transition:     transform var(--transition-smooth);
    overflow-y:     auto;
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-4);
}
.navbar__mobile.open { transform: translateX(0); }
.navbar__mobile-link {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    padding:        var(--sp-4) 0;
    font-size:      var(--text-xl);
    font-weight:    var(--fw-semibold);
    color:          var(--clr-text-primary);
    text-decoration:none;
    border-bottom:  1px solid var(--clr-border-light);
    transition:     color var(--transition-fast);
}
.navbar__mobile-link:hover { color: var(--clr-primary-400); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.footer {
    background:   var(--clr-bg-alt);
    border-top:   1px solid var(--clr-border);
    padding-top:  var(--sp-20);
}
.footer__grid {
    display:               grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap:                   var(--sp-12);
    max-width:             var(--container-max);
    margin:                0 auto;
    padding:               0 var(--container-px);
}
.footer__brand p {
    font-size:   var(--text-sm);
    color:       var(--clr-text-muted);
    line-height: var(--lh-relaxed);
    margin-top:  var(--sp-4);
    max-width:   28ch;
}
.footer__logo { height: 32px; width: auto; }
.footer__heading {
    font-size:     var(--text-sm);
    font-weight:   var(--fw-semibold);
    color:         var(--clr-text-primary);
    text-transform:uppercase;
    letter-spacing:var(--ls-wider);
    margin-bottom: var(--sp-5);
}
.footer__links {
    list-style:    none;
    padding:       0;
    margin:        0;
    display:       flex;
    flex-direction:column;
    gap:           var(--sp-3);
}
.footer__link {
    font-size:      var(--text-sm);
    color:          var(--clr-text-muted);
    text-decoration:none;
    transition:     color var(--transition-fast);
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-2);
}
.footer__link:hover { color: var(--clr-primary-400); }
.footer__social {
    display:    flex;
    gap:        var(--sp-3);
    margin-top: var(--sp-5);
}
.footer__social-link {
    width:          36px;
    height:         36px;
    border-radius:  var(--radius-full);
    border:         1.5px solid var(--clr-border);
    color:          var(--clr-text-muted);
    display:        flex;
    align-items:    center;
    justify-content:center;
    text-decoration:none;
    font-size:      0.95rem;
    transition:
        color        var(--transition-fast),
        border-color var(--transition-fast),
        background   var(--transition-fast),
        transform    var(--transition-fast);
}
.footer__social-link:hover {
    color:        var(--clr-primary-400);
    border-color: var(--clr-primary-400);
    background:   rgba(79,110,247,.08);
    transform:    translateY(-2px);
}
.footer__bottom {
    border-top:     1px solid var(--clr-border);
    padding:        var(--sp-6) var(--container-px);
    max-width:      var(--container-max);
    margin:         var(--sp-12) auto 0;
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    gap:            var(--sp-4);
    flex-wrap:      wrap;
}
.footer__copy {
    font-size: var(--text-sm);
    color:     var(--clr-text-muted);
}
.footer__bottom-links {
    display:   flex;
    gap:       var(--sp-5);
    list-style:none;
    padding:   0;
    margin:    0;
}
.footer__bottom-link {
    font-size:      var(--text-xs);
    color:          var(--clr-text-muted);
    text-decoration:none;
    transition:     color var(--transition-fast);
}
.footer__bottom-link:hover { color: var(--clr-primary-400); }

/* ═══════════════════════════════════════════════════════════
   SECTION — CONTENEUR GÉNÉRIQUE
═══════════════════════════════════════════════════════════ */
.section {
    padding: var(--section-py) 0;
}
.section-alt {
    padding:    var(--section-py) 0;
    background: var(--clr-bg-alt);
}
.container {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--container-px);
}
.section-header {
    text-align:    center;
    margin-bottom: var(--sp-16);
}
.section-header h2 {
    font-size:     var(--text-4xl);
    font-weight:   var(--fw-bold);
    color:         var(--clr-text-primary);
    letter-spacing:var(--ls-tight);
    line-height:   var(--lh-tight);
    margin:        var(--sp-4) 0 var(--sp-5);
}
.section-header p {
    font-size:  var(--text-lg);
    color:      var(--clr-text-muted);
    max-width:  56ch;
    margin:     0 auto;
    line-height:var(--lh-relaxed);
}

/* Grilles génériques */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }

/* ═══════════════════════════════════════════════════════════
   BOUTONS FLOTTANTS
═══════════════════════════════════════════════════════════ */
.floating-buttons {
    position:      fixed;
    bottom:        var(--sp-6);
    right:         var(--sp-6);
    display:       flex;
    flex-direction:column;
    gap:           var(--sp-3);
    z-index:       var(--z-toast);
}
.floating-btn {
    width:          52px;
    height:         52px;
    border-radius:  var(--radius-full);
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-size:      1.3rem;
    color:          #fff;
    text-decoration:none;
    box-shadow:     var(--shadow-lg);
    transition:
        transform  var(--transition-bounce),
        box-shadow var(--transition-base);
    border:         none;
    cursor:         pointer;
}
.floating-btn:hover {
    transform:  scale(1.1) translateY(-2px);
    box-shadow: var(--shadow-xl);
}
.floating-btn--whatsapp { background: #25D366; }
.floating-btn--phone    { background: var(--gradient-brand); }
.floating-btn--email    { background: var(--clr-accent-400); }
.floating-btn--top {
    background: var(--clr-bg-card);
    color:      var(--clr-primary-400);
    border:     1.5px solid var(--clr-border);
    opacity:    0;
    pointer-events:none;
    transform:  translateY(12px);
    transition:
        opacity    var(--transition-base),
        transform  var(--transition-base),
        box-shadow var(--transition-base);
}
.floating-btn--top.visible {
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(0);
}
.floating-btn--top:hover { transform: translateY(-4px); }

/* Tooltip sur survol */
.floating-btn[data-tooltip] {
    position: relative;
}
.floating-btn[data-tooltip]::before {
    content:        attr(data-tooltip);
    position:       absolute;
    right:          calc(100% + 10px);
    top:            50%;
    transform:      translateY(-50%);
    background:     var(--clr-bg-card);
    color:          var(--clr-text-primary);
    font-size:      var(--text-xs);
    font-weight:    var(--fw-medium);
    white-space:    nowrap;
    padding:        var(--sp-2) var(--sp-3);
    border-radius:  var(--radius-md);
    box-shadow:     var(--shadow-md);
    border:         1px solid var(--clr-border);
    opacity:        0;
    pointer-events: none;
    transition:     opacity var(--transition-fast);
}
.floating-btn[data-tooltip]:hover::before { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   FAQ ACCORDÉON
═══════════════════════════════════════════════════════════ */
.faq-item {
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.faq-item.open {
    border-color: var(--clr-border-focus);
    box-shadow:   var(--shadow-sm);
}
.faq-question {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    padding:        var(--sp-5) var(--sp-6);
    cursor:         pointer;
    background:     var(--clr-bg-card);
    border:         none;
    width:          100%;
    text-align:     left;
    font-family:    var(--font-sans);
    font-size:      var(--text-base);
    font-weight:    var(--fw-semibold);
    color:          var(--clr-text-primary);
    gap:            var(--sp-4);
    transition:     background var(--transition-fast), color var(--transition-fast);
}
.faq-question:hover { color: var(--clr-primary-400); }
.faq-item.open .faq-question { color: var(--clr-primary-400); }
.faq-icon {
    width:       24px;
    height:      24px;
    border-radius:var(--radius-full);
    background:  var(--clr-bg-muted);
    display:     flex;
    align-items: center;
    justify-content:center;
    flex-shrink: 0;
    font-size:   1rem;
    transition:
        transform  var(--transition-base),
        background var(--transition-fast);
    color:       var(--clr-text-muted);
}
.faq-item.open .faq-icon {
    transform:  rotate(45deg);
    background: var(--clr-primary-400);
    color:      #fff;
}
.faq-answer {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 0.4s var(--ease-out-expo), padding var(--transition-base);
    background: var(--clr-bg-card);
}
.faq-item.open .faq-answer { max-height: 600px; }
.faq-answer-inner {
    padding:     0 var(--sp-6) var(--sp-5);
    font-size:   var(--text-base);
    color:       var(--clr-text-muted);
    line-height: var(--lh-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   COMPTEURS ANIMÉS
═══════════════════════════════════════════════════════════ */
.counter-grid {
    display:    grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:        var(--sp-8);
}
.counter-item { text-align: center; }
.counter-value {
    font-size:   var(--text-5xl);
    font-weight: var(--fw-extrabold);
    background:  var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    display:     block;
}
.counter-label {
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
    margin-top: var(--sp-2);
    font-weight:var(--fw-medium);
}

/* ═══════════════════════════════════════════════════════════
   TOAST / NOTIFICATION
═══════════════════════════════════════════════════════════ */
.toast-container {
    position:      fixed;
    bottom:        var(--sp-6);
    left:          50%;
    transform:     translateX(-50%);
    z-index:       var(--z-toast);
    display:       flex;
    flex-direction:column;
    gap:           var(--sp-3);
    width:         min(90vw, 400px);
    pointer-events:none;
}
.toast {
    display:       flex;
    align-items:   center;
    gap:           var(--sp-3);
    padding:       var(--sp-4) var(--sp-5);
    background:    var(--clr-bg-card);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-xl);
    pointer-events:auto;
    font-size:     var(--text-sm);
    color:         var(--clr-text-primary);
}
.toast--success { border-left: 3px solid var(--clr-success); }
.toast--error   { border-left: 3px solid var(--clr-error); }
.toast--info    { border-left: 3px solid var(--clr-primary-400); }

/* ═══════════════════════════════════════════════════════════
   DIVIDER DÉCORATIF
═══════════════════════════════════════════════════════════ */
.divider {
    border:  none;
    height:  1px;
    background: var(--clr-border);
    margin: var(--sp-8) 0;
}
.divider-gradient {
    border:     none;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--clr-primary-400), transparent);
    margin:     var(--sp-8) 0;
    opacity:    0.4;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .navbar__menu    { display: none; }
    .navbar__burger  { display: flex; }
    .footer__grid    { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
    .grid-4          { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .footer__grid    { grid-template-columns: 1fr; }
    .footer__bottom  { flex-direction: column; text-align: center; }
    .grid-2,
    .grid-3,
    .grid-4          { grid-template-columns: 1fr; }
    .floating-buttons{ bottom: var(--sp-4); right: var(--sp-4); }
    .navbar__actions .btn { display: none; }
}

@media (max-width: 479px) {
    .section-header h2 { font-size: var(--text-3xl); }
}