/* 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 */
/* Bandeau collant pleine largeur : la pilule reste un vrai header, le contenu défile dessous sans la chevaucher */
.entete { position: sticky; top: 0; z-index: 10; padding: 10px 0 8px; background: var(--lichen); }
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  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; }

/* Onglets de l'en-tête : ceux de la barre du brandbook, l'actif en dégradé lime */
.onglets { display: flex; gap: 4px; margin-right: auto; }
.onglets a {
  padding: 9px 16px; border-radius: var(--r-pill);
  color: var(--ink-soft); font-size: .9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.onglets a:hover { background: rgba(21, 44, 18, .07); color: var(--foret); }
.onglets a[aria-current] {
  background: var(--grad-lime); color: var(--foret);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px -8px rgba(90, 140, 30, .8);
}
@media (max-width: 639px) {
  /* sur mobile, les onglets passent sur une 2e ligne, en quatre parts égales */
  .bar { flex-wrap: wrap; row-gap: 6px; padding: 8px; border-radius: 24px; }
  .brand { padding-left: 10px; }
  .onglets { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(4, 1fr); margin-right: 0; }
  .onglets a { padding-inline: 6px; text-align: center; }
}

/* 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); }
.tag--noshow { background: #F3E3C9; }
.tag--suivi { background: var(--rosee); box-shadow: inset 0 0 0 1.5px var(--lime); }
.tag--depot { background: var(--ambre); }
.tag--gagne { background: var(--foret); color: var(--rosee); }
.tag--perdu { background: #E9DCDC; color: #5A2E2E; }
/* offre : SAE en lime, Reconversion en ambre (mêmes couleurs que le liseré des cartes) */
.tag--offre { padding: 3px 9px; font-size: .6875rem; letter-spacing: .02em; }
.tag--sae { background: var(--rosee); box-shadow: inset 0 0 0 1.5px var(--lime); }
.tag--reconversion { background: var(--ambre); }

/* É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; }
.provider .meta { color: var(--ink-soft); font-size: .8125rem; font-weight: 500; } /* commercial · durée */
.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); }
.carte > * + * { margin-top: 10px; } /* texte, transcription et liens empilés */
.texte { font-size: 1rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; } /* sauts de ligne des SMS et du formulaire */
.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; }
}

/* Écran CRM : en attente */
.bientot { display: grid; place-items: center; min-height: 42vh; padding: 48px 24px; }
.bientot p { color: var(--ink-soft); font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -.01em; }

/* Écran Calendrier : semaine (grille horaire) ou mois, façon agenda ; liste des jours sur mobile */
.cal-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 8px 16px; }
.cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-periode { margin: 0 0 0 6px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.cal-btn, .cal-rond, .cal-vues button { border: 0; color: var(--foret); font-family: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.cal-btn { padding: 9px 16px; border-radius: var(--r-pill); background: rgba(21, 44, 18, .1); }
.cal-rond { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: rgba(21, 44, 18, .1); }
.cal-btn:hover, .cal-rond:hover { background: rgba(21, 44, 18, .16); }
.cal-vues { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .6); }
.cal-vues button { padding: 8px 16px; border-radius: var(--r-pill); background: none; color: var(--ink-soft); }
.cal-vues [aria-pressed="true"] { background: var(--grad-lime); color: var(--foret); }

.cal { padding: 12px 12px 16px; }
.cal .vide { padding: 4px 8px 12px; }
.cal h3 { margin: 0; font-size: .875rem; font-weight: 600; }
.cal h3 .long { display: none; }
.auj h3 :is(.court, .long) { padding: 3px 10px; border-radius: var(--r-pill); background: var(--grad-lime); color: var(--foret); }

/* Rendez-vous : R1 en lime, R2 en sous-bois ; heure, type et prospect */
.rdv { display: block; overflow: hidden; padding: 4px 8px; border-radius: 10px; font-size: .8125rem; line-height: 1.3; text-decoration: none; }
/* couleur = offre (SAE lime, Reconversion ambre, comme le CRM) ; R2 = contour forêt */
.rdv--r1, .rdv--r2 { background: var(--grad-lime); color: var(--foret); }
.rdv--reconversion { background: var(--ambre); }
.rdv--r2 { box-shadow: inset 0 0 0 2px var(--foret); }
.cal-droite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-offres [aria-pressed="true"] { background: var(--foret); color: var(--rosee); }
.point { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; vertical-align: 0; }
.point--sae { background: var(--lime); }
.point--reconversion { background: var(--ambre); }
.rdv:hover { filter: brightness(1.05) saturate(1.08); }
.rdv__h { font-weight: 600; font-variant-numeric: tabular-nums; }
.rdv b { font-weight: 800; }
.rdv__nom { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

/* Semaine : une colonne par jour, une ligne par heure (créneau d'1 h) */
.semaine { --h: 48px; --min: calc(var(--h) / 60); --entete: 44px; display: grid; grid-template-columns: 3rem repeat(7, minmax(0, 1fr)); }
.heures { padding-top: var(--entete); }
.heures span { display: block; height: var(--h); padding-right: 8px; color: var(--ink-soft); font-size: .75rem; font-weight: 500; text-align: right; transform: translateY(-.6em); }
.jour { min-width: 0; border-left: 1px solid var(--trait); }
.jour.auj { background: rgba(242, 254, 226, .7); }
.jour h3 { display: grid; place-items: center; height: var(--entete); color: var(--ink-soft); }
.creneaux {
  position: relative; height: calc(var(--heures) * var(--h)); border-top: 1px solid var(--trait);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--h) - 1px), var(--trait) calc(var(--h) - 1px) var(--h));
}
.semaine .rdv {
  position: absolute; top: calc((var(--debut) - var(--h0) * 60) * var(--min) + 1px); height: calc(var(--h) - 3px);
  left: calc(100% * var(--couloir) / var(--couloirs) + 3px); width: calc(100% / var(--couloirs) - 6px);
}

