/* ═══════════════════════════════════════════════════════════════
   PARCOURS CLIENT — mots → grille → définitions
   L'éditeur expert garde style.css ; ici tout est pensé pour quelqu'un
   qui compose une grille une seule fois dans sa vie, souvent au téléphone.
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  --bg:      #17151f;
  --bg2:     #241f33;
  --bg3:     #2d2740;
  --primary: #2b2bff;
  --accent:  #ffd23f;
  --accent-txt: #ffd23f;   /* jaune quand il sert de TEXTE ; assombri en thème clair */
  --paper:   #fbf2dd;
  --text:    #fbf2dd;
  --text2:   #b9b3c9;
  --line:    rgba(251, 242, 221, .18);
  --success: #16c08a;
  --danger:  #ff5da2;
  /* Mur plein et sombre : DÉCISION ACQUISE, ne pas éclaircir.
     Un mur gris a déjà été essayé et rejeté — voir le journal du Plateau. */
  --wall:    #2a2036;
}

/* ─── Thème clair ───
   On ne redéfinit que les surfaces, le texte et les filets ; l'accent, le
   papier, le mur et les alertes fonctionnent sur les deux fonds. Le mur reste
   sombre (décision acquise). Choix explicite via [data-theme], sinon le système
   décide (prefers-color-scheme). */
:root[data-theme="light"] {
  --bg:    #f6f2e9;
  --bg2:   #ffffff;
  --bg3:   #ece6d8;
  --text:  #241f1a;
  --text2: #6f6857;
  --line:  rgba(30, 22, 15, .16);
  --accent-txt: #9a6a00;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:    #f6f2e9;
    --bg2:   #ffffff;
    --bg3:   #ece6d8;
    --text:  #241f1a;
    --text2: #6f6857;
    --line:  rgba(30, 22, 15, .16);
  --accent-txt: #9a6a00;
  }
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ─── En-tête ─── */
.co-header {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
}
.co-brand img { height: 26px; width: auto; display: block; }
/* Le wordmark clair (logo sombre) n'apparaît qu'en thème clair, et vice-versa. */
.co-brand .co-logo-light { display: none; }
:root[data-theme="light"] .co-brand .co-logo-dark { display: none; }
:root[data-theme="light"] .co-brand .co-logo-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .co-brand .co-logo-dark { display: none; }
  :root:not([data-theme]) .co-brand .co-logo-light { display: block; }
}
.co-header h1 { margin-left: auto; }
.co-icon, .co-reset {
  font: inherit; cursor: pointer; border: 1px solid var(--line);
  background: var(--bg3); color: var(--text2); border-radius: 8px;
  padding: 7px 12px; font-size: .85rem; font-weight: 700; line-height: 1;
}
.co-icon { padding: 7px 10px; }
.co-icon:hover, .co-reset:hover { color: var(--text); border-color: var(--text2); }
.co-header h1 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 1.25rem; font-weight: 800;
}
.co-back {
  color: var(--text2); text-decoration: none; font-weight: 600;
  padding: 6px 10px; border-radius: 8px;
}
.co-back:hover { color: var(--text); background: var(--bg3); }

/* Sélecteur de décor (étape définitions) */
.co-decor { margin: 18px 0 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.co-decor-titre { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 1.05rem; margin-bottom: 4px; }
.co-decor-titre span { color: var(--text2); font-weight: 600; font-size: .85rem; }
.co-decors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.co-decor-chip {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 96px; padding: 12px 6px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--bg2); color: var(--text);
  cursor: pointer; font: inherit;
}
.co-decor-chip:hover { border-color: var(--accent-txt); }
.co-decor-chip.actif { border-color: #ff5da2; background: var(--bg3); }
.co-decor-chip svg { width: 42px; height: 42px; }
.co-decor-chip .co-decor-nom { font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.2; }
.co-decor-vide { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--text2); font-size: 1.6rem; }

/* Acceptation des CGV (obligatoire avant paiement) */
.co-cgv { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: .9rem; color: var(--text2); line-height: 1.5; cursor: pointer; }
.co-cgv input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: #ff5da2; cursor: pointer; }
.co-cgv a { color: var(--accent-txt); }

/* Code d'invitation (accès de test gratuit) */
.co-invite-bloc { margin: 0 0 14px; font-size: .9rem; }
.co-invite-bloc summary { cursor: pointer; color: var(--text2); font-weight: 700; width: fit-content; }
.co-invite-bloc summary:hover { color: var(--text); }
.co-invite-bloc[open] summary { margin-bottom: 10px; }
#co-invite {
  width: 220px; max-width: 100%; padding: 11px 14px; border-radius: 10px;
  background: var(--bg2); color: var(--text); border: 2px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 1rem; letter-spacing: .12em;
  text-transform: uppercase;
}
#co-invite:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.co-invite-bloc .co-aide { margin-top: 8px; }

