/* ==========================================================================
   TurboTexte - feuille de style du site
   Un seul fichier, aucune dépendance : rien à compiler avant de déployer.
   ========================================================================== */

:root {
  --bleu: #2f6fed;
  --bleu-fonce: #1b4bb8;
  --bleu-pale: #eef3ff;

  --texte: #16202c;
  --texte-doux: #5b6b7c;
  --fond: #ffffff;
  --fond-alt: #f6f8fb;
  --bordure: #e2e8f0;

  --vert: #128a5b;
  --vert-pale: #e6f6ef;
  --rouge: #c0392b;
  --rouge-pale: #fdecea;
  --orange: #b46a00;
  --orange-pale: #fff4e0;

  --rayon: 12px;
  --ombre: 0 1px 2px rgba(16, 32, 48, .06), 0 8px 24px rgba(16, 32, 48, .06);
  --largeur: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --texte: #e8eef6;
    --texte-doux: #9fb0c3;
    --fond: #10161f;
    --fond-alt: #161e29;
    --bordure: #26303d;
    --bleu-pale: #172440;
    --vert-pale: #13291f;
    --rouge-pale: #2c1815;
    --orange-pale: #2a2113;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

/* --- Base ---------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; height: auto; }

code, kbd, .mono {
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: .93em;
}

kbd {
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: .12em .45em;
  white-space: nowrap;
}

.wrap { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--texte-doux); }
.center { text-align: center; }
.small { font-size: .9rem; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--bleu); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; top: 0; z-index: 100; }

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* --- Boutons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .97rem;
  cursor: pointer;
  text-align: center;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--bleu); color: #fff; }
.btn-primary:hover { background: var(--bleu-fonce); }

.btn-ghost { background: transparent; color: var(--texte); border-color: var(--bordure); }
.btn-ghost:hover { border-color: var(--bleu); color: var(--bleu); }

.btn-danger { background: transparent; color: var(--rouge); border-color: var(--bordure); }
.btn-danger:hover { border-color: var(--rouge); background: var(--rouge-pale); }

.btn-small { padding: 7px 13px; font-size: .87rem; border-radius: 8px; }
.btn-block { display: block; width: 100%; }

/* --- En-tête ------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--texte); font-weight: 700; }
.logo:hover { text-decoration: none; }
.logo-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--bleu), #6b4bf0);
  color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .5px;
}
.logo-text { font-size: 1.08rem; letter-spacing: -.02em; }

.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav > a {
  padding: 8px 12px; border-radius: 8px; color: var(--texte-doux); font-weight: 500; font-size: .95rem;
}
.site-nav > a:hover { color: var(--texte); background: var(--fond-alt); text-decoration: none; }
.site-nav > a.is-active { color: var(--bleu); font-weight: 600; }
.site-nav .btn { padding: 9px 16px; }
.nav-admin { color: var(--orange) !important; font-weight: 600 !important; }

.menu-toggle, .menu-button { display: none; }

/* --- Messages flash ------------------------------------------------------ */

.flashes { margin-top: 18px; }
.flash {
  border-radius: var(--rayon);
  padding: 13px 16px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  font-size: .95rem;
}
.flash-success { background: var(--vert-pale); color: var(--vert); border-color: color-mix(in srgb, var(--vert) 25%, transparent); }
.flash-error   { background: var(--rouge-pale); color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 25%, transparent); }
.flash-info    { background: var(--bleu-pale); color: var(--bleu-fonce); border-color: color-mix(in srgb, var(--bleu) 25%, transparent); }

/* --- Sections ------------------------------------------------------------ */

section { padding: 72px 0; }
section.tight { padding: 44px 0; }
.section-alt { background: var(--fond-alt); }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head p { color: var(--texte-doux); font-size: 1.06rem; }

/* --- Héros --------------------------------------------------------------- */

