/* Licence onROCKY : compte en tête, activation et offres distinctes.
   L’ordre visuel suit le DOM sur tous les écrans. Couleurs du thème uniquement. */
body.vitrine { min-height: 100vh; background: var(--oaa-fond); }
.vitrine-barre { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(1080px, 100% - 64px); margin: 0 auto; padding-top: 28px; }
.vitrine-logo { --oaa-taille-symbole: 36px; }
.vitrine-liens { display: flex; align-items: center; gap: 12px; }
.vitrine-liens .bouton { text-decoration: none; }
.vitrine-colonne { width: min(1080px, 100% - 64px); margin: 0 auto; padding: 48px 0 64px; }
.vitrine-titre { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 30px; }
.vitrine-titre .surtitre { margin-bottom: 7px; }
.vitrine-titre h1 { margin: 0; font-size: clamp(32px, 4vw, 46px); line-height: 1.12; letter-spacing: -.045em; }
.vitrine-titre h1 span { color: var(--oaa-accent); }
.vitrine-titre .direct { max-width: 590px; margin: 13px 0 0; min-height: 0; font-size: 14px; line-height: 1.7; }
.support-client { flex: none; display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-radius: 18px; background: var(--oaa-surface); color: var(--oaa-secondaire); font-size: 11px; line-height: 1.5; text-decoration: none; }
.support-client .oaa-ic { width: 22px; height: 22px; color: var(--oaa-accent); }
.support-client strong { display: block; margin-top: 2px; color: var(--oaa-encre); font-size: 14px; font-weight: 600; }
.support-client:hover { background: var(--oaa-surface-alt); }
.parcours-acces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.parcours-acces a { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; background: var(--oaa-surface); color: var(--oaa-encre); text-decoration: none; }
.parcours-acces a > span { color: var(--oaa-accent); font: 500 18px var(--oaa-police-mono); }
.parcours-acces strong { display: block; font-size: 13px; font-weight: 600; }
.parcours-acces small { display: block; margin-top: 4px; color: var(--oaa-secondaire); font-size: 11px; line-height: 1.5; }
.parcours-acces a:hover { background: var(--oaa-surface-alt); }
.parcours-acces a:focus-visible, .support-client:focus-visible, .guide-lien:focus-visible { outline: 2px solid var(--oaa-accent); outline-offset: 3px; }
.vitrine-carte { display: grid; gap: 22px; }
.licence-carte { min-width: 0; padding: 26px; border: 1px solid transparent; border-radius: 24px; background: var(--oaa-surface); box-shadow: var(--oaa-ombre); }
.licence-options { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.5fr); align-items: start; gap: 22px; }
.licence-options:has(> #volet-paiements[hidden]) { grid-template-columns: 1fr; }
.licence-personnelle { display: grid; gap: 18px; min-width: 0; }
.licence-secondaires { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 22px; }
.volet h2, .repli-titre { display: block; margin: 0; color: var(--oaa-encre); font-size: 20px; font-weight: 650; line-height: 1.3; letter-spacing: -.025em; }
.licence-repere { display: block; margin: 0 0 7px; color: var(--oaa-secondaire); font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .055em; text-transform: uppercase; }
.volet .sous-titre { margin-top: 7px; font-size: 13px; line-height: 1.6; }
.volet p { overflow-wrap: anywhere; }
.volet .bouton { min-height: 42px; height: auto; padding: 11px 16px; white-space: normal; text-align: center; line-height: 1.4; }
.volet .actions { margin-top: 18px; gap: 10px; }
.volet .paiement-actions { margin-bottom: 22px; }
.paiement-actions .bouton, .paiement-nouvelle-info .bouton, .paiement-conserves .bouton { min-height: 44px; }
.paiement-nouvelle-info { margin-bottom: 22px; padding: 16px; border-radius: var(--oaa-rayon); background: var(--oaa-surface-alt); }
.paiement-nouvelle-info p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; }
.paiement-conserves { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--oaa-bord); }
.paiement-conserves summary { cursor: pointer; font-size: 14px; font-weight: 600; min-height: 44px; display: list-item; align-content: center; }
.paiement-conserves .champ { margin-block: 16px; }
.paiement-conserves select { width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--oaa-bord); border-radius: var(--oaa-rayon); background: var(--oaa-surface); color: var(--oaa-encre); font: inherit; font-size: 12px; }
.bouton.fantome.danger { color: var(--oaa-danger); }
.bouton.fantome.danger:hover:not(:disabled) { background: var(--oaa-danger-doux); color: var(--oaa-danger); }
/* Compte, statut et informations secondaires. */
.volet-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
#espace-licence[data-acces="active"] .volet-acces { padding: 30px; }
#espace-licence[data-acces="active"] #titre-statut { font-size: 26px; }
#mode { max-width: 680px; }
.compte-principal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 26px; margin-top: 24px; }
.compte-principal .details { margin: 0; }
.compte-principal .facette { padding: 0; background: transparent; }
.compte-principal #employe { font-size: 24px; letter-spacing: -.025em; }
.compte-principal #expiration { font-size: 15px; }
.volet .compte-actions { display: grid; gap: 8px; margin: 0; }
.compte-actions .bouton { min-width: 200px; }
.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; }
.facette { min-width: 0; padding: 15px 18px; border: 1px solid transparent; border-radius: var(--rayon-bloc); background: var(--oaa-surface-alt); }
.facette dt { margin: 0 0 6px; color: var(--oaa-secondaire); font-size: 12px; line-height: 1.5; }
.facette dd { margin: 0; color: var(--oaa-encre); font-size: 17px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.details-secondaires { margin-top: 12px; }
.details-secondaires .facette { padding: 12px 16px; }
.details-secondaires dd { font-size: 13px; font-weight: 500; }
.acces-complement { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--oaa-bord); }
.acces-complement > summary, .paiement-reference-aide > summary { width: fit-content; padding: 6px 0; color: var(--oaa-secondaire); font-size: 12px; line-height: 1.6; cursor: pointer; }
.acces-complement > summary:hover, .paiement-reference-aide > summary:hover { color: var(--oaa-encre); }
.puce-etat.statut { flex: none; gap: 7px; height: auto; min-height: 30px; padding: 7px 12px; font: 600 12px/1.3 var(--oaa-police); letter-spacing: 0; text-transform: none; }
.puce-etat.statut::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.statut[data-etat="active"] { --etat: var(--etat-en-ligne); }
.statut[data-etat="suspendue"], .statut[data-etat="activation-requise"] { --etat: var(--etat-decroche); }
.statut[data-etat="expiree"], .statut[data-etat="hors-ligne"] { --etat: var(--etat-probleme); }
.statut:is([data-etat="local"], [data-etat="chargement"]) { --etat: var(--etat-neutre); background: var(--oaa-surface-alt); color: var(--oaa-secondaire); }
#autre-compte { margin-top: 14px; }
/* Un guide court, visible dès que l'accès est actif. */
.guide-tete { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.guide-lien { flex: none; color: var(--oaa-accent); font-size: 12px; font-weight: 600; text-decoration: none; }
.guide-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.guide-etapes li { min-width: 0; }
.guide-etapes li + li { padding-left: 24px; border-left: 1px solid var(--oaa-bord); }
.guide-numero { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--oaa-accent-doux); color: var(--oaa-accent); font: 600 12px var(--oaa-police-mono); }
.guide-etapes h3 { margin: 13px 0 8px; font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.guide-etapes p { margin: 0; color: var(--oaa-secondaire); font-size: 12px; line-height: 1.8; }
.guide-etapes p strong { color: var(--oaa-encre); font-weight: 550; }
.prerequis { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--oaa-bord); }
.prerequis p:not(.licence-repere) { margin: 8px 0 0; color: var(--oaa-secondaire); font-size: 12px; line-height: 1.7; }
.prerequis strong { font-weight: 550; color: var(--oaa-encre); }
.licence-information { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; padding: 2px 4px 0; color: var(--oaa-secondaire); font-size: 11px; line-height: 1.75; }
.licence-information p { margin: 0; }
.licence-information > a { grid-column: 1 / -1; width: fit-content; font-weight: 600; color: var(--oaa-accent); text-decoration: none; }
.licence-information > details { grid-column: 1 / -1; }
.licence-information summary { width: fit-content; padding: 6px 0; cursor: pointer; }
.licence-information-contenu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }
/* Replis natifs : clavier, focus et ordre de lecture conservés. */
.licence-repli > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 42px; margin: -4px; padding: 4px; border-radius: 8px; cursor: pointer; list-style: none; }
.licence-repli > summary::-webkit-details-marker { display: none; }
.licence-repli > summary::after { content: ''; flex: none; width: 7px; height: 7px; margin-right: 3px; border-right: 1.5px solid var(--oaa-secondaire); border-bottom: 1.5px solid var(--oaa-secondaire); transform: rotate(45deg); transition: transform var(--oaa-duree-rapide) ease; }
.licence-repli[open] > summary::after { transform: rotate(225deg); }
.licence-repli > summary:hover h2, .licence-repli > summary:hover .repli-titre { color: var(--oaa-accent); }
.repli-contenu { padding-top: 18px; }
.volet-secondaire h2 { font-size: 17px; }
.volet-secondaire .repli-contenu { font-size: 13px; line-height: 1.7; }
.volet-secondaire .repli-contenu > :first-child { margin-top: 0; }
.volet-secondaire ol { padding-left: 20px; }
.volet-secondaire li + li { margin-top: 8px; }
.volet-secondaire .bouton { margin-top: 8px; }
/* Champs et activation. */
form { display: grid; gap: 16px; margin-top: 20px; }
.champ { display: grid; gap: 8px; min-width: 0; }
.champ-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.champ label { font-size: 12.5px; font-weight: 600; }
.champ-aide { margin: 0; color: var(--oaa-secondaire); font-size: 11px; line-height: 1.6; }
.champ .lien { font-size: 12px; }
.champ input, .champ textarea { width: 100%; min-width: 0; height: 46px; padding: 0 13px; border: 1px solid transparent; border-radius: var(--rayon-champ); background: var(--oaa-surface-alt); color: var(--oaa-encre); font: 500 14px var(--oaa-police); box-shadow: none; }
.champ input:hover:not(:disabled):not(:focus), .champ textarea:hover:not(:disabled):not(:focus) { background: color-mix(in srgb, var(--oaa-encre) 5%, var(--oaa-surface-alt)); }
.champ input[readonly] { color: var(--oaa-secondaire); }
.champ input:focus-visible, .champ textarea:focus-visible, summary:focus-visible, .volet .bouton:focus-visible, .champ .lien:focus-visible { outline: 2px solid var(--oaa-accent); outline-offset: 3px; }
#serveur, #cle { font-family: var(--oaa-police-mono); font-size: 13px; }
#activer, #promotion-demander, #promotion-activer, #paiement-creer { width: 100%; min-height: 46px; }
.actualiser::after { content: ''; flex: none; width: 11px; height: 11px; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; border-radius: 50%; opacity: 0; }
.actualiser[aria-busy="true"]::after { opacity: 1; animation: oaa-tourner .8s linear infinite; }
/* Messages. */
#message, .volet .erreur, .paiement-message { margin: 14px 0 0; padding: 13px 16px; border: 1px solid transparent; border-radius: var(--oaa-rayon); background: var(--oaa-surface-alt); color: var(--oaa-encre); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#message { margin: 0 0 20px; }
#message.succes { background: var(--oaa-info-doux); }
#message.erreur, .volet .erreur, .paiement-message[data-erreur="true"] { background: var(--oaa-danger-doux); }
.paiement-compte { margin: 16px 0 0; padding: 12px 15px; border-radius: var(--oaa-rayon); background: var(--oaa-surface-alt); font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
/* Code promo secondaire. */
.promotion-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.promotion-tete h2 { font-size: 16px; }
.promotion-conditions { margin: 14px 0 0; color: var(--oaa-secondaire); font-size: 12px; line-height: 1.6; }
.promotion-essai { margin-top: 16px; padding: 15px; border-radius: var(--rayon-bloc); background: var(--oaa-surface-alt); font-size: 13px; line-height: 1.6; }
.promotion-essai p { margin: 0 0 12px; }
.promotion-reprendre { width: 100%; margin-top: 14px; }
#promotion-code { text-transform: uppercase; letter-spacing: .04em; }
/* Offres : durée, réseau, puis monnaie. */
.paiement-titre, .paiement-methode-tete, .paiement-commande-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.paiement-type { flex: none; display: inline-block; padding: 6px 10px; border-radius: 100px; background: var(--oaa-surface-alt); color: var(--oaa-secondaire); font-size: 11px; font-weight: 600; line-height: 1.4; }
.paiement-titre > div { flex: 1; }
.paiement-titre > .paiement-type { margin-top: 0; }
.paiement-offres, .paiement-selection { min-width: 0; margin: 0; padding: 0; border: 0; }
.paiement-offres legend { margin-bottom: 12px; padding: 0; font-size: 13px; font-weight: 600; }
.paiement-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.paiement-offre { position: relative; display: flex; min-width: 0; cursor: pointer; }
.paiement-offre > input, .paiement-choix > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.paiement-offre > span { display: grid; align-content: start; gap: 12px; width: 100%; min-width: 0; padding: 18px 14px; border: 2px solid transparent; border-radius: var(--rayon-bloc); background: var(--oaa-surface-alt); color: var(--oaa-encre); transition: border-color var(--oaa-duree-rapide) ease; }
.paiement-offre strong { font-size: 13px; font-weight: 500; line-height: 1.3; }
.paiement-offre-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 24px; }
.paiement-recommandation { padding: 4px 7px; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-info-doux); color: var(--oaa-encre); font-size: 10px; font-weight: 650; line-height: 1.4; }
.paiement-prix { font-size: clamp(17px, 1.9vw, 23px); font-weight: 650; line-height: 1.2; letter-spacing: -.04em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.paiement-offre > input:checked + span { border-color: var(--oaa-accent); background: var(--oaa-info-doux); }
.paiement-offre > input:focus-visible + span { outline: 2px solid var(--oaa-accent); outline-offset: 3px; }
.paiement-offre:has(input:disabled) { cursor: default; opacity: .65; }
.paiement-methode { display: grid; gap: 22px; margin-top: 4px; padding: 20px; border: 1px solid transparent; border-radius: var(--oaa-rayon-grand); background: var(--oaa-surface-alt); }
.paiement-methode-tete { align-items: center; }
.paiement-methode-tete h3 { margin: 0; font-size: 14px; font-weight: 650; }
.paiement-methode .paiement-type { background: var(--oaa-surface); }
.paiement-selection legend { display: flex; align-items: center; gap: 9px; width: 100%; padding: 0; color: var(--oaa-encre); font-size: 13px; font-weight: 600; }
.paiement-etape { display: inline-grid; place-items: center; flex: none; width: 23px; height: 23px; border-radius: 50%; background: var(--oaa-encre); color: var(--oaa-surface); font-size: 11px; font-variant-numeric: tabular-nums; }
#paiement-cryptos[data-pret="false"] .paiement-etape { background: var(--oaa-surface); color: var(--oaa-secondaire); }
.paiement-aide { margin: 7px 0 12px; color: var(--oaa-secondaire); font-size: 12px; line-height: 1.5; }
.paiement-reseaux-grille, .paiement-crypto-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.paiement-choix { position: relative; display: flex; min-width: 0; cursor: pointer; }
.paiement-choix-carte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; min-width: 0; padding: 17px 6px 14px; border: 2px solid transparent; border-radius: var(--oaa-rayon); background: var(--oaa-surface); color: var(--oaa-encre); text-align: center; }
.paiement-choix-carte > strong { font-size: 13px; font-weight: 600; line-height: 1.3; }
.paiement-choix-detail { color: var(--oaa-secondaire); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.paiement-icone { display: block; flex: none; width: 34px; height: 34px; background-position: center; background-size: contain; background-repeat: no-repeat; }
.paiement-choix-reseau .paiement-icone { margin-bottom: 3px; }
.paiement-icone--eth { background-image: url('icones/eth.svg'); }
.paiement-icone--trx { background-image: url('icones/trx.svg'); }
.paiement-icone--sol { background-image: url('icones/sol.svg'); }
.paiement-icone--usdt { background-image: url('icones/usdt.svg'); }
.paiement-icone--usdc { background-image: url('icones/usdc.svg'); }
.paiement-coche { position: absolute; top: 8px; right: 8px; display: none; width: 15px; height: 15px; border-radius: 50%; background: var(--oaa-accent); color: var(--oaa-sur-accent); }
.paiement-coche::after { content: ''; position: absolute; top: 4px; left: 4px; width: 6px; height: 4px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.paiement-choix > input:checked + .paiement-choix-carte { border-color: var(--oaa-accent); }
.paiement-choix > input:checked + .paiement-choix-carte .paiement-coche { display: block; }
.paiement-choix > input:focus-visible + .paiement-choix-carte { outline: 2px solid var(--oaa-accent); outline-offset: 3px; }
.paiement-choix:hover > input:not(:disabled):not(:checked) + .paiement-choix-carte { background: color-mix(in srgb, var(--oaa-encre) 4%, var(--oaa-surface)); }
.paiement-choix:has(input:disabled) { cursor: default; }
.paiement-choix > input:disabled + .paiement-choix-carte { opacity: .55; }
.paiement-crypto-attente { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 105px; padding: 18px; border: 1px solid transparent; border-radius: var(--oaa-rayon); background: var(--oaa-surface); color: var(--oaa-secondaire); font-size: 12px; line-height: 1.6; text-align: center; }
.paiement-crypto-attente .oaa-ic { flex: none; width: 18px; height: 18px; }
.paiement-resume { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid transparent; border-radius: var(--oaa-rayon); background: var(--oaa-info-doux); }
.paiement-resume > div { flex: 1; min-width: 0; }
.paiement-resume > .paiement-coche { position: relative; display: block; top: auto; right: auto; flex: none; }
.paiement-resume-label { display: block; margin-bottom: 3px; color: var(--oaa-secondaire); font-size: 11px; }
#paiement-resume-titre { display: block; font-size: 13px; line-height: 1.5; }
#paiement-resume-detail { margin: 4px 0 0; color: var(--oaa-secondaire); font-size: 11px; line-height: 1.5; }
.paiement-conditions { margin: 0; font-size: 12px; }
.paiement-recharger { width: 100%; margin-top: 16px; }
/* Montant libre, raccourcis et validation : aucun choix de réseau implicite. */
.recharge-montant { min-width: 0; }
.champ .recharge-montant-label { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13px; font-weight: 600; }
.recharge-saisie { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 0 18px; border-radius: 16px; background: var(--oaa-surface-alt); }
.recharge-saisie:focus-within { outline: 2px solid var(--oaa-accent); outline-offset: 3px; }
.recharge-saisie #recharge-euros { min-width: 0; width: 100%; height: 82px; padding: 12px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: 600 38px/1.2 var(--oaa-police); letter-spacing: -.04em; }
.recharge-saisie #recharge-euros:focus { outline: 0; box-shadow: none; }
.recharge-saisie > span { color: var(--oaa-secondaire); font-size: 27px; }
.recharge-montants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.volet .recharge-montants .bouton { min-width: 0; min-height: 40px; padding: 10px 3px; background: var(--oaa-surface-alt); color: var(--oaa-encre); font-size: 12px; }
.volet .recharge-montants .bouton[aria-pressed="true"] { background: var(--oaa-accent); color: var(--oaa-sur-accent); }
.recharge-montant-libre { margin: 12px 0 0; color: var(--oaa-secondaire); font-size: 11px; }
.recharge-explication { display: flex; align-items: flex-start; gap: 10px; margin-top: 30px; color: var(--oaa-secondaire); font-size: 12px; line-height: 1.7; }
.recharge-explication > .oaa-ic { flex: none; margin-top: 3px; color: var(--oaa-accent); }
.recharge-explication p { margin: 0; }
.recharge-explication strong { display: block; margin-bottom: 5px; color: var(--oaa-encre); font-weight: 600; }
.recharge-validation { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; border-radius: 18px; background: var(--oaa-accent-doux); }
.recharge-recap { min-width: 0; }
.recharge-recap > span { display: block; color: var(--oaa-secondaire); font-size: 11px; }
#recharge-total { display: block; margin-top: 4px; font-size: 27px; line-height: 1.3; letter-spacing: -.04em; overflow-wrap: anywhere; }
#recharge-etape-aide { margin: 7px 0 0; color: var(--oaa-secondaire); font-size: 12px; }
.recharge-validation-action { display: grid; gap: 9px; max-width: 330px; }
.recharge-validation-action > span { color: var(--oaa-secondaire); font-size: 10px; line-height: 1.5; text-align: center; }
.volet .recharge-validation #paiement-creer { min-height: 48px; padding-inline: 24px; }
.compte-solde-details p { margin: 6px 0 0; font-size: 11px; font-weight: 400; }
/* Commande : envoi, référence, confirmation. */
.paiement-commande { margin-top: 20px; padding: 20px; border: 1px solid transparent; border-radius: var(--rayon-bloc); background: var(--oaa-surface-alt); }
.paiement-commande-tete { flex-wrap: wrap; align-items: center; }
.paiement-commande h3 { margin: 0; font-size: 16px; line-height: 1.4; }
.paiement-badge { padding: 5px 10px; border-radius: 100px; background: var(--oaa-surface); font-size: 11px; font-weight: 600; line-height: 1.4; }
#paiement-commande-texte { margin: 14px 0 0; font-size: 13px; line-height: 1.6; }
.paiement-actif { display: flex; align-items: center; gap: 12px; margin: 20px 0; padding: 14px; border-radius: var(--oaa-rayon); background: var(--oaa-surface); }
.paiement-actif > div { min-width: 0; }
#paiement-commande-crypto { font-size: 14px; }
.paiement-reseau { margin: 5px 0 0; color: var(--oaa-secondaire); font-size: 12px; line-height: 1.5; }
.paiement-destination { margin: 17px 0; }
/* Le texte explicite accompagne la couleur, y compris pour les lecteurs d’écran. */
#paiement-instructions .paiement-montant-exact {
  margin: 0 0 12px;
  color: var(--oaa-danger, #b3243e);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.paiement-copie { display: flex; align-items: center; gap: 8px; }
.paiement-copie input, .paiement-copie textarea { flex: 1; min-width: 0; }
.paiement-copie .bouton { flex: none; background: var(--oaa-surface); }
#paiement-adresse { min-height: 68px; height: auto; padding: 11px 12px; resize: vertical; background: var(--oaa-surface); color: var(--oaa-encre); font: 500 12px/1.6 var(--oaa-police-mono); overflow-wrap: anywhere; }
#paiement-montant { background: var(--oaa-surface); color: var(--oaa-encre); font: 500 14px var(--oaa-police-mono); }
.paiement-qr { display: flex; align-items: center; gap: 24px; margin: 24px 0; padding: 20px 0; border: none; background: transparent; }
.paiement-qr[hidden] { display: none; }
.paiement-qr-dessin { flex: 0 0 auto; padding: 4px; border-radius: 10px; background: #fff; line-height: 0; }
.paiement-qr-dessin svg { display: block; width: 232px; height: auto; max-width: 100%; }
.paiement-qr figcaption { display: block; max-width: 310px; }
.paiement-qr figcaption strong { display: block; margin-bottom: 8px; font-size: 16px; }
.paiement-qr figcaption p { margin: 0; line-height: 1.6; color: var(--oaa-secondaire); }
@media (max-width: 600px) { .paiement-qr { flex-direction: column; gap: 16px; padding: 16px 0; } .paiement-qr figcaption { max-width: none; } }
#paiement-symbole { margin: 0; }
.paiement-secours { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--oaa-bord); }
.paiement-secours > summary { padding: 6px 0; color: var(--oaa-secondaire); font-size: 13px; font-weight: 600; cursor: pointer; }
#paiement-transaction-formulaire { margin-top: 14px; gap: 12px; }
.paiement-verification-tete { display: flex; align-items: flex-start; gap: 10px; }
.paiement-verification-tete h4 { margin: 1px 0 0; font-size: 14px; line-height: 1.4; }
.paiement-verification-tete .sous-titre { margin-top: 5px; font-size: 12px; }
#paiement-transaction { background: var(--oaa-surface); font-family: var(--oaa-police-mono); font-size: 12px; }
.paiement-reference-aide { margin-top: -6px; }
.paiement-reference-aide p { margin: 6px 0 0; color: var(--oaa-secondaire); font-size: 12px; line-height: 1.7; }
#paiement-transaction-verifier { min-height: 44px; }
@media (max-width: 900px) {
  .vitrine-barre, .vitrine-colonne { width: calc(100% - 40px); }
  .vitrine-titre { gap: 20px; }
  .support-client { padding: 13px; }
  .parcours-acces a { gap: 10px; padding: 15px; }
  .compte-principal { gap: 20px; }
  .compte-principal .details { gap: 20px; }
  .compte-actions .bouton { min-width: 170px; }
  .licence-options { grid-template-columns: minmax(250px, .82fr) minmax(0, 1.25fr); gap: 18px; }
  .licence-carte { padding: 22px; }
  .paiement-titre { flex-wrap: wrap; }
  .paiement-titre > .paiement-type { margin-top: 0; }
  .paiement-offre > span { padding: 15px 10px; }
  .paiement-methode { padding: 16px 12px; }
}
@media (max-width: 760px) {
  .vitrine-barre { padding-top: 20px; }
  .vitrine-colonne { padding-top: 30px; }
  .vitrine-titre { align-items: flex-start; flex-direction: column; gap: 18px; }
  .support-client { width: 100%; }
  .parcours-acces { grid-template-columns: 1fr; gap: 8px; }
  .parcours-acces a { padding: 14px 18px; }
  .parcours-acces small { margin-top: 2px; }
  .compte-principal { grid-template-columns: 1fr; }
  .volet .compte-actions { display: flex; flex-wrap: wrap; }
  .guide-etapes { grid-template-columns: 1fr; gap: 20px; }
  .guide-etapes li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; }
  .guide-etapes li + li { padding-left: 0; border-left: 0; }
  .guide-numero { grid-row: 1 / 3; }
  .guide-etapes h3 { margin: 4px 0 8px; }
  .guide-etapes p { grid-column: 2; }
  .licence-information { grid-template-columns: 1fr; }
  .licence-options, .licence-secondaires { grid-template-columns: 1fr; gap: 18px; }
  .vitrine-carte { gap: 18px; }
  .paiement-prix { font-size: 23px; }
  .paiement-titre { flex-wrap: nowrap; }
  .paiement-titre > .paiement-type { margin-top: 0; }
}
@media (max-width: 460px) {
  .vitrine-barre, .vitrine-colonne { width: calc(100% - 28px); }
  .vitrine-barre { gap: 12px; flex-wrap: wrap; }
  .vitrine-logo { --oaa-taille-symbole: 30px; }
  .vitrine-liens { gap: 8px; }
  .vitrine-liens .bouton { padding-inline: 11px; }
  .vitrine-liens .bouton::before { display: none; }
  .vitrine-titre h1 { font-size: 29px; }
  .licence-carte { padding: 20px 18px; border-radius: 20px; }
  #espace-licence[data-acces="active"] .volet-acces { padding: 22px 18px; }
  .guide-tete { align-items: flex-start; flex-direction: column; gap: 12px; }
  .volet-tete { flex-direction: column; gap: 14px; }
  .details { grid-template-columns: 1fr; gap: 9px; margin-top: 18px; }
  .volet h2, .repli-titre { font-size: 19px; }
  .volet-secondaire h2 { font-size: 16px; }
  .volet .actions { gap: 8px; }
  .volet .actions .bouton { flex: 1 1 auto; padding-inline: 12px; }
  .paiement-titre { flex-wrap: wrap; }
  .paiement-titre > .paiement-type { display: none; }
  .paiement-grille { gap: 7px; }
  .paiement-offre > span { padding: 15px 8px; gap: 10px; }
  .paiement-prix { font-size: clamp(14px, 4.2vw, 19px); white-space: nowrap; }
  .paiement-reseaux-grille, .paiement-crypto-grille { gap: 6px; }
  .paiement-choix-carte { padding: 16px 3px 12px; }
  .paiement-choix-carte > strong { font-size: 12px; }
  .paiement-choix-detail { font-size: 10px; }
  .paiement-icone { width: 30px; height: 30px; }
  .paiement-commande { padding: 16px 12px; }
  .paiement-copie { align-items: stretch; }
  .paiement-copie .bouton { padding: 9px 11px; }
}
@media (max-width: 340px) {
  .paiement-grille { grid-template-columns: 1fr; }
  .paiement-offre > span { grid-template-columns: 1fr auto; align-items: center; }
  .paiement-copie { flex-wrap: wrap; }
  .paiement-copie > input, .paiement-copie > textarea { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .licence-repli > summary::after { transition: none; }
  .actualiser[aria-busy="true"]::after { animation: none; }
}
@media (forced-colors: active) {
  .licence-carte, .facette, .champ input, .champ textarea, .paiement-methode, .paiement-commande, .paiement-choix-carte, .paiement-offre > span { border-color: CanvasText; }
  .paiement-offre > input:checked + span, .paiement-choix > input:checked + .paiement-choix-carte { border-color: Highlight; }
  .paiement-offre > input:focus-visible + span, .paiement-choix > input:focus-visible + .paiement-choix-carte { outline-color: Highlight; }
  .paiement-coche { color: HighlightText; background: Highlight; forced-color-adjust: none; }
  .paiement-icone { forced-color-adjust: none; }
  .puce-etat.statut::before { forced-color-adjust: none; background: CanvasText; }
}
/* Évite le zoom automatique des champs sur les navigateurs tactiles. */
@media (pointer: coarse) {
  .champ input:not(#recharge-euros), .champ textarea, #serveur, #cle, #code-cree, #paiement-adresse, #paiement-montant, #paiement-transaction { font-size: 16px; }
}
/* Pages Compte et Recharge à l’intérieur du poste. */
html[data-poste-compte] .vitrine-barre { display: none; }
html[data-poste-compte] .vitrine-colonne { width: min(1120px, calc(100% - 56px)); padding: 30px 0 48px; }
html[data-poste-compte] .vitrine-titre { margin-bottom: 24px; }
html[data-poste-compte] .vitrine-titre h1 { font-size: clamp(28px, 3.5vw, 36px); }
html[data-poste-compte] .vitrine-titre .direct { margin-top: 8px; font-size: 13px; }
html[data-poste-compte="compte"] .vitrine-carte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
html[data-poste-compte="compte"] :is(.volet-acces, #premiers-pas, .licence-information) { grid-column: 1 / -1; }
html[data-poste-compte="compte"] :is(#details-techniques, #premiers-pas, #volet-activation, .licence-secondaires, .licence-information, #ouvrir-espace) { display: none; }
html[data-poste-compte="compte"] #espace-licence[data-acces="active"] .licence-options:not(:has(#creation-resultat:not([hidden]))) { display: none; }
html[data-poste-compte="compte"] .volet-acces .licence-repere,
html[data-poste-compte="compte"] #espace-licence[data-acces="active"] #mode,
html[data-poste-compte="compte"] #espace-licence[data-acces="active"] #volet-creation:not(:has(#creation-resultat:not([hidden]))),
html[data-poste-compte="compte"] #espace-licence[data-acces="active"] #volet-activation .licence-repere,
html[data-poste-compte="compte"] .licence-secondaires .licence-repere { display: none; }
html[data-poste-compte="compte"] #espace-licence .volet-acces { padding: 26px; }
html[data-poste-compte="compte"] #espace-licence #titre-statut { font-size: 18px; }
html[data-poste-compte="compte"] .compte-principal { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 22px; }
html[data-poste-compte="compte"] .compte-principal .details { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; gap: 24px; }
html[data-poste-compte="compte"] .compte-principal #employe { font-size: 21px; }
html[data-poste-compte="compte"] .compte-principal #expiration { font-size: 14px; font-weight: 500; }
html[data-poste-compte="compte"] .compte-solde [data-solde-disponible] { color: var(--oaa-accent); font-size: 30px; line-height: 1.15; letter-spacing: -.04em; }
html[data-poste-compte="compte"] .compte-solde [data-insuffisant="true"] { color: var(--oaa-attention); }
html[data-poste-compte="compte"] .compte-actions { display: flex; flex-wrap: wrap; }
html[data-poste-compte="compte"] .compte-actions .bouton { min-width: 0; }
html[data-poste-compte="compte"] #aller-renouveler { background: var(--oaa-accent); color: var(--oaa-sur-accent); }
html[data-poste-compte="compte"] #aller-renouveler:hover { background: var(--oaa-accent-fonce); }
html[data-poste-compte="compte"] #ouvrir-espace { background: var(--oaa-surface-alt); color: var(--oaa-encre); }
html[data-poste-compte="compte"] .acces-complement { margin-top: 20px; padding-top: 8px; border-top: 0; }
html[data-poste-compte="compte"] :is(#premiers-pas, #volet-activation, .volet-secondaire) { padding: 17px 22px; }
html[data-poste-compte="compte"] :is(#premiers-pas, #volet-activation, .volet-secondaire) h2 { font-size: 15px; }
html[data-poste-compte="compte"] .licence-secondaires { grid-template-columns: minmax(0, 1fr); }
html[data-poste-compte="compte"] #volet-paiements { display: none; }
html[data-poste-compte="compte"] .licence-options { grid-template-columns: 1fr; }
html[data-poste-compte="recharger"] .vitrine-titre,
html[data-poste-compte="recharger"] #parcours-acces,
html[data-poste-compte="recharger"] .volet-acces,
html[data-poste-compte="recharger"] #premiers-pas,
html[data-poste-compte="recharger"] .licence-personnelle,
html[data-poste-compte="recharger"] .licence-secondaires,
html[data-poste-compte="recharger"] .licence-information,
html[data-poste-compte="recharger"] #paiement-secours,
html[data-poste-compte="recharger"] #paiement-details > summary { display: none; }
html[data-poste-compte="recharger"] .licence-options { display: block; }
html[data-poste-compte="recharger"] #volet-paiements { padding: 28px; }
html[data-poste-compte="recharger"] #paiement-details > .repli-contenu { margin-top: 0; padding-top: 0; }
html[data-poste-compte="recharger"] #paiement-introduction,
html[data-poste-compte="recharger"] .paiement-methode-tete { display: none; }
html[data-poste-compte="recharger"] #paiement-compte { margin: 0 0 24px; padding: 0; background: transparent; font-size: 12px; }
html[data-poste-compte="recharger"] #paiement-formulaire { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr); align-items: start; gap: 26px 40px; margin: 0; }
html[data-poste-compte="recharger"] .paiement-methode { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; gap: 22px; }
html[data-poste-compte="recharger"] .paiement-choix-carte,
html[data-poste-compte="recharger"] .paiement-crypto-attente { background: var(--oaa-surface-alt); }
html[data-poste-compte="recharger"] .paiement-choix > input:checked + .paiement-choix-carte { background: var(--oaa-accent-doux); }
html[data-poste-compte="recharger"] .paiement-choix-carte { padding-block: 14px 11px; }
html[data-poste-compte="recharger"] .paiement-crypto-attente { min-height: 102px; }
html[data-poste-compte="recharger"] .recharge-validation,
html[data-poste-compte="recharger"] .paiement-conditions { grid-column: 1 / -1; }
html[data-poste-compte="recharger"] .paiement-conditions { margin: -12px 0 0; color: var(--oaa-secondaire); font-size: 11px; }
html[data-poste-compte="recharger"] .paiement-commande { margin-top: 0; padding: 24px; }
html[data-poste-compte="recharger"] #paiement-instructions { display: grid; grid-template-columns: minmax(0, 1fr) 250px; column-gap: 32px; }
html[data-poste-compte="recharger"] #paiement-instructions:has(.paiement-qr[hidden]) { grid-template-columns: minmax(0, 1fr); }
html[data-poste-compte="recharger"] #paiement-instructions > :not(.paiement-qr) { grid-column: 1; }
html[data-poste-compte="recharger"] #paiement-instructions > :is(#paiement-devis-expiration, #paiement-consigne, #paiement-secours) { grid-column: 1 / -1; }
html[data-poste-compte="recharger"] .paiement-qr { grid-column: 2; grid-row: 1 / 4; flex-direction: column; align-self: center; gap: 14px; padding: 0; margin: 20px 0; }
html[data-poste-compte="recharger"] .paiement-qr figcaption { text-align: center; font-size: 11px; }
html[data-poste-compte="recharger"] .paiement-qr figcaption strong { font-size: 13px; }
.recharge-entete { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; }
.recharge-entete h1 { margin: 7px 0 12px; font-size: clamp(26px, 4vw, 38px); line-height: 1.12; letter-spacing: -.035em; }
.recharge-entete p { color: var(--oaa-secondaire); }
.recharge-solde { display: grid; gap: 8px; flex: 0 0 auto; max-width: 340px; padding: 18px 24px; border: 1px solid transparent; border-radius: 18px; background: var(--oaa-surface); }
.recharge-solde > span { font-size: 12px; color: var(--oaa-secondaire); }
.recharge-solde strong { font-size: 26px; letter-spacing: -.03em; }
.recharge-solde p { margin: 0; font-size: 11px; }
@media (max-width: 800px) {
  html[data-poste-compte="recharger"] #paiement-formulaire { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  html[data-poste-compte="recharger"] .recharge-explication { display: none; }
  html[data-poste-compte="recharger"] #paiement-instructions { grid-template-columns: minmax(0, 1fr); }
  html[data-poste-compte="recharger"] .paiement-qr { grid-column: 1; grid-row: auto; justify-self: center; max-width: 310px; }
  html[data-poste-compte="compte"] .vitrine-carte { grid-template-columns: minmax(0, 1fr); }
  .recharge-validation { align-items: stretch; flex-direction: column; gap: 18px; }
  .recharge-validation-action { max-width: none; }
}
@media (max-width: 620px) {
  html[data-poste-compte="compte"] .compte-principal .details { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  html[data-poste-compte="compte"] .volet-tete { flex-direction: column; gap: 10px; }
  .licence-information-contenu { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .recharge-solde { max-width: none; }
}
@media (max-width: 620px) { html[data-poste-compte] .vitrine-colonne { width: calc(100% - 28px); padding-top: 22px; } .recharge-entete { align-items: stretch; flex-direction: column; gap: 16px; } .recharge-solde { padding: 14px 18px; } html[data-poste-compte="recharger"] #volet-paiements { padding: 18px; } }
/* Historique serveur : une section de la page Recharge, sans action de paiement. */
html[data-poste-compte="compte"] .recharge-historique { display: none; }
.historique-recharges-entete { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.historique-recharges-entete .sous-titre { margin-bottom: 0; }
.historique-recharges-entete > .bouton { flex: 0 0 auto; }
.historique-recharges-message { margin: 20px 0 0; color: var(--oaa-secondaire); font-size: 13px; line-height: 1.6; }
.historique-recharges-message[data-erreur="true"] { color: var(--oaa-danger); }
.historique-recharges-vide { padding: 38px 18px 24px; text-align: center; }
.historique-recharges-vide strong { font-size: 15px; font-weight: 550; }
.historique-recharges-vide p { margin: 9px 0 0; color: var(--oaa-secondaire); font-size: 13px; }
.historique-recharges-colonnes, .historique-recharge { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(120px, .8fr); align-items: center; gap: 24px; }
.historique-recharges-colonnes { margin-top: 26px; padding: 0 4px 12px; color: var(--oaa-secondaire); font-size: 11px; }
.historique-recharges-colonnes > :last-child { text-align: right; }
.historique-recharges-liste { list-style: none; margin: 0; padding: 0; }
.historique-recharge { padding: 20px 4px; border-top: 1px solid var(--oaa-bord); }
.historique-recharge-montant { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.historique-recharge-date { display: block; margin-top: 7px; color: var(--oaa-secondaire); font-size: 11px; line-height: 1.5; }
.historique-recharge-crypto { display: flex; align-items: center; gap: 11px; min-width: 0; }
.historique-recharge-crypto .paiement-icone { width: 30px; height: 30px; flex: 0 0 auto; }
.historique-recharge-crypto strong { display: block; font-size: 13px; font-weight: 550; }
.historique-recharge-reseau { display: block; margin-top: 5px; color: var(--oaa-secondaire); font-size: 11px; }
.historique-recharge-statut { text-align: right; }
.historique-recharge-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 20px; background: var(--oaa-surface-alt); color: var(--oaa-secondaire); font-size: 11px; font-weight: 550; }
.historique-recharge-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.historique-recharge-badge[data-statut="confirme"] { color: var(--oaa-info); background: var(--oaa-info-doux, var(--oaa-surface-alt)); }
.historique-recharge-badge[data-statut="a-verifier"], .historique-recharge-badge[data-statut="echoue"] { color: var(--oaa-danger); background: var(--oaa-danger-doux); }
.historique-recharge-confirmation { display: block; margin-top: 7px; color: var(--oaa-secondaire); font-size: 10px; line-height: 1.5; }
.historique-recharges-actions { display: flex; justify-content: center; gap: 10px; }
.historique-recharges-actions > :not([hidden]) { margin-top: 18px; }
@media (max-width: 620px) {
  .historique-recharges-entete { align-items: flex-start; gap: 12px; }
  .historique-recharges-entete h2 { font-size: 18px; }
  .historique-recharges-entete > .bouton { min-height: 36px; padding: 8px 10px; font-size: 11px; }
  .historique-recharges-colonnes { display: none; }
  .historique-recharges-liste { margin-top: 20px; }
  .historique-recharge { grid-template-columns: minmax(0, 1fr) auto; gap: 15px; padding-block: 20px; }
  .historique-recharge-crypto { grid-column: 1; grid-row: 2; }
  .historique-recharge-statut { grid-column: 2; grid-row: 1 / 3; max-width: 130px; }
  .historique-recharge-montant { font-size: 19px; }
}

/* Safari mobile garde son échelle pendant la saisie et les champs restent tactiles. */
@media (max-width: 720px) {
  body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    font-size: 16px !important; min-height: 44px;
  }
}

/* Téléphone : adaptation ciblée, sans changement du poste ordinateur. */
@media (max-width: 620px) {
  html[data-poste-compte] .vitrine-colonne { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  html[data-poste-compte] :is(.volet, .paiement-commande, .recharge-historique) { min-width: 0; }
  .paiement-reseaux-grille, .paiement-crypto-grille { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
  .paiement-choix-carte { min-height: 100px; padding: 14px 8px; }
  .paiement-choix-carte > strong { font-size: 13px; }
  .paiement-choix-detail { font-size: 12px; line-height: 1.45; }
  .paiement-copie { flex-wrap: wrap; }
  .paiement-copie > input, .paiement-copie > textarea { flex-basis: 100%; width: 100%; font-size: 16px; }
  .paiement-copie > .bouton { flex: 1 1 auto; min-height: 44px; }
  .paiement-actions, .historique-recharges-actions { flex-wrap: wrap; }
  .paiement-actions > .bouton { flex: 1 1 140px; }
  .paiement-qr canvas, .paiement-qr img { max-width: 100%; height: auto; }
  .historique-recharges-entete { flex-wrap: wrap; }
  .historique-recharges-entete > .bouton, .historique-recharges-actions > .bouton { min-height: 44px; }
  .historique-recharge-reseau, .historique-recharge-confirmation, .paiement-message { overflow-wrap: anywhere; }
  html[data-poste-compte] :is(.bouton, .lien), .vitrine-liens .bouton { min-height: 44px; }
}