trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

.rich-content ul {
  list-style-type: disc !important;
  list-style-position: inside;
  padding-left: 1rem;
  margin: 0.5rem 0;
}

.rich-content ol {
  list-style-type: decimal !important;
  list-style-position: inside;
  padding-left: 1rem;
  margin: 0.5rem 0;
}

.rich-content li {
  display: list-item !important;
  margin-bottom: 0.25rem;
}

.rich-content p {
  margin-bottom: 0.5rem;
}
/* ── Overrides sidebar admin (spécificité supérieure à screen-admin.css) ── */

.admin-sidebar .admin-sidebar-item {
  color: var(--hda-muted);
}
.admin-sidebar .admin-sidebar-item svg {
  color: var(--hda-muted);
  flex-shrink: 0;
}
.admin-sidebar .admin-sidebar-item:hover {
  background: var(--hda-warm);
  color: var(--hda-green);
}
.admin-sidebar .admin-sidebar-item:hover svg {
  color: var(--hda-green);
}
.admin-sidebar .admin-sidebar-item.is-active {
  background: var(--hda-warm);
  color: var(--hda-orange);
  font-weight: 700;
}
.admin-sidebar .admin-sidebar-item.is-active svg {
  color: var(--hda-orange);
}

/* ── Cards sur fond crème : blanc pour les distinguer ── */
.admin-stat-card:not(.admin-stat-primary),
.card {
  background: #ffffff;
}

/* ── Navbar backoffice ── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 68px;
  display: flex;
  align-items: center;
}

.navbar-backoffice {
  background: #fffbf7;
  border-bottom: 2px solid #F2E7DD;
  width: 100%;
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: 0 1.5rem;
  height: 68px;
}

.nav-brand {
  justify-self: start;
  display: flex;
  align-items: center;
}

.nav-brand img {
  height: 36px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  justify-self: center;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: end;
  white-space: nowrap;
}

.nav-tab-switch {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid #F2E7DD;
  background: #fffbf7;
  color: #6b7e7c;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-tab-switch:hover {
  background: #F2E7DD;
  color: #00594F;
}
.nav-tab-switch.is-active {
  background: #00594F;
  color: #fffbf7;
  border-color: #00594F;
}

.admin-mode-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fffbf7;
  background: #B94700;
  padding: 0.2rem 0.75rem;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.avatar-md {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: #fffbf7;
  flex-shrink: 0;
}

.nav-user-name {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: #00594F;
  white-space: nowrap;
}

/* ── Shell sticky ── */
html {
  height: 100%;
}

body.backoffice-body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.navbar-backoffice {
  flex-shrink: 0;
}

.backoffice-shell {
  display: flex !important;
  align-items: flex-start !important;
  overflow: visible !important;
  min-height: calc(100vh - 68px);
}

.admin-sidebar {
  position: sticky !important;
  top: 68px !important;
  height: calc(100vh - 68px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex-shrink: 0 !important;
  width: 220px !important;
  align-self: flex-start !important;
  background: #fffbf7;
  border-right: 1px solid #F2E7DD;
}

.admin-sidebar.is-collapsed {
  width: 56px !important;
}

.backoffice-main {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.backoffice-body,
.backoffice-main {
  background-color: #fffbf7 !important;
}

/* ── Grille 2 colonnes partagée (show & edit pages) ── */
.admin-show-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 2rem;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* ── Label de section (déjà correct dans screen-admin.css, renforcement) ── */
.admin-sidebar-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hda-muted-2);
  padding: 0.625rem 0.625rem 0.25rem;
  margin: 0;
  display: block;
}

/* ── Admin Masterclass Show ── */
.mc-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.3rem 0.875rem;
  border-radius: 9999px;
  font-family: var(--font-body);
}
.mc-status-pending   { background: #FFF3CD; color: #856404; }
.mc-status-validated { background: #d6eeeb; color: var(--hda-green); }
.mc-status-rejected  { background: #fde8dc; color: var(--hda-orange); }
.mc-status-changes   { background: #ede9fe; color: #5b21b6; }

.mc-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.625rem;
}
.mc-photo-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hda-border);
}
.mc-photo-item img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  display: block;
}
.mc-photo-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: rgba(185, 71, 0, 0.88);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--font-body);
}
.mc-photo-delete:hover { background: var(--hda-orange); }

.inline-edit-view {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}
.inline-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hda-muted);
  font-size: 0.875rem;
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.inline-edit-btn:hover {
  color: var(--hda-orange);
  background: var(--hda-warm);
}

/* ── Admin Show — sections génériques ── */
.admin-show-section {
  background: #ffffff;
  border: 1px solid #E8DDD4;
  border-radius: 4px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.admin-show-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #B94700;
  margin: 0 0 0.75rem;
  display: block;
}

.admin-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px solid #E8DDD4;
  color: #00594F;
  gap: 1rem;
}
.admin-info-row:last-child { border-bottom: none; }
.admin-info-row > span:first-child,
.admin-info-row > dt { color: #888; font-weight: 400; flex-shrink: 0; }
.admin-info-row > strong,
.admin-info-row > dd { font-weight: 600; text-align: right; }

.admin-pencil {
  background: none;
  border: 1px solid #E8DDD4;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  font-size: 11px;
  cursor: pointer;
  color: #aaa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  flex-shrink: 0;
}
.admin-pencil:hover { background: #F2E7DD; color: #B94700; border-color: #B94700; }

.admin-field-input {
  width: 100%;
  border: 1.5px solid #B94700;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 13.5px;
  color: #00594F;
  font-family: inherit;
  box-sizing: border-box;
  background: #fffbf7;
  resize: vertical;
}
.admin-field-input:focus { outline: none; border-color: #00594F; }

.admin-btn-save {
  background: #00594F;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.admin-btn-save:hover { background: #004840; }

.admin-btn-ghost {
  background: none;
  border: 1px solid #E8DDD4;
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 13px;
  color: #00594F;
  cursor: pointer;
}

.admin-btn-validate {
  width: 100%;
  background: #B94700;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 0 #7a2e00;
  transition: transform 0.1s, box-shadow 0.1s;
  text-align: center;
  display: block;
}
.admin-btn-validate:hover { transform: translate(2px,2px); box-shadow: none; }

.admin-btn-modif {
  width: 100%;
  background: transparent;
  color: #00594F;
  border: 1px solid #E8DDD4;
  border-radius: 4px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 2px 2px 0 0 #E8DDD4;
  transition: transform 0.1s, box-shadow 0.1s;
  text-align: center;
  display: block;
}
.admin-btn-modif:hover { transform: translate(2px,2px); box-shadow: none; }

.admin-btn-refuser {
  width: 100%;
  background: transparent;
  color: #B94700;
  border: none;
  font-size: 13px;
  padding: 4px;
  cursor: pointer;
  text-align: center;
  display: block;
}
.admin-btn-refuser:hover { text-decoration: underline; }

.admin-mc-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E1F5EE;
  color: #0F6E56;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Trix editor (Action Text) ── */
trix-editor {
  border: 1.5px solid #B94700 !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  min-height: 140px;
  font-size: 14px;
  color: #00594F;
  font-family: inherit;
  background: #fffbf7;
}
trix-editor:focus {
  outline: none;
  border-color: #00594F !important;
}
trix-toolbar .trix-button-group {
  border-color: #E8DDD4;
}
trix-toolbar .trix-button {
  color: #00594F;
}
trix-toolbar .trix-button.trix-active {
  background: #F2E7DD;
  color: #B94700;
}

/* ── Dashboard tableau de bord ── */
.dashboard-section {
  margin-bottom: 2.5rem;
}

.dashboard-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.dashboard-section-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hda-green);
  white-space: nowrap;
  margin: 0;
}

.dashboard-section-line {
  flex: 1;
  height: 1px;
  background: var(--hda-border);
}

.dashboard-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
}

.dashboard-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
}

.dashboard-card-alert {
  border-left: 3px solid var(--hda-orange) !important;
}

.dashboard-label-alert {
  color: var(--hda-orange) !important;
}

.dashboard-link {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--hda-green);
  text-decoration: none;
}
.dashboard-link:hover { text-decoration: underline; }

.dashboard-link-alert {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--hda-orange);
  text-decoration: none;
}
.dashboard-link-alert:hover { text-decoration: underline; }

/* ── Classes legacy (conservées pour compatibilité) ── */
.admin-mc-section { background: #fff; border: 1px solid #E8DDD4; border-radius: 4px; padding: 1.125rem 1.25rem; margin-bottom: 1rem; }
.admin-mc-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #B94700; margin: 0; }
.admin-edit-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #888; background: none; border: 1px solid #E8DDD4; border-radius: 4px; padding: 3px 8px; cursor: pointer; transition: all 0.12s; }
.admin-edit-btn:hover, .admin-edit-btn.is-editing { background: #F2E7DD; color: #B94700; border-color: #B94700; }
.admin-edit-pencil { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; cursor: pointer; color: #888; background: none; border: none; opacity: 0.5; flex-shrink: 0; }
.admin-edit-pencil:hover { opacity: 1; color: #B94700; background: #F2E7DD; }
@import "tokens.css";
@import "./hda_styles.css";
@import "./hda_screens.css";
@import "./screens-new.css";
@import "./screen-admin.css";

/* ── Boutons dashboard ── */
.dash-btn-primary {
  display: block; width: 100%; padding: 8px 16px; border-radius: 2px;
  background: #B94700; color: #fffbf7 !important; border: none;
  font-family: 'Byrd', Georgia, serif; font-weight: 600; font-size: var(--fs-small);
  text-decoration: none !important; text-align: center; cursor: pointer;
  box-shadow: 2px 2px 0 #772e00; transition: box-shadow .1s ease, transform .1s ease;
}
.dash-btn-primary:hover { box-shadow: none; transform: translate(2px, 2px); }

.dash-btn-secondary {
  display: block; width: 100%; padding: 8px 16px; border-radius: 2px;
  background: transparent; border: 1px solid #e8ddd4; color: #00594F !important;
  font-family: 'Byrd', Georgia, serif; font-weight: 600; font-size: var(--fs-small);
  text-decoration: none !important; text-align: center; cursor: pointer;
  transition: background .15s;
}
.dash-btn-secondary:hover { background: var(--hda-warm); }

/* ── App shell ── */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.scroll-area { flex: 1; overflow-y: auto; }
.hda-page { max-width: var(--content-max); margin: 0 auto; padding: 2rem 1.5rem; }

/* ── Flash ── */
.flash { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: var(--fs-small); font-weight: 500; }
.flash-notice { background: #d6eeeb; color: var(--hda-green); }
.flash-alert  { background: #fde8dc; color: var(--hda-orange); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .navbar-links { display: none; }
  .hda-page { padding: 1rem 1rem 5rem; }
}
@media (min-width: 769px) {
  .lg-show { display: inline !important; }
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ══════════════════════════════════════════════════
   Design tokens — source de vérité HDA
   Référence : docs/design_handoff/source/colors_and_type.css
   ══════════════════════════════════════════════════ */
:root {
  /* ── Couleurs primaires ── */
  --hda-green:        #00594F;   /* Pantone 3292 C */
  --hda-orange:       #B94700;   /* Pantone 1525 C */
  --hda-warm:         #F2E7DD;   /* beige chaud — fond section */
  --hda-cream:        #fffbf7;   /* fond page / body */

  /* ── Palette secondaire ── */
  --hda-green-dark:   #01423b;
  --hda-green-soft:   #4ba59b;
  --hda-orange-dark:  #772e00;
  --hda-orange-soft:  #e97025;

  /* ── UI neutrals ── */
  --hda-border:       #e8ddd4;   /* bordures — NE PAS confondre avec --hda-warm */
  --hda-input:        #c5b8ae;   /* bordures inputs */
  --hda-muted:        #5a7470;   /* corps de texte secondaire */
  --hda-muted-2:      #8a9e9a;   /* labels, timestamps */
  --hda-placeholder:  #a09080;

  /* ── Surfaces sémantiques — badges et statuts ──
     Règle : palette vert/orange/cream uniquement, pas de rouge/violet/gris froid */
  --surf-artisan-bg:    var(--hda-green);       --surf-artisan-fg:    var(--hda-cream);
  --surf-entreprise-bg: var(--hda-orange);      --surf-entreprise-fg: var(--hda-cream);
  --surf-etudiant-bg:   var(--hda-warm);        --surf-etudiant-fg:   var(--hda-green);
  --surf-benevole-bg:   #d6eeeb;                --surf-benevole-fg:   var(--hda-green);
  --surf-admin-bg:      var(--hda-orange-dark); --surf-admin-fg:      var(--hda-cream);

  --surf-notice-bg:     #d6eeeb;                --surf-notice-fg:     var(--hda-green);
  --surf-alert-bg:      #fde8dc;                --surf-alert-fg:      var(--hda-orange);
  --surf-rejected-bg:   var(--hda-orange-dark); --surf-rejected-fg:   var(--hda-cream);

  /* ── Typographie ── */
  --font-heading: 'Byrd', Georgia, serif;
  --font-body:    'Roboto', ui-sans-serif, system-ui, sans-serif;

  /* Échelle — H1–H6 (Byrd Bold) + corps (Roboto Medium) */
  --fs-h1: 3.5rem;    --lh-h1: 1.1;
  --fs-h2: 2.5rem;    --lh-h2: 1.15;
  --fs-h3: 1.75rem;   --lh-h3: 1.25;
  --fs-h4: 1.375rem;  --lh-h4: 1.3;
  --fs-h5: 1.125rem;  --lh-h5: 1.4;
  --fs-h6: 0.9375rem; --lh-h6: 1.45;
  --fs-body:  1rem;   --lh-body: 1.7;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ── Espacements (rythme Tailwind) ── */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;

  /* ── Rayons — deux valeurs uniquement ──
     2px pour TOUTES les surfaces (cards, boutons, inputs, badges)
     full (9999px) réservé aux avatars */
  --radius:      2px;
  --radius-sm:   2px;
  --radius-full: 9999px;

  /* ── Ombres teintées vert (jamais neutres) ── */
  --shadow-sm: 0 1px 3px rgba(0,89,79,0.06);
  --shadow:    0 2px 6px rgba(0,89,79,0.08);
  --shadow-md: 0 2px 8px rgba(0,89,79,0.10);
  --shadow-lg: 0 4px 12px rgba(0,89,79,0.10);

  /* ── Layout ── */
  --content-max: 1200px;

  /* ── Focus ring ── */
  --ring-orange: 0 0 0 2px rgba(185,71,0,0.15);
}

/* ══════════════════════════════════════════════════
   BASE — Typographie & globals
   ══════════════════════════════════════════════════ */
@layer base {
  html { font-size: 16px; }

  body {
    font-family: var(--font-body);
    font-weight: 500;             /* Roboto Medium per charte */
    background-color: var(--hda-cream);
    color: var(--hda-green);      /* jamais noir pur */
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
  }

  /* H1 + H2 orange, H3–H6 vert — règle stricte de la charte */
  h1 {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--fs-h1); line-height: var(--lh-h1);
    color: var(--hda-orange); margin: 0;
  }
  h2 {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--fs-h2); line-height: var(--lh-h2);
    color: var(--hda-orange); margin: 0;
  }
  h3 {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--fs-h3); line-height: var(--lh-h3);
    color: var(--hda-green); margin: 0;
  }
  h4 {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--fs-h4); line-height: var(--lh-h4);
    color: var(--hda-green); margin: 0;
  }
  h5 {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--fs-h5); line-height: var(--lh-h5);
    color: var(--hda-green); margin: 0;
  }
  h6 {
    font-family: var(--font-heading); font-weight: 700;
    font-size: var(--fs-h6); line-height: var(--lh-h6);
    color: var(--hda-green); text-transform: uppercase;
    letter-spacing: 0.06em; margin: 0;
  }

  p     { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--hda-green); margin: 0; }
  small { font-size: var(--fs-small); }

  /* Liens en orange par défaut */
  a { color: var(--hda-orange); text-decoration: none; transition: opacity .2s; }
  a:hover { text-decoration: underline; }

  /* Sélection */
  ::selection { background: var(--hda-orange); color: var(--hda-cream); }

  /* Héritage couleur — texte principal toujours vert, jamais noir */
  p, li, td, dd, dt, span, label { color: inherit; }

  /* Focus orange sur tous les inputs */
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=file]):not([type=button]),
  select,
  textarea {
    accent-color: var(--hda-orange);
  }

  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=file]):not([type=button]):focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: var(--hda-orange) !important;
    box-shadow: var(--ring-orange) !important;
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: none !important;
  }

  /* Checkboxes & radios en vert */
  input[type=checkbox]:checked,
  input[type=radio]:checked {
    background-color: var(--hda-green);
    border-color: var(--hda-green);
  }
}