/* Mois : lundi en premier, jours des mois voisins grisés */
.mois { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mois__jour { padding: 4px 0 8px; color: var(--ink-soft); font-size: .8125rem; font-weight: 500; text-align: center; }
.case { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 7rem; padding: 6px; border-top: 1px solid var(--trait); border-left: 1px solid var(--trait); }
.case:nth-child(7n + 1) { border-left: 0; } /* 1re case de chaque ligne (les 7 en-têtes comptent) */
.case h3 { margin-bottom: 2px; text-align: center; }
.case.hors { background: rgba(209, 216, 209, .22); }
.case.hors h3 { color: var(--ink-soft); font-weight: 500; }
.mois .rdv { flex: none; white-space: nowrap; text-overflow: ellipsis; }
.mois .rdv__nom { display: inline; }

@media (max-width: 699px) {
  /* mobile : liste des jours qui ont un rendez-vous */
  .cal { padding: 4px 12px 12px; }
  .semaine, .mois { grid-template-columns: 1fr; }
  .heures, .mois__jour, .jour:not(:has(.rdv)), .case:not(:has(.rdv)), .case.hors { display: none; }
  .jour, .case { min-height: 0; padding: 0; border: 0; }
  .jour.auj { background: none; }
  .cal h3 { display: block; height: auto; padding: 14px 4px 8px; color: var(--foret); text-align: left; }
  .cal h3 .court { display: none; }
  .cal h3 .long { display: inline-block; }
  .creneaux { display: grid; gap: 6px; height: auto; border: 0; background: none; }
  .semaine .rdv { position: static; width: auto; height: auto; }
  .cal .rdv { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 14px; font-size: .9375rem; white-space: normal; }
  .cal .rdv__nom { display: inline; white-space: normal; }
}

/* Écran KPI : sections empilées, le Funnel en cartes reliées par le taux de passage */
.periode { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .9375rem; font-weight: 600; }
.periode select { padding: 8px 14px; border: 0; border-radius: var(--r-pill); background: var(--grad-lime); color: var(--foret); font: inherit; font-weight: 600; cursor: pointer; }
.kpi + .kpi { margin-top: 32px; }
.kpi__titre { margin: 0 8px 12px; font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.funnel { display: flex; align-items: center; gap: 8px; padding: 20px; }
.etape { flex: 1 1 0; min-width: 0; padding: 18px 12px; border-radius: var(--r-glass); background: #F4F6F3; box-shadow: inset 0 0 0 1.5px var(--trait); text-align: center; }
.colonne { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.funnel { align-items: flex-start; }
.funnel .taux { margin-top: 44px; }
.funnel .etape { min-height: 7.5rem; } /* mêmes hauteurs : les petites stats restent alignées */
.sous-stat { color: var(--ink-soft); font-size: .8125rem; text-align: center; font-variant-numeric: tabular-nums; } /* statistique complémentaire, en petit */
.sous-stat b { color: var(--foret); font-weight: 700; }
.etape--cle { background: var(--rosee); box-shadow: inset 0 0 0 1.5px var(--lime); } /* seul chiffre en vert : le résultat de la section */
.etape h3 { margin: 0 0 8px; font-size: .875rem; font-weight: 700; }
.etape__n { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.etape__unite { min-height: 1.3em; color: var(--ink-soft); font-size: .8125rem; font-weight: 500; }
.taux { flex: none; display: flex; flex-direction: column; align-items: center; color: var(--foret); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.taux::after { content: "→"; font-size: 1.1rem; line-height: 1; }
.cash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 20px; }
#marketing { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.setting { display: flex; align-items: center; gap: 12px; padding: 20px; }
.closing { padding: 8px 20px 20px; }
.ligne-titre { margin: 12px 4px 8px; color: var(--ink-soft); font-size: .875rem; font-weight: 700; }
.ligne { display: flex; gap: 12px; }
.ligne--global { justify-content: center; margin-top: 20px; }
.ligne--global .etape { flex: 0 1 320px; }
.a-definir { padding: 28px; color: var(--ink-soft); font-weight: 600; text-align: center; }
@media (max-width: 699px) {
  .funnel { flex-direction: column; align-items: stretch; }
  .funnel .taux { margin-top: 0; }
  .cash, #marketing { grid-template-columns: 1fr; }
  .setting { flex-direction: column; align-items: stretch; }
  .ligne { flex-wrap: wrap; }
  .ligne .etape { flex: 1 1 40%; }
  .taux { flex-direction: row; justify-content: center; gap: 6px; }
  .taux::after { content: "↓"; }
}

/* Écran CRM : plateau de colonnes (défilement horizontal), cartes résumées, fiche en pop-up */
/* Filtres du CRM : menus déroulants (Offre, Réservé par) à gauche, recherche à droite */
.filtres { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: -6px 8px 18px; }
.filtres__gauche { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
/* menus déroulants étiquetés : Offre, Réservé par */
.choix { display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .55); color: var(--ink-soft); font-size: .8125rem; font-weight: 600; }
.choix select {
  appearance: none; -webkit-appearance: none; padding: 7px 34px 7px 14px; border: 0; border-radius: var(--r-pill); background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23152C12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  color: var(--foret); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer;
}
.choix select:hover { background-color: var(--rosee); }
.recherche { flex: 0 1 240px; min-width: 160px; margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: var(--r-pill); background: var(--blanc); box-shadow: inset 0 0 0 1px var(--trait); color: var(--ink-soft); }
.recherche:focus-within { box-shadow: inset 0 0 0 2px var(--lime); }
.recherche input { flex: 1; min-width: 0; border: 0; background: none; color: var(--foret); font: inherit; font-size: .9375rem; outline: none; }
.recherche input::placeholder { color: var(--ink-soft); }
.recherche input::-webkit-search-cancel-button { cursor: pointer; }
/* Plateau : pleine largeur de l'écran, colonnes qui s'étirent ; au-delà, défilement horizontal (barre fine toujours visible) */
.wrap.plein { width: min(100% - 2 * var(--gutter), 1560px); }
.plateau { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 18px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(21, 44, 18, .35) transparent; }
.plateau::-webkit-scrollbar { height: 8px; }
.plateau::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(21, 44, 18, .35); }
.plateau > .vide { padding: 24px 8px; color: var(--ink-soft); }
.colonne-crm { flex: 1 0 270px; min-width: 270px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-glass); background: rgba(255, 255, 255, .55); scroll-snap-align: start; }
.colonne-crm h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px 4px; font-size: .9375rem; font-weight: 800; }
.colonne-crm__titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colonne-crm__n { color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.colonne-crm__plier { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; }
.colonne-crm__plier .i { width: 16px; height: 16px; }
.colonne-crm__plier:hover { background: rgba(21, 44, 18, .08); color: var(--foret); }
/* colonne réduite : juste le titre à la verticale et le nombre ; un clic la rouvre */
.colonne-crm--reduite { flex: 0 0 48px; min-width: 48px; padding: 8px 6px; }
.colonne-crm--reduite .colonne-crm__plier { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; height: 100%; min-height: 160px; padding: 6px 0; border-radius: 12px; color: var(--foret); font: inherit; }
.colonne-crm--reduite .colonne-crm__n { font-size: .875rem; }
.colonne-crm--reduite .colonne-crm__titre { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .9375rem; font-weight: 800; overflow: visible; }
.carte-crm {
  display: block; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--blanc);
  box-shadow: 0 8px 18px -14px rgba(21, 44, 18, .6); color: var(--foret); font: inherit; font-size: .875rem; text-align: left; cursor: pointer;
}
.carte-crm { border-left: 4px solid transparent; }
.carte-crm[data-offre="SAE"] { border-left-color: var(--lime); }
.carte-crm[data-offre="Reconversion"] { border-left-color: var(--ambre); }
.carte-crm__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.carte-crm__tete b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-crm__tete .tag { flex: none; }
.carte-crm__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; margin-top: 5px; color: var(--foret); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.carte-crm__info { white-space: nowrap; }
.carte-crm__info--passe { color: var(--ink-soft); font-weight: 500; }
.carte-crm__info--age { margin-left: auto; color: var(--ink-soft); font-weight: 500; }
.carte-crm:hover { background: var(--rosee); }
.carte-crm b { font-size: .9375rem; }
.carte-crm span { overflow: hidden; color: var(--ink-soft); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } /* e-mail long : coupé proprement, complet dans la fiche */
.fiche { width: min(620px, 100% - 32px); padding: 0; border: 0; border-radius: var(--r-board); background: #E9EEE6; color: var(--foret); box-shadow: 0 30px 60px -30px rgba(21, 44, 18, .6); }
.fiche__titre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.champ dd .tag { font-size: .75rem; }
.bloc--vente { background: var(--rosee); }
.frise--fiche { margin-top: 4px; }
.frise--fiche li { grid-template-columns: 6.5rem 24px minmax(0, 1fr); column-gap: 10px; padding-bottom: 18px; }
.frise--fiche li::before { top: 14px; bottom: -14px; left: calc(6.5rem + 21px); }
.frise--fiche .point { width: 10px; height: 10px; margin-top: 9px; box-shadow: 0 0 0 4px var(--blanc); }
.frise--fiche time { font-size: .75rem; }
.frise--fiche .carte { max-width: none; padding: 10px 14px 12px; border-radius: 14px; background: #F4F6F2; box-shadow: none; }
.frise--fiche .tuile { width: 26px; height: 26px; }
.frise--fiche .tuile img { width: 26px; height: 26px; }
.frise--fiche .tuile .i { width: 14px; height: 14px; }
.fiche__corps { display: grid; gap: 14px; padding: 18px 20px 22px; }
.fiche__corps [role=tabpanel]:not([hidden]) { display: grid; gap: 14px; }
.fiche [hidden] { display: none !important; } /* un panneau ou un sous-panneau masqué le reste, quelle que soit sa règle d'affichage */
.bloc { padding: 16px 18px 18px; border: 1px solid var(--trait); border-radius: 18px; background: var(--blanc); box-shadow: 0 16px 34px -26px rgba(21, 44, 18, .7), 0 1px 0 rgba(255, 255, 255, .9) inset; }
.sous-onglets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.sous-onglets [role=tab] { padding: 6px 12px; border: 0; border-radius: var(--r-pill); background: rgba(21, 44, 18, .06); color: var(--ink-soft); font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; }
.sous-onglets [role=tab]:hover { color: var(--foret); }
.sous-onglets [role=tab][aria-selected="true"] { background: var(--grad-lime); color: var(--foret); }
.bloc h3 { margin: 0 0 10px; color: var(--foret); font-size: .9375rem; font-weight: 800; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 16px; margin: 0; }
.champ dt { color: var(--ink-soft); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.champ dd { margin: 2px 0 0; font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.champ dd a { text-decoration-color: var(--lime); text-underline-offset: .2em; }
.fiche .fiche__qr { margin: 0 0 10px; }
.fiche .fiche__qr span { display: block; color: var(--ink-soft); font-size: .75rem; line-height: 1.35; }
.fiche .fiche__qr b { display: block; font-size: .9375rem; font-weight: 600; }
.fiche__pied { padding: 4px 20px 20px; }
.bouton { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--r-pill); background: var(--grad-lime); color: var(--foret); font-size: .9375rem; font-weight: 700; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.bouton:hover { filter: brightness(1.04); }
.bouton--second { background: var(--foret); color: var(--rosee); box-shadow: none; }
.fiche__actions { margin: 12px 0 0; }
.fiche__actions .bouton { padding: 9px 16px; font-size: .875rem; }
.bouton .i { width: 18px; height: 18px; }
.fiche::backdrop { background: rgba(21, 44, 18, .35); backdrop-filter: blur(2px); }
.fiche[open] { display: flex; flex-direction: column; height: calc(100vh - 48px); margin: 24px auto; } /* hauteur fixe, ancrée en haut : changer d'onglet ne la fait pas bouger ; [open] : fermée, la boîte reste masquée */
body:has(.fiche[open]) { overflow: hidden; } /* fiche ouverte : le plateau ne défile plus derrière */
.lecteur { display: grid; gap: 4px; }
.lecteur audio { display: block; width: 100%; height: 38px; }
.lecteur .url { font-size: .8125rem; }
.fiche__tete { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 64px 0 20px; }
.fiche__tete h2 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.fiche__corps { flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
.fiche__onglets { display: flex; gap: 2px; margin: 2px -44px 0 0; padding: 0 0 10px; overflow-x: auto; }
.fiche__onglets [role=tab] { padding: 8px 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-soft); font: inherit; font-size: .875rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.fiche__onglets [role=tab]:hover { color: var(--foret); }
.fiche__onglets [role=tab][aria-selected="true"] { background: var(--foret); color: var(--rosee); }
.fiche__fermer { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(21, 44, 18, .08); color: var(--foret); font: inherit; cursor: pointer; }

.fiche p { overflow-wrap: anywhere; }
.fiche__lib { display: inline-block; min-width: 6rem; color: var(--ink-soft); font-size: .875rem; }
.fiche__vide { color: var(--ink-soft); font-style: normal; }
.fiche__qr { display: grid; gap: 2px; margin: 0 0 10px; }
.fiche__qr span { color: var(--ink-soft); font-size: .875rem; }
@media (min-width: 1100px) { .wrap.large { width: min(100% - 2 * var(--gutter), 1320px); } .wrap.large.plein { width: min(100% - 2 * var(--gutter), 1560px); } }

.contrat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; }
.contrat label { display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .875rem; font-weight: 600; }
.contrat__type { flex: 1; min-width: 0; padding: 8px 12px; border: 1.5px solid var(--trait); border-radius: 12px; background: var(--blanc); color: var(--foret); font: inherit; font-size: .875rem; }
.contrat__generer { padding: 9px 18px; border: 0; border-radius: var(--r-pill); background: var(--grad-lime); color: var(--foret); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -10px rgba(98, 150, 30, .9); }
.contrat__choix { flex-basis: 100%; padding: 10px 14px; border-radius: 14px; background: var(--rosee); font-size: .875rem; font-weight: 600; }

/* Membre connecté et déconnexion, dans la barre */
.bar .tag--ambre { margin-left: auto; }
.membre { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.info { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ambre); color: var(--foret); cursor: default; }
.info .i { width: 13px; height: 13px; }
/* bulle « Lecture seule » : visible tout de suite au survol ou au clavier, sans attendre l'infobulle du navigateur */
.info::after {
  content: attr(data-bulle); position: absolute; top: calc(100% + 10px); right: -8px; z-index: 20; width: 260px;
  padding: 8px 12px; border-radius: 12px; background: var(--foret); color: var(--rosee); font-size: .8125rem; font-weight: 500; line-height: 1.4; text-align: left; white-space: normal;
  box-shadow: 0 12px 28px -14px rgba(21, 44, 18, .7); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .12s, transform .12s;
}
.info:hover::after, .info:focus-visible::after { opacity: 1; transform: none; }
.deconnexion { padding: 7px 14px; border: 0; border-radius: var(--r-pill); background: rgba(21, 44, 18, .08); color: var(--foret); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.deconnexion:hover { background: rgba(21, 44, 18, .14); }
@media (max-width: 639px) { .membre { display: none; } }

/* Page de connexion */
.page-login main { display: grid; place-items: center; min-height: 100vh; padding: 24px 0; }
.connexion { display: grid; gap: 14px; width: min(100%, 380px); padding: 32px 28px; border-radius: var(--r-board); background: var(--blanc); box-shadow: 0 24px 48px -36px rgba(21, 44, 18, .5); }
.connexion img { height: 40px; width: auto; }
.connexion h1 { margin: 4px 0 6px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.connexion label { display: grid; gap: 6px; color: var(--ink-soft); font-size: .875rem; font-weight: 600; }
.connexion input { padding: 11px 14px; border: 1.5px solid var(--trait); border-radius: 12px; color: var(--foret); font: inherit; font-size: 1rem; }
.connexion input:focus { border-color: var(--lime); outline: 2px solid var(--lime); }
.connexion button { margin-top: 6px; padding: 12px; border: 0; border-radius: var(--r-pill); background: var(--grad-lime); color: var(--foret); font: inherit; font-weight: 700; cursor: pointer; }
.connexion__erreur { padding: 10px 14px; border-radius: 12px; background: #FBEDEA; color: #8A2A14; font-size: .875rem; font-weight: 600; }