/* Gyver.app, site vitrine. Identité reprise de l'app : Urbanist, encre #101114, lime #c8ee5a,
   verre dépoli devant une aurore. Deux thèmes (sombre par défaut, clair au choix ou selon le système). */

@font-face {
  font-family: "Urbanist";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/urbanist-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/sora-latin.woff2") format("woff2");
}

/* --- Jetons : thème sombre (défaut) --- */
:root {
  color-scheme: dark;
  --bg: #101114;
  --text: #f1f2ee;
  --text-soft: #d4d6cf;
  --muted: #a6a99f;
  --line: rgba(255, 255, 255, 0.11);
  --glass: rgba(255, 255, 255, 0.055);
  --glass-hover: rgba(255, 255, 255, 0.09);
  --bar-bg: rgba(24, 26, 31, 0.62);
  --menu-bg: rgba(22, 24, 29, 0.94);
  --field: rgba(255, 255, 255, 0.07);
  --field-ph: #a0a398;
  --hover: rgba(255, 255, 255, 0.07);
  --brand: #c8ee5a;
  --brand-ink: #243100;
  --accent: #c8ee5a; /* couleur des mots mis en avant : lime en sombre, vert profond en clair */
  --btn-bg: #c8ee5a;
  --btn-text: #243100;
  --us-bg: rgba(200, 238, 90, 0.09);
  --good-bg: linear-gradient(180deg, rgba(200, 238, 90, 0.1), rgba(255, 255, 255, 0.05));
  --good-line: rgba(200, 238, 90, 0.5);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 44px -26px rgba(0, 0, 0, 0.7);
  --veil: linear-gradient(180deg, rgba(16, 17, 20, 0.3), rgba(16, 17, 20, 0.12) 45%, rgba(16, 17, 20, 0.4));
  --aurora-fallback:
    radial-gradient(46rem 30rem at 12% 8%, rgba(127, 174, 40, 0.34), transparent 68%),
    radial-gradient(40rem 26rem at 92% 28%, rgba(28, 154, 102, 0.28), transparent 70%),
    radial-gradient(48rem 28rem at 50% 104%, rgba(200, 238, 90, 0.22), transparent 70%);
  --radius: 1.25rem;
  --radius-sm: 0.75rem;
  --font-ui: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Sora", "Urbanist", system-ui, sans-serif;
  --max: 72rem;
}

/* --- Thème clair --- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f8;
  --text: #101114;
  --text-soft: #3a3d46;
  --muted: #5c5f6a;
  --line: rgba(16, 17, 20, 0.12);
  --glass: rgba(255, 255, 255, 0.58);
  --glass-hover: rgba(255, 255, 255, 0.8);
  --bar-bg: rgba(255, 255, 255, 0.7);
  --menu-bg: rgba(255, 255, 255, 0.97);
  --field: rgba(255, 255, 255, 0.78);
  --field-ph: #6f727c;
  --hover: rgba(16, 17, 20, 0.06);
  --accent: #16704a;
  --btn-bg: #101114;
  --btn-text: #f4f5f0;
  --us-bg: rgba(200, 238, 90, 0.3);
  --good-bg: linear-gradient(180deg, rgba(200, 238, 90, 0.34), rgba(255, 255, 255, 0.62));
  --good-line: rgba(63, 90, 0, 0.45);
  --shadow: 0 1px 2px rgba(16, 17, 20, 0.04), 0 18px 40px -26px rgba(16, 17, 20, 0.22);
  --veil: linear-gradient(180deg, rgba(245, 245, 248, 0.16), rgba(245, 245, 248, 0.04) 50%, rgba(245, 245, 248, 0.24));
  --aurora-fallback:
    radial-gradient(46rem 30rem at 12% 8%, rgba(190, 232, 70, 0.4), transparent 68%),
    radial-gradient(40rem 26rem at 92% 28%, rgba(28, 154, 102, 0.2), transparent 70%),
    radial-gradient(48rem 28rem at 50% 104%, rgba(200, 238, 90, 0.34), transparent 70%);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- Aurore : le canvas est dessiné par aurora.js ; sans WebGL2 ou sans JS, ce dégradé la remplace. --- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--aurora-fallback), var(--bg);
}
.aurora canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.4s ease;
  /* Le flou est la moitié du verre dépoli : l'aurore reste douce, les cartes la floutent encore. */
  filter: blur(3px);
}
.aurora canvas.on {
  opacity: 0.8;
}
:root[data-theme="light"] .aurora canvas.on {
  opacity: 0.85;
}
/* Voile léger pour garder le texte net. */
.aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--veil);
}

