/* =========================================================================
   Avant l'Alerte — la page du plan familial
   Chargée par plan-familial.html seulement. Tout vient des jetons de
   styles.css : aucune taille, aucun rayon, aucune couleur écrits en dur,
   sauf en impression, où l'on travaille en millimètres et en noir.
   ========================================================================= */

/* ---------- À l'écran ---------- */

.plan-corps { padding-block: clamp(2rem, 4vw, 3.5rem); }

.plan-actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin: 1.5rem 0 .25rem; }
.plan-etat { min-height: 1.6em; margin: 0 0 1.25rem; font-size: var(--t-sm); color: var(--muted); }

.plan-feuille { display: grid; gap: 1.1rem; }

.plan-bloc {
  margin: 0; padding: 1rem 1.3rem 1.3rem; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
}
.plan-bloc legend {
  padding: 0 .5rem; margin-left: -.5rem;
  font-family: var(--serif); font-size: var(--t-xl); font-weight: 600; line-height: 1.2;
}
.plan-bloc > .tiny { margin: 0 0 1rem; max-width: 62ch; }

.plan-grille {
  display: grid; gap: .95rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.plan-champ { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.plan-champ--large { grid-column: 1 / -1; }
.plan-champ label { font-size: var(--t-md); font-weight: 650; color: var(--ink-2); line-height: 1.35; }

/* 17 px (--t-base) : en dessous de 16 px, iOS zoome la page au focus. */
.plan-champ input, .plan-champ textarea {
  width: 100%; font: inherit; font-size: var(--t-base); color: var(--ink);
  padding: .6rem .75rem;
  border: 1px solid var(--muted); border-radius: var(--r-sm); background: var(--surface);
}
.plan-champ textarea { min-height: 4.6rem; line-height: 1.45; resize: vertical; }
.plan-champ input::placeholder, .plan-champ textarea::placeholder { color: var(--muted); opacity: 1; }

.plan-numeros { padding: .25rem .25rem 0; }
.plan-numeros h2 { font-size: var(--t-xl); margin-bottom: .6rem; }
.plan-numeros dl { display: grid; gap: .35rem 1.5rem; margin: 0 0 .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.plan-numeros dl > div { display: flex; gap: .8rem; align-items: baseline; }
.plan-numeros dt { min-width: 2.6rem; font-family: var(--serif); font-size: var(--t-xl); font-weight: 600; color: var(--brand-700); }
.plan-numeros dd { margin: 0; color: var(--ink-2); }

/* La carte à plier : deux panneaux côte à côte, ou l'un sous l'autre sur un écran
   étroit. Les lignes vides restent des lignes : on peut finir à la main. */
.plan-carte-zone { margin-top: 2.5rem; }
.plan-carte-zone h2 { font-size: var(--t-xl); }
/* À taille réelle (5 octobre 2026) : deux panneaux de 85 × 55 mm, la carte pliée au milieu.
   Les tailles sont en points, comme sur le papier ; plan.js vérifie que rien ne dépasse avant
   d'autoriser l'impression (`.plan-carte--deborde`). */
.plan-carte {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 170mm; max-width: 100%;
  border: 1px dashed var(--ink-2); border-radius: 0; background: var(--surface);
}
.plan-carte__pan {
  height: 55mm; min-height: 55mm; padding: 3mm; min-width: 0; overflow: auto;
  background: #fff; color: var(--ink);
}
.plan-carte__pan + .plan-carte__pan { border-left: 1px dashed var(--ink-2); }
.plan-carte h3 { margin: 0 0 2mm; font-family: var(--serif); font-size: 10pt; line-height: 1.1; }
.plan-carte dl { margin: 0; }
.plan-carte dt { font-size: 7.5pt; font-weight: 650; line-height: 1.15; text-transform: uppercase; color: var(--ink-2); }
.plan-carte dd {
  margin: 0 0 1.5mm; padding: 0; border-bottom: 1px solid var(--line-2);
  white-space: pre-line; overflow-wrap: anywhere; font-size: 8pt; line-height: 1.15; color: var(--ink);
}
.plan-carte__pied { margin: 1mm 0 0; font-size: 7.5pt; font-weight: 650; line-height: 1.2; white-space: pre-line; color: var(--ink); }
.plan-carte--deborde { border: 2px solid var(--clay); }

@media (max-width: 620px) {
  .plan-bloc { padding: .9rem 1rem 1.1rem; }
  .plan-actions .btn { flex: 1 1 100%; }
}

/* ---------- Impression ---------- */

@media print {
  @page { size: A4; margin: 12mm; }

  .no-print, .plan-actions, .plan-etat, .plan-entete .lead { display: none !important; }

  body { font-size: 10pt; }
  .plan-entete { padding: 0 0 2.5mm; }
  .plan-entete h1 { margin: 0; font-size: 16pt; }
  .plan-entete .eyebrow { margin-bottom: 1mm; }
  .plan-corps, .section--surface { padding: 0; background: #fff; border: 0; }

  /* « Sur une feuille » : vide, la feuille tient sur UNE page A4 (273 mm utiles avec
     les marges de 12 mm). Avant le 24 septembre 2026, elle en prenait 367 et le bloc
     des numéros passait en page 2. Les lignes à écrire gardent 6,5 mm : c'est le
     minimum pour une écriture à la main. Un texte long agrandit la feuille, il n'est
     jamais coupé : une feuille bien remplie peut alors déborder. */
  .plan-feuille { gap: 2mm; }
  .plan-bloc { padding: .8mm 3.5mm 2mm; border: 1px solid #777; border-radius: 0; background: #fff; break-inside: avoid; }
  .plan-bloc legend { font-size: 10.5pt; }
  .plan-bloc > .tiny { max-width: none; margin: 0 0 1.2mm; font-size: 7.5pt; line-height: 1.3; color: #333; }
  .plan-grille { gap: 1.2mm 5mm; }
  .plan-champ { gap: 0; }
  .plan-champ label { font-size: 8pt; line-height: 1.25; color: #222; }
  /* Deux champs larges à l'écran, côte à côte sur papier : une ligne de moins, sans
     laquelle la feuille vide frôle la seconde page. */
  .plan-champ--demi-a4 { grid-column: auto; }
  /* Des lignes à écrire : un cadre gris vide ne se remplit pas au stylo. */
  .plan-champ input, .plan-champ textarea {
    min-height: 7mm; padding: 1mm 0; border: 0; border-bottom: 1px solid #444; border-radius: 0;
    background: none; font-size: 10pt; color: #000; resize: none;
  }
  .plan-champ textarea { min-height: 14mm; overflow: visible; }
  .plan-champ input::placeholder, .plan-champ textarea::placeholder { color: transparent; }

  .plan-numeros { break-inside: avoid; margin-top: 0; padding: 0; }
  .plan-numeros h2 { font-size: 11pt; margin: 0 0 1mm; }
  .plan-numeros dl { grid-template-columns: repeat(3, 1fr); gap: .8mm 4mm; margin: 0 0 1mm; }
  .plan-numeros dl > div { gap: 2mm; }
  .plan-numeros dt { min-width: 7mm; font-size: 11pt; line-height: 1.2; color: #000; }
  .plan-numeros dd { font-size: 8pt; line-height: 1.25; color: #222; }
  .plan-numeros .tiny { margin: 0; font-size: 8pt; color: #333; }

  /* La carte fait partie de sa propre impression, pas de celle de la feuille. */
  .plan-carte-zone { display: none; }
  .plan-carte { width: 180mm; max-width: 100%; grid-template-columns: 1fr 1fr; border-color: #444; break-inside: avoid; }
  .plan-carte__pan { padding: 4mm; }
  .plan-carte__pan + .plan-carte__pan { border-top: 0; border-left: 1px dashed #444; }
  .plan-carte h3 { font-size: 10pt; margin-bottom: 2mm; }
  .plan-carte dt { font-size: 7.5pt; color: #333; }
  .plan-carte dd { font-size: 8.5pt; min-height: 5mm; border-bottom-color: #555; margin-bottom: 1.5mm; }
  .plan-carte__pied { font-size: 8pt; color: #000; }

  body.imprime-carte .plan-entete,
  body.imprime-carte .plan-feuille { display: none !important; }
  body.imprime-carte .plan-carte-zone { display: block; margin: 0; }
  body.imprime-carte .plan-carte-zone > :not(.plan-carte) { display: none !important; }
}


/* ---------- Où l'on en est ---------- */
.plan-essentiels { margin: .5rem 0 0; font-size: var(--t-md); color: var(--ink-2); }


/* Parcours guidé, cartes individuelles et document à deux niveaux. */
[hidden] { display: none !important; }
.plan-entete { padding-block: 2rem 1.2rem; }
.plan-entete h1 { max-width: 20ch; }
.plan-entete .lead { margin-bottom: 1rem; }
.plan-demarrer { display:flex; flex-wrap:wrap; gap:.75rem; }
.plan-exemple { margin-top:1rem; }
.plan-exemple summary { cursor:pointer; font-weight:650; color:var(--brand-700); padding:.5rem 0; }
.plan-exemple__fiche { border:1px solid var(--line); background:var(--paper); padding:1.3rem; margin-top:.6rem; border-radius:var(--r-md); }
.plan-exemple dt { font-weight:650; margin-top:.8rem; }
.plan-exemple dd { margin-left:0; }
.plan-preparer { scroll-margin-top:6rem; }
.plan-preparer h2 { margin-bottom:.4rem; }
.plan-progression { border-left:3px solid var(--brand-700); padding:.5rem 1rem; margin:1rem 0; }
.plan-progression progress { width:100%; height:.45rem; accent-color:var(--brand-700); }
.plan-progression p { margin:.4rem 0; }
.plan-progression a { font-size:var(--t-sm); padding-block:.7rem; }
.plan-options { margin-top:1rem; padding:1.2rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
.plan-option { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.7rem 0; font-weight:600; }
.plan-option select, .plan-carte-reglages select { padding:.65rem; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); font:inherit; max-width:100%; color:var(--ink); }
.plan-enfant { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.plan-enfant h3 { font-size:var(--t-md); }
#plan-ajouter-enfant { margin-top:1rem; }
.plan-final { margin-top:2rem; padding:1.4rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
.plan-relecture { display:flex; align-items:flex-start; gap:.65rem; padding:.6rem 0; }
.plan-relecture input { width:1.2rem; height:1.2rem; flex:none; margin-top:.2rem; accent-color:var(--brand-700); }
.plan-carte-reglages { display:grid; gap:.5rem; margin:1rem 0; }
.plan-carte-reglages textarea { width:100%; padding:.65rem; font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-sm); }
.plan-impression { display:none; }
@media screen and (max-width:720px) {
  .plan-carte { grid-template-columns:minmax(0,1fr); width:85mm; }
  .plan-carte__pan + .plan-carte__pan { border-top:1px dashed var(--ink-2); border-left:0; }
  .plan-option { flex-wrap:wrap; }
  .plan-option select { flex:1 1 100%; }
  .plan-demarrer .btn { flex:1 1 100%; }
}
@media print {
  body.plan-active .plan-entete { display:none !important; }
  body.plan-active .container { width:100%; max-width:none; padding:0; margin:0; }
  body.plan-active .plan-corps { margin:0; padding:0; }
  body.plan-active .plan-feuille { display:none !important; }
  body.plan-active .plan-impression { display:block; }
  body.imprime-carte .plan-impression { display:none; }
  .plan-page { height:268mm; box-sizing:border-box; break-after:page; padding:0; }
  .plan-page h1, .plan-annexes h1 { font-size:19pt; line-height:1.2; margin:0 0 3mm; }
  .plan-page .eyebrow { font-size:8pt; margin:0 0 2mm; }
  .plan-print-date { font-size:9pt; margin:0 0 5mm; }
  .plan-resume { display:grid; grid-template-columns:1fr 1fr; gap:3mm; }
  .plan-resume__bloc { min-width:0; height:43mm; border:1px solid #777; padding:3mm; box-sizing:border-box; }
  .plan-resume__bloc h2 { font-size:10pt; margin:0 0 2mm; line-height:1.2; }
  .plan-resume__bloc p { font-size:9pt; line-height:1.3; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; color:#111; }
  .plan-print-urgences { font-size:9pt; font-weight:600; line-height:1.4; white-space:pre-line; margin:5mm 0 3mm; }
  .plan-print-note { font-size:8pt; line-height:1.3; white-space:pre-line; margin:0; }
  .plan-annexes h2 { font-size:13pt; margin:5mm 0 2mm; break-after:avoid; }
  .plan-annexes > p { font-size:9pt; }
  .plan-print-champ { margin-bottom:3mm; }
  .plan-print-champ h3 { font-size:9pt; margin:0 0 1mm; break-after:avoid; }
  .plan-print-champ p { font-size:10pt; line-height:1.3; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; orphans:2; widows:2; }
  body.imprime-carte .plan-carte { width:170mm; max-width:none; grid-template-columns:85mm 85mm; }
  body.imprime-carte .plan-carte__pan { overflow:hidden; }
  body.imprime-carte .plan-carte__pan + .plan-carte__pan { border-top:0; border-left:1px dashed #444; }
}
@media screen {
  .plan-impression--apercu { display:block; overflow:auto; margin:2rem 0; padding:1rem; background:var(--paper-2); border:1px solid var(--line); scroll-margin-top:5rem; }
  .plan-impression--apercu .plan-page { width:186mm; min-height:268mm; padding:6mm; box-sizing:border-box; background:#fff; color:var(--ink); }
  .plan-impression--apercu .plan-page h1 { font-size:19pt; line-height:1.2; margin:0 0 3mm; }
  .plan-impression--apercu .eyebrow { font-size:8pt; margin:0 0 2mm; }
  .plan-impression--apercu .plan-print-date { font-size:9pt; margin:0 0 5mm; }
  .plan-impression--apercu .plan-resume { display:grid; grid-template-columns:1fr 1fr; gap:3mm; }
  .plan-impression--apercu .plan-resume__bloc { min-width:0; height:43mm; border:1px solid var(--muted); padding:3mm; box-sizing:border-box; }
  .plan-impression--apercu .plan-resume__bloc h2 { font-size:10pt; margin:0 0 2mm; line-height:1.2; }
  .plan-impression--apercu .plan-resume__bloc p { font-size:9pt; line-height:1.3; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); }
  .plan-impression--apercu .plan-print-urgences { font-size:9pt; font-weight:600; line-height:1.4; white-space:pre-line; margin:5mm 0 3mm; }
  .plan-impression--apercu .plan-print-note { font-size:8pt; line-height:1.3; white-space:pre-line; margin:0; }
  .plan-impression--apercu .plan-annexes { width:186mm; box-sizing:border-box; margin-top:1rem; padding:6mm; background:#fff; }
  .plan-impression--apercu .plan-annexes h1 { font-size:19pt; }
  .plan-impression--apercu .plan-annexes h2 { font-size:13pt; }
  .plan-impression--apercu .plan-annexes h3 { font-size:9pt; }
  .plan-impression--apercu .plan-print-champ p { font-size:10pt; white-space:pre-wrap; overflow-wrap:anywhere; }
}