/* CV de Séverine Fornerot — palette « vieux rose », composition Barlow.
   Barlow est la police du CV d'origine ; les @font-face sont émises par la
   page (voir fonts.go), avec l'empreinte des ressources en paramètre d'URL. */

:root {
  --bg: #e6d0cb;        /* fond vieux rose */
  --surface: #fdf8f6;   /* carte du CV */
  --side: #f7eae7;      /* colonne de gauche, rose plus pâle */
  --ink: #3b2b2c;
  --muted: #6f5455;
  --accent: #9d4a55;
  --line: #e7d6d2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem 1.5rem;
  background: var(--bg);
  color: var(--ink);
  font: 300 16px/1.6 Barlow, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page {
  display: grid;
  grid-template-columns: minmax(0, 18.5rem) minmax(0, 1fr);
  gap: 0;
  max-width: 64rem;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(59, 43, 44, .06), 0 12px 32px rgba(59, 43, 44, .08);
}

/* Colonne de gauche ------------------------------------------------ */

.side {
  padding: 2.5rem 2rem 2.5rem 2.5rem;
  background: var(--side);
  border-radius: 4px 0 0 4px;
}

.portrait {
  display: block;
  width: 100%;
  max-width: 13.5rem;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(59, 43, 44, .12);
}

.name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 .25rem;
}

.name {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .005em;
  text-transform: uppercase;
}

/* Bouton de téléchargement du PDF d'origine, à droite du nom. */
.name-row__download {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 3px;
  transition: color .2s ease, background-color .2s ease;
}

.name-row__download svg { width: 1.35rem; height: 1.35rem; }

.name-row__download:hover { color: var(--surface); background: var(--accent); }

.job {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: .95rem;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.qualities {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.block { margin-top: 1.5rem; }

.block h2,
.content h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Titres de rubrique de la colonne principale : niveau « display ». */
.content h2 {
  margin-bottom: 1.2rem;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.1;
}

.block h2::before,
.content h2::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-bottom: .5rem;
  background: var(--accent);
}

.content h2::before { width: 3.5rem; height: 3px; margin-bottom: .7rem; }

.plain, .missions, .catalogs, .stands {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plain li { margin-bottom: .2rem; font-weight: 300; }

/* Logiciels : nom + niveau sur 4 pastilles -------------------------- */

.skills { list-style: none; margin: 0; padding: 0; }

.skills li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-weight: 300;
}

.dots { display: inline-flex; gap: .22rem; }

.dot {
  width: .55rem;
  height: .55rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
}

.dot.on { background: var(--accent); }

/* Loisirs ----------------------------------------------------------- */

.hobbies { list-style: none; margin: 0; padding: 0; }

.hobbies li {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .25rem;
  font-weight: 300;
}

.icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--accent); }

.year { color: var(--accent); font-weight: 500; }
.award { margin: 0; font-weight: 300; }

/* Colonne principale ------------------------------------------------ */

.content { padding: 2.5rem 2.5rem 2.5rem 2rem; }

.content > section { margin-top: 3rem; }

.pitch {
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: var(--side);
  border-left: 2px solid var(--accent);
  font-size: 1.1rem;
  line-height: 1.6;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.job-item { padding: 0 0 1.75rem; }
.job-item:last-child { padding-bottom: 0; }

.job-head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: .25rem;
}