a {
  color: inherit;
}
img,
svg {
  max-width: 100%;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 48rem) {
  .wrap {
    padding: 0 2rem;
  }
}

.skip {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  z-index: 100;
}
.skip:focus {
  left: 0.5rem;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Verre dépoli --- */
.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--bg);
  }
}

/* --- En-tête : barre de verre, menus déroulants par rubrique, bouton d'inscription toujours visible --- */
.site-header {
  position: sticky;
  top: 0.75rem;
  z-index: 50;
  padding: 0 1rem;
  margin-top: 0.75rem;
}
.site-header .bar {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.55rem 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--bar-bg);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  font-family: var(--font-brand);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: 1.15rem;
  color: var(--text);
  flex: none;
}
.logo svg {
  width: 1.75rem;
  height: 1.9rem;
  flex: none;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.logo:hover svg {
  transform: rotate(-10deg);
}
.logo .sfx {
  font-weight: 500;
  color: var(--muted);
}

.nav {
  display: none;
  align-items: center;
  gap: 0.15rem;
  margin: 0 auto 0 1rem;
}
.dd {
  position: relative;
}
.dd-btn {
  font: inherit;
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--text-soft);
  background: none;
  border: 0;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.dd-btn:hover,
.dd.open .dd-btn {
  color: var(--text);
  background: var(--hover);
}
.dd-btn svg {
  width: 0.7rem;
  height: 0.7rem;
  transition: transform 0.2s ease;
}
.dd.open .dd-btn svg {
  transform: rotate(180deg);
}
.dd-panel {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 0;
  min-width: 24rem;
  padding: 0.6rem;
  display: none;
  gap: 0.15rem;
  border-radius: var(--radius);
  background: var(--menu-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.dd.open .dd-panel,
html:not(.js) .dd:hover .dd-panel,
html:not(.js) .dd:focus-within .dd-panel {
  display: grid;
}
/* Pont invisible : la souris peut passer du bouton au panneau sans que celui-ci se ferme. */
.dd-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1rem;
  height: 1rem;
}
.dd-item {
  display: block;
  text-decoration: none;
  padding: 0.7rem 0.9rem;
  border-radius: 0.8rem;
}
.dd-item:hover,
.dd-item:focus-visible {
  background: var(--hover);
}
.dd-item strong {
  display: block;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text);
}
.dd-item span {
  display: block;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 0.1rem;
}

.actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.icon-btn {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex: none;
}
.icon-btn:hover {
  background: var(--hover);
}
.icon-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}
.theme-toggle .sun {
  display: none;
}
:root[data-theme="light"] .theme-toggle .sun {
  display: block;
}
:root[data-theme="light"] .theme-toggle .moon {
  display: none;
}
.actions .btn .short {
  display: none;
}
@media (max-width: 30rem) {
  .actions .btn .long {
    display: none;
  }
  .actions .btn .short {
    display: inline;
  }
  .site-header .bar {
    padding-left: 0.9rem;
  }
  .logo .sfx {
    display: none;
  }
}

@media (min-width: 62rem) {
  .nav {
    display: flex;
  }
  .burger-btn,
  .sheet {
    display: none !important;
  }
}

/* Menu mobile : une feuille sous la barre, groupes de liens, bouton d'inscription en bas. */
.sheet {
  max-width: var(--max);
  margin: 0.5rem auto 0;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding: 0.6rem;
  border-radius: var(--radius);
  background: var(--menu-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.sheet[hidden] {
  display: none;
}
.sheet .grp {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0.9rem 0.9rem 0.3rem;
}
.sheet a.dd-item {
  padding: 0.6rem 0.9rem;
}
.sheet .btn {
  display: flex;
  margin: 0.8rem 0.3rem 0.3rem;
}

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-text);
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -10px rgba(120, 160, 20, 0.7);
}
.btn.ghost {
  background: var(--hover);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn.ghost:hover {
  box-shadow: none;
}
.btn.small {
  padding: 0.55rem 1.05rem;
  font-size: 0.92rem;
}

/* --- Typographie --- */
h1,
h2,
h3 {
  font-family: var(--font-ui);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
}
h1 {
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  font-weight: 300;
}
h1 strong,
h2 strong {
  font-weight: 700;
  color: var(--accent);
}
h2 {
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  font-weight: 300;
}
h3 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
p {
  margin: 0 0 1rem;
}
.lead {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--text-soft);
  max-width: 44rem;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 1px;
  background: var(--accent);
}
.muted {
  color: var(--muted);
}

