.form-honey {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.faq-question[role="button"] {
  cursor: pointer;
}

.faq-question[role="button"]:focus-visible {
  outline: 2px solid var(--dop-primary, #dd4b95);
  outline-offset: 4px;
}

/* ── Author Byline ──────────────────────────────────────── */
.author-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.author-byline__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--dop-primary-soft, rgba(221,75,149,.15));
  color: var(--dop-primary, #dd4b95);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  font-family: var(--dop-font-display, 'Nunito', sans-serif);
}

.author-byline__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--dop-text, #f5eef3);
  line-height: 1.2;
}

.author-byline__dates {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--dop-text-muted, #8a8597);
  margin-top: 1px;
  flex-wrap: wrap;
}

/* ── Author Bio Card ─────────────────────────────────────── */
.author-bio {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  background: var(--dop-card, #181c28);
  border: 1px solid var(--dop-border-soft, rgba(255,255,255,.06));
  border-radius: var(--dop-radius-lg, 18px);
  margin-top: 40px;
}

.author-bio__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--dop-primary-soft, rgba(221,75,149,.15));
  color: var(--dop-primary, #dd4b95);
  font-size: 15px;
  font-weight: 800;
  font-family: var(--dop-font-display, 'Nunito', sans-serif);
}

.author-bio__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dop-primary, #dd4b95);
  margin-bottom: 3px;
}

.author-bio__name {
  font-size: 16px;
  font-weight: 800;
  color: var(--dop-text, #f5eef3);
  font-family: var(--dop-font-display, 'Nunito', sans-serif);
}

.author-bio__role {
  font-size: 12px;
  color: var(--dop-text-muted, #8a8597);
  margin: 2px 0 10px;
}

.author-bio__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--dop-text-muted, #8a8597);
  margin: 0 0 10px;
}

.author-bio__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--dop-primary, #dd4b95);
  text-decoration: none;
}

.author-bio__link:hover { text-decoration: underline; }

@media (max-width: 580px) {
  .author-bio { flex-direction: column; }
}

/* --- STORE BUTTONS --- */
.btn-store {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--dop-card-2); color: var(--dop-text);
  border: 1px solid var(--dop-border-strong);
  padding: 11px 18px; border-radius: var(--dop-radius-md);
  transition: border-color var(--dop-dur), background var(--dop-dur), transform var(--dop-dur);
}
.btn-store:hover { border-color: rgba(221,75,149,0.55); background: rgba(221,75,149,0.10); transform: translateY(-1px); }
.btn-store svg { width: 24px; height: 24px; flex-shrink: 0; }
.btn-store .s-small { font-family: var(--dop-font-body); font-size: 12px; color: var(--dop-text-muted); line-height: 1; display: block; }
.btn-store .s-big { font-family: var(--dop-font-display); font-weight: 800; font-size: 15px; line-height: 1.2; }
.store-buttons { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.store-buttons--center { justify-content: center; }
@media (max-width: 560px) {
  .store-buttons { gap: 10px; }
  .store-buttons .btn-store { flex: 1 1 auto; justify-content: center; }
}

/* --- DISCORD CTA ---
   Meme gabarit que .btn-store, mais il est seul a porter l'action
   principale: l'accent rose est donc permanent, pas seulement au survol. */
.btn-discord {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(221,75,149,0.12); color: var(--dop-text);
  border: 1px solid rgba(221,75,149,0.55);
  padding: 11px 18px; border-radius: var(--dop-radius-md);
  transition: border-color var(--dop-dur), background var(--dop-dur), transform var(--dop-dur);
}
.btn-discord:hover { border-color: rgba(221,75,149,0.9); background: rgba(221,75,149,0.2); transform: translateY(-1px); }
.btn-discord svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--dop-primary); }
.btn-discord .s-small { font-family: var(--dop-font-body); font-size: 12px; color: var(--dop-text-muted); line-height: 1; display: block; }
.btn-discord .s-big { font-family: var(--dop-font-display); font-weight: 800; font-size: 15px; line-height: 1.2; }
.discord-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.discord-cta--center { justify-content: center; }
.discord-cta-note {
  flex: 1 1 100%; margin: 0;
  font-size: 13px; line-height: 1.6; color: var(--dop-text-muted);
}
.discord-cta-note a { color: var(--dop-primary); font-weight: 700; }
.discord-cta--center .discord-cta-note { text-align: center; }
@media (max-width: 560px) {
  .discord-cta .btn-discord { flex: 1 1 auto; justify-content: center; }
}

