/*
 * BAWERS Network — Front-end CSS
 * Styles + animations 3D CSS3 pour les cartes pays, carrousel et page individuelle.
 * Couleur principale : #0ae8f7 (cyan BAWERS)
 * Aucune librairie externe — CSS3 + custom properties uniquement
 */

/* ══════════════════════════════════════════════════════════════
   1. VARIABLES CSS & RESET
══════════════════════════════════════════════════════════════ */
:root {
    --bawers-cyan:         #0ae8f7;
    --bawers-cyan-dark:    #07b8c4;
    --bawers-cyan-light:   rgba(10, 232, 247, 0.15);
    --bawers-cyan-glow:    rgba(10, 232, 247, 0.4);
    --bawers-bg:           #f9fafb;
    --bawers-white:        #ffffff;
    --bawers-text:         #1a1a1a;
    --bawers-text-muted:   #6b7280;
    --bawers-border:       #e5e7eb;
    --bawers-radius:       16px;
    --bawers-radius-sm:    8px;
    --bawers-shadow:       0 4px 20px rgba(0, 0, 0, 0.08);
    --bawers-shadow-hover: 0 30px 60px rgba(10, 232, 247, 0.25);
    --bawers-transition:   cubic-bezier(0.23, 1, 0.32, 1);
    --anim-delay:          0s;
}

/* Accessibilité : réduit les animations si préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:       0.01ms !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   2. KEYFRAMES
══════════════════════════════════════════════════════════════ */