section {
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.hero {
  padding-top: clamp(3rem, 9vw, 7rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.hero h1 {
  max-width: 17ch;
  margin-bottom: 1.4rem;
}
.hero.page h1 {
  max-width: 24ch;
  font-size: clamp(2.1rem, 5.2vw, 3.8rem);
}
.sec-head {
  max-width: 46rem;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.sec-head p {
  color: var(--text-soft);
  margin-top: 1rem;
}

/* --- Liste d'attente --- */
.wl {
  margin-top: 2rem;
  max-width: 34rem;
}
.wl form {
  display: grid;
  gap: 0.8rem;
}
.wl .row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
@media (min-width: 40rem) {
  .wl .row {
    flex-direction: row;
  }
  .wl .row .field {
    flex: 1;
  }
}
.field {
  font: inherit;
  width: 100%;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.8rem 1.2rem;
}
.field::placeholder {
  color: var(--field-ph);
}
select.field {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.4rem) 55%, calc(100% - 1.05rem) 55%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
select.field option {
  color: #101114;
}
.wl label.consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}
.wl label.consent input {
  margin-top: 0.2rem;
  accent-color: var(--accent);
  flex: none;
}
.wl .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.wl .msg {
  min-height: 1.4rem;
  font-size: 0.95rem;
}
.wl .msg.err {
  color: #d0342c;
}
:root:not([data-theme="light"]) .wl .msg.err {
  color: #ff9d94;
}
.wl .done {
  padding: 1.4rem 1.5rem;
}
.wl .done strong {
  color: var(--accent);
}
.proof {
  font-size: 0.88rem;
  color: var(--muted);
}

/* --- Grilles et cartes --- */
.grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .grid.g2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.g3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  padding: 1.6rem;
}
.card h3 {
  margin-bottom: 0.7rem;
}
.card p {
  color: var(--text-soft);
  margin-bottom: 0;
  font-size: 1rem;
}
.card ul {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.card li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--text-soft);
  font-size: 0.97rem;
}
.card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 2px;
  background: var(--accent);
}
.card.link {
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease, background 0.2s ease;
}
.card.link:hover {
  transform: translateY(-3px);
  background: var(--glass-hover);
}
.card .more {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
}
.card .badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--brand);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 1rem;
}

.verbs .num {
  font-family: var(--font-brand);
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-bottom: 0.8rem;
  display: block;
}
.verbs h3 {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  margin-bottom: 0.8rem;
}
.verbs h3 strong {
  color: var(--accent);
  font-weight: 700;
}

/* --- Avant / après --- */
.versus {
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .versus {
    grid-template-columns: 1fr 1fr;
  }
}
.msgbox {
  padding: 1.5rem;
}
.msgbox .who {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.msgbox p {
  font-size: 1rem;
  color: var(--text-soft);
}
.msgbox.good {
  border-color: var(--good-line);
  background: var(--good-bg);
}
.msgbox.good .who {
  color: var(--accent);
}
.msgbox.bad p {
  color: var(--muted);
}
.note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 1rem;
}
.note a {
  color: var(--accent);
}

/* --- Tableau comparatif --- */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
  min-width: 34rem;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
th {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
td:first-child {
  color: var(--text);
  font-weight: 600;
  width: 28%;
}
td.us,
th.us {
  background: var(--us-bg);
  color: var(--text);
}
th.us {
  color: var(--accent);
}
tr:last-child td {
  border-bottom: 0;
}

/* --- FAQ --- */
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
}
.faq summary {
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--accent);
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  margin: 0.8rem 0 0;
  color: var(--text-soft);
  max-width: 46rem;
}
.faq a {
  color: var(--accent);
}

/* --- Texte long (guides, pages légales) --- */
.prose {
  max-width: 44rem;
}
.prose h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 2.6rem 0 1rem;
}
.prose h3 {
  margin: 1.8rem 0 0.6rem;
}
.prose p,
.prose li {
  color: var(--text-soft);
}
.prose ul,
.prose ol {
  padding-left: 1.3rem;
  margin: 0 0 1rem;
}
.prose li {
  margin-bottom: 0.5rem;
}
.prose a {
  color: var(--accent);
}
.prose code {
  background: var(--hover);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
  font-size: 0.92em;
}
.crumbs {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.crumbs a {
  color: var(--muted);
}

/* --- Bandeau final --- */
.cta-band {
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: left;
}
.cta-band h2 {
  max-width: 20ch;
}

/* Signature : l'ancien titre, devenu une ligne discrète sous le formulaire. */
.signature {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 2.4rem 0 0;
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--text-soft);
}
.signature svg {
  width: 1.1rem;
  height: 1.2rem;
  flex: none;
  color: var(--accent);
}

