/* ══════════════════════════════════════════════════════════════════════════
   TUNNEL DE PAIEMENT — Forum In'Tech
   Feuille commune aux quatre écrans du parcours :
     forum-intech.php · forum-confirmation.php
     forum-paiement-succes.php · forum-paiement-annule.php

   Écrite en CSS natif, et non en classes Tailwind : assets/css/forum-tailwind.css
   est un fichier COMPILÉ. Une classe utilitaire non présente dans ce build
   n'existe pas au navigateur, et l'hébergement mutualisé n'a pas de quoi
   relancer la compilation. Tout ce qui est ajouté ici fonctionne tel quel.

   Chaque page fixe sa couleur d'accent via --pm-primary. Défaut : le violet
   du module SaaS (brand-600). forum-confirmation.php et les pages de retour
   basculent sur l'indigo de la charte (--primary-color, #4B0082).
   ══════════════════════════════════════════════════════════════════════════ */

.payment-methods,
.pm-row,
.tunnel-btn,
.tunnel-status {
    --pm-primary: #7c3aed;
    --pm-primary-dark: #6d28d9;
    --pm-primary-soft: rgba(124, 58, 237, .15);
    --pm-border: #e5e7eb;
    --pm-border-idle: #d1d5db;
    --pm-text: #374151;
    --pm-radius-card: 16px;
    --pm-radius-input: 12px;
    --pm-radius-btn: 8px;

    /* Le kerning est actif par défaut sur la plupart des navigateurs, mais pas
       sur toutes les faces Google Fonts chargées en woff2 : on l'impose. */
    font-feature-settings: "kern" 1;
}

/* ── Fond dégradé des sections de paiement ────────────────────────────────── */
.tunnel-surface {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(124, 58, 237, .07) 0%, transparent 55%),
        radial-gradient(110% 80% at 0% 100%, rgba(236, 72, 153, .06) 0%, transparent 55%),
        #ffffff;
}

/* ══ Cartes de moyens de paiement ══════════════════════════════════════════ */
.payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.payment-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 12px;
    min-height: 128px;
    border: 2px solid var(--pm-border);
    border-radius: var(--pm-radius-card);
    background: #fff;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

/* Le bouton radio garde sa place dans le DOM et reçoit le focus : il porte
   l'accessibilité clavier et lecteur d'écran. Seul son rendu est masqué. */
.payment-card input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.payment-card img {
    width: 56px;
    height: 56px;
    max-width: 100%;
    object-fit: contain;
}

/* Repli lorsqu'un opérateur n'a pas de fichier de logo. */
.payment-card .pm-initiale {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f3f4f6;
    color: var(--pm-text);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .5px;
}

.payment-card .pm-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--pm-text);
    text-align: center;
    line-height: 1.3;
}

.payment-card .pm-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--pm-border-idle);
    border-radius: 50%;
    background: #fff;
    transition: background-color .15s ease, border-color .15s ease;
}

.payment-card:hover {
    border-color: var(--pm-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

/* Sélection — `:has()` pour les navigateurs récents, `.is-selected` posée par
   assets/js/tunnel-paiement.js pour les autres. Les deux règles sont écrites
   séparément : un sélecteur `:has()` inconnu invalide TOUT le groupe, y compris
   la variante sans `:has()` si elles étaient réunies par une virgule. */
.payment-card.is-selected {
    border-color: var(--pm-primary);
    box-shadow: 0 0 0 3px var(--pm-primary-soft);
    transform: translateY(-2px);
}

.payment-card:has(input:checked) {
    border-color: var(--pm-primary);
    box-shadow: 0 0 0 3px var(--pm-primary-soft);
    transform: translateY(-2px);
}

.payment-card.is-selected .pm-check {
    background: var(--pm-primary);
    border-color: var(--pm-primary);
}

.payment-card:has(input:checked) .pm-check {
    background: var(--pm-primary);
    border-color: var(--pm-primary);
}

.payment-card.is-selected .pm-check::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    margin: 5px auto;
    border-radius: 50%;
    background: #fff;
}

.payment-card:has(input:checked) .pm-check::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    margin: 5px auto;
    border-radius: 50%;
    background: #fff;
}

