/* Sales épif. Tokens repris tels quels du brandbook (epif-brandbook.owan.fr, styles.css). */

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/albert-sans.woff2) format("woff2");
}

:root {
  --lime: #A1E04D;
  --foret: #152C12;
  --blanc: #FFFFFF;
  --rosee: #F2FEE2;
  --ambre: #F7D576;
  --lichen: #D1D8D1;
  --ink-soft: #46553F;       /* 5,5:1 sur lichen */
  --on-dark-soft: #C3D3B6;   /* 7,3:1 sur sous-bois */
  --grad-lime: linear-gradient(100deg, #A1E04D 0%, #C2EA62 55%, #E6F68A 100%);
  --grad-sousbois: linear-gradient(160deg, #2E4A1C 0%, #233E17 55%, #152C12 100%);
  --r-board: 28px;
  --r-glass: 22px;
  --r-pill: 999px;
  --trait: rgba(21, 44, 18, .1);
  --gutter: 16px;
}
@media (min-width: 700px) { :root { --gutter: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--lichen);
  color: var(--foret);
  font: 400 1.0625rem/1.55 "Albert Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--foret); outline-offset: 3px; }
::selection { background: var(--lime); color: var(--foret); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: min(100% - 2 * var(--gutter), 1040px); margin-inline: auto; }
main { padding: clamp(36px, 6vw, 64px) 0 96px; }

/* Barre : la pilule en verre du brandbook */
.bar {
  position: sticky; top: 10px; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 8px 8px 8px 20px;
  border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r-pill);
  background: rgba(242, 254, 226, .66);
  box-shadow: 0 12px 32px -22px rgba(21, 44, 18, .5);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.brand { display: flex; align-items: center; gap: 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.brand img { display: block; width: auto; height: 28px; }

/* Pastilles : statuts du plus froid au plus chaud, l'ambre une seule fois par écran */
.tag { display: inline-block; padding: 6px 12px; border-radius: var(--r-pill); color: var(--foret); font-size: .8125rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.tag--ambre { background: var(--ambre); }
.tag--contact { background: #E6EBE3; }
.tag--formulaire { background: var(--rosee); box-shadow: inset 0 0 0 1.5px var(--lime); }
.tag--appel { background: var(--grad-lime); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }

/* Écran 1 : tableau des opportunités */
.head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin: 0 8px 22px; }
.title { font-size: clamp(2.25rem, 5vw, 2.625rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.lede { color: var(--ink-soft); font-size: 1rem; }

.board { padding: 8px; border-radius: var(--r-board); background: var(--blanc); box-shadow: 0 24px 48px -36px rgba(21, 44, 18, .5); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th { padding: 12px 16px 8px; color: var(--ink-soft); font-size: .8125rem; font-weight: 500; text-align: left; }
.table td { padding: 12px 16px; border-top: 1px solid var(--trait); }
.table tbody tr { position: relative; }
.table tbody tr:is(:hover, :focus-within) td { border-top-color: transparent; background: var(--rosee); }
.table tbody tr:is(:hover, :focus-within) + tr td { border-top-color: transparent; }
.table tbody tr:is(:hover, :focus-within) td:first-child { border-radius: 16px 0 0 16px; }
.table tbody tr:is(:hover, :focus-within) td:last-child { border-radius: 0 16px 16px 0; }
.nom { font-weight: 700; }
.tel, .horodatage { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .ouvrir { width: 1%; padding-block: 8px; }
.go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-soft); }
.go::after { content: ""; position: absolute; inset: 0; } /* toute la ligne ouvre la timeline */
.go .i { width: 20px; height: 20px; }
.table tbody tr:hover .go, .go:focus-visible { background: var(--grad-lime); color: var(--foret); }

@media (max-width: 639px) {
  .table thead { display: none; }
  /* une ligne = une carte : nom et horodatage en haut, téléphone, statut, flèche à droite */
  .table tbody tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 0;
    grid-template-areas: "nom prenom date" "tel tel go" "statut statut go";
    padding: 14px 10px 14px 14px;
  }
  .table tbody tr + tr { border-top: 1px solid var(--trait); }
  .table td { padding: 0; border: 0; }
  .table td:empty { display: none; }
  .table .nom { grid-area: nom; margin-right: .3em; }
  .table .prenom { grid-area: prenom; }
  .table .tel { grid-area: tel; }
  .table .statut { grid-area: statut; margin-top: 4px; }
  .table .horodatage { grid-area: date; justify-self: end; padding-left: 12px; color: var(--ink-soft); font-size: .8125rem; font-weight: 500; }
  .table .ouvrir { grid-area: go; justify-self: end; width: auto; padding: 0; }
  .table tbody tr:is(:hover, :focus-within) { border-radius: 16px; background: var(--rosee); }
  .table tbody tr:is(:hover, :focus-within), .table tbody tr:is(:hover, :focus-within) + tr { border-top-color: transparent; }
  .table tbody tr:is(:hover, :focus-within) td { background: none; }
}

/* Écran 2 : timeline du prospect */
.back {
  display: inline-flex; align-items: center; gap: .5em;
  margin-bottom: 20px; padding: .75em 1.2em .75em 1em; border-radius: var(--r-pill);
  background: rgba(21, 44, 18, .1); font-size: .9375rem; font-weight: 600; line-height: 1; text-decoration: none;
}
.back:hover { background: rgba(21, 44, 18, .16); }

.prospect {
  display: grid; justify-items: start; gap: 12px;
  padding: clamp(28px, 5vw, 48px);
  border-radius: var(--r-board);
  background: radial-gradient(80% 70% at 92% 0%, rgba(125, 170, 70, .34), transparent 62%), var(--grad-sousbois);
  color: var(--rosee);
}
.prospect h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; overflow-wrap: anywhere; }
.prospect p { color: var(--on-dark-soft); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.prospect .tag { margin-top: 4px; }
.vide { padding: 24px 8px; color: var(--ink-soft); }

.frise { margin: clamp(32px, 5vw, 48px) 0 0; padding: 0; list-style: none; }
.frise li { position: relative; display: grid; grid-template-columns: 9.5rem 32px minmax(0, 1fr); column-gap: 14px; padding-bottom: 28px; }
.frise li::before { /* le trait qui relie chaque point au suivant */
  content: ""; position: absolute; top: 16px; bottom: -16px; left: calc(9.5rem + 29px);
  width: 2px; background: rgba(21, 44, 18, .2);
}
.frise li:last-child::before { content: none; }
.frise time { padding-top: 7px; color: var(--ink-soft); font-size: .8125rem; font-weight: 500; line-height: 1.35; text-align: right; font-variant-numeric: tabular-nums; }
.frise time span { display: block; }
.point { position: relative; z-index: 1; justify-self: center; width: 12px; height: 12px; margin-top: 10px; border-radius: 50%; background: var(--foret); box-shadow: 0 0 0 5px var(--lichen); }
.conversion .point { width: 20px; height: 20px; margin-top: 6px; background: var(--lime); box-shadow: inset 0 0 0 2px var(--foret), 0 0 0 5px var(--lichen); }

.provider { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 32px; font-size: .9375rem; font-weight: 700; }
.libelle { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(21, 44, 18, .08); font-size: .8125rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.tuile { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 30%; background: var(--blanc); box-shadow: 0 6px 14px -10px rgba(21, 44, 18, .7); }
.tuile .i { width: 17px; height: 17px; }
.tuile img { display: block; width: 32px; height: 32px; }
.conversion .tuile { background: none; box-shadow: none; }

.carte { max-width: 60ch; margin-top: 10px; padding: 14px 18px 16px; border-radius: var(--r-glass); background: var(--blanc); box-shadow: 0 20px 44px -30px rgba(40, 64, 24, .55); }
.texte { font-size: 1rem; line-height: 1.5; }
.url { font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; text-underline-offset: .2em; }
.url .i { margin-left: .35em; vertical-align: -.2em; transform: rotate(-45deg); } /* flèche du brandbook, inclinée : s'ouvre dans Fathom */

.transcription p { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 12px; padding: 4px 0; font-size: .9375rem; line-height: 1.45; }
.transcription summary {
  display: inline-flex; margin: 8px 0 4px; padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(21, 44, 18, .07); font-size: .875rem; font-weight: 600; line-height: 1; list-style: none; cursor: pointer;
}
.transcription summary::-webkit-details-marker { display: none; }
.transcription summary:hover { background: rgba(21, 44, 18, .12); }
details[open] .plus, details:not([open]) .moins { display: none; }

@media (max-width: 699px) {
  .frise li { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; }
  .frise li::before { top: 10px; bottom: -10px; left: 9px; }
  .frise time { grid-column: 2; padding: 0; text-align: left; }
  .frise time span { display: inline; }
  .frise time span:first-child::after { content: ","; }
  .point { grid-column: 1; grid-row: 1; margin-top: 4px; }
  .conversion .point { margin-top: 0; }
  .evt { grid-column: 2; margin-top: 6px; }
  .transcription p { grid-template-columns: 1fr; gap: 0; }
}