/* ==========================================================================
   GÉNÉRATEUR DE CROSSHAIR VALORANT
   Feuille de la page /fr/generateur-crosshair-valorant.

   NOM DU FICHIER : « crosshair.css » était DÉJÀ PRIS par la page crosshair
   placement, d'où « generateur-crosshair.css », qui suit le slug de la page
   comme quel-pc.css ou chaise-gaming.css suivent le leur. La classe de scope
   demandée, `.generateur-crosshair-page`, est en revanche celle que porte aussi le corps
   de la page crosshair placement : les deux feuilles ne se croisent jamais
   (chacune n'est chargée que par sa page), mais le nom est bien partagé.

   DEUX BLOCS, DEUX AMBIANCES, UN SEUL SCOPE.
   La page réunit deux maquettes : l'outil (fond sombre, jetons VALORANT) et la
   partie rédactionnelle de la créa (fond clair, préfixe ilv-). Le hero, lui,
   est celui des fiches agents et vit dans listing.css : rien ici ne le touche.

   TOUT EST SCOPÉ SOUS .generateur-crosshair-page, sans aucune exception. Le prototype posait
   ses règles en GLOBAL (:root, body, *, html, input[type=range], .btn, .card,
   .grid, .search…) : servies telles quelles, elles repeindraient le méga menu,
   le pied de page et toutes les autres pages du site, qui chargent agent.css
   et mega-menu.css AVANT cette feuille. Les jetons de l'outil (--void, --panel,
   --red…) sont donc posés sur le CONTENEUR DE L'OUTIL, et les jetons de la
   créa (--ilv-*) sur le conteneur de page, jamais en :root.

   Le fond sombre ne déborde pas non plus : il est porté par .crosshair-outil, pas
   par body. La partie rédactionnelle garde les couleurs claires de la créa.
   ========================================================================== */


/* ==========================================================================
   POLICES DE L'OUTIL, AUTO-HÉBERGÉES
   Décision client du 04/08 : aucun appel à Google Fonts, comme le reste du
   site depuis le 28/07 (fonts.css). Fichiers dans /fonts, sous-ensembles
   latin + latin-ext (le latin-ext couvre le Œ de « Cœur »). Archivo et Big
   Shoulders Display sont des polices variables : un fichier couvre toutes
   les graisses utilisées.
   ========================================================================== */

/* latin-ext */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* latin */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* latin-ext */
@font-face{
  font-family:'Big Shoulders Display';font-style:normal;font-weight:600 800;font-display:swap;
  src:url(/fonts/big-shoulders-display-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* latin */
@font-face{
  font-family:'Big Shoulders Display';font-style:normal;font-weight:600 800;font-display:swap;
  src:url(/fonts/big-shoulders-display-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* latin-ext */
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/dm-mono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* latin */
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/dm-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* latin-ext */
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/dm-mono-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* latin */
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/dm-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ==========================================================================
   JETONS ET RÉINITIALISATION
   ========================================================================== */

/* Jetons de la créa rédactionnelle (bloc :root de la maquette). */
.generateur-crosshair-page{
  --ilv-coral:#E8637E; --ilv-coral-dark:#d14d67; --ilv-coral-light:#fce4e9;
  --ilv-dark:#1a1a2e; --ilv-text:#2d2d2d; --ilv-text-light:#6b6b6b;
  --ilv-bg:#fafafa; --ilv-white:#fff;

  /* Le bleu des tableaux du site, celui de la page configuration : il n'est
     posé QUE sur les tableaux (voir plus bas), la page gardant par ailleurs
     le corail de la marque. */
  --ilv-bleu:#5c8ee6; --ilv-bleu-dark:#3f6fc4;
}

/* Jetons de l'outil + ce que le prototype mettait sur body. `min-height:100vh`
   est le seul réglage abandonné : l'outil est un bloc de page, pas la page. */
.generateur-crosshair-page .crosshair-outil{
  --void:#0A121A;      /* fond du bloc outil */
  --panel:#101C26;     /* fond des cartes */
  --panel-2:#16242F;   /* en-têtes, éléments surélevés */
  --panel-3:#1D2F3C;   /* boutons secondaires, onglet actif */
  --line:#22333F;      /* bordure discrète */
  --line-hi:#31485A;   /* bordure marquée, rails de sliders */
  --bone:#ECE8E1;      /* texte principal (blanc cassé VALORANT) */
  --dim:#8298A6;       /* texte secondaire */
  --dim-2:#5C7382;     /* texte tertiaire, légendes */
  --red:#FF4655;       /* accent principal VALORANT */
  --red-deep:#B32A36;  /* réservé (survols futurs) */
  --mint:#4AF2C0;      /* accent secondaire : valeurs, focus clavier */

  /* Encoche caractéristique de l'UI VALORANT : coin bas-droit coupé à 45°.
     clip-path rogne aussi les contours de focus : à ne poser que sur des
     conteneurs, jamais sur un élément focusable. */
  --notch:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);

  background:var(--void);
  color:var(--bone);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px;
  line-height:1.45;
  /* Deux halos très faibles pour éviter un aplat mort. Purement décoratif. */
  background-image:
    radial-gradient(900px 500px at 12% -10%, rgba(255,70,85,.10), transparent 60%),
    radial-gradient(700px 500px at 95% 8%, rgba(74,242,192,.055), transparent 60%);
}

/* Le reset global des deux maquettes, ramené aux deux blocs qu'il servait.
   Il n'est pas décoratif : sans lui, les marges de titres et de paragraphes
   d'agent.css entrent dans l'outil et dans les tableaux. */
.generateur-crosshair-page .crosshair-outil,
.generateur-crosshair-page .crosshair-outil *,
.generateur-crosshair-page .ilv-content,
.generateur-crosshair-page .ilv-content *{box-sizing:border-box;margin:0;padding:0}


/* ==========================================================================
   OUTIL · TYPOGRAPHIE
   Trois rôles : display (titres condensés), mono (données et codes), body.
   ========================================================================== */
.generateur-crosshair-page .crosshair-outil .dsp{font-family:'Big Shoulders Display','Archivo Narrow',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:.95}
.generateur-crosshair-page .crosshair-outil .mono{font-family:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace}

/* Étiquette de section : petit tiret rouge + texte espacé. */
.generateur-crosshair-page .crosshair-outil .eyebrow{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim-2);display:flex;align-items:center;gap:8px;
}
.generateur-crosshair-page .crosshair-outil .eyebrow::before{content:"";width:14px;height:2px;background:var(--red);flex:none}


/* ==========================================================================
   OUTIL · GRILLE PRINCIPALE
   Deux colonnes sur desktop : scène (fluide) + panneau (470px max).
   minmax(0,1fr) et non 1fr : sans ça, le canvas empêche la colonne de
   rétrécir sous sa largeur intrinsèque et la grille déborde.
   ========================================================================== */
.generateur-crosshair-page .crosshair-outil .app{
  max-width:1440px;margin:0 auto;padding:28px 20px 64px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:22px;align-items:start;
}
@media (max-width:1080px){
  .generateur-crosshair-page .crosshair-outil .app{grid-template-columns:minmax(0,1fr);padding:18px 14px 48px}
}

.generateur-crosshair-page .crosshair-outil .card{background:var(--panel);border:1px solid var(--line);position:relative}
.generateur-crosshair-page .crosshair-outil .card.notched{clip-path:var(--notch)}
.generateur-crosshair-page .crosshair-outil .card-hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--line);background:var(--panel-2);
}
.generateur-crosshair-page .crosshair-outil .card-hd h2{font-family:'Big Shoulders Display',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:19px;letter-spacing:.03em;line-height:1}


