/* Les tuiles d'univers : une seule source, chargée par le hub (wetheque.com : accueil, « Tous les thèmes », articles) ET par la page « Mes univers » d'un site.
   Chaque tuile porte l'identité de son univers (papier, encre, motif, forme, ornement, police du nom), choisie par l'attribut data-cle : ajouter un univers = ajouter un bloc ici.
   Une tuile ne dépend jamais de la peau du site qui l'affiche : ses couleurs viennent des variables --t-* de son univers, ses polices sont celles du hub (fixées sur .tuile). */

.tuile{--accent:var(--c1,#2358B8);--titre:"Bricolage Grotesque",system-ui,sans-serif;--texte:Literata,Georgia,serif;font:400 17px/1.55 var(--texte);position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:12px;height:100%;padding:20px 18px 14px;background:var(--surface);color:var(--encre);text-decoration:none;border:1px solid var(--brume);border-radius:16px;box-shadow:var(--ombre-repos);transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),border-color .35s ease}
.tuile::before{content:"";position:absolute;left:18px;right:18px;top:0;height:4px;border-radius:0 0 4px 4px;background:var(--accent)}
.tuile:hover,.tuile:focus-visible{transform:translateY(-3px);box-shadow:var(--ombre-leve);border-color:var(--accent)}
.tuile:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.tuile__tete{display:flex;align-items:center;gap:14px;min-width:0}
.tuile__icone{flex:none;width:56px;height:56px;border-radius:14px;box-shadow:0 3px 10px rgba(0,20,60,.2)}
.tuile__titre{display:grid;gap:2px;min-width:0}
.tuile__nom{font:800 clamp(19px,1.7vw,22px)/1.15 var(--titre);color:var(--encre);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tuile__nom b{font-weight:800;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--accent) 38%,transparent) 62%)}
.tuile__famille{font:700 12px var(--titre);letter-spacing:.07em;text-transform:uppercase;color:var(--doux)}
.tuile__nouveau{margin-left:auto;align-self:flex-start;padding:3px 9px;border-radius:999px;background:var(--orange-fort);color:#fff;font:800 11.5px var(--titre);letter-spacing:.04em;text-transform:uppercase}
.tuile__texte{font-size:15px;line-height:1.5;color:var(--doux);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tuile__pied{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--brume);font-size:13.5px;color:var(--doux)}
.tuile__niveau{display:inline-flex;gap:3px}
.tuile__niveau i{width:8px;height:8px;border-radius:50%;background:var(--brume)}
.tuile__niveau i.on{background:var(--accent)}
.tuile__jouer{margin-left:auto;font:700 15px var(--titre);color:var(--orange-texte)}
/* un nom long passe à la ligne après le point (« transports. / wetheque ») au lieu d'être coupé */
.tuile__nom{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* ===== Chaque tuile prend l'habillage de son univers : papier, encre et motif du site (mêmes dimensions, seules les couleurs changent) ===== */
.tuile[data-cle]{--encre:var(--t-encre);--doux:var(--t-doux);--surface:var(--t-fond);--brume:var(--t-trait);background-image:var(--t-motif)}
.tuile[data-cle] .tuile__jouer{color:color-mix(in srgb,var(--accent) 78%,#000)}
.tuile[data-cle] .tuile__niveau i:not(.on){background:var(--t-trait)}
.tuile[data-cle="metiers"]{--t-fond:#F1F5FD;--t-encre:#0E2F6B;--t-doux:#3D5683;--t-trait:#C3D2EE;--t-motif:repeating-linear-gradient(0deg,rgba(35,88,184,.07) 0 1px,transparent 1px 5px)}
.tuile[data-cle="dico"]{--t-fond:#F8F0DA;--t-encre:#2A2217;--t-doux:#5E5237;--t-trait:#E0CFA0;--t-motif:radial-gradient(rgba(60,40,10,.14) 1px,transparent 1.2px);background-size:5px 5px}
.tuile[data-cle="crimes"]{--t-fond:#F6F1E4;--t-encre:#1E2430;--t-doux:#4D5260;--t-trait:#CFC7AD;--t-motif:repeating-linear-gradient(transparent 0 23px,rgba(60,90,140,.16) 23px 24px)}
.tuile[data-cle="wiki"]{--t-fond:#FFFFFF;--t-encre:#202122;--t-doux:#54595D;--t-trait:#C8CCD1;--t-motif:linear-gradient(rgba(51,102,204,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(51,102,204,.07) 1px,transparent 1px);background-size:18px 18px}
.tuile[data-cle="animaux"]{--t-fond:#EEF0FF;--t-encre:#1B1C3F;--t-doux:#45478A;--t-trait:#C8CCF2;--t-motif:radial-gradient(rgba(255,107,107,.28) 2px,transparent 2.5px);background-size:22px 22px}
.tuile[data-cle="transports"]{--t-fond:#E3ECE7;--t-encre:#14231F;--t-doux:#3B544B;--t-trait:#B6C6BD;--t-motif:repeating-linear-gradient(90deg,rgba(18,61,53,.08) 0 2px,transparent 2px 14px)}

/* ===== Univers « bientôt disponibles » : même tuile, sans lien, un peu estompée ===== */
.tuile--bientot{cursor:default;border-style:dashed}
.tuile--bientot:hover{transform:none;box-shadow:var(--ombre-repos);border-color:var(--brume)}
.tuile__icone--lettre{display:grid;place-items:center;background:var(--accent);color:#fff;font:800 28px var(--titre);text-transform:uppercase}
.tuile__nouveau--bientot{background:transparent;color:var(--doux);border:1px solid var(--brume)}
.tuile__jouer--bientot{color:var(--doux);font-size:14px;font-weight:600}
.tuile[data-cle="espace"]{--t-fond:#0F1F45;--t-encre:#F2F5FF;--t-doux:#B4C2E8;--t-trait:#2D437F;--t-motif:repeating-radial-gradient(circle at 104% -12%,transparent 0 34px,rgba(120,170,255,.20) 34px 35px),radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.4px),radial-gradient(rgba(255,255,255,.3) 1px,transparent 1.4px);background-size:100% 100%,41px 41px,23px 23px;background-position:0 0,0 0,11px 17px}
.tuile[data-cle="monuments"]{--t-fond:#F5EBDA;--t-encre:#3A2A17;--t-doux:#6D5A40;--t-trait:#DCC7A0;--t-motif:linear-gradient(rgba(150,110,60,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(150,110,60,.10) 1px,transparent 1px);background-size:26px 13px}
.tuile[data-cle="mythes"]{--t-fond:#F1EAF8;--t-encre:#2E1A47;--t-doux:#5E4A7C;--t-trait:#D3C3E8;--t-motif:repeating-linear-gradient(45deg,rgba(142,91,201,.09) 0 2px,transparent 2px 12px)}
.tuile[data-cle="sport"]{--t-fond:#F0FAF3;--t-encre:#0F3D22;--t-doux:#3E6B50;--t-trait:#BFE3CB;--t-motif:repeating-linear-gradient(0deg,transparent 0 17px,rgba(47,165,91,.20) 17px 19px)}
.tuile[data-cle="geographie"]{--t-fond:#EAF5FA;--t-encre:#0C3447;--t-doux:#3D6A80;--t-trait:#B5D6E4;--t-motif:repeating-radial-gradient(ellipse at 90% 125%,transparent 0 13px,rgba(43,143,179,.22) 13px 14px),linear-gradient(rgba(43,143,179,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(43,143,179,.10) 1px,transparent 1px);background-size:100% 100%,32px 32px,32px 32px}
.tuile[data-cle="sciences"]{--t-fond:#F1FBFB;--t-encre:#0B3B3B;--t-doux:#3F6E6E;--t-trait:#B3DEDE;--t-motif:linear-gradient(rgba(23,162,162,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(23,162,162,.22) 1px,transparent 1px),linear-gradient(rgba(23,162,162,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(23,162,162,.09) 1px,transparent 1px);background-size:60px 60px,60px 60px,12px 12px,12px 12px}

/* l'étiquette « Bientôt » / « Nouveau » se pose sur le bord haut de la tuile : le nom garde toute la largeur */
.tuile__nouveau{position:absolute;top:-11px;right:14px;margin:0}
.tuile__nom{overflow-wrap:break-word}
/* ===== Une petite carte à droite de la description de chaque univers ===== */
.tuile__corps{display:flex;align-items:center;gap:12px;min-width:0}
.tuile__corps .tuile__texte{flex:1 1 auto;min-width:0;-webkit-line-clamp:5}
.tuile__carte{flex:none;position:relative;top:-20px;margin:0 5px;width:54px;height:auto;border-radius:3px;transform:rotate(5deg);filter:drop-shadow(0 3px 5px rgba(0,20,60,.3))}
/* ===== Univers à venir : le dos d'une carte, à la couleur de l'icône ===== */
.tuile__carte--dos{aspect-ratio:520/728;height:auto;display:grid;place-items:center;border:3px solid color-mix(in srgb,var(--accent) 70%,#fff);border-radius:5px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 2px,transparent 2px 9px),color-mix(in srgb,var(--accent) 62%,#000)}
.tuile__carte--dos::before{content:"";width:60%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.45);box-shadow:0 0 0 3px rgba(255,255,255,.12)}
/* ===== Univers à venir : un habillage propre à chacun ===== */
.tuile[data-cle="ecrivains"]{--t-fond:#FDFBF3;--t-encre:#3B2A20;--t-doux:#6B5646;--t-trait:#E3D3B0;--t-motif:linear-gradient(90deg,transparent 22px,rgba(160,40,55,.30) 22px 23px,transparent 23px 26px,rgba(160,40,55,.30) 26px 27px,transparent 27px),repeating-linear-gradient(transparent 0 21px,rgba(60,90,170,.22) 21px 22px)}
.tuile[data-cle="dirigeants"]{--t-fond:#16284D;--t-encre:#F6EFD8;--t-doux:#C4CCE0;--t-trait:#3A4F82;--t-motif:repeating-linear-gradient(45deg,transparent 0 21px,rgba(230,197,94,.20) 21px 22px),repeating-linear-gradient(-45deg,transparent 0 21px,rgba(230,197,94,.20) 21px 22px)}
.tuile[data-cle="artistes"]{--t-fond:#FFF7F1;--t-encre:#3A1D33;--t-doux:#7A5470;--t-trait:#F0D4E0;--t-motif:radial-gradient(circle at 18% 30%,rgba(217,70,143,.22) 0 7px,transparent 8px),radial-gradient(circle at 78% 22%,rgba(46,168,208,.22) 0 9px,transparent 10px),radial-gradient(circle at 62% 76%,rgba(245,166,35,.28) 0 8px,transparent 9px),radial-gradient(circle at 30% 82%,rgba(76,159,90,.22) 0 6px,transparent 7px)}
/* =====================================================================================================================
   Un bloc par univers, à l'esprit de son site : forme, bordure, ornement (mêmes dimensions pour tous, seul l'habillage change)
   ===================================================================================================================== */
.tuile[data-cle]::after{content:"";position:absolute;pointer-events:none}
/* wiki : l'encadré d'article (infobox) */
.tuile[data-cle="wiki"]{border-radius:2px;border:1px solid #A2A9B1;box-shadow:none;overflow:hidden}
.tuile[data-cle="wiki"]::before{display:none}
.tuile[data-cle="wiki"] .tuile__tete{margin:-20px -18px 0;padding:14px 18px;background:#EAF3FF;border-bottom:1px solid #A2A9B1}
.tuile[data-cle="wiki"] .tuile__nom{font-family:Georgia,"Times New Roman",serif;font-weight:400}
.tuile[data-cle="wiki"] .tuile__icone{border-radius:3px}
/* dico : l'entrée de dictionnaire, avec son signet */
.tuile[data-cle="dico"]{border:3px double #8A7440;border-radius:5px}
.tuile[data-cle="dico"]::before{display:none}
.tuile[data-cle="dico"]::after{top:-3px;right:24px;width:20px;height:38px;background:var(--accent);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.tuile[data-cle="dico"] .tuile__nom{font-family:"Courier New",ui-monospace,monospace;font-weight:700}
.tuile[data-cle="dico"] .tuile__icone{border-radius:6px}
/* animaux : bulle ronde et joyeuse */
.tuile[data-cle="animaux"]{border:3px solid #fff;border-radius:30px 30px 30px 12px;box-shadow:0 6px 0 #C8CCF2}
.tuile[data-cle="animaux"]::before{display:none}
.tuile[data-cle="animaux"] .tuile__icone{border-radius:50%}
.tuile[data-cle="animaux"] .tuile__nom{font-family:ui-rounded,"Nunito","Segoe UI",system-ui,sans-serif;font-weight:900}
/* crimes : la chemise d'un dossier, avec son onglet */
.tuile[data-cle="crimes"]{border:1px solid #CFC7AD;border-radius:3px 12px 3px 3px}
.tuile[data-cle="crimes"]::before{display:none}
.tuile[data-cle="crimes"]::after{content:"DOSSIER";top:-13px;left:16px;padding:3px 12px 2px;background:#E8D9A8;border:1px solid #CFC7AD;border-bottom:0;border-radius:6px 6px 0 0;font:700 10.5px "Courier New",ui-monospace,monospace;letter-spacing:.14em;color:#6B5A2A}
.tuile[data-cle="crimes"] .tuile__nom{font-family:"Courier New",ui-monospace,monospace;font-weight:700}
.tuile[data-cle="crimes"] .tuile__icone{border-radius:3px}
/* métiers : le badge d'accès, avec sa fente */
.tuile[data-cle="metiers"]{border:2px solid #0E2F6B;border-radius:12px}
.tuile[data-cle="metiers"]::before{left:50%;right:auto;top:8px;width:46px;height:9px;margin-left:-23px;border-radius:5px;background:rgba(14,47,107,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
/* transports : le panneau de départ de la gare */
.tuile[data-cle="transports"]{border:3px solid #123D35;border-radius:9px;overflow:hidden}
.tuile[data-cle="transports"]::before{display:none}
.tuile[data-cle="transports"] .tuile__tete{margin:-20px -18px 0;padding:14px 18px;background:#123D35}
.tuile[data-cle="transports"] .tuile__nom,.tuile[data-cle="transports"] .tuile__nom b{color:#fff}
.tuile[data-cle="transports"] .tuile__famille{color:#E3B65A}
.tuile[data-cle="transports"] .tuile__icone{border-radius:50%}
/* espace : un hublot qui brille */
.tuile[data-cle="espace"]{border:2px solid rgba(91,140,255,.65);border-radius:30px;box-shadow:0 0 22px rgba(91,140,255,.35),inset 0 0 26px rgba(91,140,255,.12)}
.tuile[data-cle="espace"]::before{display:none}
.tuile[data-cle="espace"] .tuile__icone{border-radius:50%}
/* monuments : une arche de pierre */
.tuile[data-cle="monuments"]{border:2px solid #C9A877;border-radius:48px 48px 12px 12px}
.tuile[data-cle="monuments"]::before{display:none}
.tuile[data-cle="monuments"] .tuile__nom{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:.02em}
/* mythes : un parchemin à double filet */
.tuile[data-cle="mythes"]{border:1px solid #8E5BC9;border-radius:4px;box-shadow:inset 0 0 0 4px #F1EAF8,inset 0 0 0 5px #8E5BC9}
.tuile[data-cle="mythes"]::before{display:none}
.tuile[data-cle="mythes"] .tuile__nom{font-family:Georgia,"Times New Roman",serif;font-style:italic}
/* dirigeants : un blason aux angles taillés, cerclé d'or */
.tuile[data-cle="dirigeants"]{border:0;border-radius:0;box-shadow:inset 0 0 0 2px #C9A227,inset 0 0 0 5px #16284D,inset 0 0 0 6px rgba(201,162,39,.65);clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px)}
.tuile[data-cle="dirigeants"]::before{display:none}
.tuile[data-cle="dirigeants"] .tuile__nom{font-family:Georgia,"Times New Roman",serif;letter-spacing:.03em}
/* artistes : un tableau dans son cadre doré, avec passe-partout */
.tuile[data-cle="artistes"]{border:7px solid #D3A95E;border-radius:3px;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #E7CFA2,0 6px 14px rgba(120,80,20,.25)}
.tuile[data-cle="artistes"]::before{display:none}
.tuile[data-cle="artistes"] .tuile__icone{border-radius:50% 50% 50% 8px}
/* écrivains : un cahier à spirale, trous sur le côté */
.tuile[data-cle="ecrivains"]{border:1px solid #E3D3B0;border-radius:4px 10px 10px 4px;padding-left:30px}
.tuile[data-cle="ecrivains"]::before{display:none}
.tuile[data-cle="ecrivains"]::after{left:7px;top:10px;bottom:10px;width:12px;background:radial-gradient(circle at 6px 7px,#B9AA88 0 4px,transparent 4.6px) 0 0/12px 24px repeat-y}
.tuile[data-cle="ecrivains"] .tuile__nom{font-family:"Segoe Print","Bradley Hand ITC","Chalkboard SE","Comic Sans MS",cursive;font-weight:700;font-size:19px;letter-spacing:0}
/* sport : une piste d'athlétisme, le damier d'arrivée en haut, un nom en italique gras */
.tuile[data-cle="sport"]{border:3px solid #1F9A52;border-radius:44px 44px 14px 14px;overflow:hidden;box-shadow:inset 0 0 0 3px #fff,0 4px 0 #1F9A52}
.tuile[data-cle="sport"]::before{left:0;right:0;top:0;height:9px;border-radius:0;background:repeating-conic-gradient(#14301F 0 25%,#fff 0 50%) 0 0/9px 9px}
.tuile[data-cle="sport"] .tuile__nom{font-style:italic;font-weight:900;text-transform:uppercase;letter-spacing:.02em}
.tuile[data-cle="sport"] .tuile__icone{border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--accent)}
/* géographie : une carte aux courbes de niveau, avec sa rose des vents */
.tuile[data-cle="geographie"]{border:2px solid #2B8FB3;border-radius:6px;box-shadow:inset 0 0 0 4px #EAF5FA,inset 0 0 0 5px rgba(43,143,179,.5)}
.tuile[data-cle="geographie"]::before{left:auto;right:12px;top:10px;width:26px;height:26px;border-radius:50%;border:2px solid #2B8FB3;background:linear-gradient(45deg,transparent 44%,#D9534F 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#2B8FB3 44% 56%,transparent 56%),#fff}
.tuile[data-cle="geographie"] .tuile__nom{font-family:Georgia,"Times New Roman",serif;font-variant:small-caps;font-weight:700;letter-spacing:.04em}
.tuile[data-cle="geographie"] .tuile__icone{border-radius:50%}
/* sciences : une feuille de papier millimétré, des bulles de fiole, une ombre bleue décalée */
.tuile[data-cle="sciences"]{border:2px solid #17A2A2;border-radius:4px 26px 4px 26px;box-shadow:6px 6px 0 rgba(23,162,162,.28)}
.tuile[data-cle="sciences"]::before{left:auto;right:16px;top:8px;width:44px;height:26px;border-radius:0;background:radial-gradient(circle at 8px 17px,transparent 0 4px,#17A2A2 4.5px 5.5px,transparent 6px),radial-gradient(circle at 24px 9px,transparent 0 6px,#17A2A2 6.5px 7.5px,transparent 8px),radial-gradient(circle at 37px 17px,transparent 0 3px,#17A2A2 3.5px 4.5px,transparent 5px)}
.tuile[data-cle="sciences"] .tuile__nom{font-family:"Share Tech Mono",ui-monospace,Consolas,monospace;font-weight:700;letter-spacing:0}
.tuile[data-cle="sciences"] .tuile__icone{border-radius:8px 50% 8px 50%}
/* ===== Au survol d'un univers, sa petite carte bouge : elle se redresse, se penche de l'autre côté et se soulève ===== */
.tuile__carte{transition:transform .65s cubic-bezier(.22,1,.36,1);will-change:transform}   /* départ doux et arrivée longue, sans rebond : le survol glisse au lieu de sauter */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .tuile:hover .tuile__carte,.tuile:focus-visible .tuile__carte{transform:rotate(-6deg) translateY(-7px) scale(1.1)}
}
@media (prefers-reduced-motion:reduce){.tuile,.tuile__carte{transition:none}}

/* Aucun texte souligné sur une tuile, jamais (normal, survol, focus), quelle que soit la peau du site : le retour du survol est l'élévation, la bordure et l'ombre */
body .tuile,body .tuile:hover,body .tuile:focus-visible,body .tuile *,body .tuile:hover *,body .tuile:focus-visible *{text-decoration:none}