/* ─────────────────────────────────────────────────────────────────────────────
   Portail client VIP GPI — feuille de styles

   ⚠️ SERVIE TELLE QUELLE, sans Vite ni build. Deux raisons, aucune n'est de la
   paresse :

   1. Plesk n'a ni Node ni npm sur ces vhosts (leçon payée sur `levizio`, dont
      le CLAUDE.md impose de committer `public/build/`). Une feuille statique
      n'a aucune étape de compilation à rater au déploiement.
   2. Le cahier §7 exige une `Content-Security-Policy` SANS `unsafe-inline`.
      Une feuille externe y satisfait ; le bloc <style> du gabarit précédent,
      non.

   ── Couleurs ────────────────────────────────────────────────────────────────
   Les tokens `--vip-*` reproduisent VERBATIM
   `vipgpi-core/resources/css/vip-tokens.css`, qui se déclare « source de vérité
   UNIQUE » de l'écosystème. Ils sont copiés ici parce que `vipgpi/core` n'est
   pas encore installé (paquet privé, en attente du jeton Plesk et du secret
   COMPOSER_AUTH). Le jour où il l'est, ce bloc se remplace par un `@import` et
   RIEN d'autre ne bouge — c'est pour ça que les noms sont identiques.

   ⚠️ La maquette utilisait #0A1A40 / #C8A55A. Décision du 2026-08-03 : les
   tokens du core font foi, pour que le portail ne soit pas la quatrième
   définition des couleurs de la marque. L'écart est visible mais faible.

   Les `--pc-*` sont propres à ce portail : ce sont les gris FROIDS de la
   maquette, que le core ne fournit pas (ses surfaces sont crème). Les mélanger
   aux `--vip-*` masquerait cette distinction.

   ── Règles d'or héritées du core, valables ici ──────────────────────────────
   · aucune couleur hex codée en dur dans les vues : toujours var(--…)
   · jamais de style="" inline : il écrase le thème sombre ET viole la CSP
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* Marque — verbatim du core */
    --vip-navy: #0e1030;
    --vip-navy-dark: #0b0d26;
    --vip-gold: #c9a227;
    --vip-gold-hover: #b8901c;

    --vip-success: #1a7f4b;
    --vip-warning: #b07a1e;
    --vip-danger: #a23b3b;

    /* Structure — propres au portail, dérivés de la maquette */
    --pc-fond: #f1f4f9;
    --pc-surface: #ffffff;
    --pc-bordure: #d3dbe7;
    --pc-bordure-douce: #e6ebf3;
    --pc-texte: #1f2733;
    --pc-texte-doux: #5b6b83;
    --pc-texte-inverse: #b6c4d8;

    /* L'ombre de la maquette — une seule, utilisée 41 fois. Une élévation
       unique tient la page ensemble ; trois la font flotter. */
    --pc-ombre: 0 2px 14px rgba(10, 26, 64, .06);
    --pc-ombre-forte: 0 14px 44px rgba(6, 18, 46, .28);

    /* ⚠️ Coins DROITS : la maquette n'arrondit que les pastilles (50 %).
       C'est ce qui lui donne son allure éditoriale plutôt que « tableau de
       bord SaaS ». Ne pas « adoucir » par habitude. */
    --pc-rayon: 0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--pc-fond);
    color: var(--pc-texte);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    line-height: 1.55;
}

/* La maquette pose `a{text-decoration:none}` : le souligné est réservé aux
   liens d'ACTION dans le contenu (`.pc-lien`), pas à la navigation ni aux
   coordonnées — sinon chaque panneau se hérisse de traits. */
a { color: var(--vip-navy); text-decoration: none; }
a:hover { color: var(--vip-gold-hover); }
.pc-lien { text-decoration: underline; }

/* ── Étiquette capitale ─────────────────────────────────────────────────────
   La signature typographique de la maquette : petite, très espacée, dorée.
   Elle sert de sur-titre partout. */
.pc-etiquette {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vip-gold);
    margin: 0 0 .35rem;
}

/* ── En-tête collant ───────────────────────────────────────────────────────── */
.pc-entete {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--vip-navy);
    color: #fff;
    border-bottom: 3px solid var(--vip-gold);
}

/* ⚠️ `justify-content` retiré au profit d'un séparateur en `flex: 1`
   (`.pc-entete-espace`) : la maquette pousse tout le bloc de droite, mais le
   logo, le filet et le salut doivent rester COLLÉS à gauche. `space-between`
   les aurait écartés les uns des autres dès qu'un nom est court. */
