/* ==================================================================
   Socle « Direction Artistique » de l'IdentityServer GIP SI2S
   [US 1 — DevOps #11478] — Refonte DA IdentityServer (Feature #11477)

   Ce fichier est le SOCLE de la DA issue du wizard NC Connect (#11412) :
   il ne contient QUE des jetons (variables CSS) et des composants
   génériques réutilisables par toutes les pages de l'IdentityServer.
   Aucune règle spécifique à une page ne doit y être ajoutée : les
   particularités d'une page vont dans sa feuille dédiée
   (create-account.css, status-demande.css, css/pages/*.css, …).

   Contrainte transverse : CSP « style-src 'self' » (SecurityHeadersAttribute)
   => aucun style inline dans les vues, uniquement des feuilles externes
   servies depuis wwwroot/css avec asp-append-version="true".
   ================================================================== */

/* ==================================================================
   1. Jetons (design tokens)
   ================================================================== */
:root {
    /* --- Couleurs de marque : palette du logo GIP SI2S (bleu + orange) ---
       Retour client du 04/08/2026 : la DA reprend les couleurs du logo. Le bleu
       porte l'identité (texte d'accent, liens, titres, progression, sélection),
       l'orange porte l'action (boutons primaires). Deux rôles distincts : ne pas
       les confondre, c'est ce qui donne sa hiérarchie visuelle à la maquette. */
    --gip-primaire: #0D93CE;
    --gip-primaire-survol: #0A7AAB;
    --gip-primaire-contraste: #fff;
    /* Bleu vif : pastille d'étape active, bordure de sélection, progression */
    --gip-primaire-vif: #29B8F2;
    /* Bleu clair : bordure au survol d'une carte cliquable */
    --gip-primaire-clair: #8FD9F8;
    /* Bleu du logo (« SI2S » de l'en-tête) */
    --gip-accent: #47C8F5;

    /* --- Action : orange du logo (chiffre « 2 » de SI2S) --- */
    --gip-action: #F7941E;
    --gip-action-survol: #DD7F0D;

    /* Teintes dérivées du bleu clair (sélection, survol, ombre, focus) */
    --gip-primaire-voile: rgba(71, 200, 245, 0.08);
    --gip-primaire-voile-survol: rgba(71, 200, 245, 0.10);
    --gip-primaire-voile-fort: rgba(71, 200, 245, 0.15);
    --gip-primaire-ombre: rgba(41, 184, 242, 0.18);

    /* --- Fond de page : dégradé bleu très clair --- */
    --gip-fond-haut: #e8f6fd;
    --gip-fond-bas: #f6fbfe;
    --gip-fond: linear-gradient(180deg, var(--gip-fond-haut) 0%, var(--gip-fond-bas) 30%, var(--gip-fond-bas) 100%);

    /* --- Surfaces et bordures --- */
    --gip-surface: #fff;
    --gip-surface-muette: #f3f4f6;
    --gip-surface-survol: #f1f3f5;
    /* Surface des barres collantes (légèrement translucide) */
    --gip-surface-collante: rgba(255, 255, 255, 0.97);
    --gip-bordure: #e6e6e6;
    --gip-bordure-carte: #e4e4e4;
    --gip-bordure-champ: #ccc;
    --gip-bordure-champ-survol: #adb5bd;
    --gip-bordure-douce: #f0f0f0;
    --gip-bordure-entete: #e8e8e8;
    --gip-bordure-inactive: #d5d5e0;
    --gip-bordure-flottante: #dee2e6;
    --gip-ligne-inactive: #e6e6ee;

    /* --- Texte --- */
    --gip-texte: #1a1a1a;
    --gip-texte-fort: #222;
    --gip-texte-moyen: #555;
    --gip-texte-doux: #777;
    --gip-texte-faible: #999;
    --gip-texte-tres-faible: #bbb;
    --gip-texte-secondaire: #6c757d;
    --gip-texte-bouton-secondaire: #444;

    /* --- Encart d'information --- */
    --gip-info-fond: #e6f1fb;
    --gip-info-bordure: #c9e2f7;
    --gip-info-texte: #0c447c;

    /* --- Succès (élément sélectionné / confirmé) --- */
    --gip-succes-fond: #f0fdf4;
    --gip-succes-bordure: #86efac;

    /* [US 6 — #11483] Pastilles de statut (réussi / échoué) et fond des
       lignes en échec du journal des connexions passées. */
    --gip-succes-pastille-fond: #d1e7dd;
    --gip-succes-pastille-texte: #0f5132;
    --gip-erreur-pastille-fond: #f8d7da;
    --gip-erreur-pastille-texte: #842029;
    --gip-erreur-voile: #fff5f5;

    /* --- États de validation (critères de mot de passe…) --- */
    --gip-valide: #28a745;
    --gip-erreur: #dc3545;

    /* [US 7 — #11484] Alerte « attention » (avertissements 2FA, codes de
       récupération restants…). */
    --gip-attention-fond: #fff8e6;
    --gip-attention-bordure: #f1dd9c;
    --gip-attention-texte: #7a5308;

    /* --- État désactivé --- */
    --gip-desactive: #b0b0b0;

    /* --- Rayons --- */
    --gip-radius-sm: 8px;
    --gip-radius: 10px;
    --gip-radius-lg: 12px;
    --gip-radius-pilule: 999px;

    /* --- Métriques --- */
    --gip-hauteur-champ: 44px;
    --gip-hauteur-bouton: 48px;
    --gip-hauteur-logo: 40px;

    /* --- Ombres --- */
    --gip-ombre-survol: 0 2px 12px var(--gip-primaire-ombre);
    --gip-ombre-carte: 0 4px 24px rgba(12, 68, 124, 0.08);
    --gip-ombre-flottante: 0 6px 18px rgba(0, 0, 0, 0.12);

    /* --- Typographie --- */
    --gip-police: "Public Sans", "Segoe UI", Arial, sans-serif;
    /* [US 7 — #11484] Police à chasse fixe : clés et codes de récupération 2FA
       (lisibilité / recopie caractère par caractère). */
    --gip-police-mono: "Consolas", "SFMono-Regular", "Menlo", "Liberation Mono", monospace;

    /* --- Transitions --- */
    --gip-transition: 0.2s;
    --gip-transition-lente: 0.3s;
}

