/* « Flux » : la carte de Paul Barbier. Fond presque noir teinté pétrole, une seule couleur d'accent (le corail),
   un seul concept : des lignes emmêlées qui deviennent droites. C'est ce que fait l'automatisation. */
:root {
  --fond: #0b1112; --surface: #121a1b; --surface-2: #172122; --ligne: #233031; --ligne-2: #2e3e40;
  --texte: #eef3f3; --doux: #a9b6b7; --discret: #7f8e90; --corail: #ff6b5e;
  --titre: "Archivo", "Arial Narrow", sans-serif;
  --corps: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--fond); color: var(--texte); font: 400 17px/1.6 var(--corps); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--corail); outline-offset: 3px; border-radius: 6px; }
h1, h2, p { margin: 0; }

/* le fond animé, et un voile sous la colonne pour que le texte reste parfaitement lisible */
.flux { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse var(--voile, 34rem) 120% at 50% 40%, rgb(11 17 18 / .85), rgb(11 17 18 / .4) 70%, transparent); }
body:has(.colonne.large) { --voile: 48rem; }
.colonne { position: relative; z-index: 1; width: min(100% - 40px, 30rem); margin: 0 auto; padding: clamp(56px, 12vh, 112px) 0 48px; display: grid; gap: 40px; }

/* ---------- en-tête ---------- */
.tete { display: grid; gap: 14px; }
.mono { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ligne-2); background: var(--surface); font: 700 1.05rem/1 var(--titre); font-stretch: 112%; letter-spacing: .04em; color: var(--texte); position: relative; }
.mono::after { content: ""; position: absolute; right: 2px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--corail); box-shadow: 0 0 0 3px var(--fond); }
.tete h1 { font: 800 clamp(2.6rem, 11vw, 3.4rem)/1 var(--titre); font-stretch: 108%; letter-spacing: -.035em; margin-top: 6px; }
.role { font: 500 .9rem var(--mono); color: var(--doux); letter-spacing: .01em; }
.role span { color: var(--corail); margin: 0 4px; }
.sous { color: var(--doux); font-size: 1rem; max-width: 40ch; }

/* ---------- chiffres ---------- */
.preuves { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.preuves li { padding: 18px 0; display: grid; gap: 4px; align-content: start; }
.preuves li + li { padding-left: 20px; border-left: 1px solid var(--ligne); }
.preuves b { font: 800 2.1rem/1 var(--titre); font-stretch: 106%; letter-spacing: -.03em; }
.preuves span { font-size: .88rem; line-height: 1.35; color: var(--discret); }

/* ---------- liens ---------- */
.liens { display: grid; gap: 10px; }
.lien { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 12px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--ligne); color: var(--texte); text-decoration: none; font: 600 1.02rem var(--corps); transition: border-color .25s, background .25s, transform .3s var(--ease); }
.lien:hover { border-color: var(--ligne-2); background: var(--surface-2); }
.lien span { display: grid; gap: 1px; }
.lien small { font: 400 .85rem/1.35 var(--corps); color: var(--discret); }
.lien i { font-style: normal; color: var(--corail); transition: transform .25s var(--ease); }
.lien:hover i { transform: translateX(3px); }
.lien.principal { justify-content: center; background: var(--texte); color: var(--fond); border-color: var(--texte); font-size: 1.05rem; }
.lien.principal:hover { background: #fff; }
.astuce { text-align: center; font-size: .8rem; color: var(--discret); margin: -2px 0 4px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 440px) { .duo { grid-template-columns: 1fr; } }

/* ---------- ce que je construis ---------- */
.savoir h2, .bloc h2 { font: 500 .78rem var(--mono); color: var(--discret); letter-spacing: .04em; margin-bottom: 6px; }
.savoir ul { list-style: none; margin: 0; padding: 0; }
.savoir > ul > li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--ligne); }
.savoir > ul > li:last-child { border-bottom: 0; }
.savoir > ul b { font: 600 1rem var(--corps); }
.savoir > ul li span { font-size: .92rem; color: var(--doux); }

