/*
 * Portail client LuxGap.
 *
 * Ce portail affiche des rapports de conformité réglementaire qu'un client peut présenter à
 * son conseil ou à un régulateur. La mise en forme n'est donc pas décorative : elle doit
 * rendre IMPOSSIBLE de confondre « conforme » avec « rien n'a été regardé ». D'où des couleurs
 * de cotation distinctes jusque dans les nuances neutres, et un libellé toujours écrit en
 * toutes lettres à côté de la pastille — une pastille seule se photocopie en noir et blanc.
 *
 * Aucune ressource externe : ni police distante, ni CDN. La politique de sécurité de contenu
 * l'interdit, et c'est aussi ce qui évite que le portail soit lui-même un transfert hors UE.
 */

:root {
  --fond: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --bord: #dfe3e9;
  --bord-fort: #c6ccd6;
  --texte: #16202c;
  --texte-doux: #5a6675;
  --texte-faible: #8b95a3;

  /* Couleurs de la MARQUE, échantillonnées dans le logo réel plutôt que choisies au jugé :
     #162765 est la teinte du mot-clé « Luxgap » (36 % des pixels opaques du logo), #33bac6
     celle de la signature « DATA PRIVACY PARTNER », et le dégradé #18447c → #1d96b4 celui de
     l'anneau. La teinte générique employée jusqu'ici (#0b5fff) jurait franchement à côté du
     logo — ce qui se voit immédiatement dès qu'on pose les deux sur la même page. */
  --marque: #162765;
  --marque-clair: #18447c;
  --marque-accent: #33bac6;
  --marque-fond: #eef1f8;
  --marque-degrade: linear-gradient(135deg, #162765 0%, #18447c 45%, #1d96b4 100%);

  /* Cotations. Chaque état a SA couleur — « non évalué » ne doit ressembler à aucun verdict. */
  --conforme: #17803d;
  --conforme-fond: #e8f6ed;
  --ameliorer: #a16207;
  --ameliorer-fond: #fdf6e3;
  --insuffisant: #c2410c;
  --insuffisant-fond: #fdefe6;
  --non-conforme: #b3261e;
  --non-conforme-fond: #fdecea;
  --non-evalue: #4b5563;
  --non-evalue-fond: #eceef1;
  --hors-perimetre: #6d28d9;
  --hors-perimetre-fond: #f3ecfd;
  --justifiee: #0e7490;
  --justifiee-fond: #e6f6fa;

  --rayon: 10px;
  --ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --pile: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--pile);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marque); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Ossature ──────────────────────────────────────────────────────────────────────────── */
.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--bord);
  position: sticky;
  top: 0;
  z-index: 20;
}
.entete-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
}
/* ── Logo ──────────────────────────────────────────────────────────────────────────────────
   Le fichier fait 720 × 232 px, soit un rapport de 3,103. Les DEUX dimensions sont écrites
   dans le HTML (`width`/`height`) : le navigateur réserve alors la place AVANT que l'image
   n'arrive, et la page ne saute pas au chargement. Sans elles, l'en-tête se décale au moment
   où le logo apparaît — c'est le décalage cumulé de mise en page, et c'est aussi ce qui fait
   cliquer à côté d'un bouton qui vient de bouger.

   La hauteur d'affichage commande, la largeur suit le rapport. Servir un fichier de 720 px de
   large pour 108 px affichés n'est pas du gaspillage : c'est ce qui le garde net sur les
   écrans à haute densité, où 108 points logiques valent 216 ou 324 pixels réels. */
.logo { display: block; height: 30px; width: auto; }
.logo-connexion { height: 62px; width: auto; margin: 0 auto 20px; display: block; }

.marque { display: flex; align-items: center; gap: 10px; }
/* Le libellé qui accompagne le logo dans l'en-tête. Le logo porte déjà le nom « Luxgap » :
   répéter « LuxGap » à côté ferait doublon. On nomme donc le PRODUIT, pas la société. */
.marque-produit {
  font-size: 14px;
  color: var(--texte-doux);
  padding-left: 11px;
  border-left: 1px solid var(--bord);
  white-space: nowrap;
}
@media (max-width: 620px) { .marque-produit { display: none; } }

nav.onglets { display: flex; gap: 2px; margin-left: auto; }
nav.onglets button {
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--texte-doux);
  padding: 8px 13px;
  border-radius: 8px;
  cursor: pointer;
}
nav.onglets button:hover { background: var(--surface-2); color: var(--texte); }
nav.onglets button[aria-current="page"] { background: var(--marque-fond); color: var(--marque); font-weight: 600; }

