/* ─────────────────────────────────────────────────────────────────────────────
   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);
}

.pc-entete-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.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;
}

/* ── Conseiller ─────────────────────────────────────────────────────────── */
.pc-conseiller-tete { display: flex; gap: .9rem; align-items: flex-start; }

/* ⚠️ É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; }

.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; }
}