/* mARTketing · FAQ board partagé (post-it interactifs)
   Usage :
     <link rel="stylesheet" href="/assets/faq-board.css">
     <section class="faq-board">
       <div class="faq-board-head">
         <div>
           <span class="eyebrow">Questions fréquentes</span>
           <h2>ce qu'on nous<br>demande <span class="hi">souvent</span>.</h2>
         </div>
       </div>
       <div data-faq-board>
         <details data-hi="97 €/mois">
           <summary>Combien coûte GoHighLevel après l'essai ?</summary>
           <div>Après les 30 jours, le tarif est de 97 €/mois...</div>
         </details>
         ...
       </div>
     </section>
     <script src="/assets/faq-board.js" defer></script>
   --------------------------------------------------------------- */

/* Vars avec fallbacks (au cas où la page parent n'a pas le design system) */
.faq-board {
  --fb-fluo: var(--fluo, #ecff00);
  --fb-blue: var(--blue, #1747a6);
  --fb-ink: var(--ink, #0a0a0a);
  --fb-fd: var(--fd, 'DM Sans', system-ui, sans-serif);
  --fb-fm: var(--fm, 'Caveat', cursive);
  --fb-fb: var(--fb, 'Inter', system-ui, sans-serif);
  --fb-fo: var(--fo, 'JetBrains Mono', ui-monospace, monospace);
  padding: 140px 12px;
}

.faq-board-frame {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px;
  background: linear-gradient(135deg, #a4742f 0%, #8a5c22 30%, #9a6a2c 55%, #6f471a 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 235, 190, 0.35),
    inset 0 -3px 6px rgba(40, 20, 0, 0.45),
    0 22px 50px -18px rgba(0, 0, 0, 0.4);
  border-radius: 3px;
}

.faq-board-paper {
  background-color: #faf7f0;
  background-image:
    radial-gradient(ellipse at center, transparent 55%, rgba(120, 80, 20, 0.08) 100%),
    linear-gradient(#ecd9d6 1px, transparent 1px),
    linear-gradient(90deg, #ecd9d6 1px, transparent 1px),
    linear-gradient(#c9d4e6 1px, transparent 1px),
    linear-gradient(90deg, #c9d4e6 1px, transparent 1px);
  background-size: 100% 100%, 14px 14px, 14px 14px, 70px 70px, 70px 70px;
  box-shadow: inset 0 0 40px rgba(120, 80, 20, 0.10);
  padding: 80px 64px 96px;
}

.faq-board-head {
  display: flex;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 64px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.faq-board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 36px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}

.faq-note {
  position: relative;
  perspective: 1200px;
  cursor: pointer;
  height: 350px;
  transform-origin: 50% 0;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.3, 1);
}
@keyframes faq-board-swing {
  0%   { transform: rotate(var(--rot, 0deg)); }
  45%  { transform: rotate(calc(var(--rot, 0deg) * -0.4)); }
  75%  { transform: rotate(calc(var(--rot, 0deg) * 0.15)); }
  100% { transform: rotate(0deg); }
}
.faq-note:hover { animation: faq-board-swing 0.7s cubic-bezier(0.35, 0.6, 0.35, 1) forwards; }
@keyframes faq-board-swingback {
  0%   { transform: rotate(0deg); }
  28%  { transform: rotate(calc(var(--rot, 0deg) * 1.7)); }
  52%  { transform: rotate(calc(var(--rot, 0deg) * 0.45)); }
  72%  { transform: rotate(calc(var(--rot, 0deg) * 1.3)); }
  87%  { transform: rotate(calc(var(--rot, 0deg) * 0.85)); }
  96%  { transform: rotate(calc(var(--rot, 0deg) * 1.06)); }
  100% { transform: rotate(var(--rot, 0deg)); }
}
.faq-note.faq-swingback { animation: faq-board-swingback 1.1s ease-in-out forwards; }

.faq-note-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.faq-note.flip .faq-note-inner { transform: rotateY(180deg); }

.faq-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--bg, #fbf6d9);
  box-shadow:
    7px 22px 26px -14px rgba(60, 40, 10, 0.4),
    2px 5px 10px rgba(60, 40, 10, 0.1);
  padding: 48px 26px 18px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.28s;
}
.faq-note:hover .faq-face {
  box-shadow:
    10px 30px 34px -14px rgba(60, 40, 10, 0.45),
    2px 8px 12px rgba(60, 40, 10, 0.12);
}
.faq-face-back { transform: rotateY(180deg); }

.faq-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  background: var(--strip, #ece0ae);
}

.faq-pin {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2f2f0 0%, #b9b9b4 38%, #6e6e68 75%, #4a4a44 100%);
  box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
}
.faq-pin.red {
  background: radial-gradient(circle at 35% 30%, #ffb3a6 0%, #e0492f 45%, #8e2210 100%);
}

.faq-q {
  flex: 1;
  display: flex;
  align-items: center;
  font: 700 28px/1.1 var(--fb-fm);
  color: #1d1d1a;
}

.faq-a {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  font: 400 13px/1.55 var(--fb-fb);
  color: #2e2e28;
}
.faq-a .hi {
  display: inline-block;
  padding: 0 0.08em;
  background: linear-gradient(102deg, transparent 0%, var(--fb-fluo) 3%, var(--fb-fluo) 97%, transparent 100%);
  background-size: 100% 78%;
  background-repeat: no-repeat;
  background-position: center 60%;
}

.faq-hint {
  font-family: var(--fb-fo);
  font-size: 9px;
  color: rgba(40, 40, 30, 0.45);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: right;
}

/* CTA card (last note) */
.faq-note-cta { --rot: -2.2deg; }
.faq-note-cta .faq-face {
  background: var(--fb-fluo);
}
.faq-note-cta .faq-cta-title {
  font: 700 34px/1.02 var(--fb-fm);
  color: var(--fb-ink);
}
.faq-note-cta .faq-cta-text {
  font: 400 14px/1.55 var(--fb-fb);
  color: var(--fb-ink);
  margin: 14px 0 0;
}
.faq-note-cta .faq-cta-row {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.faq-note-cta .faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font: 500 13px/1 var(--fb-fb);
  background: var(--fb-ink);
  color: #fff;
  text-decoration: none;
  border: 1.5px solid var(--fb-ink);
  box-shadow: 4px 4px 0 var(--fb-ink);
}

/* Hidden details (fallback markup for no-JS / SEO) */
[data-faq-board] > details {
  display: none;
}
[data-faq-board].no-js > details {
  display: block;
  margin-bottom: 12px;
  padding: 16px 20px;
  border: 1px solid #ccc;
  background: #faf7f0;
}
[data-faq-board].no-js > details summary {
  cursor: pointer;
  font-weight: 700;
}

/* Hand annotation */
.faq-board-hand {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 10px;
  transform: rotate(-3deg);
}
.faq-board-hand .hand {
  font-family: var(--fb-fm);
  font-weight: 700;
  color: var(--fb-blue);
  line-height: 1.1;
  font-size: 24px;
  max-width: 190px;
}

@media (max-width: 760px) {
  .faq-board { padding: 60px 12px; }
  .faq-board-frame { padding: 10px; }
  .faq-board-paper { padding: 40px 18px 48px; }
  .faq-board-grid { grid-template-columns: 1fr; gap: 22px; }
  .faq-note { height: 210px; }
  .faq-note.flip { height: 290px; }
  .faq-note {
    transition:
      transform 0.45s cubic-bezier(0.3, 0.7, 0.3, 1),
      height 0.4s cubic-bezier(0.3, 0.7, 0.3, 1);
  }
  .faq-q { font-size: 23px; }
  .faq-a { font-size: 12px; }
  .faq-face { padding: 36px 22px 14px; }
  .faq-board-head { margin-bottom: 36px; }
  .faq-board-hand { display: none; }
}