/* --- Pied de page --- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 3rem 0 2rem;
  margin-top: 2rem;
  background: linear-gradient(180deg, transparent, var(--glass));
}
.site-footer .cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) {
  .site-footer .cols {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }
}
.site-footer h4 {
  margin: 0 0 0.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.site-footer a {
  text-decoration: none;
  color: var(--text-soft);
  font-size: 0.95rem;
}
.site-footer a:hover {
  color: var(--accent);
}
.site-footer .logo {
  color: var(--text);
  font-size: 1.15rem;
}
.site-footer .fine {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Mode clair : comme dans l'app, le lime ne sert jamais de texte sur fond clair, seulement en aplat
   avec un texte vert très foncé dessus. Les mots mis en avant sont surlignés au marqueur. */
:root[data-theme="light"] h1 strong,
:root[data-theme="light"] h2 strong {
  color: var(--brand-ink);
  background: linear-gradient(transparent 14%, var(--brand) 14%, var(--brand) 90%, transparent 90%);
  padding: 0 0.14em;
  margin: 0 -0.14em;
  border-radius: 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
:root[data-theme="light"] .verbs h3 strong {
  color: var(--brand-ink);
  background: var(--brand);
  padding: 0 0.3em;
  margin-left: -0.3em;
  border-radius: 0.25em;
}
.site-footer .cols {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) {
  .site-footer .cols {
    grid-template-columns: 1.4fr repeat(4, 1fr);
  }
}

.card a.more {
  text-decoration: none;
}

/* --- Logo : même traitement que dans l'app ---
   Nuit : trombone et « .app » en lime, avec une lueur néon qui vacille doucement.
   Jour : trombone encre, « .app » en gris. */
.brand-mark {
  position: relative;
  display: inline-flex;
  flex: none;
}
.brand-mark .glow {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}
.logo .sfx {
  color: #6b6c75;
}
:root:not([data-theme="light"]) .logo .sfx {
  color: var(--brand);
}
:root:not([data-theme="light"]) .brand-mark {
  color: #d6f578;
}
:root:not([data-theme="light"]) .brand-mark .glow {
  display: block;
  color: #c8ee5a;
  filter: blur(5px);
  opacity: 0.55;
  animation: neon-flicker 7s ease-in-out infinite;
}
@keyframes neon-flicker {
  0%,
  100% {
    opacity: 0.55;
  }
  18% {
    opacity: 0.85;
  }
  22% {
    opacity: 0.6;
  }
  24% {
    opacity: 0.9;
  }
  46% {
    opacity: 0.5;
  }
  63% {
    opacity: 0.8;
  }
  66% {
    opacity: 0.45;
  }
  68% {
    opacity: 0.75;
  }
  84% {
    opacity: 0.6;
  }
}

/* Lien simple dans la barre (même allure que les rubriques déroulantes) */
a.dd-btn.plain {
  text-decoration: none;
}
a.dd-btn.plain[aria-current="page"] {
  color: var(--text);
  background: var(--hover);
}

/* Prix des formules */
.card .price {
  margin: 0.2rem 0 0.6rem;
  color: var(--muted);
}
.card .price b {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* Lien « Se connecter » de l'en-tête : discret, masqué sous 75rem pour ne pas serrer le menu (présent dans le menu mobile et le pied de page). */
.login-link { white-space: nowrap; font-size: .9rem; font-weight: 500; color: var(--muted); padding: .4rem .6rem; border-radius: 999px; }
.login-link:hover { color: var(--text); }
@media (max-width: 75rem) { .login-link { display: none; } }

/* Emplacement de capture d'écran à fournir : le build de production refuse de publier tant qu'il en reste. */
.shot-todo { margin: 1.25rem 0; padding: 2rem 1rem; border: 2px dashed var(--border, currentColor); border-radius: 1rem; text-align: center; color: var(--muted); font-size: .9rem; }
.shot-todo figcaption { margin: 0; }

/* Captures d'écran des guides */
.shot { margin: 1.25rem 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: .75rem; border: 1px solid var(--border, rgba(128,128,128,.25)); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.shot figcaption { margin-top: .5rem; font-size: .85rem; color: var(--muted); text-align: center; }