.hero { padding: 84px 0 64px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero .lead { font-size: 1.16rem; color: var(--texte-doux); margin-bottom: 28px; }

.eyebrow {
  display: inline-block;
  background: var(--bleu-pale); color: var(--bleu-fonce);
  border-radius: 999px; padding: 5px 14px;
  font-size: .84rem; font-weight: 600;
  margin-bottom: 18px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { margin-top: 16px; font-size: .88rem; color: var(--texte-doux); }

/* Démonstration animée de l'expansion */
.demo {
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  box-shadow: var(--ombre);
  overflow: hidden;
}
.demo-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond);
}
.demo-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bordure); }
.demo-title { margin-left: 8px; font-size: .82rem; color: var(--texte-doux); }
.demo-body { padding: 22px; min-height: 190px; font-size: 1rem; }
.demo-line { margin: 0 0 10px; }
.demo-trigger { color: var(--bleu); font-weight: 700; font-family: Consolas, Menlo, monospace; }
.caret {
  display: inline-block; width: 2px; height: 1.1em; vertical-align: text-bottom;
  background: var(--bleu); animation: clignote 1s steps(2) infinite;
}
@keyframes clignote { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none } }

/* --- Grilles de cartes --------------------------------------------------- */

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 26px;
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--bleu-pale); color: var(--bleu);
  margin-bottom: 16px; font-size: 1.25rem;
}

/* --- Tarifs -------------------------------------------------------------- */

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.price-card {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 30px;
  position: relative;
}
.price-card.featured { border-color: var(--bleu); box-shadow: var(--ombre); }
.price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--bleu); color: #fff;
  border-radius: 999px; padding: 4px 14px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.price-amount { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; margin: 8px 0 2px; }
.price-period { color: var(--texte-doux); font-size: .92rem; }
.price-list { list-style: none; padding: 0; margin: 22px 0; }
.price-list li { padding: 7px 0 7px 27px; position: relative; font-size: .95rem; }
.price-list li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  color: var(--vert); font-weight: 700;
}
.price-list li.off { color: var(--texte-doux); }
.price-list li.off::before { content: "—"; color: var(--texte-doux); }

/* --- Formulaires --------------------------------------------------------- */

.form-card {
  max-width: 460px; margin: 0 auto;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 34px;
  box-shadow: var(--ombre);
}
.form-card.wide { max-width: 720px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.field .hint { font-size: .84rem; color: var(--texte-doux); margin-top: 5px; }

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: .97rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px var(--bleu-pale); }
textarea { min-height: 150px; resize: vertical; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.check input { margin-top: 4px; flex: none; }

.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form-links { margin-top: 20px; text-align: center; font-size: .92rem; color: var(--texte-doux); }

/* --- Compte -------------------------------------------------------------- */

.account-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }

.license-box {
  background: linear-gradient(135deg, var(--bleu-pale), color-mix(in srgb, var(--bleu-pale) 40%, var(--fond)));
  border: 1px dashed var(--bleu);
  border-radius: var(--rayon);
  padding: 22px;
  text-align: center;
}
.license-key {
  font-family: Consolas, Menlo, monospace;
  font-size: 1.5rem; font-weight: 800; letter-spacing: 1.5px;
  color: var(--bleu-fonce);
  word-break: break-all;
  margin: 8px 0 14px;
}
@media (prefers-color-scheme: dark) { .license-key { color: #8fb4ff; } }

/* Un lien de parrainage est bien plus long qu'une clé : même boîte, mais une
   taille qui tient sur une ligne d'écran étroit. */
.referral-link { font-size: 1rem; letter-spacing: 0; font-weight: 700; }

.badge {
  display: inline-block;
  border-radius: 999px; padding: 4px 12px;
  font-size: .82rem; font-weight: 700;
}
.badge-ok      { background: var(--vert-pale); color: var(--vert); }
.badge-warn    { background: var(--orange-pale); color: var(--orange); }
.badge-danger  { background: var(--rouge-pale); color: var(--rouge); }
.badge-neutral { background: var(--fond-alt); color: var(--texte-doux); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 16px; }
.stat .n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.stat .l { font-size: .84rem; color: var(--texte-doux); }

/* --- Tableaux ------------------------------------------------------------ */

.table-scroll { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--rayon); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--bordure); vertical-align: top; }
th { background: var(--fond-alt); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texte-doux); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.table-actions form { display: inline; }

