/* Brief / contact, piste C. Préfixe .br pour ne rien hériter de site.css (page Freelance pas encore refaite). */

.br { background-color: var(--bg); color: var(--fg); border-top: 1px solid var(--line); font: 16px/1.5 var(--f-sans); }
.br *, .br *::before, .br *::after { box-sizing: border-box; }
.br a { color: var(--fg); }
.br a:hover { color: var(--acc); }
.br-in { padding-block: 72px 88px; }
.br-k { margin: 0 0 8px; font-size: 13px; color: var(--acc); }
.br-title { margin: 0; font: 400 80px/1 var(--f-serif); color: var(--fg); letter-spacing: 0; }
.br-lead { margin: 12px 0 0; font-size: 18px; color: var(--fg2); }

.br-grid { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.br-main { flex: 999 1 600px; min-width: 0; overflow-x: clip; overflow-clip-margin: 8px; } /* le glissement des étapes ne doit pas élargir la page */

/* Étapes */
.br-steps { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.br-steps[hidden] { display: none; }
.br-steps li { display: flex; flex-direction: column; padding-top: 10px; border-top: 3px solid var(--line2); color: var(--mut); font-size: 15px; }
.br-steps li .c-mono { font-size: 12px; }
.br-steps li.is-done { border-top-color: var(--acc); }
.br-steps li[aria-current] { border-top-color: var(--acc); color: var(--fg); }

.br-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.br-alert { margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--err); border-radius: 8px; color: var(--err); }

.br-panel { border: 0; margin: 0 0 40px; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.js .br-form.is-steps .br-panel { margin-bottom: 0; }
.js .br-form.is-steps .br-panel:not(.is-active) { display: none; }
.br-panel.is-active { animation: br-slide .25s var(--ease-c) both; }
.br-panel.is-back { animation-name: br-slide-back; }
@keyframes br-slide { from { transform: translateX(24px); opacity: 0; } }
@keyframes br-slide-back { from { transform: translateX(-24px); opacity: 0; } }
.br-legend { padding: 0; margin-bottom: 16px; font: 400 40px/1.1 var(--f-serif); color: var(--fg); }
.br-legend:focus { outline: none; }
.br-legend:focus-visible { outline: 2px solid #E8B04A; outline-offset: 4px; }
.br-opt { font: 14px var(--f-sans); color: var(--mut); }

.br-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.br-choice {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px;
  border: 2px solid var(--bd); border-radius: 8px; background: var(--bg); color: var(--fg); cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.br-choice input { width: 20px; height: 20px; margin: 0; accent-color: #E8B04A; flex: none; }
.br-choice:has(input:checked) { border-color: var(--acc); background: var(--fg); color: var(--bg); }
.br-choice:has(input:focus-visible) { outline: 2px solid #E8B04A; outline-offset: 3px; }
.br-choice input:focus-visible { outline: none; }
.br-note { margin: 0; font-size: 14px; color: var(--mut); }

.br-field { display: flex; flex-direction: column; gap: 6px; }
.br-field > label { color: var(--fg); }
.br-input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--bd); border-radius: 6px; background: var(--bg); color: var(--fg); font: 16px var(--f-sans);
}
textarea.br-input { resize: vertical; }
.br-input:focus { border-color: #E8B04A; outline: none; box-shadow: 0 0 0 1px #E8B04A; }
.br-input[aria-invalid="true"] { border-color: var(--err); }
.br-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--fg2); cursor: pointer; }
.br-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #E8B04A; flex: none; }
.br-error { margin: 0; font-size: 15px; color: var(--err); }
.br-error:empty { display: none; }

.br-nav { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.br-nav .c-btn { min-height: 48px; padding-inline: 24px; background-color: var(--bg); }
.br-nav .c-btn[hidden] { display: none; }
.br .br-submit, .br .br-submit:hover { background: #E8B04A; color: #0F1013; margin-left: auto; }
.br-submit[aria-busy="true"] { opacity: .7; cursor: progress; }

.br-done { padding: 36px; border: 1px solid #E8B04A; border-radius: 10px; background: var(--bg); display: flex; flex-direction: column; gap: 14px; animation: br-slide .25s var(--ease-c) both; }
.br-done[hidden] { display: none; }
.br-done:focus { outline: none; }
.br-done p { margin: 0; color: var(--fg2); }
.br-done .br-k { color: var(--acc); }
.br .br-done-t { font: 400 48px/1 var(--f-serif); color: var(--fg); }
.br-done a { align-self: flex-start; }

/* Carte N° 029 */
.br-aside { flex: 1 1 340px; max-width: 400px; perspective: 1400px; position: sticky; top: 110px; }
.br-flipper { position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.br-flipper.is-sent { transform: rotateY(180deg); }
.br-face { backface-visibility: hidden; border: 8px solid #E8B04A; border-radius: 16px; }
.br-front {
  min-height: 500px; padding: 16px; display: flex; flex-direction: column; gap: 12px;
  background: var(--card); color: #0F1013; transform: rotate(2deg); box-shadow: 0 30px 60px var(--sh);
}
.br-card-top { display: flex; justify-content: space-between; font-size: 11px; color: #3A3830; }
.br-card-pic { display: block; height: 150px; border-radius: 8px; background: repeating-linear-gradient(135deg, #DDD8CE 0 8px, #E5E1D8 8px 16px); }
.br-card-t { margin: 0; font: 400 36px/1 var(--f-serif); overflow-wrap: anywhere; }
.br-card-t.is-chip { animation: br-chip .3s ease-out both; }
@keyframes br-chip { from { transform: scale(1.4) rotate(-6deg); opacity: 0; } }
.br-card-co { margin: 0; font-size: 14px; color: #3A3830; overflow-wrap: anywhere; }
.br-card-dl { margin: auto 0 0; padding-top: 10px; border-top: 1px solid #C9C4B9; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.br-card-dl dt { font-size: 11px; color: #3A3830; }
.br-card-dl dd { margin: 0; overflow-wrap: anywhere; }
.br-verso {
  position: absolute; inset: 0; padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; text-align: center;
  background: var(--ph2); color: var(--fg); transform: rotateY(180deg) rotate(-2deg);
}
.br-verso p { margin: 0; color: var(--fg2); }
.br-verso .br-k { color: var(--acc); }
.br-verso-t { font: 400 44px/1 var(--f-serif); color: var(--fg) !important; }

@media (max-width: 1023px) {
  .br-in { padding-block: 40px 56px; }
  .br-title { font-size: 48px; }
  .br-lead { font-size: 16px; }
  .br-grid { margin-top: 24px; gap: 32px; flex-direction: column-reverse; align-items: stretch; }
  .br-main { flex: none; }
  .br-aside { position: static; max-width: none; flex: none; }
  .br-front { min-height: 0; padding: 12px; border-width: 6px; gap: 8px; transform: rotate(-1deg); }
  .br-card-pic { display: none; }
  .br-card-t { font-size: 28px; }
  .br-legend { font-size: 30px; }
  .br-steps li { font-size: 13px; }
  .br-steps li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .br .br-done-t { font-size: 34px; }
  .br-done { padding: 24px; }
}