/* Créations des membres — charte ambre #f2a842 (idem gate/commentaires). */ /* --- Bande « contribution » sous le trio Print / Download / Color Online --------------- Action de contribution, pas de consommation : elle doit appartenir au même système que les 3 CTA sans les concurrencer. Tous les tokens (rayon, taille, ombre, transition, translation au survol) sont repris à l'identique de `.sharify-container li a` ; seule la hiérarchie change — bande plus basse, fond pâle plutôt que bloc plein saturé. */ .jc-creations-cta{width:100%;margin:16px 0 0} .jc-creations-cta__btn{ display:flex;align-items:center;justify-content:center;gap:10px; width:100%;min-height:38px;padding:9px 16px; /* ~79 % de la hauteur du trio */ border:2px solid #E8A33D;border-radius:6px; /* même rayon que le trio */ background:#FFF7E6;color:#8A5A10; font:inherit;font-size:14px;font-weight:600;line-height:1.2; box-shadow:0 2px 4px rgba(0,0,0,.1); /* même ombre que le trio */ transition:all .2s ease;cursor:pointer;text-align:center; } .jc-creations-cta__btn:hover,.jc-creations-cta__btn:focus-visible{ background:#FDEDD3;border-color:#D98E20;color:#8A5A10; transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.15); } .jc-creations-cta__btn:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,.1)} .jc-creations-cta__icon{display:flex;align-items:center;justify-content:center;flex:none} .jc-creations-cta__icon svg{display:block;width:22px;height:22px} .jc-creations-cta__text{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:8px} .jc-creations-cta__sub{font-size:13px;font-weight:400;opacity:.75} /* État « armé » : après un téléchargement/impression ou au retour du coloriage en ligne, c'est-à-dire au seul moment où l'utilisateur a réellement quelque chose à publier. */ .jc-creations-cta.is-armed .jc-creations-cta__btn{background:#FCE3B4;border-color:#D98E20} @media (prefers-reduced-motion:no-preference){ .jc-creations-cta.is-armed .jc-creations-cta__btn{animation:jc-cta-pulse 1.6s ease-out 1} } @keyframes jc-cta-pulse{ from{box-shadow:0 0 0 0 rgba(232,163,61,.55),0 2px 4px rgba(0,0,0,.1)} to{box-shadow:0 0 0 12px rgba(232,163,61,0),0 2px 4px rgba(0,0,0,.1)} } @media (max-width:600px){ .jc-creations-cta__text{flex-direction:column;align-items:center;gap:2px} } /* --- Section de la page dessin --- */ .jc-creations{clear:both;margin:34px 0;padding:24px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb} .jc-creations__head h2{margin:0 0 16px;line-height:1.25} .jc-creations__notice{margin:10px 0;padding:10px 12px;border-radius:8px;background:#fff7ed;color:#9a3412} .jc-creations__notice.is-error{background:#fef2f2;color:#991b1b} /* align-items:start — sinon chaque carte s'étire à la hauteur de la plus haute de sa rangée et laisse un grand aplat blanc sous les créations au format paysage. */ .jc-creations__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;align-items:start} .jc-creations__more{display:block;margin:18px auto 0;background:#fff;color:#111!important;border:2px solid #f2a842;border-radius:6px;font-weight:700;padding:9px 18px;cursor:pointer} .jc-creations__more[hidden]{display:none} .jc-creations__more:hover,.jc-creations__more:focus{background:#fdf3e3;color:#111!important} .jc-creation{margin:0;border:1px solid #eef2f7;border-radius:10px;overflow:hidden;background:#fff} .jc-creation__media{display:block;background:#f8fafc;cursor:zoom-in} .jc-creation__media img{display:block;width:100%;height:auto;transition:opacity .15s ease} .jc-creation__media:hover img{opacity:.9} .jc-creation__body{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 10px} .jc-creation__author{flex:1 1 100%;color:#374151;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .jc-creation__author.is-anonymous{color:#9ca3af;font-size:11px;font-weight:400} .jc-creation__rating{display:flex;align-items:center;gap:1px} /* Le thème stylise