/* ---------- carte de visite 3D ---------- */
.carte3d { display: grid; justify-items: center; gap: 12px; perspective: 1000px; }
.carte { position: relative; width: 100%; max-width: 340px; aspect-ratio: 85 / 55; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg))); transition: transform .7s var(--ease); }
.carte3d.retournee .carte { --flip: 180deg; }
.face { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--ligne-2); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .9); }
.face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .12), transparent 55%); }
.recto { display: grid; grid-template-rows: 1fr auto; padding: 20px 22px; background: linear-gradient(150deg, #162123, #0e1516); }
.recto-flux { position: absolute; inset: 0; width: 100%; height: 100%; }
.recto-flux path { fill: none; stroke: rgb(120 160 162 / .22); stroke-width: 1; }
.recto-flux path.vif { stroke: var(--corail); stroke-width: 1.4; }
.recto > p, .recto > div { position: relative; }
.recto-lieu { justify-self: end; font: 500 .7rem var(--mono); color: var(--discret); }
.recto-nom { font: 800 1.7rem/1 var(--titre); font-stretch: 110%; letter-spacing: -.03em; }
.recto-role { margin-top: 8px; font: 500 .68rem var(--mono); color: var(--doux); }
.recto-role span { color: var(--corail); }
.verso { transform: rotateY(180deg); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 20px 22px; background: #121a1b; }
.verso-titre { font: 600 1rem/1.3 var(--corps); max-width: 15ch; }
.verso-site { margin-top: 12px; font: 500 .8rem var(--mono); color: var(--corail); }
.verso-mail { font: 400 .72rem var(--mono); color: var(--discret); }
.qr { width: 96px; height: 96px; border-radius: 8px; background: #fff; padding: 5px; }
.carte3d button { margin-top: 6px; font: 500 .88rem var(--corps); color: var(--doux); background: transparent; border: 1px solid var(--ligne-2); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: color .2s, border-color .2s; }
.carte3d button:hover { color: var(--texte); border-color: var(--doux); }


/* ---------- signature ---------- */
.signature { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding-top: 18px; border-top: 1px solid var(--ligne); font: 400 .75rem var(--mono); color: var(--discret); }

/* ---------- page parcours ---------- */
.colonne.large { width: min(100% - 40px, 42rem); }
.retour { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font: 500 .88rem var(--corps); color: var(--doux); text-decoration: none; transition: color .2s; }
.retour:hover { color: var(--texte); }
.retour i { font-style: normal; color: var(--corail); }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.filtres button { font: 500 .88rem var(--corps); padding: 7px 14px; border-radius: 999px; background: var(--surface); color: var(--doux); border: 1px solid var(--ligne); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.filtres button:hover { color: var(--texte); border-color: var(--ligne-2); }
.filtres button[aria-pressed="true"] { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.filtres i { font-style: normal; opacity: .6; margin-left: 6px; }
.bloc { display: grid; gap: 4px; }
.jalons { list-style: none; margin: 0; padding: 0; position: relative; }
.jalons::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 1px; background: var(--ligne-2); }
.jalon { position: relative; padding: 14px 0 22px 30px; }
.jalon[hidden] { display: none; }
.jalon::before { content: ""; position: absolute; left: 0; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--fond); border: 1.5px solid var(--doux); }
.jalon.en-cours::before { background: var(--corail); border-color: var(--corail); box-shadow: 0 0 0 4px rgb(255 107 94 / .15); }
.jalon-quand { font: 500 .78rem var(--mono); color: var(--discret); }
.jalon.en-cours .jalon-quand { color: var(--corail); }
.jalon h3 { margin: 3px 0 0; font: 700 1.2rem/1.25 var(--titre); font-stretch: 104%; letter-spacing: -.01em; }
.jalon h3 a { text-decoration: none; border-bottom: 1px solid var(--corail); }
.jalon-ou { font-size: .95rem; color: var(--doux); margin-top: 2px; }
.jalon ul { margin: 10px 0 0; padding: 0 0 0 16px; color: var(--doux); font-size: .95rem; }
.jalon li { margin: 4px 0; }
.jalon li::marker { color: var(--discret); }
.jalon-detail { margin-top: 6px; font-size: .95rem; color: var(--doux); }
.axes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.axes span { font: 400 .72rem var(--mono); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--ligne); color: var(--discret); }
.competences { margin: 0; }
.competences div { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ligne); }
.competences div:last-child { border-bottom: 0; }
.competences dt { font: 600 .95rem var(--corps); padding-top: 3px; }
.competences dd { margin: 0; }
.etiquettes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.etiquettes li { font-size: .85rem; padding: 4px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--ligne); color: var(--doux); }
@media (max-width: 480px) { .competences div { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- arrivée : un fondu en cascade, une seule fois ---------- */
.entre { animation: entre .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms + 100ms); }
@keyframes entre { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }

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

/* ---------- un suivi de A à Z : le besoin entre en haut, l'outil sort en bas ---------- */
.suivi { margin-top: 28px; padding: 22px 20px 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--ligne); }
.suivi h3 { margin: 0; font: 700 1.25rem/1.2 var(--titre); font-stretch: 106%; letter-spacing: -.01em; }
.suivi-intro { margin-top: 4px; font-size: .95rem; color: var(--doux); }
.etapes { list-style: none; margin: 18px 0 0; padding: 0; position: relative; counter-reset: etape; }
/* le fil qui relie les étapes : discret au départ, corail à l'arrivée */
.etapes::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 40px; width: 1.5px; background: linear-gradient(var(--ligne-2), var(--corail)); }
.etapes li { position: relative; counter-increment: etape; display: grid; gap: 1px; padding: 0 0 18px 42px; }
.etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--fond); border: 1px solid var(--ligne-2); font: 500 .78rem var(--mono); color: var(--doux); }
.etapes li:last-child::before { background: var(--corail); border-color: var(--corail); color: var(--fond); box-shadow: 0 0 0 5px rgb(255 107 94 / .14); }
.etapes b { font: 600 .98rem/1.6 var(--corps); }
.etapes span { font-size: .9rem; line-height: 1.45; color: var(--doux); }

