/**
 * Le carnet — ce que le prototype ne montrait pas.
 *
 * Ses zones de saisie n'avaient ni étiquette, ni indication d'enregistrement,
 * ni mention de confidentialité. Ces trois éléments sont ajoutés ici ; ils
 * doivent être validés par la cliente, qui a approuvé des écrans qui n'en
 * portaient aucun.
 */

.pp-zone textarea,
.pp-liste-champ {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  resize: vertical;
  font: 400 13.5px/1.6 'Jost', sans-serif;
  color: var(--ink);
  background: #fff;
  outline: none;
}

.pp-zone textarea:focus,
.pp-liste-champ:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(196,120,154,.14); }
.pp-zone textarea[disabled] { background: var(--lavender); color: var(--gray); }

/* .pp-consigne reste, et ne désigne PLUS la question d'une zone : seulement
   une consigne d'accompagnement, dans le portrait, la liste d'alliées, le fil
   du journal et le bloc de suite. Je l'ai retirée en renommant la zone, ce qui
   aurait dépouillé ces cinq rendus en silence. */
.pp-consigne { font-size: 13px; color: var(--gray); margin-bottom: 10px; }

/* ─── LA QUESTION ET SON INTITULÉ ─────────────────────────────────────────
   La question est la SEULE ligne dans la maquette de la cliente : Cormorant
   italique, violet profond, juste au-dessus de la zone. L'intitulé court reste
   offert aux blocs qui en posent un — la fiche projet en a deux niveaux. */

.pp-zone-titre {
	font-size: 14px;
	font-weight: 500;
	color: var(--violet);
	margin-bottom: 4px;
}

.pp-zone-question {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 14px;
	line-height: 1.45;
	color: var(--violet-deep);
	margin-bottom: 8px;
}

/* ─── LE CONTENANT, ET SA VARIANTE ────────────────────────────────────────
   Une carte autour de TOUTES les questions d'une section, comme la maquette —
   et non une carte par question. La variante se porte ici : c'est le seul
   crochet dont une feuille de parcours aura besoin pour changer l'allure du
   carnet sans rien savoir des zones. */

.pp-carnet--carte {
	background: #fff;
	border-radius: var(--radius);
	padding: 24px 26px;
	box-shadow: var(--shadow);
	margin-bottom: 16px;
}

/* L'écart entre deux questions. Le pied de zone réserve déjà une ligne pour
   « Enregistré le… » — sans cette réserve la page saute sous le curseur au
   premier enregistrement. L'écart tient compte de cette ligne. */
.pp-carnet--carte .pp-zone + .pp-zone { margin-top: 6px; }
.pp-carnet--carte .pp-zone-pied { margin-top: 4px; font-size: 11.5px; }


/* La case d'un canevas portait sa boîte par le « card » de la zone. La zone
   n'en porte plus : la case la reprend à son compte. */
.pp-case {
	background: #fff;
	border-radius: var(--radius);
	padding: 18px 20px;
	box-shadow: var(--shadow);
}

.pp-zone-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 8px;
  font-size: 11.5px; color: var(--gray-soft);
}

.pp-etat { min-height: 1em; }
.pp-etat-erreur { color: var(--rose-mauve); }
.pp-partage { display: flex; align-items: center; gap: 6px; color: var(--gray); }

.pp-rubrique { margin-bottom: 18px; }
.pp-rubrique-titre { font-size: 14px; font-weight: 500; color: var(--violet); margin-bottom: 6px; }
.pp-case .stat-label { margin-bottom: 6px; }

