/* ==========================================================================
   CONVERTISSEUR DE SENSIBILITÉ : feuille de la page outil, d'après la créa
   client « convertisseur-sensibilite ».

   ENTIÈREMENT SCOPÉE sous .convertisseur-page, et c'est une nécessité, pas une
   précaution : la créa nomme ses blocs .calc, .calc-head, .ch-ico, .calc-body,
   .calc-out, .field, .field-ctl, .ctl-step, .out-row, .calc-note, exactement
   les noms du calculateur eDPI (public/css/outil-edpi.css), et .faq, .qa,
   .note, .cta sont des noms de plusieurs feuilles de guides. Sans le scope,
   deux dessins se battraient le jour où une page chargerait les deux.

   OUTIL-EDPI.CSS N'EST PAS CHARGÉE ICI et ses règles de steppers sont
   RECOPIÉES sous ce scope : cet outil n'est pas le calculateur, il a ses
   sélecteurs, son bouton d'inversion et sa barre de partage. Emprunter une
   feuille pour trois règles aurait fait entrer tout le reste. Même arbitrage
   que pour l'outil souris.

   Complète charte.css, qui fournit le reset, le body et la palette de marque
   en :root, et listing.css, dont la page reprend .page-hero.
   ========================================================================== */

  /* ===== HERO =====
     LE HERO PREND LA TEINTE DU BLOC RÉSULTAT (demande client) : la créa le
     posait en dégradé CLAIR, et le client le trouvait à la mauvaise couleur.
     Il reprend donc le dégradé et le halo corail de .calc-out, ce qui l'appaire
     visuellement au bloc de résultat qui le suit de près. Le squelette reste
     .page-hero de listing.css : seules les deux couches de fond sont reprises,
     rien d'autre n'est redéclaré. */
  .convertisseur-page .page-hero {
    background: linear-gradient(135deg, #0e0a14 0%, #241832 100%);
  }
  .convertisseur-page .page-hero::before {
    background: radial-gradient(ellipse at 80% 35%, rgba(232, 99, 126, 0.22) 0%, transparent 62%);
  }
  /* L'accent du titre, en <em> dans la créa comme dans la vue. */
  .convertisseur-page .page-hero-inner h1 em { font-style: normal; color: var(--coral); }

  .convertisseur-page .wrap { max-width: 1000px; margin: 0 auto; padding: 0 40px; }

  /* ===== OUTIL ===== */
  .convertisseur-page .calc { margin: 28px 0 0; border: 1px solid #ececec; border-radius: 20px;
    background: var(--white); overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.05); }
  .convertisseur-page .calc-head { display: flex; align-items: center; gap: 14px;
    padding: 20px 26px 17px; border-bottom: 1px solid #f2f2f2; }
  .convertisseur-page .ch-ico { width: 40px; height: 40px; border-radius: 11px;
    background: var(--coral-light); display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; }
  .convertisseur-page .ch-ico img { width: 22px; height: 22px; object-fit: contain; display: block; }
  /* Le titre est stylé par sa CLASSE, jamais par sa balise : la page choisit
     son niveau selon son plan (h2 ici, l'outil étant le sujet). */
  .convertisseur-page .calc-titre { margin: 0 0 2px; font-size: 1.02rem; font-weight: 700; color: var(--dark); }
  .convertisseur-page .calc-head span { font-size: .78rem; color: var(--text-light); }
  .convertisseur-page .calc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .convertisseur-page .calc-inputs { padding: 24px 26px 26px; }

  .convertisseur-page .field { margin-bottom: 17px; }
  .convertisseur-page .field:last-child { margin-bottom: 0; }
  .convertisseur-page .field label { display: block; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .7px; color: var(--text-light); margin-bottom: 8px; }
  .convertisseur-page .field select { width: 100%; padding: 12px 14px; border: 1px solid #e4e4e4;
    border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: .94rem; font-weight: 600;
    color: var(--dark); background: #fff; outline: none; }
  .convertisseur-page .field select:focus { border-color: var(--coral); }

  /* ===== LES DEUX SÉLECTEURS ET LEUR BOUTON D'INVERSION =====
     DISPOSITION DEMANDÉE PAR LE CLIENT : le jeu d'arrivée monte juste sous le
     jeu de départ, la paire se lit « CS:GO vers Valorant » d'un coup d'oeil, et
     la sensibilité puis le DPI suivent. La créa intercalait les deux champs
     entre les deux sélecteurs.

     LE BOUTON D'INVERSION EST PORTÉ PAR LA LIGNE D'ÉTIQUETTE DU SECOND
     SÉLECTEUR, calé à droite : il tombe donc exactement dans la gouttière entre
     les deux listes, là où le regard fait l'aller-retour, sans consommer de
     ligne à lui. Posé en absolu il aurait fallu le recentrer à la main sur une
     gouttière dont la hauteur dépend de la police et du zoom ; porté par la
     ligne, il se place tout seul et ne peut pas dériver. */
  .convertisseur-page .swap-pair { margin-bottom: 17px; }
  .convertisseur-page .swap-pair .field:first-child { margin-bottom: 16px; }
  .convertisseur-page .swap-pair .field:last-child { margin-bottom: 0; }
  .convertisseur-page .swap-line { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 8px; min-height: 34px; }
  /* L'étiquette perd sa marge basse : c'est la ligne qui la porte. */
  .convertisseur-page .swap-line label { margin-bottom: 0; }
  .convertisseur-page .swap { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid #e4e4e4; background: #fff; color: var(--dark); font-size: .95rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, color .2s, transform .3s;
    touch-action: manipulation; -webkit-user-select: none; user-select: none; }
  .convertisseur-page .swap:hover { border-color: var(--coral); color: var(--coral);
    transform: rotate(180deg); }
  .convertisseur-page .swap:focus-visible { border-color: var(--coral); outline: none; }

  /* ===== STEPPERS =====
     Règles recopiées de outil-edpi.css sous ce scope (voir la tête de
     fichier), au dessin de la créa : 42 px, rayon 10 px, filet #e4e4e4.

     touch-action et user-select : l'appui MAINTENU répète le pas
     (convertisseur-sensibilite.js) ; sans eux, l'appui long tactile déclenche
     menu contextuel ou sélection, qui émettent un pointercancel et coupent la
     répétition. */
  .convertisseur-page .field-ctl { display: flex; align-items: stretch; gap: 8px; min-height: 44px; }
  .convertisseur-page .field-ctl input { flex: 1; min-width: 0; padding: 12px 14px;
    border: 1px solid #e4e4e4; border-radius: 10px; font-family: 'DM Sans', sans-serif;
    font-size: 1.02rem; font-weight: 700; color: var(--dark); outline: none; text-align: center; }
  .convertisseur-page .field-ctl input:focus { border-color: var(--coral); }
  /* Le compteur natif de l'input number ferait doublon avec nos boutons. */
  .convertisseur-page .field-ctl input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
  .convertisseur-page .field-ctl input[type="number"]::-webkit-outer-spin-button,
  .convertisseur-page .field-ctl input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0; }

  .convertisseur-page .ctl-step { flex: 0 0 auto; width: 42px; padding: 0; border: 1px solid #e4e4e4;
    border-radius: 10px; background: #fff; color: var(--dark); font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem; font-weight: 700; line-height: 1; cursor: pointer; outline: none;
    transition: border-color .18s, background .18s, color .18s;
    touch-action: manipulation; -webkit-user-select: none; user-select: none; }
  .convertisseur-page .ctl-step:hover:not(:disabled) { border-color: var(--coral);
    background: var(--coral-light); color: var(--coral-dark); }
  .convertisseur-page .ctl-step:focus-visible { border-color: var(--coral); }
  /* Borne atteinte : le bouton s'éteint sans disparaître, la rangée ne bouge
     donc pas d'un pixel. */
  .convertisseur-page .ctl-step:disabled { opacity: .4; cursor: not-allowed; }

  .convertisseur-page .field-hint { display: block; margin-top: 7px; font-size: .72rem; color: #b4b4b4; }

  /* ===== RÉSULTAT ===== */
  .convertisseur-page .calc-out { padding: 26px 26px 24px;
    background: linear-gradient(135deg, #0e0a14, #241832); position: relative; overflow: hidden; }
  .convertisseur-page .calc-out::after { content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 80% 35%, rgba(232,99,126,.22) 0%, transparent 62%);
    pointer-events: none; }
  .convertisseur-page .calc-out > * { position: relative; z-index: 2; }
  .convertisseur-page .out-sens-label { font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.1px; color: rgba(255,255,255,.38); text-align: center; margin-bottom: 5px; }
  .convertisseur-page .out-sens { font-family: 'Bebas Neue', sans-serif; font-size: 3.6rem;
    line-height: 1; color: #fff; letter-spacing: 1.5px; text-align: center; }
  .convertisseur-page .out-game { display: block; text-align: center; margin: 9px auto 18px;
    font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    padding: 5px 14px; border-radius: 6px; background: rgba(232,99,126,.2);
    border: 1px solid rgba(232,99,126,.3); color: #f2a5b6; width: fit-content; }
  .convertisseur-page .out-rows { display: grid; gap: 9px; }
  .convertisseur-page .out-row { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 11px 14px; border-radius: 10px; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07); }
  .convertisseur-page .out-row span { font-size: .72rem; color: rgba(255,255,255,.42); }
  .convertisseur-page .out-row b { font-size: .9rem; color: #fff; white-space: nowrap; }
  /* La ligne de PREUVE : le cm/360, seul chiffre comparable entre deux jeux. */
  .convertisseur-page .out-row.proof { background: rgba(76,201,176,.1); border-color: rgba(76,201,176,.22); }
  .convertisseur-page .out-row.proof span { color: rgba(160,240,215,.66); }
  .convertisseur-page .out-row.proof b { color: #8ee8ce; }

  .convertisseur-page .share { display: flex; gap: 8px; margin-top: 16px; }
  .convertisseur-page .share input { flex: 1; min-width: 0; padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.1); border-radius: 9px; font-size: .71rem;
    color: rgba(255,255,255,.55); background: rgba(255,255,255,.05); outline: none; }
  .convertisseur-page .share button { padding: 10px 17px; border-radius: 9px; border: none;
    cursor: pointer; background: var(--coral); color: #fff; font-family: 'DM Sans', sans-serif;
    font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; }
  .convertisseur-page .share button:hover { background: var(--coral-dark); }

  .convertisseur-page .calc-note { padding: 15px 26px; background: var(--bg);
    border-top: 1px solid #ececec; font-size: .77rem; color: var(--text-light); line-height: 1.65; }

  /* ===== BANDE DES JEUX ===== */
  .convertisseur-page .games { margin: 30px 0 0; }
  .convertisseur-page .games h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem;
    color: var(--dark); letter-spacing: 1px; margin-bottom: 5px; }
  .convertisseur-page .games > p { font-size: .87rem; color: var(--text-light); line-height: 1.7;
    margin: 0 0 16px; }
  .convertisseur-page .glogos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 11px; }
  .convertisseur-page .glogo { border: 1px solid #ececec; border-radius: 14px; background: var(--white);
    padding: 16px 10px 14px; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .22s;
    display: flex; flex-direction: column; align-items: center; gap: 9px; }
  .convertisseur-page .glogo:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.07);
    border-color: var(--gc); }
  .convertisseur-page .glogo.on { border-color: var(--gc); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
  .convertisseur-page .gl-img { width: 44px; height: 44px; border-radius: 12px; background: var(--bg);
    display: flex; align-items: center; justify-content: center; }
  .convertisseur-page .gl-img img { max-width: 100%; height: auto; border-radius: 9px; }
  /* Pastille d'initiales : le REPLI tant que le logo du jeu n'est pas déposé. */
  .convertisseur-page .gl-ph { font-family: 'Bebas Neue', sans-serif; font-size: 1rem;
    color: var(--gc); letter-spacing: 1px; }
  .convertisseur-page .gl-name { font-size: .73rem; font-weight: 600; color: var(--dark);
    text-align: center; line-height: 1.35; }

  /* ===== TEXTE ===== */
  .convertisseur-page .txt { max-width: 760px; margin: 0 auto; padding: 44px 0 10px; }
  .convertisseur-page .txt h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem;
    color: var(--dark); letter-spacing: 1px; margin: 34px 0 13px; }
  .convertisseur-page .txt h2:first-child { margin-top: 0; }
  .convertisseur-page .txt p { font-size: .91rem; color: var(--text-light); line-height: 1.9; margin: 0 0 15px; }
  .convertisseur-page .txt p strong { color: var(--text); font-weight: 600; }
  .convertisseur-page .txt a { color: var(--coral-dark); text-decoration: none;
    border-bottom: 1px solid rgba(232,99,126,.3); }
  .convertisseur-page .txt a:hover { background: var(--coral-light); }

  .convertisseur-page .note { margin: 20px 0; padding: 19px 23px; border-radius: 14px;
    border-left: 4px solid #4cc9b0; background: #eefaf7; }
  .convertisseur-page .note p { margin: 0; font-size: .87rem; color: #2f6659; line-height: 1.78; }
  .convertisseur-page .note p strong { color: #1f4a40; }
  .convertisseur-page .note .t { display: flex; align-items: center; gap: 9px; font-size: .71rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #38a892; margin-bottom: 7px; }
  .convertisseur-page .note .t img { width: 16px; height: 16px; object-fit: contain; display: block; }
  .convertisseur-page .note.info { border-left-color: #5c8ee6; background: #eaf1fc; }
  .convertisseur-page .note.info p { color: #3d5a80; }
  .convertisseur-page .note.info p strong { color: #2b4260; }
  .convertisseur-page .note.info .t { color: #3f6fc4; }

  .convertisseur-page .faq { display: grid; gap: 13px; margin-top: 18px; }
  .convertisseur-page .qa { background: var(--white); border: 1px solid #ececec; border-radius: 14px;
    padding: 20px 22px; }
  .convertisseur-page .qa h3 { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 9px;
    font-size: .92rem; line-height: 1.4; color: var(--dark); }
  .convertisseur-page .qa h3::before { content: '?'; flex-shrink: 0; width: 23px; height: 23px;
    border-radius: 7px; background: var(--coral-light); color: var(--coral-dark); font-size: .8rem;
    font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .convertisseur-page .qa p { margin: 0; font-size: .86rem; color: var(--text-light); line-height: 1.82; }
  .convertisseur-page .qa p + p { margin-top: 9px; }

  .convertisseur-page .cta { margin: 30px 0 0; padding: 24px 28px; border-radius: 18px;
    background: var(--white); border: 1px solid #ececec; display: flex; align-items: center;
    justify-content: space-between; gap: 22px; flex-wrap: wrap; }
  .convertisseur-page .cta h3 { margin: 0 0 5px; font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem; color: var(--dark); letter-spacing: 1px; }
  .convertisseur-page .cta p { margin: 0; font-size: .85rem; color: var(--text-light);
    line-height: 1.65; max-width: 480px; }
  .convertisseur-page .cta a { display: inline-flex; align-items: center; gap: 9px; padding: 13px 25px;
    border-radius: 10px; background: var(--dark); color: #fff; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; text-decoration: none; transition: all .2s;
    white-space: nowrap; }
  .convertisseur-page .cta a:hover { background: var(--coral); transform: translateY(-2px); }
  .convertisseur-page .cta a img { width: 18px; height: 18px; object-fit: contain; display: block; }
  .convertisseur-page .end { padding-bottom: 56px; }

  @media (max-width: 900px) {
    .convertisseur-page .wrap { padding-left: 20px; padding-right: 20px; }
    .convertisseur-page .calc-body { grid-template-columns: 1fr; }
    .convertisseur-page .calc-inputs,
    .convertisseur-page .calc-out { padding-left: 20px; padding-right: 20px; }
    .convertisseur-page .out-sens { font-size: 2.7rem; }
    .convertisseur-page .glogos { grid-template-columns: repeat(3, 1fr); }
    .convertisseur-page .cta { flex-direction: column; align-items: flex-start; }
  }

  @media (prefers-reduced-motion: reduce) {
    .convertisseur-page .swap:hover { transform: none; }
  }