/* ==========================================================================
   OUTIL · SCÈNE (colonne gauche) : aperçu + code + test de visibilité
   ========================================================================== */
.generateur-crosshair-page .crosshair-outil .stage{display:flex;flex-direction:column;gap:14px;position:sticky;top:20px}
/* Sticky désactivé en une colonne, sinon l'aperçu masque le panneau. */
@media (max-width:1080px){.generateur-crosshair-page .crosshair-outil .stage{position:static}}

.generateur-crosshair-page .crosshair-outil .viewport-wrap{position:relative;background:#000;border:1px solid var(--line);overflow:hidden}
.generateur-crosshair-page .crosshair-outil .viewport-wrap.notched{clip-path:var(--notch)}
/* Le canvas est fluide en largeur ; sa hauteur est fixée en JS (resizeView)
   pour respecter CONFIG.viewRatio et le devicePixelRatio. */
.generateur-crosshair-page #view{display:block;width:100%;height:auto;touch-action:manipulation}

/* HUD superposé au canvas. pointer-events:none sur le conteneur pour ne pas
   intercepter les clics, réactivé sur les enfants interactifs. */
.generateur-crosshair-page .crosshair-outil .hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:12px}
.generateur-crosshair-page .crosshair-outil .hud > *{pointer-events:auto}
.generateur-crosshair-page .crosshair-outil .hud-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.generateur-crosshair-page .crosshair-outil .hud-row.bottom{justify-content:space-between;align-items:flex-end}

.generateur-crosshair-page .crosshair-outil .chipset{display:flex;gap:4px;flex-wrap:wrap;background:rgba(6,12,17,.72);padding:4px;border:1px solid rgba(236,232,225,.10);backdrop-filter:blur(6px)}
.generateur-crosshair-page .crosshair-outil .chip{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);background:transparent;border:0;padding:5px 9px;cursor:pointer;transition:.14s;
}
.generateur-crosshair-page .crosshair-outil .chip:hover{color:var(--bone);background:rgba(236,232,225,.08)}
/* L'état actif passe par aria-pressed : l'accessibilité pilote le style, pas
   une classe parallèle qu'on risquerait de désynchroniser. */