/* ══════════════════════════════════════════════════
   COMPOSANTS — Système de design HDA
   ══════════════════════════════════════════════════ */
@layer components {

  /* ── Boutons ── */
  .button-green {
    background-color: var(--hda-green);
    font-family: var(--font-heading);
    color: var(--hda-cream);
    text-align: center;
    letter-spacing: .03em;
    padding: .7rem 1.5rem;
    font-weight: 400;
    border-radius: var(--radius);
    transition: background-color .2s, opacity .2s;
    display: inline-block;
    line-height: 1.5;
    white-space: nowrap;
  }
  .button-green:hover { background-color: var(--hda-green-dark); text-decoration: none; }

  .button-orange {
    background-color: var(--hda-orange);
    font-family: var(--font-heading);
    color: var(--hda-cream);
    text-align: center;
    letter-spacing: .03em;
    padding: .7rem 1.5rem;
    font-weight: 400;
    border-radius: var(--radius);
    transition: background-color .2s, opacity .2s;
    display: inline-block;
    line-height: 1.5;
    white-space: nowrap;
  }
  .button-orange:hover { background-color: var(--hda-orange-dark); text-decoration: none; }

  .button-white {
    background-color: var(--hda-cream);
    font-family: var(--font-heading);
    color: var(--hda-green);
    text-align: center;
    letter-spacing: .03em;
    padding: .7rem 1.5rem;
    font-weight: 400;
    border-radius: var(--radius);
    transition: background-color .2s;
    display: inline-block;
    line-height: 1.5;
    white-space: nowrap;
  }
  .button-white:hover { background-color: #f0e8de; text-decoration: none; }

  /* Bouton primaire avec ombre offset (usage CTA fort) */
  .btn-hda {
    background-color: var(--hda-orange);
    color: var(--hda-cream);
    font-size: var(--fs-small);
    font-weight: 500;
    padding: .5rem 1.25rem;
    border-radius: var(--radius);
    display: inline-block;
    box-shadow: 2px 2px 0px 0px var(--hda-orange-dark);
    transition: box-shadow .1s ease, transform .1s ease;
    white-space: nowrap;
  }
  .btn-hda:hover { box-shadow: none; transform: translate(2px, 2px); text-decoration: none; }

  /* ── Cards ── */
  .card {
    background-color: var(--hda-cream);
    border: 1px solid var(--hda-border);
    border-radius: var(--radius);
    padding: 1rem;
  }
  @media (min-width: 768px) { .card { padding: 1.5rem; } }

  /* ── Card cliquable (annuaire) ── */
  .member-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
    cursor: pointer;
  }

  .member-card-link .card,
  .member-card-link > div {
    transition: all 0.15s ease;
  }

  .member-card-link:hover .card,
  .member-card-link:hover > div {
    border-color: #00594F;
    box-shadow: 2px 2px 0px 0px #00594F;
    transform: translate(-1px, -1px);
    transition: all 0.15s ease;
  }

  /* ── Champs de formulaire ── */
  .field-input {
    width: 100%;
    border: 1px solid var(--hda-input);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    background-color: var(--hda-cream);
    color: var(--hda-green);
    font-size: var(--fs-small);
    font-family: var(--font-body);
    transition: border-color .15s;
  }
  .field-input:focus {
    outline: none;
    border-color: var(--hda-orange);
    box-shadow: var(--ring-orange);
  }
  .field-input::placeholder { color: var(--hda-placeholder); }

  /* ── Badges ──
     Base commune + variantes par rôle et statut.
     Toutes les couleurs via tokens --surf-* (jamais de valeurs hardcodées). */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius);
    font-size: var(--fs-micro);
    font-weight: 500;
    white-space: nowrap;
  }

  /* Rôles */
  .badge-artisan    { background-color: var(--surf-artisan-bg);    color: var(--surf-artisan-fg);    }
  .badge-entreprise { background-color: var(--surf-entreprise-bg); color: var(--surf-entreprise-fg); }
  .badge-etudiant   { background-color: var(--surf-etudiant-bg);   color: var(--surf-etudiant-fg);   }
  .badge-benevole   { background-color: var(--surf-benevole-bg);   color: var(--surf-benevole-fg);   }
  .badge-admin      { background-color: var(--surf-admin-bg);      color: var(--surf-admin-fg);      }

  /* Statuts */
  .badge-pending    { background-color: var(--hda-warm);           color: var(--hda-orange);         }
  .badge-approved   { background-color: var(--surf-notice-bg);     color: var(--surf-notice-fg);     }
  .badge-rejected   { background-color: var(--surf-rejected-bg);   color: var(--surf-rejected-fg);   }

  /* ── Flash messages ── */
  .flash-notice {
    background-color: var(--surf-notice-bg);
    border-left: 3px solid var(--hda-green);
    color: var(--surf-notice-fg);
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
  }
  .flash-alert {
    background-color: var(--surf-alert-bg);
    border-left: 3px solid var(--hda-orange);
    color: var(--surf-alert-fg);
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
  }

  /* ── Sections ── */
  .section-cream { background-color: var(--hda-cream); }
  .section-warm  { background-color: var(--hda-warm);  }
  .section-green { background-color: var(--hda-green); color: var(--hda-cream); }

  .section-subtitle {
    color: var(--hda-green);
    text-align: center;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  /* ── Navbar membre — liens de navigation ──
     7 liens dans la barre haute desktop.
     L'état actif est détecté côté ERB et rendu via la classe .is-active. */
  .nav-link {
    position: relative;
    font-family: var(--font-heading);
    font-size: var(--fs-small);
    color: var(--hda-green);
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
    transition: color .15s;
    text-decoration: none;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: -2px;
    height: 2px;
    background-color: var(--hda-orange);
    transform: scaleX(0);
    transition: transform .15s ease;
  }
  .nav-link:hover { color: var(--hda-orange); text-decoration: none; }
  .nav-link.is-active { color: var(--hda-orange); }
  .nav-link.is-active::after { transform: scaleX(1); }

  /* ── Tableaux admin ── */
  .table-header-cell {
    padding: 0.75rem 1.25rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--hda-green);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background-color: var(--hda-warm);
  }
  .table-cell {
    padding: 0.875rem 1.25rem;
    font-size: var(--fs-small);
    color: var(--hda-green);
    border-bottom: 1px solid var(--hda-border);
  }

  /* ── Chips — filtres rôle annuaire ── */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--hda-border);
    border-radius: var(--radius);
    background: var(--hda-cream);
    color: var(--hda-green);
    font-family: var(--font-heading);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
    user-select: none;
  }
  .chip:hover { background: var(--hda-warm); }
  .chip:has(input:checked) {
    background: var(--hda-green);
    color: var(--hda-cream);
    border-color: var(--hda-green);
  }
  .chip:has(input:checked):hover { background: var(--hda-green-dark); border-color: var(--hda-green-dark); }
}

#bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #fffbf7;
  border-top: 1px solid #e8ddd4;
  z-index: 9999;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 0 1rem;
}

@media (max-width: 768px) {
  #bottom-nav { display: flex; }
}
@import 'actiontext.css';
/* ══════════════════════════════════════════════════
   Tableau de bord (dashboard/index)
   Variables et classes spécifiques au dashboard
   ══════════════════════════════════════════════════ */

:root {
  --radius:    4px;
  --hda-muted:   #8a9e9a;
  --hda-muted-2: #5a7470;
  --shadow:    0 2px 8px rgba(0,89,79,0.10);
  --shadow-sm: 0 1px 3px rgba(0,89,79,0.08);
}

/* ── Layout ── */
.dashboard { padding-bottom: 3rem; }

/* ── Header ── */
.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--hda-border);
  margin-bottom: 1.5rem;
}
.dash-header-text { flex: 1; min-width: 0; padding-top: 1.25rem; }
.dash-greeting {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  color: var(--hda-orange);
  margin: 0.25rem 0 0.375rem;
  line-height: 1.1;
}
.dash-sub {
  color: var(--hda-muted);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
}

/* Bénévole role badge in header */
.admin-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
}
.benevole-badge {
  background: var(--hda-warm);
  color: var(--hda-green);
  border: 1px solid var(--hda-border);
}

/* ── Section "À faire" (profil incomplet) ── */
.dash-todo {
  background: var(--hda-warm);
  border: 1px solid var(--hda-border);
  border-left: 3px solid var(--hda-orange);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
}
.dash-todo-left { max-width: 720px; }
.dash-todo-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--hda-green);
  margin: 0.25rem 0 0;
  line-height: 1.3;
}
.progress {
  height: 6px;
  background: var(--hda-border);
  border-radius: 999px;
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.progress.thin { height: 4px; }
.dash-todo-cta { align-self: flex-start; margin-top: 0.25rem; }
.dash-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1rem;
  width: 100%;
  max-width: 720px;
}
.dash-todo-list li {
  display: flex;
  font-size: 0.95rem;
  font-weight: 500;
}
.dash-todo-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius);
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--hda-green);
  text-decoration: none;
  text-align: left;
  transition: background 120ms ease;
}
.dash-todo-row:hover:not([disabled]) { background: rgba(185,71,0,0.07); }
.todo-check {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1.5px solid var(--hda-input);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.6rem;
  color: var(--hda-cream);
  background: var(--hda-cream);
}
.is-done .todo-check { background: var(--hda-green); border-color: var(--hda-green); }
.dash-todo-label { flex: 1; }
.dash-todo-list li.is-done .dash-todo-label {
  text-decoration: line-through;
  text-decoration-color: var(--hda-muted-2);
  color: var(--hda-muted);
}
.dash-todo-time { margin-left: auto; flex-shrink: 0; }
.dash-todo-arrow {
  color: var(--hda-orange);
  font-weight: 700;
  margin-left: 0.5rem;
  transition: transform 120ms ease;
}
.dash-todo-row:hover .dash-todo-arrow { transform: translateX(2px); }
@media (max-width: 700px) {
  .dash-todo-list { grid-template-columns: 1fr; }
}