/* Le focus clavier doit rester visible alors que le radio natif est masqué :
   sans cette règle, la navigation au clavier devient invisible. */
.payment-card:focus-within {
    outline: 2px solid var(--pm-primary);
    outline-offset: 2px;
}

.pm-vide {
    margin: 20px 0;
    padding: 16px 18px;
    border-radius: var(--pm-radius-input);
    background: #fff7ed;
    border-left: 3px solid #f59e0b;
    color: #92400e;
    font-size: 14px;
    line-height: 1.6;
}

/* ══ Variante « pastille » — une seule ligne ═══════════════════════════════
   Les vignettes de 128 px occupaient trois rangées dans le module d'inscription
   de forum-intech.php et repoussaient le bouton « Payer maintenant » hors de
   l'écran. Cinq pastilles compactes tiennent sur une ligne dès 640 px.

   `flex` et non `grid` : les libellés vont de « Wave » à « Orange Money », et
   une grille à colonnes égales aurait imposé la largeur du plus long à tous. */
.pm-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 4px;
}

/* `padding: 8px 13px` et non 8px 16px, et 8 px d'écart et non 10 : la carte
   d'inscription fait 768 px (max-w-3xl) moins 64 px de rembourrage, soit
   704 px utiles. Aux valeurs larges, les cinq opérateurs — « Orange Money »
   et « Moov Money » compris — totalisaient ~707 px et la dernière pastille
   passait à la ligne. Ce resserrement laisse une marge d'environ 35 px. */
.pm-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1.5px solid var(--pm-border-idle);
    border-radius: 40px;
    background: #fff;
    color: var(--pm-text);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: border-color .15s ease, box-shadow .15s ease,
                background-color .15s ease, color .15s ease;
}

/* Le radio garde sa place dans le DOM et reçoit le focus : il porte
   l'accessibilité clavier. Seul son rendu natif disparaît. */
.pm-chip input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pm-chip img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.pm-chip .pm-initiale {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #f3f4f6;
    font-size: 12px;
    font-weight: 700;
}

/* État sélectionné. `.is-selected` est posée par assets/js/tunnel-paiement.js ;
   `:has()` couvre les navigateurs récents sans JavaScript. Les deux règles sont
   écrites séparément : un `:has()` inconnu invaliderait tout un groupe réuni
   par une virgule, `.is-selected` compris. */
.pm-chip.is-selected {
    border-color: var(--pm-primary);
    background: #f5f3ff;
    color: var(--pm-primary);
    box-shadow: 0 0 0 3px var(--pm-primary-soft);
    font-weight: 600;
}

.pm-chip:has(input:checked) {
    border-color: var(--pm-primary);
    background: #f5f3ff;
    color: var(--pm-primary);
    box-shadow: 0 0 0 3px var(--pm-primary-soft);
    font-weight: 600;
}

.pm-chip:hover {
    border-color: var(--pm-primary);
    background: #fafafa;
}

.pm-chip.is-selected:hover { background: #f5f3ff; }
.pm-chip:has(input:checked):hover { background: #f5f3ff; }

/* Le radio natif étant masqué, sans cette règle la navigation au clavier
   devient invisible. */
.pm-chip:focus-within {
    outline: 2px solid var(--pm-primary);
    outline-offset: 2px;
}

/* Par défaut, la forme longue. La courte n'existe que pour les écrans étroits. */
.pm-chip .pm-name-court { display: none; }

/* `.pm-row-court` force la forme courte à toutes les largeurs. Le choix ne
   dépend pas de la fenêtre mais du conteneur : le carton de confirmation offre
   604 px utiles quelle que soit la taille de l'écran, et les libellés complets
   y passent sur deux rangées. Une requête de conteneur dirait cela plus
   directement, mais elle n'est pas encore sûre sur le parc de navigateurs
   ivoirien — la classe, elle, fonctionne partout. */
.pm-row-court .pm-name-long  { display: none; }
.pm-row-court .pm-name-court { display: inline; }

@media (max-width: 480px) {
    .pm-row { gap: 6px; }

    .pm-chip {
        padding: 8px 10px;
        gap: 6px;
        font-size: .75rem;
    }

    .pm-chip img,
    .pm-chip .pm-initiale {
        width: 24px;
        height: 24px;
    }

    /* Bascule sur les libellés courts : « Orange Money » devient « Orange ».
       Sur 375 px, l'espace utile dans la carte est de 295 px ; avec les
       libellés complets les cinq pastilles tenaient sur trois rangées, avec
       les courtes sur deux. Le logo, à côté, lève toute ambiguïté. */
    .pm-chip .pm-name-long  { display: none; }
    .pm-chip .pm-name-court { display: inline; }
}

/* ══ Bouton d'action du tunnel ═════════════════════════════════════════════ */
.tunnel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    /* Cible tactile WCAG 2.5.8 : 48 px de haut, quelle que soit la taille du
       texte à l'intérieur. */
    min-height: 48px;
    padding: 14px 24px;
    border: 0;
    border-radius: var(--pm-radius-btn);
    background: linear-gradient(135deg, var(--pm-primary) 0%, var(--pm-primary-dark) 100%);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter .2s ease, transform .15s ease, box-shadow .2s ease;
}

.tunnel-btn:hover {
    color: #fff;
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px var(--pm-primary);
}

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

.tunnel-btn[disabled] {
    opacity: .7;
    cursor: progress;
    transform: none;
    filter: none;
}

.tunnel-btn .tunnel-btn-montant {
    padding: 3px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .2);
    font-size: 14px;
    white-space: nowrap;
}