/* Variante du hero: le bouton grossit et un duo d'avatars s'assoit sur
   son bord superieur. La marge haute laisse la place a leurs tetes. */
.discord-cta--big { margin-top: 84px; }
.discord-cta--big .btn-discord {
  position: relative;
  gap: 16px;
  min-height: 88px;
  padding: 22px 186px 22px 28px;
  border-radius: var(--dop-radius-lg, 18px);
}
.discord-cta--big .btn-discord svg { width: 38px; height: 38px; }
.discord-cta--big .btn-discord .s-small { font-size: 13px; margin-bottom: 4px; }
.discord-cta--big .btn-discord .s-big { font-size: 26px; letter-spacing: -0.02em; }
.btn-discord-duo {
  position: absolute;
  right: 14px;
  bottom: 8px;
  width: 160px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45));
}
@media (max-width: 560px) {
  .discord-cta--big { margin-top: 72px; }
  .discord-cta--big .btn-discord {
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    padding: 18px 118px 18px 18px;
  }
  .discord-cta--big .btn-discord svg { width: 30px; height: 30px; }
  .discord-cta--big .btn-discord .s-big { font-size: 20px; }
  .btn-discord-duo { width: 112px; right: 6px; }
}

/* =============================================================
   BLOCS DE PAGE (pg-*)
   Vocabulaire commun a toutes les pages hors home: meme grammaire que
   la home (des filets et du blanc, pas de cartes), pour qu'une page de
   contenu ait l'air d'appartenir au meme site. Chargee globalement.
   ============================================================= */

/* ---------- Motif de section: eyebrow -> titre -> corps ---------- */
.eyebrow {
  font-family: var(--dop-font-body);
  font-weight: 700;
  font-size: var(--dop-fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--dop-tracking-eyebrow);
  color: var(--dop-ink-3);
  margin-bottom: 18px;
}

.grad { color: var(--dop-primary); }

/* ---------- En-tete de page ---------- */
.pg-hero { padding: clamp(48px, 6vw, 84px) 0; border-bottom: 1px solid var(--dop-rule); }

.pg-hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 440px);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
}

.pg-hero h1 {
  font-size: var(--dop-fs-hero);
  font-weight: 800;
  line-height: var(--dop-lh-tight);
  letter-spacing: var(--dop-tracking-hero);
  max-width: 20ch;
}

/* Le souligne trace a la main, comme sur la home: un seul par page. */
.pg-hero h1 .grad { position: relative; display: inline-block; }

.pg-hero h1 .grad::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: .06em;
  height: .085em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C58 4.2 132 3.1 297 6.4' stroke='%23dd4b95' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.pg-hero .lead {
  margin-top: 22px;
  max-width: 56ch;
  color: var(--dop-ink-2);
  font-size: var(--dop-fs-lead);
  line-height: var(--dop-lh-normal);
}

.pg-hero .discord-cta { margin-top: 30px; }

/* ---------- Sections ---------- */
.pg-section { border-top: 1px solid var(--dop-rule); }
.pg-section:first-of-type { border-top: 0; }

.pg-head { max-width: 820px; margin: 0 0 clamp(36px, 4vw, 60px); }

.pg-head h2 {
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 800;
  line-height: var(--dop-lh-snug);
  letter-spacing: var(--dop-tracking-section);
}

.pg-head p {
  margin: 20px 0 0;
  max-width: 660px;
  color: var(--dop-ink-2);
  font-size: var(--dop-fs-lead);
  line-height: var(--dop-lh-normal);
}

/* Texte d'un cote, visuel de l'autre. */
.pg-split {
  display: grid;
  grid-template-columns: 1fr minmax(0, 440px);
  align-items: center;
  gap: clamp(36px, 5vw, 88px);
}

.pg-split--rev { grid-template-columns: minmax(0, 440px) 1fr; }

.pg-copy h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: var(--dop-tracking-section);
  line-height: var(--dop-lh-snug);
}

.pg-copy h3 {
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: var(--dop-tracking-tight);
}

.pg-copy p {
  margin-top: 18px;
  max-width: 56ch;
  color: var(--dop-ink-2);
  font-size: var(--dop-fs-body-lg);
  line-height: var(--dop-lh-normal);
}

.pg-copy .btn,
.pg-copy .discord-cta { margin-top: 26px; }

/* Annotation manuscrite: une par section au maximum. */
.hand {
  font-family: var(--dop-font-hand);
  font-weight: 700;
  font-size: var(--dop-fs-hand);
  line-height: 1.2;
  color: var(--dop-primary);
  margin-top: 20px;
}