/* ==================================================================
   2. Corps de page
   ================================================================== */

/* Fond dégradé plein écran, commun à toutes les pages de la DA.
   .wizard-body est l'alias historique du wizard NC Connect (#11412). */
.gip-da-body,
.wizard-body {
    min-height: 100vh;
    margin: 0;
    background: var(--gip-fond);
    font-family: var(--gip-police);
}

/* Variante « carte centrée » : utilisée par _LayoutCarteDa pour les pages
   courtes (connexion, mot de passe, 2FA, erreurs…). */
.gip-da-body--carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    box-sizing: border-box;
}

/* ==================================================================
   3. En-tête (bandeau blanc : logo · contenu central · identifiant)
   ================================================================== */
.gip-entete,
.wizard-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--gip-surface);
    border-bottom: 1px solid var(--gip-bordure-entete);
    padding: 12px 40px;
}

.gip-entete__logo,
.wizard-entete__logo {
    height: var(--gip-hauteur-logo);
    width: auto;
    flex: none;
}

.gip-entete__user,
.wizard-entete__user {
    flex: none;
    width: 220px;
    text-align: right;
    font-size: 0.8rem;
    color: var(--gip-texte-faible);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================================================================
   4. Carte
   ================================================================== */
.gip-carte {
    width: 100%;
    max-width: 440px;
    background: var(--gip-surface);
    border: 1px solid var(--gip-bordure);
    border-radius: var(--gip-radius-lg);
    box-shadow: var(--gip-ombre-carte);
    padding: 32px;
    box-sizing: border-box;
}

.gip-carte--large {
    max-width: 620px;
}

.gip-carte__logo {
    display: block;
    height: var(--gip-hauteur-logo);
    width: auto;
    margin: 0 auto 24px;
}

.gip-carte__titre {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--gip-texte);
    margin: 0 0 6px;
    text-align: center;
}

.gip-carte__aide {
    font-size: 0.9rem;
    color: var(--gip-texte-secondaire);
    margin: 0 0 24px;
    text-align: center;
}

.gip-carte__pied {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--gip-bordure-douce);
    font-size: 0.85rem;
    color: var(--gip-texte-doux);
    text-align: center;
}