/* ── Grille dashboard ── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
  align-items: start;
}
.dash-col-main { min-width: 0; }
.dash-col-side { display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-col-side { order: -1; }
}

/* ── En-tête de section ── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.section-head .section-title { margin: 0; border: 0; padding: 0; font-size: 1rem; }

/* ── Lien "Voir tout →" ── */
.link-arrow {
  font-size: 0.8125rem;
  color: var(--hda-orange);
  text-decoration: none;
  font-weight: 600;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  padding: 0;
}
.link-arrow:hover { text-decoration: underline; }

/* ── Collab feed ── */
.collab-feed { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.collab-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--hda-cream);
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.collab-item:hover {
  border-color: var(--hda-green);
  box-shadow: var(--shadow);
}
.collab-item:hover .collab-cta-arrow {
  color: var(--hda-orange);
  transform: translateX(2px);
}
.collab-body { min-width: 0; }
.collab-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
  flex-wrap: wrap;
}
.collab-urgent {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hda-orange);
  letter-spacing: 0.01em;
}
.collab-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--hda-green);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.collab-sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--hda-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.collab-sub .dot-sep { color: var(--hda-muted-2); opacity: 0.8; }
.collab-cta-arrow {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--hda-muted-2);
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}

/* ── Resume cards ("Reprendre où vous en étiez") ── */
.resume-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  background: var(--hda-cream);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.resume-card:hover { border-color: var(--hda-green); box-shadow: var(--shadow); }
.hoverable { transition: border-color 0.2s, box-shadow 0.2s; }
.hoverable:hover { border-color: var(--hda-green); box-shadow: var(--shadow); }
.resume-cover {
  height: 100%;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hda-cream);
  font-size: 2rem;
  font-family: var(--font-heading);
}
.resume-body { padding: 1rem 1.25rem; }
.resume-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--hda-green);
  margin: 0.25rem 0 0.625rem;
  line-height: 1.3;
}
.resume-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.resume-progress .progress { flex: 1; }

/* Cover colors */
.cover-terracotta { background: var(--hda-orange); color: var(--hda-cream); }
.cover-green      { background: var(--hda-green);  color: var(--hda-cream); }
.cover-warm       { background: var(--hda-warm);   color: var(--hda-green); }
.cover-deep       { background: var(--hda-green);  color: var(--hda-cream); }

/* ── Role panel ── */
.role-panel {
  background: var(--hda-green);
  color: var(--hda-cream);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.role-panel.role-artisan   { background: var(--hda-orange); }
.role-panel.role-entreprise { background: var(--hda-orange); }
.role-panel.role-etudiant  { background: var(--hda-warm); color: var(--hda-green); }
.role-panel.role-benevole  { background: var(--hda-green); }
.role-panel.role-admin,
.role-panel.role-super_admin { background: var(--hda-green); }
.role-panel-head { margin-bottom: 1rem; }
.role-panel-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: inherit;
  margin: 0.25rem 0 0;
  line-height: 1.25;
}
.role-panel.role-artisan   .role-panel-title,
.role-panel.role-entreprise .role-panel-title { color: var(--hda-cream); }
.role-panel.role-etudiant  .role-panel-title  { color: var(--hda-green); }
.role-panel-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.role-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255,251,247,0.08);
  border: 1px solid rgba(255,251,247,0.2);
  color: var(--hda-cream);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background 0.15s;
  width: 100%;
}
.role-action:hover { background: rgba(255,251,247,0.16); color: var(--hda-cream); }
.role-action.primary {
  background: var(--hda-cream);
  color: var(--hda-green);
  border-color: var(--hda-cream);
  font-weight: 600;
}
.role-action.primary:hover { background: #fff; color: var(--hda-green); }
.role-panel.role-etudiant .role-action {
  color: var(--hda-green);
  background: rgba(0,89,79,0.08);
  border-color: rgba(0,89,79,0.15);
}
.role-panel.role-etudiant .role-action.primary {
  background: var(--hda-green);
  color: var(--hda-cream);
  border-color: var(--hda-green);
}

/* ── Card "Rencontrez le réseau" (artisan sidebar) ── */
.network-card {
  background: var(--hda-cream);
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.network-card .role-action {
  background: var(--hda-cream);
  color: var(--hda-green);
  border: 1px solid var(--hda-border);
}
.network-card .role-action:hover { background: var(--hda-warm); }

/* ── Stats compactes ── */
.stats-compact {
  background: var(--hda-cream);
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  padding: 0.5rem 1.25rem;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hda-border);
}
.stat-row:last-child { border-bottom: 0; }
.stat-label { font-size: 0.8125rem; color: var(--hda-muted); font-family: var(--font-body); font-weight: 500; }
.stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--hda-green);
  line-height: 1;
}

/* ── Card Mes Opportunités (entreprise/étudiant) ── */
.card-carnet {
  background: var(--hda-green);
  color: var(--hda-cream);
  border: none;
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.25rem;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  display: block;
}
.card-carnet:hover { background: #004840; }
.card-carnet .eyebrow { color: rgba(255,251,247,0.65); }
.carnet-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--hda-cream);
  margin: 0.25rem 0 0;
  line-height: 1.2;
}
.carnet-body-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255,251,247,0.9);
  margin: 0.75rem 0;
}
.carnet-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,251,247,0.15);
  flex-wrap: wrap;
}
.card-carnet .link-arrow { color: rgba(255,251,247,0.75); }
.card-carnet .link-arrow:hover { color: var(--hda-cream); }

/* ── Bénévoles — liste membres récents ── */
.ben-members-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ben-member-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
}
.admin-mini-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: #fff;
  font-weight: 600;
}

/* ── Espace admin bénévole (sidebar) ── */
.admin-read-card {
  background: #f5f0eb;
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

/* ── Btn ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-heading);
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.15s;
  white-space: nowrap;
}
.btn-orange {
  background-color: var(--hda-orange);
  color: #fff;
  box-shadow: 2px 2px 0 0 rgba(185,71,0,0.35);
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.btn-orange:hover {
  background-color: #9c3a00;
  box-shadow: none;
  transform: translate(2px, 2px);
  color: #fff;
}
.btn-ghost {
  background: transparent;
  color: var(--hda-green);
  border: 1px solid var(--hda-border);
}
.btn-ghost:hover { background: var(--hda-warm); }
.btn.sm { padding: 0.375rem 0.875rem; font-size: 0.8rem; }

/* ── Helpers ── */
.small  { font-size: 0.8125rem; }
.micro  { font-size: 0.75rem; }
.muted  { color: var(--hda-muted); }
.muted-2 { color: var(--hda-muted-2); }
.eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-body);
}
.dot-sep { opacity: 0.6; }
/* ══════════════════════════════════════════════════
   @font-face — polices locales HDA
   Fichiers dans app/assets/fonts/
   ══════════════════════════════════════════════════ */

/* ── Byrd (titres H1–H6, labels nav) ── */

@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-Light-3632aef506c08fdd2d3251b623f321a930e4c00dd291cbe48c594c9d5458bc50.otf) format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-LightItalic-319d868df89bcf4707cc16eadb25232c1ac0c8df712890cef235dcde00fd0ec6.otf) format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-Regular-5166cffcb3c5f946e37939d84c8136996f6e61b5427ca3c51ab9687cad23d72a.otf) format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-RegularItalic-ceaeef3411d741a42f2c7aae84fbcc5cfd3f379a9e18374bb2fd43583df49451.otf) format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-Medium-255329de631c642b6293067da03e697a0ef943043244549582a7e542df736b51.otf) format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-MediumItalic-91f275c987213942dddbb1d82a943390153b16cdc5246ececb33c14da2407ed7.otf) format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-SemiBold-b12b577f37de05c2f0eda5953dade3ffd3365e5ecad3d82b4680977329528af1.otf) format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-SemiBoldItalic-efbb05ed0f172e101630c15d204bf712c4ae17625a4a645a38d12837c5e69490.otf) format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-Bold-66661d7a689305e885e5a37769c93908f5dff9381233ca8f8fed5643d56ce08c.otf) format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-BoldItalic-07f6e7c97535f9ebb6f2f49cfd97cd852290ddcb0cedd5b9f81ae738fc701116.otf) format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-ExtraBold-6152caa816943af51ffc6519491aac2e6b0e94bac8cb8b584f9d0e5d0f2e3852.otf) format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-ExtraBoldItalic-e0749c60a2a8c102fdb91856a3890053b2f51dfd1f6e9f8058c4f1a38ebbc7d2.otf) format('opentype');
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-Black-026e8825c7e05123563d8d1a6cbc6e5925daa0fef7a1dec72076bfb79c8332ad.otf) format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Byrd';
  src: url(/assets/Byrd-BlackItalic-f65669c0eb401ca250fefbe00f9b94affb465270d859d191fe2f2c5c0aa2b052.otf) format('opentype');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* ── Roboto (corps de texte) ── */

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Thin-bf9760a4821688d544ec7dafba7b060ab1fa758360403537579bf06792d290f8.ttf) format('truetype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-ThinItalic-cacbe64bdc639840f358528f0a77f801f46d6a47cb94764e1b707de484f4f27c.ttf) format('truetype');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Light-2835b358aaaa329f9a4bb47936c96687202ca24774a2e1c78251a596f2b01fa5.ttf) format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-LightItalic-3ec128e72a367079b72775ed6bf1eb0ebbea8d1b7add6db8c5b9a309ff6f2f44.ttf) format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Regular-319cff6e7a31f0f2a41c475dca42890aa5d19fe16017e2290f8c1d4e14f76481.ttf) format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Italic-8aaf23ac2ee9b3ef1b61c2390b3e6e02c0aa6a409d591c7fd7f3d4d7cf51e00b.ttf) format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Medium-4ac8e03606ffa4c37f61a6510a2080f1f37a7054f4726c214887d3b23f72e369.ttf) format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-MediumItalic-8524736bab9339c1a2570e61037794bdf4c6aa384fbf75b98cd50d5959d0b0b3.ttf) format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Bold-baf44ce81636cc927fc27768437e5da853bac699e8aaf832d042f0dfed29b4b4.ttf) format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-BoldItalic-467a9ef7b54c91eb8be98b2ef13f385729302d2295fab5101f800f1c8453b170.ttf) format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Black-2e33768362fd357e781d01670db1d226dfb484c6f2b769f3b798469ee1f82ad6.ttf) format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-BlackItalic-c2d13e2dc7c402812c69cf3afa3f3d90660a2c105a2890ee5fc0507cafcdaae4.ttf) format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}
/* ══════════════════════════════════════════════════
   HDA Screens — Profil édition, Collaborations,
   Articles, Carnets, Première connexion
   ══════════════════════════════════════════════════ */

/* ── Première connexion ─────────────────────────── */
.onboard-shell {
  display: grid;
  grid-template-columns: minmax(320px, 38%) 1fr;
  min-height: 100vh;
  background: var(--hda-cream);
}
@media (max-width: 800px) {
  .onboard-shell { grid-template-columns: 1fr; }
}
.onboard-side {
  background: var(--hda-green);
  color: var(--hda-cream);
  padding: 2.5rem 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.onboard-logo {
  height: 38px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  align-self: flex-start;
}
.onboard-mark {
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 360px;
  filter: brightness(0) invert(1);
  opacity: 0.07;
  pointer-events: none;
}
.onboard-side-foot {
  margin-top: auto;
  position: relative;
  z-index: 1;
  padding-top: 3rem;
}
.onboard-quote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--hda-cream);
  margin: 0;
}
.onboard-main {
  padding: 2.5rem 3rem 3rem;
  display: flex;
  flex-direction: column;
  max-width: 720px;
}
@media (max-width: 800px) {
  .onboard-side { padding: 1.5rem 1.5rem 2rem; }
  .onboard-main { padding: 1.5rem; }
}
.onboard-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.onboard-stepper .step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--hda-muted-2);
}
.onboard-stepper .step.is-current { color: var(--hda-green); }
.onboard-stepper .step.is-done { color: var(--hda-green-soft); }
.onboard-stepper .step-num {
  width: 22px; height: 22px;
  border-radius: 9999px;
  background: var(--hda-warm);
  color: var(--hda-muted);
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.onboard-stepper .step.is-current .step-num { background: var(--hda-green); color: var(--hda-cream); }
.onboard-stepper .step.is-done .step-num { background: var(--hda-green-soft); color: var(--hda-cream); }
.onboard-stepper .step-bar {
  flex: 0 1 40px;
  height: 2px;
  background: var(--hda-border);
  border-radius: 9999px;
}
.onboard-stepper .step-bar.is-done { background: var(--hda-green-soft); }

.onboard-h1 { font-size: 2.25rem; line-height: 1.15; margin-top: 0.25rem; }
.onboard-lead { max-width: 540px; margin-top: 0.75rem; }
.onboard-form { margin-top: 2rem; max-width: 520px; }

.onboard-foot {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hda-border);
}

/* ── Profil édition complète ────────────────────── */
.profile-edit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.profile-edit-status { text-align: right; }

.profile-edit-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  max-width: var(--content-max);
  margin: 1.5rem auto 0;
  padding: 0 1.5rem 3rem;
}
@media (max-width: 800px) {
  .profile-edit-grid { grid-template-columns: 1fr; }
}