/* ---------- Listes filetees (le registre de la home) ---------- */
.pg-list { list-style: none; margin: 0; padding: 0; }
.pg-list li { padding: 22px 0; border-top: 1px solid var(--dop-rule); }
.pg-list li:last-child { border-bottom: 1px solid var(--dop-rule); }

.pg-list b,
.pg-list > li > strong {
  display: block;
  font-family: var(--dop-font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: var(--dop-tracking-tight);
}

.pg-list span,
.pg-list p {
  display: block;
  margin: 8px 0 0;
  color: var(--dop-ink-2);
  font-size: 15px;
  line-height: 1.65;
}

/* Deux ou trois colonnes de listes filetees. */
.pg-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
}

/* ---------- Etapes numerotees ---------- */
.pg-steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin: 0;
  padding: 0;
}

.pg-steps li {
  counter-increment: step;
  padding-top: 20px;
  border-top: 1px solid var(--dop-rule);
}

.pg-steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 14px;
  font-family: var(--dop-font-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  color: var(--dop-primary);
}

.pg-steps b,
.pg-steps > li > strong {
  display: block;
  font-family: var(--dop-font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: var(--dop-tracking-tight);
}

.pg-steps span { display: block; margin-top: 8px; color: var(--dop-ink-2); font-size: 15px; line-height: 1.65; }

/* ---------- Le resume en tete d'article ---------- */
.pg-tldr {
  max-width: 760px;
  padding: 26px 0;
  border-top: 1px solid var(--dop-rule);
  border-bottom: 1px solid var(--dop-rule);
}

.pg-tldr p { margin-top: 14px; color: var(--dop-ink-2); line-height: var(--dop-lh-normal); }

.pg-tldr p:first-of-type {
  margin-top: 0;
  color: var(--dop-ink-1);
  font-family: var(--dop-font-display);
  font-weight: 800;
  font-size: clamp(19px, 2vw, 24px);
  line-height: var(--dop-lh-snug);
  letter-spacing: var(--dop-tracking-tight);
}

/* ---------- Corps d'article ---------- */
.pg-prose { max-width: 760px; }
.pg-prose > * + * { margin-top: 22px; }

.pg-prose h2 {
  margin-top: clamp(44px, 5vw, 72px);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: var(--dop-tracking-section);
  line-height: var(--dop-lh-snug);
}

.pg-prose h3 {
  margin-top: clamp(28px, 3vw, 40px);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: var(--dop-tracking-tight);
}

.pg-prose p,
.pg-prose li { color: var(--dop-ink-2); font-size: var(--dop-fs-body-lg); line-height: var(--dop-lh-relaxed); }
.pg-prose a { color: var(--dop-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pg-prose ol { padding-left: 1.1em; display: grid; gap: 10px; }
.pg-prose ul { list-style: none; padding-left: 0; display: grid; gap: 10px; }

.pg-prose ul li { position: relative; padding-left: 22px; }

.pg-prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--dop-primary);
}

.pg-prose ol li::marker { color: var(--dop-primary); font-weight: 700; }
.pg-prose strong { color: var(--dop-ink-1); }

/* ---------- Tableau comparatif ---------- */
.pg-table-wrap { overflow-x: auto; }

.pg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dop-fs-body);
}

.pg-table th,
.pg-table td {
  padding: 18px 20px 18px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--dop-rule);
  color: var(--dop-ink-2);
  line-height: var(--dop-lh-normal);
}

.pg-table thead th {
  font-family: var(--dop-font-display);
  font-weight: 800;
  font-size: var(--dop-fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--dop-tracking-eyebrow);
  color: var(--dop-ink-3);
  border-bottom-color: var(--dop-border-strong);
}

.pg-table tbody th { color: var(--dop-ink-1); font-weight: 700; font-family: var(--dop-font-body); }

/* ---------- Fiche de caracteristiques ---------- */
.pg-facts { margin: 0; max-width: 720px; }

.pg-facts > div {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 16px 28px;
  padding: 18px 0;
  border-bottom: 1px solid var(--dop-rule);
}

.pg-facts > div:first-child { border-top: 1px solid var(--dop-rule); }
.pg-facts dt { color: var(--dop-ink-3); font-size: var(--dop-fs-sm); }
.pg-facts dd { margin: 0; color: var(--dop-ink-1); }

/* Sur telephone le libelle passe au-dessus de sa valeur: en deux colonnes,
   la valeur tombait a un mot par ligne. */
@media (max-width: 560px) {
  .pg-facts > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}

/* ---------- Questions ---------- */
.pg-faq { max-width: 780px; }

.pg-faq details { border-bottom: 1px solid var(--dop-rule); background: transparent; }