/* ==================================================================
   5. Boutons
   ================================================================== */

/* Gabarit commun (à combiner avec .btn de Bootstrap).
   .btn-stepper-primary est l'alias historique du wizard NC Connect. */
.gip-btn {
    /* inline-flex : centre le libellé verticalement quel que soit l'élément
       porteur (<button> comme <a class="btn">) malgré la hauteur minimale. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--gip-hauteur-bouton);
    border-radius: var(--gip-radius);
    font-size: 1rem;
    font-weight: 600;
    padding: 0 32px;
}

.gip-btn--bloc {
    display: flex;
    width: 100%;
    padding: 0 16px;
}

.gip-btn--primaire,
.btn-stepper-primary {
    background: var(--gip-action);
    border-color: var(--gip-action);
    color: var(--gip-primaire-contraste);
}

.gip-btn--primaire:hover,
.btn-stepper-primary:hover {
    background: var(--gip-action-survol);
    border-color: var(--gip-action-survol);
    color: var(--gip-primaire-contraste);
}

.gip-btn--primaire:disabled,
.btn-stepper-primary:disabled {
    background: var(--gip-desactive);
    border-color: var(--gip-desactive);
    cursor: not-allowed;
}

.gip-btn--secondaire {
    background: var(--gip-surface);
    color: var(--gip-texte-bouton-secondaire);
    border: 1px solid var(--gip-bordure-champ);
}

.gip-btn--secondaire:hover {
    background: var(--gip-surface-survol);
    color: var(--gip-texte);
    border-color: var(--gip-bordure-champ-survol);
}

/* Action secondaire de même importance métier que l'action primaire, mais qui ne
   doit pas lui disputer l'attention : contour bleu de marque au lieu du gris
   neutre. Maquette : les deux situations de l'écran « Accès non activé » — une
   seule porte l'orange, l'autre ce contour bleu. */
.gip-btn--accent {
    background: var(--gip-surface);
    color: var(--gip-primaire);
    border: 1px solid var(--gip-primaire-vif);
}

.gip-btn--accent:hover {
    background: var(--gip-primaire-voile);
    color: var(--gip-primaire-survol);
    border-color: var(--gip-primaire);
}

/* [US 5 — #11482] Bouton destructif (révocation d'un accès) : contour
   rouge discret au repos, plein au survol. */
.gip-btn--destructif {
    background: var(--gip-surface);
    color: var(--gip-erreur);
    border: 1px solid var(--gip-erreur);
}

.gip-btn--destructif:hover {
    background: var(--gip-erreur);
    border-color: var(--gip-erreur);
    color: var(--gip-primaire-contraste);
}

/* [US 6 — #11483] Garde-fou de déliaison NC Connect : le bouton destructif
   est rendu désactivé quand la liaison est le seul moyen de connexion. */
.gip-btn--destructif:disabled {
    background: var(--gip-surface);
    color: var(--gip-desactive);
    border-color: var(--gip-desactive);
    cursor: not-allowed;
}

/* [US 5 — #11482] Variante compacte, pour un bouton dans l'en-tête d'une
   carte. La hauteur reste celle d'un champ (44 px) : cible tactile conservée. */
.gip-btn--compact {
    min-height: var(--gip-hauteur-champ);
    font-size: 0.85rem;
    padding: 0 16px;
}

/* Lien d'action discret (« Modifier », « Mot de passe oublié ? »…) */
.gip-lien {
    color: var(--gip-primaire);
    font-weight: 600;
    text-decoration: none;
}

.gip-lien:hover {
    color: var(--gip-primaire-survol);
    text-decoration: underline;
}

.gip-lien:focus-visible {
    outline: 2px solid var(--gip-primaire);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Variante réduite du lien, pour les actions annexes d'un formulaire
   (« Mot de passe oublié ? ») */
.gip-lien--discret {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Séparateur « ou » entre la connexion locale et les fournisseurs externes */
.gip-separateur {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: var(--gip-texte-faible);
    font-size: 0.85rem;
}

.gip-separateur::before,
.gip-separateur::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--gip-bordure);
}

.gip-separateur span {
    padding: 0 12px;
}

/* Bouton image « NC Connect » (délégation au fournisseur d'identité) */
.gip-btn-nc-connect {
    display: block;
    border-radius: var(--gip-radius);
    transition: box-shadow var(--gip-transition);
}

.gip-btn-nc-connect:hover {
    box-shadow: var(--gip-ombre-survol);
}

.gip-btn-nc-connect:focus-visible {
    outline: 2px solid var(--gip-primaire);
    outline-offset: 2px;
}

.gip-btn-nc-connect img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--gip-bordure);
    border-radius: var(--gip-radius);
}