.profile-edit-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  position: sticky;
  top: 80px;
  align-self: flex-start;
}
@media (max-width: 800px) {
  .profile-edit-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hda-border);
  }
}
.pe-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hda-muted);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  width: 100%;
}
.pe-nav-item:hover { color: var(--hda-green); background: var(--hda-warm); }
.pe-nav-item.is-active {
  background: var(--hda-green);
  color: var(--hda-cream);
  border-color: var(--hda-green);
}
.pe-nav-foot {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hda-border);
}
@media (max-width: 800px) { .pe-nav-foot { display: none; } }

.profile-edit-main { min-width: 0; }

.profile-edit-foot {
  display: flex;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hda-border);
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.saved-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--hda-green-soft);
}
@media (max-width: 600px) { .saved-indicator { display: none; } }

.avatar-edit-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--hda-border);
}

/* ── Form groups ────────────────────────────────── */
.field-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 600px) {
  .field-row { grid-template-columns: 1fr; }
}
.field-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--hda-green);
}
.field-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--hda-green);
  flex-shrink: 0;
}
.field-help {
  display: block;
  font-size: 0.75rem;
  color: var(--hda-muted-2);
  margin-top: 0.25rem;
}

/* ── Preferences / toggle switch ────────────────── */
.prefs-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hda-border);
}
.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--hda-border);
  font-size: 0.9375rem;
  color: var(--hda-green);
  cursor: pointer;
  gap: 1rem;
}
.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 36px; height: 20px;
  background: var(--hda-input);
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
  border: 0;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--hda-cream);
  border-radius: 9999px;
  transition: transform .2s;
}
.switch:checked { background: var(--hda-green); }
.switch:checked::after { transform: translateX(16px); }

/* Mobile responsive for profile edit */
@media (max-width: 600px) {
  .profile-edit-foot { flex-direction: column; align-items: stretch; }
  .profile-edit-foot .btn { width: 100%; }
}
@media (max-width: 800px) {
  .profile-edit-nav .pe-nav-item { flex-shrink: 0; width: auto; }
  .profile-edit-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .profile-edit-status { text-align: left; }
}

/* ── Collaborations (vue d'ensemble) ─────────────── */
.collabs-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.collabs-stats {
  margin-top: 1.5rem;
  display: flex;
  gap: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hda-border);
  flex-wrap: wrap;
}
.collabs-stats > div { display: flex; flex-direction: column; }
.collabs-stats .c-stat-l {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.tabs-row {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--hda-border);
  margin-bottom: 1.5rem;
  overflow-x: auto;
}
.tab {
  padding: 0.875rem 1.25rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--hda-muted);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.tab:hover { color: var(--hda-green); }
.tab.is-active { color: var(--hda-orange); border-bottom-color: var(--hda-orange); }
.tab-count {
  background: var(--hda-warm);
  color: var(--hda-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  min-width: 22px;
  text-align: center;
}
.tab.is-active .tab-count { background: var(--hda-orange); color: var(--hda-cream); }

/* Candidatures status */
.app-state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.state-shortlist { background: rgba(0,89,79,0.08); color: var(--hda-green); }
.state-review    { background: var(--hda-warm); color: var(--hda-muted); }
.state-rejected  { background: var(--surf-rejected-bg); color: var(--surf-rejected-fg); opacity: 0.85; }
.state-accepted  { background: var(--hda-green); color: var(--hda-cream); }

/* ── Articles — proposer ─────────────────────────── */
.page-hero-warm {
  background: linear-gradient(180deg, var(--hda-warm) 0%, var(--hda-cream) 100%);
}

.articles-mine {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hda-border);
}
.article-mine-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hda-border);
}
@media (max-width: 600px) {
  .article-mine-row { grid-template-columns: 1fr; gap: 0.5rem; }
}
.article-state {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.6rem;
  border-radius: 9999px;
  font-family: var(--font-body);
  width: max-content;
}
.state-published { background: var(--hda-green); color: var(--hda-cream); }
.state-review    { background: #fde8dc; color: var(--hda-orange); }
.state-a-relire  { background: #e8f4f0; color: var(--hda-green); }
.state-draft     { background: var(--hda-warm); color: var(--hda-muted); }

/* ── Carnets — liste ─────────────────────────────── */
.carnets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.carnet-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.carnet-card-cover {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.carnet-card-body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.carnet-card-title {
  font-size: 1.375rem;
  margin: 0.25rem 0 0.25rem;
  line-height: 1.2;
}
.carnet-card-summary {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--hda-muted);
  margin: 0 0 1rem;
  flex: 1;
}
.carnet-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--hda-muted-2);
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hda-border);
}
/* Component styles — HDA design system */

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

/* ── App shell ──────────────────────────────────── */
.app {
  min-height: 100vh;
  background: var(--hda-cream);
  display: flex;
  flex-direction: column;
}

/* ── Top navbar (desktop) ───────────────────────── */
.navbar {
  background: var(--hda-cream);
  border-bottom: 1px solid var(--hda-border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.navbar-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.nav-brand img { height: 44px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}
.nav-link {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--hda-green);
  font-size: 0.9375rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius);
  transition: color .2s, background-color .2s;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
}
.nav-link:hover { color: var(--hda-orange); text-decoration: none; }
.nav-link.is-active { color: var(--hda-orange); }
.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: -0.5rem;
  height: 2px;
  background: var(--hda-orange);
}
.nav-link .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--hda-orange);
  border-radius: 9999px;
  margin-left: 0.375rem;
  vertical-align: super;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.nav-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--hda-green);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  transition: background .15s;
}
.nav-user:hover { background: var(--hda-warm); }
.avatar {
  width: 32px; height: 32px;
  border-radius: 9999px;
  background: var(--hda-green);
  color: var(--hda-cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  flex-shrink: 0;
  border: 2px solid var(--hda-green);
}
.avatar.sm { width: 24px; height: 24px; font-size: 0.625rem; }
.avatar.lg { width: 48px; height: 48px; font-size: 1rem; }
.avatar.xl { width: 72px; height: 72px; font-size: 1.5rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; }

/* ── Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
  text-decoration: none;
  line-height: 1.2;
}
.btn.sm { padding: 0.45rem 1rem; font-size: 0.8125rem; }
.btn-green { background: var(--hda-green); color: var(--hda-cream); }
.btn-green:hover { background: #004840; color: var(--hda-cream); text-decoration: none; }
.btn-orange { background: var(--hda-orange); color: var(--hda-cream); }
.btn-orange:hover { background: #9c3a00; color: var(--hda-cream); text-decoration: none; }
.btn-white { background: var(--hda-cream); color: var(--hda-green); }
.btn-white:hover { background: #fff; color: var(--hda-green); text-decoration: none; }
.btn-outline { background: transparent; color: var(--hda-green); border: 2px solid var(--hda-green); padding: calc(0.7rem - 2px) calc(1.5rem - 2px); }
.btn-outline:hover { background: var(--hda-green); color: var(--hda-cream); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--hda-green); padding: 0.45rem 0.75rem; }
.btn-ghost:hover { background: var(--hda-warm); text-decoration: none; }

/* ── Cards ──────────────────────────────────────── */
.card {
  background: var(--hda-cream);
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: border-color .2s, box-shadow .2s;
}
.card.hoverable:hover { border-color: var(--hda-green); box-shadow: var(--shadow); }
.card.warm { background: var(--hda-warm); }
.card.green { background: var(--hda-green); color: var(--hda-cream); border-color: var(--hda-green); }
.card.green * { color: var(--hda-cream); }

/* ── Badges ─────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  line-height: 1.4;
  white-space: nowrap;
}
.badge-artisan    { background: #d6eeeb; color: var(--hda-green); }
.badge-entreprise { background: var(--hda-warm); color: var(--hda-orange); }
.badge-etudiant   { background: #efe6dc; color: var(--hda-muted); }
.badge-benevole   { background: #e7ddd3; color: var(--hda-green); }
.badge-admin      { background: #fde8dc; color: var(--hda-orange-dark); }
.badge-notice     { background: #d6eeeb; color: var(--hda-green); }
.badge-alert      { background: #fde8dc; color: var(--hda-orange); }
.badge-outline    { background: transparent; border: 1px solid var(--hda-border); color: var(--hda-muted); }

/* ── Eyebrow / section labels ───────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6875rem;
  color: var(--hda-muted-2);
}

/* ── Form inputs ────────────────────────────────── */
.field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hda-green);
  margin-bottom: 0.25rem;
  font-family: var(--font-body);
}
.field-input, .field-select {
  width: 100%;
  background: var(--hda-cream);
  border: 1px solid var(--hda-input);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--hda-green);
  transition: border-color .15s, box-shadow .15s;
}
.field-input::placeholder { color: var(--hda-placeholder); }
.field-input:focus, .field-select:focus {
  outline: none;
  border-color: var(--hda-orange);
  box-shadow: var(--ring-orange);
}
.field-input.with-icon { padding-left: 2.25rem; }
.input-wrap { position: relative; }
.input-wrap .input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hda-muted-2);
  pointer-events: none;
}

/* Chip / filter pill */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--hda-border);
  border-radius: 9999px;
  background: var(--hda-cream);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hda-green);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--hda-green); }
.chip.is-active { background: var(--hda-green); color: var(--hda-cream); border-color: var(--hda-green); }
.chip.sm { padding: 0.25rem 0.625rem; font-size: 0.75rem; }
.chip-count {
  font-size: 0.6875rem; font-weight: 400; opacity: 0.7;
  background: rgba(0,0,0,0.08); border-radius: 9999px;
  padding: 0.1rem 0.4rem; line-height: 1.4;
}
.chip.is-active .chip-count { background: rgba(255,255,255,0.2); opacity: 1; }
.chips-row {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}

/* ── Page frame ─────────────────────────────────── */
.page { flex: 1; }
.page-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.75rem 1.5rem 6rem;
}

/* ── Hero / section headers ─────────────────────── */
.page-hero {
  background: var(--hda-warm);
  border-bottom: 1px solid var(--hda-border);
  padding: 2rem 0 1.75rem;
  position: relative;
  overflow: hidden;
}
.page-hero-tight { padding: 1.5rem 0; }
.page-hero-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
.page-hero h1 {
  font-size: 2.25rem;
  line-height: 1.15;
  margin-bottom: 0.375rem;
}
.page-hero .lead { color: var(--hda-muted); font-size: 0.9375rem; max-width: 640px; }
.page-hero .mono-bg {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  opacity: 0.09;
  pointer-events: none;
}

/* ── Utility ────────────────────────────────────── */
.hstack { display: flex; align-items: center; gap: 0.75rem; }
.vstack { display: flex; flex-direction: column; gap: 0.75rem; }
.muted  { color: var(--hda-muted); }
.muted-2 { color: var(--hda-muted-2); }
.small { font-size: 0.8125rem; }
.micro { font-size: 0.75rem; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.divider { height: 1px; background: var(--hda-border); margin: 1rem 0; }
.lead { color: var(--hda-muted); font-size: 0.9375rem; line-height: 1.6; margin: 0; }

/* Link with arrow */
.link-arrow {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--hda-orange);
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; }

/* Back link */
.back-link-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1rem 1.5rem 0;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--hda-muted);
  text-decoration: none;
  transition: color .15s;
}
.back-link:hover { color: var(--hda-orange); text-decoration: none; }

/* Section separator */
.section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--hda-green);
  font-size: 1.25rem;
  margin: 0;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

/* ── Progress bar ───────────────────────────────── */
.progress {
  height: 6px;
  background: var(--hda-warm);
  border-radius: 9999px;
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--hda-green);
  border-radius: 9999px;
  transition: width .3s;
}
.progress.thin { height: 4px; }
.progress.orange > span { background: var(--hda-orange); }

/* ── User menu dropdown ─────────────────────────── */
.user-menu-link:hover  { background: var(--hda-warm) !important; }
.user-menu-logout:hover {
  background: var(--hda-warm) !important;
  color: var(--hda-orange) !important;
}

/* ── Masterclass catalogue ──────────────────────── */
.masterclass-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--hda-green);
}
.masterclass-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.masterclass-cover-placeholder {
  background: linear-gradient(135deg, var(--hda-green) 0%, #004a43 100%);
}
.masterclass-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.photo-thumb {
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.photo-thumb:hover { opacity: 0.85; }
/* ══════════════════════════════════════════════════
   Fiche membre — annuaire (directory/show)
   ══════════════════════════════════════════════════ */

/* ── Retour ── */
.back-link-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 0;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.85rem;
  color: var(--hda-orange);
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

/* ── Hero ── */
.profile-hero {
  background-color: var(--hda-warm);
  border-bottom: 1px solid var(--hda-border);
  padding: 3rem 1.5rem 2.5rem;
}
.profile-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.profile-hero-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 2.25rem;
  color: #fff;
  border: 3px solid rgba(255,255,255,0.7);
  overflow: hidden;
}
.profile-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-hero-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.375rem;
}
.profile-hero-name {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--hda-green);
  line-height: 1.2;
  margin: 0 0 0.25rem;
}
.profile-hero-role {
  font-size: 0.875rem;
  color: #5a7470;
  margin: 0;
}
.profile-hero-cta {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}
@media (max-width: 640px) {
  .profile-hero-cta { margin-left: 0; width: 100%; }
  .profile-hero-name { font-size: 1.6rem; }
}

