/* ==================================================================
   Qui je suis : le dossier d'Aaron (24/10/2026)
   ==================================================================
   Chargée après pages.css, qu'elle ne modifie pas. Une chemise
   cartonnée (pages.css) et le papier dedans ; la photo tenue par deux
   coins (la pièce jointe de pages.css) ; les preuves en grands chiffres
   tapés ; le parcours, une bande de lignes reliées par un pointillé,
   qui se tapent quand on descend (pages.js : sans script, tout est là).
   ================================================================== */

.dossier .doc-objet { width: 66px; height: 90px; }
.dossier h1 { text-wrap: balance; }

/* ---------- la présentation : la photo, et deux paragraphes ---------- */
.presentation {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0 clamp(22px, 3.6vw, 36px);
  align-items: start;
  margin-top: clamp(28px, 4.2vw, 40px);
}
.presentation .photo { margin-top: 6px; }
.presentation .piece-cadre { transform: rotate(-1.2deg); }
.presentation-texte p + p { margin-top: 0.8em; }
.en-bref { margin-top: clamp(26px, 4vw, 36px); }
.tampon-dossier { margin: 18px 0 0 4px; }

/* ---------- les preuves : le chiffre tapé, ce qu'il veut dire ---------- */
.preuves { margin-top: 18px; border-top: 1px solid var(--encre); }
.preuves li {
  display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); column-gap: 20px;
  align-items: baseline;
  padding: 14px 0 13px; border-bottom: 1px dotted var(--pointille);
}
.preuve-n { font-family: var(--f-titre); font-weight: 400; font-size: var(--t-h2); line-height: 1; }
.preuves span { text-wrap: pretty; }

/* ---------- ce que je sais faire ---------- */
.savoirs > div { grid-template-columns: fit-content(11em) minmax(20px, 1fr) minmax(0, 64%); }

/* ---------- ce que j'ai livré : deux captures côte à côte ---------- */
.realisations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.realisations .piece { margin-top: 22px; }
.document .aussi { margin-top: 22px; color: var(--encre-2); }
.autres-projets { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--encre-2); align-self: start; }
.autres-projets h3 { margin: 0 0 8px; }
.autres-projets ul { margin: 0; padding: 0; list-style: none; }
.autres-projets li { margin: 0 0 8px; }

/* ---------- le parcours ---------- */
.parcours {
  --marque: 11px;
  position: relative;
  margin-top: 22px;
  padding-left: 28px;
}
/* le fil : un pointillé tapé qui descend le long des étapes */
.parcours::before {
  content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px;
  border-left: 2px dotted var(--pointille);
}
.etape-vie { position: relative; padding: 0 0 26px; }
.etape-vie:last-child { padding-bottom: 0; }
/* la marque de l'étape : une case pleine sur le fil */
.etape-vie::before {
  content: ""; position: absolute; left: calc(-28px + 5px - var(--marque) / 2 + 1px); top: 6px;
  width: var(--marque); height: var(--marque);
  background: var(--encre); border: 2px solid var(--papier);
  box-sizing: content-box;
}
.etape-vie-texte { position: relative; }
.etape-vie-quand {
  color: var(--encre-2);
  font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.3;
  letter-spacing: calc(1em / 27);
}
.document .etape-vie h3 {
  margin: 4px 0 6px;
  font-size: var(--t-h2); line-height: 1;
  letter-spacing: 0; text-transform: none;
  text-wrap: balance;
}
.etape-vie p + p { margin-top: 0; }

/* --- avec le script : les étapes à venir sont encore blanches, celle
   qui arrive se tape (une copie posée sur l'original, cachée aux
   lecteurs d'écran), celles d'avant sont écrites --- */
.parcours-anime .etape-vie.a-taper .etape-vie-texte { visibility: hidden; }
.parcours-anime .etape-vie.a-taper::before { background: transparent; border-color: var(--pointille); }
.parcours-anime .etape-vie.se-tape > .etape-vie-texte:not(.etape-vie-machine) { color: transparent; }
.etape-vie-machine { position: absolute; inset: 0; color: var(--encre); pointer-events: none; }
.etape-vie-machine .etape-vie-quand { color: var(--encre-2); }
.etape-vie-machine .l { visibility: hidden; }
.etape-vie-machine .l.v { visibility: visible; }
.etape-vie-machine .curseur {
  display: inline-block; width: 0.55em; height: 0.95em; margin-right: -0.55em;
  vertical-align: -0.12em;
  background: var(--encre);
}
.etape-vie::before { transition: background-color 0.3s, border-color 0.3s; }

/* ==================================================================
   TÉLÉPHONE
   ================================================================== */
@media (max-width: 760px) {
  .realisations { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dossier .doc-objet { grid-row: 1; width: 44px; height: 60px; }
  .dossier .chapeau { grid-column: 1 / -1; }
  .presentation { grid-template-columns: 1fr; }
  .presentation .photo { max-width: 15rem; margin-bottom: 22px; }
  .preuves li { grid-template-columns: 1fr; row-gap: 6px; }
  .parcours { padding-left: 24px; }
  .etape-vie::before { left: calc(-24px + 5px - var(--marque) / 2 + 1px); }
}

@media print {
  .parcours-anime .etape-vie.a-taper .etape-vie-texte { visibility: visible; }
  .etape-vie-machine { display: none; }
  .presentation .piece-cadre { transform: none; }
}