/* pierreallard.fr — feuille unique.
 *
 * Reprise du prototype `pierreallard.fr.dc.html` du handoff, qui portait tous
 * ses styles en attribut `style`. Les valeurs sont celles du handoff, à
 * l'identique ; seule leur forme change.
 *
 * Une seule chose est paramétrée par élément et reste donc en inline : la
 * position des segments de la frise (`--left` / `--width`), qui EST la donnée.
 */

/* ---------------------------------------------------------------- jetons */

:root {
  --bg:        #f7f5fb;
  --card:      #ffffff;
  --chip:      #f4f2fa;

  --ink:       #2b2a33;   /* titres */
  --text:      #4c4a55;   /* texte courant */
  --text-2:    #565461;   /* secondaire */
  --muted:     #6e6b7e;   /* surtitres, dates */
  --muted-2:   #7d7a8c;   /* axe des années */

  --line:      #e7e4ef;
  --line-nav:  #e0dceb;
  --line-btn:  #e4e1ec;
  --line-soft: #eeecf4;

  /* Fonds de carte par entreprise. */
  --tint-green: oklch(0.955 0.028 165);
  --tint-blue:  oklch(0.955 0.026 240);
  --tint-lilac: oklch(0.955 0.028 300);
  --tint-sand:  oklch(0.96 0.03 80);
  --tint-terra: oklch(0.93 0.05 40);

  --accent:        oklch(0.79 0.1 300);    /* frise, poste actuel */
  --accent-soft:   oklch(0.86 0.075 300);  /* bouton email */
  --accent-hover:  oklch(0.79 0.09 300);
  --contact-bg:    oklch(0.88 0.065 165);
  --contact-ink:   #1b342b;

  --font-display: 'Bricolage Grotesque', Helvetica, Arial, sans-serif;
  --font-body:    Karla, Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --r-card:  26px;
  --r-small: 18px;
  --r-pill:  999px;
  --r-track: 8px;

  --gap:     20px;   /* espacement vertical entre blocs */
  --nav-h:   84px;   /* hauteur réservée par scroll-margin-top */

  --ease: cubic-bezier(.2, .75, .2, 1);
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; }

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le surtitre mono, présent dans presque tous les blocs. */
.overline {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.card {
  background: var(--card);
  border-radius: var(--r-card);
}

/* --------------------------------------------------------- barre de nav */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 245, 251, .86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-nav__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-nav__home {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  flex: none;
}
.site-nav__home:hover { text-decoration: none; }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14.5px;
}

.site-nav__link {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.site-nav__link:hover { color: var(--ink); text-decoration: none; }

/* Posé par assets/js/nav.js sur la section traversée. */
.site-nav__link[aria-current='true'] {
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
}

/* Le bouton du menu déroulant : masqué tant que les ancres tiennent en ligne
   (cf. la règle @media plus bas, qui seule le fait apparaître). */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin: -4px -10px -4px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  /* Repère des deux traits en position absolue. */
  position: relative;
  place-items: center;
}

/* Trois traits : l'élément est celui du milieu, ses deux pseudo-éléments
   sont ceux du dessus et du dessous. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .22s var(--ease), opacity .15s ease;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
}
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after  { transform: translateY(6px); }

/* Ouvert : les deux traits extrêmes se croisent, celui du milieu s'efface. */
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after  { transform: rotate(-45deg); }

/* ----------------------------------------------------------- conteneur */

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px 80px;
}

/* Toutes les sections ancrées se décalent sous la barre collante. */
.wrap > section { scroll-margin-top: var(--nav-h); }

/* L'espacement entre blocs vient du conteneur, pas des blocs eux-mêmes :
   ajouter une section ne demande pas d'y penser. */
.wrap > * + * { margin-top: var(--gap); }

/* ---------------------------------------------------------------- hero */

.hero {
  padding-top: 44px;
  display: grid;
  grid-template-columns: 1fr 254px;
  gap: var(--gap);
}