/* ── Layout corps ── */
.page-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.profile-body { }
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.75rem;
  align-items: start;
}
@media (max-width: 880px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .profile-side {
    order: -1;
  }
}

/* ── Sections contenu ── */
.profile-section {
  background: var(--hda-cream);
  border: 1px solid var(--hda-border);
  border-radius: 4px;
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}
.profile-section .section-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--hda-green);
  text-align: left;
  margin: 0 0 1.25rem;
}

/* ── Sidebar ── */
.profile-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.profile-card {
  padding: 1.25rem 1.5rem;
}
.profile-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--hda-green);
  margin: 0 0 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--hda-border);
}
.profile-card-soft {
  background-color: var(--hda-warm);
  border-color: #d4c4b8;
}

/* ── Meta list (coordonnées) ── */
.meta-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.meta-list > div { display: flex; flex-direction: column; gap: 0.125rem; }
.meta-list dt {
  font-size: 0.7rem;
  font-weight: 600;
  color: #8a9e9a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.meta-list dd {
  font-size: 0.875rem;
  color: var(--hda-green);
  margin: 0;
  word-break: break-word;
}

/* ── Réseaux sociaux ── */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--hda-border);
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: var(--hda-green);
  text-decoration: none;
  border: 1px solid var(--hda-border);
  border-radius: 4px;
  padding: 0.25rem 0.75rem;
  transition: border-color 0.15s, color 0.15s;
}
.social-link:hover { border-color: var(--hda-orange); color: var(--hda-orange); }

/* ── Stats mini ── */
.profile-stats-mini {
  display: flex;
  gap: 1.75rem;
  margin-top: 0.75rem;
}
.stat-mini-v {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--hda-green);
  line-height: 1;
}
.stat-mini-l {
  display: block;
  font-size: 0.75rem;
  color: #8a9e9a;
  margin-top: 0.25rem;
}

/* ── Onglets galerie ── */
.works-tabs {
  display: flex;
  border-bottom: 2px solid var(--hda-border);
  margin-bottom: 1.5rem;
  gap: 0;
}
.works-tab {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: #8a9e9a;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.works-tab:hover { color: var(--hda-green); }
.works-tab.active,
.works-tab.is-active {
  color: var(--hda-green);
  border-bottom-color: var(--hda-orange);
  font-weight: 500;
}
.works-tab-count {
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--hda-border);
  color: #8a9e9a;
  border-radius: 9999px;
  padding: 0.1rem 0.45rem;
  line-height: 1.4;
}
.works-tab.is-active .works-tab-count {
  background: var(--hda-orange);
  color: #fff;
}
.works-panel { display: none; }
.works-panel.active { display: block; }

/* ── Card work — couverture + corps ── */
.work-cover {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
.work-body {
  padding: 0.875rem 1rem 1rem;
}
.work-title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--hda-green);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.cover-warm  { background: var(--hda-warm);           color: var(--hda-orange); }
.cover-green { background: rgba(0,89,79,0.1);          color: var(--hda-green); }
.cover-deep  { background: #e8ddd4;                    color: #5a4a3a; }

/* ── Galerie gestes ── */
.works-grid-gestures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.625rem;
}
.works-grid-gestures img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}

/* ── Galerie œuvres ── */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.25rem;
}
.work-card {
  border: 1px solid var(--hda-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--hda-cream);
}
.work-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.work-card-body { padding: 0.875rem; }
.work-card-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--hda-green);
  margin: 0 0 0.25rem;
}
.work-card-meta {
  font-size: 0.75rem;
  color: #8a9e9a;
  margin: 0 0 0.375rem;
}
.work-card-desc {
  font-size: 0.8rem;
  color: #5a7470;
  margin: 0;
  line-height: 1.5;
}

/* ── Galerie projets ── */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.project-card {
  display: flex;
  border: 1px solid var(--hda-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--hda-cream);
}
.project-card img {
  width: 140px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}
.project-card-body { padding: 1rem; flex: 1; }
.project-card-client {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--hda-green);
  margin: 0 0 0.5rem;
}
.project-card-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a9e9a;
  margin: 0.625rem 0 0.25rem;
}
.project-card-text {
  font-size: 0.85rem;
  color: #5a7470;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .project-card { flex-direction: column; }
  .project-card img { width: 100%; height: 180px; }
}

/* ── Helpers typographiques ── */
.micro {
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.muted   { color: #8a9e9a; }
.muted-2 { color: #8a9e9a; }
.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a9e9a;
}
.link { color: var(--hda-orange); text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ── btn (alias des boutons existants) ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-heading);
  padding: 0.6rem 1.25rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s;
  white-space: nowrap;
}
.btn-orange { background-color: var(--hda-orange); color: #fff; }
.btn-orange:hover { background-color: #9c3a00; color: #fff; }
.btn-ghost { background: transparent; color: var(--hda-green); border: 1px solid var(--hda-border); }
.btn-ghost:hover { background: var(--hda-warm); }
.btn.sm { padding: 0.375rem 0.875rem; font-size: 0.8rem; }

/* ── Pill reconversion ── */
.pill-reconversion {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: #ede9f6;
  color: #5b21b6;
}

/* ── Cards cliquables — bouton wrapper ── */
.work-card-btn {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
}
.work-card-btn:hover { border-color: var(--hda-green); }
.work-cover { position: relative; }
.work-zoom {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: rgba(255,251,247,0.92);
  color: var(--hda-green);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}
.work-card-btn:hover .work-zoom { opacity: 1; transform: translateY(0); }

/* ── Popin work-modal ── */
.work-modal-overlay[hidden] { display: none !important; }
.work-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31,64,51,0.55);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.work-modal {
  width: min(720px, 100%);
  max-height: calc(100vh - 4rem);
  background: var(--hda-cream);
  border-radius: 4px;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  position: relative;
  animation: work-modal-in 220ms cubic-bezier(.2,.8,.2,1);
}
@keyframes work-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.work-modal-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: rgba(255,251,247,0.92);
  border: 1px solid var(--hda-border);
  color: var(--hda-green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.work-modal-close:hover { background: var(--hda-cream); }
.work-modal-cover {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.work-modal-body { padding: 1.5rem 1.75rem 1.75rem; }
.work-modal-title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  margin: 0 0 0.5rem;
  color: var(--hda-green);
  font-weight: 700;
  line-height: 1.2;
}
.work-modal-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 1rem 0;
  padding: 0.875rem 0;
  border-top: 1px solid var(--hda-border);
  border-bottom: 1px solid var(--hda-border);
}
.work-modal-meta:empty { display: none; }
.work-modal-meta div { margin: 0; }
.work-modal-meta dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hda-muted-2);
  margin-bottom: 0.125rem;
}
.work-modal-meta dd {
  margin: 0;
  font-weight: 600;
  color: var(--hda-green);
  font-size: 0.875rem;
}
.work-modal-story {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--hda-green);
  margin: 0;
}
.work-modal-story:empty { display: none; }
.work-modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
/* ══════════════════════════════════════════════════
   Styles — Espace Admin & Bénévole
   ══════════════════════════════════════════════════ */

/* ── Navbar backoffice (2 boutons) ───────────────── */
.navbar-backoffice {
  border-bottom: 2px solid var(--hda-border);
  background: var(--hda-cream);
}

.navbar-backoffice .nav-links {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.nav-tab-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--hda-border);
  background: var(--hda-cream);
  color: var(--hda-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  margin-right: 0.375rem;
}
.nav-tab-switch:hover {
  background: var(--hda-warm);
  color: var(--hda-green);
  border-color: var(--hda-input);
}
.nav-tab-switch.is-active {
  background: var(--hda-green);
  color: var(--hda-cream);
  border-color: var(--hda-green);
}

/* ── Layout backoffice ────────────────────────── */
.backoffice-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.backoffice-main {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

/* ── Sidebar admin ────────────────────────────── */
.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--hda-cream);
  border-right: 1px solid var(--hda-border);
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 68px);
  position: sticky;
  top: 68px;
  transition: width .22s ease;
}
.admin-sidebar.is-collapsed {
  width: 56px;
}

/* Bouton de bascule (afficher/masquer) */
.admin-sidebar-toggle {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0.625rem 0.625rem 0 auto;
  padding: 0;
  border: 1px solid var(--hda-border);
  border-radius: 9999px;
  background: var(--hda-cream);
  color: var(--hda-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.admin-sidebar-toggle:hover {
  color: var(--hda-green);
  border-color: var(--hda-green);
  background: var(--hda-warm);
}
.admin-sidebar.is-collapsed .admin-sidebar-toggle {
  margin-right: auto;
  margin-left: auto;
}

.admin-sidebar-inner {
  padding: 0.5rem 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.admin-sidebar.is-collapsed .admin-sidebar-inner {
  padding: 0.5rem 0.375rem 1rem;
}
/* En mode replié : on masque les libellés de section et on centre les items */
.admin-sidebar.is-collapsed .admin-sidebar-label {
  display: none;
}
.admin-sidebar.is-collapsed .admin-sidebar-item {
  justify-content: center;
  padding: 0.5rem 0;
}
.admin-sidebar.is-collapsed .admin-sidebar-item span {
  display: none;
}
/* Séparateur subtil entre sections en mode replié */
.admin-sidebar.is-collapsed .admin-sidebar-section + .admin-sidebar-section {
  border-top: 1px solid var(--hda-border);
  margin-top: 0.375rem;
  padding-top: 0.375rem;
}

.admin-sidebar-section {
  margin-bottom: 0.5rem;
}

.admin-sidebar-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hda-muted-2);
  padding: 0.625rem 0.625rem 0.25rem;
  margin: 0;
}

.admin-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: none;
  background: none;
  color: var(--hda-muted);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
}
.admin-sidebar-item:hover {
  background: var(--hda-warm);
  color: var(--hda-green);
}
.admin-sidebar-item.is-active {
  background: var(--hda-warm);
  color: var(--hda-green);
  font-weight: 700;
}
.admin-sidebar-item.is-active svg {
  color: var(--hda-orange);
}

/* ── admin-page dans le backoffice ───────────── */
.backoffice-main .admin-page {
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: 960px;
}

/* Supprimer le back-link "Retour au tableau de bord" dans le backoffice
   (la sidebar remplace la navigation) */
.backoffice-main .admin-page .back-link {
  display: none;
}

/* Bouton "Admin" dans la navbar membre (charte : CTA orange) */
.nav-link-admin {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--hda-orange);
  border-radius: var(--radius);
  padding: 0.375rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hda-cream);
  background: var(--hda-orange);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.nav-link-admin:hover {
  background: var(--hda-orange-dark);
  border-color: var(--hda-orange-dark);
  color: var(--hda-cream);
}
.nav-link-admin.is-active {
  background: var(--hda-orange-dark);
  border-color: var(--hda-orange-dark);
  color: var(--hda-cream);
}
.nav-link-admin.is-active::after { display: none; }
.navbar.is-admin {
  border-bottom: 2px solid var(--hda-green-dark);
  background: var(--hda-green-dark);
}
.navbar.is-admin .nav-link { color: rgba(255,251,247,0.8); }
.navbar.is-admin .nav-link:hover { color: var(--hda-cream); }
.navbar.is-admin .nav-link.is-active { color: var(--hda-cream); }
.navbar.is-admin .nav-link.is-active::after { background: var(--hda-orange-soft); }
.navbar.is-admin .nav-brand img { filter: brightness(0) invert(1); }

.admin-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hda-cream);
  background: var(--hda-orange);
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
}

/* ── Page admin générale ──────────────────────── */
.admin-page {
  padding-top: 1.75rem;
  padding-bottom: 3rem;
}

.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.admin-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  padding-top: 0.25rem;
}

.admin-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hda-muted);
  margin-bottom: 0.25rem;
}

.admin-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--hda-green);
  margin: 0;
  line-height: 1.1;
}

/* ── Alerte urgente ───────────────────────────── */
.admin-alert-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fde8dc;
  border: 1px solid rgba(185,71,0,0.2);
  border-radius: var(--radius);
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.75rem;
  color: var(--hda-orange-dark);
  font-size: 0.9375rem;
}
.admin-alert-banner strong { color: var(--hda-orange); }
.admin-alert-banner .btn { margin-left: auto; flex-shrink: 0; }

/* ── Grille de stats ──────────────────────────── */
.admin-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.875rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 900px) {
  .admin-stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .admin-stats-grid { grid-template-columns: 1fr; }
}

.admin-stat-card {
  background: var(--hda-cream);
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.admin-stat-card:hover { box-shadow: var(--shadow-md); }
.admin-stat-primary {
  background: var(--hda-green);
  border-color: var(--hda-green);
  grid-column: span 1;
}
.admin-stat-primary .admin-stat-label { color: rgba(255,251,247,0.7); }
.admin-stat-primary .admin-stat-value { color: var(--hda-cream); }
.admin-stat-primary .admin-stat-sub   { color: rgba(255,251,247,0.75); }

.admin-stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hda-muted);
  margin: 0 0 0.375rem;
}
.admin-stat-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--hda-green);
  display: block;
  margin-bottom: 0.375rem;
}
.admin-stat-sub {
  font-size: 0.8125rem;
  color: var(--hda-muted);
}