.job-head h3 {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.period {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 200;
  letter-spacing: .06em;
  margin-left: auto;
}

.duration {
  background: var(--accent);
  color: var(--surface);
  border-radius: 999px;
  padding: 0 .55rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-self: center;
}

.employer { margin: .4rem 0 .6rem; color: var(--muted); font-weight: 300; }

.missions { margin-top: .5rem; }
.missions li { margin-bottom: .35rem; font-weight: 300; }

.example {
  display: block;
  color: var(--muted);
  font-size: .9rem;
  font-style: italic;
}

.example a { color: var(--accent); }

/* Lien d'évitement, visible à la prise de focus ---------------------- */

.skip {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 10;
  padding: .5rem .8rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 2px;
  transform: translateY(-200%);
}

.skip:focus { transform: none; }

/* Renvoi vers la version magazine ------------------------------------ */

.colophon {
  max-width: 64rem;
  margin: 1.5rem auto 0;
  text-align: center;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Portfolio --------------------------------------------------------- */

.catalogs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 1.25rem 1rem;
}

.catalog-card { display: block; color: var(--ink); text-decoration: none; }

.catalog-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.catalog-title {
  display: block;
  margin-top: .5rem;
  color: var(--accent);
  font-size: .88rem;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: rgba(157, 74, 85, .35);
  text-underline-offset: .15em;
}

.catalog-card:hover img { border-color: var(--accent); }
.catalog-card:hover .catalog-title,
.catalog-card:focus-visible .catalog-title { text-decoration-color: currentColor; }

.sub-title {
  margin: 2rem 0 .7rem;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.stands { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }

/* Photos de formats différents (paysage et portrait) : tuiles carrées, image
   entière visible sur fond blanc, plutôt qu'un recadrage qui ampute le sujet. */
.stands img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* Mouvement ----------------------------------------------------------
   Tout est décoratif et court : apparition des colonnes, trait accent qui
   se déploie, pastilles de niveau qui surgissent ligne par ligne, et
   quelques élévations au survol. Désactivé si l'utilisateur demande moins
   de mouvement (voir la fin de la feuille). */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes deploy {
  from { width: 0; }
}

@keyframes pop {
  from { opacity: 0; transform: scale(.3); }
}

@media (prefers-reduced-motion: no-preference) {
  .side > *,
  .content > * { animation: rise .5s cubic-bezier(.2, .7, .3, 1) backwards; }

  .side > :nth-child(1) { animation-delay: 0ms; }
  .side > :nth-child(2) { animation-delay: 60ms; }
  .side > :nth-child(3) { animation-delay: 100ms; }
  .side > :nth-child(4) { animation-delay: 140ms; }
  .side > :nth-child(5) { animation-delay: 180ms; }
  .side > :nth-child(6) { animation-delay: 220ms; }
  .side > :nth-child(7) { animation-delay: 260ms; }
  .side > :nth-child(8) { animation-delay: 300ms; }
  .side > :nth-child(9) { animation-delay: 340ms; }
  .side > :nth-child(10) { animation-delay: 380ms; }

  .content > :nth-child(1) { animation-delay: 120ms; }
  .content > :nth-child(2) { animation-delay: 220ms; }
  .content > :nth-child(3) { animation-delay: 320ms; }

  .block h2::before,
  .content h2::before { animation: deploy .55s cubic-bezier(.2, .7, .3, 1) backwards; animation-delay: 260ms; }

  .dots { animation: pop .45s cubic-bezier(.2, .7, .3, 1) backwards; }

  .skills li:nth-child(1) .dots { animation-delay: .22s; }
  .skills li:nth-child(2) .dots { animation-delay: .26s; }
  .skills li:nth-child(3) .dots { animation-delay: .3s; }
  .skills li:nth-child(4) .dots { animation-delay: .34s; }
  .skills li:nth-child(5) .dots { animation-delay: .38s; }
  .skills li:nth-child(6) .dots { animation-delay: .42s; }
  .skills li:nth-child(7) .dots { animation-delay: .46s; }
  .skills li:nth-child(8) .dots { animation-delay: .5s; }
  .skills li:nth-child(9) .dots { animation-delay: .54s; }

  /* Élévations et soulignements au survol / focus clavier */
  .portrait,
  .catalog-card img,
  .stands img { transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease; }

  .catalog-title { transition: text-decoration-color .25s ease; }

  .portrait:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(59, 43, 44, .16); }

  .catalog-card:hover img,
  .catalog-card:focus-visible img { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(59, 43, 44, .14); }

  .stands li:hover img { transform: translateY(-3px); }
}

/* Écran étroit, impression ------------------------------------------ */

@media (max-width: 46rem) {
  body { padding: 0; }
  .page { grid-template-columns: 1fr; border-radius: 0; box-shadow: none; }
  .side { padding: 1.75rem 1.25rem; border-radius: 0; }
  .content { padding: 1.75rem 1.25rem; }
  .portrait { max-width: 10rem; }
}

@media print {
  :root { --bg: #fff; --surface: #fff; }
  body { padding: 0; font-size: 10.5pt; }
  .content h2 { font-size: 1.5rem; }
  .page { display: block; max-width: none; box-shadow: none; }
  .side, .content { padding: 0; }
  .portrait { float: left; width: 4.5cm; margin: 0 1rem .5rem 0; }
  .job-item { padding-bottom: 1rem; break-inside: avoid; }
  .catalogs a { color: var(--ink); }
  .sub-title { break-before: avoid; }
  .colophon { display: none; }
  .name-row__download { display: none; }

  /* Impression : tout est là, tout de suite — pas d'état intermédiaire. */
  .side > *,
  .content > *,
  .dots,
  .portrait,
  .catalog-card img,
  .catalog-title,
  .stands img,
  .block h2::before,
  .content h2::before { animation: none; transition: none; }
}