.hero__card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 44px 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero__title {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.hero__title span { font-size: 32px; }

.hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 560px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.hero__portrait {
  border-radius: var(--r-card);
  overflow: hidden;
  min-height: 300px;
  background: oklch(0.955 0.02 300);
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* -------------------------------------------------------------- boutons */

.btn {
  border-radius: var(--r-pill);
  padding: 12px 18px;
  font-size: 14.5px;
  font-weight: 500;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--accent-soft);
  color: #322e3d;
  font-weight: 700;
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost { border: 1.5px solid var(--line-btn); }
.btn--ghost:hover { border-color: var(--ink); }

/* --------------------------------------------------------- présentation */

.about { padding: 40px 44px; }

.about__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  text-wrap: pretty;
  /* Justifié — avec césure. Les deux vont ensemble : sans `hyphens`, le
     justifié étire les espaces pour combler les fins de ligne et creuse des
     rivières blanches, d'autant plus visibles que la colonne est étroite.
     La césure est correcte parce que <html lang="fr"> est déclaré.
     `hyphenate-limit-chars` évite les coupures ridicules du type « é-quipe » :
     au moins 6 lettres dans le mot, 3 avant le tiret, 3 après. */
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* -------------------------------------------------------------- parcours */

#parcours {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.timeline { padding: 30px 36px 22px; }

.timeline__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.timeline__hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted-2);
}

.timeline__track {
  position: relative;
  height: 54px;
  margin-top: 20px;
}

/* La piste vide, sous les segments. */
.timeline__track::before {
  content: '';
  position: absolute;
  inset: 6px 0 auto;
  height: 16px;
  border-radius: var(--r-track);
  background: #f2f0f7;
}

/* `--left` et `--width` sont portés en inline par chaque segment : c'est la
   donnée du parcours (échelle sept. 2011 → août 2026, 179 mois). */
.timeline__seg {
  position: absolute;
  top: 6px;
  height: 16px;
  border-radius: var(--r-track);
  left: var(--left);
  width: var(--width);
  background: var(--color);
}

/* Le poste en cours, au bout de la frise. */
.timeline__now {
  position: absolute;
  left: 99.4%;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--card);
}

.timeline__year {
  position: absolute;
  bottom: 2px;
  left: var(--left);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-2);
}

/* ----------------------------------------------------- cartes entreprise */

.job {
  border-radius: var(--r-card);
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 28px;
  /* Repris par les postes de la carte ; chaque entreprise les redéfinit. */
  --meta: var(--muted);
  --rule: var(--line-soft);
}

.job__id { align-self: center; }
.job__id img {
  height: 40px;
  width: auto;
  max-width: 152px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 16px;
}
.job__where {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--meta);
}

.job__roles {
  display: flex;
  flex-direction: column;
}

.job__role {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 20px;
}
/* Deux postes dans la même entreprise : un filet dans la teinte de la carte. */
.job__role + .job__role {
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.job__roles > .job__role:not(:last-child) { padding-bottom: 20px; }

.job__title { font-size: 19px; font-weight: 700; }
.job__title small {
  font-weight: 400;
  font-size: 15px;
  color: var(--muted);
}

.job__points {
  margin-top: 10px;
  padding-left: 18px;
  list-style: disc;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-wrap: pretty;
  /* Cf. .about__text : justifié et césure ne se séparent pas. Ici encore
     moins, la colonne des puces étant la plus étroite de la page. */
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* Trois lignes empilées à droite : début, fin, durée. En flex plutôt qu'en
   <br>, pour que le petit écran puisse les remettre sur une ligne avec de
   vraies séparations (cf. plus bas). */
.job__when {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--meta);
}
.job__span { color: var(--muted); }
/* Le poste en cours : la durée est appuyée. */
.job__span--now {
  color: oklch(0.42 0.08 300);
  font-weight: 500;
}

.job__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
}
.job__stack li {
  background: var(--card);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
}

.job--audencia { background: var(--tint-lilac); --meta: oklch(0.5 0.055 300); --rule: oklch(0.9 0.035 300); }
.job--lephare  { background: var(--tint-blue);  --meta: oklch(0.5 0.05 240); }
.job--noz      { background: var(--tint-green); --meta: oklch(0.5 0.045 165); --rule: oklch(0.9 0.035 165); }
.job--erdf     { background: var(--tint-sand);  --meta: oklch(0.48 0.05 80); }

