/* ============================================================================
   CRATE MACHINE — SKIN D'INTEGRATION DANS LA DA NORMAPRODS
   ----------------------------------------------------------------------------
   Chargee APRES crate-machine.css et site.css. Surcharge purement visuelle :
   aucun id, aucune classe, aucune structure HTML n'est modifiee, donc tous les
   contrats fonctionnels restent intacts (GA4 crate_machine_generate, compteur
   data-usage-counter, popup crateEmail*, formulaires Kit 9429614, cablage
   data-click-action).

   INTENTION — l'outil doit se lire comme une machine de studio montee dans la
   page, pas comme une application web importee. Trois leviers :
     1. Palette : les variables internes de l'outil sont remappees sur les
        tokens du site. Le cuivre devient la seule couleur d'action.
     2. Matiere : angles vifs et filets fins, la grammaire du site.
     3. Plaque signaletique : le titre serif qui repetait le H1 de la page
        devient une plaque gravee en mono. Le doublon devient un dispositif.

   PIEGE A CONNAITRE : .crate-tool redefinit --ink (chez lui = fond sombre,
   chez le site = texte os). A l'interieur de .crate-tool, var(--ink) resout
   donc vers SA valeur. Pour le texte on ecrit la valeur litterale #EDE8DE.
   ============================================================================ */

/* --- 1. REMAPPAGE DE LA PALETTE ------------------------------------------ */
.crate-tool {
  --ink: var(--bg);
  --ink-2: var(--bg-panel);
  --ink-3: var(--bg-raised);
  --ink-4: var(--line-2);
  --paper: #EDE8DE;                 /* = --ink du site, en litteral (masque ici) */
  --paper-dim: var(--ink-dim);
  --chalk: var(--ink-dim);
  --chalk-dim: var(--ink-mute);
  --mute: var(--line-2);
  --acid: var(--accent);            /* le cuivre devient la couleur d'action */
  --acid-soft: var(--accent-soft);
  --acid-glow: rgba(196, 106, 58, .28);
  --crimson: var(--red);            /* exclusions : le rouge garde son sens */
  --crimson-soft: rgba(204, 105, 93, .12);
  --ocean: var(--steel);            /* tonalites / decennies : technique */
  --ocean-soft: rgba(121, 137, 154, .14);
  --g-rnb: var(--steel);
  --border: var(--line);
  --border-on: var(--line-2);
}

/* --- 2. MATIERE : angles vifs, filets fins ------------------------------- */
.crate-tool [class]:not(.dot) { border-radius: 0; }
.crate-tool .dot { border-radius: 50%; }

/* --- 3. TITRE DU WIDGET -------------------------------------------------- */
/* On garde Fraunces, c'est l'identite de l'outil. Seule la TAILLE est moderee
   (l'original montait a 96px et entrait en concurrence avec le H1 Anton de la
   page). La police, elle, n'avait rien a se reprocher. */
.crate-tool .hero #mainTitle {
  font-size: clamp(30px, 5vw, 56px);
  line-height: .95;
}

/* --- 5. BOUTON GENERER : contraste AA sur cuivre ------------------------- */
/* Le blanc sur cuivre tombe a ~2.8:1. --accent-ink est a 7.4:1. */
.crate-tool .btn-generate {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  box-shadow: none;
  padding: 17px 46px;
}
.crate-tool .btn-generate:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

/* --- 6. CHIPS : le sens porte par la palette du site --------------------- */
.crate-tool .pll { background: var(--bg-input); border-color: var(--line-2); color: var(--ink-dim); }
.crate-tool .pll:hover { border-color: var(--accent); color: #EDE8DE; }
.crate-tool .pll.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-bright); }
.crate-tool .pll.crimson.on { background: rgba(204, 105, 93, .14); border-color: var(--red); color: var(--red); }
.crate-tool .pll.pink.on,
.crate-tool .pll.ocean.on { background: rgba(121, 137, 154, .14); border-color: var(--steel); color: var(--steel); }
/* No drums : verrouille, donc jamais interactif visuellement */
.crate-tool .pll.locked { cursor: default; opacity: .9; }
.crate-tool .pll.locked:hover { border-color: var(--red); color: var(--red); }

/* --- 6b. BASCULE DE LANGUE ---------------------------------------------- */
/* Elle etait bleue (#4A9EFF), seule touche de bleu du site. Les deux langues
   sont traitees a egalite : active = cuivre plein, inactive = filet discret. */
.crate-tool .lang-btn {
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-mute);
}
.crate-tool .lang-btn.on,
.crate-tool .lang-btn.fr-on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.crate-tool .lang-btn.fr-hint,
.crate-tool .lang-btn.en-hint { color: var(--ink-mute); background: transparent; }
.crate-tool .lang-btn.fr-hint:hover,
.crate-tool .lang-btn.en-hint:hover { color: var(--accent-bright); border-color: var(--accent); }

/* Compteur de caracteres en alerte : ambre du site. */
.crate-tool .char-warn { color: var(--amber); }

/* --- 7. CARTE DE SORTIE -------------------------------------------------- */
.crate-tool .out-card { border-color: var(--accent); box-shadow: none; }
.crate-tool .tags-card { border-color: var(--line-2); box-shadow: none; }