.pg-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--dop-font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: var(--dop-tracking-tight);
}

.pg-faq summary::-webkit-details-marker { display: none; }

.pg-faq summary::after {
  content: '+';
  flex-shrink: 0;
  color: var(--dop-primary);
  font-size: 22px;
  font-weight: 400;
  transition: transform var(--dop-dur);
}

.pg-faq details[open] summary::after { transform: rotate(45deg); }

.pg-faq .ans,
.pg-faq details > p {
  margin: 0;
  padding: 0 4px 24px;
  max-width: 660px;
  color: var(--dop-ink-2);
  font-size: var(--dop-fs-body);
  line-height: var(--dop-lh-relaxed);
}

/* ---------- Liens associes ---------- */
.pg-related { list-style: none; margin: 0; padding: 0; }

.pg-related li { border-top: 1px solid var(--dop-rule); }
.pg-related li:last-child { border-bottom: 1px solid var(--dop-rule); }

.pg-related a { display: grid; gap: 8px; padding: 22px 0; transition: color var(--dop-dur); }

.pg-related b {
  font-family: var(--dop-font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: var(--dop-tracking-tight);
}

.pg-related span { color: var(--dop-ink-2); font-size: 15px; line-height: 1.65; }
.pg-related a:hover b { color: var(--dop-primary); }

/* ---------- Cloture de page ---------- */
.pg-cta { border-top: 1px solid var(--dop-rule); text-align: center; }

.pg-cta h2 {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: var(--dop-tracking-section);
  line-height: var(--dop-lh-snug);
}

.pg-cta p { margin: 16px auto 0; max-width: 52ch; color: var(--dop-ink-2); font-size: var(--dop-fs-lead); }
.pg-cta .discord-cta { justify-content: center; margin-top: 30px; }

/* ---------- Visuels ---------- */
.pg-shot img {
  width: 100%;
  height: auto;
  border-radius: var(--dop-radius-2xl);
  border: 1px solid var(--dop-border-strong);
  transform: rotate(-1.4deg);
}

/* Un visuel detoure porte deja son mockup: pas de cadre, une ombre qui
   suit son alpha. */
.pg-cutout img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, .46));
}

/* Illustration d'avatars (components/illustration.njk). Les detourees
   verticales sont bornees en hauteur pour ne pas pousser le texte. */
.pg-illus { margin: 0; text-align: center; }
.pg-illus img { display: block; margin-inline: auto; }
.pg-illus.pg-cutout img { width: auto; max-width: 100%; max-height: 460px; }
/* Au-dessus d'une liste dans la colonne droite du hero. */
.pg-illus--sm { margin-bottom: 28px; }
.pg-illus--sm.pg-cutout img { max-height: 250px; }
.pg-illus--sm.pg-shot { max-width: 400px; }

@media (prefers-reduced-motion: reduce) {
  .pg-shot img { transform: none; }
}

@media (max-width: 920px) {
  .pg-illus.pg-cutout img { max-height: 320px; }
  .pg-illus--sm.pg-cutout img { max-height: 220px; }
}

@media (max-width: 920px) {
  .pg-hero-grid,
  .pg-split,
  .pg-split--rev { grid-template-columns: 1fr; }
  .pg-shot img { transform: none; }
}

/* Le lien de l'encart auteur est seul sur sa ligne: 44px de cible tactile. */
@media (max-width: 920px) {
  .author-bio__link { display: inline-block; padding: 13px 0; }
}

/* ---------- Bouton Discord sur ecran tactile ---------- */
.btn-discord { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

@media (hover: none) {
  .btn-discord:hover { border-color: rgba(221,75,149,0.55); background: rgba(221,75,149,0.12); transform: none; }
  .btn-discord:active { transform: scale(.97); }
}

/* ---------- Barre d'action mobile ----------
   Le bouton Discord, colle en bas de l'ecran, dans la zone du pouce.
   main.js l'affiche seulement quand aucun autre bouton Discord n'est
   visible, et la retire sur le pied de page et pendant une saisie. */
.cta-dock { display: none; }

@media (max-width: 920px) {
  .cta-dock {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--dop-overlay);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
    border-top: 1px solid var(--dop-rule);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .28s var(--dop-ease-out), visibility 0s linear .28s;
  }

  .cta-dock.is-visible {
    transform: none;
    visibility: visible;
    transition: transform .28s var(--dop-ease-out);
  }

  .cta-dock .discord-cta { margin: 0; }
  .cta-dock .btn-discord { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-dock,
  .cta-dock.is-visible { transition: none; }
}