/* =====================================================================
   sylvestre.ovh — page d'accueil et CV.

   Meme palette que livre.sylvestre.ovh : les deux sites vivent sous le
   meme domaine, ils doivent se reconnaitre.

   Pense pour le telephone d'abord, comme le reste : les elargissements
   sont dans les media queries, jamais l'inverse. Aucune dependance,
   aucune police distante — la page s'affiche avant meme d'avoir fini de
   se charger.
   ===================================================================== */

:root {
  --bg-0: #17130f;
  --bg-1: #221b15;
  --bg-2: #2b241d;
  --gold: #c9a87c;
  --gold-light: #f4e4d0;
  --text: #e6dccf;
  --text-dim: #a89584;
  --border: rgba(201, 168, 124, 0.22);
  --border-strong: rgba(201, 168, 124, 0.5);
  --radius: 14px;
  --radius-sm: 8px;
  --largeur: 760px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* Un degrade tres doux plutot qu'un aplat : le fond respire sans
     jamais concurrencer le texte. */
  background-image: radial-gradient(ellipse at top, var(--bg-1), var(--bg-0) 70%);
  background-attachment: fixed;
}

/* ---------- Ossature ---------- */

.enveloppe {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 20px 64px;
}

section { margin-top: 52px; }

/* ---------- Navigation ---------- */

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.nav-marque {
  font-weight: 700;
  color: var(--gold-light);
  text-decoration: none;
  margin-right: auto;
  letter-spacing: 0.02em;
}

.nav a {
  color: var(--text-dim);
  text-decoration: none;
  /* Zone tactile confortable sans grossir le texte : c'est le padding
     qui donne la cible, pas la taille de police. */
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a:focus-visible { color: var(--gold-light); border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { color: var(--gold-light); border-bottom-color: var(--gold); }

/* ---------- En-tete ---------- */

.entete { padding: 48px 0 8px; }

.entete h1 {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.15;
  color: var(--gold-light);
  letter-spacing: -0.01em;
}

.accroche {
  margin: 0;
  font-size: 18px;
  color: var(--text-dim);
  max-width: 54ch;
}

/* ---------- Titres de section ---------- */

h2 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.sous-titre {
  margin: 0 0 22px;
  color: var(--text-dim);
  font-size: 15px;
}

h3 { margin: 0 0 4px; font-size: 19px; color: var(--gold-light); }

p { margin: 0 0 14px; }

a { color: var(--gold); }
a:hover, a:focus-visible { color: var(--gold-light); }

/* ---------- Cartes de projet ---------- */

.projet {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
}

.projet-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 12px;
}

.projet-lien {
  font-size: 14px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.projet-lien:hover { color: var(--gold-light); }

.projet p:last-of-type { margin-bottom: 0; }

.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.etiquettes li {
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 11px;
}

/* Quelques chiffres valent mieux qu'un adjectif. */
.chiffres {
  display: grid;
  /* 96 px : assez etroit pour que les trois chiffres tiennent sur une
     seule ligne des 375 px, sans quoi le dernier reste seul en dessous
     et le bloc perd sa lisibilite d'un coup d'oeil. */
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.chiffres div {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.chiffre {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.chiffre-libelle { font-size: 12.5px; color: var(--text-dim); }

/* ---------- CV ---------- */

.bloc-cv { margin-bottom: 26px; }

.bloc-cv:last-child { margin-bottom: 0; }

.ligne-cv {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.ligne-cv:first-of-type { border-top: none; padding-top: 0; }

.ligne-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}

.ligne-entete h3 { font-size: 17px; }

.periode {
  font-size: 13.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.lieu { font-size: 14px; color: var(--text-dim); margin: 0 0 6px; }

.ligne-cv p:last-child { margin-bottom: 0; }

/* Ce qui reste a remplir. Volontairement visible : un CV a moitie
   ecrit doit se voir au premier coup d'oeil, jamais passer pour
   termine. */
.a-completer {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--text-dim);
  background: rgba(201, 168, 124, 0.04);
}

.a-completer strong { color: var(--gold); }

.liste-simple { margin: 0; padding-left: 20px; }
.liste-simple li { margin-bottom: 6px; }

/* ---------- Pied ---------- */

.pied {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-dim);
}

.pied p { margin: 0 0 6px; }

/* ---------- Ecrans plus larges ---------- */

@media (min-width: 620px) {
  .entete { padding-top: 72px; }
  .entete h1 { font-size: 42px; }
  .accroche { font-size: 19px; }
  section { margin-top: 64px; }
}

/* ---------- Impression : un CV, ca s'imprime ---------- */

@media print {
  body {
    background: #fff;
    color: #000;
    background-image: none;
    font-size: 11pt;
  }
  .nav, .pied, .a-completer { display: none; }
  .enveloppe { max-width: none; padding: 0; }
  h1, h2, h3, .chiffre { color: #000; }
  .accroche, .periode, .lieu, .chiffre-libelle { color: #333; }
  .projet, .etiquettes li, .chiffres div {
    background: none;
    border-color: #999;
  }
  section { margin-top: 24px; }
  a { color: #000; text-decoration: underline; }
}