.pc-entete-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1.5rem;
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.pc-logo { height: 36px; width: auto; display: block; }

.pc-entete-filet {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, .14);
    flex: 0 0 auto;
}

.pc-entete-salut { font-size: 15px; color: var(--pc-texte-inverse); white-space: nowrap; }
.pc-entete-salut b { color: #fff; }

.pc-entete-espace { flex: 1; }

.pc-bouton-or-fin {
    border: 1px solid rgba(201, 162, 39, .5);
    background: rgba(201, 162, 39, .1);
    color: var(--vip-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .45rem .8rem;
    white-space: nowrap;
    text-decoration: none;
}

.pc-bouton-or-fin:hover { background: rgba(201, 162, 39, .2); }

.pc-fiche-conseiller {
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid rgba(201, 162, 39, .5);
    padding: .3rem .75rem .3rem .3rem;
    text-decoration: none;
    white-space: nowrap;
}

.pc-fiche-conseiller:hover { background: rgba(201, 162, 39, .08); }

.pc-fiche-texte { display: flex; flex-direction: column; line-height: 1.25; }
.pc-fiche-texte b { font-size: 11.5px; font-weight: 700; color: #fff; }
.pc-fiche-texte em {
    font-style: normal;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vip-gold);
}

.pc-ecusson {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    background: #0e2557;
    border: 1px solid var(--vip-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--vip-gold);
}

.pc-ecusson-client {
    width: 32px;
    height: 32px;
    border-color: rgba(201, 162, 39, .4);
    font-size: 11.5px;
}

/* ⚠️ En dessous de 1000 px, la fiche du conseiller et le salut sortent : ils
   pousseraient le bouton « Faire une demande » hors de l'écran, et c'est LUI
   qui mène au seul écran qui fonctionne. Les deux restent atteignables par la
   barre d'onglets juste en dessous. */
@media (max-width: 1000px) {
    .pc-fiche-texte, .pc-entete-salut, .pc-entete-filet { display: none; }

    /* 🔴 Masquer les TEXTES ne suffisait pas. `.pc-entete-inner` est un `flex`
       en `nowrap` : logo, bouton « Faire une demande », pastille du conseiller,
       pastille du client et formulaire de déconnexion restaient sur UNE ligne
       de 582 px. Mesuré au banc Chromium le 2026-09-13, à 390 px : 582 − 390 =
       192 px de défilement HORIZONTAL sur la page entière, et sur les SEPT
       écrans du portail — pas seulement l'en-tête.
       La page de connexion, elle, était propre : ce défaut ne se voyait qu'une
       fois authentifié, ce qui l'a gardé invisible jusqu'ici. */
    .pc-entete-inner { flex-wrap: wrap; row-gap: .5rem; padding-block: .5rem; }
    .pc-fiche-conseiller { max-width: 100%; min-width: 0; }
}

/* 🔴 `.pc-fiche-conseiller` est une classe de PASTILLE d'en-tête : elle porte
   `white-space: nowrap`, ce qui est juste pour un nom sur une ligne. L'écran
   « Sécurité » la réutilise comme classe de CARTE (`pc-carte pc-fiche-conseiller`)
   autour d'un paragraphe : le texte hérite alors le `nowrap` et s'étire à
   598 px, d'où 472 px de débordement sur ce seul écran.
   ⚠️ Corriger ici plutôt que dans la vue : la classe peut être réutilisée
   ailleurs de la même façon, et la règle vaut pour tous les cas. */
.pc-carte.pc-fiche-conseiller { white-space: normal; }

.pc-marque { display: flex; align-items: center; gap: .7rem; }
.pc-marque img { height: 30px; width: auto; display: block; }
.pc-marque-texte { font-weight: 700; letter-spacing: .12em; font-size: 12.5px; text-transform: uppercase; }
.pc-marque-texte span { color: var(--vip-gold); }

.pc-entete-actions { display: flex; align-items: center; gap: 1rem; font-size: 12.5px; }
.pc-entete-nom { color: var(--pc-texte-inverse); }

.pc-lien-sobre {
    background: none;
    border: 0;
    padding: 0;
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    text-decoration: underline;
    cursor: pointer;
}
.pc-lien-sobre:hover { color: var(--vip-gold); }

/* ── Contenu ───────────────────────────────────────────────────────────────── */
.pc-contenu { max-width: 1300px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.pc-titre { font-size: 30px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .25rem; color: var(--vip-navy); }
.pc-sous-titre { color: var(--pc-texte-doux); margin: 0 0 2rem; font-size: 13.5px; }

.pc-section-titre {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 2.5rem 0 .9rem;
    color: var(--vip-navy);
}

/* ── Cartes ────────────────────────────────────────────────────────────────── */
.pc-carte {
    background: var(--pc-surface);
    border: 1px solid var(--pc-bordure-douce);
    border-radius: var(--pc-rayon);
    box-shadow: var(--pc-ombre);
    padding: 1.15rem 1.25rem;

    /* ⚠️ Colonne flex + `margin-top:auto` sur l'état : sans ça, une carte dont
       le résumé tient sur deux lignes pousse sa pastille plus bas que ses
       voisines, et la rangée part en escalier. La grille égalise déjà les
       HAUTEURS de carte ; elle n'aligne pas leur contenu. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pc-carte h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 .3rem; color: var(--vip-navy); }
.pc-carte p { margin: 0 0 .85rem; color: var(--pc-texte-doux); font-size: 12.5px; }
.pc-carte .pc-etat { margin-top: auto; }

.pc-grille {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* ── État d'un module ──────────────────────────────────────────────────────
   ⚠️ Ces pastilles portent une exigence de fond, pas une décoration : aucun
   module n'affiche de chiffre tant que sa source n'existe pas. Un « 0 $ » sur
   l'écran d'un client se lit « vous ne possédez rien » — une affirmation
   fausse sur son patrimoine. Voir CLAUDE.md. */
.pc-etat {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .6rem;
    border: 1px solid var(--pc-bordure);
    color: var(--pc-texte-doux);
    background: var(--pc-fond);
}
.pc-etat-attente { border-color: var(--pc-bordure); }
.pc-etat-bloque { border-color: var(--vip-warning); color: var(--vip-warning); }

/* ── Formulaires ───────────────────────────────────────────────────────────── */
label { display: block; font-weight: 600; font-size: 12px; margin-bottom: .35rem; color: var(--vip-navy); }
.pc-champ-groupe + .pc-champ-groupe { margin-top: 1rem; }

input[type=email], input[type=password], input[type=text] {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--pc-bordure);
    border-radius: var(--pc-rayon);
    font: inherit;
    background: #fff;
    color: var(--pc-texte);
}
input:focus { outline: 2px solid var(--vip-gold); outline-offset: 1px; }

.pc-bouton {
    background: var(--vip-navy);
    color: #fff;
    border: 0;
    border-radius: var(--pc-rayon);
    padding: .7rem 1.4rem;
    font: inherit;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.pc-bouton:hover { background: var(--vip-navy-dark); }
.pc-bouton-or { background: var(--vip-gold); color: var(--vip-navy); }
.pc-bouton-or:hover { background: var(--vip-gold-hover); }

.pc-case { font-weight: 400; font-size: 12.5px; display: flex; align-items: center; gap: .45rem; }

/* ── Avis ──────────────────────────────────────────────────────────────────── */
.pc-avis {
    padding: .8rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 12.5px;
    border-left: 3px solid var(--pc-bordure);
    background: var(--pc-surface);
}
.pc-avis-succes { border-left-color: var(--vip-success); }
.pc-avis-erreur { border-left-color: var(--vip-danger); }

/* ── Écran de connexion : deux panneaux ────────────────────────────────────
   Reprend la composition de la maquette — panneau de marque à gauche,
   formulaire à droite. Sur mobile, le panneau passe au-dessus et se réduit :
   un client se connecte souvent du téléphone. */
.pc-connexion { display: flex; min-height: 100vh; }

.pc-connexion-marque {
    background: var(--vip-navy);
    color: #fff;
    flex: 0 0 42%;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pc-connexion-marque img { height: 46px; width: auto; }
.pc-connexion-accroche { font-size: 26px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; margin: 2rem 0 .75rem; }
.pc-connexion-accroche span { color: var(--vip-gold); }
.pc-connexion-note { color: var(--pc-texte-inverse); font-size: 12.5px; max-width: 24rem; }
.pc-connexion-pied { color: var(--pc-texte-inverse); font-size: 11px; letter-spacing: .06em; }

.pc-connexion-form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}
.pc-connexion-boite { width: 100%; max-width: 24rem; }

@media (max-width: 820px) {
    .pc-connexion { flex-direction: column; min-height: 0; }
    .pc-connexion-marque { flex: none; padding: 2rem 1.5rem; }
    .pc-connexion-accroche { font-size: 20px; margin: 1.25rem 0 .5rem; }
    .pc-connexion-pied { display: none; }
}

/* ── Pied ──────────────────────────────────────────────────────────────────── */
.pc-pied {
    max-width: 1300px;
    margin: 0 auto;
    padding: 1.5rem;
    color: var(--pc-texte-doux);
    font-size: 11px;
    letter-spacing: .04em;
    border-top: 1px solid var(--pc-bordure-douce);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ÉCRANS D'ACCÈS — d'après la maquette du 2026-08-03

   Barre horizontale · carte centrée en deux volets · pied de page.
   Un aigle en filigrane à droite, hérité de l'identité VIP.

   ⚠️ Une version précédente avait fait trois colonnes pleine hauteur : mauvaise
   lecture de l'export `.dc.html`, dont les blocs ne disent pas comment ils
   s'assemblent. C'est une CARTE CENTRÉE.
   ═════════════════════════════════════════════════════════════════════════ */

.pc-page-acces {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pc-fond);
    position: relative;
    overflow-x: hidden;
}

/* L'aigle : décoratif, donc en `background` et non en <img> — rien à annoncer
   à un lecteur d'écran, et aucun texte alternatif à inventer. */
.pc-page-acces::before {
    content: '';
    position: fixed;
    right: -4rem;
    top: 4rem;
    bottom: 0;
    width: 34rem;
    background: url('../img/aigle.png') right center / contain no-repeat;
    opacity: .07;
    pointer-events: none;
    z-index: 0;
}

/* ── Barre horizontale ──────────────────────────────────────────────────── */
.pc-barre {
    background: var(--vip-navy);
    border-bottom: 2px solid var(--vip-gold);
    position: relative;
    z-index: 2;
}
.pc-barre-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.pc-barre-logo img { height: 38px; width: auto; display: block; }

.pc-barre-nav { display: flex; gap: 1.6rem; flex: 1; }
.pc-barre-nav a { color: #fff; font-size: 13px; font-weight: 600; }
.pc-barre-nav a:hover { color: var(--vip-gold); }

.pc-bouton-barre {
    background: linear-gradient(180deg, var(--vip-gold) 0%, #a9852f 100%);
    color: var(--vip-navy);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .7rem 1.3rem;
    white-space: nowrap;
}
.pc-bouton-barre:hover { color: var(--vip-navy); filter: brightness(1.08); }

/* ── Scène + carte centrée ──────────────────────────────────────────────── */
.pc-scene {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.5rem;
    position: relative;
    z-index: 1;
}

.pc-carte-acces {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    width: 100%;
    max-width: 880px;
    background: var(--pc-surface);
    box-shadow: var(--pc-ombre-forte);
}

.pc-volet-form { padding: 2.5rem 2.5rem 2.75rem; }

.pc-volet-conseiller {
    background: var(--vip-navy);
    color: #fff;
    padding: 2.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Cabinet ────────────────────────────────────────────────────────────── */
/* `center` depuis le 2026-08-04 : le bloc de droite ne porte plus trois lignes
   (nom + titre + spécialité d'un conseiller) mais le seul nom du cabinet.
   `flex-start` laissait alors un creux sous le texte, à côté de l'écusson. */
.pc-conseiller-tete { display: flex; gap: .9rem; align-items: center; }

/* ⚠️ Écusson CARRÉ, pas rond : la maquette encadre les initiales d'un filet
   doré. Le cercle « avatar » ferait profil d'utilisateur ; le carré fait
   plaque professionnelle. */
.pc-ecusson {
    width: 54px; height: 54px;
    flex: 0 0 auto;
    border: 1px solid var(--vip-gold);
    color: var(--vip-gold);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px; letter-spacing: .04em;
}

.pc-conseiller-nom { display: block; color: var(--vip-gold); font-weight: 700; font-size: 15px; }
.pc-conseiller-titre { display: block; color: #e8ecf5; font-size: 11.5px; line-height: 1.45; }
/* Le poste, sous le nom, quand on arrive par le lien personnalisé d'un
   conseiller. Discret : c'est le nom et le numéro qu'on vient chercher. */
.pc-conseiller-poste { display: block; color: #c4ccdd; font-size: 11.5px; line-height: 1.45; }

/* Le cabinet reste joignable même quand un conseiller est nommé : il peut être
   absent, et c'est justement quand on n'arrive pas à entrer qu'il faut pouvoir
   joindre quelqu'un d'autre. */
.pc-note-cabinet {
    margin: .9rem 0 0;
    font-size: 11.5px;
    color: #c4ccdd;
}
.pc-note-cabinet a { color: #e8ecf5; }
.pc-note-cabinet a:hover { color: var(--vip-gold); }

.pc-coordonnees {
    list-style: none;
    margin: 0;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--vip-gold);
    display: flex; flex-direction: column; gap: .7rem;
    font-size: 12.5px;
}
.pc-coordonnees li { display: flex; gap: .6rem; align-items: flex-start; }
.pc-coordonnees a, .pc-coordonnees span { color: #fff; }
.pc-coordonnees a:hover { color: var(--vip-gold); }
.pc-ico { color: var(--vip-gold); flex: 0 0 1rem; }
/* Les heures en vert : la maquette signale ainsi « joignable maintenant ». */
.pc-heures span:not(.pc-ico) { color: #2bb673; font-weight: 600; }

.pc-encadre {
    border: 1px solid rgba(255, 255, 255, .18);
    padding: .85rem 1rem;
    font-size: 12px;
}
.pc-encadre p { margin: 0 0 .2rem; color: #e8ecf5; line-height: 1.5; }
.pc-encadre p:last-child { margin-bottom: 0; }
.pc-encadre a { color: #fff; }
.pc-encadre a:hover { color: var(--vip-gold); }
.pc-encadre-titre { font-weight: 700; color: #fff !important; margin-bottom: .35rem !important; }

.pc-langues { margin-top: auto; display: flex; gap: .4rem; }
.pc-langue {
    border: 1px solid rgba(255, 255, 255, .25);
    color: #e8ecf5;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    padding: .3rem .55rem;
}
.pc-langue-active { background: var(--vip-gold); border-color: var(--vip-gold); color: var(--vip-navy); }
.pc-langue[aria-disabled=true] { opacity: .45; }

/* ── Formulaire ─────────────────────────────────────────────────────────── */
.pc-ligne-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .85rem;
}

/* Le bouton principal : dégradé doré pleine largeur, la signature de l'écran. */
.pc-bouton-or-plein {
    width: 100%;
    background: linear-gradient(180deg, #e0c06a 0%, var(--vip-gold) 55%, #a9852f 100%);
    color: var(--vip-navy);
    border: 0;
    padding: .85rem 1.2rem;
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 1.1rem;
}
.pc-bouton-or-plein:hover { filter: brightness(1.06); }

.pc-ou {
    display: flex; align-items: center; gap: .85rem;
    margin: 1.4rem 0;
    color: var(--pc-texte-doux);
    font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase;
}
.pc-ou::before, .pc-ou::after { content: ''; flex: 1; height: 1px; background: var(--pc-bordure); }

.pc-bouton-contour {
    width: 100%;
    background: #fff;
    color: var(--vip-navy);
    border: 1px solid var(--vip-navy);
    padding: .8rem 1.2rem;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.pc-bouton-contour[disabled] { opacity: .45; cursor: not-allowed; }

.pc-note-securite {
    margin-top: 1.5rem;
    color: var(--pc-texte-doux);
    font-size: 11.5px;
    line-height: 1.65;
}
.pc-note-securite strong { color: var(--pc-texte); font-weight: 600; }

/* ── Pied de page ───────────────────────────────────────────────────────── */
.pc-pied-acces {
    background: var(--vip-navy);
    color: #b6c4d8;
    text-align: center;
    padding: 1.1rem 1.5rem;
    font-size: 11.5px;
    position: relative;
    z-index: 2;
}
.pc-pied-acces a { color: #b6c4d8; }
.pc-pied-acces a:hover { color: var(--vip-gold); }

/* ── Adaptation ─────────────────────────────────────────────────────────
   Sous 900 px les deux volets s'empilent, et le conseiller passe APRÈS le
   formulaire : sur un téléphone, ce qu'on vient faire c'est se connecter. */
@media (max-width: 900px) {
    .pc-carte-acces { grid-template-columns: 1fr; max-width: 30rem; }
    .pc-volet-form { padding: 2rem 1.5rem; }
    .pc-volet-conseiller { padding: 1.75rem 1.5rem; }
    .pc-barre-nav { display: none; }
    .pc-barre-inner { justify-content: space-between; gap: 1rem; }
    .pc-page-acces::before { display: none; }
    .pc-scene { padding: 2rem 1rem; }
}

/* ── « Mon conseiller » ──────────────────────────────────────────────────────
   Le premier écran du portail à porter de vraies données. Il réemploie
   l'écusson et la liste de coordonnées de l'écran de connexion — les deux y
   servent la même chose — mais sur fond CLAIR : ce panneau-ci est dans le
   contenu, pas dans le volet navy. D'où les variantes `-sombre`, qui ne
   changent que la couleur du texte. */
.pc-fiche-conseiller { gap: 1.15rem; max-width: 34rem; }

.pc-conseiller-nom-sombre {
    display: block;
    color: var(--vip-navy);
    font-weight: 700;
    font-size: 16px;
}
.pc-conseiller-poste { display: block; color: var(--pc-texte-doux); font-size: 12px; line-height: 1.5; }

.pc-coordonnees-sombre { color: var(--pc-texte); }
.pc-coordonnees-sombre a { color: var(--vip-navy); text-decoration: underline; }
.pc-coordonnees-sombre a:hover { color: var(--vip-gold-hover); }
.pc-coordonnees-sombre .pc-ico { color: var(--vip-gold); }

/* Une note de bas de carte : la date de synchro, ou l'absence d'agenda. Petite
   et grise — elle informe sans se disputer la place avec les coordonnées. */
.pc-note {
    margin: 0;
    color: var(--pc-texte-doux);
    font-size: 11.5px;
    line-height: 1.6;
}

.pc-retour { margin-top: 2.5rem; font-size: 12.5px; }

/* ── « Mon profil » : une liste de champs en lecture ────────────────────────
   Volontairement une `<dl>` et non un formulaire désactivé. Des champs grisés
   se lisent « vous pourrez bientôt les modifier » ; une liste de définitions
   dit ce qu'elle est — un état, pas une saisie en attente. */
.pc-liste-champs { margin: 0; display: grid; gap: .9rem; width: 100%; }
.pc-liste-champs > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; }
.pc-liste-champs dt { color: var(--pc-texte-doux); font-size: 12px; }
.pc-liste-champs dd { margin: 0; color: var(--pc-texte); font-size: 13.5px; }

.pc-champ-note { display: block; color: var(--pc-texte-doux); font-size: 11px; margin-top: .15rem; }

@media (max-width: 34rem) {
    .pc-liste-champs > div { grid-template-columns: 1fr; gap: .1rem; }
}

.pc-formulaire { width: 100%; }
.pc-erreur { margin: .35rem 0 0; color: var(--vip-danger); font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Barre d'onglets — d'après la maquette « Portail client 360 premium ».

   ⚠️ `overflow-x: auto` et non un menu qui se replie : treize onglets ne
   tiennent pas sur un téléphone, et un menu masqué derrière un bouton fait
   disparaître neuf sections que le client ne saura jamais chercher.
   ═══════════════════════════════════════════════════════════════════════════ */
.pc-onglets {
    display: flex;
    overflow-x: auto;
    background: var(--vip-navy-dark);
    border-bottom: 2px solid var(--vip-gold);
    padding: 0 1.5rem;
    scrollbar-width: thin;
}

.pc-onglet {
    padding: .8rem .95rem;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pc-texte-inverse);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.pc-onglet:hover { color: #fff; }

.pc-onglet-actif {
    background: var(--vip-gold);
    color: var(--vip-navy);
    font-weight: 700;
}

/* ⚠️ Le focus reste VISIBLE : c'est la seule façon de parcourir treize onglets
   au clavier, et le contraste du fond marine avale un contour par défaut. */
.pc-onglet:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   « Je veux… » et le suivi des demandes (cahier §5)
   ═══════════════════════════════════════════════════════════════════════════ */
.pc-demande-formulaire { margin-bottom: 2.5rem; }

.pc-choix { border: 0; padding: 0; margin: 0 0 1rem; }
.pc-choix legend { padding: 0; }

.pc-choix-option {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .75rem .9rem;
    border: 1px solid var(--pc-bordure);
    background: var(--pc-surface);
    margin-bottom: .4rem;
    cursor: pointer;
}

.pc-choix-option:hover { border-color: var(--vip-gold); }
.pc-choix-option:has(input:checked) { border-color: var(--vip-gold); border-left-width: 3px; }
.pc-choix-option:has(input:focus-visible) { outline: 2px solid var(--vip-navy); outline-offset: 2px; }

.pc-choix-option span { display: flex; flex-direction: column; gap: .15rem; }
.pc-choix-option b { font-size: 13px; color: var(--vip-navy); }
.pc-choix-option em { font-style: normal; font-size: 11.5px; color: var(--pc-texte-doux); }

.pc-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: .3rem; color: var(--vip-navy); }

.pc-champ {
    width: 100%;
    padding: .65rem .8rem;
    border: 1px solid var(--pc-bordure);
    background: var(--pc-surface);
    color: var(--pc-texte);
    font-size: 13px;
    resize: vertical;
}

.pc-champ:focus-visible { outline: 2px solid var(--vip-navy); outline-offset: 1px; }

.pc-note {
    font-size: 11.5px;
    color: var(--pc-texte-doux);
    margin: .6rem 0 1rem;
}

.pc-demande {
    background: var(--pc-surface);
    border: 1px solid var(--pc-bordure);
    border-left: 3px solid var(--vip-gold);
    box-shadow: var(--pc-ombre);
    padding: .9rem 1.1rem;
    margin-bottom: .7rem;
}

/* ⚠️ Le refus change la couleur du liseré, jamais le fond : un bloc entier en
   rouge se lit comme une erreur du système, pas comme une décision. */
.pc-demande-refusee { border-left-color: var(--vip-warning); }

.pc-demande-tete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
}

.pc-demande-tete b { font-size: 13px; color: var(--vip-navy); }
.pc-demande-tete time { font-size: 11px; color: var(--pc-texte-doux); }

.pc-demande-message,
.pc-demande-note {
    font-size: 12px;
    color: var(--pc-texte-doux);
    margin: .5rem 0 0;
}

.pc-demande-note { border-top: 1px solid var(--pc-bordure-douce); padding-top: .5rem; }

.pc-etapes { display: flex; gap: 3px; margin: .7rem 0 .45rem; }

.pc-etape {
    flex: 1;
    height: 4px;
    background: var(--pc-bordure-douce);
}

.pc-etape-franchie { background: var(--vip-navy); }

.pc-demande-statut {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vip-navy);
    margin: 0;
}

@media (max-width: 720px) {
    .pc-onglets { padding: 0 .75rem; }
}

/* ⚠️ Un lien discret, pas un bouton rouge. Annuler sa propre demande est un
   geste ordinaire — le peindre comme un danger ferait hésiter là où il n'y a
   rien à craindre, et banaliserait le rouge là où il compte vraiment. */
.pc-demande-actions { margin-top: .6rem; }

.pc-lien-retrait {
    background: none;
    border: 0;
    padding: 0;
    font-size: 11.5px;
    color: var(--pc-texte-doux);
    text-decoration: underline;
    cursor: pointer;
}

.pc-lien-retrait:hover { color: var(--vip-danger); }
.pc-lien-retrait:focus-visible { outline: 2px solid var(--vip-navy); outline-offset: 2px; }

/* ─── Coffre-fort : compteur de pièces choisies ────────────────────────────
   Rempli par `public/js/coffre.js`. Il répond, AVANT l'envoi, à la seule
   question que le client se pose en cliquant « Déposer » : est-ce que mes
   quinze fichiers sont bien tous là ? */
.pc-compteur {
    margin: .4rem 0 0;
    font-size: 12.5px;
    color: var(--pc-texte-doux);
    min-height: 1.2em;   /* réserve la place : sans ça le formulaire saute */
}

/* ⚠️ Au-delà de la limite, ce n'est pas une erreur — rien n'a encore été
   envoyé. C'est un avertissement, et il se lit comme tel : la couleur d'alerte,
   pas celle du danger. */
.pc-compteur-alerte {
    color: var(--vip-danger);
    font-weight: 600;
}

/* Suite d'un avis, sous sa première ligne.
   ⚠️ Cette classe existe pour retirer le dernier `style=""` des vues : la CSP
   du §7 pose `style-src 'self'`, qui bloque les attributs de style en ligne. */
.pc-avis-suite {
    margin-top: .5rem;
}