.generateur-crosshair-page .crosshair-outil .chip[aria-pressed="true"]{background:var(--red);color:#fff}

.generateur-crosshair-page .crosshair-outil .sim{display:flex;gap:6px;align-items:center}
.generateur-crosshair-page .crosshair-outil .sim-btn{
  font-family:'Big Shoulders Display',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:15px;letter-spacing:.05em;color:var(--bone);
  background:rgba(6,12,17,.72);border:1px solid rgba(236,232,225,.16);
  padding:7px 14px 6px;cursor:pointer;transition:.12s;backdrop-filter:blur(6px);
  clip-path:polygon(0 0,100% 0,100% 100%,7px 100%,0 calc(100% - 7px));
}
.generateur-crosshair-page .crosshair-outil .sim-btn:hover{border-color:var(--red);color:#fff}
/* .on est piloté en JS ; :active couvre le maintien du bouton Tirer. */
.generateur-crosshair-page .crosshair-outil .sim-btn.on,
.generateur-crosshair-page .crosshair-outil .sim-btn:active{background:var(--red);border-color:var(--red);color:#fff}

.generateur-crosshair-page .crosshair-outil .zoomer{display:flex;align-items:center;gap:8px;background:rgba(6,12,17,.72);border:1px solid rgba(236,232,225,.10);padding:5px 10px;backdrop-filter:blur(6px)}
.generateur-crosshair-page .crosshair-outil .zoomer label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.generateur-crosshair-page .crosshair-outil .zoomer input[type=range]{width:96px}
.generateur-crosshair-page .crosshair-outil .zoomer output{font-family:'DM Mono',monospace;font-size:11px;color:var(--mint);min-width:26px;text-align:right}


/* ==========================================================================
   OUTIL · BARRE DE CODE
   Un seul champ sert à l'affichage et à l'import : c'est volontaire, ça évite
   deux zones de texte qui se contredisent.
   ========================================================================== */
.generateur-crosshair-page .crosshair-outil .codebar{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--panel);border:1px solid var(--line)}
.generateur-crosshair-page .crosshair-outil .codebar .lbl{display:flex;justify-content:space-between;align-items:center;gap:10px}
.generateur-crosshair-page .crosshair-outil .code-row{display:flex;gap:6px}
.generateur-crosshair-page .crosshair-outil .code-field{
  flex:1;min-width:0; /* min-width:0 obligatoire, sinon l'input refuse de rétrécir */
  background:#060D13;border:1px solid var(--line-hi);color:var(--mint);
  font-family:'DM Mono',monospace;font-size:12px;padding:11px 12px;letter-spacing:.01em;
}
.generateur-crosshair-page .crosshair-outil .code-field:focus{outline:2px solid var(--red);outline-offset:-1px;border-color:var(--red)}

/* Bouton générique. .primary = action principale, .ghost = action mineure,
   .sm = version compacte. L'encoche est en bas-gauche ici pour contraster
   avec celle des panneaux (bas-droite). */
.generateur-crosshair-page .crosshair-outil .btn{
  font-family:'Big Shoulders Display',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:16px;letter-spacing:.05em;line-height:1;
  border:1px solid var(--line-hi);background:var(--panel-3);color:var(--bone);
  padding:11px 15px 9px;cursor:pointer;transition:.12s;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px));
}
.generateur-crosshair-page .crosshair-outil .btn:hover{background:var(--line-hi);color:#fff}
.generateur-crosshair-page .crosshair-outil .btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.generateur-crosshair-page .crosshair-outil .btn.primary:hover{background:#ff5c69}
.generateur-crosshair-page .crosshair-outil .btn.ghost{background:transparent}
.generateur-crosshair-page .crosshair-outil .btn.sm{font-size:13px;padding:7px 10px 6px}
/* Focus clavier visible sur tout ce qui est actionnable. Ne pas retirer. */
.generateur-crosshair-page .crosshair-outil .btn:focus-visible,
.generateur-crosshair-page .crosshair-outil .chip:focus-visible,
.generateur-crosshair-page .crosshair-outil .sim-btn:focus-visible,
.generateur-crosshair-page .crosshair-outil .tab:focus-visible{outline:2px solid var(--mint);outline-offset:2px}


/* ==========================================================================
   OUTIL · TEST DE VISIBILITÉ
   Six tuiles, viseur dessiné à l'échelle 1 (taille réelle 1080p).
   Les fonds sont définis dans le JS (tableau STRIP).
   ========================================================================== */
.generateur-crosshair-page .crosshair-outil .visib{padding:14px 16px;background:var(--panel);border:1px solid var(--line)}
.generateur-crosshair-page .crosshair-outil .visib-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
@media (max-width:560px){.generateur-crosshair-page .crosshair-outil .visib-strip{grid-template-columns:repeat(3,1fr)}}
.generateur-crosshair-page .crosshair-outil .tile{position:relative;border:1px solid var(--line)}
.generateur-crosshair-page .crosshair-outil .tile canvas{display:block;width:100%;height:auto}
.generateur-crosshair-page .crosshair-outil .tile span{
  position:absolute;left:0;bottom:0;right:0;font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 4px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.72));text-align:center;
}


/* ==========================================================================
   OUTIL · PANNEAU (colonne droite) : onglets + contenus
   ========================================================================== */
