/* ============================================================
   cadrage-gratuit.css — une seule page par jeu
   ============================================================
   Il y avait deux pages par exercice : spiktoku.html et
   spiktoku-free.html, spiktoline.html et spiktoline-free.html… Le même
   jeu, le même fichier .js, mais deux balisages à tenir en phase. Une
   correction sur l'un s'oubliait sur l'autre, et personne ne s'en
   apercevait avant qu'un visiteur ne le signale.

   Désormais une page, et le cadrage se décide à l'ouverture.

   COMMENT ÇA MARCHE. La racine du document porte `cadre-gratuit` ou
   `cadre-abonne`, posé par un script en tête de page — donc AVANT que
   quoi que ce soit ne s'affiche. Les éléments qui n'appartiennent qu'à
   un régime portent `data-si="gratuit"` ou `data-si="abonne"`, et le
   CSS ci-dessous en cache un sur deux. Aucun clignotement : rien n'a
   encore été peint quand la décision est prise.

   CE QUE ÇA NE FAIT PAS. Donner un droit. La classe vient du navigateur,
   donc n'importe qui peut la changer — et n'obtient rien de plus : le
   code des jeux était déjà entier dans la page gratuite, et tout ce qui
   touche aux données passe par les policies RLS de Supabase. Ce fichier
   décide de ce qu'on MONTRE, jamais de ce qu'on PEUT.
   ============================================================ */

.cadre-gratuit [data-si="abonne"]  { display: none !important; }
.cadre-abonne  [data-si="gratuit"] { display: none !important; }

/* ---- Les trois marques de la version gratuite ---- */

/* La pastille du titre. Elle vivait dans le <style> de chaque page -free ;
   elle vit maintenant ici, une fois pour les six exercices.
   
   Elle est HORS DU FLUX : posée dans le titre, elle le décalait vers la
   gauche pour se faire de la place, et un titre qui n'est plus au milieu
   de sa page se remarque avant la pastille elle-même. Elle s'accroche donc
   à la fin du mot, en absolu, et vient mordre légèrement dessus. */
.titre-mot { position: relative; display: inline-block; }

.badge-version-gratuite {
    /* Descendue sur la ligne du titre plutôt que perchée au-dessus : elle
       vient se poser SUR la dernière lettre, comme une étiquette collée
       après coup.
       Le décalage est en POURCENTAGE, donc relatif à la hauteur du titre.
       En em il se serait calculé sur la taille de la pastille elle-même —
       0,42 em de dix pixels, soit quatre : elle n'avait pas bougé. */
    position: absolute; left: 100%; top: 28%;
    margin-left: -0.6em;
    display: inline-block; background: #FFD700; color: #333;
    font-size: 0.65rem; font-weight: 800; padding: 0.15rem 0.4rem; border-radius: 4px;
    transform: rotate(10deg); box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    letter-spacing: 0.05em; line-height: 1; white-space: nowrap;
}

.cta-abonnement-free {
    margin: 2rem auto 1rem; text-align: center; padding: 1.5rem;
    background: rgba(0,137,212,0.04); border-radius: 12px;
    border: 1px solid rgba(0,137,212,0.1); max-width: 480px;
}
.cta-abonnement-free p { color: #666; margin: 0 0 1rem; }
.btn-abonnement-free {
    display: inline-block; background: #c2185b; color: #fff; font-weight: 700;
    font-size: 1.05rem; padding: 0.9rem 2rem; border-radius: 50px; text-decoration: none;
    box-shadow: 0 4px 15px rgba(194,24,91,0.3); transition: background 0.2s, transform 0.2s;
}
.btn-abonnement-free:hover { background: #a31545; transform: translateY(-2px); }
.btn-abonnement-free small { display: block; font-weight: 400; font-size: 0.8rem; opacity: 0.88; margin-top: 0.2rem; }

/* ---- Le réglage qu'on ne règle pas encore ----
   Les cinq niveaux s'ouvrent en gratuit : on ne s'abonne pas à ce qu'on n'a
   pas touché. Ce qui se paie, c'est la profondeur — le curseur qui fait
   passer de quatre propositions à six, d'une grille de trois cases à cinq.
   Il est donc figé, visible, et il dit pourquoi. */

.diff-verrouille { position: relative; }
.diff-verrouille input[type="range"] { opacity: 0.4; cursor: not-allowed; }

/* Le cadenas, posé au milieu du curseur. Il ne prend aucune hauteur —
   c'est tout l'intérêt — et il reste cliquable : c'est le chemin le plus
   court entre « je bute là-dessus » et la page d'abonnement. */
.diff-cadenas {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.35rem; line-height: 1; text-decoration: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.diff-cadenas:hover { transform: translate(-50%, -50%) scale(1.12); }

/* Même mise en page dans les deux régimes. Une règle réduisait autrefois
   la hauteur de l'écran de préparation en gratuit, du temps du bandeau
   jaune : il n'y a plus de bandeau, et le gratuit paraissait plus serré
   que l'abonné pour rien. */