.admin-stat-bar {
  height: 4px;
  background: var(--hda-border);
  border-radius: 9999px;
  margin-top: 0.5rem;
  overflow: hidden;
}
.admin-stat-bar span {
  display: block;
  height: 100%;
  background: var(--hda-green-soft);
  border-radius: 9999px;
  transition: width .4s ease;
}

/* ── Deux colonnes admin ──────────────────────── */
.admin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 860px) {
  .admin-two-col { grid-template-columns: 1fr; }
}

/* ── Section générique admin ─────────────────── */
.admin-section {
  background: var(--hda-cream);
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.admin-section .section-head { margin-bottom: 0.75rem; }

/* ── File de validation ──────────────────────── */
.admin-content-queue {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.admin-queue-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  background: var(--hda-cream);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .15s, border-color .15s;
}
.admin-queue-row:hover { background: var(--hda-warm); border-color: var(--hda-input); }

.admin-queue-type {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.type-article    { background: #d6eeeb; color: var(--hda-green); }
.type-masterclass{ background: var(--hda-warm); color: var(--hda-orange); }
.type-collab     { background: #fde8dc; color: var(--hda-orange-dark); }

.admin-queue-body { flex: 1; min-width: 0; }
.admin-queue-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hda-green);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-queue-arrow { color: var(--hda-muted-2); font-size: 0.875rem; flex-shrink: 0; }

/* ── KPI row ──────────────────────────────────── */
.admin-kpi-row {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.25rem;
}
.admin-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.admin-kpi-v {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--hda-green);
  line-height: 1;
}
.admin-kpi-l {
  font-size: 0.75rem;
  color: var(--hda-muted);
  font-weight: 500;
}

/* ── Collab stats ─────────────────────────────── */
.admin-collab-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.admin-collab-stat {
  border-left: 2px solid var(--hda-border);
  padding-left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* ── Mini rows ────────────────────────────────── */
.admin-mini-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hda-border);
}
.admin-mini-row:last-child { border-bottom: none; }

.admin-mini-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hda-cream);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.admin-mini-avatar.sm { width: 28px; height: 28px; font-size: 0.75rem; }
.admin-mini-avatar.lg { width: 56px; height: 56px; font-size: 1.375rem; }

.admin-mini-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hda-green);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Status dots ──────────────────────────────── */
.admin-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
}
.admin-status-dot.active   { background: #d6eeeb; color: var(--hda-green); }
.admin-status-dot.inactive { background: #e8e0d8; color: var(--hda-muted); }
.admin-status-dot.expires  { background: #fde8dc; color: var(--hda-orange); }
.admin-status-dot.active::before   { content: ''; width: 6px; height: 6px; background: var(--hda-green); border-radius: 9999px; }
.admin-status-dot.inactive::before { content: ''; width: 6px; height: 6px; background: var(--hda-muted); border-radius: 9999px; }
.admin-status-dot.expires::before  { content: ''; width: 6px; height: 6px; background: var(--hda-orange); border-radius: 9999px; }

/* ── Filtres & recherche ──────────────────────── */
.admin-filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.admin-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--hda-cream);
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.875rem;
  color: var(--hda-muted);
  box-shadow: var(--shadow-sm);
}
.admin-search {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--hda-green);
  outline: none;
}
.admin-search::placeholder { color: var(--hda-muted-2); }

.admin-filter-pills {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.filter-pill {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.3rem 0.875rem;
  border-radius: 9999px;
  border: 1px solid var(--hda-border);
  background: var(--hda-cream);
  color: var(--hda-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-pill:hover { background: var(--hda-warm); border-color: var(--hda-input); color: var(--hda-green); }
.filter-pill.is-active { background: var(--hda-green); color: var(--hda-cream); border-color: var(--hda-green); }

/* ── Table membres ────────────────────────────── */
.admin-table-wrap {
  border-radius: var(--radius);
  border: 1px solid var(--hda-border);
  box-shadow: var(--shadow-sm);
}

.admin-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--hda-cream);
}
.admin-table th {
  background: var(--hda-warm);
  padding: 0.625rem 0.75rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--hda-muted);
  border-bottom: 1px solid var(--hda-border);
}
.admin-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--hda-border);
  vertical-align: middle;
  color: var(--hda-green);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr.is-inactive td { opacity: 0.55; }
.admin-table tr:hover td { background: rgba(242,231,221,0.4); }
.sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.sort-link:hover { color: var(--hda-green); }
.sort-link.is-sorted { color: var(--hda-green); }
.sort-icons { font-size: 0.6em; line-height: 1; }
.sort-neutral { opacity: 0.35; letter-spacing: -0.1em; }

.admin-member-cell {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.admin-member-cell:hover .admin-mini-title { color: var(--hda-orange); }

/* ── Détail membre ────────────────────────────── */
.admin-member-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--hda-border);
  margin-bottom: 0.5rem;
}

/* ── Contenus — content rows ─────────────────── */
.admin-content-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
}
.admin-content-row.hoverable { cursor: pointer; }
.admin-content-row.hoverable:hover { background: var(--hda-warm); }

/* ── Bénévole — badge rôle ───────────────────── */
.admin-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}
.benevole-badge {
  background: var(--surf-benevole-bg);
  color: var(--hda-green-dark);
  border: 1px solid rgba(0,89,79,0.2);
  font-weight: 800;
}
.superadmin-badge {
  background: var(--surf-admin-bg);
  color: var(--hda-cream);
}

/* ── Bénévole — liste membres à accueillir ───── */
.ben-members-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.ben-member-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.125rem;
  transition: opacity .2s;
}
.ben-member-row.is-welcomed {
  opacity: 0.5;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — back office (sidebar + dashboard)
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .backoffice-main .admin-page {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .admin-title { font-size: 1.5rem; }
  .admin-stat-value { font-size: 2rem; }
  .admin-header-actions { width: 100%; }
  .admin-alert-banner {
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
  .admin-alert-banner .btn { margin-left: 0; width: 100%; justify-content: center; }
}

@media (max-width: 720px) {
  /* La sidebar passe en bandeau horizontal scrollable au-dessus du contenu */
  .backoffice-shell {
    flex-direction: column;
  }
  .admin-sidebar,
  .admin-sidebar.is-collapsed {
    width: 100%;
    height: auto;
    max-height: none;
    position: sticky;
    top: 56px;
    border-right: none;
    border-bottom: 1px solid var(--hda-border);
    z-index: 5;
  }
  .admin-sidebar-toggle {
    margin: 0.5rem 0.75rem 0 auto;
  }
  .admin-sidebar.is-collapsed .admin-sidebar-toggle { margin-right: 0.75rem; }
  .admin-sidebar-inner {
    flex-direction: row;
    overflow-x: auto;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    scrollbar-width: thin;
  }
  .admin-sidebar-section {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
  }
  .admin-sidebar-section + .admin-sidebar-section {
    border-left: 1px solid var(--hda-border);
    padding-left: 0.5rem;
    margin-left: 0.25rem;
    border-top: none !important;
  }
  .admin-sidebar-label {
    padding: 0;
    margin-right: 0.25rem;
    flex-shrink: 0;
  }
  .admin-sidebar-item {
    flex-shrink: 0;
    white-space: nowrap;
    width: auto;
    padding: 0.4rem 0.625rem;
  }
  .admin-sidebar.is-collapsed .admin-sidebar-inner {
    flex-direction: row;
  }
  .admin-sidebar.is-collapsed .admin-sidebar-item span { display: inline; }
  .admin-sidebar.is-collapsed .admin-sidebar-label { display: block; }

  .admin-header { flex-direction: column; align-items: stretch; }
  .admin-header-actions { flex-wrap: wrap; }
  .admin-header-actions .btn { flex: 1 1 auto; justify-content: center; }
  .admin-stats-grid { gap: 0.625rem; }
  .admin-kpi-row { flex-wrap: wrap; }
  .admin-content-row { flex-wrap: wrap; }
  .admin-content-row > div:last-child { width: 100%; }
  .admin-mini-row { flex-wrap: wrap; }
  .tabs-row { overflow-x: auto; flex-wrap: nowrap; }
  .tabs-row .tab { flex-shrink: 0; }
}

@media (max-width: 480px) {
  .backoffice-main .admin-page {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
  .admin-title { font-size: 1.25rem; }
  .admin-stat-value { font-size: 1.625rem; }
  .admin-stat-card { padding: 0.875rem 1rem; }
  .admin-collab-stats { flex-wrap: wrap; }
}
/* ══════════════════════════════════════════════════
   New screens — Première connexion, Profil édition,
   Collaborations, Articles, Carnets liste
   ══════════════════════════════════════════════════ */

/* ── Première connexion ─────────────────────────── */
.onboard-shell {
  display: grid;
  grid-template-columns: minmax(320px, 38%) 1fr;
  min-height: 100vh;
  background: var(--hda-cream);
}
@media (max-width: 800px) {
  .onboard-shell { grid-template-columns: 1fr; }
}
.onboard-side {
  background: var(--hda-green);
  color: var(--hda-cream);
  padding: 2.5rem 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.onboard-logo {
  height: 38px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  align-self: flex-start;
}
.onboard-mark {
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 360px;
  filter: brightness(0) invert(1);
  opacity: 0.07;
  pointer-events: none;
}
.onboard-side-foot {
  margin-top: auto;
  position: relative;
  z-index: 1;
  padding-top: 3rem;
}
.onboard-quote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--hda-cream);
  margin: 0;
}
.onboard-main {
  padding: 2.5rem 3rem 3rem;
  display: flex;
  flex-direction: column;
  max-width: 720px;
}
@media (max-width: 800px) {
  .onboard-side { padding: 1.5rem 1.5rem 2rem; }
  .onboard-main { padding: 1.5rem; }
}
.onboard-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.onboard-stepper .step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--hda-muted-2);
}
.onboard-stepper .step.is-current { color: var(--hda-green); }
.onboard-stepper .step.is-done { color: var(--hda-green-soft); }
.onboard-stepper .step-num {
  width: 22px; height: 22px;
  border-radius: 9999px;
  background: var(--hda-warm);
  color: var(--hda-muted);
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.onboard-stepper .step.is-current .step-num { background: var(--hda-green); color: var(--hda-cream); }
.onboard-stepper .step.is-done .step-num { background: var(--hda-green-soft); color: var(--hda-cream); }
.onboard-stepper .step-bar {
  flex: 0 1 40px;
  height: 2px;
  background: var(--hda-border);
  border-radius: 9999px;
}
.onboard-stepper .step-bar.is-done { background: var(--hda-green-soft); }

.onboard-h1 { font-size: 2.25rem; line-height: 1.15; margin-top: 0.25rem; }
.onboard-lead { max-width: 540px; margin-top: 0.75rem; }
.onboard-form { margin-top: 2rem; max-width: 520px; }

.pwd-meter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: -0.25rem 0 0.75rem;
}
.pwd-bars { display: flex; gap: 4px; flex: 1; }
.pwd-bar {
  height: 4px;
  flex: 1;
  background: var(--hda-border);
  border-radius: 9999px;
  transition: background .2s;
}
.pwd-bar.is-on.level-1 { background: var(--hda-orange); }
.pwd-bar.is-on.level-2 { background: var(--hda-orange); }
.pwd-bar.is-on.level-3 { background: var(--hda-orange-soft); }
.pwd-bar.is-on.level-4 { background: var(--hda-green-soft); }
.pwd-strength {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hda-muted);
  font-family: var(--font-body);
  min-width: 64px;
  text-align: right;
}

.pwd-checks { margin-top: 0.5rem; }
.pwd-checks li { padding: 0.25rem 0; }
.pwd-checks .check-dot.is-pending {
  background: transparent;
  border: 1.5px dashed var(--hda-input);
}
.pwd-checks .check-dot.is-pending::after { display: none; }
.pwd-checks .check-dot.is-ok { background: var(--hda-green); border-color: var(--hda-green); }
.pwd-checks .is-met { color: var(--hda-green); font-weight: 600; }

.btn-disabled {
  background: var(--hda-warm);
  color: var(--hda-muted-2);
  cursor: not-allowed;
  border: 1px solid var(--hda-border);
}
.btn-disabled:hover { background: var(--hda-warm); }

.onboard-foot {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hda-border);
}

/* ── Profil édition complète ────────────────────── */
.profile-edit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.profile-edit-status { text-align: right; }

.profile-edit-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}
@media (max-width: 800px) {
  .profile-edit-grid { grid-template-columns: 1fr; }
}

.profile-edit-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  position: sticky;
  top: 80px;
  align-self: flex-start;
}
@media (max-width: 800px) {
  .profile-edit-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hda-border);
  }
}
.pe-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hda-muted);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.pe-nav-item:hover { color: var(--hda-green); background: var(--hda-warm); }
.pe-nav-item.is-active {
  background: var(--hda-green);
  color: var(--hda-cream);
  border-color: var(--hda-green);
}
.pe-nav-foot {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hda-border);
}
@media (max-width: 800px) { .pe-nav-foot { display: none; } }

.profile-edit-main { min-width: 0; }