/* ==================================================================
   6. Champs, libellés et aides à la saisie
   Le conteneur porte la classe .gip-form ; les champs conservent les
   classes Bootstrap (.form-label / .form-control / .form-select).
   ================================================================== */
.gip-form .form-label,
.gip-label {
    font-size: 0.8rem;
    color: var(--gip-texte-moyen);
    margin-bottom: 5px;
}

.gip-form .form-control,
.gip-form .form-select {
    font-size: 0.95rem;
    border-radius: var(--gip-radius);
    min-height: var(--gip-hauteur-champ);
    border-color: var(--gip-bordure-champ);
}

.gip-form textarea.form-control {
    min-height: 0;
    resize: vertical;
}

/* Case à cocher (« Se souvenir de moi ») aux couleurs de la marque : c'est un
   état de sélection, donc le bleu vif — l'orange reste réservé aux actions. */
.gip-form .form-check-input:checked {
    background-color: var(--gip-primaire-vif);
    border-color: var(--gip-primaire-vif);
}

.gip-form .form-check-label {
    font-size: 0.85rem;
    color: var(--gip-texte-moyen);
}

/* Champs en lecture seule (données fournies par NC Connect) : fond grisé,
   et les valeurs longues (e-mails, identifiants) ne créent jamais de
   défilement horizontal. */
.gip-form .form-control[readonly],
.gip-form input[readonly] {
    background: var(--gip-surface-muette);
    color: var(--gip-texte-moyen);
    overflow-wrap: anywhere;
}

/* Texte d'aide sous un champ */
.gip-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--gip-texte-doux);
    margin-top: 4px;
}

/* Section de formulaire : intitulé en capitales violettes */
.gip-form-section-titre,
.wizard-section-title {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gip-primaire);
    font-weight: 700;
    margin: 0 0 16px;
}

/* ==================================================================
   7. Badge « NC Connect »
   Marque les données d'identité fournies par le fournisseur d'identité.
   ================================================================== */
.badge-nc-connect,
.gip-form .badge.badge-info {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: var(--gip-radius-pilule);
    background: var(--gip-info-fond);
    color: var(--gip-info-texte);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.2;
    vertical-align: 1px;
    white-space: nowrap;
}

/* ==================================================================
   8. Encart d'information et alertes
   ================================================================== */
.gip-encart-info,
.confirmation-info {
    background: var(--gip-info-fond);
    border: 1px solid var(--gip-info-bordure);
    border-radius: var(--gip-radius-lg);
    padding: 14px 18px;
    font-size: 0.85rem;
    color: var(--gip-info-texte);
}

/* [US 7 — #11484] Alertes « attention » et « danger » (avertissements 2FA :
   codes de récupération restants, réinitialisation de la clé…). Le lien
   hérite de la couleur du texte : le contraste reste garanti sur le fond
   teinté de l'alerte. */
.gip-alerte {
    margin-bottom: 16px;
    padding: 14px 18px;
    border: 1px solid;
    border-radius: var(--gip-radius-lg);
    font-size: 0.85rem;
    text-align: left;
}

.gip-alerte--attention {
    background: var(--gip-attention-fond);
    border-color: var(--gip-attention-bordure);
    color: var(--gip-attention-texte);
}

.gip-alerte--danger {
    background: var(--gip-erreur-voile);
    border-color: var(--gip-erreur-pastille-fond);
    color: var(--gip-erreur-pastille-texte);
}

.gip-alerte strong {
    display: block;
    margin-bottom: 4px;
}

.gip-alerte p {
    margin: 0 0 8px;
}

.gip-alerte p:last-child {
    margin-bottom: 0;
}

.gip-alerte a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.gip-alerte a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==================================================================
   9. Lignes libellé / valeur de récapitulatif
   ================================================================== */
.recap-ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gip-bordure-douce);
}

.recap-ligne:last-child {
    border-bottom: none;
}