main { max-width: 1180px; margin: 0 auto; padding: 26px 20px 70px; }

h1 { font-size: 25px; margin: 0 0 4px; letter-spacing: -.02em; }
h2 { font-size: 18px; margin: 30px 0 12px; letter-spacing: -.01em; }
h3 { font-size: 15px; margin: 0 0 6px; }
.sous-titre { color: var(--texte-doux); margin: 0 0 22px; }

/* ── Cartes et grilles ─────────────────────────────────────────────────────────────────── */
.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 18px;
}
.grille { display: grid; gap: 14px; }
.grille.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grille.k3, .grille.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grille.k2, .grille.k3, .grille.k4 { grid-template-columns: 1fr; } }

.chiffre { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.chiffre.muet { color: var(--texte-faible); font-size: 20px; font-weight: 600; }
.etiquette { color: var(--texte-doux); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }

/* ── Cotations ─────────────────────────────────────────────────────────────────────────── */
.cote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.cote::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cote-conforme { color: var(--conforme); background: var(--conforme-fond); border-color: #bfe3cd; }
.cote-a-ameliorer { color: var(--ameliorer); background: var(--ameliorer-fond); border-color: #ecdcb0; }
.cote-insuffisant { color: var(--insuffisant); background: var(--insuffisant-fond); border-color: #f3ccb6; }
.cote-non-conforme { color: var(--non-conforme); background: var(--non-conforme-fond); border-color: #f3c4c0; }
/* « Non évalué » est volontairement NEUTRE et rayé : il ne doit ressembler à aucun verdict. */
.cote-non-evalue { color: var(--non-evalue); background: var(--non-evalue-fond); border-color: var(--bord-fort); border-style: dashed; }
.cote-hors-perimetre-technique { color: var(--hors-perimetre); background: var(--hors-perimetre-fond); border-color: #ddccf7; }
.cote-justifiee-par-le-client { color: var(--justifiee); background: var(--justifiee-fond); border-color: #b9e2ec; }

.grav { font-weight: 600; font-size: 12.5px; }
.grav-critique { color: var(--non-conforme); }
.grav-elevee { color: var(--insuffisant); }
.grav-moyenne { color: var(--ameliorer); }
.grav-faible { color: var(--texte-doux); }

/* ── Mesures de conformité ─────────────────────────────────────────────────────────────── */
.mesure {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  margin-bottom: 10px;
  overflow: hidden;
}
.mesure > summary {
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  list-style: none;
}
.mesure > summary::-webkit-details-marker { display: none; }
.mesure > summary:hover { background: var(--surface-2); }
.mesure-ref {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--texte-doux);
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
  margin-top: 1px;
}
.mesure-titre { flex: 1; font-weight: 600; }
.mesure-detail { padding: 0 16px 16px; border-top: 1px solid var(--bord); }
.bloc { margin-top: 14px; }
.bloc > .etiquette { display: block; margin-bottom: 4px; }
.bloc p { margin: 0; color: var(--texte-doux); }
.exigence {
  border-left: 3px solid var(--bord-fort);
  padding-left: 12px;
  font-style: italic;
  color: var(--texte-doux);
}
ul.preuves { margin: 4px 0 0; padding-left: 20px; color: var(--texte-doux); }
ul.preuves li { margin: 2px 0; }

/* ── Tableaux ──────────────────────────────────────────────────────────────────────────── */
.tableau-enveloppe { overflow-x: auto; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 10px 14px; background: var(--surface-2); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); border-bottom: 1px solid var(--bord); }
td { padding: 11px 14px; border-bottom: 1px solid var(--bord); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }

/* ── Encarts ───────────────────────────────────────────────────────────────────────────── */
.encart { border-radius: var(--rayon); padding: 13px 15px; margin: 14px 0; border: 1px solid; font-size: 14px; }
.encart-info { background: var(--marque-fond); border-color: #c3d8ff; color: #0a3f9e; }
.encart-attention { background: var(--ameliorer-fond); border-color: #ecdcb0; color: #7a4a06; }
.encart-neutre { background: var(--non-evalue-fond); border-color: var(--bord-fort); color: var(--non-evalue); }
.encart b { font-weight: 700; }

/* ── Formulaires et boutons ────────────────────────────────────────────────────────────── */
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; }
input, select, textarea {
  width: 100%;
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--bord-fort);
  border-radius: 8px;
  background: var(--surface);
  color: var(--texte);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marque); outline-offset: -1px; border-color: var(--marque); }
textarea { min-height: 78px; resize: vertical; }

.bouton {
  font: inherit;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--marque);
  background: var(--marque);
  color: #fff;
  cursor: pointer;
}
.bouton:hover { filter: brightness(1.07); }
.bouton:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.bouton.secondaire { background: var(--surface); color: var(--texte); border-color: var(--bord-fort); }
.bouton.secondaire:hover { background: var(--surface-2); filter: none; }
.bouton.petit { padding: 5px 11px; font-size: 13px; }

/* ── Connexion ─────────────────────────────────────────────────────────────────────────── */
.connexion { max-width: 400px; margin: 9vh auto; }
.connexion .carte { padding: 26px; }
.erreur { color: var(--non-conforme); background: var(--non-conforme-fond); border: 1px solid #f3c4c0; padding: 10px 12px; border-radius: 8px; margin-top: 12px; font-size: 14px; }

/* ── Bandeau d'essai ───────────────────────────────────────────────────────────────────── */
.bandeau {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 16px; border-radius: var(--rayon); margin-bottom: 20px;
  border: 1px solid;
}
.bandeau-essai { background: var(--marque-fond); border-color: #c3d8ff; color: #0a3f9e; }
.bandeau-expire { background: var(--ameliorer-fond); border-color: #ecdcb0; color: #7a4a06; }
.bandeau strong { font-size: 15px; }

.pied { color: var(--texte-faible); font-size: 13px; text-align: center; padding: 26px 0 0; }
.rien { color: var(--texte-faible); font-style: italic; padding: 22px; text-align: center; }
.fraicheur { font-size: 13px; color: var(--texte-doux); }

/* Titre sous le logo, sur la page de connexion. Discret : le logo porte l'identité, ce
   libellé ne fait que dire de quel service il s'agit. */
.connexion-titre {
  text-align: center;
  color: var(--texte-doux);
  margin: 0 0 18px;
  font-size: 15px;
  letter-spacing: .01em;
}

/* ── Connexion Microsoft ───────────────────────────────────────────────────────────────── */
.separateur {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--texte-faible);
  font-size: 13px;
}
.separateur::before, .separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bord);
}

/* Le bouton Microsoft suit les consignes de marque : fond blanc, bord gris, texte sombre.
   Le teindre aux couleurs du portail le rendrait moins reconnaissable — or tout l'intérêt est
   qu'un salarié identifie d'un coup d'œil qu'il s'agit de SON compte professionnel. */
.bouton-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--bord-fort);
  border-radius: 8px;
  background: var(--surface);
  color: var(--texte);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
}
.bouton-sso:hover { background: var(--surface-2); text-decoration: none; }
.bouton-sso:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }

.sso-aide {
  margin: 9px 0 0;
  text-align: center;
  color: var(--texte-faible);
  font-size: 12.5px;
}

/* ── Utilitaires ───────────────────────────────────────────────────────────────────────────
   Ces classes remplacent des attributs `style` inline. Ce n'est pas une préférence de style
   d'écriture : la politique de sécurité de contenu impose `style-src 'self'`, qui BLOQUE tout
   attribut `style=`. Le navigateur ne s'en plaint qu'en console — la page s'affiche, de
   travers, et personne ne fait le lien. Vingt règles de mise en page étaient ainsi ignorées
   en silence en production.

   L'autre issue aurait été d'ajouter `'unsafe-inline'` à `style-src`. Refusée : sur un portail
   qui affiche les rapports d'audit de nos clients, autoriser l'injection de style rouvre une
   voie d'exfiltration discrète (sélecteur d'attribut + `background-image`), et ce serait
   affaiblir une protection pour épargner une heure de travail. */
.pleine-largeur { width: 100%; }
.mt-3  { margin-top: 3px; }
.mt-6  { margin-top: 6px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; }
.mb-0  { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.faible { color: var(--texte-faible); }

.legende-carte { margin: 0 0 12px; color: var(--texte-doux); font-size: 14px; }
.carte-formulaire { margin-top: 16px; max-width: 620px; }
.cellule-desc { color: var(--texte-doux); font-size: 13.5px; }
.note-attention { color: var(--ameliorer); margin-top: 3px; }
.col-gravite { width: 90px; }
.col-gravite-etroite { width: 70px; }