/* =====================================================================
   SÉCURITÉ & CONFIDENTIALITÉ
   =====================================================================

   L'ancien bloc était quatre paragraphes numérotés, séparés par des
   <br>, dans une boîte grise de 250 px qui défilait. Personne ne lit
   cela — et c'est un problème, parce que la question posée est très
   concrète : « où sont les cotes de mon client ? »

   Le texte est maintenant rangé en trois zones, et chaque zone porte
   une couleur du vocabulaire, la même que partout ailleurs :

       vert   (--role-acquis)   ce qui reste ici     — acquis
       laiton (--role-attente)  ce qui part          — à savoir
       rouge  (--role-couper)   ce qui devient public — à décider

   Un menuisier doit pouvoir répondre en dix secondes, sans lire une
   ligne de juridique. Les couleurs font ce travail avant les mots.

   La fenêtre passe de 450 à 560 px et de 250 à 62 vh de contenu
   déroulant : le texte a triplé, le laisser dans l'ancienne boîte
   l'aurait rendu illisible pour de bon.
   ===================================================================== */

.privacy-modal {
  max-width: 560px;
  text-align: left;
  padding: clamp(22px, 4vw, 30px);
}

/* ---------------------------------------------------------------------
   L'EN-TÊTE
   ---------------------------------------------------------------------
   Le titre portait un style en dur dans le HTML — couleur et corps
   écrits sur la balise. Il rentre dans la feuille avec les autres.
   --------------------------------------------------------------------- */

.priv-entete { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: center; }
.priv-sceau {
  grid-row: span 2; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  color: var(--role-acquis);
  background: color-mix(in srgb, var(--role-acquis) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--role-acquis) 30%, transparent);
}
.priv-sceau svg { width: 23px; height: 23px; }
.privacy-modal h3 {
  margin: 0; font-family: var(--police-titre, inherit);
  font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--texte);
}
.priv-chapo { margin: 2px 0 0; font-size: .85rem; color: var(--texte-doux); }


/* ---------------------------------------------------------------------
   LES TROIS ZONES
   --------------------------------------------------------------------- */

.privacy-content {
  max-height: 62vh;
  margin: 20px 0 16px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: .855rem;
  line-height: 1.6;
  color: var(--texte-doux);
  /* Le défilement se voit : sans cela, on croit avoir tout lu alors que
     la moitié du texte est plus bas. */
  scrollbar-width: thin;
}

.priv-zone {
  padding: 13px 15px;
  border-radius: var(--rayon-s, 10px);
  border: 1px solid var(--filet);
  background: var(--champ);
}
.priv-zone + .priv-zone { margin-top: 10px; }

.priv-zone h4 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 9px;
  font-size: .845rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--texte);
}

/* La pastille porte la couleur du rôle : on la voit avant de lire le
   titre, et c'est elle qui répond à la question posée. */
.priv-pastille {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: currentColor;
}
.priv-zone-local  h4 { color: var(--role-acquis); }
.priv-zone-compte h4 { color: var(--role-attente); }
.priv-zone-public h4 { color: var(--role-couper); }
.priv-zone-local  { border-left: 2px solid var(--role-acquis); }
.priv-zone-compte { border-left: 2px solid var(--role-attente); }
.priv-zone-public { border-left: 2px solid var(--role-couper); }

.priv-zone ul { margin: 0; padding-left: 17px; }
.priv-zone li { margin-bottom: 4px; }
.priv-zone li::marker { color: var(--texte-doux); }
.priv-zone p { margin: 0; }
.priv-zone h4 + p, .priv-zone p + p { margin-top: 8px; }
.priv-note { font-size: .8rem; opacity: .88; margin-top: 9px !important; }
.priv-zone strong { color: var(--texte); font-weight: 700; }

/* Les deux dernières zones ne classent rien : elles avertissent et elles
   informent. Pas de pastille, pas de filet coloré. */
.priv-zone-regles h4, .priv-zone-vous h4 { color: var(--texte); }


/* ---------------------------------------------------------------------
   LES BOUTONS
   ---------------------------------------------------------------------
   « J'ACCEPTE » et « REFUSER » étaient en capitales. C'étaient les deux
   derniers de l'application — les autres ont été repris avec le portail.

   Et « Refuser » ne refusait rien : il rechargeait la page, qui
   reposait la même question. Un bouton qui tourne en rond est une
   mauvaise manière. On ne change pas le comportement — c'est votre
   décision, pas la mienne — mais la fenêtre le dit maintenant en toutes
   lettres sous les boutons, au lieu de le révéler après le clic.
   --------------------------------------------------------------------- */

.btn-accept-priv, .btn-refuse-priv { text-transform: none; letter-spacing: normal; }
.priv-pied {
  margin: 10px 0 0; text-align: center;
  font-size: .74rem; color: var(--texte-doux);
}