.recap-libelle {
    flex: none;
    color: var(--gip-texte-doux);
    font-size: 0.8rem;
}

.recap-valeur {
    min-width: 0;
    color: var(--gip-texte);
    font-size: 0.88rem;
    font-weight: 500;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Bouton « Modifier » d'un bloc de récapitulatif */
.recap-modifier {
    border: none;
    background: none;
    padding: 0;
    float: right;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gip-primaire);
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
}

.recap-modifier:hover {
    text-decoration: underline;
}

.recap-modifier:focus-visible {
    outline: 2px solid var(--gip-primaire);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==================================================================
   10. Stepper (progression multi-étapes)
   Version desktop : pastilles + libellés reliés par des lignes.
   Version mobile : barre de progression compacte et collante.
   ================================================================== */
.stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stepper__item {
    display: flex;
    align-items: center;
}

.stepper__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.stepper__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gip-surface);
    border: 2px solid var(--gip-bordure-inactive);
    color: var(--gip-texte-faible);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background var(--gip-transition-lente), color var(--gip-transition-lente), border-color var(--gip-transition-lente);
}

.stepper__label {
    font-size: 0.85rem;
    color: var(--gip-texte-faible);
    transition: color var(--gip-transition-lente);
    white-space: nowrap;
}

.stepper__line {
    width: 70px;
    height: 2px;
    background: var(--gip-ligne-inactive);
    margin: 0 14px;
    transition: background var(--gip-transition-lente);
}

/* Étape active : pastille pleine bleu vif */
.stepper__item--active .stepper__indicator {
    background: var(--gip-primaire-vif);
    border-color: var(--gip-primaire-vif);
    color: var(--gip-primaire-contraste);
}

.stepper__item--active .stepper__label {
    color: var(--gip-primaire);
    font-weight: 600;
}

/* Étape franchie : ✓ bleu sur fond blanc, cerclé de bleu vif, ligne bleu vif */
.stepper__item--completed .stepper__indicator {
    background: var(--gip-surface);
    border-color: var(--gip-primaire-vif);
    color: var(--gip-primaire);
    font-size: 0; /* masque le numéro, remplacé par la coche */
}

.stepper__item--completed .stepper__indicator::before {
    content: "\2713"; /* ✓ */
    font-size: 0.85rem;
}

.stepper__item--completed .stepper__label {
    color: var(--gip-primaire);
}

.stepper__item--completed + .stepper__line,
.stepper__line--completed {
    background: var(--gip-primaire-vif);
}

/* --- Progression compacte (affichée sur mobile uniquement) --- */
.stepper-mobile {
    display: none;
}

.stepper-mobile__ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.stepper-mobile__etape {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gip-primaire);
}

.stepper-mobile__suivant {
    font-size: 0.72rem;
    color: var(--gip-texte-faible);
}

.stepper-mobile__barre {
    height: 4px;
    border-radius: 2px;
    background: var(--gip-ligne-inactive);
    margin-top: 6px;
    overflow: hidden;
}

.stepper-mobile__barre > div {
    height: 100%;
    width: 33.33%; /* étape 1 par défaut, mis à jour par le JS */
    background: var(--gip-primaire-vif);
    border-radius: 2px;
    transition: width 0.25s ease;
}

/* ==================================================================
   11. Rangée d'actions (boutons côte à côte : « Oui / Non »…)
   [US 4 — #11481] Remplace l'ancienne feuille css/pages/deconnexion.css.
   ================================================================== */
.gip-actions {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}

/* ==================================================================
   12. Champ mot de passe avec bascule de visibilité (œil)
   [US 4 — #11481] Version DA des .password-container / .toggle-password
   de css/pages/reset-password.css (conservée pour la branche mutuelle).
   ================================================================== */
.gip-mdp {
    position: relative;
}

.gip-mdp .form-control {
    padding-right: 48px;
}

.gip-mdp__bascule {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px; /* cible tactile ≥ 44 px */
    height: 100%;
    min-height: var(--gip-hauteur-champ);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    user-select: none;
}

.gip-mdp__bascule svg {
    width: 24px;
    height: 24px;
}

.gip-mdp__bascule:focus-visible {
    outline: 2px solid var(--gip-primaire);
    outline-offset: -2px;
    border-radius: var(--gip-radius-sm);
}