/* ---------- mise en page : téléphone d'abord, ordinateur ensuite ---------- */
/* sur téléphone, les deux colonnes disparaissent : leurs blocs s'enchaînent dans la colonne unique */
.gauche, .droite { display: contents; }
/* parcours : sur téléphone, le contact vient après les expériences */
.colonne.large .gauche > .liens { order: 1; }
.colonne.large .signature { order: 2; }

@media (min-width: 1024px) {
  body { --voile: 82rem; }
  .colonne, .colonne.large { width: min(100% - 96px, 74rem); grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); column-gap: clamp(56px, 7vw, 112px); row-gap: 56px; align-items: start; }
  .gauche, .droite { display: grid; gap: 36px; }
  /* la colonne de gauche reste visible pendant qu'on fait défiler la droite */
  .gauche { position: sticky; top: 56px; }
  .droite { padding-top: 8px; gap: 56px; }
  .signature { grid-column: 1 / -1; }
  .colonne.large .gauche > .liens, .colonne.large .signature { order: 0; }
  .tete h1 { font-size: 3.6rem; }

  /* ce que je construis : une grille de quatre cartes */
  .savoir > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .savoir > ul > li, .savoir > ul > li:last-child { padding: 18px 20px; border: 1px solid var(--ligne); border-radius: 14px; background: rgb(18 26 27 / .7); }
  .suivi { padding: 28px 28px 12px; }
  /* les six étapes sur deux colonnes, le fil suit chaque colonne */
  .etapes { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: 32px; }
  .etapes::before { display: none; }
  .etapes li::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 1.5px; background: var(--ligne-2); }
  .etapes li:nth-child(3)::after, .etapes li:nth-child(6)::after { display: none; }
  .etapes li:nth-child(4)::after, .etapes li:nth-child(5)::after { background: linear-gradient(var(--ligne-2), var(--corail)); }

  .carte { max-width: 420px; }
  .carte3d { justify-items: start; }
  .recto-nom { font-size: 2.1rem; }

  /* parcours : les blocs prennent toute la largeur de la colonne de droite */
  .colonne.large .droite { gap: 48px; }
}