/* Mobile (.app.is-mobile simulator) — force stack regardless of viewport width */
.app.is-mobile .profile-edit-grid { grid-template-columns: 1fr; gap: 1.25rem; }
.app.is-mobile .profile-edit-nav {
  position: static;
  flex-direction: row;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hda-border);
}
.app.is-mobile .profile-edit-nav .pe-nav-item { flex-shrink: 0; white-space: nowrap; }
.app.is-mobile .pe-nav-foot { display: none; }
.app.is-mobile .profile-edit-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.app.is-mobile .profile-edit-status { text-align: left; }
.app.is-mobile .profile-edit-grid .field-row { grid-template-columns: 1fr; }
.app.is-mobile .profile-edit-foot { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.app.is-mobile .profile-edit-foot .btn { width: 100%; }
.profile-edit-foot {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hda-border);
  align-items: center;
}
.saved-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--hda-green-soft);
}
@media (max-width: 600px) { .saved-indicator { display: none; } }

.avatar-edit-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--hda-border);
}

.prefs-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hda-border);
}
.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--hda-border);
  font-size: 0.9375rem;
  color: var(--hda-green);
  cursor: pointer;
}
.pref-row .switch {
  appearance: none;
  width: 36px; height: 20px;
  background: var(--hda-input);
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.pref-row .switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--hda-cream);
  border-radius: 9999px;
  transition: transform .2s;
}
.pref-row .switch:checked { background: var(--hda-green); }
.pref-row .switch:checked::after { transform: translateX(16px); }

/* ── Collaborations (vue d'ensemble) ─────────────── */
.collabs-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.collabs-stats {
  margin-top: 1.5rem;
  display: flex;
  gap: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hda-border);
  flex-wrap: wrap;
}
.collabs-stats > div { display: flex; flex-direction: column; }
.collabs-stats .c-stat-l {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.tabs-row {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--hda-border);
  margin-bottom: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-row::-webkit-scrollbar {
  display: none;
}
.tab {
  padding: 0.875rem 1.25rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--hda-muted);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.tab:hover { color: var(--hda-green); }
.tab.is-active { color: var(--hda-orange); border-bottom-color: var(--hda-orange); }
.tab-count {
  background: var(--hda-warm);
  color: var(--hda-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  min-width: 22px;
  text-align: center;
}
.tab.is-active .tab-count { background: var(--hda-orange); color: var(--hda-cream); }

/* Opportunités */
.opp-list { display: flex; flex-direction: column; gap: 0.875rem; }
.opp-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  align-items: flex-start;
}
@media (max-width: 600px) {
  .opp-card { grid-template-columns: 1fr; gap: 0.75rem; padding: 1rem; }
}
.opp-match {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.opp-match-ring {
  width: 64px; height: 64px;
  border-radius: 9999px;
  background:
    conic-gradient(var(--hda-green) calc(var(--p) * 1%), var(--hda-warm) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.opp-match-ring::before {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 9999px;
  background: var(--hda-cream);
}
.opp-match-ring span {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--hda-green);
}

.opp-body { min-width: 0; }
.opp-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.opp-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0 0 0.375rem;
  line-height: 1.25;
  color: var(--hda-green);
}
.opp-brief {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--hda-muted);
  margin: 0;
}
.opp-footer {
  margin-top: 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.urgency-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--surf-alert-bg);
  color: var(--surf-alert-fg);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
}

/* Mes annonces */
.mine-list { display: flex; flex-direction: column; gap: 0.75rem; }
.mine-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  padding: 1.125rem 1.25rem;
  align-items: center;
}
@media (max-width: 600px) {
  .mine-row { grid-template-columns: 1fr; }
}
.mine-row.is-closed .mine-title { color: var(--hda-muted); }
.mine-row.is-closed .mine-stats { opacity: 0.65; }
.mine-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.375rem;
}
.mine-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--hda-green);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.mine-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--hda-muted);
  flex-wrap: wrap;
}
.mine-stats strong { color: var(--hda-green); font-weight: 700; }
.dot-sep {
  width: 3px; height: 3px;
  border-radius: 9999px;
  background: var(--hda-input);
  display: inline-block;
}
.mine-actions {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-body);
}
.status-active { background: rgba(0,89,79,0.08); color: var(--hda-green); }
.status-closed { background: var(--hda-warm); color: var(--hda-muted); }
.dot-live {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--hda-green);
  box-shadow: 0 0 0 0 rgba(0,89,79,0.6);
  animation: pulse-live 1.6s ease-out infinite;
}
@keyframes pulse-live {
  0% { box-shadow: 0 0 0 0 rgba(0,89,79,0.5); }
  100% { box-shadow: 0 0 0 6px rgba(0,89,79,0); }
}

.mine-add {
  border: 1.5px dashed var(--hda-input);
  background: transparent;
  cursor: pointer;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
}
.mine-add:hover { border-color: var(--hda-orange); background: var(--hda-warm); }
.mine-add-icon {
  width: 44px; height: 44px;
  background: var(--hda-warm);
  color: var(--hda-orange);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.mine-add:hover .mine-add-icon { background: var(--hda-cream); }

/* Mes candidatures */
.apps-list { display: flex; flex-direction: column; gap: 0.75rem; }
.app-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  padding: 1.125rem 1.25rem;
  align-items: center;
}
@media (max-width: 600px) { .app-row { grid-template-columns: 1fr; gap: 0.625rem; } }

.app-state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.state-shortlist { background: rgba(0,89,79,0.08); color: var(--hda-green); }
.state-review    { background: var(--hda-warm); color: var(--hda-muted); }
.state-rejected  { background: var(--surf-rejected-bg); color: var(--surf-rejected-fg); opacity: 0.85; }
.state-accepted  { background: var(--hda-green); color: var(--hda-cream); }

.app-body { min-width: 0; }
.app-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--hda-green);
  margin: 0.125rem 0 0.375rem;
  line-height: 1.3;
}
.app-note {
  font-size: 0.875rem;
  color: var(--hda-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Articles — proposer ─────────────────────────── */
.page-hero-warm {
  background: linear-gradient(180deg, var(--hda-warm) 0%, var(--hda-cream) 100%);
}

.articles-mine {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hda-border);
}
.article-mine-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hda-border);
}
@media (max-width: 600px) {
  .article-mine-row { grid-template-columns: 1fr; gap: 0.5rem; }
}
.article-state {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.6rem;
  border-radius: 9999px;
  font-family: var(--font-body);
  width: max-content;
}
.state-published { background: var(--hda-green); color: var(--hda-cream); }
.state-review    { background: #fde8dc; color: var(--hda-orange); }
.state-a-relire  { background: #e8f4f0; color: var(--hda-green); }
.state-draft     { background: var(--hda-warm); color: var(--hda-muted); }

.article-mine-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--hda-green);
  margin: 0 0 0.125rem;
  line-height: 1.3;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.theme-card {
  text-align: left;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  background: var(--hda-cream);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.theme-card:hover { border-color: var(--hda-green); }
.theme-card.is-active { border-color: var(--hda-green); background: rgba(0,89,79,0.04); }
.theme-card-label {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--hda-green);
  font-size: 0.9375rem;
  display: block;
  margin-bottom: 0.125rem;
}

.editor-mock {
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  background: var(--hda-cream);
  overflow: hidden;
}
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--hda-border);
  background: var(--hda-warm);
  font-size: 0.875rem;
  color: var(--hda-muted);
  font-family: var(--font-body);
  font-weight: 600;
  flex-wrap: wrap;
}
.editor-toolbar > span { cursor: pointer; }
.editor-toolbar > span:hover { color: var(--hda-orange); }
.editor-area {
  padding: 1.25rem 1.5rem;
  min-height: 200px;
}
.editor-area p { margin: 0 0 0.875rem; }
.editor-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  border-top: 1px solid var(--hda-border);
  background: var(--hda-warm);
}

/* ── Carnets — liste ─────────────────────────────── */
.carnet-open {
  display: grid;
  grid-template-columns: 100px 1fr 280px;
  gap: 1.5rem;
  margin-top: 2rem;
  padding: 0;
  align-items: stretch;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.carnet-open:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
@media (max-width: 800px) {
  .carnet-open { grid-template-columns: 1fr; }
}
.carnet-open-num {
  background: var(--hda-warm);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  border-right: 1px solid var(--hda-border);
}
@media (max-width: 800px) {
  .carnet-open-num {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    border-right: 0;
    border-bottom: 1px solid var(--hda-border);
  }
}
.carnet-open-numv {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--hda-orange);
}
.carnet-open-body { padding: 1.5rem 0; min-width: 0; }
.carnet-open-title {
  font-size: 1.875rem;
  margin: 0.5rem 0 0.25rem;
  line-height: 1.15;
}
.carnet-open-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  margin-right: 0;
}
@media (max-width: 800px) { .carnet-open-cover { display: none; } }
.carnet-cover-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
}

.carnets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.carnet-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  cursor: default;
}
.carnet-card-cover {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.carnet-card-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.carnet-card-body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.carnet-card-title {
  font-size: 1.375rem;
  margin: 0.25rem 0 0.25rem;
  line-height: 1.2;
}
.carnet-card-sub {
  margin: 0 0 0.625rem;
}
.carnet-card-summary {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--hda-muted);
  margin: 0 0 1rem;
  flex: 1;
}
.carnet-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--hda-muted-2);
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hda-border);
}
.carnet-card-meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.carnet-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.875rem;
  flex-wrap: wrap;
}

.carnets-cta {
  margin-top: 2.5rem;
  padding: 2rem;
  background: var(--hda-warm);
  border: 1px solid var(--hda-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.carnets-cta h3 { color: var(--hda-green); }

/* ── Séminaires ─────────────────────────────────── */
.cover-terracotta { background: #B94700; color: var(--hda-cream); }
.cover-green      { background: #00594F; color: var(--hda-cream); }
.cover-warm       { background: var(--hda-warm); color: var(--hda-green); }
.cover-deep       { background: #01423b; color: var(--hda-cream); }

.sem-featured {
  display: grid;
  grid-template-columns: 340px 1fr;
  padding: 0;
  overflow: hidden;
  margin-bottom: 2rem;
}
.sem-featured-cover {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sem-featured-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  background: rgba(255,251,247,0.9);
  color: var(--hda-green);
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex; align-items: center; gap: 0.25rem;
  font-family: var(--font-body);
}
.sem-featured-cover.cover-warm .sem-featured-badge {
  background: var(--hda-green); color: var(--hda-cream);
}
.sem-featured-body { padding: 1.75rem 2rem; }
.sem-featured-title {
  font-size: 1.5rem; margin: 0.375rem 0 0;
  line-height: 1.2; color: var(--hda-green); font-weight: 700;
}
.sem-meta {
  display: flex; gap: 1.25rem; margin-top: 1rem;
  color: var(--hda-muted); font-size: 0.8125rem; flex-wrap: wrap;
}
.sem-meta span { display: flex; align-items: center; gap: 0.375rem; }

@media (max-width: 760px) {
  .sem-featured { grid-template-columns: 1fr; }
  .sem-featured-cover { min-height: 180px; }
  .sem-featured-body { padding: 1.25rem; }
  .sem-featured-title { font-size: 1.125rem; }
}

.sem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}
.sem-card {
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column; cursor: pointer;
}
.sem-cover {
  height: 140px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.sem-badge-done {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: rgba(255,251,247,0.95);
  color: var(--hda-green);
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem; font-weight: 600;
  border-radius: 9999px;
  display: flex; align-items: center; gap: 0.25rem;
  font-family: var(--font-body);
}
.sem-body {
  padding: 1rem 1.125rem 1.125rem;
  display: flex; flex-direction: column; flex: 1;
}
.sem-title { font-size: 1rem; margin: 0.25rem 0 0.375rem; line-height: 1.3; }
.sem-partner {
  margin: 0.25rem 0 0.75rem;
  display: flex; align-items: center; gap: 0.25rem;
}
.sem-footer { margin-top: auto; padding-top: 0.5rem; }

/* ── Masterclasses ─────────────────────────────── */
.mc-stats {
  display: flex;
  gap: 0;
  background: var(--hda-warm);
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  margin-bottom: 2rem;
  overflow: hidden;
}
.mc-stat {
  flex: 1;
  text-align: center;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--hda-border);
}
.mc-stat:last-child { border-right: none; }
.mc-stat-value {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--hda-green);
  line-height: 1;
  margin: 0;
}
.mc-stat-label {
  font-size: 0.75rem;
  color: var(--hda-muted);
  margin-top: 0.375rem;
}

.mc-timeline { display: flex; flex-direction: column; gap: 0.875rem; }
.mc-session {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1rem;
  align-items: start;
}
.mc-session-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.875rem;
}
.mc-session-day {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hda-green);
  line-height: 1;
  margin: 0;
}
.mc-session-month {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hda-muted);
  margin: 0;
}
.mc-session-body { padding: 1rem 1.25rem; }
.mc-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.mc-session-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--hda-green);
  margin: 0.125rem 0 0;
  line-height: 1.3;
}
.mc-session-meta {
  display: flex;
  gap: 1.25rem;
  font-size: 0.8125rem;
  color: var(--hda-muted);
  flex-wrap: wrap;
  align-items: center;
}
.mc-session-meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.mc-session-progress {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.75rem;
}
.mc-session-progress .progress { flex: 1; }

.mc-list { display: flex; flex-direction: column; gap: 0.625rem; }
.mc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
}