/* --- Contenu long (pages légales) ---------------------------------------- */

.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin-top: 2em; font-size: 1.4rem; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: .4em; }
.prose table { margin: 1.4em 0; }
.prose dt { font-weight: 600; margin-top: 1em; }

/* --- Appel à l'action final ---------------------------------------------- */

.cta {
  background: linear-gradient(135deg, var(--bleu), #6b4bf0);
  color: #fff;
  border-radius: 20px;
  padding: 54px 32px;
  text-align: center;
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, .9); max-width: 520px; margin: 0 auto 26px; }
.cta .btn-primary { background: #fff; color: var(--bleu-fonce); }
.cta .btn-primary:hover { background: #f0f4ff; }
.cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.cta .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

/* --- Pied de page -------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--bordure); background: var(--fond-alt); padding: 52px 0 26px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; }
.footer-grid h3 { font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); margin-bottom: 12px; }
.footer-grid a { display: block; color: var(--texte-doux); font-size: .94rem; padding: 4px 0; }
.footer-grid a:hover { color: var(--bleu); }
.logo-footer { margin-bottom: 12px; }
.footer-bottom { border-top: 1px solid var(--bordure); margin-top: 34px; padding-top: 20px; color: var(--texte-doux); font-size: .87rem; }
.footer-bottom p { margin: 0; }

/* --- Page d'erreur ------------------------------------------------------- */

.error-page { text-align: center; padding: 100px 20px; }
.error-code { font-size: 5rem; font-weight: 800; color: var(--bleu); line-height: 1; }

/* --- Connexion Google ---------------------------------------------------- */

/* Fond blanc et logo intact dans les deux thèmes : les consignes d'identité
   de Google interdisent de recolorer le bouton. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid #dadce0;
  border-radius: 10px;
  background: #fff;
  color: #1f1f1f;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: .95rem;
  font-weight: 500;
}
.btn-google:hover { background: #f7f8f8; text-decoration: none; color: #1f1f1f; }
.btn-google:active { background: #f1f3f4; }
.btn-google:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bleu-pale); }
.btn-google-logo { width: 18px; height: 18px; flex: none; }

.google-legal { margin-top: 10px; }

.auth-separator {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0;
  color: var(--texte-doux); font-size: .85rem;
}
.auth-separator::before, .auth-separator::after {
  content: ""; flex: 1; height: 1px; background: var(--bordure);
}

/* --- Premiers pas (fin d'inscription) ------------------------------------ */

.onboarding { max-width: 720px; margin: 0 auto; }

.try-box {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--ombre);
  margin-bottom: 30px;
}
.try-label { display: block; font-size: .92rem; color: var(--texte-doux); margin-bottom: 10px; }
.try-label code {
  background: var(--bleu-pale); color: var(--bleu-fonce);
  padding: 1px 6px; border-radius: 6px; font-weight: 700;
}
.try-area { min-height: 130px; font-size: 1rem; line-height: 1.6; }
.try-status { margin: 10px 0 0; font-size: .86rem; color: var(--texte-doux); min-height: 1.4em; }

.combo-form { border: 0; padding: 0; }
.combo-title { font-size: 1.15rem; margin-bottom: .2em; }

.combo-list { list-style: none; padding: 0; margin: 18px 0 26px; }
.combo-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  margin-bottom: 8px;
  background: var(--fond);
}
.combo-row input { margin-top: 6px; flex: none; }
.combo-main {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 4px 10px;
  flex: 1;
  font-weight: 400 !important;
  margin: 0 !important;
  cursor: pointer;
}
.combo-key {
  font-family: Consolas, Menlo, monospace; font-weight: 700; font-size: .95rem;
  color: var(--bleu);
  background: var(--bleu-pale);
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 2px 9px;
  cursor: pointer;
}
.combo-key:hover { border-color: var(--bleu); }
.combo-arrow { color: var(--texte-doux); }
.combo-snippet { font-size: .95rem; }
.combo-note { grid-column: 3; font-size: .82rem; color: var(--texte-doux); }

