/* CV de Séverine Fornerot — version magazine, servie à la racine.
   Sur ordinateur : deux pages en vis-à-vis, le parcours à gauche, le
   portfolio à droite. Même palette « vieux rose » et même police Barlow que
   la version sobre (/sobre), composition éditoriale différente. */

:root {
  --bg: #e6d0cb;        /* fond vieux rose */
  --paper: #fffdfa;     /* page de magazine, papier crème */
  --side: #f7eae7;      /* rose pâle des tuiles de stands */
  --ink: #3b2b2c;
  --muted: #6f5455;
  --accent: #9d4a55;
  --line: #e7d6d2;
  --shadow: rgba(59, 43, 44, .12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem clamp(1rem, 2vw, 2.5rem);
  background: var(--bg);
  color: var(--ink);
  font: 300 1rem/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;
}

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

.skip:focus { transform: none; }

/* Le spread occupe la largeur disponible : deux pages qui se lisent comme une
   double page, pas une colonne étroite au milieu de l'écran. */
.magazine { max-width: min(104rem, 100%); margin: 0 auto; }

/* Masthead : le haut de couverture ---------------------------------- */

.masthead {
  padding: 0 0 1.25rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 1.25rem;
}

.masthead__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .9rem;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.masthead__meta span:nth-child(2) { color: var(--accent); }

.masthead__row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

/* Bouton de téléchargement du PDF d'origine, à droite du nom. */
.masthead__download {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  /* Reste à droite du nom, y compris lorsqu'il passe à la ligne sur mobile. */
  margin: 0 0 .35rem auto;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 3px;
  transition: color .2s ease, background-color .2s ease;
}

.masthead__download svg { width: 1.5rem; height: 1.5rem; }

.masthead__download:hover { color: var(--paper); background: var(--accent); }

.masthead__name {
  margin: 0;
  font-size: clamp(2.2rem, 5.6vw, 5.6rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.masthead__role {
  margin: .55rem 0 0;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
}

/* Le spread : deux pages en vis-à-vis -------------------------------
   Les deux pages s'étirent à la même hauteur : la feuille est une, le pli
   court d'un bord à l'autre. La page la plus courte garde du blanc en bas,
   comme une vraie page de magazine. */

.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
}

.page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2rem 2.2rem 1.5rem;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: 0 1px 2px var(--shadow), 0 14px 34px rgba(59, 43, 44, .1);
}

/* Pied de page : folio et titre courant, collés au bas de la feuille. */
.page__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Pli central : ombre douce sur le bord intérieur de chaque page. */
.page--left {
  box-shadow: 0 1px 2px var(--shadow), 0 14px 34px rgba(59, 43, 44, .1),
    inset -14px 0 22px -18px rgba(59, 43, 44, .4);
}

.page--right {
  box-shadow: 0 1px 2px var(--shadow), 0 14px 34px rgba(59, 43, 44, .1),
    inset 14px 0 22px -18px rgba(59, 43, 44, .4);
}

.page__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--ink);
}

.page__head h2 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.folio {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
}

.page__body { font-size: .95rem; }

/* Page de gauche : le parcours -------------------------------------- */

.cv-cols {
  display: grid;
  grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}

.portrait { margin: 0 0 .9rem; }

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

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

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

.qualities li { margin-bottom: .15rem; }

.block { margin-top: .9rem; }

.block h3 {
  margin: 0 0 .4rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--line);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}

.block h3::before {
  content: "";
  display: inline-block;
  width: 1.1rem;
  height: 2px;
  margin-right: .4rem;
  vertical-align: .2rem;
  background: var(--accent);
}

/* Intitulés de rubrique du récit (« Expériences », « Stages ») : ils doivent
   dominer les intitulés de poste qu'ils coiffent, qui restent en dessous. */
.cv-main .block h3 {
  margin-bottom: .45rem;
  padding-bottom: .3rem;
  font-size: 1.2rem;
  letter-spacing: .14em;
}

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

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

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

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

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

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

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

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

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

/* Colonne de récit de la page de gauche ----------------------------- */

/* Le récit respire plus large que les étiquettes de la colonne de gauche :
   corps un peu plus grand, interlignage serré pour que les chapitres tiennent
   ensemble. */
.cv-main { font-size: 1.05rem; line-height: 1.5; }

/* Bandeau d'ouverture : un aperçu des travaux, sur toute la largeur du récit.
   Il coiffe les colonnes, d'où `column-span` quand le récit en compte deux. */
.cv-main .banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1.5rem;
  border-radius: 2px;
  column-span: all;
}