/* ── Profile / article grid layout ─────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
}
.profile-side { display: flex; flex-direction: column; gap: 1rem; }
.profile-section { margin-bottom: 2rem; }
.profile-card { padding: 1.25rem 1.5rem; }
.profile-card-title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--hda-green);
  margin: 0 0 0.875rem;
}
.profile-card-soft { background: var(--hda-warm); }

/* ── Forms utility ─────────────────────────────── */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.125rem;
}
.field-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--hda-green);
  line-height: 1.5;
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.field-check input[type="checkbox"] { margin-top: 0.125rem; flex-shrink: 0; }
.form-nav {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hda-border);
  flex-wrap: wrap;
}
.form-step { }
.form-step-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--hda-green);
  margin: 0 0 1.25rem;
}

.upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
  margin-top: 0.875rem;
}
.upload-slot {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.upload-slot.empty {
  border: 1.5px dashed var(--hda-border);
  background: var(--hda-warm);
  color: var(--hda-muted);
  cursor: pointer;
  transition: border-color .15s;
}
.upload-slot.empty:hover { border-color: var(--hda-green); }
.upload-thumb {
  width: 100%; height: 80%;
  object-fit: cover;
}

.ami-review {
  background: var(--hda-warm);
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.review-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.review-row p { margin: 0; font-size: 0.9375rem; color: var(--hda-green); }

/* ── Sidebar lists ─────────────────────────────── */
.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.timeline-list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.timeline-year {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--hda-orange);
  white-space: nowrap;
  min-width: 2.75rem;
  padding-top: 2px;
}
.timeline-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hda-green);
  line-height: 1.3;
  margin: 0 0 0.125rem;
}
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.check-list li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.8125rem; color: var(--hda-green); line-height: 1.5; }
.check-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hda-orange);
  flex-shrink: 0;
  margin-top: 5px;
}

/* ── Page hero variants ─────────────────────────── */
.page-hero-green { background: var(--hda-green); }
.page-hero-green .eyebrow { color: rgba(255,251,247,0.7); }
.page-hero-green h1 { color: var(--hda-cream); }
.page-hero-green .lead { color: rgba(255,251,247,0.9); }
.page-hero-green .mono-bg { opacity: 0.08; }

/* ── Carnet hero stats ──────────────────────────── */
.carnet-hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.c-stat-v {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--hda-cream);
  line-height: 1;
}
.c-stat-l {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255,251,247,0.7);
  margin-top: 0.125rem;
}
/* ══════════════════════════════════════════════════
   Histoires d'Artisans — Design Tokens
   Typography + Color + Semantic styles
   Source of truth: HDA_CharteGraphique.pdf + app/assets/stylesheets/application.tailwind.css
   ══════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────── */
:root {
  /* Primary — from the Charte Graphique */
  --hda-green:      #00594F;  /* Pantone 3292 C — primary brand */
  --hda-orange:     #B94700;  /* Pantone 1525 C — accent / CTA */
  --hda-warm:       #F2E7DD;  /* warm beige section bg */
  --hda-cream:      #fffbf7;  /* page bg / body */

  /* Secondary palette from charte */
  --hda-green-dark:  #01423b;
  --hda-green-soft:  #4ba59b;
  --hda-orange-dark: #772e00;
  --hda-orange-soft: #e97025;

  /* UI neutrals, from tailwind.config */
  --hda-border:     #e8ddd4;
  --hda-input:      #c5b8ae;

  /* Extended utility tokens derived for the system */
  --hda-muted:      #5a7470;  /* muted body copy on cream */
  --hda-muted-2:    #8a9e9a;  /* labels, timestamps */
  --hda-placeholder:#a09080;

  /* Badge / status surfaces — approved palette only
     (green + orange family + cream/warm). No purple, amber, red, grey. */
  --surf-artisan-bg:    var(--hda-green);     --surf-artisan-fg:    var(--hda-cream);
  --surf-entreprise-bg: var(--hda-orange);    --surf-entreprise-fg: var(--hda-cream);
  --surf-etudiant-bg:   var(--hda-warm);      --surf-etudiant-fg:   var(--hda-green);
  --surf-benevole-bg:   #d6eeeb;              --surf-benevole-fg:   var(--hda-green);
  --surf-admin-bg:      var(--hda-orange-dark);--surf-admin-fg:     var(--hda-cream);

  --surf-notice-bg:     #d6eeeb;              --surf-notice-fg:     var(--hda-green);
  --surf-alert-bg:      #fde8dc;              --surf-alert-fg:      var(--hda-orange);
  --surf-rejected-bg:   var(--hda-orange-dark);--surf-rejected-fg:  var(--hda-cream);

  /* Typography families */
  --font-heading: 'Byrd', Georgia, serif;
  --font-body:    'Roboto', ui-sans-serif, system-ui, sans-serif;

  /* Type scale — H1–H6 per charte (Byrd Bold) + paragraph (Roboto Medium) */
  --fs-h1: 3.5rem;   --lh-h1: 1.1;   /* 56 */
  --fs-h2: 2.5rem;   --lh-h2: 1.15;  /* 40 */
  --fs-h3: 1.75rem;  --lh-h3: 1.25;  /* 28 */
  --fs-h4: 1.375rem; --lh-h4: 1.3;   /* 22 */
  --fs-h5: 1.125rem; --lh-h5: 1.4;   /* 18 */
  --fs-h6: 0.9375rem;--lh-h6: 1.45;  /* 15 */
  --fs-body: 1rem;   --lh-body: 1.7;
  --fs-small:0.875rem;
  --fs-micro:0.75rem;

  /* Spacing scale — tailwind rhythm */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem;

  /* Radii — only two values. sm (2px) for every surface, full for avatars. */
  --radius-sm:   2px;
  --radius:      2px;
  --radius-full: 9999px;

  /* Shadows — tinted with the brand green (not neutral) */
  --shadow-sm: 0 1px 3px rgba(0,89,79,0.06);
  --shadow:    0 2px 6px rgba(0,89,79,0.08);
  --shadow-md: 0 2px 8px rgba(0,89,79,0.10);
  --shadow-lg: 0 4px 12px rgba(0,89,79,0.10);

  /* Layout */
  --content-max: 1200px;

  /* Focus ring (orange, 15% alpha) */
  --ring-orange: 0 0 0 2px rgba(185,71,0,0.15);
}

/* ── Semantic defaults ──────────────────────────── */
html { font-size: 16px; }
body {
  font-family: var(--font-body);
  font-weight: 500;                    /* Paragraphe = Roboto Medium per charte */
  background-color: var(--hda-cream);
  color: var(--hda-green);             /* NEVER pure black — text is green */
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;                    /* Byrd Bold per charte */
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
}

/* Charte rule: H1 + H2 → orange, H3–H6 → green */
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--hda-orange); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--hda-orange); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--hda-green); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--hda-green); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--hda-green); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); color: var(--hda-green);
     text-transform: uppercase; letter-spacing: 0.06em; }

p  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--hda-green); margin: 0; }
small { font-size: var(--fs-small); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

a { color: var(--hda-orange); text-decoration: none; transition: opacity .2s; }
a:hover { text-decoration: underline; }

::selection { background: var(--hda-orange); color: var(--hda-cream); }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ── Carte hoverable (remplace onmouseover inline) ── */
.card-hover {
  border: 1px solid var(--hda-border);
  border-radius: var(--radius);
  background: var(--hda-cream);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .2s;
}
.card-hover:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--hda-green);
}
.card-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
  text-decoration: none;
}

/* ── Bouton outline orange (shadow offset) ── */
.btn-orange {
  background: var(--hda-cream);
  color: var(--hda-orange);
  border: 1px solid var(--hda-orange);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0px 0px var(--hda-orange);
  padding: 8px 16px;
  font-family: var(--font-heading);
  font-weight: 400;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  line-height: 1.5;
  transition: all 0.1s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-orange:hover {
  box-shadow: none;
  transform: translate(2px, 2px);
  text-decoration: none;
}

/* ── Typographie utilitaires ────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6875rem;
  color: var(--hda-muted-2);
  margin: 0;
}
.lead {
  color: var(--hda-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}
.micro {
  font-size: var(--fs-micro);
  line-height: 1.4;
}
.muted-2 { color: var(--hda-muted-2); }

/* ── Retour ────────────────────────────────────────────────────────────── */
.back-link-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1rem 1.5rem 0;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--hda-muted);
  text-decoration: none;
  transition: color .15s;
}
.back-link:hover { color: var(--hda-orange); text-decoration: none; }

/* ── Page hero ──────────────────────────────────────────────────────────── */
.page-hero {
  background: var(--hda-warm);
  border-bottom: 1px solid var(--hda-border);
  padding: 2rem 0 1.75rem;
  position: relative;
  overflow: hidden;
}
.page-hero-tight { padding: 1.5rem 0; }
.page-hero-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
.page-hero h1 { color: var(--hda-orange); margin-bottom: 0.5rem; }
.page-hero .lead { max-width: 640px; }
.mono-bg {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  opacity: 0.07;
  pointer-events: none;
}

/* ── Section title ──────────────────────────────────────────────────────── */
.section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--hda-green);
  font-size: var(--fs-h3);
  margin: 0 0 1.25rem;
}

/* ── Profile edit layout ────────────────────────────────────────────────── */
.profile-edit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.profile-edit-status { text-align: right; }
.profile-edit-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  max-width: var(--content-max);
  margin: 1.5rem auto 0;
  padding: 0 1.5rem 3rem;
}
.profile-edit-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  position: sticky;
  top: 80px;
  align-self: flex-start;
}
.pe-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hda-muted);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  width: 100%;
}
.pe-nav-item:hover { color: var(--hda-green); background: var(--hda-warm); }
.pe-nav-item.is-active {
  background: var(--hda-green);
  color: var(--hda-cream);
  border-color: var(--hda-green);
}
.pe-nav-foot {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hda-border);
}
.profile-edit-main { min-width: 0; }
.profile-edit-foot {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hda-border);
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── Champs de formulaire ────────────────────────────────────────────────── */
.field-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hda-green);
  margin-bottom: 0.375rem;
  font-family: var(--font-body);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.field-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--hda-green);
}
.field-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--hda-green);
  flex-shrink: 0;
}
.field-help {
  display: block;
  font-size: 0.75rem;
  color: var(--hda-muted-2);
  margin-top: 0.25rem;
}

/* ── Système de boutons (design handoff) ────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
  text-decoration: none;
  line-height: 1.2;
}
.btn.sm { padding: 0.45rem 1rem; font-size: 0.8125rem; }
.btn.btn-orange { background: var(--hda-orange); color: var(--hda-cream); }
.btn.btn-orange:hover { background: var(--hda-orange-dark); color: var(--hda-cream); text-decoration: none; }
.btn.btn-outline {
  background: transparent;
  color: var(--hda-green);
  border: 2px solid var(--hda-green);
  padding: calc(0.7rem - 2px) calc(1.5rem - 2px);
}
.btn.btn-outline.sm { padding: calc(0.45rem - 2px) calc(1rem - 2px); }
.btn.btn-outline:hover { background: var(--hda-green); color: var(--hda-cream); text-decoration: none; }
.btn.btn-ghost { background: transparent; color: var(--hda-green); }
.btn.btn-ghost:hover { background: var(--hda-warm); text-decoration: none; }

/* ── Barre de progression ────────────────────────────────────────────────── */
.progress {
  height: 6px;
  background: rgba(0,89,79,0.12);
  border-radius: 9999px;
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--hda-green);
  border-radius: 9999px;
  transition: width .3s;
}
.progress.orange > span { background: var(--hda-orange); }

/* ── Avatar edit row ─────────────────────────────────────────────────────── */
.avatar-edit-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--hda-border);
}
.profile-hero-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--hda-cream);
  flex-shrink: 0;
}

/* ── Préférences (switch) ────────────────────────────────────────────────── */
.prefs-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hda-border);
  margin-bottom: 1rem;
}
.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--hda-border);
  font-size: 0.9375rem;
  color: var(--hda-green);
  gap: 1rem;
}
.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  background: var(--hda-input);
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
  border: 0;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--hda-cream);
  border-radius: 9999px;
  transition: transform .2s;
}
.switch:checked { background: var(--hda-green); }
.switch:checked::after { transform: translateX(16px); }

/* ── Saved indicator ─────────────────────────────────────────────────────── */
.saved-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--hda-muted);
  font-size: 0.8125rem;
}

/* ── Responsive profile edit ─────────────────────────────────────────────── */
@media (max-width: 800px) {
  .profile-edit-grid { grid-template-columns: 1fr; gap: 1rem; }
  .profile-edit-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hda-border);
  }
  .pe-nav-item { flex-shrink: 0; width: auto; }
  .pe-nav-foot { display: none; }
  .profile-edit-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .profile-edit-status { text-align: left; }
}
@media (max-width: 600px) {
  .field-row { grid-template-columns: 1fr; }
  .profile-edit-foot { flex-direction: column; align-items: stretch; }
  .saved-indicator { display: none; }
}

/* ── Bouton outline vert (shadow offset) ── */
.btn-green {
  background: var(--hda-cream);
  color: var(--hda-green);
  border: 1px solid var(--hda-green);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0px 0px var(--hda-green);
  padding: 8px 16px;
  font-family: var(--font-heading);
  font-weight: 400;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  line-height: 1.5;
  transition: all 0.1s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-green:hover {
  box-shadow: none;
  transform: translate(2px, 2px);
  text-decoration: none;
}