.tunnel-erreur {
    margin: 12px 0 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #b42318;
}

.tunnel-erreur[hidden] {
    display: none;
}

/* ══ Chargement pendant l'initiation du paiement ═══════════════════════════ */
@keyframes tunnel-spin {
    to { transform: rotate(360deg); }
}

.spin {
    animation: tunnel-spin .8s linear infinite;
    flex-shrink: 0;
}

/* ══ Écrans d'état (retour de la passerelle) ═══════════════════════════════ */
@keyframes tunnel-pop-in {
    0%   { transform: scale(.6); opacity: 0; }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes tunnel-slide-up {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes tunnel-draw-circle {
    to { stroke-dashoffset: 0; }
}

@keyframes tunnel-draw-check {
    to { stroke-dashoffset: 0; }
}

.status-icon   { animation: tunnel-pop-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.status-title  { animation: tunnel-slide-up .4s ease .3s both; }
.status-detail { animation: tunnel-slide-up .4s ease .45s both; }
.status-action { animation: tunnel-slide-up .4s ease .6s both; }

.success-check .check-circle {
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: tunnel-draw-circle .6s ease forwards;
}

.success-check .check-mark {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: tunnel-draw-check .4s ease .5s forwards;
}

/* ══ Apparition échelonnée des cartes ══════════════════════════════════════
   La classe est posée PUIS retirée par assets/js/tunnel-paiement.js. Elle
   n'apparaît jamais dans le HTML servi : sans JavaScript, les cartes sont
   visibles d'emblée plutôt que bloquées à l'opacité zéro. */
.payment-card.pm-enter,
.pm-chip.pm-enter {
    opacity: 0;
    transform: translateY(16px);
}

/* ══ Respect de « mouvement réduit » ═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .payment-card,
    .pm-chip,
    .tunnel-btn {
        transition: none;
    }

    /* Séparées, jamais groupées par une virgule : un navigateur qui ignore
       `:has()` jetterait le sélecteur entier, `.is-selected` compris. */
    .payment-card.is-selected {
        transform: none;
    }

    .payment-card:has(input:checked) {
        transform: none;
    }

    .status-icon,
    .status-title,
    .status-detail,
    .status-action {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .success-check .check-circle,
    .success-check .check-mark {
        animation: none;
        stroke-dashoffset: 0;
    }

    .spin {
        animation: tunnel-spin 1.8s linear infinite;
    }

    .payment-card.pm-enter,
    .pm-chip.pm-enter {
        opacity: 1;
        transform: none;
    }
}

/* ══ Petits écrans ═════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .payment-methods {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .payment-card {
        padding: 16px 8px;
        min-height: 116px;
    }

    .payment-card img,
    .payment-card .pm-initiale {
        width: 48px;
        height: 48px;
    }

    .tunnel-btn {
        flex-wrap: wrap;
        padding: 14px 16px;
        font-size: 15px;
    }
}