.onboarding-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.skip-step { font-size: .9rem; color: var(--texte-doux); }

/* --- Dactylo : entraînement au clavier ----------------------------------- */

/* Une teinte par doigt. Volontairement désaturées : la couleur doit se lire
   d'un coup d'œil sans transformer le clavier en jouet. */
.dac {
  --dac-mono: Consolas, "SF Mono", Menlo, monospace;
  --dac0: #dbe7fb; --dac1: #e7ddf8; --dac2: #daf0e2;
  --dac3: #fbe8d4; --dac4: #e8edf3; --dac5: #fbdfe0;
  --dac6: #d7eff3; --dac7: #f8eed0; --dac8: #dfe0f7;
}
@media (prefers-color-scheme: dark) {
  .dac {
    --dac0: #1d2c46; --dac1: #2a2444; --dac2: #173021;
    --dac3: #3a2a15; --dac4: #1e2733; --dac5: #3a1f22;
    --dac6: #123033; --dac7: #33290f; --dac8: #22233f;
  }
}

/* Choix de l'exercice */
.dac-onglets {
  display: flex; gap: 6px;
  border-bottom: 1px solid var(--bordure);
  margin-bottom: 22px;
}
.dac-onglet {
  background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 10px 16px;
  font: inherit; font-weight: 600; font-size: .97rem;
  color: var(--texte-doux); cursor: pointer;
}
.dac-onglet:hover { color: var(--texte); }
.dac-onglet.is-active { color: var(--bleu); border-bottom-color: var(--bleu); }

.dac-serie {
  font-size: .84rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texte-doux); margin: 26px 0 12px;
}
.dac-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; }

.dac-carte {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left;
  background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 15px 17px; font: inherit; color: var(--texte); cursor: pointer;
  transition: border-color .15s, transform .05s;
}
.dac-carte:hover { border-color: var(--bleu); }
.dac-carte:active { transform: translateY(1px); }
.dac-carte.is-fait { border-left: 3px solid var(--vert); padding-left: 15px; }
.dac-carte-titre { font-weight: 600; }
.dac-carte-touches { font-size: .85rem; color: var(--texte-doux); }
.dac-carte-score {
  margin-top: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  color: var(--vert); background: var(--vert-pale);
}