.pitch {
  margin: 0 0 1.4rem;
  padding-left: 1.2rem;
  border-left: 3px solid var(--accent);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.55;
}

.pitch::first-letter {
  float: left;
  margin: .12em .12em 0 0;
  color: var(--accent);
  font-size: 3.1rem;
  font-weight: 900;
  line-height: .8;
}

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

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

.job-head {
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
}

.job-head h4 {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Dates et durée sous l'intitulé, alignées à gauche : alignées à droite,
   elles se retrouvaient seules sur une deuxième ligne dès que l'intitulé
   était long. */
.job-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .25rem 0 0;
}

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

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

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

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

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

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

/* Page de droite : le portfolio ------------------------------------- */

.intro { margin: 0 0 1.4rem; font-size: 1.05rem; line-height: 1.6; }

.sub-title {
  margin: 1.9rem 0 .7rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--ink);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}

.sub-title::before {
  content: "";
  display: inline-block;
  width: 1.1rem;
  height: 2px;
  margin-right: .4rem;
  vertical-align: .2rem;
  background: var(--accent);
}

.hero { margin: 0 0 1.4rem; }

.hero a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.hero figcaption {
  margin-top: .45rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 300;
}

.catalogs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 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: .4rem;
  color: var(--accent);
  font-size: .82rem;
  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; }

.stands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}

.stands img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--side);
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* Colophon ---------------------------------------------------------- */

.colophon {
  margin-top: 1.4rem;
  text-align: center;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Mouvement --------------------------------------------------------- */

@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) {
  .page { animation: rise .5s cubic-bezier(.2, .7, .3, 1) backwards; }
  .page--left { animation-delay: .08s; }
  .page--right { animation-delay: .18s; }

  .block h3::before,
  .sub-title::before {
    animation: deploy .55s cubic-bezier(.2, .7, .3, 1) backwards;
    animation-delay: .3s;
  }

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

  .portrait img,
  .hero img,
  .catalog-card img,
  .stands img {
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
  }

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

  .hero:hover img,
  .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); }
}

/* Grand écran -------------------------------------------------------
   La place gagnée sert au texte et aux images plutôt qu'au blanc : les
   catalogues passent sur trois colonnes et la couverture devient une image
   d'ouverture avec sa légende ; le récit ne se met sur deux colonnes qu'une
   fois la page franchement large. */

@media (min-width: 84rem) {
  .catalogs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
  }

  .hero figcaption {
    margin-top: 0;
    padding-left: 1.2rem;
    border-left: 2px solid var(--accent);
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.5;
  }
}

/* Deux colonnes de texte ne se justifient qu'une fois la page assez large :
   en dessous, la colonne de récit serait plus étroite qu'un filet de journal. */
@media (min-width: 100rem) {
  html { font-size: 17px; }

  .cv-main { column-count: 2; column-gap: 2.5rem; }

  /* Un titre ne reste pas seul en bas de colonne, et une expérience ne se
     coupe pas en deux ; le bloc entier, lui, peut se répartir sur les colonnes. */
  .cv-main .block h3 { break-after: avoid; }

  .cv-main .job-item { break-inside: avoid; }
}

@media (min-width: 120rem) {
  html { font-size: 18px; }
}

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

@media (max-width: 60rem) {
  .spread { grid-template-columns: 1fr; }

  .page--left,
  .page--right {
    box-shadow: 0 1px 2px var(--shadow), 0 14px 34px rgba(59, 43, 44, .1);
  }
}

@media (max-width: 40rem) {
  body { padding: 0; }
  .masthead { padding: 1.5rem 1.25rem 1rem; }
  .spread { gap: 0; }
  .page { padding: 1.5rem 1.25rem; border-radius: 0; box-shadow: none; }
  .cv-cols { grid-template-columns: 1fr; }
  .catalogs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  :root { --bg: #fff; --paper: #fff; --side: #fff; }
  body { padding: 0; font-size: 9pt; }
  .masthead { border-bottom: 2px solid #000; }
  .spread { display: block; }
  .page {
    padding: 0;
    margin-bottom: 1rem;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
  }
  .page--left, .page--right { box-shadow: none; }
  .catalogs a, .catalog-card { color: var(--ink); }
  .sub-title { break-after: avoid; }
  .page,
  .block h3::before,
  .sub-title::before,
  .dots,
  .portrait img,
  .hero img,
  .catalog-card img,
  .stands img { animation: none; transition: none; }
  .colophon { display: none; }
  .masthead__download { display: none; }
}