.generateur-crosshair-page .crosshair-outil .tabs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-bottom:0;background:var(--panel-2)}
.generateur-crosshair-page .crosshair-outil .tab{
  font-family:'Big Shoulders Display',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:19px;letter-spacing:.04em;color:var(--dim);background:transparent;border:0;
  border-bottom:2px solid transparent;padding:14px 6px 11px;cursor:pointer;transition:.14s;
}
.generateur-crosshair-page .crosshair-outil .tab:hover{color:var(--bone)}
.generateur-crosshair-page .crosshair-outil .tab[aria-selected="true"]{color:#fff;border-bottom-color:var(--red);background:var(--panel-3)}
/* Si tu ajoutes un 4e onglet, pense à changer repeat(3,1fr) ci-dessus. */
.generateur-crosshair-page .crosshair-outil .tabpanel{border:1px solid var(--line);background:var(--panel);padding:16px}
/* [hidden] doit rester efficace : ne donne jamais display:flex/grid à
   .tabpanel, sinon la règle ci-dessous est écrasée et tous les onglets
   s'affichent en même temps. */
.generateur-crosshair-page .crosshair-outil .tabpanel[hidden]{display:none}

.generateur-crosshair-page .crosshair-outil .searchrow{display:flex;gap:6px;margin-bottom:14px}
.generateur-crosshair-page .crosshair-outil .search{
  flex:1;background:#060D13;border:1px solid var(--line-hi);color:var(--bone);
  font-family:'Archivo',sans-serif;font-size:13px;padding:10px 12px;
}
.generateur-crosshair-page .crosshair-outil .search::placeholder{color:var(--dim-2)}
.generateur-crosshair-page .crosshair-outil .search:focus{outline:2px solid var(--red);outline-offset:-1px}


/* --------------------------------------------------------------------------
   OUTIL · GRILLE DE PRÉRÉGLAGES
   auto-fill + minmax(126px,1fr) : le nombre de colonnes s'adapte tout seul.
   -------------------------------------------------------------------------- */
.generateur-crosshair-page .crosshair-outil .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:8px}
.generateur-crosshair-page .crosshair-outil .preset{
  background:var(--panel-2);border:1px solid var(--line);padding:8px;text-align:left;
  cursor:pointer;transition:.14s;display:flex;flex-direction:column;gap:7px;position:relative;
}
.generateur-crosshair-page .crosshair-outil .preset:hover{border-color:var(--red);background:var(--panel-3);transform:translateY(-2px)}
.generateur-crosshair-page .crosshair-outil .preset:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
/* .active = préréglage actuellement chargé dans la scène. */
.generateur-crosshair-page .crosshair-outil .preset.active{border-color:var(--mint)}
/* La vignette. Son FOND GRIS MOYEN est celui que peint le script (§12) : il est
   repris ici pour que la tuile ne clignote pas en sombre avant le premier
   dessin. Le buffer du canvas est dimensionné EN PIXELS ÉCRAN par le script,
   qui pose aussi sa hauteur en style : `height:auto` ne sert que de repli
   avant son passage. */
.generateur-crosshair-page .crosshair-outil .preset .thumb{background:#83837E;border:1px solid var(--line);display:block;width:100%;height:auto}
.generateur-crosshair-page .crosshair-outil .preset .nm{font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;font-size:16px;letter-spacing:.03em;line-height:1;color:var(--bone)}
.generateur-crosshair-page .crosshair-outil .preset .meta{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim-2)}
/* Bouton Copier révélé au survol, mais toujours atteignable au clavier
   grâce à :focus-visible. */
.generateur-crosshair-page .crosshair-outil .preset .copy{
  position:absolute;top:8px;right:8px;background:rgba(6,12,17,.85);border:1px solid var(--line-hi);
  color:var(--dim);font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.08em;
  padding:4px 6px;cursor:pointer;opacity:0;transition:.14s;text-transform:uppercase;
}
.generateur-crosshair-page .crosshair-outil .preset:hover .copy,
.generateur-crosshair-page .crosshair-outil .preset .copy:focus-visible{opacity:1}
.generateur-crosshair-page .crosshair-outil .preset .copy:hover{background:var(--red);color:#fff;border-color:var(--red)}
.generateur-crosshair-page .crosshair-outil .empty{color:var(--dim);font-size:13px;padding:24px 4px;text-align:center}


/* --------------------------------------------------------------------------
   OUTIL · ÉDITEUR
   .ctl est la ligne de contrôle standard : libellé | slider | valeur.
   .ctl.wide sert aux interrupteurs (libellé | interrupteur).
   -------------------------------------------------------------------------- */
.generateur-crosshair-page .crosshair-outil .group{border-top:1px solid var(--line);padding:14px 0 4px}
.generateur-crosshair-page .crosshair-outil .group:first-of-type{border-top:0;padding-top:2px}
.generateur-crosshair-page .crosshair-outil .group-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.generateur-crosshair-page .crosshair-outil .group-hd h3{font-family:'Big Shoulders Display',sans-serif;font-weight:800;text-transform:uppercase;font-size:17px;letter-spacing:.05em;line-height:1}

.generateur-crosshair-page .crosshair-outil .ctl{display:grid;grid-template-columns:minmax(96px,1.05fr) minmax(0,1.5fr) 40px;align-items:center;gap:10px;padding:5px 0}
.generateur-crosshair-page .crosshair-outil .ctl > label{font-size:12.5px;color:var(--dim)}
.generateur-crosshair-page .crosshair-outil .ctl output{font-family:'DM Mono',monospace;font-size:12px;color:var(--mint);text-align:right}
.generateur-crosshair-page .crosshair-outil .ctl.wide{grid-template-columns:1fr auto}

/* Slider redessiné. Les préfixes -webkit- et -moz- ne se fusionnent pas :
   toute modification doit être répétée dans les deux blocs. */
.generateur-crosshair-page .crosshair-outil input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;background:transparent;height:18px;cursor:pointer;
}
.generateur-crosshair-page .crosshair-outil input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line-hi)}
.generateur-crosshair-page .crosshair-outil input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--red);margin-top:-5px;border:0}
.generateur-crosshair-page .crosshair-outil input[type=range]:hover::-webkit-slider-thumb{background:#fff}
.generateur-crosshair-page .crosshair-outil input[type=range]::-moz-range-track{height:2px;background:var(--line-hi)}
.generateur-crosshair-page .crosshair-outil input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--red);border:0;border-radius:0}
.generateur-crosshair-page .crosshair-outil input[type=range]:focus-visible{outline:2px solid var(--mint);outline-offset:4px}