/* En-tête de l'exercice */
.dac-barre { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.dac-retour { background: none; border: 0; padding: 0; font: inherit; font-size: .92rem; color: var(--bleu); cursor: pointer; }
.dac-retour:hover { text-decoration: underline; }
.dac-entete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dac-entete strong { font-size: 1.15rem; }
.dac-consigne { color: var(--texte-doux); font-size: .95rem; max-width: 72ch; }

.dac-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.dac-stat { background: var(--fond-alt); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 12px 14px; }
.dac-stat .n { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dac-stat .l { font-size: .8rem; color: var(--texte-doux); }

/* La zone de frappe : le texte visible, et par-dessus un champ transparent
   qui reçoit réellement les touches. */
.dac-zone {
  position: relative;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--ombre);
}
.dac.a-le-focus .dac-zone { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }

.dac-texte {
  font-family: var(--dac-mono); font-size: 1.18rem; line-height: 2;
  white-space: pre-wrap; overflow-wrap: normal; word-break: normal;
  max-height: 8em; overflow: hidden;
  /* Le texte restant s'efface derrière le texte déjà tapé : c'est ce contraste
     qui donne la position d'un coup d'œil, sans avoir à chercher le curseur. */
  color: color-mix(in srgb, var(--texte-doux) 70%, var(--fond));
}
.dac-c { border-radius: 3px; }
.dac-c.is-ok { color: var(--texte); }
.dac-c.is-ko { color: var(--rouge); background: var(--rouge-pale); }
.dac-c.is-position { background: var(--bleu-pale); box-shadow: inset 2px 0 0 var(--bleu); }
.dac-c.is-attente { background: var(--orange-pale); box-shadow: inset 2px 0 0 var(--orange); }

@media (prefers-reduced-motion: no-preference) {
  .dac.a-le-focus .dac-c.is-position:not(.is-attente) { animation: dac-curseur 1.1s steps(2) infinite; }
}
@keyframes dac-curseur {
  0%, 50% { box-shadow: inset 2px 0 0 var(--bleu); }
  50.01%, 100% { box-shadow: inset 2px 0 0 transparent; }
}

.dac-capture {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  padding: 22px 24px;
  border: 0; border-radius: 16px;
  background: transparent; color: transparent; caret-color: transparent;
  font-family: var(--dac-mono); font-size: 1.18rem; line-height: 2;
  resize: none; outline: none; overflow: hidden;
}
.dac-capture::selection { background: transparent; }

.dac-invite {
  position: absolute; right: 14px; bottom: 10px;
  padding: 3px 12px; border-radius: 999px;
  background: var(--fond-alt); border: 1px solid var(--bordure);
  font-size: .82rem; color: var(--texte-doux);
  pointer-events: none;
}
.dac.a-le-focus .dac-invite { display: none; }

/* Le guide de frappe : les mains, et le doigt nommé sous elles. C'est le
   dessin que l'on consulte pendant l'exercice, donc il vient juste sous le
   texte et rien ne le partage horizontalement. */
.dac-guide {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 16px 0 4px;
}
.dac.sans-mains .dac-mains-cadre { display: none; }

/* La largeur se pose sur le cadre : dans une colonne flex centrée, un enfant
   se rétracte sur son contenu, et un SVG en width:100% d'un parent auto
   retombe sur les 300 px par défaut des éléments remplacés. */
.dac-mains-cadre { width: 100%; max-width: 470px; }
.dac-mains { display: block; width: 100%; height: auto; }
.dac-paume, .dac-m {
  stroke: var(--bordure); stroke-width: 2;
  transition: fill .12s, stroke .12s;
}
.dac-paume { fill: var(--fond-alt); }

/* Chaque doigt porte la teinte de ses touches : la couleur lue sur le clavier
   se retrouve telle quelle sur la main. */
.dac-m-0 { fill: var(--dac0); } .dac-m-1 { fill: var(--dac1); }
.dac-m-2 { fill: var(--dac2); } .dac-m-3 { fill: var(--dac3); }
.dac-m-4 { fill: var(--dac4); } .dac-m-5 { fill: var(--dac5); }
.dac-m-6 { fill: var(--dac6); } .dac-m-7 { fill: var(--dac7); }
.dac-m-8 { fill: var(--dac8); }

.dac-m.est-active { fill: var(--bleu); stroke: var(--bleu-fonce); stroke-width: 2.5; }
.dac-m.est-appui { fill: var(--bleu-pale); stroke: var(--bleu); stroke-width: 2.5; }

.dac-main-nom {
  fill: var(--texte-doux);
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: .02em;
}

.dac-sous-zone {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 10px 0 18px;
}
.dac-doigt { display: flex; align-items: center; gap: 9px; min-height: 1.8em; font-size: .95rem; color: var(--texte-doux); }
.dac-doigt-touche {
  font-family: var(--dac-mono); font-weight: 700;
  background: var(--bleu-pale); color: var(--bleu-fonce);
  border-radius: 6px; padding: 2px 10px; min-width: 2.4ch; text-align: center;
}
.dac-outils { display: flex; align-items: center; gap: 14px; }
.dac-option { display: flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--texte-doux); cursor: pointer; }
.dac-option input { margin: 0; flex: none; }

/* Le clavier à l'écran */
.dac-clavier-defilement { overflow-x: auto; padding-bottom: 6px; }
.dac.sans-clavier .dac-clavier-defilement { display: none; }
.dac-clavier { min-width: 700px; display: flex; flex-direction: column; gap: 6px; user-select: none; }
.dac-rangee { display: flex; gap: 6px; }
.dac-rangee:last-child { justify-content: center; }

