/* ===========================================================================
   ViSAgree — Raffinage premium de l'APPLICATION
   ---------------------------------------------------------------------------
   Chargé APRÈS style.css et uniquement hors du site public (voir layout.php).
   Il ne réécrit AUCUNE structure ni aucune grille : il affine uniquement
   l'apparence pour que les écrans de travail (tableau de bord, dossiers,
   campagnes, contrats, espace de la personne signataire) atteignent le même
   niveau de finition que la vitrine premium.

   Règle tenue : aucune couleur codée en dur hors des variables de la charte.
   =========================================================================== */

/* --- 1. Échelle de finesse -------------------------------------------------
   On étend la charte existante sans la remplacer : profondeur en couches
   (jamais d'ombre dure), rayons cohérents, transitions courtes. */
:root {
  --ap-shadow-1: 0 1px 2px rgba(30, 27, 46, .04), 0 4px 14px rgba(30, 27, 46, .05);
  --ap-shadow-2: 0 2px 4px rgba(30, 27, 46, .05), 0 12px 32px rgba(30, 27, 46, .09);
  --ap-shadow-brand: 0 8px 22px rgba(108, 76, 224, .24);
  --ap-ring: 0 0 0 3px rgba(108, 76, 224, .22);
  --ap-ease: cubic-bezier(.22, .61, .36, 1);
  --ap-fs-sm: 13.5px;
}

/* --- 2. Fond et respiration ------------------------------------------------
   Un fond très légèrement dégradé donne de la profondeur aux cartes blanches
   qui le recouvrent, sans jamais gêner la lecture.
   Pas de `background-attachment: fixed` : sur téléphone, il coûte cher au
   défilement et provoque des saccades. */
body {
  background:
    radial-gradient(1200px 520px at 50% -280px, #F1EEFF 0%, rgba(241, 238, 255, 0) 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Titres : interlettrage resserré et graisse franche = tenue visuelle. */
h1 { font-size: 25px; letter-spacing: -.022em; }
h2 { font-size: 19px; letter-spacing: -.018em; }
h3 { letter-spacing: -.012em; }
p { line-height: 1.6; }

/* `.hello` — interpellation en haut des écrans de travail. */
.hello { letter-spacing: -.022em; }
.section-title {
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 10px;
}
.section-title:first-child { margin-top: 0; }
.muted { color: var(--muted); }
.grow { flex: 1 1 auto; min-width: 0; }
/* Volontairement AUCUNE redéfinition de .tiny, .mb-0 ni .mt-12 : elles
   existent déjà dans style.css et .tiny y est utilisé dans 36 fichiers.
   Le passer de 12 px à 13.5 px ici changerait tout le texte secondaire de
   l'application sans le moindre bénéfice. */

/* --- 3. En-tête ------------------------------------------------------------
   Même barre, mais posée : un filet net et une ombre très douce qui la
   détachent du contenu quand on fait défiler. */
.app-header {
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(30, 27, 46, .03), 0 6px 18px -14px rgba(30, 27, 46, .22);
}
.app-header .inner { gap: 10px; }
.brand-name { letter-spacing: -.012em; }
.brand-sub { color: var(--muted); }

/* --- 4. Cartes et sections -------------------------------------------------
   Rayon ramené à 16 px (plus sobre que 18), filet de 1 px : la carte se
   détache par sa bordure autant que par son ombre, ce qui reste lisible même
   sur un écran de téléphone peu lumineux. */
.card {
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--ap-shadow-1);
  padding: 18px;
  transition: box-shadow .18s var(--ap-ease), border-color .18s var(--ap-ease);
}
.card + .card { margin-top: 14px; }
.card-tight { padding: 14px; border-radius: 14px; }

/* Une carte cliquable doit le montrer avant le clic, pas après. */
a.card:hover, .card[role="button"]:hover, .card.hoverable:hover {
  border-color: #DCD7F0;
  box-shadow: var(--ap-shadow-2);
}
a.card, .card[role="button"] { -webkit-tap-highlight-color: transparent; }

/* --- 5. Boutons ------------------------------------------------------------
   Angles plus francs (8 px) : c'est plus pro et plus net qu'une pastille.
   La hauteur reste confortable au doigt, sans jamais devenir massive. */
.btn {
  border-radius: 8px;
  padding: 11px 18px;
  font-weight: 650;
  letter-spacing: .005em;
  transition: transform .12s var(--ap-ease), box-shadow .16s var(--ap-ease), background .16s var(--ap-ease);
}
.btn:hover { box-shadow: var(--ap-shadow-brand); }
.btn:active { transform: translateY(1px) scale(.995); }
.btn-sm { border-radius: 7px; padding: 8px 14px; font-size: 13.5px; }
.btn-block { width: 100%; }

/* Bouton secondaire (s'il est stylé par une classe locale) : on l'aligne. */
.btn-outline, .btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn-outline:hover, .btn-ghost:hover {
  border-color: #D6D2EA;
  box-shadow: var(--ap-shadow-1);
}

/* Icônes d'action de l'en-tête : cible tactile stable. */
.icon-btn {
  border-radius: 9px;
  transition: background .16s var(--ap-ease), transform .12s var(--ap-ease);
}
.icon-btn:hover { background: var(--brand-soft); }

/* --- 6. Champs de saisie ---------------------------------------------------
   16 px sur le champ : en dessous, iOS zoome tout seul à la mise au point.
   On cible les champs TEXTE uniquement. Un sélecteur `input` nu toucherait
   aussi les cases à cocher et les boutons radio (14 cases et 2 radios dans
   l'application), qui deviendraient des carrés arrondis avec bordure. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
select, textarea {
  font-family: inherit;
  font-size: 16px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  transition: border-color .16s var(--ap-ease), box-shadow .16s var(--ap-ease);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ap-ring);
}
input::placeholder, textarea::placeholder { color: #A8A5BB; }

/* Cases à cocher et boutons radio : on garde la couleur de la charte, sans
   toucher à leur taille ni à leur forme (déjà réglées par style.css). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }

/* --- 7. Chiffres clés ------------------------------------------------------
   Les 4 compteurs du tableau de bord et des campagnes : même traitement
   partout, pour qu'un chiffre se reconnaisse au premier regard. */
.stat-grid { gap: 12px; }
.stat {
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--ap-shadow-1);
  padding: 16px;
}
.stat b, .stat strong { letter-spacing: -.02em; }