/* --- 7b. POPUP EMAIL ----------------------------------------------------- */
/* Elle vit HORS de .crate-tool : ni le remappage de palette ni la regle
   d'angles vifs ne l'atteignent. Elle est donc traitee explicitement.
   Aucun id n'est touche : crateEmailModal / Form / Input / Join / Skip / Close
   restent identiques, seul l'habillage change. */
.crate-email-box {
  border-radius: 0;
  border-color: var(--line-2);
  background: var(--bg-panel);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
}
.crate-email-backdrop { background: rgba(9, 10, 12, .82); }
.crate-email-box .eyebrow {
  color: var(--ink-mute);
}
.crate-email-box input {
  border-radius: 0;
  border-color: var(--line-2);
}
.crate-email-box input:focus { border-color: var(--accent); outline: none; }
.crate-email-x { border-radius: 0; border-color: var(--line-2); background: transparent; }
.crate-email-x:hover { border-color: var(--accent); color: var(--accent-bright); }
.crate-email-skip {
  border-radius: 0;
  border-color: var(--line-2);
}
.crate-email-skip:hover { border-color: var(--accent); color: var(--accent-bright); }
/* Action principale : le cuivre, comme partout ailleurs sur le site. */
#crateEmailJoin {
  border-radius: 0;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  padding: 13px 16px;
}
#crateEmailJoin:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

/* --- 8. PLANCHER DE QUALITE : focus clavier visible ---------------------- */
.crate-tool button:focus-visible,
.crate-tool input:focus-visible,
.crate-tool select:focus-visible,
.crate-tool [data-click-action]:focus-visible,
.crate-email-box button:focus-visible,
.crate-email-box input:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

/* --- 9. RESPIRATION : l'echelle d'espacement du site --------------------- */
/* L'outil utilisait des valeurs fixes (20px, gap 6px) la ou le site respire
   avec --pad-x clamp(20px,4vw,56px) et --sec-y clamp(56px,8.5vh,102px).
   C'est ce qui le faisait paraitre plus serre que le reste de la page.
   Tout est en clamp() : le mobile reste dense, le desktop s'ouvre. */

.crate-tool .stage {
  max-width: 1180px;
  padding: 0 var(--pad-x) clamp(56px, 8vh, 88px);
}

/* Rythme entre les etapes : assez pour separer, pas au point de faire un trou */
/* Les etapes sont des <section>, elles heritaient donc du padding-bas global de
   77px, auquel ma respiration ajoutait 63px de marge et 27px de padding : 167px
   entre deux etapes. On revient a 40px au total, repartis de part et d'autre du
   filet pointille (20 avant, 20 apres) pour qu'il reste centre. */
.crate-tool .step {
  margin-top: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}
.crate-tool .step:first-child { margin-top: 20px; padding-top: 0; }
.crate-tool .step-head {
  gap: clamp(16px, 2vw, 26px);
  margin-bottom: clamp(24px, 3.6vh, 38px);
}
.crate-tool .step-title {
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.05;
}

/* Etiquettes de sous-section : petites capitales, donc elles ont besoin d'air */
.crate-tool .subsec-label {
  font-size: 10.5px;
  letter-spacing: .2em;
  margin-bottom: 14px;
}
.crate-tool .subsec { margin-top: clamp(22px, 3vh, 34px); }

/* Panneaux et cartes */
.crate-tool .panel { padding: clamp(22px, 2.6vw, 34px); }
.crate-tool .gcard { padding: clamp(20px, 2.2vw, 26px) clamp(16px, 1.8vw, 22px); }

/* Grilles et jeux de chips : le plus gros gain de lisibilite */
.crate-tool .genre-wall { gap: clamp(10px, 1.1vw, 15px); }
.crate-tool .pill-set { gap: 10px; }
.crate-tool .inst-set { gap: 10px; }
.crate-tool .pll { padding: 9px 15px; line-height: 1.3; }

/* Sliders : de la place verticale entre les rangees */
.crate-tool .sliders-stack { gap: clamp(18px, 2.4vh, 26px); }
.crate-tool .sl-top { margin-bottom: 10px; }

/* Zone de generation : on reprend EXACTEMENT le motif de bande du site
   (.capture : fond panneau + filets haut/bas). Le degrade brunatre d'origine
   etait le seul element qui ne parlait pas la langue du site. */
.crate-tool .gen-zone {
  margin-top: clamp(44px, 6vh, 68px);
  padding: clamp(32px, 4.5vh, 48px) var(--pad-x);
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Sortie : confort de lecture d'un prompt de 900+ caracteres */
.crate-tool .out-body {
  padding: clamp(20px, 2.4vw, 30px);
  line-height: 1.75;
}
.crate-tool .out-head { padding: 14px clamp(16px, 2vw, 22px); }
.crate-tool .tags-card { margin-top: 18px; }
.crate-tool .tags-body { padding: clamp(16px, 2vw, 22px); line-height: 1.7; }

/* Plaque signaletique : la detacher du contenu qui suit */
.crate-tool .hero { padding-bottom: clamp(28px, 4vh, 44px); }
.crate-tool .hero-sub { letter-spacing: .24em; margin-top: 18px; }
.crate-tool .hero-feats { gap: 10px; margin-top: 20px; }

/* --- 10. MOUVEMENT REDUIT RESPECTE -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .crate-tool *,
  .crate-tool *::before,
  .crate-tool *::after { transition: none !important; animation: none !important; }
}