.job--europe {
  background: var(--tint-terra);
  --meta: oklch(0.45 0.07 40);
}
.job--europe .job__id img { height: 42px; max-width: none; }
.job--europe .job__title  { color: #3a2a22; }
.job--europe .job__points { color: #4a3830; }
.job--europe .job__span   { color: oklch(0.55 0.06 40); }

/* ----------------------------------------------------------- compétences */

.skills { padding: 40px 44px; }

.skills__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 30px;
  padding-top: 20px;
  align-items: start;
}

.skills__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  padding-bottom: 10px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chips li {
  background: var(--chip);
  color: #3f3d49;
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: 14.5px;
}
.chips--blue  li { background: var(--tint-blue);  color: #34404b; }
.chips--green li { background: var(--tint-green); color: #35443c; }
.chips--lilac li { background: var(--tint-lilac); color: #3e3549; }

.education {
  display: grid;
  grid-template-columns: 176px 1fr 1fr;
  gap: 36px;
  align-items: center;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}

.diploma {
  border-radius: var(--r-small);
  padding: 18px 20px;
}
.diploma__year {
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.diploma__name {
  font-size: 16.5px;
  line-height: 1.5;
  padding-top: 4px;
}
.diploma__name span { color: var(--text-2); }

.diploma--sand  { background: var(--tint-sand); }
.diploma--sand  .diploma__year { color: oklch(0.48 0.05 80); }
.diploma--green { background: var(--tint-green); }
.diploma--green .diploma__year { color: oklch(0.5 0.045 165); }

/* ------------------------------------------------------------ en dehors */

#endehors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.aside-card {
  border-radius: var(--r-card);
  padding: 32px;
  background: var(--card);
}
.aside-card__title {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  padding: 12px 0 10px;
}
.aside-card__text {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text);
}

.aside-card--running { background: oklch(0.94 0.045 300); }
.aside-card--running .overline     { color: oklch(0.42 0.07 300); }
.aside-card--running .aside-card__text { color: #353443; }

.aside-card--travel { background: var(--tint-terra); }
.aside-card--travel .overline      { color: oklch(0.42 0.09 40); }
.aside-card--travel .aside-card__text { color: #4a3830; }

/* --------------------------------------------------------------- contact */

.contact {
  background: var(--contact-bg);
  color: var(--contact-ink);
  border-radius: var(--r-card);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.contact__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.025em;
}
.contact__text {
  font-size: 16.5px;
  line-height: 1.55;
  padding-top: 8px;
  color: #26483c;
}
.contact__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.contact .btn { padding: 13px 20px; font-size: 15px; }
.contact .btn--primary { background: var(--card); color: var(--contact-ink); }
.contact .btn--primary:hover { background: var(--contact-ink); color: var(--card); }
.contact .btn--ghost { border-color: oklch(0.72 0.08 165); }
.contact .btn--ghost:hover { border-color: var(--contact-ink); }

/* ---------------------------------------------------------------- pied */

.site-footer {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
}

/* ----------------------------------------------------------- animations */

@keyframes fadeUp {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes barGrow {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}
@keyframes softPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

.hero__card     { animation: fadeUp .8s var(--ease) both; }
.hero__portrait { animation: fadeUp .8s var(--ease) .08s both; }
.timeline       { animation: fadeUp .8s var(--ease) .16s both; }

/* Les segments poussent depuis la gauche, l'un après l'autre. */
.timeline__seg {
  transform-origin: left center;
  animation: barGrow .55s var(--ease) both;
  animation-delay: calc(.32s + var(--i) * .09s);
}
.timeline__now { animation: softPulse 2.4s ease-in-out 1.5s infinite; }

/* --------------------------------------------------------- responsive */

/* Le portrait rétrécit mais reste à côté du texte, les cartes entreprise
   passent sur une colonne. */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr 200px;
    padding-top: 32px;
  }
  .hero__portrait { min-height: 0; }
  .hero__card  { padding: 36px 30px 32px; }
  .hero__title { font-size: 40px; }
  .hero__title span { font-size: 28px; }

  .job {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 30px;
  }
  .job__id { display: flex; align-items: center; gap: 20px; }
  .job__id img { margin-bottom: 0; }

  .about, .skills { padding: 32px 30px; }
  .contact { padding: 32px 30px; }

  .skills__grid { grid-template-columns: repeat(2, 1fr); }
  .education { grid-template-columns: 1fr 1fr; gap: 20px; }
  .education > .overline { grid-column: 1 / -1; }
}

/* Le portrait continue de maigrir plutôt que de passer au-dessus : empilé, il
   coûte sa hauteur ENTIÈRE au reste de la page, alors qu'à côté du texte il
   ne coûte que sa largeur. On repousse donc l'empilement aussi bas que la
   colonne de texte le supporte. */
@media (max-width: 780px) {
  .hero { grid-template-columns: 1fr 150px; }
  .hero__title { font-size: 34px; }
  .hero__title span { font-size: 25px; }
}

@media (max-width: 700px) {
  .wrap { padding: 0 20px 56px; }

  /* Retour au fer à gauche. Justifier demande une ligne d'au moins ~50
     caractères pour répartir le blanc sans le faire voir ; ici la colonne
     tombe sous 300px, soit une trentaine de caractères, et le texte se
     troue — « leads,    PIM,    commandes ». Mieux vaut un bord droit
     irrégulier qu'un intérieur de paragraphe percé. */
  .about__text,
  .job__points {
    text-align: left;
  }

  /* Les cinq ancres ne tiennent plus en ligne : elles passent derrière un
     bouton, et se déplient sous la barre. */
  .site-nav__inner {
    padding: 12px 20px;
    gap: 12px;
  }
  .nav-toggle { display: grid; }

  .site-nav__links {
    display: none;
    /* Sous la barre, pas dans son flux : la barre garde sa hauteur et le
       panneau recouvre la page au lieu de la pousser vers le bas. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 12px 14px;
    /* Opaque, contrairement à la barre : du texte défilerait par transparence
       derrière les ancres. */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .site-nav__links[data-open] { display: flex; }

  /* 12px de padding vertical portent la cible tactile à 44px. */
  .site-nav__link {
    padding: 12px 14px;
    border-radius: var(--r-small);
  }

  #endehors { grid-template-columns: 1fr; }
  .skills__grid { grid-template-columns: 1fr; gap: 22px; }
  .education { grid-template-columns: 1fr; }

  /* Les dates repassent au-dessus du poste : 150px en colonne ne tiennent
     plus, et les rejeter en dessous les éloignerait de ce qu'elles datent.
     Les trois lignes se remettent à plat, la durée détachée par un point. */
  .job__role { grid-template-columns: 1fr; gap: 8px; }
  .job__when {
    order: -1;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 6px;
  }
  .job__when .job__span::before { content: '· '; }

  .timeline { padding: 24px 22px 18px; }
  .timeline__hint { display: none; }

  .contact { padding: 28px 24px; }
  .contact__title { font-size: 25px; }
}

/* En dessous, la colonne de texte devient trop étroite pour le titre : le
   portrait passe enfin au-dessus, en petit. Pleine largeur, il deviendrait un
   gros plan de visage haut de 400px avant le moindre mot. */
@media (max-width: 540px) {
  .hero { grid-template-columns: 1fr; }
  .hero__portrait {
    order: -1;
    width: 132px;
    aspect-ratio: 4 / 5;
    /* Largeur fixe dans une colonne pleine largeur : sans ça la vignette se
       cale à gauche, seule au-dessus d'une carte qui, elle, occupe tout. */
    justify-self: center;
  }
  .hero__card { padding: 30px 26px 28px; }
}

@media (max-width: 420px) {
  .hero__title { font-size: 32px; }
  .hero__title span { font-size: 23px; }
  .hero__lede { font-size: 17px; }
  .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------- impression
 * Un CV finit imprimé ou passé en PDF. La barre collante, le portrait et les
 * animations n'y ont pas leur place ; le reste tient en noir sur blanc.
 */
@media print {
  :root { --gap: 12px; }
  body { background: #fff; font-size: 11pt; }
  .site-nav, .hero__portrait, .contact__actions, .timeline__hint { display: none; }
  .wrap { max-width: none; padding: 0; }
  .hero { padding-top: 0; grid-template-columns: 1fr; }
  .hero__card, .about, .skills, .timeline, .job, .contact, .aside-card {
    padding: 16px 18px;
    break-inside: avoid;
    border: 1px solid var(--line);
  }
  .hero__title { font-size: 28pt; }
  #endehors { grid-template-columns: repeat(3, 1fr); }
  a[href^='mailto']::after { content: ''; }
}