/* --- 8. Pastilles, étiquettes, puces --------------------------------------- */
.badge {
  border-radius: 6px;
  font-weight: 650;
  letter-spacing: .01em;
}
/* Teintes de TEXTE : on n'utilise pas --ok / --warn bruts. Sur leur fond clair,
   l'orange vif ne donne que 2,9 de contraste et le vert 3,0 (la norme demande
   4,5) : la pastille serait illisible. Ces teintes assombries sont les mêmes
   que celles de style.css — ce fichier étant chargé APRÈS, il les écraserait
   sinon, et la correction ne servirait à rien dans l'application. */
.badge-ok { background: var(--ok-soft); color: #0B6B37; }
.badge-warn { background: var(--warn-soft); color: #8A5300; }
.badge-danger { background: var(--danger-soft); color: #A81C1C; }
.badge-mute { background: #F0EFF6; color: var(--ink-2); }

/* --- 9. Navigation ---------------------------------------------------------
   Barre du bas : plus de contraste sur l'onglet actif, sans crier.
   Barre de repérage : un filet bas discret, jamais deux traits collés. */
.bottom-nav {
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px -18px rgba(30, 27, 46, .35);
}
.bottom-nav a { transition: color .16s var(--ap-ease), transform .12s var(--ap-ease); }
.bottom-nav a .pill { transition: background .16s var(--ap-ease); }

.navband {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.sectab {
  border-radius: 8px;
  font-weight: 600;
  transition: background .16s var(--ap-ease), color .16s var(--ap-ease);
}
.sectab.on { background: var(--brand-soft); color: var(--brand-dark); }
.crumbs { color: var(--muted); }
.crumbs .here { color: var(--ink); font-weight: 600; }

/* Les deux promesses de la maison — on NE redéfinit PAS leur fond ni leur
   bordure : nav.css les pose déjà sur `--brand-soft`, avec un état actif en
   dégradé, et c'est précisément ce contraste qui les met en avant. Les
   repeindre en blanc les rendrait MOINS visibles, à l'inverse de l'intention.
   On ajoute seulement une transition douce et un enfoncement au tap. */
.promesse {
  transition: background .16s var(--ap-ease), border-color .16s var(--ap-ease),
              box-shadow .16s var(--ap-ease), transform .12s var(--ap-ease);
}
.promesse:active { transform: scale(.985); }

/* --- 10. Listes et lignes de relevé ----------------------------------------
   On NE touche PAS aux tableaux : style.css pose déjà `.table` (largeur,
   bordures, taille de police) et les tableaux d'aperçu des campagnes ont
   leurs propres règles. Une règle `th` globale repeindrait tous les en-têtes
   de l'application au passage — pour aucun bénéfice. */
.card-list > * + * { margin-top: 12px; }
.recap-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.recap-line:last-child { border-bottom: 0; }
.recap-line span { color: var(--ink-2); }
.recap-line strong { letter-spacing: -.01em; }

/* --- 11. Messages ----------------------------------------------------------
   On ne redéfinit PAS `.empty` : style.css s'en sert déjà pour les états
   « Chargement… », et plusieurs écrans y mettent une icône de rechargement.
   Lui ajouter un cadre en pointillés encadrerait aussi ces instants d'attente,
   qui n'ont rien d'un écran vide — c'était une dégradation, pas un progrès. */

/* --- 12. Accessibilité -----------------------------------------------------
   Un contour de focus visible au clavier (souris et doigt ne le voient pas),
   et le respect du réglage « réduire les animations » du système. */
a:focus-visible, button:focus-visible, .btn:focus-visible .icon-btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- 13. Grands écrans -----------------------------------------------------
   Sur ordinateur, le contenu se centre au lieu de s'étirer bord à bord : les
   lignes de texte deviennent lisibles et l'ensemble paraît maîtrisé.
   Deux conteneurs coexistent dans l'application : `.wrap` (la grande majorité
   des écrans de travail : tableau de bord, campagnes, dossiers, contrats,
   formulaires) et `.app-main` (espace de la personne signataire, boutique).
   Les deux sont traités, sinon la moitié de l'application resterait étirée. */
@media (min-width: 768px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .app-main { max-width: 940px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
  .stat-grid { gap: 14px; }
}
@media (min-width: 1100px) {
  .wrap { max-width: 1040px; }
  .app-main { max-width: 1080px; }
}

/* --- 14. Impression -------------------------------------------------------- */
@media print {
  .app-header, .bottom-nav, .navband, .promesses, .install-banner { display: none !important; }
  .card { box-shadow: none; border: 1px solid #DDD; }
}