/* ==================================================================
   13. Critères de robustesse du mot de passe
   Le JS (reset-password.js) bascule les classes historiques
   text-red-600 / text-green-600 : elles sont stylées ici avec une
   portée limitée à la liste.
   ================================================================== */
.gip-criteres {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 0.8rem;
}

.gip-criteres li {
    padding: 2px 0;
}

.gip-criteres li::before {
    content: "•";
    margin-right: 6px;
}

.gip-criteres .text-red-600 {
    color: var(--gip-erreur);
}

.gip-criteres .text-green-600 {
    color: var(--gip-valide);
}

/* ==================================================================
   14. Cartes de permissions (consentement & applications autorisées)
   [US 5 — #11482] Remplace l'ancienne feuille css/pages/consent.css.
   Utilisées par Pages/Consent (liste des scopes) et Pages/Grants
   (applications autorisées).
   ================================================================== */
.gip-permissions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Respiration entre deux groupes de permissions successifs */
.gip-permissions + .gip-form-section-titre {
    margin-top: 24px;
}

.gip-permission {
    background: var(--gip-surface);
    border: 1px solid var(--gip-bordure-carte);
    border-radius: var(--gip-radius-lg);
    padding: 12px 16px;
}

/* Ligne cliquable « case + libellé » : le padding de la carte porte la
   cible tactile totale à 44 px et plus. */
.gip-permission__ligne {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

.gip-permission__case {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--gip-primaire-vif);
    cursor: pointer;
}

.gip-permission__case:disabled {
    cursor: not-allowed;
}

.gip-permission__case:focus-visible {
    outline: 2px solid var(--gip-primaire);
    outline-offset: 2px;
}

.gip-permission__nom {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gip-texte);
    overflow-wrap: anywhere;
}

/* Pastille d'état à côté du nom (« Obligatoire », « Sensible »…) */
.gip-permission__pastille {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--gip-radius-pilule);
    background: var(--gip-surface-muette);
    color: var(--gip-texte-moyen);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.2;
    vertical-align: 1px;
    white-space: nowrap;
}

.gip-permission__description {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--gip-texte-moyen);
}

/* Liste de valeurs en pilules (ressources serveur, scopes accordés) */
.gip-pilules {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.gip-pilules li {
    padding: 2px 10px;
    border-radius: var(--gip-radius-pilule);
    background: var(--gip-info-fond);
    color: var(--gip-info-texte);
    font-size: 0.75rem;
}

/* --- Application autorisée (page « Grants ») --- */
.gip-appli__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.gip-appli__identite {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.gip-appli__logo {
    flex: none;
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--gip-radius-sm);
}

.gip-appli__nom {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gip-texte);
    overflow-wrap: anywhere;
}

.gip-appli__recap {
    margin-top: 8px;
}

/* [US 8 — #11485] Liste clé / valeur de la page de diagnostic (dev-only) :
   les valeurs techniques longues (jetons, URL) ne créent jamais de
   défilement horizontal. */
.gip-diagnostic {
    margin: 0 0 8px;
}

.gip-diagnostic dt {
    font-size: 0.8rem;
    color: var(--gip-texte-moyen);
    font-weight: 600;
}

.gip-diagnostic dd {
    font-size: 0.85rem;
    color: var(--gip-texte);
    overflow-wrap: anywhere;
    margin-bottom: 8px;
}

/* ==================================================================
   15. Adaptations téléphone / petite tablette
   ================================================================== */
@media (max-width: 768px) {
    /* L'en-tête desktop laisse la place à la progression compacte */
    .gip-entete,
    .wizard-entete {
        display: none;
    }

    .stepper-mobile {
        display: block;
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--gip-surface);
        padding: 10px 16px;
        border-bottom: 1px solid var(--gip-bordure-entete);
    }

    .gip-da-body--carte {
        padding: 16px;
    }

    .gip-carte {
        max-width: none;
        padding: 20px;
    }

    /* 16px = pas de zoom automatique iOS au focus */
    .gip-form .form-control,
    .gip-form .form-select {
        font-size: 16px;
    }
}

/* --- Très petits écrans --- */
@media (max-width: 360px) {
    .stepper-mobile {
        padding: 8px 12px;
    }

    .gip-carte {
        padding: 16px;
    }
}