/* CV « pipeline » — thème sombre de GitHub en référence, clair si le système le demande.
   Le visiteur peut imposer sombre, clair ou beige : theme.js pose data-theme sur <html>.
   Aucun style en ligne : la CSP n'autorise que cette feuille (style-src 'self'). */
:root {
  --fond: #0d1117; --carte: #161b22; --carte-2: #21262d; --groupe: #11161d;
  --bord: #30363d; --texte: #e6edf3; --muted: #8b949e;
  --ok: #3fb950; --run: #d29922; --sel: #58a6ff; --btn: #238636; --btn-texte: #ffffff;
  --erreur: #f85149;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --point-rupture: 720px; /* rappel : la valeur réelle est dans les @media et pipeline.js */
  color-scheme: dark;
}
/* Clair : celui du système, sauf choix contraire, ou celui choisi. Deux blocs
   identiques, une règle @media ne pouvant pas partager un sélecteur hors média. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --fond: #ffffff; --carte: #f6f8fa; --carte-2: #eaeef2; --groupe: #f6f8fa;
    --bord: #d0d7de; --texte: #1f2328; --muted: #59636e;
    --ok: #1a7f37; --run: #9a6700; --sel: #0969da; --btn: #1f883d; --erreur: #cf222e;
    color-scheme: light;
  }
}
:root[data-theme="clair"] {
  --fond: #ffffff; --carte: #f6f8fa; --carte-2: #eaeef2; --groupe: #f6f8fa;
  --bord: #d0d7de; --texte: #1f2328; --muted: #59636e;
  --ok: #1a7f37; --run: #9a6700; --sel: #0969da; --btn: #1f883d; --erreur: #cf222e;
  color-scheme: light;
}
/* Beige : papier chaud, texte brun, accents désaturés (contraste AA sur chaque fond). */
:root[data-theme="beige"] {
  --fond: #f4ecd8; --carte: #fbf6ea; --carte-2: #efe4cc; --groupe: #f8f1e2;
  --bord: #d6c6a3; --texte: #3b2f22; --muted: #6b5a45;
  --ok: #44691f; --run: #8f5a08; --sel: #2c5f8a; --btn: #44691f; --erreur: #a8352a;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 14px/1.5 var(--sans); }
[hidden] { display: none !important; }
a { color: var(--sel); }
h1, h2, h3, p, dl, dd { margin: 0; }
.page { max-width: 1120px; margin: 0 auto; padding: 16px 16px 48px; }
.muted { color: var(--muted); }
.ok { color: var(--ok); }
.run { color: var(--run); }
.mono { font-family: var(--mono); font-size: 13px; }

.pulse { animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* En-tête : thème et langue */
.outils { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 8px; }
.langues { display: flex; }
.theme select {
  font: 600 12px var(--mono); color: var(--texte); background: var(--carte);
  border: 1px solid var(--bord); border-radius: 6px; padding: 3px 6px; cursor: pointer;
}
.theme select:hover, .theme select:focus-visible { border-color: var(--sel); }
.langues a {
  font: 600 12px var(--mono); color: var(--texte); text-decoration: none;
  border: 1px solid var(--bord); border-radius: 6px; padding: 3px 10px; background: var(--carte);
}
.langues a:hover, .langues a:focus-visible { border-color: var(--sel); }
.suggestion-langue {
  background: var(--carte); border: 1px solid var(--sel); border-radius: 6px;
  padding: 8px 12px; margin-bottom: 14px;
}

/* Aperçu depuis l'admin : jamais rendu sur le site public */
.apercu {
  background: var(--carte); border: 1px dashed var(--sel); border-radius: 6px;
  padding: 8px 12px; margin-bottom: 14px; font-weight: 600;
}

/* Titres de section façon GitHub */
.pipeline h2, .panneau h2 {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}

/* Bandeau */
.identite { display: flex; gap: 14px; align-items: center; }
.identite__texte { min-width: 0; overflow-wrap: anywhere; }
.photo {
  width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover;
  background: var(--bord); border: 2px solid var(--ok);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
h1 { font-size: 22px; line-height: 1.25; }
.sous-titre { margin-top: 2px; }
.accroche { margin-top: 6px; }
.chiffres {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px;
}
.kpi { background: var(--carte); border: 1px solid var(--bord); border-radius: 6px; padding: 10px 12px; overflow-wrap: anywhere; }
.kpi b { display: block; font-size: 20px; line-height: 1.3; }

/* Pipeline : graphe de gauche à droite */
.pipeline { margin-top: 22px; }
.graphe { display: flex; align-items: center; overflow-x: auto; padding: 2px 2px 6px; }
/* Tablette : fondu sur le bord où le graphe déborde encore (classes posées par pipeline.js). */
.graphe.deborde-g { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
.graphe.deborde-d { -webkit-mask-image: linear-gradient(to left, transparent, #000 40px); mask-image: linear-gradient(to left, transparent, #000 40px); }
.graphe.deborde-g.deborde-d {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.graphe ol { list-style: none; margin: 0; padding: 0; }
.graphe .groupe {
  flex: none; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--bord); border-radius: 8px; padding: 8px; background: var(--groupe);
}
.lien, .voie--principale li + li::before { flex: none; width: 20px; height: 2px; background: var(--bord); }
.voie--principale li + li::before { content: ""; }
.voies { flex: none; display: flex; flex-direction: column; gap: 10px; }
.voie--principale { display: flex; align-items: center; }
.voie--principale li { display: flex; align-items: center; }
.voie--parallele { display: flex; align-items: center; gap: 8px; }
.voie--parallele > ol { display: flex; gap: 6px; }
.voie--parallele .job { border-style: dashed; }
.groupe .job { max-width: 160px; }
.note { color: var(--muted); white-space: nowrap; }
.fin { flex: none; }

.job {
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  min-width: 140px; max-width: 210px; padding: 7px 10px;
  -webkit-tap-highlight-color: transparent;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 6px;
  transition: border-color .15s;
}
.job:hover { border-color: var(--muted); }
.job:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.job[aria-expanded="true"] { border-color: var(--sel); box-shadow: 0 0 0 1px var(--sel); }
.job__texte { display: flex; flex-direction: column; min-width: 0; }
.job__org { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Intitulé sur deux lignes au plus : deux postes « Administrateur … » restent distincts. */
.job__nom { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.job__org { font-size: 12px; color: var(--muted); }
.job__duree { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .job { transition: none; } }

/* Détail façon log */
.details { margin-top: 12px; }
.detail {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 6px; padding: 14px;
  font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere;
}
.details .detail + .detail { margin-top: 8px; }
.detail__titre { font: 600 14px var(--sans); }
.detail__meta { margin: 2px 0 8px; }
.etapes { list-style: none; margin: 0; padding: 0; }
.etapes li { padding: 3px 0 3px 1.4em; text-indent: -1.4em; }
.technos { margin-top: 8px; }

/* Tests et Stack */
.panneaux { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-top: 18px; }
.panneaux > :only-child, .pied > :only-child { grid-column: 1 / -1; }
.panneau {
  min-width: 0; overflow-wrap: anywhere;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 6px; padding: 14px;
}
.stack dt { margin-top: 6px; font-size: 12px; }
.stack dt:first-child { margin-top: 0; }

/* Bas de page : secrets et artefacts */
.pied { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.secret {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--carte-2); border: 1px solid var(--bord); border-radius: 6px; padding: 8px 12px;
  color: inherit; text-decoration: none;
}
.secret + .secret { margin-top: 8px; }
a.secret:hover, a.secret:focus-visible { border-color: var(--sel); }
.btn-contact {
  font: 600 12px var(--sans); color: var(--btn-texte); background: var(--btn);
  border: 0; border-radius: 6px; padding: 5px 12px; cursor: pointer;
}
.btn-contact:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
a.btn-contact, span.btn-contact { display: inline-block; text-decoration: none; }
.btn-contact.inactif { opacity: .6; cursor: not-allowed; }
.btn-contact:disabled { opacity: .6; cursor: progress; }
.btn-secondaire {
  font: 12px var(--sans); border: 1px solid var(--bord); border-radius: 6px;
  padding: 3px 10px; background: var(--carte);
}
.confidentialite { margin: 16px 0 0; font-size: 12px; }

/* Demande de contact : modale (avec JS) et page (sans JS) */
.modale-contact {
  box-sizing: border-box; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  background: var(--carte); color: var(--texte); border: 1px solid var(--bord);
  border-radius: 8px; padding: 16px;
}
.modale-contact::backdrop { background: rgb(1 4 9 / .7); }
.modale-contact__entete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.modale-contact__entete h2 { margin: 0; font-size: 16px; }
.modale-contact .btn-secondaire { color: inherit; cursor: pointer; }
.page-contact { max-width: 560px; }
.formulaire-contact .champ { margin-top: 12px; }
.formulaire-contact label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.formulaire-contact input, .formulaire-contact textarea {
  box-sizing: border-box; width: 100%; font: 14px var(--sans); color: var(--texte);
  background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; padding: 7px 10px;
}
.formulaire-contact textarea { resize: vertical; }
.formulaire-contact input:focus-visible, .formulaire-contact textarea:focus-visible {
  outline: 2px solid var(--sel); outline-offset: 1px;
}
.formulaire-contact [aria-invalid="true"] { border-color: var(--erreur); }
.erreur-champ { margin: 4px 0 0; font-size: 12px; color: var(--erreur); }
.erreur-champ:empty, .retour:empty { display: none; }
.retour { margin: 12px 0 0; }
.mention { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.formulaire-contact .btn-contact { margin-top: 12px; padding: 8px 16px; font-size: 13px; }
/* Champ piège : hors écran pour un humain, rempli par les robots. */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Téléphone : frise verticale, le plus récent en haut, détail en accordéon */
@media (max-width: 720px) {
  .graphe { flex-direction: column-reverse; align-items: stretch; overflow: visible; padding: 0; }
  .graphe, .voies, .graphe .groupe, .voie--parallele > ol { gap: 0; }
  .lien, .voie--principale li + li::before { display: none; }
  .voie--principale { flex-direction: column-reverse; align-items: stretch; }
  .voie--principale li { display: block; }
  .voie--parallele { flex-direction: column; align-items: stretch; gap: 0; }
  .voie--parallele > ol { flex-direction: column-reverse; }
  .graphe .groupe { flex-direction: column-reverse; border: 0; border-radius: 0; padding: 0; }
  /* Seuls les jalons de la frise, pas les missions des détails déplacés dedans. */
  .groupe > li, .voie--principale > li, .voie--parallele > ol > li, .fin {
    position: relative; margin-left: 7px; padding: 0 0 10px 18px; border-left: 2px solid var(--bord);
  }
  .groupe > li::after, .voie--principale > li::after, .voie--parallele > ol > li::after, .fin::after {
    content: ""; position: absolute; left: -7px; top: 13px;
    width: 12px; height: 12px; border-radius: 50%; background: var(--ok);
  }
  .voie--parallele > ol > li::after { background: var(--fond); border: 2px solid var(--ok); }
  .fin::after { background: var(--run); }
  /* La note sert d'en-tête à la voie parallèle, au-dessus de ses projets. */
  .note { order: -1; white-space: normal; padding: 0 0 10px 27px; }
  .job, .groupe .job { width: 100%; min-width: 0; max-width: none; }
  .job__nom, .job__org { display: block; white-space: normal; overflow-wrap: anywhere; -webkit-line-clamp: none; line-clamp: none; }
  .graphe .detail { margin-top: 8px; }
  .panneaux, .pied { grid-template-columns: 1fr; }
  h1 { font-size: 19px; }
  .photo { width: 52px; height: 52px; font-size: 15px; }
}

/* Impression : clair quel que soit le thème choisi, tous les détails dépliés,
   sans boutons d'action. [data-theme] : même poids que les thèmes, placé après eux. */
@media print {
  :root, :root[data-theme] {
    --fond: #fff; --carte: #fff; --carte-2: #fff; --groupe: #fff; --bord: #bbb;
    --texte: #000; --muted: #444; --ok: #1a7f37; --run: #7a5200; --sel: #000;
    color-scheme: light;
  }
  .outils, .suggestion-langue, .apercu, .btn-contact, .modale-contact { display: none !important; }
  .details[hidden], .detail[hidden] { display: block !important; }
  .pulse { animation: none; }
  .graphe { overflow: visible; flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .job[aria-expanded="true"] { box-shadow: none; border-color: var(--bord); }
  .detail, .panneau, .kpi { break-inside: avoid; }
}