.dac-t {
  flex: 1 1 0; min-width: 0; height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--bordure); border-bottom-width: 2px; border-radius: 8px;
  font-family: var(--dac-mono); font-size: .9rem; color: var(--texte);
  transition: transform .08s, background .12s;
}
.dac-t small { font-size: .62rem; line-height: 1; margin-bottom: 1px; color: var(--texte-doux); }
.dac-t-nom { font-family: inherit; font-size: .7rem; color: var(--texte-doux); }
.dac-t-large { flex: 1.7 1 0; }
.dac-t-xl { flex: 2.4 1 0; }
.dac-t-espace { flex: 0 0 46%; }

.dac-d0 { background: var(--dac0); } .dac-d1 { background: var(--dac1); }
.dac-d2 { background: var(--dac2); } .dac-d3 { background: var(--dac3); }
.dac-d4 { background: var(--dac4); } .dac-d5 { background: var(--dac5); }
.dac-d6 { background: var(--dac6); } .dac-d7 { background: var(--dac7); }
.dac-d8 { background: var(--dac8); }

.dac-t.is-suivante {
  background: var(--bleu); border-color: var(--bleu); color: #fff;
  transform: translateY(-2px); box-shadow: 0 3px 0 var(--bleu-fonce);
}
.dac-t.is-suivante small { color: rgba(255, 255, 255, .75); }
.dac-t.is-maj { border-color: var(--bleu); color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu); }

/* Résultat */
.dac-resultat {
  margin-top: 22px; padding: 24px;
  background: var(--fond-alt); border: 1px solid var(--bordure); border-radius: 16px;
}
.dac-resultat .dac-stats { margin-top: 14px; }
.dac-resultat-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Adaptatif ----------------------------------------------------------- */

/* Le menu passe en tiroir plus tôt que le reste : sept entrées et deux boutons
   ne tiennent plus sur une ligne bien avant la limite de 720 px. */
@media (max-width: 980px) {
  .menu-button {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 10px; cursor: pointer;
    border: 1px solid var(--bordure); border-radius: 9px;
  }
  .menu-button span { display: block; height: 2px; background: var(--texte); border-radius: 2px; }

  .site-nav {
    display: none;
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--fond);
    border-bottom: 1px solid var(--bordure);
    padding: 14px 20px 20px;
    box-shadow: var(--ombre);
  }
  .menu-toggle:checked ~ .site-nav { display: flex; }
  .site-nav .btn { width: 100%; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .grid-3, .grid-4, .price-grid { grid-template-columns: repeat(2, 1fr); }
  .account-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  section { padding: 52px 0; }
  .grid-2, .grid-3, .grid-4, .price-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .form-card { padding: 24px; }

  .dac-stats { grid-template-columns: repeat(2, 1fr); }
  .dac-texte, .dac-capture { font-size: 1rem; }
  .dac-zone, .dac-capture { padding: 18px; }
  .dac-sous-zone { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Navigation entre articles du wiki */
.wiki-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line, #e3e6ec);
}
.wiki-nav a { font-weight: 600; text-decoration: none; }
.wiki-nav a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Bandeau « En chantier »

   Barre en diagonale au travers de la page d'accueil, affichée tant que les
   encaissements sont fermés (voir Stripe::checkoutOpen).

   Deux précautions qui comptent : `pointer-events: none` pour que la barre
   n'intercepte aucun clic malgré sa taille, et une opacité assez basse pour
   que le texte dessous reste lisible. Un bandeau qui empêche de lire la page
   ou de cliquer sur « Essai gratuit » coûterait des visiteurs.
   --------------------------------------------------------------------------- */
.construction {
  position: fixed;
  top: 42%;
  left: -12%;
  width: 124%;
  z-index: 60;
  pointer-events: none;
  transform: rotate(-14deg);
  background: repeating-linear-gradient(
    45deg,
    rgba(240, 176, 0, .93) 0 28px,
    rgba(28, 28, 28, .93) 28px 56px
  );
  box-shadow: 0 10px 40px rgba(0, 0, 0, .28);
  text-align: center;
  padding: .55rem 0;
}

.construction span {
  display: inline-block;
  padding: .35rem 2rem;
  background: #1c1c1c;
  color: #ffce3a;
  font-size: clamp(1.6rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.1;
}

@media print {
  .construction { display: none; }
}