/* ─── Fil des étapes ─── */
.co-etapes {
  display: flex; gap: 8px; list-style: none;
  max-width: 760px; margin: 20px auto 0; padding: 0 20px;
}
.co-etapes li {
  flex: 1; display: flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; color: var(--text2);
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line);
}
.co-etapes li span {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: var(--bg3);
  font-size: .78rem; font-weight: 800;
}
.co-etapes li.actif {
  color: var(--bg); background: var(--accent); border-color: var(--accent-txt);
}
.co-etapes li.actif span { background: rgba(23, 21, 31, .22); color: var(--bg); }

/* ─── Corps ─── */
.co-main { max-width: 760px; margin: 0 auto; padding: 24px 20px 64px; }

.co-etape h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 1.5rem; font-weight: 800; margin-bottom: 8px;
}
.co-aide { color: var(--text2); line-height: 1.6; margin-bottom: 20px; }

textarea#saisie {
  width: 100%; padding: 14px;
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem; line-height: 1.9; resize: vertical;
}
textarea#saisie:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.co-compteur { margin-top: 10px; color: var(--text2); font-size: .9rem; }
.co-compteur strong { color: var(--accent-txt); font-size: 1.1rem; }
.co-compteur em { font-style: normal; }

/* ─── Messages ─── */
.co-msg { margin: 12px 0; font-weight: 600; line-height: 1.5; min-height: 1.2em; }
.co-msg.erreur { color: var(--danger); }
.co-msg.succes { color: var(--success); }