/* Interrupteur. C'est un bouton role="switch" : l'état vit dans aria-checked,
   le CSS ne fait que le refléter. */
.generateur-crosshair-page .crosshair-outil .sw{position:relative;width:38px;height:19px;flex:none;background:var(--line);border:1px solid var(--line-hi);cursor:pointer;transition:.14s}
.generateur-crosshair-page .crosshair-outil .sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;background:var(--dim);transition:.14s}
.generateur-crosshair-page .crosshair-outil .sw[aria-checked="true"]{background:rgba(255,70,85,.28);border-color:var(--red)}
.generateur-crosshair-page .crosshair-outil .sw[aria-checked="true"]::after{left:20px;background:var(--red)}
.generateur-crosshair-page .crosshair-outil .sw:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* Nuancier. Les 8 premières pastilles reprennent COLORS (JS) ; la 9e, .custom,
   ouvre la couleur personnalisée (index 8 côté VALORANT). */
.generateur-crosshair-page .crosshair-outil .swatches{display:flex;flex-wrap:wrap;gap:6px}
.generateur-crosshair-page .crosshair-outil .sw-col{width:30px;height:30px;border:1px solid var(--line-hi);cursor:pointer;position:relative;transition:.12s}
.generateur-crosshair-page .crosshair-outil .sw-col:hover{transform:scale(1.09)}
.generateur-crosshair-page .crosshair-outil .sw-col[aria-pressed="true"]{outline:2px solid var(--bone);outline-offset:2px}
.generateur-crosshair-page .crosshair-outil .sw-col:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.generateur-crosshair-page .crosshair-outil .sw-col.custom{background:conic-gradient(#ff4655,#ffe14a,#4af2c0,#5aa9ff,#c07dff,#ff4655)}
.generateur-crosshair-page .crosshair-outil .hexrow{display:flex;gap:6px;align-items:center;margin-top:10px}
.generateur-crosshair-page .crosshair-outil .hexrow input[type=text]{
  width:110px;background:#060D13;border:1px solid var(--line-hi);color:var(--bone);
  font-family:'DM Mono',monospace;font-size:12px;padding:8px 10px;text-transform:uppercase;
}
.generateur-crosshair-page .crosshair-outil .hexrow input[type=color]{width:38px;height:34px;background:transparent;border:1px solid var(--line-hi);padding:2px;cursor:pointer}
.generateur-crosshair-page .crosshair-outil .hexrow input[type=text]:focus,
.generateur-crosshair-page .crosshair-outil .hexrow input[type=color]:focus{outline:2px solid var(--red);outline-offset:-1px}

.generateur-crosshair-page .crosshair-outil .actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

.generateur-crosshair-page .crosshair-outil .saved{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.generateur-crosshair-page .crosshair-outil .saved-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.generateur-crosshair-page .crosshair-outil .saved-item{display:flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--line);padding:5px 6px 5px 8px}
.generateur-crosshair-page .crosshair-outil .saved-item span{font-family:'DM Mono',monospace;font-size:11px;color:var(--bone)}
.generateur-crosshair-page .crosshair-outil .saved-item button{background:none;border:0;color:var(--dim-2);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px}
.generateur-crosshair-page .crosshair-outil .saved-item button:hover{color:var(--red)}
.generateur-crosshair-page .crosshair-outil .hint{font-size:12px;color:var(--dim-2);margin-top:10px;line-height:1.5}

/* Numérotation automatique des étapes d'import via counter CSS. */
.generateur-crosshair-page .crosshair-outil .howto{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.generateur-crosshair-page .crosshair-outil .howto ol{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:7px;margin-top:10px}
.generateur-crosshair-page .crosshair-outil .howto li{counter-increment:s;display:flex;gap:10px;font-size:12.5px;color:var(--dim);align-items:baseline}
.generateur-crosshair-page .crosshair-outil .howto li::before{content:counter(s,decimal-leading-zero);font-family:'DM Mono',monospace;font-size:10px;color:var(--red);flex:none;letter-spacing:.06em}

/* Notification éphémère. Durée pilotée par CONFIG.toastMs côté JS. Elle vit
   DANS le conteneur de l'outil, dont elle lit les jetons ; position:fixed la
   sort du flux de toute façon. */
.generateur-crosshair-page #toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:var(--red);color:#fff;font-family:'Big Shoulders Display',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;font-size:17px;padding:11px 20px 9px;
  opacity:0;pointer-events:none;transition:.2s;z-index:50;
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px));
}
.generateur-crosshair-page #toast.show{opacity:1;transform:translate(-50%,0)}