.pp-liste-entrees { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pp-entree { padding-right: 8px; }
.pp-entree-retirer {
  border: none; background: none; cursor: pointer;
  color: var(--violet-mid); font-size: 15px; line-height: 1; padding: 0 0 0 6px;
}
.pp-liste-ajout { display: flex; gap: 8px; align-items: center; }
.pp-liste-bouton { border: 1px dashed var(--violet-mid); background: none; cursor: pointer; white-space: nowrap; }

.pp-apercu-note { font-size: 12px; color: var(--gray-soft); font-style: italic; margin: 8px 0 0; }

.pp-journal-entree { margin-bottom: 14px; }
.pp-journal-texte { font-size: 14px; line-height: 1.7; white-space: pre-wrap; margin: 8px 0; }

/* ============ IMPRESSION ============
   L'export du journal passe par l'impression du navigateur : « Enregistrer au
   format PDF » existe partout, y compris sur téléphone, et n'ajoute aucune
   bibliothèque à maintenir. */

@media print {
  .sidebar, .topbar, .sidebar-voile,
  .pp-apercu-barre, .btn-row, #wpadminbar,
  .pp-zone-pied, .pp-liste-ajout, .pp-entree-retirer { display: none !important; }

  .app { display: block; }
  .main, .screen-container { padding: 0; max-width: none; }
  body { background: #fff; font-size: 11pt; }

  .card, .pp-journal-entree {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .section-label { break-after: avoid; page-break-after: avoid; }

  /* Les adresses complètes derrière les liens n'apprennent rien sur papier. */
  a[href]::after { content: none; }
}

.pp-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.pp-reserve { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--ink); }
.pp-chrono-bouton { cursor: pointer; }

.pp-partage-ligne { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; font-size: 13.5px; }
.pp-partage-ligne .dl-meta { display: block; }

/* ─── LA VARIANTE EN GRILLE ───────────────────────────────────────────────
   Une carte par intitulé, deux colonnes. C'est la forme des « quatre
   leviers » : « Mon temps » écrit une fois, ses deux questions dessous. */

.pp-carnet--grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.pp-carnet-groupe {
	background: #fff;
	border-radius: var(--radius);
	padding: 20px 22px;
	box-shadow: var(--shadow);
}

.pp-carnet-groupe-titre {
	font-size: 14px;
	font-weight: 500;
	color: var(--violet);
	margin-bottom: 10px;
}

.pp-carnet--grille .pp-zone + .pp-zone { margin-top: 6px; }
.pp-carnet--grille .pp-zone-pied { margin-top: 4px; font-size: 11.5px; }


@media (max-width: 900px) {
	.pp-carnet--grille { grid-template-columns: 1fr; }
}

/* ─── LE CARNET D'IMPACT : LE RÉSUMÉ ET LE FIL ────────────────────────────
   Ces noms sont, comme ceux de la zone, une interface : une feuille de style
   de parcours s'y accroche, et les renommer la casserait en silence. */

.pp-carnet-resume { display: flex; gap: 14px; margin: 20px 0 0; }

.pp-carnet-chiffre {
	flex: 1;
	background: #fff;
	border-radius: 14px;
	padding: 16px 18px;
	box-shadow: var(--shadow);
}

.pp-carnet-num {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	color: var(--violet);
}

.pp-carnet-quoi { margin-top: 4px; font-size: 11px; letter-spacing: .5px; color: var(--gray); }

.pp-carnet-jauge {
	height: 6px;
	margin-top: 18px;
	border-radius: 6px;
	background: var(--lavender);
	overflow: hidden;
}

.pp-carnet-jauge span {
	display: block;
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--rose), var(--rose-mauve));
}

.pp-fil-ecran {
	background: #fff;
	border-radius: var(--radius);
	padding: 22px 24px;
	box-shadow: var(--shadow);
	margin-bottom: 14px;
}

.pp-fil-tete { display: flex; align-items: center; gap: 14px; }

.pp-fil-ic {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--lavender);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.pp-fil-titres { min-width: 0; }
.pp-fil-nom { display: block; font-size: 14px; font-weight: 500; color: var(--violet); }
.pp-fil-quand { display: block; margin-top: 1px; font-size: 11.5px; color: var(--gray-soft); }
.pp-fil-compte { margin-left: auto; font-size: 11px; letter-spacing: .4px; color: var(--gray-soft); }

.pp-fil-qr { margin-top: 14px; padding-top: 14px; border-top: 1px solid #F3EEF5; }
.pp-fil-qr:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }

.pp-fil-question {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--violet-deep);
	margin-bottom: 6px;
}

.pp-fil-levier {
	display: block;
	margin-bottom: 3px;
	font-family: inherit;
	font-style: normal;
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--rose-mauve);
}

.pp-fil-reponse { font-size: 13.5px; line-height: 1.62; color: #3A2E4A; }
.pp-fil-date { margin-top: 5px; font-size: 11px; color: var(--gray-soft); }

/* Ce qui attend encore. Un tiret plutôt qu'un blanc : le blanc se lit comme un
   défaut d'affichage, le tiret comme une place réservée. */
.pp-fil-vide { font-size: 12.5px; font-style: italic; color: var(--gray-soft); }

.pp-fil-vide::before {
	content: "";
	display: inline-block;
	width: 16px;
	margin-right: 8px;
	border-top: 1px solid var(--rose-soft);
	vertical-align: middle;
}

@media (max-width: 700px) {
	.pp-carnet-resume { flex-direction: column; gap: 10px; }
}

.pp-export { margin-top: 26px; }
.pp-export-aide { margin: 8px 0 0; font-size: 12px; color: var(--gray); }