/* ============================================================================
   EasyCertif — Passerelles : la carte « Passerelle locale EasyGateway » (.cfp-*)
   ----------------------------------------------------------------------------
   La carte de l'écran Sources d'EasyTaxe : pastille d'icône, titre et sous-titre,
   pastille d'état à droite ; un panneau encastré « libellé / valeur » (type de
   connexion, point d'accès, clé API, programme d'installation) avec ses actions
   « copier » / « régénérer » ; une note ; le bouton de téléchargement.

   AUX VALEURS DE LA CHARTE : coins carrés (seules les pastilles restent rondes),
   encres de rang -ink sur les fonds d'état, et pas d'orange hors du bouton
   d'engagement de l'écran — le téléchargement est un bouton ordinaire.
   ============================================================================ */

.cfp-carte { display: flex; flex-direction: column; gap: 14px; padding: 18px; margin-bottom: 16px; }

/* Sur grand écran, la carte tient le TIERS de la largeur de la page (demande produit du
   2026-10-21) ; elle ne descend pas sous 340 px, où la clé et le point d'accès cesseraient
   de se lire. En dessous de 1100 px, elle reprend toute la largeur : un tiers d'une tablette
   ou d'un téléphone ne porte plus le panneau libellé / valeur. */
@media (min-width: 1100px) {
    .cfp-carte { width: max(calc(100% / 3), 340px); }
}

.cfp-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.cfp-tete .mx-pastille { margin-left: auto; }

/* ACCORDÉON (2026-10-21) : l'en-tête reste, le corps se replie. Le bouton tient le coin supérieur
   droit ; sa flèche pointe vers le bas carte repliée, et se retourne vers le haut carte ouverte. */
/* Ancré au coin de la carte, pas dans le flux de l'en-tête : à un tiers de page, titre et pastille
   remplissent la ligne et un bouton « dans le flux » passait à la ligne suivante. L'en-tête lui
   réserve sa place à droite. */
.cfp-carte { position: relative; }
.cfp-tete { padding-right: 42px; }
.cfp-replier {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer;
    background: var(--et-surface); border: 1px solid var(--et-hairline); color: var(--et-muted);
}
.cfp-replier:hover { background: var(--et-survol); color: var(--et-lien); }
.cfp-replier:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }
.cfp-replier > i { transition: transform .15s ease; }
.cfp-replier.est-ouverte > i { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .cfp-replier > i { transition: none; } }

.cfp-corps { display: flex; flex-direction: column; gap: 14px; }
.cfp-ico {
    flex: 0 0 42px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    background: var(--et-surface-2); color: var(--et-lien); font-size: 20px;
}
/* Le titre garde au moins 180 px : quand la carte est étroite, c'est la pastille qui passe à la
   ligne, pas le titre qui s'écrase sur trois lignes contre elle. */
.cfp-titres { flex: 1 1 180px; min-width: 0; }
.cfp-titre { font-size: 15px; font-weight: 700; color: var(--et-ink); }
.cfp-sous { font-size: 12px; color: var(--et-muted); }

/* LIBELLÉ AU-DESSUS, VALEUR DESSOUS (2026-10-21). La carte ne tient plus qu'un tiers de la page :
   en deux colonnes, le point d'accès et la clé n'avaient plus la place et se coupaient. Empilés,
   chaque valeur prend toute la largeur de la carte, dans un champ encadré, et revient à la ligne
   au lieu d'être tronquée ; ses actions « copier » / « régénérer » restent à sa droite. */
.cfp-panneau {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--et-surface-2); border: 1px solid var(--et-hairline); padding: 12px 14px;
}
.cfp-lbl { font-size: 12px; font-weight: 600; color: var(--et-muted); margin-top: 6px; }
.cfp-lbl:first-child { margin-top: 0; }
.cfp-val {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px;
    min-width: 0; text-align: left; font-size: 13px;
    background: var(--et-surface); border: 1px solid var(--et-hairline); padding: 6px 10px;
}
.cfp-val > :first-child { flex: 1 1 0; min-width: 0; }
.cfp-val.est-fort { font-weight: 600; color: var(--et-ink); }
/* white-space: normal — une règle globale pose « nowrap » sur <code> : sans ce retour, l'adresse
   du point d'accès (≈ 450 px) sortait de la carte au lieu de passer à la ligne. */
.cfp-code {
    font-family: var(--et-font-mono); font-weight: 600; font-size: 13px; color: var(--et-ink);
    white-space: normal; overflow-wrap: anywhere; background: transparent; padding: 0;
}
/* La clé (ET-XXXX-XXXX-XXXX, 17 signes) se recopie d'un bloc : elle ne se coupe pas à ses tirets. */
.cfp-code.est-cle { white-space: nowrap; overflow-wrap: normal; }
.cfp-val > .cfp-code.est-cle { flex: 0 0 auto; margin-right: auto; }
.cfp-code.est-lien { color: var(--et-lien); }

/* « copier » / « régénérer » : des liens d'action, pas des boutons pleins. */
.cfp-action {
    border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; cursor: pointer;
    color: var(--et-lien);
}
.cfp-action:hover { text-decoration: underline; }
.cfp-action:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }
.cfp-action.est-danger { color: var(--et-danger-ink); }
.cfp-action:disabled { color: var(--et-faint); cursor: default; text-decoration: none; }

.cfp-note { font-size: 12px; color: var(--et-muted); line-height: 1.45; }

.cfp-pied { display: flex; gap: 9px; flex-wrap: wrap; }
.cfp-pied > .mx-btn { flex: 1 1 100%; justify-content: center; }
.cfp-version {
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; padding: 1px 6px;
    background: var(--et-surface-2); border: 1px solid var(--et-hairline); color: var(--et-ink);
}

@media (max-width: 1024px) {
    /* La règle tactile du produit : une cible d'au moins 44 px. */
    .cfp-action { min-height: 44px; padding: 0 4px; }
    .cfp-replier { width: 44px; height: 44px; top: 8px; right: 8px; }
    .cfp-tete { padding-right: 46px; }
}