{"id":988,"date":"2026-01-21T21:55:26","date_gmt":"2026-01-21T20:55:26","guid":{"rendered":"https:\/\/lejournaldelessien.com\/?page_id=988"},"modified":"2026-10-06T13:58:39","modified_gmt":"2026-10-06T11:58:39","slug":"un-sim-un-add-on","status":"publish","type":"page","link":"https:\/\/lejournaldelessien.com\/en\/un-sim-un-add-on\/","title":{"rendered":"Un Sim, un add-on"},"content":{"rendered":"<!-- ===== UN SIM, UN ADD-ON \u2013 packs cliquables ===== -->\n\n<style>\n\/* ===== Grille des packs (couleurs : variables globales :root) ===== *\/\n#usuao{\n  display:flex;\n  flex-wrap:wrap;\n  justify-content:center;\n  gap:24px 36px;\n  padding:26px 0 10px;\n}\n\n\/* ===== Un pack : rond + barre dessous (tout est cliquable) ===== *\/\n#usuao .usuao-pack{\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  gap:12px;\n  text-decoration:none;\n  user-select:none;\n  -webkit-tap-highlight-color:transparent;\n}\n\n#usuao .usuao-pack:hover,\n#usuao .usuao-pack:focus{\n  text-decoration:none;\n}\n\n#usuao .usuao-pack:focus-visible{\n  outline:none; \/* le contour s\u2019affiche autour du rond *\/\n}\n\n\/* Le rond *\/\n#usuao .usuao-orb{\n  position:relative;\n  width:240px;\n  height:240px;\n  border-radius:50%;\n  display:grid;\n  place-items:center;\n  overflow:hidden;\n  background:radial-gradient(circle at 50% 30%, #FFFAF6 0%, #FEEEE3 55%, #FBD9C3 100%);\n  box-shadow:0 12px 36px rgba(0,0,0,.12);\n  transition:transform .18s ease, box-shadow .18s ease;\n}\n\n\/* L\u2019anneau p\u00eache \u00e0 l\u2019int\u00e9rieur du rond *\/\n#usuao .usuao-orb__ring{\n  position:absolute;\n  inset:14px;\n  border-radius:50%;\n  border:3px solid var(--peach);\n  box-shadow:0 0 0 10px rgba(255,255,255,.40) inset;\n  pointer-events:none;\n  transition:border-color .18s ease;\n}\n\n\/* L\u2019ic\u00f4ne du pack *\/\n#usuao .usuao-orb__icon{\n  position:relative;\n  width:160px;\n  height:160px;\n  object-fit:contain;\n  filter:drop-shadow(0 10px 16px rgba(75,44,34,.22));\n  transition:transform .18s ease;\n}\n\n\/* La barre au nom du pack (m\u00eame style que tes boutons p\u00eache) *\/\n#usuao .usuao-packbar{\n  min-width:210px;\n  max-width:260px;\n  min-height:44px;\n  padding:6px 22px;\n  box-sizing:border-box;\n  border-radius:999px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  text-align:center;\n  background:var(--peach);\n  box-shadow:0 4px 12px rgba(247,185,149,.45);\n  color:var(--brown);\n  font-size:17px;\n  font-weight:600;\n  letter-spacing:.2px;\n  \/* cach\u00e9e par d\u00e9faut, appara\u00eet au survol *\/\n  opacity:0;\n  transform:translateY(-6px);\n  transition:opacity .16s ease, transform .16s ease;\n}\n\n\/* ===== Survol \/ navigation au clavier ===== *\/\n#usuao .usuao-pack:hover .usuao-orb,\n#usuao .usuao-pack:focus-visible .usuao-orb{\n  transform:translateY(-2px);\n  box-shadow:0 16px 44px rgba(0,0,0,.16);\n}\n\n#usuao .usuao-pack:hover .usuao-orb__ring,\n#usuao .usuao-pack:focus-visible .usuao-orb__ring{\n  border-color:var(--peach-dark);\n}\n\n#usuao .usuao-pack:hover .usuao-orb__icon,\n#usuao .usuao-pack:focus-visible .usuao-orb__icon{\n  transform:scale(1.04);\n}\n\n#usuao .usuao-pack:hover .usuao-packbar,\n#usuao .usuao-pack:focus-visible .usuao-packbar{\n  opacity:1;\n  transform:translateY(0);\n}\n\n#usuao .usuao-pack:focus-visible .usuao-orb{\n  outline:3px solid var(--brown);\n  outline-offset:4px;\n}\n\n\/* \u00c9crans tactiles (pas de survol) : le nom reste toujours visible *\/\n@media (hover: none){\n  #usuao .usuao-packbar{\n    opacity:1;\n    transform:none;\n  }\n}\n\n\/* Mobile *\/\n@media (max-width:480px){\n  #usuao .usuao-orb{ width:200px; height:200px; }\n  #usuao .usuao-orb__icon{ width:140px; height:140px; }\n  #usuao .usuao-packbar{ min-height:42px; min-width:190px; font-size:16px; }\n}\n\n\/* Animations coup\u00e9es si l\u2019appareil demande moins de mouvement *\/\n@media (prefers-reduced-motion: reduce){\n  #usuao .usuao-orb,\n  #usuao .usuao-orb__ring,\n  #usuao .usuao-orb__icon,\n  #usuao .usuao-packbar{ transition:none; }\n  #usuao .usuao-pack:hover .usuao-orb,\n  #usuao .usuao-pack:focus-visible .usuao-orb,\n  #usuao .usuao-pack:hover .usuao-orb__icon,\n  #usuao .usuao-pack:focus-visible .usuao-orb__icon{ transform:none; }\n}\n<\/style>\n\n<div id=\"usuao\">\n\n  <!-- ===== PACK : Monde Magique =====\n       Pour ajouter un pack : copie tout ce bloc <a>\u2026<\/a> juste en dessous,\n       puis change le lien, l\u2019image et le nom. -->\n  <a class=\"usuao-pack\" href=\"https:\/\/lejournaldelessien.com\/en\/monde-magique\/\">\n    <span class=\"usuao-orb\">\n      <span class=\"usuao-orb__ring\" aria-hidden=\"true\"><\/span>\n      <img loading=\"lazy\" class=\"usuao-orb__icon\"\n           src=\"https:\/\/lejournaldelessien.com\/wp-content\/uploads\/2026\/10\/icone-monde-magique.webp\"\n           alt=\"\" width=\"160\" height=\"160\" decoding=\"async\">\n    <\/span>\n    <span class=\"usuao-packbar\">Realm of Magic<\/span>\n  <\/a>\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Realm of Magic<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/fullwidth.php","meta":{"footnotes":""},"class_list":["post-988","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/lejournaldelessien.com\/en\/wp-json\/wp\/v2\/pages\/988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lejournaldelessien.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lejournaldelessien.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lejournaldelessien.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lejournaldelessien.com\/en\/wp-json\/wp\/v2\/comments?post=988"}],"version-history":[{"count":10,"href":"https:\/\/lejournaldelessien.com\/en\/wp-json\/wp\/v2\/pages\/988\/revisions"}],"predecessor-version":[{"id":1220,"href":"https:\/\/lejournaldelessien.com\/en\/wp-json\/wp\/v2\/pages\/988\/revisions\/1220"}],"wp:attachment":[{"href":"https:\/\/lejournaldelessien.com\/en\/wp-json\/wp\/v2\/media?parent=988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}