/* ─── Boutons ─── */
.co-boutons {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 20px; align-items: center;
}
.co-btn-primaire, .co-btn-accent, .co-btn-fantome {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700; font-size: 1rem;
  padding: 13px 22px; border-radius: 12px;
  border: 1px solid transparent; cursor: pointer;
  min-height: 46px;                     /* cible tactile confortable */
}
.co-btn-primaire { background: var(--primary); color: #fff; }
.co-btn-primaire:hover { filter: brightness(1.15); }
.co-btn-accent { background: var(--accent); color: #17151f; margin-left: auto; }
.co-btn-accent:hover { filter: brightness(1.08); }
.co-btn-accent:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.co-btn-fantome {
  background: transparent; color: var(--text2); border-color: var(--line);
}
.co-btn-fantome:hover { color: var(--text); background: var(--bg2); }
:is(button, input, textarea):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ─── Aperçu de la grille ─── */
.canvas-wrapper {
  position: relative; overflow: hidden;
  padding: 16px; border-radius: 14px; background: var(--bg2);
}
/* ─── Filigrane d'aperçu ───
   On ne peut PAS empêcher une capture d'écran : aucune API navigateur ne le
   permet, et on peut toujours photographier l'écran. On rend donc la capture
   inutilisable comme cadeau plutôt que d'essayer de l'interdire. */
.canvas-wrapper::after {
  content: "APERÇU · NON PAYÉ · APERÇU · NON PAYÉ · APERÇU · NON PAYÉ · APERÇU · NON PAYÉ · APERÇU · NON PAYÉ · APERÇU · NON PAYÉ · APERÇU · NON PAYÉ · APERÇU · NON PAYÉ";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0 2.5rem;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 1.15rem; line-height: 3.2;
  color: rgba(255, 93, 162, .32);
  transform: rotate(-24deg) scale(1.6);
  pointer-events: none; user-select: none; overflow: hidden;
  z-index: 20;
}
/* Grille déjà payée (mode correction) : plus de filigrane. */
.canvas-wrapper.paye::after { content: none; }

.co-apercu {
  display: grid;
  grid-template-columns: repeat(var(--cols, 12), 1fr);
  gap: 2px;
  max-width: 100%;
}
.co-case {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(.5rem, 2.2vw, .95rem);
}
.co-case.mur    { background: var(--wall); }
.co-case.lettre { background: var(--paper); color: #17151f; }
.co-case.def    { background: var(--primary); color: #fff; font-size: .8em; }

/* ─── Rapport de composition ─── */
.co-rapport {
  margin-top: 16px; padding: 14px 16px;
  border-radius: 12px; border-left: 4px solid var(--line);
  background: var(--bg2); line-height: 1.6;
}
.co-rapport strong { display: block; margin-bottom: 6px; font-size: .95rem; }
.co-rapport p { color: var(--text2); font-size: .92rem; }
.co-rapport.ok     { border-left-color: var(--success); }
.co-rapport.note   { border-left-color: var(--accent-txt); }
.co-rapport.alerte { border-left-color: var(--danger); }
.co-rapport button { margin-top: 12px; }
.co-jeton {
  display: inline-block; padding: 2px 9px; margin: 2px 0;
  border-radius: 6px; background: var(--bg3); color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82rem; font-weight: 700;
}

/* ─── Définitions ─── */
.co-titre-champ {
  display: block; margin-bottom: 22px;
  font-weight: 600; color: var(--text2); font-size: .9rem;
}
.co-titre-champ input {
  display: block; width: 100%; margin-top: 7px; padding: 12px 14px;
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 1rem;
}

.co-def {
  padding: 16px; margin-bottom: 14px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
}
.co-def header {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
.co-def-mot {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem; font-weight: 700; color: var(--accent-txt);
  letter-spacing: .06em;
}
.co-def-len { color: var(--text2); font-size: .8rem; }
.co-def-champ {
  width: 100%; padding: 12px 14px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: .98rem;
}

.co-btn-lien {
  margin-top: 10px; padding: 8px 13px;
  background: transparent; color: var(--text2);
  border: 1px solid var(--line); border-radius: 9px;
  font-family: inherit; font-weight: 600; font-size: .87rem; cursor: pointer;
}
.co-btn-lien:hover { color: var(--text); background: var(--bg3); }
.co-btn-lien.ouvert { color: var(--accent-txt); border-color: var(--accent-txt); }

.co-perso {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.co-liens { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.co-liens-titre { color: var(--text2); font-size: .85rem; font-weight: 600; }
.co-lien, .co-amorce {
  padding: 7px 12px; border-radius: 999px;
  background: var(--bg3); color: var(--text2);
  border: 1px solid transparent;
  font-family: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; text-align: left;
}
.co-lien:hover, .co-amorce:hover { color: var(--text); }
.co-lien.actif, .co-amorce.actif {
  background: var(--accent); color: #17151f;
}
.co-amorces {
  display: flex; flex-direction: column; gap: 6px; margin-top: 12px;
}
.co-amorce { border-radius: 10px; }

.co-remplir { margin-top: 14px; }
.co-remplir label {
  display: block; color: var(--text2); font-size: .88rem; margin-bottom: 6px;
}
.co-remplir label em { color: var(--accent-txt); font-style: normal; font-weight: 800; }
.co-remplir input {
  width: 100%; padding: 11px 13px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--accent); border-radius: 10px;
  font-family: inherit; font-size: .98rem;
}
.co-apercu-def {
  margin-top: 8px; min-height: 1.2em;
  color: var(--success); font-size: .92rem; font-style: italic;
}

/* ─── Téléphone ─── */
@media (max-width: 600px) {
  .co-etapes li { font-size: 0; gap: 0; justify-content: center; padding: 8px; }
  .co-etapes li span { font-size: .78rem; }
  .co-etapes li.actif { font-size: .78rem; gap: 8px; }
  .co-main { padding: 20px 14px 56px; }
  .co-btn-accent { margin-left: 0; width: 100%; }
  .co-boutons { flex-direction: column-reverse; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Sélecteur de format (mots croisés / mots fléchés) — étape des mots */
.co-format {
  border: 1px solid var(--co-bord, #d9d4cc);
  border-radius: 12px; padding: 12px 14px; margin: 14px 0 4px;
  display: flex; flex-direction: column; gap: 8px;
}
.co-format legend { font-weight: 700; font-size: .92rem; padding: 0 6px; }
.co-format-opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: .9rem; line-height: 1.35; }
.co-format-opt input { margin-top: 3px; flex: 0 0 auto; }
.co-format-opt em { color: var(--co-doux, #6b6459); font-style: normal; display: block; font-size: .82rem; }

/* ═══════════════════════════════════════════════════════════════════════
   VISIBILITÉ — demande d'Anthony du 21/09/2026 : « mets les boutons plus
   visibles, ça me semble petit ». Relevé sur la page : les deux options de
   format étaient des radios de navigateur de 13 px avec un texte de 14 px, et
   le bouton d'action faisait 46 px de haut. Ce bloc en fait des cartes de choix
   et remonte la taille des boutons — dans les DEUX thèmes (tout passe par les
   variables, aucune couleur en dur).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Les deux formats : des cartes cliquables, plus des puces ─── */
/* Le texte de détail était en var(--co-doux, #6b6459) — une variable JAMAIS
   définie, donc un gris clair appliqué dans les deux thèmes : 2,72 de contraste
   sur le fond violet de la carte, sous le seuil WCAG AA (4,5). Signalé par
   Anthony le 21/09/2026 (« gris sur fond violet »), mesuré puis corrigé. */
.co-format-opt em { color: var(--text2); }
.co-format { border: 1px solid var(--line); padding: 14px 16px 16px; gap: 10px; }
/* 21/09/2026 — demande d'Anthony : « Le format de votre grille » en plus gros.
   Mesuré avant : 16 px / 700, soit la même taille que les noms de format. */
.co-format legend { font-size: 1.25rem; font-weight: 800; padding: 0 8px; letter-spacing: -.01em; }
.co-format-opt {
  gap: 13px; font-size: 1.02rem; line-height: 1.4;
  padding: 14px 16px; border: 2px solid var(--line); border-radius: 12px;
  background: var(--bg2);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.co-format-opt:hover { border-color: var(--text2); transform: translateY(-1px); }
.co-format-opt:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(43, 43, 255, .18); }
.co-format-opt input[type="radio"] {
  /* Puce dessinée à la main : celle du navigateur s'affiche en cercle BLANC plein
     en thème sombre, donc on croit qu'elle est cochée. Vérifié le 21/09/2026. */
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto;
  border: 2px solid var(--text2); border-radius: 50%;
  background: transparent; position: relative; cursor: pointer;
  transition: border-color .15s ease;
}
.co-format-opt:hover input[type="radio"] { border-color: var(--text); }
.co-format-opt input[type="radio"]:checked { border-color: var(--primary); }
.co-format-opt input[type="radio"]:checked::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary);
}
.co-format-opt em { font-size: .92rem; margin-top: 3px; }

/* ─── Boutons d'action : plus hauts, plus lisibles ─── */
.co-btn-primaire, .co-btn-accent {
  font-size: 1.08rem; padding: 16px 30px; min-height: 56px; border-radius: 14px;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.co-btn-primaire { box-shadow: 0 6px 18px rgba(43, 43, 255, .26); }
.co-btn-primaire:hover, .co-btn-accent:hover { transform: translateY(-2px); }
.co-btn-primaire:hover { box-shadow: 0 10px 24px rgba(43, 43, 255, .32); }
.co-btn-accent { font-size: 1.15rem; min-height: 62px; }   /* c'est LUI qui fait la vente */
.co-btn-accent:disabled { transform: none; box-shadow: none; }
.co-btn-fantome { min-height: 50px; }
.co-reset { font-size: .95rem; padding: 9px 14px; min-height: 40px; }
.co-compteur { font-size: 1rem; }
.co-compteur strong { font-size: 1.25rem; }

@media (max-width: 600px) {
  .co-btn-primaire, .co-btn-accent { width: 100%; }
  .co-format-opt { font-size: 1rem; padding: 13px 14px; }
}

/* ─── Les trois étapes de l'en-tête : plus lisibles (même demande, 21/09/2026) ───
   Avant : libellé à .82rem avec des pastilles de 22 px. Sur mobile les libellés
   disparaissaient (font-size: 0) sauf celui de l'étape active — on ne voyait
   que « 1 2 3 ». Les règles ci-dessous remplacent celles d'avant (bloc placé en
   fin de feuille) et rhabillent aussi le cas mobile. */
.co-etapes { gap: 10px; margin: 24px auto 0; }
.co-etapes li {
  font-size: .95rem; font-weight: 700; gap: 10px;
  padding: 11px 14px; min-height: 48px; border-radius: 12px; border-width: 2px;
}
.co-etapes li span { width: 28px; height: 28px; font-size: .92rem; font-weight: 800; }
.co-etapes li.actif { font-size: 1rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
.co-etapes li.actif span { width: 28px; height: 28px; }

@media (max-width: 600px) {
  .co-etapes { margin-top: 16px; }
  /* Sur mobile, seuls les numéros tiennent : on les agrandit, et on garde le
     libellé de l'étape en cours (c'est lui qui dit où on en est). */
  .co-etapes li { font-size: 0; gap: 0; justify-content: center; padding: 10px 6px; min-height: 46px; }
  .co-etapes li span { width: 26px; height: 26px; font-size: .88rem; }
  .co-etapes li.actif { font-size: .88rem; gap: 8px; padding: 10px 12px; }
}

/* ─── Les lettres de la grille (étape 2) — demande d'Anthony, 21/09/2026 ───
   Avant : font-size en vw, donc liée à la taille de l'ÉCRAN, pas à celle de la
   CASE. Mesuré : 15,2 px dans une case de 56 px (un quart de la case) — et 8 px
   sur mobile. On rapporte la police à la largeur du conteneur divisée par le
   nombre de colonnes : elle suit la case, quel que soit l'écran et quel que
   soit le nombre de colonnes. */
.canvas-wrapper { container-type: inline-size; }
.co-case { font-size: calc(100cqw / var(--cols, 12) * 0.6); border-radius: 4px; }
/* Les flèches des cases bleues avaient la même cause : 12,8 px dans une case de
   56 px. Elles suivent maintenant la case (0,5). Mesuré et vu en vrai. */
.co-case.def { font-size: calc(100cqw / var(--cols, 12) * 0.5); }