/* Respect de la préférence système. La boucle canvas continue de tourner,
   mais rien ne bouge tant que l'utilisateur n'agit pas. */
@media (prefers-reduced-motion:reduce){
  .generateur-crosshair-page .crosshair-outil *{transition:none!important;animation:none!important}
  .generateur-crosshair-page .crosshair-outil .preset:hover{transform:none}
}


/* ==========================================================================
   ADAPTATION MOBILE DE L'OUTIL (ajout à la maquette)
   ----------------------------------------------------------------------------
   LE POINT NOIR CONSTATÉ SUR LE PROTOTYPE : sous 720px, le HUD superposé
   recouvrait la moitié de l'aperçu, décor en haut et simulation en bas. Les
   commandes passent donc SOUS le canvas, dans le même bloc bordé, en bandes
   horizontales défilantes. En desktop, rien ne change : la superposition est
   la maquette, et elle y est confortable.
   ========================================================================== */
@media (max-width:720px){
  /* L'encoche coupait le coin bas-droit, là où arrivent maintenant les
     commandes : elle est retirée le temps du mobile. */
  .generateur-crosshair-page .crosshair-outil .viewport-wrap.notched{clip-path:none}

  /* Le HUD rentre dans le flux, sous le canvas. */
  .generateur-crosshair-page .crosshair-outil .hud{position:static;padding:8px;gap:8px}
  .generateur-crosshair-page .crosshair-outil .hud-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .generateur-crosshair-page .crosshair-outil .hud-row.bottom{justify-content:flex-start;align-items:center;gap:8px}

  /* Bandes défilantes : les puces et les boutons ne se compriment plus, ils
     défilent. flex:none est indispensable, sinon flexbox les écrase. */
  .generateur-crosshair-page .crosshair-outil .chipset{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
  /* Puces agrandies : 10px de retrait vertical portent la zone tactile à une
     trentaine de pixels, contre 23 dans la maquette. */
  .generateur-crosshair-page .crosshair-outil .chip{flex:none;padding:10px 12px}
  .generateur-crosshair-page .crosshair-outil .sim{flex:none}
  .generateur-crosshair-page .crosshair-outil .sim-btn{flex:none;padding:9px 14px 8px}
  .generateur-crosshair-page .crosshair-outil .zoomer{flex:none}
  .generateur-crosshair-page .crosshair-outil .zoomer input[type=range]{width:74px}

  /* La barre de code porte quatre éléments avec le bouton de partage : le
     champ prend une ligne à lui, les boutons suivent. */
  .generateur-crosshair-page .crosshair-outil .code-row{flex-wrap:wrap}
  .generateur-crosshair-page .crosshair-outil .code-field{flex:1 1 100%}

  /* « Personnaliser » est le plus long des trois onglets : sans cette baisse
     de corps, il déborde de sa colonne. */
  .generateur-crosshair-page .crosshair-outil .tab{font-size:15px;letter-spacing:.02em;padding:12px 3px 10px}
}


/* ==========================================================================
   PARTIE RÉDACTIONNELLE (créa, préfixe ilv-)
   Le hero, l'en-tête et le pied de page de la maquette ne sont pas repris :
   ce sont ceux du site. Seul le corps de texte l'est.
   ========================================================================== */
.generateur-crosshair-page .ilv-content{background:var(--ilv-bg);font-family:'DM Sans',sans-serif;border-top:1px solid #ececec}
.generateur-crosshair-page .ilv-in{max-width:900px;margin:0 auto;padding:48px 40px 20px}
.generateur-crosshair-page .ilv-in h2{font-family:'Bebas Neue',sans-serif;font-size:1.66rem;color:var(--ilv-dark);letter-spacing:1px;
  line-height:1.12;margin:44px 0 15px;scroll-margin-top:20px}
.generateur-crosshair-page .ilv-in h2:first-child{margin-top:0}
.generateur-crosshair-page .ilv-in h3{font-size:1rem;font-weight:700;color:var(--ilv-dark);margin:26px 0 10px}
.generateur-crosshair-page .ilv-in p{font-size:.92rem;color:var(--ilv-text-light);line-height:1.9;margin:0 0 16px}
.generateur-crosshair-page .ilv-in p strong{color:var(--ilv-text);font-weight:600}
.generateur-crosshair-page .ilv-in a.lnk{color:var(--ilv-coral-dark);text-decoration:none;border-bottom:1px solid rgba(232,99,126,.32)}
.generateur-crosshair-page .ilv-in a.lnk:hover{background:var(--ilv-coral-light)}

.generateur-crosshair-page .ilv-steps{position:relative;padding-left:44px;margin:22px 0}
.generateur-crosshair-page .ilv-steps::before{content:'';position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:#ececec}
.generateur-crosshair-page .ilv-step{position:relative;margin-bottom:20px}
.generateur-crosshair-page .ilv-step:last-child{margin-bottom:0}
.generateur-crosshair-page .ilv-step::before{content:attr(data-n);position:absolute;left:-44px;top:0;width:32px;height:32px;border-radius:10px;
  background:var(--ilv-coral);color:#fff;font-family:'Bebas Neue',sans-serif;font-size:.95rem;display:flex;
  align-items:center;justify-content:center;box-shadow:0 0 0 4px var(--ilv-bg)}
.generateur-crosshair-page .ilv-step h3{margin:4px 0 7px}
.generateur-crosshair-page .ilv-step p{margin:0}

/* --------------------------------------------------------------------------
   LES QUATRE TABLEAUX, AU GABARIT DE LA PAGE CONFIGURATION (04/08)
   ----------------------------------------------------------------------------
   Le style de la créa (en-tête en petites capitales de 0.72rem à 55 %
   d'opacité, légende posée en <caption> DANS le cadre, survol rosé) laisse la
   place au gabarit des tableaux du site, celui de configuration-valorant, que
   partagent déjà les armes, le ranked, setup, le ping, le casque, l'écran, le
   clavier et le quel PC :

   - LA LÉGENDE SORT DU CADRE et passe AU-DESSUS, en p.table-note. Le bandeau
     sombre redevient le premier élément du cadre arrondi, d'où le border-top
     retiré ;
   - EN-TÊTE : Bebas Neue à 0.95rem, interlettrage 1.6px, 85 % d'opacité (95 %
     sur la première colonne), 13px/18px de retrait ;
   - LE BLEU de la page configuration (#5c8ee6 / #3f6fc4) remplace le corail de
     la créa sur la cellule mise en avant et sur le survol de ligne : c'est lui
     qui donne aux tableaux du site leur teinte.

   CE QUI NE BOUGE PAS : le rendu mobile en blocs (voir la requête média 900px
   en fin de feuille), sans lequel les 38 boutons « Copier » repasseraient hors
   champ sur téléphone.
   -------------------------------------------------------------------------- */
/* Le sélecteur porte `.ilv-in p` : la règle des paragraphes de la partie
   rédactionnelle est plus spécifique que `.generateur-crosshair-page .table-note`, elle
   ramènerait sinon la légende à 0.92rem et lui rendrait sa marge basse. */
.generateur-crosshair-page .ilv-in p.table-note{margin:22px 0 0;text-align:left;font-size:.76rem;color:var(--ilv-text-light);font-style:italic}
.generateur-crosshair-page .ilv-in p.table-note + .ilv-tw{margin-top:10px}
.generateur-crosshair-page .ilv-tw{border:1px solid #ececec;border-top:0;border-radius:16px;overflow:hidden;background:var(--ilv-white);margin:22px 0}
.generateur-crosshair-page .ilv-tw table{width:100%;border-collapse:collapse}
.generateur-crosshair-page .ilv-tw thead th{background:var(--ilv-dark);color:rgba(255,255,255,.85);font-family:'Bebas Neue',sans-serif;
  font-size:.95rem;letter-spacing:1.6px;text-transform:uppercase;text-align:left;padding:13px 18px;font-weight:400;vertical-align:top}
.generateur-crosshair-page .ilv-tw thead th:first-child{color:rgba(255,255,255,.95)}
.generateur-crosshair-page .ilv-tw tbody tr{border-top:1px solid #f2f2f2;transition:background .2s}
.generateur-crosshair-page .ilv-tw tbody tr:hover{background:#f7fafd}
.generateur-crosshair-page .ilv-tw th[scope="row"]{text-align:left;padding:14px 18px;font-size:.84rem;font-weight:700;color:var(--ilv-dark);white-space:nowrap}
.generateur-crosshair-page .ilv-tw td{padding:14px 18px;font-size:.81rem;color:var(--ilv-text-light);line-height:1.62}
.generateur-crosshair-page .ilv-tw td.reco{color:var(--ilv-bleu-dark);font-weight:700}
.generateur-crosshair-page .ilv-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.7rem;color:var(--ilv-dark);
  background:#f4f4f7;border:1px solid #e6e6ec;border-radius:6px;padding:5px 9px;display:inline-block;
  max-width:340px;overflow-x:auto;white-space:nowrap;vertical-align:middle}
.generateur-crosshair-page .ilv-cp{margin-left:8px;padding:5px 10px;border:none;border-radius:6px;background:var(--ilv-dark);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer}
.generateur-crosshair-page .ilv-cp:hover{background:var(--ilv-coral)}
.generateur-crosshair-page .ilv-team{font-size:.72rem;color:#b4b4b4}

.generateur-crosshair-page .ilv-note{margin:22px 0;padding:19px 23px;border-radius:14px;border-left:4px solid var(--ilv-coral);background:var(--ilv-coral-light)}
.generateur-crosshair-page .ilv-note p{margin:0;font-size:.87rem;color:#8a4d5c;line-height:1.78}
.generateur-crosshair-page .ilv-note .t{display:flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;color:var(--ilv-coral-dark);margin-bottom:7px}
.generateur-crosshair-page .ilv-note.info{border-left-color:#5c8ee6;background:#eaf1fc}
.generateur-crosshair-page .ilv-note.info p{color:#3d5a80}
.generateur-crosshair-page .ilv-note.info .t{color:#3f6fc4}

.generateur-crosshair-page .ilv-faq{display:grid;gap:13px;margin-top:20px}
.generateur-crosshair-page .ilv-qa{background:#fff;border:1px solid #ececec;border-radius:14px;padding:21px 23px}
.generateur-crosshair-page .ilv-qa h3{display:flex;align-items:flex-start;gap:11px;margin:0 0 9px;font-size:.94rem;line-height:1.4}
.generateur-crosshair-page .ilv-qa h3::before{content:'?';flex-shrink:0;width:24px;height:24px;border-radius:7px;background:var(--ilv-coral-light);
  color:var(--ilv-coral-dark);font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.generateur-crosshair-page .ilv-qa p{margin:0;font-size:.87rem;line-height:1.85}

/* Les cartes « Pour aller plus loin ». Une destination absente est rendue en
   DIV et non en lien (doctrine du site, précédent des cartes « Suivre le
   récit » de duality) : les deux sélecteurs sont donc listés partout. */
.generateur-crosshair-page .ilv-rel{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.generateur-crosshair-page .ilv-rel a,
.generateur-crosshair-page .ilv-rel div{display:flex;align-items:center;gap:13px;padding:15px 17px;background:#fff;border:1px solid #ececec;
  border-radius:13px;text-decoration:none;color:inherit;transition:all .22s}
.generateur-crosshair-page .ilv-rel a:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.05);border-color:transparent}
.generateur-crosshair-page .ilv-rel .i{width:36px;height:36px;border-radius:10px;background:var(--ilv-bg);display:flex;align-items:center;
  justify-content:center;font-size:.95rem;flex-shrink:0}
/* Pictos du projet à la place des emojis quand un visuel existe (règle
   client du 04/08) : ico-crosshair et ico-aim ; les autres cartes gardent
   leur emoji jusqu'à l'après-mise en ligne. */
.generateur-crosshair-page .ilv-rel .i img{width:24px;height:auto;display:block}
.generateur-crosshair-page .ilv-note .t img{width:16px;height:auto}
.generateur-crosshair-page .ilv-rel strong{display:block;font-size:.83rem;color:var(--ilv-dark);margin-bottom:2px}
.generateur-crosshair-page .ilv-rel span.d{font-size:.7rem;color:var(--ilv-text-light)}

@media (max-width:900px){
  .generateur-crosshair-page .ilv-in{padding:34px 20px 16px}
  .generateur-crosshair-page .ilv-in h2{font-size:1.4rem}
  .generateur-crosshair-page .ilv-rel{grid-template-columns:1fr}
  .generateur-crosshair-page .ilv-steps{padding-left:38px}
  .generateur-crosshair-page .ilv-step::before{left:-38px;width:28px;height:28px;font-size:.85rem}
  .generateur-crosshair-page .ilv-tw thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .generateur-crosshair-page .ilv-tw tbody tr{display:block;padding:13px 16px}
  .generateur-crosshair-page .ilv-tw th[scope="row"]{display:block;padding:0 0 7px}
  .generateur-crosshair-page .ilv-tw td{display:block;padding:4px 0}
  .generateur-crosshair-page .ilv-code{max-width:100%}

  /* LES QUATRE TABLEAUX TIENNENT DANS LEUR BOÎTE (correctif au défaut de la
     créa, constaté à 375px).

     Les lignes et les cellules passaient déjà en blocs juste au-dessus, mais le
     TABLEAU, lui, restait un display:table : sa largeur suivait donc son
     contenu minimum, et les codes de viseur, insécables (white-space:nowrap),
     le poussaient au-delà de 740px dans une boîte de 335. .ilv-tw ayant
     overflow:hidden, la fin des codes et les 38 boutons « Copier » étaient
     purement hors champ, donc inutilisables au doigt.

     VARIANTE RETENUE : LE PASSAGE EN BLOCS, et non table-layout:fixed. Les
     lignes étant déjà blockifiées, table-layout n'a plus de prise sur elles ;
     et les deux tableaux de texte (réglages, familles) sont déjà rendus en
     cartes empilées, leur lisibilité ne bouge donc pas d'un pixel. Seuls les
     deux tableaux à codes changent, et pour cesser d'être tronqués. */
  .generateur-crosshair-page .ilv-tw table,
  .generateur-crosshair-page .ilv-tw tbody{display:block}

  /* Le code prend la largeur de sa cellule et DÉFILE dans sa propre boîte
     (overflow-x:auto est déjà sur .ilv-code) : le bouton passe donc à la ligne
     suivante, où il est agrandi à une quarantaine de pixels de haut. */
  .generateur-crosshair-page .ilv-cp{margin:9px 0 0;padding:13px 18px;font-size:.66rem}
}