/* fadeInUp — entrée en cascade des blocs */
@keyframes bawers-fadeInUp {
    from {
        opacity:   0;
        transform: translateY(50px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

/* slideInLeft — contacts séquentiels */
@keyframes bawers-slideInLeft {
    from {
        opacity:   0;
        transform: translateX(-40px);
    }
    to {
        opacity:   1;
        transform: translateX(0);
    }
}

/* flipIn — entrée drapeau page individuelle */
@keyframes bawers-flipIn {
    from {
        opacity:   0;
        transform: rotateY(90deg);
    }
    to {
        opacity:   1;
        transform: rotateY(0deg);
    }
}

/* zoomNet — logo entreprise */
@keyframes bawers-zoomNet {
    from {
        opacity:   0;
        transform: scale(0.5);
        filter:    blur(10px);
    }
    to {
        opacity:   1;
        transform: scale(1);
        filter:    blur(0);
    }
}

/* pulse — bouton CTA ombre cyan */
@keyframes bawers-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0       var(--bawers-cyan-glow),
                    0 8px 30px    rgba(10, 232, 247, 0.3);
    }
    50% {
        box-shadow: 0 0 0 12px    rgba(10, 232, 247, 0),
                    0 8px 30px    rgba(10, 232, 247, 0.5);
    }
}

/* scroll — carrousel infini */
@keyframes bawers-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* fadeIn — entrée initiale carrousel */
@keyframes bawers-fadeIn {
    from {
        opacity:   0;
        transform: translateY(20px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

/* ══════════════════════════════════════════════════════════════
   3. GRILLE — [bawers_countries_list]
══════════════════════════════════════════════════════════════ */

.bawers-countries-list {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   28px;
    padding:               20px 0;
    list-style:            none;
    margin:                0;
}

@media (max-width: 1024px) {
    .bawers-countries-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .bawers-countries-list {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ══════════════════════════════════════════════════════════════
   4. CARTE PAYS — Base
══════════════════════════════════════════════════════════════ */

.bawers-country-card {
    opacity:          0;
    transform:        translateY(50px);
    transition:       opacity 0.6s ease, transform 0.6s ease;
    will-change:      transform, opacity;
    perspective:      800px;
}

/* Classe ajoutée par IntersectionObserver pour révéler la carte */
.bawers-country-card.bawers-revealed {
    opacity:   1;
    transform: translateY(0);
}

.bawers-country-card__link {
    display:         block;
    text-decoration: none;
    color:           inherit;
    border-radius:   var(--bawers-radius);
    outline-offset:  4px;
}

.bawers-country-card__link:focus-visible {
    outline: 2px solid var(--bawers-cyan);
}

.bawers-country-card__inner {
    position:          relative;
    background:        var(--bawers-white);
    border:            1px solid var(--bawers-border);
    border-radius:     var(--bawers-radius);
    padding:           28px 24px 24px;
    overflow:          hidden;
    box-shadow:        var(--bawers-shadow);
    transition:        box-shadow 0.5s var(--bawers-transition),
                       transform  0.5s var(--bawers-transition),
                       border-color 0.3s ease;
    will-change:       transform, box-shadow;
    transform-style:   preserve-3d;
    cursor:            pointer;
}

/* Bordure cyan au hover */
.bawers-country-card__inner:hover {
    border-color: var(--bawers-cyan);
    box-shadow:   var(--bawers-shadow-hover);
}

/* ══════════════════════════════════════════════════════════════
   5. REFLET HOLOGRAPHIQUE — ::before géré par JS
══════════════════════════════════════════════════════════════ */

.bawers-country-card__shine {
    position:    absolute;
    top:         0;
    left:        0;
    right:       0;
    bottom:      0;
    border-radius: var(--bawers-radius);
    background:  radial-gradient(
                     circle at var(--shine-x, 50%) var(--shine-y, 50%),
                     rgba(255, 255, 255, 0.25) 0%,
                     rgba(255, 255, 255, 0.05) 40%,
                     transparent 80%
                 );
    opacity:     0;
    transition:  opacity 0.3s ease;
    pointer-events: none;
    z-index:     1;
    will-change: opacity;
}

.bawers-country-card__inner:hover .bawers-country-card__shine {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   6. DRAPEAU SUR LA CARTE
══════════════════════════════════════════════════════════════ */

.bawers-country-card__flag-wrap {
    position:         relative;
    z-index:          2;
    margin-bottom:    18px;
    overflow:         hidden;
    border-radius:    var(--bawers-radius-sm);
    aspect-ratio:     3 / 2;
    background:       var(--bawers-bg);
    box-shadow:       0 2px 12px rgba(0, 0, 0, 0.1);
}

.bawers-country-card__flag {
    width:             100%;
    height:            100%;
    object-fit:        cover;
    display:           block;
    transition:        transform 0.4s ease, filter 0.4s ease;
    will-change:       transform;
}

.bawers-country-card__flag--placeholder {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        2.5rem;
    color:            var(--bawers-text-muted);
    background:       var(--bawers-bg);
    width:            100%;
    height:           100%;
}

/* Hover : scale + légère rotation sur le drapeau */
.bawers-country-card__inner:hover .bawers-country-card__flag {
    transform: scale(1.08) rotate(2deg);
}

/* ══════════════════════════════════════════════════════════════
   7. TEXTES DE LA CARTE
══════════════════════════════════════════════════════════════ */

.bawers-country-card__info {
    position: relative;
    z-index:  2;
}

.bawers-country-card__name {
    font-size:   1.15rem;
    font-weight: 700;
    color:       var(--bawers-text);
    margin:      0 0 6px;
    line-height: 1.3;
    transition:  color 0.3s ease;
}

.bawers-country-card__inner:hover .bawers-country-card__name {
    color: var(--bawers-cyan-dark);
}

.bawers-country-card__company {
    font-size:   0.875rem;
    color:       var(--bawers-text-muted);
    margin:      0;
    display:     flex;
    align-items: center;
    gap:         6px;
}

.bawers-country-card__arrow {
    position:   absolute;
    bottom:     20px;
    right:      20px;
    z-index:    2;
    width:      36px;
    height:     36px;
    background: var(--bawers-cyan-light);
    border:     1px solid var(--bawers-cyan);
    border-radius: 50%;
    display:    flex;
    align-items:    center;
    justify-content: center;
    color:      var(--bawers-cyan-dark);
    font-size:  0.875rem;
    transition: background 0.3s ease, transform 0.3s ease;
    will-change: transform;
}

.bawers-country-card__inner:hover .bawers-country-card__arrow {
    background: var(--bawers-cyan);
    color:      var(--bawers-white);
    transform:  translateX(4px);
}

/* ══════════════════════════════════════════════════════════════
   8. CARROUSEL — [bawers_countries_slider]
══════════════════════════════════════════════════════════════ */

.bawers-slider {
    width:      100%;
    overflow:   hidden;
    position:   relative;
    padding:    20px 0 16px;
    /* Masque de fondu sur les bords gauche et droit */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    /* Animation d'entrée initiale */
    animation: bawers-fadeIn 0.8s ease both;
    will-change: opacity, transform;
}

.bawers-slider__track {
    display:    flex;
    gap:        32px;
    width:      max-content;
    /* La durée est calculée dynamiquement par slider.js via CSS variable */
    animation: bawers-scroll var(--bawers-slider-duration, 20s) linear infinite;
    will-change: transform;
}

/* Pause au hover sur le conteneur */
.bawers-slider:hover .bawers-slider__track {
    animation-play-state: paused;
}

/* ══════════════════════════════════════════════════════════════
   9. ITEM CARROUSEL + FLIP 3D
══════════════════════════════════════════════════════════════ */

.bawers-slider__item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            10px;
    flex-shrink:    0;
}

.bawers-slider__item-link {
    display:         block;
    text-decoration: none;
}

.bawers-slider__flag-wrap {
    width:            120px;
    height:           80px;
    position:         relative;
    perspective:      600px;
    cursor:           pointer;
    will-change:      transform;
}

.bawers-slider__front,
.bawers-slider__back {
    position:           absolute;
    top:                0;
    left:               0;
    width:              100%;
    height:             100%;
    border-radius:      var(--bawers-radius-sm);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition:         transform 0.6s ease;
    will-change:        transform;
    overflow:           hidden;
}

.bawers-slider__front {
    transform: rotateY(0deg);
}

.bawers-slider__back {
    transform:       rotateY(180deg);
    background:      var(--bawers-cyan);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         8px;
}

/* Flip au hover */
.bawers-slider__flag-wrap:hover .bawers-slider__front {
    transform: rotateY(-180deg);
}

.bawers-slider__flag-wrap:hover .bawers-slider__back {
    transform: rotateY(0deg);
}

.bawers-slider__flag {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
}

.bawers-slider__flag--placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--bawers-bg);
    color:           var(--bawers-text-muted);
    font-size:       2rem;
}

.bawers-slider__back-name {
    font-size:   0.8rem;
    font-weight: 700;
    color:       var(--bawers-text);
    text-align:  center;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.bawers-slider__name {
    font-size:   0.75rem;
    color:       var(--bawers-text-muted);
    text-align:  center;
    font-weight: 500;
    letter-spacing: 0.02em;
    max-width:   120px;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   10. PAGE INDIVIDUELLE PAYS — Layout
══════════════════════════════════════════════════════════════ */

.bawers-single-wrap {
    min-height:  70vh;
    background:  var(--bawers-bg);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    color:       var(--bawers-text);
}

.bawers-single-container {
    max-width:  900px;
    margin:     0 auto;
    padding:    40px 24px 80px;
    display:    flex;
    flex-direction: column;
    gap:        24px;
}

/* ══════════════════════════════════════════════════════════════
   11. HERO — En-tête de la page pays
══════════════════════════════════════════════════════════════ */

.bawers-hero {
    position:         relative;
    background:       linear-gradient(135deg, #0e1117 0%, #1a2436 50%, #0e1117 100%);
    padding:          60px 24px 80px;
    overflow:         hidden;
    color:            var(--bawers-white);
}

.bawers-hero__bg-decoration {
    position:     absolute;
    top:          -80px;
    right:        -80px;
    width:        400px;
    height:       400px;
    border-radius: 50%;
    background:   radial-gradient(circle, rgba(10, 232, 247, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.bawers-hero__inner {
    max-width:  900px;
    margin:     0 auto;
}

.bawers-breadcrumb {
    display:         flex;
    align-items:     center;
    gap:             8px;
    font-size:       0.85rem;
    color:           rgba(255, 255, 255, 0.6);
    margin-bottom:   32px;
}

.bawers-breadcrumb__link {
    color:           rgba(255, 255, 255, 0.6);
    text-decoration: none;
    display:         flex;
    align-items:     center;
    gap:             6px;
    transition:      color 0.2s ease;
}

.bawers-breadcrumb__link:hover {
    color: var(--bawers-cyan);
}

.bawers-breadcrumb__sep {
    opacity: 0.4;
}

.bawers-breadcrumb__current {
    color: rgba(255, 255, 255, 0.9);
}

.bawers-hero__content {
    display:     flex;
    align-items: center;
    gap:         48px;
}

@media (max-width: 640px) {
    .bawers-hero__content {
        flex-direction: column;
        gap: 28px;
        text-align: center;
    }
}

/* Drapeau hero avec animation flip d'entrée */
.bawers-anim-flag {
    will-change: transform, opacity;
    animation: bawers-flipIn 0.8s ease both;
}

.bawers-hero__flag-wrap {
    flex-shrink: 0;
    border-radius: var(--bawers-radius);
    overflow:    hidden;
    box-shadow:  0 8px 32px rgba(0, 0, 0, 0.4),
                 0 0 0 3px rgba(10, 232, 247, 0.3);
}

.bawers-hero__flag {
    display:    block;
    width:      280px;
    max-width:  100%;
    height:     auto;
    object-fit: cover;
}

@media (max-width: 640px) {
    .bawers-hero__flag {
        width: 200px;
    }
}

.bawers-hero__text {
    flex: 1;
}

.bawers-hero__label {
    display:         inline-block;
    font-size:       0.75rem;
    text-transform:  uppercase;
    letter-spacing:  0.12em;
    color:           var(--bawers-cyan);
    background:      rgba(10, 232, 247, 0.1);
    border:          1px solid rgba(10, 232, 247, 0.3);
    border-radius:   100px;
    padding:         4px 12px;
    margin-bottom:   12px;
    font-weight:     600;
}

.bawers-hero__title {
    font-size:   2.5rem;
    font-weight: 800;
    color:       var(--bawers-white);
    margin:      0 0 12px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

@media (max-width: 640px) {
    .bawers-hero__title {
        font-size: 1.8rem;
    }
}

.bawers-hero__company {
    font-size:   1rem;
    color:       rgba(255, 255, 255, 0.7);
    margin:      0;
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* ══════════════════════════════════════════════════════════════
   12. CARTES SECTIONS — Contenu page individuelle
══════════════════════════════════════════════════════════════ */

.bawers-card {
    background:    var(--bawers-white);
    border:        1px solid var(--bawers-border);
    border-radius: var(--bawers-radius);
    overflow:      hidden;
    box-shadow:    var(--bawers-shadow);
    transition:    transform 0.3s ease, box-shadow 0.3s ease;
    will-change:   transform;
}

.bawers-card:hover {
    transform:  translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.bawers-card__header {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     20px 24px;
    border-bottom: 1px solid var(--bawers-border);
    background:  linear-gradient(to right, var(--bawers-bg), var(--bawers-white));
}

.bawers-card__icon {
    font-size:   1.2rem;
    color:       var(--bawers-cyan-dark);
}

.bawers-card__title {
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--bawers-text);
    margin:      0;
}

.bawers-card__body {
    padding: 24px;
}

/* ══════════════════════════════════════════════════════════════
   13. BLOC ENTREPRISE
══════════════════════════════════════════════════════════════ */

.bawers-card--company .bawers-card__body {
    display:     flex;
    align-items: center;
    gap:         24px;
}

@media (max-width: 480px) {
    .bawers-card--company .bawers-card__body {
        flex-direction: column;
        text-align: center;
    }
}

/* Logo avec animation zoom + blur */
.bawers-anim-logo {
    will-change: transform, opacity, filter;
    animation: bawers-zoomNet 0.6s ease 0.3s both;
}

.bawers-company-logo-wrap {
    flex-shrink: 0;
    width:       120px;
    height:      80px;
    display:     flex;
    align-items: center;
    justify-content: center;
    background:  var(--bawers-bg);
    border:      1px solid var(--bawers-border);
    border-radius: var(--bawers-radius-sm);
    overflow:    hidden;
    padding:     12px;
}

.bawers-company-logo {
    max-width:  100%;
    max-height: 100%;
    object-fit: contain;
    display:    block;
}

.bawers-company-label {
    display:         block;
    font-size:       0.75rem;
    text-transform:  uppercase;
    letter-spacing:  0.1em;
    color:           var(--bawers-cyan-dark);
    font-weight:     600;
    margin-bottom:   4px;
}

.bawers-company-name {
    font-size:   1.4rem;
    font-weight: 700;
    color:       var(--bawers-text);
    margin:      0;
}

/* ══════════════════════════════════════════════════════════════
   14. LISTE DE CONTACTS
══════════════════════════════════════════════════════════════ */

.bawers-contact-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        0;
}

.bawers-contact-item {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
    padding:     14px 0;
    border-bottom: 1px solid var(--bawers-border);
    opacity:     0;
    transform:   translateX(-40px);
    will-change: transform, opacity;
}

.bawers-contact-item:last-child {
    border-bottom: none;
}

/* Classe ajoutée par JS au chargement */
.bawers-contact-item.bawers-anim-done {
    animation: bawers-slideInLeft 0.5s ease both;
    animation-delay: var(--anim-delay, 0s);
    opacity: 1;
    transform: none;
}

.bawers-contact-item__icon {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--bawers-cyan-light);
    border:          1px solid rgba(10, 232, 247, 0.3);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--bawers-cyan-dark);
    font-size:       0.9rem;
    flex-shrink:     0;
    transition:      background 0.3s ease;
}

.bawers-contact-item:hover .bawers-contact-item__icon {
    background: var(--bawers-cyan);
    color:      var(--bawers-white);
}

.bawers-contact-item__content {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

.bawers-contact-item__label {
    font-size:     0.75rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:         var(--bawers-text-muted);
}

.bawers-contact-item__value {
    font-size:    0.95rem;
    color:        var(--bawers-text);
    font-weight:  500;
    word-break:   break-word;
}

.bawers-contact-item__value--link {
    color:           var(--bawers-cyan-dark);
    text-decoration: none;
    transition:      color 0.2s ease;
}

.bawers-contact-item__value--link:hover {
    color:           var(--bawers-cyan);
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   15. DESCRIPTION
══════════════════════════════════════════════════════════════ */

.bawers-description {
    font-size:   1rem;
    line-height: 1.7;
    color:       var(--bawers-text);
}

.bawers-description p {
    margin: 0 0 1em;
}

.bawers-description p:last-child {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════
   16. BOUTON CTA — Pulsation ombre cyan
══════════════════════════════════════════════════════════════ */

.bawers-cta-wrap {
    display:         flex;
    justify-content: center;
    padding:         12px 0;
}

.bawers-cta-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    padding:         16px 36px;
    background:      var(--bawers-cyan);
    color:           var(--bawers-text);
    font-weight:     700;
    font-size:       1rem;
    border-radius:   100px;
    text-decoration: none;
    letter-spacing:  0.02em;
    /* Pulsation d'ombre cyan en continu */
    animation: bawers-pulse 2.5s ease-in-out infinite;
    transition:      background 0.3s ease, transform 0.2s ease;
    will-change:     transform, box-shadow;
}

.bawers-cta-btn:hover {
    background: var(--bawers-cyan-dark);
    transform:  translateY(-2px) scale(1.03);
    animation-play-state: paused;
}

.bawers-cta-btn__arrow {
    font-size:  1.1em;
    transition: transform 0.3s ease;
}

.bawers-cta-btn:hover .bawers-cta-btn__arrow {
    transform: translateX(4px);
}

/* ══════════════════════════════════════════════════════════════
   17. RETOUR / NAVIGATION BAS DE PAGE
══════════════════════════════════════════════════════════════ */

.bawers-back-nav {
    display:    flex;
    justify-content: center;
}

.bawers-back-nav__link {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    color:           var(--bawers-text-muted);
    text-decoration: none;
    font-size:       0.9rem;
    font-weight:     500;
    padding:         10px 20px;
    border-radius:   100px;
    border:          1px solid var(--bawers-border);
    transition:      color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.bawers-back-nav__link:hover {
    color:        var(--bawers-cyan-dark);
    border-color: var(--bawers-cyan);
    background:   var(--bawers-cyan-light);
}

/* ══════════════════════════════════════════════════════════════
   18. ANIMATIONS CLASSES UTILITAIRES (page individuelle)
══════════════════════════════════════════════════════════════ */

/* fadeInUp : le délai est contrôlé par la CSS variable --anim-delay */
.bawers-anim-fadeinup {
    opacity:    0;
    transform:  translateY(50px);
    will-change: opacity, transform;
    animation:  bawers-fadeInUp 0.6s ease var(--anim-delay, 0s) both;
}

.bawers-anim-slideinleft {
    opacity:   0;
    transform: translateX(-40px);
    will-change: opacity, transform;
}

/* ══════════════════════════════════════════════════════════════
   19. EMPTY STATE SHORTCODE
══════════════════════════════════════════════════════════════ */

.bawers-list__empty,
.bawers-slider__empty {
    text-align:  center;
    color:       var(--bawers-text-muted);
    font-style:  italic;
    padding:     40px 20px;
}